convert content to md

888 files changed, 55681 insertions, 66481 deletions

diff --git a/files/fr/web/css/--_star_/index.md b/files/fr/web/css/--_star_/index.md
index 456b7022d5..c54ef30f9a 100644
--- a/files/fr/web/css/--_star_/index.md
+++ b/files/fr/web/css/--_star_/index.md
@@ -9,40 +9,40 @@ tags:
   - Variables CSS
 translation_of: Web/CSS/--*
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>Les noms des propriétés qui sont préfixés par deux tirets : <code>--</code> (par exemple : <code>--nom-exemple</code>) représentent des propriétés personnalisées (<em>custom properties</em>) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction {{cssxref("var")}}.</p>
+Les noms des propriétés qui sont préfixés par deux tirets : `--` (par exemple : `--nom-exemple`) représentent des propriétés personnalisées (_custom properties_) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction {{cssxref("var")}}.
 
-<p>La portée des propriétés personnalisées est celle des éléments sur lesquels elles sont déclarées. Ces personnalisées contribuent à la cascade : la valeur utilisée d'une propriété personnalisée sera déterminée par l'algorithme de la cascade.</p>
+La portée des propriétés personnalisées est celle des éléments sur lesquels elles sont déclarées. Ces personnalisées contribuent à la cascade : la valeur utilisée d'une propriété personnalisée sera déterminée par l'algorithme de la cascade.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">--unmotcle: left;
---unecouleur: #0000ff;
---unevaleurcomplexe: 3px 6px rgb(20, 32, 54);
-</pre>
+    --unmotcle: left;
+    --unecouleur: #0000ff;
+    --unevaleurcomplexe: 3px 6px rgb(20, 32, 54);
 
-<dl>
- <dt><code>&lt;declaration-value&gt;</code></dt>
- <dd>Cette valeur correspond à une séquence de un ou plusieurs fragments tant que la séquence ne contient pas de fragments interdits. Elle représente l'intégralité de ce qu'une déclaration valide peut avoir comme valeur.</dd>
-</dl>
+- `<declaration-value>`
+  - : Cette valeur correspond à une séquence de un ou plusieurs fragments tant que la séquence ne contient pas de fragments interdits. Elle représente l'intégralité de ce qu'une déclaration valide peut avoir comme valeur.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p id="premierParagraphe"&gt;Ce paragraphe devrait être sur fond bleu avec un texte jaune.&lt;/p&gt;
-&lt;p id="secondParagraphe"&gt;Ce paragraphe devrait être sur fond jaune avec un texte bleu.&lt;/p&gt;</pre>
+```html
+<p id="premierParagraphe">Ce paragraphe devrait être sur fond bleu avec un texte jaune.</p>
+<p id="secondParagraphe">Ce paragraphe devrait être sur fond jaune avec un texte bleu.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">:root {
+```css
+:root {
   --premiere-couleur: #488cff;
   --seconde-couleur: #ffff8c;
 }
@@ -55,37 +55,23 @@ translation_of: Web/CSS/--*
 #secondParagraphe {
   background-color: var(--seconde-couleur);
   color: var(--premiere-couleur);
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', 500, 100)}}</p>
+{{EmbedLiveSample('Exemples', 500, 100)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}</td>
-   <td>{{Spec2("CSS3 Variables")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Variables", "#defining-variables", "--*")}} | {{Spec2("CSS3 Variables")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.custom-property")}}</p>
+{{Compat("css.properties.custom-property")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Les_variables_CSS">Utiliser les variables CSS</a></li>
-</ul>
+- [Utiliser les variables CSS](/fr/docs/Web/CSS/Les_variables_CSS)
diff --git a/files/fr/web/css/-moz-context-properties/index.md b/files/fr/web/css/-moz-context-properties/index.md
index c7cf7e321f..5bb568a022 100644
--- a/files/fr/web/css/-moz-context-properties/index.md
+++ b/files/fr/web/css/-moz-context-properties/index.md
@@ -8,13 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-context-properties
 ---
-<div>{{CSSRef}}{{Non-standard_header}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{Non-standard_header}}{{SeeCompatTable}}
 
-<p>Si on intègre une image SVG dans une page web grâce à un élément remplacé (généralement l'élément {{htmlelement("img")}}), il est possible d'appliquer les propriétés de l'élément <code>&lt;img&gt;</code> à l'image SVG (de même pour les autres contextes qui intègreraient une image SVG) grâce à la propriété <code>-moz-context-properties</code>.</p>
+Si on intègre une image SVG dans une page web grâce à un élément remplacé (généralement l'élément {{htmlelement("img")}}), il est possible d'appliquer les propriétés de l'élément `<img>` à l'image SVG (de même pour les autres contextes qui intègreraient une image SVG) grâce à la propriété `-moz-context-properties`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -moz-context-properties: fill;
 -moz-context-properties: fill, stroke;
 
@@ -22,32 +23,31 @@ translation_of: Web/CSS/-moz-context-properties
 -moz-context-properties: inherit;
 -moz-context-properties: initial;
 -moz-context-properties: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>fill</code></dt>
- <dd>Expose la valeur <code>fill</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
- <dt><code>stroke</code></dt>
- <dd>Expose la valeur <code>stroke</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
- <dt><code>fill-opacity</code></dt>
- <dd>Expose la valeur <code>fill-opacity</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
- <dt><code>stroke-opacity</code></dt>
- <dd>Expose la valeur <code>stroke-opacity</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
-</dl>
+- `fill`
+  - : Expose la valeur `fill` appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+- `stroke`
+  - : Expose la valeur `stroke` appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+- `fill-opacity`
+  - : Expose la valeur `fill-opacity` appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
+- `stroke-opacity`
+  - : Expose la valeur `stroke-opacity` appliquée sur l'image afin qu'elle soit appliquée sur le SVG.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on embarque un SVG simple dans un élément <code>&lt;img&gt;</code>.</p>
+Dans cet exemple, on embarque un SVG simple dans un élément `<img>`.
 
-<p>Tout d'abord, on définit les propriétés qu'on souhaite appliquer au SVG grâce à la propriété {{cssxref("-moz-context-properties")}}. Par exemple :</p>
+Tout d'abord, on définit les propriétés qu'on souhaite appliquer au SVG grâce à la propriété {{cssxref("-moz-context-properties")}}. Par exemple :
 
-<pre class="brush: css">img {
+```css
+img {
   width: 100px;
   height: 100px;
   -moz-context-properties: fill, stroke;
@@ -56,26 +56,27 @@ translation_of: Web/CSS/-moz-context-properties
 .img1 {
     fill: lime;
     stroke: purple;
-}</pre>
+}
+```
 
-<p>Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{cssxref("stroke")}} dans le SVG. Par exemple :</p>
+Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{cssxref("stroke")}} dans le SVG. Par exemple :
 
-<pre class="brush: html">&lt;img class="img1" src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;
-                       &lt;rect width='100%' height='100%' stroke-width='30px'
-                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/&gt;&lt;/svg&gt;"&gt;</pre>
+```html
+<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
+                       <rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
+```
 
-<p>Ici, l'attribut <code>src</code> de l'image correspond à une URI de données qui contient une simple image SVG. L'élément <code>&lt;rect&gt;</code> est paramétré afin de récupérer les valeurs <code>fill</code> et <code>stroke</code> telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément <code>&lt;img&gt;</code> grâce aux mots-clés <code>context-fill</code>/<code>context-stroke</code>. On utilise aussi une couleur de secours pour le remplissage (<code>fill</code>) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.</p>
+Ici, l'attribut `src` de l'image correspond à une URI de données qui contient une simple image SVG. L'élément `<rect>` est paramétré afin de récupérer les valeurs `fill` et `stroke` telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément `<img>` grâce aux mots-clés `context-fill`/`context-stroke`. On utilise aussi une couleur de secours pour le remplissage (`fill`) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.
 
-<div class="note">
-<p><strong>Note :</strong> vous pouvez consulter <a href="https://mdn.github.io/css-examples/moz-context-properties/">un exemple complet sur notre dépôt Github</a>.</p>
-</div>
+> **Note :** vous pouvez consulter [un exemple complet sur notre dépôt Github](https://mdn.github.io/css-examples/moz-context-properties/).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété n'est définie dans aucun standard CSS.</p>
+Cette propriété n'est définie dans aucun standard CSS.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-moz-context-properties")}}</p>
+{{Compat("css.properties.-moz-context-properties")}}
diff --git a/files/fr/web/css/-moz-float-edge/index.md b/files/fr/web/css/-moz-float-edge/index.md
index a81710c8d9..4c3eac80dd 100644
--- a/files/fr/web/css/-moz-float-edge/index.md
+++ b/files/fr/web/css/-moz-float-edge/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-float-edge
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-moz-float-edge</code></strong> définit si les propriétés de hauteur et de larguer d'un élément incluent la marge, la bordure et/ou le remplissage (<em>padding</em>).</p>
+La propriété **`-moz-float-edge`** définit si les propriétés de hauteur et de larguer d'un élément incluent la marge, la bordure et/ou le remplissage (_padding_).
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -moz-float-edge: border-box;
 -moz-float-edge: content-box;
 -moz-float-edge: margin-box;
@@ -22,61 +23,61 @@ translation_of: Web/CSS/-moz-float-edge
 -moz-float-edge: inherit;
 -moz-float-edge: initial;
 -moz-float-edge: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>border-box</code></dt>
- <dd>Les propriétés de hauteur et de largeur incluent le contenu, le remplissage et la bordure mais pas la marge.</dd>
- <dt><code>content-box</code></dt>
- <dd>Les propriétés de hauteur et de largeur incluent le contenu, mais pas le remplissage, la bordure et la marge.</dd>
- <dt><code>margin-box</code></dt>
- <dd>Les propriétés de hauteur et de largeur incluent le contenu, le remplissage, la bordure et la marge.</dd>
- <dt><code>padding-box</code></dt>
- <dd>Les propriétés de hauteur et de largeur incluent le contenu et le remplissage mais pas la bordure ni la marge.</dd>
-</dl>
+- `border-box`
+  - : Les propriétés de hauteur et de largeur incluent le contenu, le remplissage et la bordure mais pas la marge.
+- `content-box`
+  - : Les propriétés de hauteur et de largeur incluent le contenu, mais pas le remplissage, la bordure et la marge.
+- `margin-box`
+  - : Les propriétés de hauteur et de largeur incluent le contenu, le remplissage, la bordure et la marge.
+- `padding-box`
+  - : Les propriétés de hauteur et de largeur incluent le contenu et le remplissage mais pas la bordure ni la marge.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.box {
+```css
+.box {
   display: block;
   height: 5px;
   margin: 0.5em auto 0.5em auto;
   color: gray;
   -moz-float-edge: margin-box;
   box-sizing: border-box;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="html">&lt;div class="box"&gt;
-   &lt;p&gt;
+```html
+<div class="box">
+   <p>
       Lorem ipsum dolor sit amet,
       consectetur adipiscing elit.
-   &lt;/p&gt;
-&lt;/div&gt;</pre>
+   </p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{bug(432891)}}</li>
-</ul>
+- {{bug(432891)}}
diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.md b/files/fr/web/css/-moz-force-broken-image-icon/index.md
index 58e1ca993b..0fdd7683a8 100644
--- a/files/fr/web/css/-moz-force-broken-image-icon/index.md
+++ b/files/fr/web/css/-moz-force-broken-image-icon/index.md
@@ -8,63 +8,59 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-force-broken-image-icon
 ---
-<div>{{Non-standard_header}}{{ CSSRef}}</div>
+{{Non-standard_header}}{{ CSSRef}}
 
-<p>La propriété <strong><code>-moz-force-broken-image-icon</code></strong> est une propriété CSS non-standard. Lorsqu'elle vaut <code>1</code>, elle permet de forcer l'affichage d'une icône d'image brisée même si l'image possède un attribut {{HTMLElement("img","<code>alt</code>","#attr-alt")}}. Lorsqu'elle vaut <code>0</code>, l'image est utilisée de façon normale et n'affichera que l'attribut <code>alt</code>.</p>
+La propriété **`-moz-force-broken-image-icon`** est une propriété CSS non-standard. Lorsqu'elle vaut `1`, elle permet de forcer l'affichage d'une icône d'image brisée même si l'image possède un attribut {{HTMLElement("img","<code>alt</code>","#attr-alt")}}. Lorsqu'elle vaut `0`, l'image est utilisée de façon normale et n'affichera que l'attribut `alt`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;integer&gt;")}}</dt>
- <dd>Une valeur de 1 indique qu'une icône d'image brisée est affichée même si l'image possède un attribut {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}}. <code>0</code> indique que seul l'attribut <code>alt</code> doit être affiché.
- <div class="note">
-   <p><strong>Note :</strong> Même si la valeur est <code>1</code>, l'attribut <code>alt</code> sera affiché. Voir ci-après.</p></div>
- </dd>
-</dl>
+- {{cssxref("&lt;integer&gt;")}}
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : Une valeur de 1 indique qu'une icône d'image brisée est affichée même si l'image possède un attribut {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}}. `0` indique que seul l'attribut `alt` doit être affiché.
+
+    > **Note :** Même si la valeur est `1`, l'attribut `alt` sera affiché. Voir ci-après.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css;">img {
+```css
+img {
   -moz-force-broken-image-icon: 1;
   height: 100px;
   width: 100px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html;">&lt;img src='/lien/vers/image/cassée.png' alt='Un lien vers une image cassée'&gt;</pre>
+```html
+<img src='/lien/vers/image/cassée.png' alt='Un lien vers une image cassée'>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}}</p>
+{{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}}
 
-<div class="note">
-  <p><strong>Note :</strong> Si <code>-moz-force-broken-image-icon</code> a la valeur <code>1</code> et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut <code>alt</code> sera masqué.</p>
-</div>
+> **Note :** Si `-moz-force-broken-image-icon` a la valeur `1` et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut `alt` sera masqué.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Cette propriété ne fonctionne que sur les navigateurs basés sur Gecko.</li>
- <li>L'usage de cette propriété n'est pas recommandée. Une propriété <em>alt</em> adéquate devrait être utilisé.</li>
-</ul>
+- Cette propriété ne fonctionne que sur les navigateurs basés sur Gecko.
+- L'usage de cette propriété n'est pas recommandée. Une propriété _alt_ adéquate devrait être utilisé.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{Bug(58646)}}</li>
-</ul>
+- {{Bug(58646)}}
diff --git a/files/fr/web/css/-moz-image-rect/index.md b/files/fr/web/css/-moz-image-rect/index.md
index 45b4ec33bf..0a0123b4e3 100644
--- a/files/fr/web/css/-moz-image-rect/index.md
+++ b/files/fr/web/css/-moz-image-rect/index.md
@@ -8,44 +8,43 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-image-rect
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>La propriété <strong><code>-moz-image-rect</code></strong> permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs <em>sprites</em> à différentes fins, ce qui permet de diminuer le nombre de transfert réseau.</p>
+La propriété **`-moz-image-rect`** permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs _sprites_ à différentes fins, ce qui permet de diminuer le nombre de transfert réseau.
 
-<p>Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à <code>-moz-image-rect</code>, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS.</p>
+Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à `-moz-image-rect`, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS.
 
-<p>La syntaxe de cette propriété est similaire à la fonction <a href="/fr/docs/Web/CSS/shape#La_fonction_rect()"><code>rect()</code></a> qui génère une valeur de type {{cssxref("&lt;shape&gt;")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.</p>
+La syntaxe de cette propriété est similaire à la fonction [`rect()`](</fr/docs/Web/CSS/shape#La_fonction_rect()>) qui génère une valeur de type {{cssxref("&lt;shape&gt;")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">-moz-image-rect({{cssxref("&lt;uri&gt;")}}, <em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre>
+    -moz-image-rect({{cssxref("&lt;uri&gt;")}}, top, right, bottom, left);
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;uri&gt;")}}</dt>
- <dd>L'URI de l'image dont on veut obtenir une portion.</dd>
- <dt><code>top</code></dt>
- <dd>La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
- <dt><code>right</code></dt>
- <dd>La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
- <dt><code>bottom</code></dt>
- <dd>La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
- <dt><code>left</code></dt>
- <dd>La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
-</dl>
+- {{cssxref("&lt;uri&gt;")}}
+  - : L'URI de l'image dont on veut obtenir une portion.
+- `top`
+  - : La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.
+- `right`
+  - : La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.
+- `bottom`
+  - : La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.
+- `left`
+  - : La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs.</p>
+Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   width:267px;
   height:272px;
   top:100px;
@@ -83,26 +82,28 @@ translation_of: Web/CSS/-moz-image-rect
   height:136px;
   position:absolute;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="container" onclick="rotate()"&gt;
-  &lt;div id="box1" style="left:0px;top:0px;"&gt;Top left&lt;/div&gt;
-  &lt;div id="box2" style="left:133px;top:0px;"&gt;Top right&lt;/div&gt;
-  &lt;div id="box3" style="left:0px;top:136px;"&gt;Bottom left&lt;/div&gt;
-  &lt;div id="box4" style="left:133px;top:136px;"&gt;Bottom right&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div id="container" onclick="rotate()">
+  <div id="box1" style="left:0px;top:0px;">Top left</div>
+  <div id="box2" style="left:133px;top:0px;">Top right</div>
+  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
+  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
+</div>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush:js">function rotate() {
+```js
+function rotate() {
   var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
 
   // Now that we've saved the last one, start rotating
 
-  for (var i=1; i&lt;=4; i++) {
+  for (var i=1; i<=4; i++) {
     var curId = "box" + i;
 
     // Shift the background images
@@ -111,14 +112,15 @@ translation_of: Web/CSS/-moz-image-rect
     document.getElementById(curId).style.backgroundImage = prevStyle;
     prevStyle = curStyle;
   }
-}</pre>
+}
+```
 
-<p>Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité.</p>
+Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité.
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","400","400")}}</p>
+{{EmbedLiveSample("Exemples","400","400")}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.-moz-image-rect")}}</p>
+{{Compat("css.types.-moz-image-rect")}}
diff --git a/files/fr/web/css/-moz-image-region/index.md b/files/fr/web/css/-moz-image-region/index.md
index b63d4192c2..ea42034254 100644
--- a/files/fr/web/css/-moz-image-region/index.md
+++ b/files/fr/web/css/-moz-image-region/index.md
@@ -8,45 +8,44 @@ tags:
   - Référence(2)
 translation_of: Web/CSS/-moz-image-region
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>Pour certains éléments XUL et les pseudo-éléments qui utilisent une image grâce à la propriété {{cssxref("list-style-image")}}, la propriété <code><strong>-moz-image-region</strong></code> définit la partie de l'image qui est utilisée plutôt que l'image toute entière. Cela permet d'utiliser des images qui regroupent des <em>sprites</em> afin d'améliorer les performances.</p>
+Pour certains éléments XUL et les pseudo-éléments qui utilisent une image grâce à la propriété {{cssxref("list-style-image")}}, la propriété **`-moz-image-region`** définit la partie de l'image qui est utilisée plutôt que l'image toute entière. Cela permet d'utiliser des images qui regroupent des _sprites_ afin d'améliorer les performances.
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 -moz-image-region: auto;
 
-/* Valeur de type &lt;shape&gt; */
+/* Valeur de type <shape> */
 -moz-image-region: rect(0, 8px, 4px, 4px);
 
 /* Valeurs globales */
 -moz-image-region: inherit;
 -moz-image-region: initial;
--moz-image-region: unset;</pre>
+-moz-image-region: unset;
+```
 
-<p>La syntaxe de cette propriété est semblable à la syntaxe de la propriété {{cssxref("clip")}}. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.</p>
+La syntaxe de cette propriété est semblable à la syntaxe de la propriété {{cssxref("clip")}}. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.
 
-<div class="note">
-<p><strong>Note :</strong> Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.</p>
-</div>
+> **Note :** Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>La région pour l'image est définie automatiquement</dd>
- <dt><code>&lt;shape&gt;</code></dt>
- <dd>Une forme définit la portion d'image qui doit être utilisée. La fonction <code>rect()</code> permet de définir un rectangle. Les paramètres de cette fonction correspondent respectivement aux décalages des bords haut, droit, bas et gauche. Voir {{cssxref("&lt;shape&gt;")}}.</dd>
-</dl>
+- `auto`
+  - : La région pour l'image est définie automatiquement
+- `<shape>`
+  - : Une forme définit la portion d'image qui doit être utilisée. La fonction `rect()` permet de définir un rectangle. Les paramètres de cette fonction correspondent respectivement aux décalages des bords haut, droit, bas et gauche. Voir {{cssxref("&lt;shape&gt;")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:css">#example-button {
+```css
+#example-button {
   /* display only the 4x4 area from the top left of this image */
   list-style-image: url("chrome://example/skin/example.png");
   -moz-image-region: rect(0px, 4px, 4px, 0px);
@@ -54,20 +53,19 @@ translation_of: Web/CSS/-moz-image-region
 #example-button:hover {
   /* use the 4x4 area to the right of the first for the hovered button */
   -moz-image-region: rect(0px, 8px, 4px, 4px);
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-moz-image-region")}}</p>
+{{Compat("css.properties.-moz-image-region")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-moz-image-rect")}}</li>
-</ul>
+- {{cssxref("-moz-image-rect")}}
diff --git a/files/fr/web/css/-moz-orient/index.md b/files/fr/web/css/-moz-orient/index.md
index 4fd2c9583f..975021ef81 100644
--- a/files/fr/web/css/-moz-orient/index.md
+++ b/files/fr/web/css/-moz-orient/index.md
@@ -8,71 +8,71 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-orient
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-moz-orient</code></strong> définit l'orientation de l'élément sur lequel elle est appliquée.</p>
+La propriété **`-moz-orient`** définit l'orientation de l'élément sur lequel elle est appliquée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>moz-orient</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+La propriété `moz-orient` est définie avec un mot-clé parmi ceux de la liste ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>inline</code></dt>
- <dd>L'élément est affiché dans la même direction que l'axe du texte : il est horizontal si le mode d'écriture est horizontal et vertical pour un mode d'écriture vertical.</dd>
- <dt><code>block</code></dt>
- <dd>L'élément est affiché dans la direction perpendiculaire à l'axe du texte : il est vertical si le mode d'écriture est horizontal et horizontal pour un mode d'écriture vertical.</dd>
- <dt><code>horizontal</code></dt>
- <dd>L'élément est affiché horizontalement.</dd>
- <dt><code>vertical</code></dt>
- <dd>L'élément est affiché verticalement.</dd>
-</dl>
+- `inline`
+  - : L'élément est affiché dans la même direction que l'axe du texte : il est horizontal si le mode d'écriture est horizontal et vertical pour un mode d'écriture vertical.
+- `block`
+  - : L'élément est affiché dans la direction perpendiculaire à l'axe du texte : il est vertical si le mode d'écriture est horizontal et horizontal pour un mode d'écriture vertical.
+- `horizontal`
+  - : L'élément est affiché horizontalement.
+- `vertical`
+  - : L'élément est affiché verticalement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   La barre de progression suivante est
   horizontale (le comportement par défaut) :
-&lt;/p&gt;
-&lt;progress max="100" value="75"&gt;&lt;/progress&gt;
+</p>
+<progress max="100" value="75"></progress>
 
-&lt;p&gt;
+<p>
   La barre de progression suivante
   est verticale :
-&lt;/p&gt;
-&lt;progress class="vert" max="100" value="75"&gt;&lt;/progress&gt;</pre>
+</p>
+<progress class="vert" max="100" value="75"></progress>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.vert {
+```css
+.vert {
   -moz-orient: vertical;
   width: 16px;
   height: 150px;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","200","360")}}</p>
+{{EmbedLiveSample("Exemples","200","360")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Bien que <a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">proposée</a> au W3C, cette propriété ne fait partie d'aucune spécification standard. C'est donc une propriété propriétaire liée à Mozilla/Gecko.</p>
+Bien que [proposée](https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html) au W3C, cette propriété ne fait partie d'aucune spécification standard. C'est donc une propriété propriétaire liée à Mozilla/Gecko.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-moz-orient")}}</p>
+{{Compat("css.properties.-moz-orient")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("box-orient")}}</li>
-</ul>
+- {{cssxref("box-orient")}}
diff --git a/files/fr/web/css/-moz-outline-radius-bottomleft/index.md b/files/fr/web/css/-moz-outline-radius-bottomleft/index.md
index 4b4cbfb209..1880627833 100644
--- a/files/fr/web/css/-moz-outline-radius-bottomleft/index.md
+++ b/files/fr/web/css/-moz-outline-radius-bottomleft/index.md
@@ -8,42 +8,42 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-outline-radius-bottomleft
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>bottomleft</code></strong> définit l'arrondi du coin inférieur gauche du contour.</p>
+Dans les applications Mozilla, la propriété **`-moz-outline-radius-`\*\***`bottomleft`\*\* définit l'arrondi du coin inférieur gauche du contour.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Regardez le coin inférieur gauche de ce paragraphe.&lt;/p&gt;</pre>
+```html
+<p>Regardez le coin inférieur gauche de ce paragraphe.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 5px;
   border: solid cyan;
   outline: dotted red;
   -moz-outline-radius-bottomleft: 2em;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
-</div>
+> **Note :** Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
- <li>La propriété standard {{cssxref("outline")}}</li>
-</ul>
+- La propriété raccourcie {{cssxref("-moz-outline-radius")}}
+- La propriété standard {{cssxref("outline")}}
diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.md b/files/fr/web/css/-moz-outline-radius-bottomright/index.md
index 8c4e1a813a..335df93637 100644
--- a/files/fr/web/css/-moz-outline-radius-bottomright/index.md
+++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.md
@@ -8,42 +8,42 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-outline-radius-bottomright
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>bottomright</code></strong> définit l'arrondi du coin inférieur droit du contour.</p>
+Dans les applications Mozilla, la propriété **`-moz-outline-radius-`\*\***`bottomright`\*\* définit l'arrondi du coin inférieur droit du contour.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Regardez le coin inférieur droit de ce paragraphe.&lt;/p&gt;</pre>
+```html
+<p>Regardez le coin inférieur droit de ce paragraphe.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 5px;
   border: solid cyan;
   outline: dotted red;
   -moz-outline-radius-bottomright: 2em;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Example")}}</p>
+{{EmbedLiveSample("Example")}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
-</div>
+> **Note :** Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
- <li>La propriété standard {{cssxref("outline")}}</li>
-</ul>
+- La propriété raccourcie {{cssxref("-moz-outline-radius")}}
+- La propriété standard {{cssxref("outline")}}
diff --git a/files/fr/web/css/-moz-outline-radius-topleft/index.md b/files/fr/web/css/-moz-outline-radius-topleft/index.md
index 825b0b8e08..4899122c56 100644
--- a/files/fr/web/css/-moz-outline-radius-topleft/index.md
+++ b/files/fr/web/css/-moz-outline-radius-topleft/index.md
@@ -8,42 +8,42 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-outline-radius-topleft
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>topleft</code></strong> définit l'arrondi du coin supérieur gauche du contour.</p>
+Dans les applications Mozilla, la propriété **`-moz-outline-radius-`\*\***`topleft`\*\* définit l'arrondi du coin supérieur gauche du contour.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Observez le coin supérieur gauche de ce paragraphe.&lt;/p&gt;</pre>
+```html
+<p>Observez le coin supérieur gauche de ce paragraphe.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 5px;
   border: solid cyan;
   outline: dotted red;
   -moz-outline-radius-topleft: 2em;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
-</div>
+> **Note :** Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
- <li>La propriété standard {{cssxref("outline")}}</li>
-</ul>
+- La propriété raccourcie {{cssxref("-moz-outline-radius")}}
+- La propriété standard {{cssxref("outline")}}
diff --git a/files/fr/web/css/-moz-outline-radius-topright/index.md b/files/fr/web/css/-moz-outline-radius-topright/index.md
index df414e6d10..a9904a7e43 100644
--- a/files/fr/web/css/-moz-outline-radius-topright/index.md
+++ b/files/fr/web/css/-moz-outline-radius-topright/index.md
@@ -8,42 +8,42 @@ tags:
   - Référence(2)
 translation_of: Web/CSS/-moz-outline-radius-topright
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>topright</code></strong> définit l'arrondi du coin supérieur droit du contour.</p>
+Dans les applications Mozilla, la propriété **`-moz-outline-radius-`\*\***`topright`\*\* définit l'arrondi du coin supérieur droit du contour.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Observez le coin supérieur droit de ce paragraphe.&lt;/p&gt;</pre>
+```html
+<p>Observez le coin supérieur droit de ce paragraphe.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 5px;
   border: solid cyan;
   outline: dotted red;
   -moz-outline-radius-topright: 2em;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
-</div>
+> **Note :** Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
- <li>La propriété standard {{cssxref("outline")}}</li>
-</ul>
+- La propriété raccourcie {{cssxref("-moz-outline-radius")}}
+- La propriété standard {{cssxref("outline")}}
diff --git a/files/fr/web/css/-moz-outline-radius/index.md b/files/fr/web/css/-moz-outline-radius/index.md
index f91a602fcb..574249a9c9 100644
--- a/files/fr/web/css/-moz-outline-radius/index.md
+++ b/files/fr/web/css/-moz-outline-radius/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-outline-radius
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>Dans les applications Mozilla (ex. Firefox), la propriété <strong><code>-moz-outline-radius</code></strong> peut être utilisée afin que le contour dessiné autour d'un élément ait des angles arrondis. Le contour ({{cssxref("outline")}}) est dessiné autour des éléments pour les faire ressortir.</p>
+Dans les applications Mozilla (ex. Firefox), la propriété **`-moz-outline-radius`** peut être utilisée afin que le contour dessiné autour d'un élément ait des angles arrondis. Le contour ({{cssxref("outline")}}) est dessiné autour des éléments pour les faire ressortir.
 
-<pre class="brush:css no-line-numbers">/* Une seule valeur */
+```css
+/* Une seule valeur */
 -moz-outline-radius: 25px;
 
 /* Deux valeurs */
@@ -28,45 +29,40 @@ translation_of: Web/CSS/-moz-outline-radius
 -moz-outline-radius: inherit;
 -moz-outline-radius: initial;
 -moz-outline-radius: unset;
-</pre>
+```
 
-<p>La propriété <code>-moz-outline-radius</code> est une propriété raccourcie qui permet de définir les quatre propriétés destinées à chacun des angles {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} et {{cssxref("-moz-outline-radius-bottomleft")}}.</p>
+La propriété `-moz-outline-radius` est une propriété raccourcie qui permet de définir les quatre propriétés destinées à chacun des angles {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} et {{cssxref("-moz-outline-radius-bottomleft")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<div class="note">
-  <p><strong>Note :</strong> Les valeurs pour les coefficients elliptiques et les valeurs de type <code>&lt;percentage&gt;</code> respectent la même syntaxe que pour {{cssxref("border-radius")}}.</p>
-</div>
+> **Note :** Les valeurs pour les coefficients elliptiques et les valeurs de type `<percentage>` respectent la même syntaxe que pour {{cssxref("border-radius")}}.
 
-<p>Une, deux, trois ou quatre valeurs <code>&lt;outline-radius&gt;</code> dont chacune peut être de type :</p>
+Une, deux, trois ou quatre valeurs `<outline-radius>` dont chacune peut être de type :
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Voir {{cssxref("&lt;length&gt;")}} pour les valeurs possibles.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Voir {{cssxref("&lt;percentage&gt;")}}, voir {{cssxref("border-radius")}} pour plus de détails sur la proportionnalité des pourcentages.</dd>
-</dl>
+- `<length>`
+  - : Voir {{cssxref("&lt;length&gt;")}} pour les valeurs possibles.
+- `<percentage>`
+  - : Voir {{cssxref("&lt;percentage&gt;")}}, voir {{cssxref("border-radius")}} pour plus de détails sur la proportionnalité des pourcentages.
 
-<h3 id="Gestion_des_valeurs_multiples">Gestion des valeurs multiples :</h3>
+### Gestion des valeurs multiples :
 
-<ul>
- <li>Si une seule valeur est définie, celle-ci s'applique pour les 4 angles.</li>
- <li>Si deux valeurs sont fournies, la première s'applique aux angles en haut à gauche et en bas à droite et la seconde s'applique aux angles en haut à droite et en bas à gauche.</li>
- <li>Si trois valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième aux angles en haut à droite et en bas à gauche et la troisième s'applique à l'angle en bas à droite.</li>
- <li>Si quatre valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième en haut à droite, la troisième en bas à droite et la quatrième en bas à gauche.</li>
-</ul>
+- Si une seule valeur est définie, celle-ci s'applique pour les 4 angles.
+- Si deux valeurs sont fournies, la première s'applique aux angles en haut à gauche et en bas à droite et la seconde s'applique aux angles en haut à droite et en bas à gauche.
+- Si trois valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième aux angles en haut à droite et en bas à gauche et la troisième s'applique à l'angle en bas à droite.
+- Si quatre valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième en haut à droite, la troisième en bas à droite et la quatrième en bas à gauche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple1 {
+```css
+.exemple1 {
   border: 1px solid black;
   outline: dotted red;
   -moz-outline-radius: 12% 1em 25px;
@@ -79,39 +75,37 @@ translation_of: Web/CSS/-moz-outline-radius
   -moz-outline-radius-topright: 1em;
   -moz-outline-radius-bottomright: 35px;
   -moz-outline-radius-bottomleft: 1em;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple1"&gt;
+```html
+<p class="exemple1">
   La propriété outline-style en utilisant -moz-outline-radius
-&lt;/p&gt;
-&lt;p class="exemple2"&gt;
+</p>
+<p class="exemple2">
   Un exemple légèrement plus compliqué avec -moz-outline-radius-xxx
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat"><strong>Résultat</strong></h3>
+### **Résultat**
 
-<p>{{EmbedLiveSample('Exemples', '200', '200')}}</p>
+{{EmbedLiveSample('Exemples', '200', '200')}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
-</div>
+> **Note :** Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Les coins pour lesquels on utilise la valeur <code>dotted</code> ou <code>dashed</code> sont affichés avec des lignes pleines (cf. {{bug("382721")}}) jusqu'à Firefox 50.</li>
- <li>Cette propriété sera vraisemblablement abandonnée dans les prochaines versions de Gecko (cf. {{bug("593717")}}).</li>
-</ul>
+- Les coins pour lesquels on utilise la valeur `dotted` ou `dashed` sont affichés avec des lignes pleines (cf. {{bug("382721")}}) jusqu'à Firefox 50.
+- Cette propriété sera vraisemblablement abandonnée dans les prochaines versions de Gecko (cf. {{bug("593717")}}).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-moz-outline-radius")}}</p>
+{{Compat("css.properties.-moz-outline-radius")}}
diff --git a/files/fr/web/css/-moz-user-focus/index.md b/files/fr/web/css/-moz-user-focus/index.md
index 62492eb50c..9c79636659 100644
--- a/files/fr/web/css/-moz-user-focus/index.md
+++ b/files/fr/web/css/-moz-user-focus/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-user-focus
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-moz-user-focus</code></strong> est utilisée pour indiquer si l'élément peut recevoir le focus.</p>
+La propriété **`-moz-user-focus`** est utilisée pour indiquer si l'élément peut recevoir le focus.
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -moz-user-focus: normal;
 -moz-user-focus: ignore;
 
@@ -20,56 +21,53 @@ translation_of: Web/CSS/-moz-user-focus
 -moz-user-focus: inherit;
 -moz-user-focus: initial;
 -moz-user-focus: unset;
-</pre>
+```
 
-<p>En utilisant la valeur <code>ignore</code>, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation.</p>
+En utilisant la valeur `ignore`, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément <code>textbox</code> en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du <code>textbox</code> et que l'élément reçoit le focus. On peut empêcher le <code>textbox</code> de prendre le focus clavier en passant son index de tabulation à <code>-1</code>, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements <code>mousedown</code>.</p>
-</div>
+> **Note :** Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément `textbox` en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du `textbox` et que l'élément reçoit le focus. On peut empêcher le `textbox` de prendre le focus clavier en passant son index de tabulation à `-1`, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements `mousedown`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>ignore</code></dt>
- <dd>L'élément n'accepte pas le focus (au clavier ou au pointeur) et sera sauté lors de la navigation à la tabulation.</dd>
- <dt><code>normal</code></dt>
- <dd>L'élément peut recevoir le focus normalement.</dd>
-</dl>
+- `ignore`
+  - : L'élément n'accepte pas le focus (au clavier ou au pointeur) et sera sauté lors de la navigation à la tabulation.
+- `normal`
+  - : L'élément peut recevoir le focus normalement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;input class="ignored" value="L'utilisateur ne peut pas placer le focus sur cet élément."&gt;
-</pre>
+```html
+<input class="ignored" value="L'utilisateur ne peut pas placer le focus sur cet élément.">
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.ignored {
+```css
+.ignored {
   -moz-user-focus: ignore;
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : <code>user-focus</code> a été <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs</a> mais a été rejetée par le groupe de travail.</p>
+Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : `user-focus` a été [proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs](https://www.w3.org/TR/2000/WD-css3-userint-20000216) mais a été rejetée par le groupe de travail.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-moz-user-focus")}}</p>
+{{Compat("css.properties.-moz-user-focus")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-moz-user-input")}}</li>
- <li>{{cssxref("-moz-user-modify")}}</li>
- <li>{{cssxref("-moz-user-select")}}</li>
-</ul>
+- {{cssxref("-moz-user-input")}}
+- {{cssxref("-moz-user-modify")}}
+- {{cssxref("-moz-user-select")}}
diff --git a/files/fr/web/css/-moz-user-input/index.md b/files/fr/web/css/-moz-user-input/index.md
index 75138e739c..8eaa985962 100644
--- a/files/fr/web/css/-moz-user-input/index.md
+++ b/files/fr/web/css/-moz-user-input/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-moz-user-input
 ---
-<div>{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(60)}}</div>
+{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(60)}}
 
-<p>Pour les applications Mozilla, la propriété <strong><code>-moz-user-input</code></strong> détermine si l'utilisateur peut effectuer une saisie sur l'élément (bien que rejetée, cette propriété a contribué à la construction de la propriété standard {{cssxref("user-input")}}.</p>
+Pour les applications Mozilla, la propriété **`-moz-user-input`** détermine si l'utilisateur peut effectuer une saisie sur l'élément (bien que rejetée, cette propriété a contribué à la construction de la propriété standard {{cssxref("user-input")}}.
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -moz-user-input: none;
 -moz-user-input: enabled;
 -moz-user-input: disabled;
@@ -21,50 +22,47 @@ translation_of: Web/CSS/-moz-user-input
 -moz-user-input: inherit;
 -moz-user-input: initial;
 -moz-user-input: unset;
-</pre>
+```
 
-<p>Pour les éléments qui acceptent la saisie par défaut (ex. les élémetns {{HTMLElement("textarea")}}), la valeur initiale de <code>-moz-user-input</code> sera <code>enabled</code>.</p>
+Pour les éléments qui acceptent la saisie par défaut (ex. les élémetns {{HTMLElement("textarea")}}), la valeur initiale de `-moz-user-input` sera `enabled`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>L'élément ne réagit pas aux saisies de l'utilisateur et il ne prend jamais l'état {{cssxref(":active")}}.</dd>
- <dt><code>enabled</code></dt>
- <dd>L'utilisateur peut effectuer une saisie sur cet élément. Pour les boîtes de texte, c'est le comportement par défaut. <strong>Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).</strong></dd>
- <dt><code>disabled</code></dt>
- <dd>L'utilisateur ne peut pas effectuer de saisie sur cet élément (cela n'est pas équivalent à utiliser l'attribut {{XULAttr("disabled")}} avec la valeur <code>true</code> car l'élément est dessiné normalement). <strong>Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).</strong></dd>
-</dl>
+- `none`
+  - : L'élément ne réagit pas aux saisies de l'utilisateur et il ne prend jamais l'état {{cssxref(":active")}}.
+- `enabled`
+  - : L'utilisateur peut effectuer une saisie sur cet élément. Pour les boîtes de texte, c'est le comportement par défaut. **Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).**
+- `disabled`
+  - : L'utilisateur ne peut pas effectuer de saisie sur cet élément (cela n'est pas équivalent à utiliser l'attribut {{XULAttr("disabled")}} avec la valeur `true` car l'élément est dessiné normalement). **Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).**
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:css">input.exemple {
+```css
+input.exemple {
   /* L'utilisateur pourra sélectionner le texte
      mais ne pourra pas le modifier. */
   -moz-user-input: disabled;
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : <code>user-focus</code> a été <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs</a> mais a été rejetée par le groupe de travail.</p>
+Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : `user-focus` a été [proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs](https://www.w3.org/TR/2000/WD-css3-userint-20000216) mais a été rejetée par le groupe de travail.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-moz-user-input")}}</p>
+{{Compat("css.properties.-moz-user-input")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-moz-user-focus")}}</li>
- <li>{{cssxref("-moz-user-modify")}}</li>
- <li>{{cssxref("-moz-user-select")}}</li>
-</ul>
+- {{cssxref("-moz-user-focus")}}
+- {{cssxref("-moz-user-modify")}}
+- {{cssxref("-moz-user-select")}}
diff --git a/files/fr/web/css/-webkit-border-before/index.md b/files/fr/web/css/-webkit-border-before/index.md
index 9e383a0fb7..343d4d76db 100644
--- a/files/fr/web/css/-webkit-border-before/index.md
+++ b/files/fr/web/css/-webkit-border-before/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-border-before
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-border-before</code></strong> est une propriété raccourcie qui permet de définir les propriétés de la bordure pour le début d'un élément dans l'axe de bloc (l'axe logique orthogonal à l'axe de lecture).</p>
+La propriété **`-webkit-border-before`** est une propriété raccourcie qui permet de définir les propriétés de la bordure pour le début d'un élément dans l'axe de bloc (l'axe logique orthogonal à l'axe de lecture).
 
-<pre class="brush:css no-line-numbers">/* Valeurs décrivant une bordure */
+```css
+/* Valeurs décrivant une bordure */
 -webkit-border-before: 1px;
 -webkit-border-before: 2px dotted;
 -webkit-border-before: medium dashed blue;
@@ -21,38 +22,37 @@ translation_of: Web/CSS/-webkit-border-before
 -webkit-border-before: inherit;
 -webkit-border-before: initial;
 -webkit-border-before: unset;
-</pre>
+```
 
-<p><code>-webkit-border-before</code> peut ainsi être utilisée pour définir les valeurs d'une ou plusieurs de ces propriétés : {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, et {{cssxref("-webkit-border-before-color")}}. Cette propriété est une propriété logique qui correspond à une propriété physique selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}ou {{cssxref("border-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+`-webkit-border-before` peut ainsi être utilisée pour définir les valeurs d'une ou plusieurs de ces propriétés : {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, et {{cssxref("-webkit-border-before-color")}}. Cette propriété est une propriété logique qui correspond à une propriété physique selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}ou {{cssxref("border-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>Cette propriété est à mettre en relation avec les propriétés {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, et {{cssxref("-webkit-border-end")}} qui définissent les autres bordures de l'élément.</p>
+Cette propriété est à mettre en relation avec les propriétés {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, et {{cssxref("-webkit-border-end")}} qui définissent les autres bordures de l'élément.
 
-<p>L'équivalent standard de cette propriété est la propriété non-préfixée {{cssxref("border-block-start")}}.</p>
+L'équivalent standard de cette propriété est la propriété non-préfixée {{cssxref("border-block-start")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :
 
-<dl>
- <dt><code>&lt;border-width&gt;</code></dt>
- <dd>Voir {{cssxref("border-width")}}.</dd>
- <dt><code>&lt;border-style&gt;</code></dt>
- <dd>Voir {{cssxref("border-style")}}.</dd>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Voir {{cssxref("color")}}.</dd>
-</dl>
+- `<border-width>`
+  - : Voir {{cssxref("border-width")}}.
+- `<border-style>`
+  - : Voir {{cssxref("border-style")}}.
+- `<color>`
+  - : Voir {{cssxref("color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -61,46 +61,43 @@ translation_of: Web/CSS/-webkit-border-before
 .texteExemple {
   writing-mode: vertical-rl;
   -webkit-border-before: 5px dashed blue;
-}</pre>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="texteExemple">Texte pour l'exemple</p>
+</div>
+```
+
+### Résultat
 
-<h3 id="HTML">HTML</h3>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte pour l'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+## Spécifications
 
-<h3 id="Résultat">Résultat</h3>
+Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Toutefois, on peut la rapprocher de la propriété standard {{cssxref("border-block-start")}}.
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{cssinfo}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Compatibilité des navigateurs
 
-<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Toutefois, on peut la rapprocher de la propriété standard {{cssxref("border-block-start")}}.</p>
+{{Compat("css.properties.-webkit-border-before")}}
 
-<p>{{cssinfo}}</p>
+## Voir aussi
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+- {{cssxref("border-block-start")}}
+- Les propriétés physiques correspondantes :
 
-<p>{{Compat("css.properties.-webkit-border-before")}}</p>
+  - {{cssxref("border-top")}}
+  - {{cssxref("border-right")}}
+  - {{cssxref("border-bottom")}}
+  - {{cssxref("border-left")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- Les propriétés qui déterminent les propriétés logiques par rapport aux propriétés physiques
 
-<ul>
- <li>{{cssxref("border-block-start")}}</li>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top")}}</li>
-   <li>{{cssxref("border-right")}}</li>
-   <li>{{cssxref("border-bottom")}}</li>
-   <li>{{cssxref("border-left")}}</li>
-  </ul>
- </li>
- <li>Les propriétés qui déterminent les propriétés logiques par rapport aux propriétés physiques
-  <ul>
-   <li>{{cssxref("writing-mode")}}</li>
-   <li>{{cssxref("direction")}}</li>
-   <li>{{cssxref("text-orientation")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{cssxref("writing-mode")}}
+  - {{cssxref("direction")}}
+  - {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/-webkit-box-reflect/index.md b/files/fr/web/css/-webkit-box-reflect/index.md
index 856a9ca5b0..b41c376bf2 100644
--- a/files/fr/web/css/-webkit-box-reflect/index.md
+++ b/files/fr/web/css/-webkit-box-reflect/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-box-reflect
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>La propriété <strong><code>-webkit-box-reflect</code></strong> peut être utilisée afin de créer un effet de réflexion d'un élément dans une direction donnée.</p>
+La propriété **`-webkit-box-reflect`** peut être utilisée afin de créer un effet de réflexion d'un élément dans une direction donnée.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de directions */
+```css
+/* Valeurs de directions */
 -webkit-box-reflect: above;
 -webkit-box-reflect: below;
 -webkit-box-reflect: left;
@@ -28,43 +29,37 @@ translation_of: Web/CSS/-webkit-box-reflect
 -webkit-box-reflect: inherit;
 -webkit-box-reflect: initial;
 -webkit-box-reflect: unset;
-</pre>
+```
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element()", "element()")}}.</p>
-</div>
+> **Attention :** Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element()", "element()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>above</code><em>, </em><code>below</code><em>, </em><code>right</code><em>, </em><code>left</code></dt>
- <dd>Des mots-clés qui indiquent la direction dans laquelle créer la réflexion (respectivement : au-dessus, en-dessous, à droite, à gauche).</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>La taille du reflet créé, cf. {{cssxref("&lt;length&gt;")}} sur les valeurs possibles.</dd>
- <dt><code>&lt;image&gt;</code></dt>
- <dd>Le masque à appliquer au reflet, cf. {{cssxref("&lt;image&gt;")}} sur les valeurs possibles.</dd>
-</dl>
+- `above`_,_ `below`_,_ `right`_,_ `left`
+  - : Des mots-clés qui indiquent la direction dans laquelle créer la réflexion (respectivement : au-dessus, en-dessous, à droite, à gauche).
+- `<length>`
+  - : La taille du reflet créé, cf. {{cssxref("&lt;length&gt;")}} sur les valeurs possibles.
+- `<image>`
+  - : Le masque à appliquer au reflet, cf. {{cssxref("&lt;image&gt;")}} sur les valeurs possibles.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard {{cssxref("element()", "element()")}}.</p>
+Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard {{cssxref("element()", "element()")}}.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-box-reflect")}}</p>
+{{Compat("css.properties.-webkit-box-reflect")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">La documentation Apple</a></li>
- <li><a href="https://www.webkit.org/blog/182/css-reflections/">La spécification WebKit</a></li>
- <li>L'article de Lea Verou sur les réflexions CSS <a href="https://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">en utilisant les fonctionnalités en voie de standardisation</a></li>
-</ul>
+- [La documentation Apple](https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16)
+- [La spécification WebKit](https://www.webkit.org/blog/182/css-reflections/)
+- L'article de Lea Verou sur les réflexions CSS [en utilisant les fonctionnalités en voie de standardisation](https://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/)
diff --git a/files/fr/web/css/-webkit-line-clamp/index.md b/files/fr/web/css/-webkit-line-clamp/index.md
index 26895d4690..6b9a4a80fc 100644
--- a/files/fr/web/css/-webkit-line-clamp/index.md
+++ b/files/fr/web/css/-webkit-line-clamp/index.md
@@ -6,27 +6,26 @@ tags:
   - Propriété
 translation_of: Web/CSS/-webkit-line-clamp
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>-webkit-line-clamp</code></strong> permet de limiter l'affichage du contenu d'un bloc à un nombre donné de lignes.</p>
+La propriété CSS **`-webkit-line-clamp`** permet de limiter l'affichage du contenu d'un bloc à un nombre donné de lignes.
 
-<p>Cette propriété fonctionne uniquement si {{cssxref("display")}} vaut <code>-webkit-box</code> ou <code>-webkit-inline-box</code> et si {{cssxref("-webkit-box-orient")}} vaut <code>vertical</code>.</p>
+Cette propriété fonctionne uniquement si {{cssxref("display")}} vaut `-webkit-box` ou `-webkit-inline-box` et si {{cssxref("-webkit-box-orient")}} vaut `vertical`.
 
-<p>Dans la plupart des cas, on utilisera également {{cssxref("overflow")}} avec la valeur <code>hidden</code>, afin de masquer le contenu qui dépasse (plutôt que d'afficher une ellipse en dehors de la boîte).</p>
+Dans la plupart des cas, on utilisera également {{cssxref("overflow")}} avec la valeur `hidden`, afin de masquer le contenu qui dépasse (plutôt que d'afficher une ellipse en dehors de la boîte).
 
-<p>Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).</p>
+Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).
 
-<div class="note">
-<p><strong>Note :</strong> Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification <a href="https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp">CSS Overflow Module Level 3</a> définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer <code>-webkit-line-clamp</code>.</p>
-</div>
+> **Note :** Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification [CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer `-webkit-line-clamp`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-line-clamp: none;
 
 /* Valeurs entières */
-/* Type &lt;integer&gt; */
+/* Type <integer> */
 -webkit-line-clamp: 3;
 -webkit-line-clamp: 10;
 
@@ -34,66 +33,53 @@ translation_of: Web/CSS/-webkit-line-clamp
 -webkit-line-clamp: inherit;
 -webkit-line-clamp: initial;
 -webkit-line-clamp: unset;
-</pre>
+```
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Cette valeur indique que le contenu ne sera pas rogné.</dd>
- <dt>{{cssxref("integer")}}</dt>
- <dd>Cette valeur indique le nombre de lignes après lequel tronquer le contenu. Cette valeur doit être supérieure à 0.</dd>
-</dl>
+- `none`
+  - : Cette valeur indique que le contenu ne sera pas rogné.
+- {{cssxref("integer")}}
+  - : Cette valeur indique le nombre de lignes après lequel tronquer le contenu. Cette valeur doit être supérieure à 0.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  Dans cet exemple &lt;code&gt;-webkit-line-clamp&lt;/code&gt; vaut &lt;code&gt;3&lt;/code&gt;, ce qui signifie que le texte sera rogné après trois lignes.
+```html
+<p>
+  Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui signifie que le texte sera rogné après trois lignes.
   Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 300px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", "100")}}</p>
+{{EmbedLiveSample("Exemples", "100%", "100")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}</td>
-   <td>{{Spec2("CSS3 Overflow")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}} | {{Spec2("CSS3 Overflow")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-line-clamp")}}</p>
+{{Compat("css.properties.-webkit-line-clamp")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://css-tricks.com/line-clampin/">Line Clampin’ (Truncating Multiple Line Text)</a></li>
- <li>{{cssxref("line-clamp")}}</li>
-</ul>
+- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/)
+- {{cssxref("line-clamp")}}
diff --git a/files/fr/web/css/-webkit-mask-attachment/index.md b/files/fr/web/css/-webkit-mask-attachment/index.md
index f278d89b0f..a8e595fcb2 100644
--- a/files/fr/web/css/-webkit-mask-attachment/index.md
+++ b/files/fr/web/css/-webkit-mask-attachment/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-mask-attachment
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Si la propriété {{cssxref("-webkit-mask-image")}} est définie, <strong><code>-webkit-mask-attachment</code></strong> permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.</p>
+Si la propriété {{cssxref("-webkit-mask-image")}} est définie, **`-webkit-mask-attachment`** permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-attachment: scroll;
 -webkit-mask-attachment: fixed;
 -webkit-mask-attachment: local;
@@ -25,49 +26,46 @@ translation_of: Web/CSS/-webkit-mask-attachment
 -webkit-mask-attachment: inherit;
 -webkit-mask-attachment: initial;
 -webkit-mask-attachment: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>scroll</code></dt>
- <dd>Si le mot-clé <code>scroll</code> est utilisé, l'image de masque défilera avec le bloc qui l'englobe.</dd>
- <dt><code>fixed</code></dt>
- <dd>Si le mot-clé <code>fixed</code> est utilisé, l'image de masque ne défilera pas. Sa position sera fixe pour la zone d'affichag (<em>viewport</em>).</dd>
-</dl>
+- `scroll`
+  - : Si le mot-clé `scroll` est utilisé, l'image de masque défilera avec le bloc qui l'englobe.
+- `fixed`
+  - : Si le mot-clé `fixed` est utilisé, l'image de masque ne défilera pas. Sa position sera fixe pour la zone d'affichag (_viewport_).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">body {
+```css
+body {
   -webkit-mask-image: url('images/mask.png');
   -webkit-mask-attachment: fixed;
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-mask-attachment")}}</p>
+{{Compat("css.properties.-webkit-mask-attachment")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-webkit-mask")}}</li>
- <li>{{cssxref("-webkit-mask-clip")}}</li>
- <li>{{cssxref("-webkit-mask-box-image")}}</li>
- <li>{{cssxref("-webkit-mask-origin")}}</li>
- <li>{{cssxref("-webkit-mask-image")}}</li>
- <li>{{cssxref("-webkit-mask-composite")}}</li>
- <li>{{cssxref("-webkit-mask-repeat")}}</li>
-</ul>
+- {{cssxref("-webkit-mask")}}
+- {{cssxref("-webkit-mask-clip")}}
+- {{cssxref("-webkit-mask-box-image")}}
+- {{cssxref("-webkit-mask-origin")}}
+- {{cssxref("-webkit-mask-image")}}
+- {{cssxref("-webkit-mask-composite")}}
+- {{cssxref("-webkit-mask-repeat")}}
diff --git a/files/fr/web/css/-webkit-mask-box-image/index.md b/files/fr/web/css/-webkit-mask-box-image/index.md
index 79d751a5c2..dd2d49dc17 100644
--- a/files/fr/web/css/-webkit-mask-box-image/index.md
+++ b/files/fr/web/css/-webkit-mask-box-image/index.md
@@ -8,85 +8,77 @@ tags:
   - Web
 translation_of: Web/CSS/-webkit-mask-box-image
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
-
-<p>La propriété <strong><code>-webkit-mask-box-image</code></strong> permet de définir l'image de masque utilisée pour la boîte de bordure d'un élément.</p>
-
-<ul>
- <li>Valeur initiale : <code>none</code></li>
- <li>Applicabilité : à tous les éléments</li>
- <li>Héritée : non</li>
- <li>Type de média : visuel</li>
- <li>Valeur calculée : comme la valeur définie</li>
-</ul>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="eval">-webkit-mask-box-image: &lt;mask-box-image&gt; [&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt; &lt;x-repeat&gt; &lt;y-repeat&gt;]
-</pre>
-
-<p>Où :</p>
-
-<dl>
- <dt><code>&lt;mask-box-image&gt;</code></dt>
- <dd><code>{{cssxref("&lt;uri&gt;")}} | &lt;gradient&gt; | none</code></dd>
- <dt><code>&lt;top&gt;</code> <code>&lt;right&gt;</code> <code>&lt;bottom&gt;</code> <code>&lt;left&gt;</code></dt>
- <dd><code>&lt;length&gt; | &lt;percentage&gt;</code></dd>
- <dt><code>&lt;x-repeat&gt;</code> <code>&lt;y-repeat&gt;</code></dt>
- <dd><code>repeat | stretch | round</code></dd>
-</dl>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;uri&gt;</code></dt>
- <dd>L'emplacement de la ressource qui doit être utilisée comme image de masque.</dd>
- <dt><code>&lt;gradient&gt;</code></dt>
- <dd>Une fonction <code>-webkit-gradient</code> utilisée pour générer l'image de masque.</dd>
- <dt><code>none</code></dt>
- <dd>Ce mot-clé indique que la boîte de bordure n'a pas de masque.</dd>
-</dl>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Le décalage à appliquer à l'image de masque (cf. {{cssxref("&lt;length&gt;")}} pour les unités possibles).</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Le décalage de l'image exprimé en pourcentages relatifs à la dimension de la boîte de bordure de l'élément (la largeur ou la hauteur selon l'axe).</dd>
- <dt><code>repeat</code></dt>
- <dd>L'image est répétée autant de fois que nécessaire pour remplir la boîte de bordure. On pourra avoir des morceaux d'image si les dimensions de celle-ci ne permettent pas d'en copier un nombre entier sur la boîte.</dd>
- <dt><code>stretch</code></dt>
- <dd>L'image de masque est étirée pour être contenue exactement dans la boîte de bordure.</dd>
- <dt><code>round</code></dt>
- <dd> L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: css">.exempleUn {
+{{CSSRef}}{{Non-standard_header}}
+
+La propriété **`-webkit-mask-box-image`** permet de définir l'image de masque utilisée pour la boîte de bordure d'un élément.
+
+- Valeur initiale : `none`
+- Applicabilité : à tous les éléments
+- Héritée : non
+- Type de média : visuel
+- Valeur calculée : comme la valeur définie
+
+## Syntaxe
+
+    -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
+
+Où :
+
+- `<mask-box-image>`
+  - : `{{cssxref("&lt;uri&gt;")}} | <gradient> | none`
+- `<top>` `<right>` `<bottom>` `<left>`
+  - : `<length> | <percentage>`
+- `<x-repeat>` `<y-repeat>`
+  - : `repeat | stretch | round`
+
+### Valeurs
+
+- `<uri>`
+  - : L'emplacement de la ressource qui doit être utilisée comme image de masque.
+- `<gradient>`
+  - : Une fonction `-webkit-gradient` utilisée pour générer l'image de masque.
+- `none`
+  - : Ce mot-clé indique que la boîte de bordure n'a pas de masque.
+
+<!---->
+
+- `<length>`
+  - : Le décalage à appliquer à l'image de masque (cf. {{cssxref("&lt;length&gt;")}} pour les unités possibles).
+- `<percentage>`
+  - : Le décalage de l'image exprimé en pourcentages relatifs à la dimension de la boîte de bordure de l'élément (la largeur ou la hauteur selon l'axe).
+- `repeat`
+  - : L'image est répétée autant de fois que nécessaire pour remplir la boîte de bordure. On pourra avoir des morceaux d'image si les dimensions de celle-ci ne permettent pas d'en copier un nombre entier sur la boîte.
+- `stretch`
+  - : L'image de masque est étirée pour être contenue exactement dans la boîte de bordure.
+- `round`
+  - :  L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure.
+
+## Exemples
+
+```css
+.exempleUn {
   -webkit-mask-box-image: url('mask.png');
 }
 
 .exempleDeux {
   -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-mask-box-image")}}</p>
+{{Compat("css.properties.-webkit-mask-box-image")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-webkit-mask")}}</li>
- <li>{{cssxref("-webkit-mask-origin")}}</li>
- <li>{{cssxref("-webkit-mask-attachment")}}</li>
- <li>{{cssxref("-webkit-mask-clip")}}</li>
- <li>{{cssxref("-webkit-mask-image")}}</li>
- <li>{{cssxref("-webkit-mask-composite")}}</li>
- <li>{{cssxref("-webkit-mask-repeat")}}</li>
-</ul>
+- {{cssxref("-webkit-mask")}}
+- {{cssxref("-webkit-mask-origin")}}
+- {{cssxref("-webkit-mask-attachment")}}
+- {{cssxref("-webkit-mask-clip")}}
+- {{cssxref("-webkit-mask-image")}}
+- {{cssxref("-webkit-mask-composite")}}
+- {{cssxref("-webkit-mask-repeat")}}
diff --git a/files/fr/web/css/-webkit-mask-composite/index.md b/files/fr/web/css/-webkit-mask-composite/index.md
index 03022f2f52..244b3fd96d 100644
--- a/files/fr/web/css/-webkit-mask-composite/index.md
+++ b/files/fr/web/css/-webkit-mask-composite/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-mask-composite
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-mask-composite</code></strong> définit la façon dont plusieurs images de masque sont appliquées pour un même élément. Les images de masques sont composées dans l'ordre inverse dans lequel elles sont listées dans la propriété {{cssxref("-webkit-mask-image")}}.</p>
+La propriété **`-webkit-mask-composite`** définit la façon dont plusieurs images de masque sont appliquées pour un même élément. Les images de masques sont composées dans l'ordre inverse dans lequel elles sont listées dans la propriété {{cssxref("-webkit-mask-image")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-composite: clear;
 -webkit-mask-composite: copy;
 -webkit-mask-composite: source-over;
@@ -29,65 +30,60 @@ translation_of: Web/CSS/-webkit-mask-composite
 -webkit-mask-composite: inherit;
 -webkit-mask-composite: initial;
 -webkit-mask-composite: unset;
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> La propriété {{cssxref("mask-composite")}} couvre certains aspects de cette propriété non-standard avec des mots-clés différents.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>clear</code></dt>
- <dd>Les pixels qui se recouvrent entre l'image source et l'image de destination sont enlevés.</dd>
- <dt><code>copy</code></dt>
- <dd>Les pixels du masque source remplacent ceux du masque de destination.</dd>
- <dt><code>source-over</code></dt>
- <dd>Le contenu du masque source est appliqué sur l'image du masque de destination.</dd>
- <dt><code>source-in</code></dt>
- <dd>Les pixels qui se recouvrent sont remplacés par les pixels de l'image du masque source. Tous les autres pixels sont enlevés.</dd>
- <dt><code>source-out</code></dt>
- <dd>Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de masque source.</dd>
- <dt><code>source-atop</code></dt>
- <dd>Les pixels de l'image de masque de destination sont utilisés. Les pixels de l'image de masque source sont utilisés uniquement s'ils ne recouvrent pas une portion de l'image de destination. Cela fait que l'image source n'a aucun effet.</dd>
- <dt><code>destination-over</code></dt>
- <dd>L'image de masque de destination est affichée par dessus l'image de masque source.</dd>
- <dt><code>destination-in</code></dt>
- <dd>Les pixels qui se recouvrent sont remplacés par ceux de l'image de destination. Tous les autres pixels sont enlevés.</dd>
- <dt><code>destination-out</code></dt>
- <dd>Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de destination.</dd>
- <dt><code>destination-atop</code></dt>
- <dd>Les pixels de l'image source sont affichés. Les pixels de l'image de destination sont uniquement utilisés s'ils ne chevauchent pas des portions non-transparentes de l'image source. Cela fait que l'image de destination n'a aucun effet.</dd>
- <dt><code>xor</code></dt>
- <dd>Les pixels qui se chevauchent deviennent complètement transparents s'ils étaient complètement opaques.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+> **Note :** La propriété {{cssxref("mask-composite")}} couvre certains aspects de cette propriété non-standard avec des mots-clés différents.
+
+## Syntaxe
+
+### Valeurs
+
+- `clear`
+  - : Les pixels qui se recouvrent entre l'image source et l'image de destination sont enlevés.
+- `copy`
+  - : Les pixels du masque source remplacent ceux du masque de destination.
+- `source-over`
+  - : Le contenu du masque source est appliqué sur l'image du masque de destination.
+- `source-in`
+  - : Les pixels qui se recouvrent sont remplacés par les pixels de l'image du masque source. Tous les autres pixels sont enlevés.
+- `source-out`
+  - : Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de masque source.
+- `source-atop`
+  - : Les pixels de l'image de masque de destination sont utilisés. Les pixels de l'image de masque source sont utilisés uniquement s'ils ne recouvrent pas une portion de l'image de destination. Cela fait que l'image source n'a aucun effet.
+- `destination-over`
+  - : L'image de masque de destination est affichée par dessus l'image de masque source.
+- `destination-in`
+  - : Les pixels qui se recouvrent sont remplacés par ceux de l'image de destination. Tous les autres pixels sont enlevés.
+- `destination-out`
+  - : Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de destination.
+- `destination-atop`
+  - : Les pixels de l'image source sont affichés. Les pixels de l'image de destination sont uniquement utilisés s'ils ne chevauchent pas des portions non-transparentes de l'image source. Cela fait que l'image de destination n'a aucun effet.
+- `xor`
+  - : Les pixels qui se chevauchent deviennent complètement transparents s'ils étaient complètement opaques.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   -webkit-mask-image: url(mask1.png), url('mask2.png');
   -webkit-mask-composite: xor, source-over;
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-mask-composite")}}</p>
+{{Compat("css.properties.-webkit-mask-composite")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("mask-composite")}}</li>
-</ul>
+- {{cssxref("mask-composite")}}
diff --git a/files/fr/web/css/-webkit-mask-position-x/index.md b/files/fr/web/css/-webkit-mask-position-x/index.md
index d5bb42b38f..45941093f2 100644
--- a/files/fr/web/css/-webkit-mask-position-x/index.md
+++ b/files/fr/web/css/-webkit-mask-position-x/index.md
@@ -8,22 +8,23 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-mask-position-x
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-mask-position-x</code></strong> permet de définir la position horizontale initiale d'une image de masque.</p>
+La propriété **`-webkit-mask-position-x`** permet de définir la position horizontale initiale d'une image de masque.
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-position-x: left;
 -webkit-mask-position-x: center;
 -webkit-mask-position-x: right;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt;        */
+/* Type <percentage>        */
 -webkit-mask-position-x: 100%;
 -webkit-mask-position-x: -50%;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 -webkit-mask-position-x: 50px;
 -webkit-mask-position-x: -1cm;
 
@@ -34,30 +35,29 @@ translation_of: Web/CSS/-webkit-mask-position-x
 -webkit-mask-position-x: inherit;
 -webkit-mask-position-x: initial;
 -webkit-mask-position-x: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (<em>padding</em>). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (<code>0%</code> indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et <code>100%</code> indique que le bord droit de l'image est aligné avec le bord droit  de la boîte de remplissage).</dd>
- <dt><code><strong>left</strong></code></dt>
- <dd>Un mot-clé équivalent à <code>0%</code>.</dd>
- <dt><code><strong>right</strong></code></dt>
- <dd>Un mot-clé équivalent à <code>100%</code>.</dd>
- <dt><code><strong>center</strong></code></dt>
- <dd>Un mot-clé équivalent à <code>50%</code>.</dd>
-</dl>
+- `<length-percentage>`
+  - : Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (_padding_). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (`0%` indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et `100%` indique que le bord droit de l'image est aligné avec le bord droit  de la boîte de remplissage).
+- **`left`**
+  - : Un mot-clé équivalent à `0%`.
+- **`right`**
+  - : Un mot-clé équivalent à `100%`.
+- **`center`**
+  - : Un mot-clé équivalent à `50%`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:css">.exempleUn {
+```css
+.exempleUn {
   -webkit-mask-image: url(mask.png);
   -webkit-mask-position-x: right;
 }
@@ -66,23 +66,21 @@ translation_of: Web/CSS/-webkit-mask-position-x
   -webkit-mask-image: url(mask.png);
   -webkit-mask-position-x: 25%;
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-mask-position-x")}}</p>
+{{Compat("css.properties.-webkit-mask-position-x")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-webkit-mask-position")}}</li>
- <li>{{cssxref("-webkit-mask-position-y")}}</li>
- <li>{{cssxref("-webkit-mask-origin")}}</li>
- <li>{{cssxref("-webkit-mask-attachment")}}</li>
-</ul>
+- {{cssxref("-webkit-mask-position")}}
+- {{cssxref("-webkit-mask-position-y")}}
+- {{cssxref("-webkit-mask-origin")}}
+- {{cssxref("-webkit-mask-attachment")}}
diff --git a/files/fr/web/css/-webkit-mask-position-y/index.md b/files/fr/web/css/-webkit-mask-position-y/index.md
index 8e944059d1..2627f49c42 100644
--- a/files/fr/web/css/-webkit-mask-position-y/index.md
+++ b/files/fr/web/css/-webkit-mask-position-y/index.md
@@ -8,22 +8,23 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-mask-position-y
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-mask-position-y</code></strong> permet de définir la position verticale initiale d'une image de masque.</p>
+La propriété **`-webkit-mask-position-y`** permet de définir la position verticale initiale d'une image de masque.
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-position-y: top;
 -webkit-mask-position-y: center;
 -webkit-mask-position-y: bottom;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt;        */
+/* Type <percentage>        */
 -webkit-mask-position-y: 100%;
 -webkit-mask-position-y: -50%;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 -webkit-mask-position-y: 50px;
 -webkit-mask-position-y: -1cm;
 
@@ -34,32 +35,31 @@ translation_of: Web/CSS/-webkit-mask-position-y
 -webkit-mask-position-y: inherit;
 -webkit-mask-position-y: initial;
 -webkit-mask-position-y: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Une longueur indiquant la position du haut de l'image à partir du bord haut de la boîte de remplissage (<em>padding</em>). Les pourcentages sont calculés relativement à la dimension verticale de la boîte de remplissage (<code>0%</code> indique que le bord haut de l'image est aligné avec le bord haut de la boîte de remplissage et <code>100%</code> indique que le bord bas de l'image est aligné avec le bord bas de la boîte de remplissage).</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une longueur, mesurée à partir du bord haut de la boîte de remplissage (<em>padding</em>), qui indique la position verticale de l'image.</dd>
- <dt><code><strong>top</strong></code></dt>
- <dd>Un mot-clé équivalent à <code>0%</code>.</dd>
- <dt><code><strong>bottom</strong></code></dt>
- <dd>Un mot-clé équivalent à <code>100%</code>.</dd>
- <dt><code><strong>center</strong></code></dt>
- <dd>Un mot-clé équivalent à <code>50%</code>.</dd>
-</dl>
+- `<length-percentage>`
+  - : Une longueur indiquant la position du haut de l'image à partir du bord haut de la boîte de remplissage (_padding_). Les pourcentages sont calculés relativement à la dimension verticale de la boîte de remplissage (`0%` indique que le bord haut de l'image est aligné avec le bord haut de la boîte de remplissage et `100%` indique que le bord bas de l'image est aligné avec le bord bas de la boîte de remplissage).
+- `<length>`
+  - : Une longueur, mesurée à partir du bord haut de la boîte de remplissage (_padding_), qui indique la position verticale de l'image.
+- **`top`**
+  - : Un mot-clé équivalent à `0%`.
+- **`bottom`**
+  - : Un mot-clé équivalent à `100%`.
+- **`center`**
+  - : Un mot-clé équivalent à `50%`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:css">.exempleUn {
+```css
+.exempleUn {
   -webkit-mask-image: url(mask.png);
   -webkit-mask-position-y: bottom;
 }
@@ -68,23 +68,21 @@ translation_of: Web/CSS/-webkit-mask-position-y
   -webkit-mask-image: url(mask.png);
   -webkit-mask-position-y: 25%;
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-mask-position-y")}}</p>
+{{Compat("css.properties.-webkit-mask-position-y")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-webkit-mask-position")}}</li>
- <li>{{cssxref("-webkit-mask-position-x")}}</li>
- <li>{{cssxref("-webkit-mask-origin")}}</li>
- <li>{{cssxref("-webkit-mask-attachment")}}</li>
-</ul>
+- {{cssxref("-webkit-mask-position")}}
+- {{cssxref("-webkit-mask-position-x")}}
+- {{cssxref("-webkit-mask-origin")}}
+- {{cssxref("-webkit-mask-attachment")}}
diff --git a/files/fr/web/css/-webkit-mask-repeat-x/index.md b/files/fr/web/css/-webkit-mask-repeat-x/index.md
index 0669e8a600..b2568be318 100644
--- a/files/fr/web/css/-webkit-mask-repeat-x/index.md
+++ b/files/fr/web/css/-webkit-mask-repeat-x/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-mask-repeat-x
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-mask-repeat-x</code></strong> définit la façon dont une image de masque est répétée horizontalement.</p>
+La propriété **`-webkit-mask-repeat-x`** définit la façon dont une image de masque est répétée horizontalement.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-repeat-x: repeat;
 -webkit-mask-repeat-x: no-repeat;
 -webkit-mask-repeat-x: space;
@@ -25,30 +26,29 @@ translation_of: Web/CSS/-webkit-mask-repeat-x
 -webkit-mask-repeat-x: inherit;
 -webkit-mask-repeat-x: initial;
 -webkit-mask-repeat-x: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>repeat</code></dt>
- <dd>L'image de masque est répétée horizontalement.</dd>
- <dt><code>no-repeat</code></dt>
- <dd>L'image de masque n'est pas répétée horizontalement, seul un exemplaire est dessiné selon l'axe horizontal. Le contenu restant sur l'axe horizontal pour les éléments masqués n'est pas affiché.</dd>
- <dt><code>space</code></dt>
- <dd>L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords droit et gauche de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.</dd>
- <dt><code>round</code></dt>
- <dd>L'image est répétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit large de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.</dd>
-</dl>
+- `repeat`
+  - : L'image de masque est répétée horizontalement.
+- `no-repeat`
+  - : L'image de masque n'est pas répétée horizontalement, seul un exemplaire est dessiné selon l'axe horizontal. Le contenu restant sur l'axe horizontal pour les éléments masqués n'est pas affiché.
+- `space`
+  - : L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords droit et gauche de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.
+- `round`
+  - : L'image est répétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit large de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">.exempleun {
+```css
+.exempleun {
   -webkit-mask-image: url('mask.png');
   -webkit-mask-repeat-x: repeat;
 }
@@ -57,29 +57,28 @@ translation_of: Web/CSS/-webkit-mask-repeat-x
   -webkit-mask-image: url('mask.png');
   -webkit-mask-repeat-x: no-repeat;
 }
-</pre>
+```
 
-<h3 id="Gestion_de_plusieurs_images">Gestion de plusieurs images</h3>
+### Gestion de plusieurs images
 
-<p>On peut définir un style de répétition (<code>&lt;repeat-style&gt;</code>) différent pour chacune des images de masque en séparant les valeurs par des virgules :</p>
+On peut définir un style de répétition (`<repeat-style>`) différent pour chacune des images de masque en séparant les valeurs par des virgules :
 
-<pre class="brush: css">.exempletrois {
+```css
+.exempletrois {
   -webkit-mask-image: url('mask1.png'), url('mask2.png');
   -webkit-mask-repeat-x: repeat, space;
 }
-</pre>
+```
 
-<p>Chaque image aura la valeur associée, dans le même ordre.</p>
+Chaque image aura la valeur associée, dans le même ordre.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-mask-repeat-x")}}</p>
+{{Compat("css.properties.-webkit-mask-repeat-x")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-webkit-mask-repeat")}},</li>
- <li>{{cssxref("-webkit-mask-repeat-y")}}</li>
-</ul>
+- {{cssxref("-webkit-mask-repeat")}},
+- {{cssxref("-webkit-mask-repeat-y")}}
diff --git a/files/fr/web/css/-webkit-mask-repeat-y/index.md b/files/fr/web/css/-webkit-mask-repeat-y/index.md
index d3bdaf3055..717f2f1aaa 100644
--- a/files/fr/web/css/-webkit-mask-repeat-y/index.md
+++ b/files/fr/web/css/-webkit-mask-repeat-y/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-mask-repeat-y
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-mask-repeat-y</code></strong> définit la façon dont une image de masque est répétée verticalement.</p>
+La propriété **`-webkit-mask-repeat-y`** définit la façon dont une image de masque est répétée verticalement.
 
-<pre class="brush:css  no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-mask-repeat-y: repeat;
 -webkit-mask-repeat-y: no-repeat;
 -webkit-mask-repeat-y: space;
@@ -25,30 +26,29 @@ translation_of: Web/CSS/-webkit-mask-repeat-y
 -webkit-mask-repeat-y: inherit;
 -webkit-mask-repeat-y: initial;
 -webkit-mask-repeat-y: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>repeat</code></dt>
- <dd>L'image de masque est répétée verticalement.</dd>
- <dt><code>no-repeat</code></dt>
- <dd>L'image de masque n'est pas répétée verticalement, seul un exemplaire est dessiné selon l'axe vertical. Le contenu restant sur l'axe vertical pour les éléments masqués n'est pas affiché.</dd>
- <dt><code>space</code></dt>
- <dd>L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords bas et haut de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.</dd>
- <dt><code>round</code></dt>
- <dd>L'image est repétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit haute de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.</dd>
-</dl>
+- `repeat`
+  - : L'image de masque est répétée verticalement.
+- `no-repeat`
+  - : L'image de masque n'est pas répétée verticalement, seul un exemplaire est dessiné selon l'axe vertical. Le contenu restant sur l'axe vertical pour les éléments masqués n'est pas affiché.
+- `space`
+  - : L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords bas et haut de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.
+- `round`
+  - : L'image est repétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit haute de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">.exempleun {
+```css
+.exempleun {
   -webkit-mask-image: url('mask.png');
   -webkit-mask-repeat-y: repeat;
 }
@@ -57,29 +57,28 @@ translation_of: Web/CSS/-webkit-mask-repeat-y
   -webkit-mask-image: url('mask.png');
   -webkit-mask-repeat-y: no-repeat;
 }
-</pre>
+```
 
-<h3 id="Gestion_de_plusieurs_images">Gestion de plusieurs images</h3>
+### Gestion de plusieurs images
 
-<p>On peut définir un style de répétition (<code>&lt;repeat-style&gt;</code>) différent pour chacune des images de masque en séparant les valeurs par des virgules :</p>
+On peut définir un style de répétition (`<repeat-style>`) différent pour chacune des images de masque en séparant les valeurs par des virgules :
 
-<pre class="brush: css">.exempletrois {
+```css
+.exempletrois {
   -webkit-mask-image: url('mask1.png'), url('mask2.png');
   -webkit-mask-repeat-y: repeat, space;
 }
-</pre>
+```
 
-<p>Chaque image aura la valeur associée, dans le même ordre.</p>
+Chaque image aura la valeur associée, dans le même ordre.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-mask-repeat-y")}}</p>
+{{Compat("css.properties.-webkit-mask-repeat-y")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-webkit-mask-repeat")}},</li>
- <li>{{cssxref("-webkit-mask-repeat-x")}}</li>
-</ul>
+- {{cssxref("-webkit-mask-repeat")}},
+- {{cssxref("-webkit-mask-repeat-x")}}
diff --git a/files/fr/web/css/-webkit-overflow-scrolling/index.md b/files/fr/web/css/-webkit-overflow-scrolling/index.md
index 5f6b8e2325..637e8403d3 100644
--- a/files/fr/web/css/-webkit-overflow-scrolling/index.md
+++ b/files/fr/web/css/-webkit-overflow-scrolling/index.md
@@ -8,28 +8,27 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-overflow-scrolling
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-overflow-scrolling</code></strong> permet de contrôler si l'appareil tactile utilise l'inertie pour faire défiler l'élément visé par la déclaration.</p>
+La propriété **`-webkit-overflow-scrolling`** permet de contrôler si l'appareil tactile utilise l'inertie pour faire défiler l'élément visé par la déclaration.
 
-<h2 id="Valeurs">Valeurs</h2>
+## Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Le défilement « normal » est utilisé : le défilement s'arrête dès que le doigt ne touche plus l'écran.</dd>
- <dt><code>touch</code></dt>
- <dd>Le défilement simule une certaine inertie : le contenu continue à défiler légèrement après que le toucher soit fini. La vitesse et la durée du défilement sont proportionnelles à la vitesse de déplacement du doigt sur l'écran. Cela crée un nouveau contexte d'empilement.</dd>
-</dl>
+- `auto`
+  - : Le défilement « normal » est utilisé : le défilement s'arrête dès que le doigt ne touche plus l'écran.
+- `touch`
+  - : Le défilement simule une certaine inertie : le contenu continue à défiler légèrement après que le toucher soit fini. La vitesse et la durée du défilement sont proportionnelles à la vitesse de déplacement du doigt sur l'écran. Cela crée un nouveau contexte d'empilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 100%;
   overflow: auto;
 }
@@ -47,38 +46,39 @@ p {
 
 .scroll-auto {
   -webkit-overflow-scrolling: auto; /* on arrête le défilement immédiatement */
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="scroll-touch"&gt;
-  &lt;p&gt;
+```html
+<div class="scroll-touch">
+  <p>
     Ce paragraphe a un défilement inertiel.
-  &lt;/p&gt;
-&lt;/div&gt;
-&lt;div class="scroll-auto"&gt;
-  &lt;p&gt;
+  </p>
+</div>
+<div class="scroll-auto">
+  <p>
      Pas celui-ci.
-  &lt;/p&gt;
-&lt;/div&gt;</pre>
+  </p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est documentée dans <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">la référence CSS de Safari</a>.</p>
+Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est documentée dans [la référence CSS de Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling).
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p>
+{{Compat("css.properties.-webkit-overflow-scrolling")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">L'article de CSS-Tricks sur cette fonctionnalité, avec une démonstration (en anglais)</a></li>
- <li><a href="https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/">Article de Smashing Magazine (en anglais) : décrire l'effet du rebondissement du scroll et le fonctionnement dans les différents navigateurs</a></li>
-</ul>
+- [L'article de CSS-Tricks sur cette fonctionnalité, avec une démonstration (en anglais)](https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/)
+- [Article de Smashing Magazine (en anglais) : décrire l'effet du rebondissement du scroll et le fonctionnement dans les différents navigateurs](https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/)
diff --git a/files/fr/web/css/-webkit-print-color-adjust/index.md b/files/fr/web/css/-webkit-print-color-adjust/index.md
index dc129741d2..e90b61b925 100644
--- a/files/fr/web/css/-webkit-print-color-adjust/index.md
+++ b/files/fr/web/css/-webkit-print-color-adjust/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-print-color-adjust
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-print-color-adjust</code></strong> est une extension non-standard qui peut être utilisée pour forcer l'impression des images et couleurs utilisées en arrière-plan pour les navigateurs basés sur WebKit.</p>
+La propriété **`-webkit-print-color-adjust`** est une extension non-standard qui peut être utilisée pour forcer l'impression des images et couleurs utilisées en arrière-plan pour les navigateurs basés sur WebKit.
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-print-color-adjust: economy;
 -webkit-print-color-adjust: exact;
 
@@ -20,42 +21,40 @@ translation_of: Web/CSS/-webkit-print-color-adjust
 -webkit-print-color-adjust: inherit;
 -webkit-print-color-adjust: initial;
 -webkit-print-color-adjust: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>-webkit-print-color-adjust</code> peut être définie avec l'un des mots-clés suivants.</p>
+La propriété `-webkit-print-color-adjust` peut être définie avec l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>economy</code></dt>
- <dd>Le comportement normal : les images et couleurs d'arrière-plan sont uniquement imprimées si l'utilisateur a explicitement permis cette impression dans la boîte de dialogue pour les réglages d'impression.</dd>
- <dt><code>exact</code></dt>
- <dd>Les images et couleurs d'arrière-plan de l'élément auquel la règle CSS est appliquée seront toujours imprimées, les réglages d'impression sont donc surchargés.</dd>
-</dl>
+- `economy`
+  - : Le comportement normal : les images et couleurs d'arrière-plan sont uniquement imprimées si l'utilisateur a explicitement permis cette impression dans la boîte de dialogue pour les réglages d'impression.
+- `exact`
+  - : Les images et couleurs d'arrière-plan de l'élément auquel la règle CSS est appliquée seront toujours imprimées, les réglages d'impression sont donc surchargés.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">/* Force l'article à être imprimé en noir et blanc */
+```css
+/* Force l'article à être imprimé en noir et blanc */
 article {
   -webkit-print-color-adjust: exact;
   background: #222;
   color: #eee;
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Il existe <a href="https://wiki.csswg.org/ideas/print-backgrounds">une proposition sur le wiki du groupe de travail CSS</a> pour standardiser cette propriété.</p>
+Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Il existe [une proposition sur le wiki du groupe de travail CSS](https://wiki.csswg.org/ideas/print-backgrounds) pour standardiser cette propriété.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-print-color-adjust")}}</p>
+{{Compat("css.properties.-webkit-print-color-adjust")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://bugs.webkit.org/show_bug.cgi?id=64583">Bug WebKit 64583</a> : Ajout d'une propriété CSS permettant de contrôler l'impression des arrière-plans des éléments.</li>
- <li>Wiki du groupe de travail CSS : <a href="https://wiki.csswg.org/ideas/print-backgrounds">print-backgrounds</a> - une proposition de standardisation pour cette propriété.</li>
- <li>La spécification du module des couleurs CSS (CSS Color) de niveau 4 ajoute la propriété <code><a href="https://drafts.csswg.org/css-color-4/#color-adjust">color-adjust</a></code> pour standardiser cette propriété.</li>
-</ul>
+- [Bug WebKit 64583](https://bugs.webkit.org/show_bug.cgi?id=64583) : Ajout d'une propriété CSS permettant de contrôler l'impression des arrière-plans des éléments.
+- Wiki du groupe de travail CSS : [print-backgrounds](https://wiki.csswg.org/ideas/print-backgrounds) - une proposition de standardisation pour cette propriété.
+- La spécification du module des couleurs CSS (CSS Color) de niveau 4 ajoute la propriété [`color-adjust`](https://drafts.csswg.org/css-color-4/#color-adjust) pour standardiser cette propriété.
diff --git a/files/fr/web/css/-webkit-tap-highlight-color/index.md b/files/fr/web/css/-webkit-tap-highlight-color/index.md
index 677d4e4be2..b540c737e4 100644
--- a/files/fr/web/css/-webkit-tap-highlight-color/index.md
+++ b/files/fr/web/css/-webkit-tap-highlight-color/index.md
@@ -8,33 +8,32 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-tap-highlight-color
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-tap-highlight-color</code></strong> est une propriété non-standard qui permet de définir la couleur utilisée pour surligner le lien et indiquer qu'il a bien été activé/touché par l'utilisateur.</p>
+La propriété **`-webkit-tap-highlight-color`** est une propriété non-standard qui permet de définir la couleur utilisée pour surligner le lien et indiquer qu'il a bien été activé/touché par l'utilisateur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">-webkit-tap-highlight-color: red;
+```css
+-webkit-tap-highlight-color: red;
 -webkit-tap-highlight-color: transparent; /* pour retirer la mise en avant */
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>La couleur utilisée pour surligner le lien lorsqu'il est touché.</dd>
-</dl>
+- `<color>`
+  - : La couleur utilisée pour surligner le lien lorsqu'il est touché.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Apple décrit cette propriété dans <a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5">le guide Safari pour le contenu web</a>.</p>
+Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Apple décrit cette propriété dans [le guide Safari pour le contenu web](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5).
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Cette propriété est prise en charge par WebKit/Safari, Blink/Chrome ainsi que par certaines versions d'Internet Explorer et Microsoft Edge.</p>
+Cette propriété est prise en charge par WebKit/Safari, Blink/Chrome ainsi que par certaines versions d'Internet Explorer et Microsoft Edge.
diff --git a/files/fr/web/css/-webkit-text-fill-color/index.md b/files/fr/web/css/-webkit-text-fill-color/index.md
index f00bc2ae33..23e220dde2 100644
--- a/files/fr/web/css/-webkit-text-fill-color/index.md
+++ b/files/fr/web/css/-webkit-text-fill-color/index.md
@@ -8,12 +8,13 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-text-fill-color
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-text-fill-color</code></strong> définit la couleur utilisée pour dessiner le contenu des lettres qui forment un texte. Si cette propriété n'est pas définie, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée.</p>
+La propriété **`-webkit-text-fill-color`** définit la couleur utilisée pour dessiner le contenu des lettres qui forment un texte. Si cette propriété n'est pas définie, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée.
 
-<pre class="brush: css no-line-numbers">/* Valeurs de couleurs */
-/* Type &lt;color&gt;        */
+```css
+/* Valeurs de couleurs */
+/* Type <color>        */
 -webkit-text-fill-color: red;
 -webkit-text-fill-color: #000000;
 -webkit-text-fill-color: rgb(100, 200, 0);
@@ -22,77 +23,58 @@ translation_of: Web/CSS/-webkit-text-fill-color
 -webkit-text-fill-color: inherit;
 -webkit-text-fill-color: initial;
 -webkit-text-fill-color: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>La couleur utilisée pour colorer les lettres du texte.</dd>
-</dl>
+- `<color>`
+  - : La couleur utilisée pour colorer les lettres du texte.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 0;
   font-size: 3em;
   -webkit-text-fill-color: green;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;Ce texte est vert.&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Example", "380px", "60px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>Définition initiale dans un standard.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color">Référence CSS Safari -webkit-text-fill-color' dans ce document.</a></td>
-   <td>Documentation non-officielle, non-standard.</td>
-   <td>Documentation initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.-webkit-text-fill-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
- <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks qui décrit cette fonctionnalité (en anglais)</a></li>
- <li>{{cssxref("-webkit-text-stroke-color")}}</li>
- <li>{{cssxref("-webkit-text-stroke-width")}}</li>
- <li>{{cssxref("-webkit-text-stroke")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<p>Ce texte est vert.</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Example", "380px", "60px")}}
+
+## Spécifications
+
+| Spécification                                                                                                                                                                                                                                                   | État                                        | Commentaires                          |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------------------------------------- |
+| {{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}                                                                                                                                                    | {{Spec2('Compat')}}                    | Définition initiale dans un standard. |
+| [Référence CSS Safari -webkit-text-fill-color' dans ce document.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color) | Documentation non-officielle, non-standard. | Documentation initiale.               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.-webkit-text-fill-color")}}
+
+## Voir aussi
+
+- [Le billet de _Surfin' Safari_ qui annonce cette fonctionnalité (en anglais)](https://www.webkit.org/blog/85/introducing-text-stroke/)
+- [L'article de CSS-Tricks qui décrit cette fonctionnalité (en anglais)](https://css-tricks.com/adding-stroke-to-web-text/)
+- {{cssxref("-webkit-text-stroke-color")}}
+- {{cssxref("-webkit-text-stroke-width")}}
+- {{cssxref("-webkit-text-stroke")}}
diff --git a/files/fr/web/css/-webkit-text-security/index.md b/files/fr/web/css/-webkit-text-security/index.md
index 290fc9d2b7..4aa198a0e7 100644
--- a/files/fr/web/css/-webkit-text-security/index.md
+++ b/files/fr/web/css/-webkit-text-security/index.md
@@ -8,47 +8,50 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-text-security
 ---
-<div>{{CSSRef}} {{Non-standard_header}}</div>
+{{CSSRef}} {{Non-standard_header}}
 
-<p><code><strong>-webkit-text-security</strong></code> est une propriété CSS non-standard qui permet de masquer les caractères saisis dans un camp d'un formulaire (ex. {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) en les remplaçant par une forme géométrique. Cette propriété n'affecte que les champs qui ne sont pas de type <code>password</code>.</p>
+**`-webkit-text-security`** est une propriété CSS non-standard qui permet de masquer les caractères saisis dans un camp d'un formulaire (ex. {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) en les remplaçant par une forme géométrique. Cette propriété n'affecte que les champs qui ne sont pas de type `password`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">-webkit-text-security: circle;
+```css
+-webkit-text-security: circle;
 -webkit-text-security: disc;
 -webkit-text-security: square;
 -webkit-text-security: none;
-</pre>
+```
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>En utilisant un navigateur qui prend en charge cette propriété et en saisissant des caractères dans le champs, vous pourrez les voir remplacées par des carrés.</p>
+En utilisant un navigateur qui prend en charge cette propriété et en saisissant des caractères dans le champs, vous pourrez les voir remplacées par des carrés.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;label for="name"&gt;Nom :&lt;/label&gt;
-&lt;input type="text" name="name" id="name" /&gt;</pre>
+```html
+<label for="name">Nom :</label>
+<input type="text" name="name" id="name" />
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input {
+```css
+input {
   -webkit-text-security: square;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Example")}}</p>
+{{EmbedLiveSample("Example")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété WebKit est spécifique à ce moteur et ne fait partie d'aucune spécification<em>.</em></p>
+Cette propriété WebKit est spécifique à ce moteur et ne fait partie d'aucune spécification*.*
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Cette propriété est prise en charge par les navigateurs basés sur WebKit ou Blink.</p>
+Cette propriété est prise en charge par les navigateurs basés sur WebKit ou Blink.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">Les extensions CSS spécifiques à WebKit</a></li>
-</ul>
+- [Les extensions CSS spécifiques à WebKit](/en-US/docs/Web/CSS/WebKit_Extensions)
diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.md b/files/fr/web/css/-webkit-text-stroke-color/index.md
index 8717f6e1aa..578dc63339 100644
--- a/files/fr/web/css/-webkit-text-stroke-color/index.md
+++ b/files/fr/web/css/-webkit-text-stroke-color/index.md
@@ -8,12 +8,13 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-text-stroke-color
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-text-stroke-color</code></strong> permet de définir la couleur de la ligne utilisée pour le contour du text. Si cette propriété n'est pas définie, c'est la valeur de {{cssxref("color")}} qui sera utilisée.</p>
+La propriété **`-webkit-text-stroke-color`** permet de définir la couleur de la ligne utilisée pour le contour du text. Si cette propriété n'est pas définie, c'est la valeur de {{cssxref("color")}} qui sera utilisée.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de couleur */
-/* Type &lt;color&gt;       */
+```css
+/* Valeurs de couleur */
+/* Type <color>       */
 -webkit-text-stroke-color: red;
 -webkit-text-stroke-color: #e08ab4;
 -webkit-text-stroke-color: rgb(200, 100, 0);
@@ -22,84 +23,68 @@ translation_of: Web/CSS/-webkit-text-stroke-color
 -webkit-text-stroke-color: inherit;
 -webkit-text-stroke-color: initial;
 -webkit-text-stroke-color: unset;
-</pre>
+```
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>La couleur du contour pour les lettres.</dd>
-</dl>
+- `<color>`
+  - : La couleur du contour pour les lettres.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Texte avec un contour&lt;/p&gt;
-&lt;input type="color" value="#ff0000"&gt;</pre>
+```html
+<p>Texte avec un contour</p>
+<input type="color" value="#ff0000">
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 0;
   font-size: 4em;
   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: #ff0000;
   /* Cette valeur peut être modifiée */
 }
-</pre>
+```
 
-<pre class="brush: js hidden">var colorPicker = document.querySelector("input");
+```js hidden
+var colorPicker = document.querySelector("input");
 colorPicker.addEventListener("change", function(evt) {
   document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
-});</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "500px", "100px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>Définition initiale dans un standard.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color">Référence CSS Safari -webkit-text-stroke-color dans ce document.</a></td>
-   <td>Documentation non-officielle, non-standard.</td>
-   <td>Documentation initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.-webkit-text-stroke-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
- <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)</a></li>
- <li>{{cssxref("-webkit-text-fill-color")}}</li>
- <li>{{cssxref("-webkit-text-stroke-width")}}</li>
- <li>{{cssxref("-webkit-text-stroke")}}</li>
-</ul>
+});
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "500px", "100px")}}
+
+## Spécifications
+
+| Spécification                                                                                                                                                                                                                                                      | État                                        | Commentaires                          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------- |
+| {{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}                                                                                                                                                   | {{Spec2('Compat')}}                    | Définition initiale dans un standard. |
+| [Référence CSS Safari -webkit-text-stroke-color dans ce document.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color) | Documentation non-officielle, non-standard. | Documentation initiale.               |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.-webkit-text-stroke-color")}}
+
+## Voir aussi
+
+- [Le billet de _Surfin' Safari_ qui annonce cette fonctionnalité (en anglais)](https://www.webkit.org/blog/85/introducing-text-stroke/)
+- [L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)](https://css-tricks.com/adding-stroke-to-web-text/)
+- {{cssxref("-webkit-text-fill-color")}}
+- {{cssxref("-webkit-text-stroke-width")}}
+- {{cssxref("-webkit-text-stroke")}}
diff --git a/files/fr/web/css/-webkit-text-stroke-width/index.md b/files/fr/web/css/-webkit-text-stroke-width/index.md
index 9e34011338..cbbc30483a 100644
--- a/files/fr/web/css/-webkit-text-stroke-width/index.md
+++ b/files/fr/web/css/-webkit-text-stroke-width/index.md
@@ -8,21 +8,22 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-text-stroke-width
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-text-stroke-width</code></strong> permet de définir l'épaisseur du trait qui entoure les lettres du texte.</p>
+La propriété **`-webkit-text-stroke-width`** permet de définir l'épaisseur du trait qui entoure les lettres du texte.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-text-stroke-width: thin;
 -webkit-text-stroke-width: medium;
 -webkit-text-stroke-width: thick;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 -webkit-text-stroke-width: 2px;
 -webkit-text-stroke-width: 0.1em;
 -webkit-text-stroke-width: 1mm;
@@ -32,24 +33,23 @@ translation_of: Web/CSS/-webkit-text-stroke-width
 -webkit-text-stroke-width: inherit;
 -webkit-text-stroke-width: initial;
 -webkit-text-stroke-width: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;line-width&gt;</code></dt>
- <dd>La largeur du trait utilisé pour entourer les lettres du texte.</dd>
-</dl>
+- `<line-width>`
+  - : La largeur du trait utilisé pour entourer les lettres du texte.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 0;
   font-size: 4em;
   -webkit-text-stroke-color: red;
@@ -66,53 +66,35 @@ translation_of: Web/CSS/-webkit-text-stroke-width
 #thick {
   -webkit-text-stroke-width: 1.5mm;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p id="thin"&gt;Trait fin&lt;/p&gt;
-&lt;p id="medium"&gt;Trait moyen&lt;/p&gt;
-&lt;p id="thick"&gt;Trait épais&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "450px", "230px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>Définition initiale dans un standard.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width">Référence CSS Safari -webkit-text-stroke-width dans ce document.</a></td>
-   <td>Documentation non-officielle, non-standard.</td>
-   <td>Documentation initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.-webkit-text-stroke-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
- <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)</a></li>
- <li>{{cssxref("-webkit-text-stroke-color")}}</li>
- <li>{{cssxref("-webkit-text-stroke")}}</li>
- <li>{{cssxref("-webkit-text-fill-color")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<p id="thin">Trait fin</p>
+<p id="medium">Trait moyen</p>
+<p id="thick">Trait épais</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "450px", "230px")}}
+
+## Spécifications
+
+| Spécification                                                                                                                                                                                                                                                      | État                                        | Commentaires                          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------- |
+| {{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}                                                                                                                                                   | {{Spec2('Compat')}}                    | Définition initiale dans un standard. |
+| [Référence CSS Safari -webkit-text-stroke-width dans ce document.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width) | Documentation non-officielle, non-standard. | Documentation initiale.               |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.-webkit-text-stroke-width")}}
+
+## Voir aussi
+
+- [Le billet de _Surfin' Safari_ qui annonce cette fonctionnalité (en anglais)](https://www.webkit.org/blog/85/introducing-text-stroke/)
+- [L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)](https://css-tricks.com/adding-stroke-to-web-text/)
+- {{cssxref("-webkit-text-stroke-color")}}
+- {{cssxref("-webkit-text-stroke")}}
+- {{cssxref("-webkit-text-fill-color")}}
diff --git a/files/fr/web/css/-webkit-text-stroke/index.md b/files/fr/web/css/-webkit-text-stroke/index.md
index 1b44d52d3b..5149521a93 100644
--- a/files/fr/web/css/-webkit-text-stroke/index.md
+++ b/files/fr/web/css/-webkit-text-stroke/index.md
@@ -8,88 +8,72 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-text-stroke
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-text-stroke</code></strong> permet de définir l'épaisseur et la couleur du contour utilisé pour les lettres d'un texte. Cette propriété est une propriété raccourcie qui permet de définir les propriétés {{cssxref("-webkit-text-stroke-width")}} et {{cssxref("-webkit-text-stroke-color")}}.</p>
+La propriété **`-webkit-text-stroke`** permet de définir l'épaisseur et la couleur du contour utilisé pour les lettres d'un texte. Cette propriété est une propriété raccourcie qui permet de définir les propriétés {{cssxref("-webkit-text-stroke-width")}} et {{cssxref("-webkit-text-stroke-color")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de largeur et de couleur */
+```css
+/* Valeurs de largeur et de couleur */
 -webkit-text-stroke: 4px navy;
 
 /* Valeurs globales */
 -webkit-text-stroke: inherit;
 -webkit-text-stroke: initial;
 -webkit-text-stroke: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>L'épaisseur du contour (cf. {{cssxref("&lt;length&gt;")}}).</dd>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>La couleur du contour (cf. {{cssxref("&lt;color&gt;")}}).</dd>
-</dl>
+- `<length>`
+  - : L'épaisseur du contour (cf. {{cssxref("&lt;length&gt;")}}).
+- `<color>`
+  - : La couleur du contour (cf. {{cssxref("&lt;color&gt;")}}).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#exemple {
+```css
+#exemple {
   font-size: 3em;
   margin: 0;
   -webkit-text-stroke: 2px red;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p id="exemple"&gt;Le contour de ce texte est rouge.&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 600, 60)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>Définition initiale dans un standard.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke">Référence CSS Safari -webkit-text-stroke dans ce document.</a></td>
-   <td>Documentation non-officielle, non-standard.</td>
-   <td>Documentation initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.-webkit-text-stroke")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
- <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks décrivant cette fonctionnalité (en anglais)</a></li>
- <li>{{cssxref("-webkit-text-stroke-width")}}</li>
- <li>{{cssxref("-webkit-text-stroke-color")}}</li>
- <li>{{cssxref("-webkit-text-fill-color")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<p id="exemple">Le contour de ce texte est rouge.</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 600, 60)}}
+
+## Spécifications
+
+| Spécification                                                                                                                                                                                                                                          | État                                        | Commentaires                          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------- |
+| {{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}                                                                                                                                                       | {{Spec2('Compat')}}                    | Définition initiale dans un standard. |
+| [Référence CSS Safari -webkit-text-stroke dans ce document.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke) | Documentation non-officielle, non-standard. | Documentation initiale.               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.-webkit-text-stroke")}}
+
+## Voir aussi
+
+- [Le billet de _Surfin' Safari_ qui annonce cette fonctionnalité (en anglais)](https://www.webkit.org/blog/85/introducing-text-stroke/)
+- [L'article de CSS-Tricks décrivant cette fonctionnalité (en anglais)](https://css-tricks.com/adding-stroke-to-web-text/)
+- {{cssxref("-webkit-text-stroke-width")}}
+- {{cssxref("-webkit-text-stroke-color")}}
+- {{cssxref("-webkit-text-fill-color")}}
diff --git a/files/fr/web/css/-webkit-touch-callout/index.md b/files/fr/web/css/-webkit-touch-callout/index.md
index 29ae2fe13a..9c8f60d484 100644
--- a/files/fr/web/css/-webkit-touch-callout/index.md
+++ b/files/fr/web/css/-webkit-touch-callout/index.md
@@ -8,47 +8,48 @@ tags:
   - Reference
 translation_of: Web/CSS/-webkit-touch-callout
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>-webkit-touch-callout</code></strong> permet de contrôler l'affichage de la légende (<em>callout</em>) affichée par défaut lorsque le toucher est maintenu sur un élément.</p>
+La propriété **`-webkit-touch-callout`** permet de contrôler l'affichage de la légende (_callout_) affichée par défaut lorsque le toucher est maintenu sur un élément.
 
-<p>Lorsqu'un élément est touché et que la pression est maintenue sur iOS, Safari affiche une bulle d'informations à propos du lien. Cette propriété permet de désactiver ce fonctionnement.</p>
+Lorsqu'un élément est touché et que la pression est maintenue sur iOS, Safari affiche une bulle d'informations à propos du lien. Cette propriété permet de désactiver ce fonctionnement.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 -webkit-touch-callout: default;
 -webkit-touch-callout: none;
 
 /* Valeurs globales */
 -webkit-touch-callout: initial;
 -webkit-touch-callout: inherit;
--webkit-touch-callout: unset;</pre>
+-webkit-touch-callout: unset;
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>default</code></dt>
- <dd>La légende par défaut est activée.</dd>
- <dt><code>none</code></dt>
- <dd>La légende est désactivée.</dd>
-</dl>
+- `default`
+  - : La légende par défaut est activée.
+- `none`
+  - : La légende est désactivée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   -webkit-touch-callout: none;
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est décrite dans <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">la référence CSS de Safari</a>.</p>
+Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est décrite dans [la référence CSS de Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout).
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.-webkit-touch-callout")}}</p>
+{{Compat("css.properties.-webkit-touch-callout")}}
diff --git a/files/fr/web/css/@charset/index.md b/files/fr/web/css/@charset/index.md
index 34e47a96b2..daa7e6ceb9 100644
--- a/files/fr/web/css/@charset/index.md
+++ b/files/fr/web/css/@charset/index.md
@@ -7,73 +7,61 @@ tags:
   - Règle @
 translation_of: Web/CSS/@charset
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a>  <strong><code>@charset</code></strong> définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des <a href="/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS">instructions imbriquées</a> et ne peut donc pas être utilisée <a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">à l'intérieur des groupes conditionnels</a>. Si plusieurs règles <code>@charset</code> sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut <code>style</code> d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte.</p>
+La [règle @](/fr/docs/Web/CSS/R%C3%A8gles_@)  **`@charset`** définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des [instructions imbriquées](/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS) et ne peut donc pas être utilisée [à l'intérieur des groupes conditionnels](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). Si plusieurs règles `@charset` sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut `style` d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte.
 
-<pre class="brush: css no-line-numbers">@charset "utf-8";</pre>
+```css
+@charset "utf-8";
+```
 
-<p>Cette règle @ s'avère notamment utile lorsqu'on utilise des caractères non-ASCII pour certaines propriétés CSS telles que {{cssxref("content")}}.</p>
+Cette règle @ s'avère notamment utile lorsqu'on utilise des caractères non-ASCII pour certaines propriétés CSS telles que {{cssxref("content")}}.
 
-<p>Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une feuille de style. Il utilisera ces méthodes dans l'ordre qui suit et s'arrêtera dès qu'un résultat sera obtenu (autrement dit, les règles qui suivent sont triées par priorité décroissante) :</p>
+Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une feuille de style. Il utilisera ces méthodes dans l'ordre qui suit et s'arrêtera dès qu'un résultat sera obtenu (autrement dit, les règles qui suivent sont triées par priorité décroissante) :
 
-<ol>
- <li>La valeur du caractère indiquant <a href="https://fr.wikipedia.org/wiki/Indicateur_d'ordre_des_octets">l'ordre des octets Unicode</a> qui est placé au début du fichier (le BOM)</li>
- <li>La valeur fournie par l'attribut <code>charset</code> de l'en-tête HTTP <code>Content-Type</code> ou l'information équivalente dans le protocole utilisé pour servir la feuille de style.</li>
- <li>La règle @ CSS <code>@charset</code>.</li>
- <li>L'encodage défini dans le document appelant la ressource (l'attribut <code>charset</code> de l'élément {{HTMLElement("link")}}). Cette méthode est désormais obsolète et ne doit plus être utilisée.</li>
- <li>Dans tous les autres cas, on considère que le document est encodé en UTF-8</li>
-</ol>
+1.  La valeur du caractère indiquant [l'ordre des octets Unicode](https://fr.wikipedia.org/wiki/Indicateur_d'ordre_des_octets) qui est placé au début du fichier (le BOM)
+2.  La valeur fournie par l'attribut `charset` de l'en-tête HTTP `Content-Type` ou l'information équivalente dans le protocole utilisé pour servir la feuille de style.
+3.  La règle @ CSS `@charset`.
+4.  L'encodage défini dans le document appelant la ressource (l'attribut `charset` de l'élément {{HTMLElement("link")}}). Cette méthode est désormais obsolète et ne doit plus être utilisée.
+5.  Dans tous les autres cas, on considère que le document est encodé en UTF-8
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">@charset &lt;<em>charset</em>&gt;;
-</pre>
+```css
+@charset <charset>;
+```
 
-<p>où</p>
+où
 
-<dl>
- <dt><code><em>charset</em></code></dt>
- <dd>Est une chaîne de caractères (une valeur CSS de type  {{cssxref("&lt;string&gt;")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans <a href="https://www.iana.org/assignments/character-sets/character-sets.xhtml">le registre IANA</a> et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec <em>préféré</em>  (<em>preferred</em>) doit être utilisé.</dd>
-</dl>
+- `charset`
+  - : Est une chaîne de caractères (une valeur CSS de type  {{cssxref("&lt;string&gt;")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans [le registre IANA](https://www.iana.org/assignments/character-sets/character-sets.xhtml) et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec *préféré*  (_preferred_) doit être utilisé.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemples_valides">Exemples valides</h3>
+### Exemples valides
 
-<pre class="brush: css">@charset "UTF-8";      /* Valide, la feuille de style est encodée en Unicode UTF-8 */
+```css
+@charset "UTF-8";      /* Valide, la feuille de style est encodée en Unicode UTF-8 */
 @charset "iso-8859-15"; /* Valide, la feuille de style est encodée en Latin-9 (langues d'Europe occidentale avec le symbole €) */
-</pre>
+```
 
-<h3 id="Exemples_invalides">Exemples invalides</h3>
+### Exemples invalides
 
-<pre class="brush: css example-bad"> @charset "UTF-8";      /* Invalide, il y a un caractère (un espace) avant la règle @ */
+```css example-bad
+ @charset "UTF-8";      /* Invalide, il y a un caractère (un espace) avant la règle @ */
 @charset UTF-8;         /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS ({{cssxref("&lt;string&gt;")}}) */
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.charset")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                            | État                     | Commentaires         |
+| ------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}} | {{Spec2('CSS2.1')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.charset")}}
diff --git a/files/fr/web/css/@counter-style/additive-symbols/index.md b/files/fr/web/css/@counter-style/additive-symbols/index.md
index 538f1b0fe8..f0753e9c5d 100644
--- a/files/fr/web/css/@counter-style/additive-symbols/index.md
+++ b/files/fr/web/css/@counter-style/additive-symbols/index.md
@@ -7,79 +7,69 @@ tags:
   - Reference
 translation_of: Web/CSS/@counter-style/additive-symbols
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <strong><code>additive-symbols</code></strong>, utilisé pour la règle @ {{cssxref("@counter-style")}} est semblable au descripteur {{cssxref('symbols')}} et permet à l'utilisateur de définir les symboles qui doivent être utilisé pour représenter le compteur lorsque le descripteur {{cssxref('system')}} prend la valeur <code>additive</code>. Le descripteur <code>additive-symbols</code> définit des <em>tuples additifs</em>. Un tuple additif est une paire contenant un symbole et un entier positif qui représente un poids. Le système additif est utilisé afin de construire des systèmes <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">de notation additive</a> tels que les nombres romains.</p>
+Le descripteur **`additive-symbols`**, utilisé pour la règle @ {{cssxref("@counter-style")}} est semblable au descripteur {{cssxref('symbols')}} et permet à l'utilisateur de définir les symboles qui doivent être utilisé pour représenter le compteur lorsque le descripteur {{cssxref('system')}} prend la valeur `additive`. Le descripteur `additive-symbols` définit des _tuples additifs_. Un tuple additif est une paire contenant un symbole et un entier positif qui représente un poids. Le système additif est utilisé afin de construire des systèmes [de notation additive](<https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)>) tels que les nombres romains.
 
-<pre class="brush: css  no-line-numbers">additive-symbols: 3 "0";
+```css
+additive-symbols: 3 "0";
 additive-symbols: 3 "0", 2 "\2E\20";
 additive-symbols: 3 "0", 2 url(symbol.png);
-</pre>
+```
 
-<p>Lorsque la valeur du descripteur <code>system</code> est <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> ou <code>fixed</code>, c'est le descripteur <code>symbols</code> qui est utilisé à la place de <code>additive-symbols</code> afin de définir les symboles utilisés pour le compteur.</p>
+Lorsque la valeur du descripteur `system` est `cyclic`, `numeric`, `alphabetic`, `symbolic` ou `fixed`, c'est le descripteur `symbols` qui est utilisé à la place de `additive-symbols` afin de définir les symboles utilisés pour le compteur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@counter-style additive-symbols-example {
+```css
+@counter-style additive-symbols-example {
   system: additive;
   additive-symbols: V 5, IV 4, I 1;
 }
 .exemple {
   list-style: additive-symbols-example;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul class="exemple"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.counter-style.additive-symbols")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("list-style")}},</li>
- <li>{{cssxref("list-style-image")}},</li>
- <li>{{cssxref("list-style-position")}}</li>
- <li>{{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+}
+```
+
+### HTML
+
+```html
+<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
 </ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.counter-style.additive-symbols")}}
+
+## Voir aussi
+
+- {{cssxref("list-style")}},
+- {{cssxref("list-style-image")}},
+- {{cssxref("list-style-position")}}
+- {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
diff --git a/files/fr/web/css/@counter-style/fallback/index.md b/files/fr/web/css/@counter-style/fallback/index.md
index 92c54c2c55..88bd654e07 100644
--- a/files/fr/web/css/@counter-style/fallback/index.md
+++ b/files/fr/web/css/@counter-style/fallback/index.md
@@ -7,82 +7,70 @@ tags:
   - Reference
 translation_of: Web/CSS/@counter-style/fallback
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <strong><code>fallback</code></strong>, associé à la règle @ {{cssxref("@counter-style")}} est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur <code>decimal</code> qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont :</p>
+Le descripteur **`fallback`**, associé à la règle @ {{cssxref("@counter-style")}} est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur `decimal` qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont :
 
-<ul>
- <li>Lorsque le descripteur {{cssxref('range')}} est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle.</li>
- <li>Lorsque le descripteur {{cssxref('system')}} vaut <code>fixed</code> et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste.</li>
-</ul>
+- Lorsque le descripteur {{cssxref('range')}} est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle.
+- Lorsque le descripteur {{cssxref('system')}} vaut `fixed` et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 fallback: lower-alpha;
 fallback: custom-gangnam-style;
-</pre>
+```
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@counter-style fallback-example {
+```css
+@counter-style fallback-example {
   system: fixed; symbols: "\24B6" "\24B7" "\24B8";
   fallback: upper-alpha;
 }
 .exemple {
   list-style: fallback-example;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul class="exemple"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-fallback', 'fallback')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.counter-style.fallback")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("list-style")}},</li>
- <li>{{cssxref("list-style-image")}},</li>
- <li>{{cssxref("list-style-position")}},</li>
- <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+}
+```
+
+### HTML
+
+```html
+<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
 </ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#counter-style-fallback', 'fallback')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.counter-style.fallback")}}
+
+## Voir aussi
+
+- {{cssxref("list-style")}},
+- {{cssxref("list-style-image")}},
+- {{cssxref("list-style-position")}},
+- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
diff --git a/files/fr/web/css/@counter-style/index.md b/files/fr/web/css/@counter-style/index.md
index 6a557b88d4..05a3eb08fb 100644
--- a/files/fr/web/css/@counter-style/index.md
+++ b/files/fr/web/css/@counter-style/index.md
@@ -7,11 +7,12 @@ tags:
   - Règle @
 translation_of: Web/CSS/@counter-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> CSS<strong> <code>@counter-style</code></strong> permet aux auteurs de définir des styles de compteurs qui ne font pas partie de l'ensemble des styles natifs prédéfinis. Une règle <code>@counter-style</code> explique comment convertir la valeur d'un compteur en une chaîne de caractères correspondantes.</p>
+La [règle @](/fr/docs/Web/CSS/Règles_@) CSS** `@counter-style`** permet aux auteurs de définir des styles de compteurs qui ne font pas partie de l'ensemble des styles natifs prédéfinis. Une règle `@counter-style` explique comment convertir la valeur d'un compteur en une chaîne de caractères correspondantes.
 
-<pre class="brush: css no-line-numbers">@counter-style thumbs {
+```css
+@counter-style thumbs {
   system: cyclic;
   symbols: "\1F44D";
   suffix: " ";
@@ -19,150 +20,137 @@ translation_of: Web/CSS/@counter-style
 
 ul {
    list-style: thumbs;
-}</pre>
+}
+```
 
-<p>La version initiale de CSS définit un ensemble de compteurs qui peuvent être utilisés pour mettre en forme les listes. Malgré l'ajout de nouveaux styles au fur et à mesure, cette approche s'est retrouvée limitée pour couvrir tous les besoins liés à la typographie. La règle <code>@counter-style</code> permet donc aux auteurs de définir librement d'autres styles si les styles prédéfinis ne conviennent pas.</p>
+La version initiale de CSS définit un ensemble de compteurs qui peuvent être utilisés pour mettre en forme les listes. Malgré l'ajout de nouveaux styles au fur et à mesure, cette approche s'est retrouvée limitée pour couvrir tous les besoins liés à la typographie. La règle `@counter-style` permet donc aux auteurs de définir librement d'autres styles si les styles prédéfinis ne conviennent pas.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Descripteurs">Descripteurs</h3>
+### Descripteurs
 
-<p>Chaque <code>@counter-style</code> est identifié par un nom et possède un ensemble de descripteurs.</p>
+Chaque `@counter-style` est identifié par un nom et possède un ensemble de descripteurs.
 
-<dl>
- <dt>{{cssxref("@counter-style/system", "system")}}</dt>
- <dd>Ce descripteur indique l'algorithme à utiliser pour convertir les valeurs entières du compteur en des chaînes de caractères correspondantes.</dd>
-</dl>
+- {{cssxref("@counter-style/system", "system")}}
+  - : Ce descripteur indique l'algorithme à utiliser pour convertir les valeurs entières du compteur en des chaînes de caractères correspondantes.
 
-<dl>
- <dt>{{cssxref("@counter-style/negative", "negative")}}</dt>
- <dd>Ce descripteur permet d'indiquer si le symbole du compteur doit être préfixé ou suffixé si la valeur est négative.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt>{{cssxref("@counter-style/prefix", "prefix")}}</dt>
- <dd>Ce descripteur indique un symbole qui doit être utilisé comme préfixe pour le compteur. Les préfixes sont ajoutés à la fin de la représentation et apparaissent avant le signe négatif.</dd>
-</dl>
+- {{cssxref("@counter-style/negative", "negative")}}
+  - : Ce descripteur permet d'indiquer si le symbole du compteur doit être préfixé ou suffixé si la valeur est négative.
 
-<dl>
- <dt>{{cssxref("@counter-style/suffix", "suffix")}}</dt>
- <dd>Ce descripteur indique un symbole qui doit être utilisé comme suffixe pour le compteur. Comme pour les préfixes, les suffixes sont ajoutés à la fin de la représentation.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt>{{cssxref("@counter-style/range", "range")}}</dt>
- <dd>Ce descripteur indique l'intervalle de valeur pour lequel le style du compteur peut s'appliquer. Pour les valeurs du compteur en dehors de cet intervalle, le style utilisé sera le style de secours.</dd>
-</dl>
+- {{cssxref("@counter-style/prefix", "prefix")}}
+  - : Ce descripteur indique un symbole qui doit être utilisé comme préfixe pour le compteur. Les préfixes sont ajoutés à la fin de la représentation et apparaissent avant le signe négatif.
 
-<dl>
- <dt>{{cssxref("@counter-style/pad", "pad")}}</dt>
- <dd>Ce descripteur est utilisé lorsqu'il faut que la représentation du marqueur ait une longueur minimale. Ainsi, s'il faut que le compteur mesure deux caractères (ex. 01, 02, 03, 04 etc), on utilisera ce descripteur. Pour les valeurs dont la taille est plus grande que celle indiquée dans ce descripteur, le marqueur est construit normalement.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt>{{cssxref("@counter-style/fallback", "fallback")}}</dt>
- <dd>Ce descripteur définit le système en cas de secours (si le système définit via la règle @ ne permet pas de construire le marqueur ou si la valeur du compteur est en dehors de l'intervalle défini). Si le système indiqué en secours échoue également, ce sera alors le système de secours de secours qui sera utilisé et ainsi de suite si nécessaire. Si besoin, le style décimal sera utilisé en fin de chaîne.</dd>
-</dl>
+- {{cssxref("@counter-style/suffix", "suffix")}}
+  - : Ce descripteur indique un symbole qui doit être utilisé comme suffixe pour le compteur. Comme pour les préfixes, les suffixes sont ajoutés à la fin de la représentation.
 
-<dl>
- <dt>{{cssxref("@counter-style/symbols", "symbols")}}</dt>
- <dd>Ce descripteur définit les symboles qui doivent être utilisés pour représenter le marqueur. Les symboles peuvent contenir des chaînes de caractères, des images ou des identifiants. L'utilisation des symboles et leur combinaison pour représenter le marqueur dépend de l'algorithme indiqué via le descripteur <code>system</code>. Ainsi, si <code>system</code> vaut <code>fixed</code>, chacun des N symboles définis dans le descripteur sera utilisé pour représenter les N premiers symboles. Une fois l'ensemble épuisé, le style de secours sera utilisé pour le reste de la liste.<br>
- <br>
- Cet exemple de règle <code>@counter-style</code> utilise des images plutôt que des caractères. Attention, l'utilisation d'image pour les symboles est une fonctionnalité à risque en termes de conservation dans la spécification et n'est implémentée par aucun navigateur.<br>
+<!---->
 
- <pre class="brush: css">@counter-style winners-list {
-  system: fixed;
-  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
-  suffix: " ";
-}</pre>
- </dd>
-</dl>
+- {{cssxref("@counter-style/range", "range")}}
+  - : Ce descripteur indique l'intervalle de valeur pour lequel le style du compteur peut s'appliquer. Pour les valeurs du compteur en dehors de cet intervalle, le style utilisé sera le style de secours.
+
+<!---->
+
+- {{cssxref("@counter-style/pad", "pad")}}
+  - : Ce descripteur est utilisé lorsqu'il faut que la représentation du marqueur ait une longueur minimale. Ainsi, s'il faut que le compteur mesure deux caractères (ex. 01, 02, 03, 04 etc), on utilisera ce descripteur. Pour les valeurs dont la taille est plus grande que celle indiquée dans ce descripteur, le marqueur est construit normalement.
+
+<!---->
+
+- {{cssxref("@counter-style/fallback", "fallback")}}
+  - : Ce descripteur définit le système en cas de secours (si le système définit via la règle @ ne permet pas de construire le marqueur ou si la valeur du compteur est en dehors de l'intervalle défini). Si le système indiqué en secours échoue également, ce sera alors le système de secours de secours qui sera utilisé et ainsi de suite si nécessaire. Si besoin, le style décimal sera utilisé en fin de chaîne.
+
+<!---->
+
+- {{cssxref("@counter-style/symbols", "symbols")}}
+
+  - : Ce descripteur définit les symboles qui doivent être utilisés pour représenter le marqueur. Les symboles peuvent contenir des chaînes de caractères, des images ou des identifiants. L'utilisation des symboles et leur combinaison pour représenter le marqueur dépend de l'algorithme indiqué via le descripteur `system`. Ainsi, si `system` vaut `fixed`, chacun des N symboles définis dans le descripteur sera utilisé pour représenter les N premiers symboles. Une fois l'ensemble épuisé, le style de secours sera utilisé pour le reste de la liste.
+
+    Cet exemple de règle `@counter-style` utilise des images plutôt que des caractères. Attention, l'utilisation d'image pour les symboles est une fonctionnalité à risque en termes de conservation dans la spécification et n'est implémentée par aucun navigateur.
+
+    ```css
+    @counter-style winners-list {
+      system: fixed;
+      symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+      suffix: " ";
+    }
+    ```
+
+<!---->
 
-<dl>
- <dt>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</dt>
- <dd>Certains symboles définis via le descripteurs <code>symbols</code> sont utilisés par la plupart des algorithmes. Certains systèmes dits « additifs » s'appuient sur des <em>tuples additifs</em> décrit avec ce descripteur. Chaque tuple additif se compose d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids.</dd>
-</dl>
+- {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
+  - : Certains symboles définis via le descripteurs `symbols` sont utilisés par la plupart des algorithmes. Certains systèmes dits « additifs » s'appuient sur des _tuples additifs_ décrit avec ce descripteur. Chaque tuple additif se compose d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids.
 
-<dl>
- <dt>{{cssxref("@counter-style/speak-as", "speak-as")}}</dt>
- <dd>Ce descripteur indique la façon dont le compteur peut être prononcé par un lecteur d'écran. Ainsi, la valeur du symbole peut être lue comme un nombre ou comme un alphabet ou comme des sons fournis.</dd>
-</dl>
+<!---->
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- {{cssxref("@counter-style/speak-as", "speak-as")}}
+  - : Ce descripteur indique la façon dont le compteur peut être prononcé par un lecteur d'écran. Ainsi, la valeur du symbole peut être lue comme un nombre ou comme un alphabet ou comme des sons fournis.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@counter-style circled-alpha {
+```css
+@counter-style circled-alpha {
   system: fixed;
   symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
   suffix: " ";
-}</pre>
+}
+```
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
    list-style: circled-alpha;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul class="exemple"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-  &lt;li&gt;Six&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Une page d'exemple avec plus de variables est disponible ici : <a href="https://mdn.github.io/css-examples/counter-style-demo/">https://mdn.github.io/css-examples/counter-style-demo/</a>.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.counter-style")}}</p>
-
-<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3>
-
-<ul>
- <li>Gecko permettait d'utiliser <code>none</code> comme valeur pour les descripteurs <code>system</code> et <code>fallback</code> de <code>@counter-style</code> alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).</li>
+```
+
+### HTML
+
+```html
+<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+  <li>Six</li>
 </ul>
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+### Résultat
 
-<ul>
- <li>{{cssxref("list-style")}}</li>
- <li>{{cssxref("list-style-image")}}</li>
- <li>{{cssxref("list-style-position")}}</li>
- <li>{{cssxref("list-style-type")}}</li>
- <li>{{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes</li>
- <li>Les fonctions CSS {{Cssxref("counter")}} et {{Cssxref("counters")}}</li>
- <li><a href="https://mdn.github.io/css-examples/counter-style-demo/">Démonstration pour les styles de compteur</a> (<a href="https://github.com/mdn/css-examples/tree/master/counter-style-demo">code</a>)</li>
-</ul>
+{{EmbedLiveSample("Exemples")}}
+
+> **Note :** Une page d'exemple avec plus de variables est disponible ici : <https://mdn.github.io/css-examples/counter-style-demo/>.
+
+## Spécifications
+
+| Spécification                                                                                            | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.counter-style")}}
+
+### Notes relatives à Quantum
+
+- Gecko permettait d'utiliser `none` comme valeur pour les descripteurs `system` et `fallback` de `@counter-style` alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).
+
+## Voir aussi
+
+- {{cssxref("list-style")}}
+- {{cssxref("list-style-image")}}
+- {{cssxref("list-style-position")}}
+- {{cssxref("list-style-type")}}
+- {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes
+- Les fonctions CSS {{Cssxref("counter")}} et {{Cssxref("counters")}}
+- [Démonstration pour les styles de compteur](https://mdn.github.io/css-examples/counter-style-demo/) ([code](https://github.com/mdn/css-examples/tree/master/counter-style-demo))
diff --git a/files/fr/web/css/@counter-style/negative/index.md b/files/fr/web/css/@counter-style/negative/index.md
index 673163de4e..93821f1fd6 100644
--- a/files/fr/web/css/@counter-style/negative/index.md
+++ b/files/fr/web/css/@counter-style/negative/index.md
@@ -7,89 +7,77 @@ tags:
   - Reference
 translation_of: Web/CSS/@counter-style/negative
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <strong><code>negative</code></strong>, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir la représentation du compteur lorsque la valeur est négative.</p>
+Le descripteur **`negative`**, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir la représentation du compteur lorsque la valeur est négative.
 
-<pre class="brush: css no-line-numbers">/* Valeurs représentant les symboles */
+```css
+/* Valeurs représentant les symboles */
 negative: "-";       /* Préfixe '-' si la valeur est négative */
 negative: "(" ")";   /* Entoure la valeur avec '(' et ')' si elle est négative */
-</pre>
+```
 
-<p>Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur <code>negative</code> n'a d'effet que si la valeur du descripteur <code>system</code> est <code>symbolic</code>, <code>alphabetic</code>, <code>numeric</code>, <code>additive</code> ou <code>extends</code> et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur <code>negative</code> est fourni, il est ignoré.</p>
+Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur `negative` n'a d'effet que si la valeur du descripteur `system` est `symbolic`, `alphabetic`, `numeric`, `additive` ou `extends` et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur `negative` est fourni, il est ignoré.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>Premier symbole</dt>
- <dd>Le préfixe (type {{cssxref("&lt;symbol&gt;")}}) à ajouter à la représentation lorsque la valeur du compteur est négative.</dd>
- <dt>Deuxième symbole {{optional_inline}}</dt>
- <dd>Si cette valeur (type {{cssxref("&lt;symbol&gt;")}}) est présente, le symbole sera ajouté après la représentation du compteur lorsque sa valeur est négative.</dd>
-</dl>
+- Premier symbole
+  - : Le préfixe (type {{cssxref("&lt;symbol&gt;")}}) à ajouter à la représentation lorsque la valeur du compteur est négative.
+- Deuxième symbole {{optional_inline}}
+  - : Si cette valeur (type {{cssxref("&lt;symbol&gt;")}}) est présente, le symbole sera ajouté après la représentation du compteur lorsque sa valeur est négative.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@counter-style neg {
+```css
+@counter-style neg {
   system: numeric;
   symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
   negative: "(-" ")";
 }
 .exemple {
   list-style: neg;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul class="exemple" start="-3"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.counter-style.negative")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("list-style")}},</li>
- <li>{{cssxref("list-style-image")}},</li>
- <li>{{cssxref("list-style-position")}},</li>
- <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle pour créer des styles de compteur anonymes.</li>
+}
+```
+
+### HTML
+
+```html
+<ul class="exemple" start="-3">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
 </ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.counter-style.negative")}}
+
+## Voir aussi
+
+- {{cssxref("list-style")}},
+- {{cssxref("list-style-image")}},
+- {{cssxref("list-style-position")}},
+- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle pour créer des styles de compteur anonymes.
diff --git a/files/fr/web/css/@counter-style/pad/index.md b/files/fr/web/css/@counter-style/pad/index.md
index a27313ddef..6a146050c7 100644
--- a/files/fr/web/css/@counter-style/pad/index.md
+++ b/files/fr/web/css/@counter-style/pad/index.md
@@ -7,90 +7,76 @@ tags:
   - Reference
 translation_of: Web/CSS/@counter-style/pad
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <strong><code>pad</code></strong>, utilisé dans la règle @ {{cssxref("@counter-style")}} peut être utilisé pour que la représentation du marqueur pour le compteur ait une longueur minimale. Si la représentation du marqueur est plus courte que la longueur indiquée, le marqueur sera complété autant de fois que nécessaire avec le symbole indiqué. Les représentations du marqueur qui sont plus longues que la longueur minimale indiquée dans le descripteur sont construites normalement.</p>
+Le descripteur **`pad`**, utilisé dans la règle @ {{cssxref("@counter-style")}} peut être utilisé pour que la représentation du marqueur pour le compteur ait une longueur minimale. Si la représentation du marqueur est plus courte que la longueur indiquée, le marqueur sera complété autant de fois que nécessaire avec le symbole indiqué. Les représentations du marqueur qui sont plus longues que la longueur minimale indiquée dans le descripteur sont construites normalement.
 
-<p>Le descripteur <code>pad</code> utilise deux paramètres :</p>
+Le descripteur `pad` utilise deux paramètres :
 
-<ul>
- <li>un entier indiquant la longueur minimale de la représentation du marqueur</li>
- <li>Le symbole utilisé pour compléter la représentation du marqueur si nécessaire.</li>
-</ul>
+- un entier indiquant la longueur minimale de la représentation du marqueur
+- Le symbole utilisé pour compléter la représentation du marqueur si nécessaire.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">pad: 3 "0";
-</pre>
+```css
+pad: 3 "0";
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;integer&gt; &amp;&amp; &lt;symbol&gt;</code></dt>
- <dd>La composante <code>&lt;integer&gt;</code> indique la longueur minimale du marqueur. La valeur doit être positive. Si la représentation du marqueur est plus courte, elle sera complétée avec la valeur indiquée par la composante <code>&lt;symbol&gt;</code>.</dd>
-</dl>
+- `<integer> && <symbol>`
+  - : La composante `<integer>` indique la longueur minimale du marqueur. La valeur doit être positive. Si la représentation du marqueur est plus courte, elle sera complétée avec la valeur indiquée par la composante `<symbol>`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@counter-style pad-example {
+```css
+@counter-style pad-example {
   system: numeric;
   symbols: "0" "1" "2" "3" "4" "5";
   pad: 2 "0";
 }
 .exemple {
   list-style: pad-example;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul class="exemple"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-pad', 'pad')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.counter-style.pad")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("list-style")}},</li>
- <li>{{cssxref("list-style-image")}},</li>
- <li>{{cssxref("list-style-position")}},</li>
- <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+}
+```
+
+### HTML
+
+```html
+<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
 </ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#descdef-counter-style-pad', 'pad')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.counter-style.pad")}}
+
+## Voir aussi
+
+- {{cssxref("list-style")}},
+- {{cssxref("list-style-image")}},
+- {{cssxref("list-style-position")}},
+- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
diff --git a/files/fr/web/css/@counter-style/prefix/index.md b/files/fr/web/css/@counter-style/prefix/index.md
index 34af4ccc6e..506d733ed5 100644
--- a/files/fr/web/css/@counter-style/prefix/index.md
+++ b/files/fr/web/css/@counter-style/prefix/index.md
@@ -7,33 +7,33 @@ tags:
   - Reference
 translation_of: Web/CSS/@counter-style/prefix
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <code><strong>prefix</strong></code>, utilisé avec la règle @ {{cssxref("@counter-style")}}, permet de définir un symbole qui sera ajouté comme préfixe à la représentation du marqueur. Si aucune valeur n'est fournie, la valeur utilisée par défaut sera la chaîne de caractères vide.</p>
+Le descripteur **`prefix`**, utilisé avec la règle @ {{cssxref("@counter-style")}}, permet de définir un symbole qui sera ajouté comme préfixe à la représentation du marqueur. Si aucune valeur n'est fournie, la valeur utilisée par défaut sera la chaîne de caractères vide.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de symbole */
+```css
+/* Valeurs de symbole */
 prefix: "»";
 prefix: "Page";
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;symbol&gt;</code></dt>
- <dd>Définit le symbole à utilisé comme préfixe devant le marqueur du compteur de la liste. Cette valeur peut être une valeur de type {{cssxref("&lt;string&gt;")}}, {{cssxref("&lt;image&gt;")}} ou {{cssxref("&lt;custom-ident&gt;")}}.</dd>
-</dl>
+- `<symbol>`
+  - : Définit le symbole à utilisé comme préfixe devant le marqueur du compteur de la liste. Cette valeur peut être une valeur de type {{cssxref("&lt;string&gt;")}}, {{cssxref("&lt;image&gt;")}} ou {{cssxref("&lt;custom-ident&gt;")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@counter-style chapitres {
+```css
+@counter-style chapitres {
   system: numeric;
   symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
   prefix: 'Chapitre ';
@@ -42,52 +42,40 @@ prefix: "Page";
 .exemple {
   list-style: chapitres;
   padding-left: 15ch;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul class="exemple"&gt;
-  &lt;li&gt;Au fond du terrier&lt;/li&gt;
-  &lt;li&gt;La mare aux larmes&lt;/li&gt;
-  &lt;li&gt;La course cocasse&lt;/li&gt;
-  &lt;li&gt;L'habitation du lapin blanc&lt;/li&gt;
-  &lt;li&gt;Conseils d'une chenille&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-prefix', 'prefix')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.counter-style.prefix")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("list-style")}},</li>
- <li>{{cssxref("list-style-image")}},</li>
- <li>{{cssxref("list-style-position")}},</li>
- <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+}
+```
+
+### HTML
+
+```html
+<ul class="exemple">
+  <li>Au fond du terrier</li>
+  <li>La mare aux larmes</li>
+  <li>La course cocasse</li>
+  <li>L'habitation du lapin blanc</li>
+  <li>Conseils d'une chenille</li>
 </ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#descdef-counter-style-prefix', 'prefix')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.counter-style.prefix")}}
+
+## Voir aussi
+
+- {{cssxref("list-style")}},
+- {{cssxref("list-style-image")}},
+- {{cssxref("list-style-position")}},
+- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
diff --git a/files/fr/web/css/@counter-style/range/index.md b/files/fr/web/css/@counter-style/range/index.md
index 4bc4ce55cd..17e25047d6 100644
--- a/files/fr/web/css/@counter-style/range/index.md
+++ b/files/fr/web/css/@counter-style/range/index.md
@@ -7,26 +7,25 @@ tags:
   - Reference
 translation_of: Web/CSS/@counter-style/range
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <code><strong>range</strong></code>, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir l'intervalle de valeurs pris en compte par le compteur personnalisé. Si la valeur du compteur de la liste est en dehors de cet intervalle, ce sera la mise en forme de secours qui sera utilisée pour représenter le marqueur du compteur. La valeur de <code>range</code> peut être <code>auto</code> ou une liste de majorants/minorants, séparés par des virgules.</p>
+Le descripteur **`range`**, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir l'intervalle de valeurs pris en compte par le compteur personnalisé. Si la valeur du compteur de la liste est en dehors de cet intervalle, ce sera la mise en forme de secours qui sera utilisée pour représenter le marqueur du compteur. La valeur de `range` peut être `auto` ou une liste de majorants/minorants, séparés par des virgules.
 
-<p>Si <code>range</code> vaut <code>auto</code> :</p>
+Si `range` vaut `auto` :
 
-<ul>
- <li>Lorsque le descripteur <code>system</code> vaut <code>cyclic</code>, <code>numeric</code> ou <code>fixed</code>, l'intervalle considéré sera entre moins l'infini et plus l'infini.</li>
- <li>Si <code>system</code> vaut <code>alphabetic</code> ou <code>symbolic</code>, l'intervalle considéré s'étendra entre 1 et l'infini.</li>
- <li>Si <code>system</code> vaut <code>additive</code>, l'intervalle considéré ira de 0 à l'infini.</li>
- <li>Enfin, lorsque <code>system</code> vaut <code>extends</code>, l'intervalle correspond à ce qui est produit par le système étendu avec cette valeur.</li>
-</ul>
+- Lorsque le descripteur `system` vaut `cyclic`, `numeric` ou `fixed`, l'intervalle considéré sera entre moins l'infini et plus l'infini.
+- Si `system` vaut `alphabetic` ou `symbolic`, l'intervalle considéré s'étendra entre 1 et l'infini.
+- Si `system` vaut `additive`, l'intervalle considéré ira de 0 à l'infini.
+- Enfin, lorsque `system` vaut `extends`, l'intervalle correspond à ce qui est produit par le système étendu avec cette valeur.
 
-<p>Si <code>range</code> est défini par des entiers, on peut utiliser le mot-clé <code>infinite</code> pour indiquer l'infini. Lorsque <code>infinite</code> est indiqué comme la première valeur d'un intervalle, il est interprété comme l'infini négatif, sinon comme l'infini positif.</p>
+Si `range` est défini par des entiers, on peut utiliser le mot-clé `infinite` pour indiquer l'infini. Lorsque `infinite` est indiqué comme la première valeur d'un intervalle, il est interprété comme l'infini négatif, sinon comme l'infini positif.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 range: auto;
 
 /* Valeurs encadrant un intervalle */
@@ -38,26 +37,25 @@ range: infinite infinite;
 /* Valeurs indiquant plusieurs intervalles */
 range: 2 5, 8 10;
 range: infinite 6, 10 infinite;
-</pre>
+```
 
-<h3 id="Values">Values</h3>
+### Values
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>L'intervalle dépend du système choisi pour le compteur comme indiqué ci-avant.</dd>
- <dt><code>[ [ | infinite ]{2} ]#</code></dt>
- <dd>Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé <code>infinite</code> est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste. Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.</dd>
-</dl>
+- `auto`
+  - : L'intervalle dépend du système choisi pour le compteur comme indiqué ci-avant.
+- `[ [ | infinite ]{2} ]#`
+  - : Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé `infinite` est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste. Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@counter-style range-multi-example {
+```css
+@counter-style range-multi-example {
   system: cyclic;
   symbols: "\25A0" "\25A1";
   range: 2 4, 7 9;
@@ -65,55 +63,43 @@ range: infinite 6, 10 infinite;
 
 .exemple {
   list-style: range-multi-example;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul class="exemple"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-  &lt;li&gt;Six&lt;/li&gt;
-  &lt;li&gt;Sept&lt;/li&gt;
-  &lt;li&gt;Huit&lt;/li&gt;
-  &lt;li&gt;Neuf&lt;/li&gt;
-  &lt;li&gt;Dix&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<p>Résultat</p>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Counter Styles", "#counter-style-range", "range")}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.counter-style.range")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("list-style")}},</li>
- <li>{{cssxref("list-style-image")}},</li>
- <li>{{cssxref("list-style-position")}},</li>
- <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+}
+```
+
+### HTML
+
+```html
+<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+  <li>Six</li>
+  <li>Sept</li>
+  <li>Huit</li>
+  <li>Neuf</li>
+  <li>Dix</li>
 </ul>
+```
+
+Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Counter Styles", "#counter-style-range", "range")}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.counter-style.range")}}
+
+## Voir aussi
+
+- {{cssxref("list-style")}},
+- {{cssxref("list-style-image")}},
+- {{cssxref("list-style-position")}},
+- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
diff --git a/files/fr/web/css/@counter-style/speak-as/index.md b/files/fr/web/css/@counter-style/speak-as/index.md
index 2dd23e1c44..a0e4511047 100644
--- a/files/fr/web/css/@counter-style/speak-as/index.md
+++ b/files/fr/web/css/@counter-style/speak-as/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/@counter-style/speak-as
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <strong><code>speak-as</code></strong>, rattaché à la règle @ {{cssxref("@counter-style")}}, permet d'indiquer la représentation sonore du compteur qui doit être utilisée par l'agent utilisateur si nécessaire. Ainsi, on peut utiliser ce descripteur pour que le compteur soit énoncé comme un nombre ou avec un signal audio particulier.</p>
+Le descripteur **`speak-as`**, rattaché à la règle @ {{cssxref("@counter-style")}}, permet d'indiquer la représentation sonore du compteur qui doit être utilisée par l'agent utilisateur si nécessaire. Ainsi, on peut utiliser ce descripteur pour que le compteur soit énoncé comme un nombre ou avec un signal audio particulier.
 
-<p>Ce descripteur pourra prendre les valeurs <code>auto</code>, <code>bullets</code>, <code>numbers</code>, <code>words</code>, <code>spell-out</code> ou alors pourra pointer vers un autre style de compteur avec le nom de ce style.</p>
+Ce descripteur pourra prendre les valeurs `auto`, `bullets`, `numbers`, `words`, `spell-out` ou alors pourra pointer vers un autre style de compteur avec le nom de ce style.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 speak-as: auto;
 speak-as: bullets;
 speak-as: numbers;
@@ -23,42 +24,41 @@ speak-as: words;
 speak-as: spell-out;
 
 /* Nom d'un autre style @counter-style */
-speak-as: &lt;counter-style-name&gt;;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>Dans ce cas, la valeur réelle de <code>speak-as</code> sera définie selon la valeur utilisée pour le descripteur {{cssxref("system")}} :
- <ul>
-  <li>Si <code>system</code> vaut <code>alphabetic</code>, <code>speak-as</code> sera alors synonyme de <code>spell-out</code>.</li>
-  <li>Si <code>system</code> vaut <code>cyclic</code>, <code>speak-as</code> sera alors synonyme de <code>bullets</code>.</li>
-  <li>Si <code>system</code> vaut <code>extends</code>, la valeur de <code><em>speak-as</em></code> sera la même que celle correspondante à <code>auto</code> dans le style étendu.</li>
-  <li>Dans les autres cas, le comportement de <code>numbers</code> sera utilisé.</li>
- </ul>
- </dd>
- <dt><code>bullets</code></dt>
- <dd>Un morceau ou un signal sonore utilisé par l'agent utilisateur et qui représente la façon d'énoncer une liste non-ordonnée.</dd>
- <dt><code>numbers</code></dt>
- <dd>La valeur numérique du compteur sera énoncée dans la langue du document.</dd>
- <dt><code>words</code></dt>
- <dd>L'agent utilisateur génèrera une représentation normale du compteur et la lira comme un mot, dans la langue du document.</dd>
- <dt><code>spell-out</code></dt>
- <dd>L'agent utilisateur génèrera une représentation normale du compteur et l'énoncera en l'épelant. Si l'agent utilisateur ne sait pas comment prononcer une valeur du compteur, il la prononcera comme avec la valeur <code>numbers</code>.</dd>
- <dt><code>&lt;counter-style-name&gt;</code></dt>
- <dd>Si la valeur du descripteur est le nom d'un autre style de compteur, ce sera la valeur de <code>speak-as</code> de ce style qui sera utilisée. Si la style visé n'existe pas, cette valeur sera alors synonyme de <code>auto</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+speak-as: <counter-style-name>;
+```
+
+### Valeurs
+
+- `auto`
+
+  - : Dans ce cas, la valeur réelle de `speak-as` sera définie selon la valeur utilisée pour le descripteur {{cssxref("system")}} :
+
+    - Si `system` vaut `alphabetic`, `speak-as` sera alors synonyme de `spell-out`.
+    - Si `system` vaut `cyclic`, `speak-as` sera alors synonyme de `bullets`.
+    - Si `system` vaut `extends`, la valeur de `speak-as` sera la même que celle correspondante à `auto` dans le style étendu.
+    - Dans les autres cas, le comportement de `numbers` sera utilisé.
+
+- `bullets`
+  - : Un morceau ou un signal sonore utilisé par l'agent utilisateur et qui représente la façon d'énoncer une liste non-ordonnée.
+- `numbers`
+  - : La valeur numérique du compteur sera énoncée dans la langue du document.
+- `words`
+  - : L'agent utilisateur génèrera une représentation normale du compteur et la lira comme un mot, dans la langue du document.
+- `spell-out`
+  - : L'agent utilisateur génèrera une représentation normale du compteur et l'énoncera en l'épelant. Si l'agent utilisateur ne sait pas comment prononcer une valeur du compteur, il la prononcera comme avec la valeur `numbers`.
+- `<counter-style-name>`
+  - : Si la valeur du descripteur est le nom d'un autre style de compteur, ce sera la valeur de `speak-as` de ce style qui sera utilisée. Si la style visé n'existe pas, cette valeur sera alors synonyme de `auto`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@counter-style speak-as-exemple {
+```css
+@counter-style speak-as-exemple {
   system: fixed;
   symbols:     ;
   suffix: " ";
@@ -68,60 +68,46 @@ speak-as: &lt;counter-style-name&gt;;
 
 .exemple {
   list-style: speak-as-exemple;
-}</pre>
+}
+```
+
+### HTML
 
-<h3 id="HTML">HTML</h3>
+```html
+<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+```
 
-<pre class="brush: html">&lt;ul class="exemple"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;</pre>
+### Résultat
 
-<h3 id="Résultat">Résultat</h3>
+{{EmbedLiveSample('Exemples')}}
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+## Accessibilité
 
-<h2 id="Accessibilité">Accessibilité</h2>
+La prise en charge de cette fonctionnalité par les outils d'assistance est actuellement très restreinte. Veillez à ne pas reposer sur cette propriété si vous souhaitez transmettre des informations majeures quant au but de la page.
 
-<p>La prise en charge de cette fonctionnalité par les outils d'assistance est actuellement très restreinte. Veillez à ne pas reposer sur cette propriété si vous souhaitez transmettre des informations majeures quant au but de la page.</p>
+- [Let's Talk About Speech CSS, CSS Tricks](https://css-tricks.com/lets-talk-speech-css/)
 
-<ul>
- <li><a href="https://css-tricks.com/lets-talk-speech-css/">Let's Talk About Speech CSS, CSS Tricks</a></li>
-</ul>
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-speak-as', 'speak-as')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.counter-style.speak-as")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("list-style")}},</li>
- <li>{{cssxref("list-style-image")}},</li>
- <li>{{cssxref("list-style-position")}},</li>
- <li>{{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
-</ul>
+| Spécification                                                                                        | État                                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#counter-style-speak-as', 'speak-as')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.counter-style.speak-as")}}
+
+## Voir aussi
+
+- {{cssxref("list-style")}},
+- {{cssxref("list-style-image")}},
+- {{cssxref("list-style-position")}},
+- {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
diff --git a/files/fr/web/css/@counter-style/suffix/index.md b/files/fr/web/css/@counter-style/suffix/index.md
index 9dfe61362b..e3bfc350ee 100644
--- a/files/fr/web/css/@counter-style/suffix/index.md
+++ b/files/fr/web/css/@counter-style/suffix/index.md
@@ -7,33 +7,33 @@ tags:
   - Reference
 translation_of: Web/CSS/@counter-style/suffix
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <code><strong>suffix</strong></code>, utilisé avec la règle @ {{cssxref("@counter-style")}}, afin de définir un symbole qui pourra être utilisé comme suffixe pour la représentation du marqueur. Le symbole en question pourra être une chaîne de caractères, une image ou un identifiant CSS. La valeur par défaut de ce descripteur sera <code>"\2E\20"</code> (un point « . » suivi par un espace).</p>
+Le descripteur **`suffix`**, utilisé avec la règle @ {{cssxref("@counter-style")}}, afin de définir un symbole qui pourra être utilisé comme suffixe pour la représentation du marqueur. Le symbole en question pourra être une chaîne de caractères, une image ou un identifiant CSS. La valeur par défaut de ce descripteur sera `"\2E\20"` (un point « . » suivi par un espace).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Une valeur de type &lt;symbol&gt; */
+```css
+/* Une valeur de type <symbol> */
 suffix: "";
 suffix: ") ";
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<dl>
- <dt><code>&lt;symbol&gt;</code></dt>
- <dd>Un symbole qui sera ajouté comme suffixe à la représentation du marqueur. Cette valeur peut être une valeur de type {{cssxref("&lt;string&gt;")}}, {{cssxref("&lt;image&gt;")}} ou {{cssxref("&lt;custom-ident&gt;")}}.</dd>
-</dl>
+- `<symbol>`
+  - : Un symbole qui sera ajouté comme suffixe à la représentation du marqueur. Cette valeur peut être une valeur de type {{cssxref("&lt;string&gt;")}}, {{cssxref("&lt;image&gt;")}} ou {{cssxref("&lt;custom-ident&gt;")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@counter-style options {
+```css
+@counter-style options {
   system: fixed;
   symbols: A B C D;
   suffix: ") ";
@@ -41,51 +41,39 @@ suffix: ") ";
 
 .exemple {
   list-style: options;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul class="exemple"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Autre&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Autre</li>
+</ul>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-suffix', 'suffix')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#descdef-counter-style-suffix', 'suffix')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.counter-style.suffix")}}</p>
+{{Compat("css.at-rules.counter-style.suffix")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("list-style")}},</li>
- <li>{{cssxref("list-style-image")}},</li>
- <li>{{cssxref("list-style-position")}},</li>
- <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.</li>
-</ul>
+- {{cssxref("list-style")}},
+- {{cssxref("list-style-image")}},
+- {{cssxref("list-style-position")}},
+- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.
diff --git a/files/fr/web/css/@counter-style/symbols/index.md b/files/fr/web/css/@counter-style/symbols/index.md
index 758b13e4aa..a9cce50ac0 100644
--- a/files/fr/web/css/@counter-style/symbols/index.md
+++ b/files/fr/web/css/@counter-style/symbols/index.md
@@ -7,100 +7,85 @@ tags:
   - Reference
 translation_of: Web/CSS/@counter-style/symbols
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <strong><code>symbols</code></strong>, rattaché à la règle @ {{cssxref("@counter-style")}}, est utilisé pour définir les symboles à utiliser pour construire les représentations du compteur. Un symbole peut être une chaîne de caractères, une image ou un identifiant.</p>
+Le descripteur **`symbols`**, rattaché à la règle @ {{cssxref("@counter-style")}}, est utilisé pour définir les symboles à utiliser pour construire les représentations du compteur. Un symbole peut être une chaîne de caractères, une image ou un identifiant.
 
-<pre class="brush: css no-line-numbers">symbols: A B C D E;
+```css
+symbols: A B C D E;
 symbols: "\24B6" "\24B7" "\24B8" D E;
 symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
 symbols: url('premier.svg') url('deuxieme.svg') url('troisieme.svg');
 symbols: indic-numbers;
-</pre>
+```
 
-<p>Le descripteur <code>symbols</code> doit être défini lorsque la valeur du descripteur {{cssxref('system')}} vaut <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> ou <code>fixed</code>. Lorsque <code>system</code> vaut <code>additive</code>, ce sera le descripteur {{cssxref('additive-symbols')}} qui sera utilisé afin de définir les symboles.</p>
+Le descripteur `symbols` doit être défini lorsque la valeur du descripteur {{cssxref('system')}} vaut `cyclic`, `numeric`, `alphabetic`, `symbolic` ou `fixed`. Lorsque `system` vaut `additive`, ce sera le descripteur {{cssxref('additive-symbols')}} qui sera utilisé afin de définir les symboles.
 
-<ul>
-</ul>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+### Valeurs
 
-<h3 id="Valeurs">Valeurs</h3>
+- Des chaînes de caractères ({{cssxref("&lt;string&gt;")}}) délimitées par des quotes simples ou doubles. La barre oblique inversée (\\) peut être utilisée afin d'échapper les caractères spéciaux. Ainsi, on peut utiliser des caractères Unicode de cette façon `"\24B6"`.
+- Des images ({{cssxref("&lt;image&gt;")}}) en utilisant la notation fonctionnelle `url(chemin-vers-image.png)`. **Attention : cette fonctionnalité (l'utilisation d'image) est à risque en termes d'implémentation et de conservation dans les spécifications et n'est implémentée par aucun navigateur actuellement.**
+- Des identifiants ({{cssxref("&lt;custom-ident&gt;")}})
 
-<ul>
- <li>Des chaînes de caractères ({{cssxref("&lt;string&gt;")}}) délimitées par des quotes simples ou doubles. La barre oblique inversée (\) peut être utilisée afin d'échapper les caractères spéciaux. Ainsi, on peut utiliser des caractères Unicode de cette façon <code>"\24B6"</code>.</li>
- <li>Des images ({{cssxref("&lt;image&gt;")}}) en utilisant la notation fonctionnelle <code>url(chemin-vers-image.png)</code>. <strong>Attention : cette fonctionnalité (l'utilisation d'image) est à risque en termes d'implémentation et de conservation dans les spécifications et n'est implémentée par aucun navigateur actuellement.</strong></li>
- <li>Des identifiants ({{cssxref("&lt;custom-ident&gt;")}})</li>
-</ul>
+<!---->
 
-<dl>
- <dt><code>&lt;symbol&gt;</code></dt>
- <dd>Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur <code>symbols</code> peut être :</dd>
-</dl>
+- `<symbol>`
+  - : Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur `symbols` peut être :
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@counter-style symbols-exemple {
+```css
+@counter-style symbols-exemple {
   system: fixed;
   symbols: A "1" "\24B7" D E;
 }
 
 .exemple {
   list-style: symbols-exemple;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul class="exemple"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.counter-style.symbols")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("@counter-style")}},</li>
- <li>{{cssxref("list-style")}},</li>
- <li>{{cssxref("list-style-image")}},</li>
- <li>{{cssxref("list-style-position")}},</li>
- <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes,</li>
- <li>{{cssxref("url()", "url()")}}.</li>
+}
+```
+
+### HTML
+
+```html
+<ul class="exemple">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
 </ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.counter-style.symbols")}}
+
+## Voir aussi
+
+- {{cssxref("@counter-style")}},
+- {{cssxref("list-style")}},
+- {{cssxref("list-style-image")}},
+- {{cssxref("list-style-position")}},
+- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes,
+- {{cssxref("url()", "url()")}}.
diff --git a/files/fr/web/css/@counter-style/system/index.md b/files/fr/web/css/@counter-style/system/index.md
index 07ba664616..e1c85ee212 100644
--- a/files/fr/web/css/@counter-style/system/index.md
+++ b/files/fr/web/css/@counter-style/system/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/@counter-style/system
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La descripteur <strong><code>system</code></strong>, utilisé avec <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">la règle @</a> {{cssxref("@counter-style")}}, permet de définir l'algorithme utilisé pour convertir la valeur entière d'un compteur en une chaîne de caractères.</p>
+La descripteur **`system`**, utilisé avec [la règle @](/fr/docs/Web/CSS/R%C3%A8gles_@) {{cssxref("@counter-style")}}, permet de définir l'algorithme utilisé pour convertir la valeur entière d'un compteur en une chaîne de caractères.
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 system: cyclic;
 system: numeric;
 system: alphabetic;
@@ -22,50 +23,48 @@ system: fixed;
 /* Combinaison de valeurs */
 system: fixed 3;
 system: extends decimal;
-</pre>
+```
 
-<p>Si l'algorithme défini dans ce descripteur est incapable de construire la chaîne de caractères pour une valeur donnée, ce sera le système de secours qui sera utilisé ({{cssxref("fallback")}}).</p>
+Si l'algorithme défini dans ce descripteur est incapable de construire la chaîne de caractères pour une valeur donnée, ce sera le système de secours qui sera utilisé ({{cssxref("fallback")}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Ce descripteur peut prendre l'une de ces trois formes :</p>
+Ce descripteur peut prendre l'une de ces trois formes :
 
-<ul>
- <li>Un des mots-clés parmi <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code>, <code>additive</code>, <code>fixed</code></li>
- <li>Le mot-clé <code>fixed</code> avec un entier</li>
- <li>Le mot-clé <code>extends</code> avec un nom correspondant à un {{cssxref("@counter-style")}}.</li>
-</ul>
+- Un des mots-clés parmi `cyclic`, `numeric`, `alphabetic`, `symbolic`, `additive`, `fixed`
+- Le mot-clé `fixed` avec un entier
+- Le mot-clé `extends` avec un nom correspondant à un {{cssxref("@counter-style")}}.
+
+<!---->
+
+- `cyclic`
+  - : Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols()")}}.
+- `fixed`
+  - : Cette valeur permet de définir un ensemble fini de symboles. Une fois que le système a utilisé les différents symboles, il poursuivra en utilisant le système de secours. Afin que le style du compteur soit valide, il faut qu'au moins un symbole soit défini avec le descripteur `symbols`. On peut éventuellement ajouter un entier (valeur {{cssxref("integer")}}) après le système et qui définit la valeur du premier symbole. La valeur par défaut de ce paramètre (s'il est absent) est `1`.
+- `symbolic`
+  - : Le système itère sur la liste des symboles et à chaque boucle, on double, triple, etc. la représentation. Ainsi, si les symboles fournis sont ◽ et ◾, au cycle suivant, on aura ◽◽ puis ◾◾, ensuite ◽◽◽ et ◾◾◾ et ainsi de suite. Afin que le style du compteur soit valide, il faut définir au moins un symbole avec le descripteur `symbols`. Ce système de compteur ne fonctionne que pour les valeurs positives.
+- `alphabetic`
+  - : Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres `a` à `z` sont définies comme symbole dans un style de compteur dont le système est `alphabetic`, les 26 premières représentations du compteur seront `a`, `b`, etc. jusqu'à `z` (jusqu'ici, le comportement est identique à celui obtenu grâce à `symbolic`) mais ensuite, le système poursuivra avec `aa`, `ab`, `ac`, etc.
+    Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme `1`, le suivant comme `2` et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives.
+- `numeric`
+  - : Les symboles sont interprétés comme les chiffres d'un [système de notation positionnelle](https://fr.wikipedia.org/wiki/Notation_positionnelle). Ce système est très proche de celui qu'on peut obtenir avec `alphabetic` sauf que, pour ce dernier, le premier symbole fourni par `symbols` sera interprété comme `1`, le suivant  comme `2` et ainsi de suite alors que pour `numeric`, le premier symbole est interprété comme 0, le suivant comme `1`, puis `2` etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec `symbols`. Le premier symbole qui est fourni sera interprété comme `0`. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de `0` à `9` comme symboles, on obtiendra le même résultat qu'avec le système décimal.
+- `additive`
+  - : Ce système peut être utilisé pour représenter [des systèmes de numérotations additives](<https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)>) telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent. Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide. On voit dans l'exemple ci-après que `range` est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec `decimal` (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme `upper-roman` ou `lower-roman` afin d'éviter de réinventer la roue.
+- `extends`
+  - : Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système `extends` et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé. Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur `symbols` ou `additive-symbols`. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal. Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur `lower-alpha` mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir `(a)` `(b)` etc).
 
-<dl>
- <dt><code>cyclic</code></dt>
- <dd>Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols()")}}.</dd>
- <dt><code>fixed</code></dt>
- <dd>Cette valeur permet de définir un ensemble fini de symboles. Une fois que le système a utilisé les différents symboles, il poursuivra en utilisant le système de secours. Afin que le style du compteur soit valide, il faut qu'au moins un symbole soit défini avec le descripteur <code>symbols</code>. On peut éventuellement ajouter un entier (valeur {{cssxref("integer")}}) après le système et qui définit la valeur du premier symbole. La valeur par défaut de ce paramètre (s'il est absent) est <code>1</code>.</dd>
- <dt><code>symbolic</code></dt>
- <dd>Le système itère sur la liste des symboles et à chaque boucle, on double, triple, etc. la représentation. Ainsi, si les symboles fournis sont ◽ et ◾, au cycle suivant, on aura ◽◽ puis ◾◾, ensuite ◽◽◽ et ◾◾◾ et ainsi de suite. Afin que le style du compteur soit valide, il faut définir au moins un symbole avec le descripteur <code>symbols</code>. Ce système de compteur ne fonctionne que pour les valeurs positives.</dd>
- <dt><code>alphabetic</code></dt>
- <dd>Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres <code>a</code> à <code>z</code> sont définies comme symbole dans un style de compteur dont le système est <code>alphabetic</code>, les 26 premières représentations du compteur seront <code>a</code>, <code>b</code>, etc. jusqu'à <code>z</code> (jusqu'ici, le comportement est identique à celui obtenu grâce à <code>symbolic</code>) mais ensuite, le système poursuivra avec <code>aa</code>, <code>ab</code>, <code>ac</code>, etc.
- Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives.</dd>
- <dt><code>numeric</code></dt>
- <dd>Les symboles sont interprétés comme les chiffres d'un <a href="https://fr.wikipedia.org/wiki/Notation_positionnelle">système de notation positionnelle</a>. Ce système est très proche de celui qu'on peut obtenir avec <code>alphabetic</code> sauf que, pour ce dernier, le premier symbole fourni par <code>symbols</code> sera interprété comme <code>1</code>, le suivant  comme <code>2</code> et ainsi de suite alors que pour <code>numeric</code>, le premier symbole est interprété comme 0, le suivant comme <code>1</code>, puis <code>2</code> etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec <code>symbols</code>. Le premier symbole qui est fourni sera interprété comme <code>0</code>. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de <code>0</code> à <code>9</code> comme symboles, on obtiendra le même résultat qu'avec le système décimal.</dd>
- <dt><code>additive</code></dt>
- <dd>Ce système peut être utilisé pour représenter <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">des systèmes de numérotations additives</a> telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent. Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide. On voit dans l'exemple ci-après que <code>range</code> est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec <code>decimal</code> (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme <code>upper-roman</code> ou <code>lower-roman</code> afin d'éviter de réinventer la roue.
- </dd>
- <dt><code>extends</code></dt>
- <dd>Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système <code>extends</code> et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé. Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur <code>symbols</code> ou <code>additive-symbols</code>. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal. Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur <code>lower-alpha</code> mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir <code>(a)</code> <code>(b)</code> etc).</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_cyclic">Utilisation de <code>cyclic</code></h3>
+### Utilisation de `cyclic`
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">@counter-style fisheye {
+```css
+@counter-style fisheye {
   system: cyclic;
   symbols: ◉;
   suffix: " ";
@@ -73,28 +72,31 @@ system: extends decimal;
 
 .list {
     list-style: fisheye;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul class="list"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utilisation_de_cyclic')}}</p>
+{{EmbedLiveSample('Utilisation_de_cyclic')}}
 
-<h3 id="Utilisation_de_fixed">Utilisation de <code>fixed</code></h3>
+### Utilisation de `fixed`
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">@counter-style circled-digits {
+```css
+@counter-style circled-digits {
   system: fixed;
   symbols: ➀ ➁ ➂;
   suffix: ' ';
@@ -103,27 +105,30 @@ system: extends decimal;
 .list {
   list-style: circled-digits;
 }
-</pre>
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul class="list"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utilisation_de_fixed')}}</p>
+{{EmbedLiveSample('Utilisation_de_fixed')}}
 
-<h3 id="Utilisation_de_symbolic">Utilisation de <code>symbolic</code></h3>
+### Utilisation de `symbolic`
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">@counter-style abc {
+```css
+@counter-style abc {
   system: symbolic;
   symbols: a b c;
   suffix: ". ";
@@ -132,27 +137,30 @@ system: extends decimal;
 .list {
   list-style: abc;
 }
-</pre>
+```
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul class="list"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utilisation_de_symbolic')}}</p>
+{{EmbedLiveSample('Utilisation_de_symbolic')}}
 
-<h3 id="Utilisation_de_alphabetic">Utilisation de <code>alphabetic</code></h3>
+### Utilisation de `alphabetic`
 
-<h4 id="CSS_4">CSS</h4>
+#### CSS
 
-<pre class="brush: css">@counter-style abc {
+```css
+@counter-style abc {
   system: alphabetic;
   symbols: a b c;
   suffix: ". ";
@@ -161,28 +169,30 @@ system: extends decimal;
 .list {
   list-style: abc;
 }
-</pre>
+```
 
-<h4 id="HTML_4">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul class="list"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+```
 
-<h4 id="Résultat_4">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utilisation_de_alphabetic')}}</p>
+{{EmbedLiveSample('Utilisation_de_alphabetic')}}
 
-<h3 id="Utilisation_de_numeric_avec_des_lettres">Utilisation de <code>numeric</code> avec des lettres</h3>
+### Utilisation de `numeric` avec des lettres
 
-<h4 id="CSS_5">CSS</h4>
+#### CSS
 
-<pre class="brush: css">@counter-style abc {
+```css
+@counter-style abc {
   system: numeric;
   symbols: a b c;
   suffix: ". ";
@@ -190,27 +200,31 @@ system: extends decimal;
 
 .list {
   list-style: abc;
-}</pre>
+}
+```
 
-<h4 id="HTML_5">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul class="list"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+```
 
-<h4 id="Résultat_5">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utilisation_de_numeric_avec_des_lettres')}}</p>
+{{EmbedLiveSample('Utilisation_de_numeric_avec_des_lettres')}}
 
-<h3 id="Utilisation_de_numeric_avec_des_chiffres">Utilisation de <code>numeric</code> avec des chiffres</h3>
+### Utilisation de `numeric` avec des chiffres
 
-<h4 id="CSS_6">CSS</h4>
+#### CSS
 
-<pre class="brush: css">@counter-style numbers {
+```css
+@counter-style numbers {
   system: numeric;
   symbols: 0 1 2 3 4 5 6 7 8 9;
   suffix: ". ";
@@ -219,25 +233,28 @@ system: extends decimal;
 .list {
   list-style: numbers;
 }
-</pre>
+```
 
-<h4 id="HTML_6">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul class="list"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+```
 
-<p>{{EmbedLiveSample("Utilisation_de_numeric_avec_des_chiffres")}}</p>
+{{EmbedLiveSample("Utilisation_de_numeric_avec_des_chiffres")}}
 
-<h3 id="Utilisation_de_additive">Utilisation de <code>additive</code></h3>
+### Utilisation de `additive`
 
-<h4 id="CSS_7">CSS</h4>
+#### CSS
 
-<pre class="brush: css">@counter-style upper-roman {
+```css
+@counter-style upper-roman {
   system: additive;
   range: 1 3999;
   additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
@@ -246,28 +263,30 @@ system: extends decimal;
 .list {
   list-style: upper-roman;
 }
-</pre>
+```
 
-<h4 id="HTML_7">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul class="list"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ul>
+```
 
-<h4 id="Résultat_6">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utilisation_de_additive')}}</p>
+{{EmbedLiveSample('Utilisation_de_additive')}}
 
-<h3 id="Combinaison_avec_extends">Combinaison avec <code>extends</code></h3>
+### Combinaison avec `extends`
 
-<h4 id="CSS_8">CSS</h4>
+#### CSS
 
-<pre class="brush: css">@counter-style alpha-modified {
+```css
+@counter-style alpha-modified {
   system: extends lower-alpha;
   prefix: "(";
   suffix: ") ";
@@ -276,53 +295,39 @@ system: extends decimal;
 .list {
   list-style: alpha-modified;
 }
-</pre>
-
-<h4 id="HTML_8">HTML</h4>
-
-<pre class="brush: html">&lt;ul class="list"&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
-<h4 id="Résultat_7">Résultat</h4>
-
-<p>{{EmbedLiveSample('Combinaison_avec_extends')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.counter-style.system")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("list-style")}},</li>
- <li>{{cssxref("list-style-image")}},</li>
- <li>{{cssxref("list-style-position")}},</li>
- <li>{{cssxref("symbols()", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.</li>
+```
+
+#### HTML
+
+```html
+<ul class="list">
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
 </ul>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Combinaison_avec_extends')}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.counter-style.system")}}
+
+## Voir aussi
+
+- {{cssxref("list-style")}},
+- {{cssxref("list-style-image")}},
+- {{cssxref("list-style-position")}},
+- {{cssxref("symbols()", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.
diff --git a/files/fr/web/css/@document/index.md b/files/fr/web/css/@document/index.md
index 06a8348209..3eaae20523 100644
--- a/files/fr/web/css/@document/index.md
+++ b/files/fr/web/css/@document/index.md
@@ -8,46 +8,42 @@ tags:
   - Règle @
 translation_of: Web/CSS/@document
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @ CSS </a><strong><code>@document</code></strong> restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur.</p>
+La [règle @ CSS ](/fr/docs/Web/CSS/R%C3%A8gles_@)**`@document`** restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur.
 
-<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") {
+```css
+@document url("https://www.example.com/") {
   h1 {
     color: green;
   }
-}</pre>
-
-<ul>
-</ul>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une règle <code>@document</code> peut définir une ou plusieurs fonctions de correspondance. Si l'une quelconque des règles s'applique à l'URL donnée, la règle prendra effet sur cette URL. Les fonctions disponibles sont :</p>
+Une règle `@document` peut définir une ou plusieurs fonctions de correspondance. Si l'une quelconque des règles s'applique à l'URL donnée, la règle prendra effet sur cette URL. Les fonctions disponibles sont :
 
-<ul>
- <li><code>url()</code>, qui établit une correspondance avec une URL exacte ;</li>
- <li><code>url-prefix()</code>, qui établit une correspondance si l'URL du document commence par la valeur fournie ;</li>
- <li><code>domain()</code>, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ;</li>
- <li><code>media-document()</code> qui caractérise le type de document : vidéo, image, plugin, tout ;</li>
- <li><code>regexp()</code>, qui établit une correspondance avec si l'URL  du document vérifie une <a href="/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions">expression rationnelle</a>. L'expression doit correspondre à l'URL entière.</li>
-</ul>
+- `url()`, qui établit une correspondance avec une URL exacte ;
+- `url-prefix()`, qui établit une correspondance si l'URL du document commence par la valeur fournie ;
+- `domain()`, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ;
+- `media-document()` qui caractérise le type de document : vidéo, image, plugin, tout ;
+- `regexp()`, qui établit une correspondance avec si l'URL  du document vérifie une [expression rationnelle](/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions). L'expression doit correspondre à l'URL entière.
 
-<p>Les valeurs fournies aux fonctions <code>url()</code>, <code>url-prefix()</code>, <code>media-document()</code> et <code>domain()</code> peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction <code>regexp()</code> <em>doivent</em> être délimitées par des apostrophes.</p>
+Les valeurs fournies aux fonctions `url()`, `url-prefix()`, `media-document()` et `domain()` peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction `regexp()` _doivent_ être délimitées par des apostrophes.
 
-<p>Les valeurs échappées fournies à la fonction <code>regexp()</code> doivent être en outre échappées pour le CSS. Par exemple, un <code>.</code> (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en <code>\.</code>), puis d'échapper cette chaîne en utilisant les règles CSS (en <code>\\.</code>).</p>
+Les valeurs échappées fournies à la fonction `regexp()` doivent être en outre échappées pour le CSS. Par exemple, un `.` (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en `\.`), puis d'échapper cette chaîne en utilisant les règles CSS (en `\\.`).
 
-<div class="note">
-<p><strong>Note :</strong> Il existe une version préfixée de cette propriété pour Mozilla : <code>@-moz-document</code>. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. {{bug(1035091)}}).</p>
-</div>
+> **Note :** Il existe une version préfixée de cette propriété pour Mozilla : `@-moz-document`. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. {{bug(1035091)}}).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@document url("http://www.w3.org/"),
+```css
+@document url("http://www.w3.org/"),
                url-prefix("http://www.w3.org/Style/"),
                domain("mozilla.org"),
                media-document("video"),
@@ -67,18 +63,16 @@ translation_of: Web/CSS/@document
     background: yellow;
   }
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p><a href="https://www.w3.org/TR/css3-conditional/">Initialement</a> dans {{SpecName('CSS3 Conditional')}}, <code>@document</code> a <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">été repoussée</a> au niveau 4.</p>
+[Initialement](https://www.w3.org/TR/css3-conditional/) dans {{SpecName('CSS3 Conditional')}}, `@document` a [été repoussée](http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes) au niveau 4.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.document")}}</p>
+{{Compat("css.at-rules.document")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> sur la liste de diffusion www-style.</li>
-</ul>
+- [Per-site user style sheet rules](http://lists.w3.org/Archives/Public/www-style/2004Aug/0135) sur la liste de diffusion www-style.
diff --git a/files/fr/web/css/@font-face/ascent-override/index.md b/files/fr/web/css/@font-face/ascent-override/index.md
index dbbeb8eaa3..7ece3bac41 100644
--- a/files/fr/web/css/@font-face/ascent-override/index.md
+++ b/files/fr/web/css/@font-face/ascent-override/index.md
@@ -1,42 +1,43 @@
 ---
 title: ascent-override
 slug: Web/CSS/@font-face/ascent-override
+translation_of: Web/CSS/@font-face/ascent-override
 browser-compat: css.at-rules.font-face.ascent-override
-translation_of: 'Web/CSS/@font-face/ascent-override'
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Le descripteur CSS <strong><code>ascent-override</code></strong> définit la mesure du jambage supérieur (ascendant) de la police (voir la <a href="https://fr.wikipedia.org/wiki/Jambage">définition de jambage</a>). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.</p>
+Le descripteur CSS **`ascent-override`** définit la mesure du jambage supérieur (ascendant) de la police (voir la [définition de jambage](https://fr.wikipedia.org/wiki/Jambage)). La mesure du jambage supérieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">ascent-override: normal;
-ascent-override: 90%;</pre>
+```css
+ascent-override: normal;
+ascent-override: 90%;
+```
 
-<h3 id="values">Valeurs</h3>
+### Valeurs
 
-<dl>
-  <dt><code>normal</code></dt>
-  <dd>La valeur par défaut. La mesure du jambage supérieur est obtenue à partir du fichier de police.</dd>
-  <dt><code>&lt;percentage&gt;</code></dt>
-  <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}.</dd>
-</dl>
+- `normal`
+  - : La valeur par défaut. La mesure du jambage supérieur est obtenue à partir du fichier de police.
+- `<percentage>`
+  - : Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}.
 
-<h2 id="formal_definition">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="formal_syntax">Syntaxe formelle</h2>
+## Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="overriding_metrics_of_a_fallback_font">Surcharge de la mesure d'une police de recours</h3>
+### Surcharge de la mesure d'une police de recours
 
-<p>La propriété <code>ascent-override</code> peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.</p>
+La propriété `ascent-override` peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: web-font;
   src: url("https://example.com/font.woff");
 }
@@ -45,30 +46,29 @@ ascent-override: 90%;</pre>
   font-family: local-font;
   src: local(Local Font);
   ascent-override: 125%;
-}</pre>
+}
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("@font-face/descent-override", "descent-override")}}</li>
- <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
- <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
- <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
- <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
- <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
- <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
- <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
- <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
- <li>{{cssxref("@font-face/line-gap-override", "line-gap-override")}}</li>
- <li>{{cssxref("@font-face/src", "src")}}</li>
- <li>{{cssxref("@font-face/size-adjust", "size-adjust")}}</li>
- <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
-</ul>
+- {{cssxref("@font-face/descent-override", "descent-override")}}
+- {{cssxref("@font-face/font-display", "font-display")}}
+- {{cssxref("@font-face/font-family", "font-family")}}
+- {{cssxref("@font-face/font-weight", "font-weight")}}
+- {{cssxref("@font-face/font-style", "font-style")}}
+- {{cssxref("@font-face/font-stretch", "font-stretch")}}
+- {{cssxref("@font-face/font-variant", "font-variant")}}
+- {{cssxref("font-feature-settings", "font-feature-settings")}}
+- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+- {{cssxref("@font-face/line-gap-override", "line-gap-override")}}
+- {{cssxref("@font-face/src", "src")}}
+- {{cssxref("@font-face/size-adjust", "size-adjust")}}
+- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
diff --git a/files/fr/web/css/@font-face/descent-override/index.md b/files/fr/web/css/@font-face/descent-override/index.md
index 6805fdd77f..17b9e8df0e 100644
--- a/files/fr/web/css/@font-face/descent-override/index.md
+++ b/files/fr/web/css/@font-face/descent-override/index.md
@@ -1,42 +1,43 @@
 ---
 title: descent-override
 slug: Web/CSS/@font-face/descent-override
+translation_of: Web/CSS/@font-face/descent-override
 browser-compat: css.at-rules.font-face.descent-override
-translation_of: 'Web/CSS/@font-face/descent-override'
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Le descripteur CSS <strong><code>descent-override</code></strong> définit la mesure du jambage inférieur (descendant) de la police (voir la <a href="https://fr.wikipedia.org/wiki/Jambage">définition de jambage</a>). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.</p>
+Le descripteur CSS **`descent-override`** définit la mesure du jambage inférieur (descendant) de la police (voir la [définition de jambage](https://fr.wikipedia.org/wiki/Jambage)). La mesure du jambage inférieur correspond à la distance verticale par rapport à la hauteur d'X (hauteur du caractère bas de casse, à l'exclusion des jambages inférieurs et supérieurs) que CSS doit utiliser pour agencer les boîtes dans un contexte de formatage en ligne.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">descent-override: normal;
-descent-override: 90%;</pre>
+```css
+descent-override: normal;
+descent-override: 90%;
+```
 
-<h3 id="values">Valeurs</h3>
+### Valeurs
 
-<dl>
-  <dt><code>normal</code></dt>
-  <dd>La valeur par défaut. La mesure du jambage inférieur est obtenue à partir du fichier de police.</dd>
-  <dt><code>&lt;percentage&gt;</code></dt>
-  <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}.</dd>
-</dl>
+- `normal`
+  - : La valeur par défaut. La mesure du jambage inférieur est obtenue à partir du fichier de police.
+- `<percentage>`
+  - : Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}.
 
-<h2 id="formal_definition">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="formal_syntax">Syntaxe formelle</h2>
+## Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="overriding_metrics_of_a_fallback_font">Surcharge de la mesure d'une police de recours</h3>
+### Surcharge de la mesure d'une police de recours
 
-<p>La propriété <code>descent-override</code> peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.</p>
+La propriété `descent-override` peut aider à la surcharge de la mesure d'une police de secours pour qu'elle corresponde mieux à celle de la police principale.
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: web-font;
   src: url("https://example.com/font.woff");
 }
@@ -45,30 +46,29 @@ descent-override: 90%;</pre>
   font-family: local-font;
   src: local(Local Font);
   descent-override: 125%;
-}</pre>
+}
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("@font-face/ascent-override", "ascent-override")}}</li>
- <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
- <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
- <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
- <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
- <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
- <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
- <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
- <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
- <li>{{cssxref("@font-face/line-gap-override", "line-gap-override")}}</li>
- <li>{{cssxref("@font-face/src", "src")}}</li>
- <li>{{cssxref("@font-face/size-adjust", "size-adjust")}}</li>
- <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
-</ul>
+- {{cssxref("@font-face/ascent-override", "ascent-override")}}
+- {{cssxref("@font-face/font-display", "font-display")}}
+- {{cssxref("@font-face/font-family", "font-family")}}
+- {{cssxref("@font-face/font-weight", "font-weight")}}
+- {{cssxref("@font-face/font-style", "font-style")}}
+- {{cssxref("@font-face/font-stretch", "font-stretch")}}
+- {{cssxref("@font-face/font-variant", "font-variant")}}
+- {{cssxref("font-feature-settings", "font-feature-settings")}}
+- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+- {{cssxref("@font-face/line-gap-override", "line-gap-override")}}
+- {{cssxref("@font-face/src", "src")}}
+- {{cssxref("@font-face/size-adjust", "size-adjust")}}
+- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
diff --git a/files/fr/web/css/@font-face/font-display/index.md b/files/fr/web/css/@font-face/font-display/index.md
index 2b89c8661d..d536c50a2a 100644
--- a/files/fr/web/css/@font-face/font-display/index.md
+++ b/files/fr/web/css/@font-face/font-display/index.md
@@ -8,83 +8,70 @@ tags:
   - Reference
 translation_of: Web/CSS/@font-face/font-display
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-display</code></strong> détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée.</p>
+La propriété **`font-display`** détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée.
 
-<h2 id="Le_déroulement_de_l'affichage_d'une_police">Le déroulement de l'affichage d'une police</h2>
+## Le déroulement de l'affichage d'une police
 
-<p>La gestion d'une fonte de caractères s'effectue selon trois périodes distinctes dont la première commence lorsque l'agent utilisateur tente de télécharger une fonte.</p>
+La gestion d'une fonte de caractères s'effectue selon trois périodes distinctes dont la première commence lorsque l'agent utilisateur tente de télécharger une fonte.
 
-<dl>
- <dt>Période 1 : Blocage des fontes</dt>
- <dd>Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit être rendu avec une fonte alternative invisible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.</dd>
- <dt>Période 2 : Échange des fontes</dt>
- <dd>Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit utiliser une fonte alternative visible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.</dd>
- <dt>Période 3 : Échec du chargement des fontes</dt>
- <dd>Si la fonte n'est pas chargée, l'agent utilisateur considère qu'il y a eu un échec du chargement et utilise la fonte alternative disponible.</dd>
-</dl>
+- Période 1 : Blocage des fontes
+  - : Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit être rendu avec une fonte alternative invisible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.
+- Période 2 : Échange des fontes
+  - : Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit utiliser une fonte alternative visible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.
+- Période 3 : Échec du chargement des fontes
+  - : Si la fonte n'est pas chargée, l'agent utilisateur considère qu'il y a eu un échec du chargement et utilise la fonte alternative disponible.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css;">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 font-display: auto;
 font-display: block;
 font-display: swap;
 font-display: fallback;
-font-display: optional;</pre>
+font-display: optional;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>La stratégie d'affichage de la fonte est définie par l'agent utilisateur.</dd>
- <dt><code>block</code></dt>
- <dd>La période de blocage est courte et est suivi d'une période d'échange infinie.</dd>
- <dt><code>swap</code></dt>
- <dd>La période de blocage est extrêmement courte et est suivie par une période d'échange infinie.</dd>
- <dt><code>fallback</code></dt>
- <dd>La période de blocage est extrêmement courte et est suivie par une courte période d'échange.</dd>
- <dt><code>optional</code></dt>
- <dd>La période de blocage est extrêmement courte et il n'y a pas de période d'échange.</dd>
-</dl>
+- `auto`
+  - : La stratégie d'affichage de la fonte est définie par l'agent utilisateur.
+- `block`
+  - : La période de blocage est courte et est suivi d'une période d'échange infinie.
+- `swap`
+  - : La période de blocage est extrêmement courte et est suivie par une période d'échange infinie.
+- `fallback`
+  - : La période de blocage est extrêmement courte et est suivie par une courte période d'échange.
+- `optional`
+  - : La période de blocage est extrêmement courte et il n'y a pas de période d'échange.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: FonteExemple;
   src: url(/chemin/vers/fonts/examplefont.woff) format('woff'),
        url(/chemin/vers/fonts/examplefont.eot) format('eot');
   font-weight: 400;
   font-style: normal;
   font-display: fallback;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}} | {{Spec2('CSS4 Fonts')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.font-face.font-display")}}
diff --git a/files/fr/web/css/@font-face/font-family/index.md b/files/fr/web/css/@font-face/font-family/index.md
index 35b4247f85..ba8d5abe86 100644
--- a/files/fr/web/css/@font-face/font-family/index.md
+++ b/files/fr/web/css/@font-face/font-family/index.md
@@ -7,61 +7,48 @@ tags:
   - Reference
 translation_of: Web/CSS/@font-face/font-family
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <strong><code>font-family</code></strong> permet aux auteurs d'un document de définir la police de caractères à utiliser au sein d'une règle @ {{cssxref("@font-face")}}.</p>
+Le descripteur **`font-family`** permet aux auteurs d'un document de définir la police de caractères à utiliser au sein d'une règle @ {{cssxref("@font-face")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de chaînes de caractères */
-/* Type &lt;string&gt;                    */
+```css
+/* Valeurs de chaînes de caractères */
+/* Type <string>                    */
 font-family: "police de caractères a";
 font-family: 'une autre police';
 
-/* Valeur de type &lt;custom-ident&gt; */
+/* Valeur de type <custom-ident> */
 font-family: exemplepolice;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;family-name&gt;</code></dt>
- <dd>Définit le nom de la police de caractères.</dd>
-</dl>
+- `<family-name>`
+  - : Définit le nom de la police de caractères.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: exemplepolice;
   src: url('exemplepolice.ttf');
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.font-face.font-family")}}</p>
+{{Compat("css.at-rules.font-face.font-family")}}
diff --git a/files/fr/web/css/@font-face/font-stretch/index.md b/files/fr/web/css/@font-face/font-stretch/index.md
index 505de0c2ac..296cbde1a3 100644
--- a/files/fr/web/css/@font-face/font-stretch/index.md
+++ b/files/fr/web/css/@font-face/font-stretch/index.md
@@ -8,17 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/@font-face/font-stretch
 ---
-<p>{{CSSRef}}{{draft}}</p>
+{{CSSRef}}{{draft}}
 
-<p>Le descripteur CSS <strong><code>font-stretch</code></strong> permet aux auteurs de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle {{cssxref("@font-face")}}.</p>
+Le descripteur CSS **`font-stretch`** permet aux auteurs de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle {{cssxref("@font-face")}}.
 
-<p>Pour une police donnée, les auteurs peuvent télécharger différentes fontes pour différents styles et utiliser alors <code>font-stretch</code> de façon explicite afin de choisir la fonte voulue. Les valeurs fournies au descripteur CSS sont les mêmes que celles qui peuvent être utilisées pour la propriété correspondante.</p>
+Pour une police donnée, les auteurs peuvent télécharger différentes fontes pour différents styles et utiliser alors `font-stretch` de façon explicite afin de choisir la fonte voulue. Les valeurs fournies au descripteur CSS sont les mêmes que celles qui peuvent être utilisées pour la propriété correspondante.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs simples */
+```css
+/* Valeurs simples */
 font-stretch: ultra-condensed;
 font-stretch: extra-condensed;
 font-stretch: condensed;
@@ -35,146 +36,125 @@ font-stretch: 200%;
 /* Valeurs multiples */
 font-stretch: 75% 125%;
 font-stretch: condensed ultra-condensed;;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Indique la forme normale (en largeur) de la police.</dd>
- <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
- <dd>Indique une forme plus condensée que la normale (la valeur <code>ultra-condensed</code> correspond à la forme la plus condensée).</dd>
- <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
- <dd>Indique une forme plus étendue que la normale (la valeur <code>ultra-expanded</code> étant la plus étendue).</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage (une valeur de type {{cssxref("&lt;percentage&gt;")}}) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour cette propriété.</dd>
-</dl>
+- `normal`
+  - : Indique la forme normale (en largeur) de la police.
+- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`
+  - : Indique une forme plus condensée que la normale (la valeur `ultra-condensed` correspond à la forme la plus condensée).
+- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`
+  - : Indique une forme plus étendue que la normale (la valeur `ultra-expanded` étant la plus étendue).
+- `<percentage>`
+  - : Un pourcentage (une valeur de type {{cssxref("&lt;percentage&gt;")}}) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour cette propriété.
 
-<p>Dans les versions antérieures de la spécification pour <code>font-stretch</code>, la propriété ne s'utilisait qu'avec des mots-clés. Avec le module CSS Fonts de niveau 4, la syntaxe est étendue afin de permettre l'utilisation des valeurs <code>&lt;percentage&gt;</code>. Cela permet aux polices variables de permettre un contrôle plus fin voire continu.</p>
+Dans les versions antérieures de la spécification pour `font-stretch`, la propriété ne s'utilisait qu'avec des mots-clés. Avec le module CSS Fonts de niveau 4, la syntaxe est étendue afin de permettre l'utilisation des valeurs `<percentage>`. Cela permet aux polices variables de permettre un contrôle plus fin voire continu.
 
-<p>Pour les polices variables TrueType et OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables.</p>
+Pour les polices variables TrueType et OpenType, c'est l'axe de variation `"wdth"` qui est utilisé afin d'implémenter les largeurs variables.
 
-<p>Si la police ne dispose pas d'une fonte avec une valeur exactement correspondantes, le moteur choisira la forme la plus proche disponible.</p>
+Si la police ne dispose pas d'une fonte avec une valeur exactement correspondantes, le moteur choisira la forme la plus proche disponible.
 
-<h3 id="Correspondance_entre_les_noms_et_les_pourcentages">Correspondance entre les noms et les pourcentages</h3>
+### Correspondance entre les noms et les pourcentages
 
-<p>Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :</p>
+Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :
 
 <table class="fullwidth-table standard-table">
- <thead>
-  <tr>
-   <th scope="col">Keyword</th>
-   <th scope="col">Pourcentage</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>ultra-condensed</code></td>
-   <td>50%</td>
-  </tr>
-  <tr>
-   <td><code>extra-condensed</code></td>
-   <td>62.5%</td>
-  </tr>
-  <tr>
-   <td><code>condensed</code></td>
-   <td>75%</td>
-  </tr>
-  <tr>
-   <td><code>semi-condensed</code></td>
-   <td>87.5%</td>
-  </tr>
-  <tr>
-   <td><code>normal</code></td>
-   <td>100%</td>
-  </tr>
-  <tr>
-   <td><code>semi-expanded</code></td>
-   <td>112.5%</td>
-  </tr>
-  <tr>
-   <td><code>expanded</code></td>
-   <td>125%</td>
-  </tr>
-  <tr>
-   <td><code>extra-expanded</code></td>
-   <td>150%</td>
-  </tr>
-  <tr>
-   <td><code>ultra-expanded</code></td>
-   <td>200%</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Keyword</th>
+      <th scope="col">Pourcentage</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>ultra-condensed</code></td>
+      <td>50%</td>
+    </tr>
+    <tr>
+      <td><code>extra-condensed</code></td>
+      <td>62.5%</td>
+    </tr>
+    <tr>
+      <td><code>condensed</code></td>
+      <td>75%</td>
+    </tr>
+    <tr>
+      <td><code>semi-condensed</code></td>
+      <td>87.5%</td>
+    </tr>
+    <tr>
+      <td><code>normal</code></td>
+      <td>100%</td>
+    </tr>
+    <tr>
+      <td><code>semi-expanded</code></td>
+      <td>112.5%</td>
+    </tr>
+    <tr>
+      <td><code>expanded</code></td>
+      <td>125%</td>
+    </tr>
+    <tr>
+      <td><code>extra-expanded</code></td>
+      <td>150%</td>
+    </tr>
+    <tr>
+      <td><code>ultra-expanded</code></td>
+      <td>200%</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Polices_variables">Polices variables</h3>
+### Polices variables
 
-<p>La plupart des polices disposent de fontes avec des formes "séparées"/"discrètes". Toutefois, les polices variables permettent désormais d'utiliser des variations beaucoup plus fines (et c'est pour cela qu'on utilise les pourcentages).</p>
+La plupart des polices disposent de fontes avec des formes "séparées"/"discrètes". Toutefois, les polices variables permettent désormais d'utiliser des variations beaucoup plus fines (et c'est pour cela qu'on utilise les pourcentages).
 
-<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables des glyphes.</p>
+Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `"wdth"` qui est utilisé afin d'implémenter les largeurs variables des glyphes.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ciblant les fontes avec les formes normale, semi-condensée et semi-étendue.</p>
+Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ciblant les fontes avec les formes normale, semi-condensée et semi-étendue.
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: "Open Sans";
   src: local("Open Sans") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
   font-stretch: 87.5% 112.5%;
-}</pre>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment <a href="/en-US/docs/Web/CSS/color#accessibility_concerns">si le contraste des couleurs est trop faible</a>.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG - Partie 1.4 (MDN)</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+## Accessibilité
+
+Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment [si le contraste des couleurs est trop faible](/en-US/docs/Web/CSS/color#accessibility_concerns).
+
+- [Comprendre les règles WCAG - Partie 1.4 (MDN)](/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)
+- [Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+
+## Spécifications
+
+| Spécification                                                                    | État                             | Commentaires |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}} | {{Spec2('CSS4 Fonts')}} |              |
+| {{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}} | {{Spec2('CSS3 Fonts')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.font-face.font-stretch")}}</p>
+{{Compat("css.at-rules.font-face.font-stretch")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("@font-face/font-display", "font-display descriptor")}}</li>
- <li>{{cssxref("@font-face/font-family", "font-family descriptor")}}</li>
- <li>{{cssxref("@font-face/font-weight", "font-weight descriptor")}}</li>
- <li>{{cssxref("@font-face/font-style", "font-style descriptor")}}</li>
- <li>{{cssxref("@font-face/font-variant", "font-variant descriptor")}}</li>
- <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
- <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
- <li>{{cssxref("@font-face/src", "src")}}</li>
- <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
-</ul>
+- {{cssxref("@font-face/font-display", "font-display descriptor")}}
+- {{cssxref("@font-face/font-family", "font-family descriptor")}}
+- {{cssxref("@font-face/font-weight", "font-weight descriptor")}}
+- {{cssxref("@font-face/font-style", "font-style descriptor")}}
+- {{cssxref("@font-face/font-variant", "font-variant descriptor")}}
+- {{cssxref("font-feature-settings", "font-feature-settings")}}
+- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+- {{cssxref("@font-face/src", "src")}}
+- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
diff --git a/files/fr/web/css/@font-face/font-style/index.md b/files/fr/web/css/@font-face/font-style/index.md
index 672e77a232..2b8a447bee 100644
--- a/files/fr/web/css/@font-face/font-style/index.md
+++ b/files/fr/web/css/@font-face/font-style/index.md
@@ -7,91 +7,78 @@ tags:
   - Reference
 translation_of: Web/CSS/@font-face/font-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <strong><code>font-style</code></strong>, associé à <a href="/fr/docs/Web/CSS/At-rule">la règle @</a> {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.</p>
+Le descripteur **`font-style`**, associé à [la règle @](/fr/docs/Web/CSS/At-rule) {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.
 
-<p>Pour une police donnée (un ensemble de fontes), les auteurs peuvent télécharger plusieurs fichiers correspondant à la même police mais pour différents styles. Le descripteur <code>font-style</code> peut alors être utilisé afin d'indiquer explicitement le style associé à la fonte. La valeur du descripteur correspond à la propriété de la fonte.</p>
+Pour une police donnée (un ensemble de fontes), les auteurs peuvent télécharger plusieurs fichiers correspondant à la même police mais pour différents styles. Le descripteur `font-style` peut alors être utilisé afin d'indiquer explicitement le style associé à la fonte. La valeur du descripteur correspond à la propriété de la fonte.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">font-style: normal;
+```css
+font-style: normal;
 font-style: italic;
 font-style: oblique;
 font-style: oblique 30deg;
-font-style: oblique 30deg 50deg;</pre>
+font-style: oblique 30deg 50deg;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>C'est la fonte « normale » de la police qui est choisie.</dd>
- <dt><code>italic</code></dt>
- <dd>C'est la fonte italique de la police qui est choisie.</dd>
- <dt><code>oblique</code></dt>
- <dd>C'est la fonte, artificiellement penchée à partir de la police normale, de la police qui est choisie.</dd>
- <dt><code>oblique</code> avec un angle</dt>
- <dd>C'est la fonte oblique (c'est-à-dire une version artificiellement penchée, obtenue à partir de la police normale) de la police qui est choisie. L'angle indiqué correspond à la pente du texte.</dd>
- <dt><code>oblique</code> avec un intervalle d'angle</dt>
- <dd>Utilise une fonte comme <code>oblique</code> et indique un intervalle d'angles possibles pour la pente du texte. On notera que l'intervalle est uniquement pris en compte pour la valeur <code>oblique</code>, aucune autre valeur n'est autorisée après <code>normal</code> ou <code>italic</code>.</dd>
-</dl>
+- `normal`
+  - : C'est la fonte « normale » de la police qui est choisie.
+- `italic`
+  - : C'est la fonte italique de la police qui est choisie.
+- `oblique`
+  - : C'est la fonte, artificiellement penchée à partir de la police normale, de la police qui est choisie.
+- `oblique` avec un angle
+  - : C'est la fonte oblique (c'est-à-dire une version artificiellement penchée, obtenue à partir de la police normale) de la police qui est choisie. L'angle indiqué correspond à la pente du texte.
+- `oblique` avec un intervalle d'angle
+  - : Utilise une fonte comme `oblique` et indique un intervalle d'angles possibles pour la pente du texte. On notera que l'intervalle est uniquement pris en compte pour la valeur `oblique`, aucune autre valeur n'est autorisée après `normal` ou `italic`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond :</p>
+Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond :
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: garamond;
   src: url('garamond.ttf');
-}</pre>
+}
+```
 
-<p><img alt="unstyled Garamond" src="garamondunstyled.jpg"></p>
+![unstyled Garamond](garamondunstyled.jpg)
 
-<p>La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.</p>
+La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.
 
-<p><img alt="artificially sloped garamond" src="garamondartificialstyle.jpg"></p>
+![artificially sloped garamond](garamondartificialstyle.jpg)
 
-<p>En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via le descripteur <code>src</code> et indiquer que c'est une police italique via <code>font-style</code>. Une « vraie » police italique utilisera des glyphes différents et la qualité calligraphique obtenue sera meilleure qu'avec les glyphes normaux penchés artificiellement.</p>
+En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via le descripteur `src` et indiquer que c'est une police italique via `font-style`. Une « vraie » police italique utilisera des glyphes différents et la qualité calligraphique obtenue sera meilleure qu'avec les glyphes normaux penchés artificiellement.
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: garamond;
   src: url('garamond-italic.ttf');
   /* On indique ici que la police est italique */
   font-style: italic;
-}</pre>
-
-<p><img alt="italic garamond" src="garamonditalic.jpg"></p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-style')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td>Ajoute la possibilité d'utiliser le mot-clé <code>oblique</code> suivi par une valeur angulaire.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.font-face.font-style")}}</p>
+}
+```
+
+![italic garamond](garamonditalic.jpg)
+
+## Spécifications
+
+| Spécification                                                                    | État                             | Commentaires                                                                          |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-style')}} | {{Spec2('CSS4 Fonts')}} | Ajoute la possibilité d'utiliser le mot-clé `oblique` suivi par une valeur angulaire. |
+| {{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale.                                                                  |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.font-face.font-style")}}
diff --git a/files/fr/web/css/@font-face/font-variation-settings/index.md b/files/fr/web/css/@font-face/font-variation-settings/index.md
index 750c35e29c..b1c2e35474 100644
--- a/files/fr/web/css/@font-face/font-variation-settings/index.md
+++ b/files/fr/web/css/@font-face/font-variation-settings/index.md
@@ -8,62 +8,49 @@ tags:
   - Reference
 translation_of: Web/CSS/@font-face/font-variation-settings
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <strong><code>font-variation-settings</code></strong>, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType.</p>
+Le descripteur **`font-variation-settings`**, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">/* On utilise les paramètres par défaut */
-font-variation-settings: normal;
+    /* On utilise les paramètres par défaut */
+    font-variation-settings: normal;
 
-/* On indique les valeurs pour les noms des axes OpenType */
-font-variation-settings: "xhgt" 0.7;</pre>
+    /* On indique les valeurs pour les noms des axes OpenType */
+    font-variation-settings: "xhgt" 0.7;
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Le texte est disposé avec les paramètres par défaut.</dd>
- <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
- <dd>Lorsque le texte est affiché, la liste des noms des axes OpenType est envoyée au moteur afin d'activer ou de désactiver des paramètres de la police. Chaque paramètre se compose d'un nom ({{cssxref("&lt;string&gt;")}}) de 4 caractères ASCII, suivis d'un nombre ({{cssxref("number")}}) qui indique la valeur de l'axe. Si la chaîne de caractères contient moins ou plus de caractères ou contient des caractères en dehors de l'intervalle de points de code U+20 - U+7E, la propriété entière sera considérée comme invalide. Le nombre utilisé peut être décimal ou négatif.</dd>
-</dl>
+- `normal`
+  - : Le texte est disposé avec les paramètres par défaut.
+- `<string> <number>`
+  - : Lorsque le texte est affiché, la liste des noms des axes OpenType est envoyée au moteur afin d'activer ou de désactiver des paramètres de la police. Chaque paramètre se compose d'un nom ({{cssxref("&lt;string&gt;")}}) de 4 caractères ASCII, suivis d'un nombre ({{cssxref("number")}}) qui indique la valeur de l'axe. Si la chaîne de caractères contient moins ou plus de caractères ou contient des caractères en dehors de l'intervalle de points de code U+20 - U+7E, la propriété entière sera considérée comme invalide. Le nombre utilisé peut être décimal ou négatif.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: 'OpenTypeFont';
   src: url('open_type_font.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-variation-settings: 'wght' 400, 'wdth' 300;
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}} | {{Spec2('CSS4 Fonts')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.font-face.font-variation-settings")}}</p>
+{{Compat("css.at-rules.font-face.font-variation-settings")}}
diff --git a/files/fr/web/css/@font-face/font-weight/index.md b/files/fr/web/css/@font-face/font-weight/index.md
index 9b6c5fb851..ddfc9ad1c4 100644
--- a/files/fr/web/css/@font-face/font-weight/index.md
+++ b/files/fr/web/css/@font-face/font-weight/index.md
@@ -8,163 +8,104 @@ tags:
   - Reference
 translation_of: Web/CSS/@font-face/font-weight
 ---
-<p>{{CSSRef}}</p>
-
-<p>Le descripteur CSS <strong><code>font-weight</code></strong> permet aux auteurs d'indiquer les graisses pour les polices fournies dans une règle {{cssxref("@font-face")}}. La propriété <code><a href="/fr/docs/Web/CSS/font-weight">font-weight</a></code> peut être utilisée séparément pour indiquer la graisse des caractères d'un texte (c'est-à-dire s'ils sont en gras, normaux ou plus fins).</p>
-
-<p>Pour une police particulière, les auteurs peuvent télécharger différentes fontes qui utilisent les différents styles d'une même police et alors utiliser le descripteur <code>font-weight</code> afin de définir explicitement le niveau de graisse. La valeur utilisée pour le descripteur est la même que celle qui peut être utilisée pour la propriété.</p>
-
-<p>{{cssinfo}}</p>
-
-<p>Il existe généralement un nombre limité de niveaux de graisse pour une police donnée. Lorsqu'on utilise un niveau de graisse qui n'existe pas, c'est le niveau le plus proche qui est utilisé. Les polices qui ne disposent pas d'une fonte en gras sont généralement synthétisées par l'agent utilisateur (pour empêcher cette synthèse, on pourra utiliser la propriété {{cssxref('font-synthesis')}}).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre>/* Valeurs simples */
-font-weight: normal;
-font-weight: bold;
-font-weight: 400;
-
-/* Valeurs multiples */
-font-weight: normal bold;
-font-weight: 300 500;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>Le niveau de graisse normal (équivaut à la valeur numérique <code>400</code>).</dd>
- <dt><code>bold</code></dt>
- <dd>La fonte en gras (équivaut à la valeur numérique <code>700</code>).</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000 (et incluant ces limites). Plus la valeur est élevée, plus le niveau de graisse utilisé sera important. Certains valeurs communément utilisées possèdent un nom : voir ci-après le tableau de correspondance entre les noms et les valeurs).</dd>
-</dl>
-
-<p>Dans les versions antérieures de la spécification, <code>font-weight</code> n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices qui ne sont pas variables pourront n'utiliser que ces valeurs (les valeurs intermédiaires, ex. 451) seront ramenées à la valeur palier la plus proche.</p>
-
-<p>Avec la spécification CSS Fonts de niveau 4, la syntaxe a été étendue afin que n'importe quel nombre entre 1 and 1000 (au sens large) puisse être utilisé. Les polices variables (voir plus bas) ont aussi été introduites et on peut donc avoir un contrôle plus précis sur le niveau de graisse utilisé.</p>
-
-<h3 id="Correspondance_entre_les_noms_et_les_valeurs_numériques">Correspondance entre les noms et les valeurs numériques</h3>
-
-<p>Les valeurs numériques entre <code>100</code> et <code>900</code> correspondent (approximativement) à ces noms communément utilisés :</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Valeur</th>
-   <th scope="col">Nom commun</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>100</td>
-   <td>Thin (Hairline)</td>
-  </tr>
-  <tr>
-   <td>200</td>
-   <td>Extra Light (Ultra Light)</td>
-  </tr>
-  <tr>
-   <td>300</td>
-   <td>Light</td>
-  </tr>
-  <tr>
-   <td>400</td>
-   <td>Normal</td>
-  </tr>
-  <tr>
-   <td>500</td>
-   <td>Medium</td>
-  </tr>
-  <tr>
-   <td>600</td>
-   <td>Semi Bold (Demi Bold)</td>
-  </tr>
-  <tr>
-   <td>700</td>
-   <td>Bold</td>
-  </tr>
-  <tr>
-   <td>800</td>
-   <td>Extra Bold (Ultra Bold)</td>
-  </tr>
-  <tr>
-   <td>900</td>
-   <td>Black (Heavy)</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Polices_variables">Polices variables</h3>
-
-<p>La plupart des polices se déclinent en fontes avec des niveaux de graisses distincts. Toutefois, certaines polices, appelées polices variables, permettent d'utiliser des niveaux de graisse intermédiaires plus ou moins finement. On peut ainsi obtenir une fonte d'un niveau de graisse plus précis.</p>
-
-<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"wght"</code> qui est utilisé afin d'implémenter ces largeurs variables.</p>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+{{CSSRef}}
+
+Le descripteur CSS **`font-weight`** permet aux auteurs d'indiquer les graisses pour les polices fournies dans une règle {{cssxref("@font-face")}}. La propriété [`font-weight`](/fr/docs/Web/CSS/font-weight) peut être utilisée séparément pour indiquer la graisse des caractères d'un texte (c'est-à-dire s'ils sont en gras, normaux ou plus fins).
+
+Pour une police particulière, les auteurs peuvent télécharger différentes fontes qui utilisent les différents styles d'une même police et alors utiliser le descripteur `font-weight` afin de définir explicitement le niveau de graisse. La valeur utilisée pour le descripteur est la même que celle qui peut être utilisée pour la propriété.
+
+{{cssinfo}}
+
+Il existe généralement un nombre limité de niveaux de graisse pour une police donnée. Lorsqu'on utilise un niveau de graisse qui n'existe pas, c'est le niveau le plus proche qui est utilisé. Les polices qui ne disposent pas d'une fonte en gras sont généralement synthétisées par l'agent utilisateur (pour empêcher cette synthèse, on pourra utiliser la propriété {{cssxref('font-synthesis')}}).
+
+## Syntaxe
+
+    /* Valeurs simples */
+    font-weight: normal;
+    font-weight: bold;
+    font-weight: 400;
+
+    /* Valeurs multiples */
+    font-weight: normal bold;
+    font-weight: 300 500;
+
+### Valeurs
+
+- `normal`
+  - : Le niveau de graisse normal (équivaut à la valeur numérique `400`).
+- `bold`
+  - : La fonte en gras (équivaut à la valeur numérique `700`).
+- `<number>`
+  - : Un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000 (et incluant ces limites). Plus la valeur est élevée, plus le niveau de graisse utilisé sera important. Certains valeurs communément utilisées possèdent un nom : voir ci-après le tableau de correspondance entre les noms et les valeurs).
+
+Dans les versions antérieures de la spécification, `font-weight` n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices qui ne sont pas variables pourront n'utiliser que ces valeurs (les valeurs intermédiaires, ex. 451) seront ramenées à la valeur palier la plus proche.
+
+Avec la spécification CSS Fonts de niveau 4, la syntaxe a été étendue afin que n'importe quel nombre entre 1 and 1000 (au sens large) puisse être utilisé. Les polices variables (voir plus bas) ont aussi été introduites et on peut donc avoir un contrôle plus précis sur le niveau de graisse utilisé.
+
+### Correspondance entre les noms et les valeurs numériques
+
+Les valeurs numériques entre `100` et `900` correspondent (approximativement) à ces noms communément utilisés :
+
+| Valeur | Nom commun                |
+| ------ | ------------------------- |
+| 100    | Thin (Hairline)           |
+| 200    | Extra Light (Ultra Light) |
+| 300    | Light                     |
+| 400    | Normal                    |
+| 500    | Medium                    |
+| 600    | Semi Bold (Demi Bold)     |
+| 700    | Bold                      |
+| 800    | Extra Bold (Ultra Bold)   |
+| 900    | Black (Heavy)             |
+
+### Polices variables
+
+La plupart des polices se déclinent en fontes avec des niveaux de graisses distincts. Toutefois, certaines polices, appelées polices variables, permettent d'utiliser des niveaux de graisse intermédiaires plus ou moins finement. On peut ainsi obtenir une fonte d'un niveau de graisse plus précis.
+
+Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `"wght"` qui est utilisé afin d'implémenter ces largeurs variables.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant, on récupère une police Open Sans et on l'importe en utilisant le niveau de graisse normal.</p>
-
-<pre>@font-face {
-  font-family: "Open Sans";
-  src: local("Open Sans") format("woff2"),
-       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
-  font-weight: 400;
-}</pre>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#Accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.font-face.font-weight")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/CSS/font-weight">font-weight</a></code></li>
- <li>{{cssxref("@font-face/font-display", "font-display descriptor")}}</li>
- <li>{{cssxref("@font-face/font-family", "font-family descriptor")}}</li>
- <li>{{cssxref("@font-face/font-stretch", "font-stretch descriptor")}}</li>
- <li>{{cssxref("@font-face/font-style", "font-style descriptor")}}</li>
- <li>{{cssxref("@font-face/font-variant", "font-variant descriptor")}}</li>
- <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
- <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
- <li>{{cssxref("@font-face/src", "src")}}</li>
- <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
-</ul>
+## Exemples
+
+Dans l'exemple suivant, on récupère une police Open Sans et on l'importe en utilisant le niveau de graisse normal.
+
+    @font-face {
+      font-family: "Open Sans";
+      src: local("Open Sans") format("woff2"),
+           url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+      font-weight: 400;
+    }
+
+## Accessibilité
+
+Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec `font-weight` qui vaut `100` ou `200`, notamment [si le contraste entre le texte et l'arrière-plan est faible](/fr/docs/Web/CSS/color#Accessibilité).
+
+- [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 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+
+## Spécifications
+
+| Spécification                                                                    | État                             | Commentaires |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}} | {{Spec2('CSS4 Fonts')}} |              |
+| {{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}} | {{Spec2('CSS3 Fonts')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.font-face.font-weight")}}
+
+## Voir aussi
+
+- [`font-weight`](/fr/docs/Web/CSS/font-weight)
+- {{cssxref("@font-face/font-display", "font-display descriptor")}}
+- {{cssxref("@font-face/font-family", "font-family descriptor")}}
+- {{cssxref("@font-face/font-stretch", "font-stretch descriptor")}}
+- {{cssxref("@font-face/font-style", "font-style descriptor")}}
+- {{cssxref("@font-face/font-variant", "font-variant descriptor")}}
+- {{cssxref("font-feature-settings", "font-feature-settings")}}
+- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+- {{cssxref("@font-face/src", "src")}}
+- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
diff --git a/files/fr/web/css/@font-face/index.md b/files/fr/web/css/@font-face/index.md
index f8dfeee254..7084f72a43 100644
--- a/files/fr/web/css/@font-face/index.md
+++ b/files/fr/web/css/@font-face/index.md
@@ -7,182 +7,165 @@ tags:
   - Règle @
 translation_of: Web/CSS/@font-face
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a> <strong><code>@font-face</code></strong> permet de définir les polices d'écriture à utiliser pour afficher le texte de pages web. Cette police peut être chargée depuis un serveur distant ou depuis l'ordinateur de l'utilisateur. Si la fonction <code>local()</code> est utilisée, elle indique à l'agent utilisateur de prendre en compte une police présente sur le poste de l'utilisateur.</p>
+La [règle @](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@font-face`** permet de définir les polices d'écriture à utiliser pour afficher le texte de pages web. Cette police peut être chargée depuis un serveur distant ou depuis l'ordinateur de l'utilisateur. Si la fonction `local()` est utilisée, elle indique à l'agent utilisateur de prendre en compte une police présente sur le poste de l'utilisateur.
 
-<p>En permettant aux auteurs de fournir leurs propres polices, il n'est plus nécessaire de dépendre uniquement des polices qui sont installées sur les postes des utilisateurs.</p>
+En permettant aux auteurs de fournir leurs propres polices, il n'est plus nécessaire de dépendre uniquement des polices qui sont installées sur les postes des utilisateurs.
 
-<p>Il est courant d'utiliser les deux formes <code>url()</code> et <code>local()</code> afin de pouvoir utiliser une police locale si elle est disponible ou d'en télécharger une autre au cas où.</p>
+Il est courant d'utiliser les deux formes `url()` et `local()` afin de pouvoir utiliser une police locale si elle est disponible ou d'en télécharger une autre au cas où.
 
-<p>La règle <code>@font-face</code> peut être utilisée au niveau global d'une feuille de style et également au sein d'un groupe lié à <a href="/fr/docs/Web/CSS/Règles_@">une règle @ conditionnelle</a>.</p>
+La règle `@font-face` peut être utilisée au niveau global d'une feuille de style et également au sein d'un groupe lié à [une règle @ conditionnelle](/fr/docs/Web/CSS/Règles_@).
 
-<pre class="brush: css no-line-numbers">@font-face {
+```css
+@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
         url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
-}</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Descripteurs">Descripteurs</h3>
-
-<dl>
- <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
- <dd>Ce descripteur détermine la façon dont une fonte est affichée selon qu'elle a été téléchargée et/ou si elle est prête à être utilisée.</dd>
- <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
- <dd>Ce descripteur définit un nom qui sera utilisé pour désigner cette police dans les différentes règles associées.</dd>
- <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
- <dd>Une valeur {{cssxref("font-stretch")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-stretch: 50% 200%;</code>.</dd>
- <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
- <dd>Une valeur {{cssxref("font-style")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-style: oblique 20deg 50deg;</code>.</dd>
- <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
- <dd>Une valeur {{cssxref("font-variant")}}.</dd>
- <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
- <dd>Une valeur {{cssxref("font-weight")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-weight: 100 400;</code>.</dd>
- <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt>
- <dd>Ce descripteur permet d'avoir un contrôle avancé sur les fonctionnalités typographiques relatives aux fontes OpenType.</dd>
- <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
- <dd>Ce descripteur permet d'avoir un contrôle de bas niveau sur les variations des polices OpenType et TrueType en indiquant les nom des axes et des fonctionnalités à faire varier.</dd>
- <dt>{{cssxref("@font-face/src", "src")}}</dt>
- <dd>
- <p>Indique la ressource qui contient les données pour la police d'écriture. Cela peut être une URL vers un fichier distant ou le nom d'une police de caractères présente sur l'ordinateur de l'utilisateur.</p>
-
- <p>On peut fournir une indication de format au navigateur (afin que celui-ci sélectionne celui qui lui convient le mieux) sous la forme d'une fonction <code>format()</code> qui contient le type comme argument :</p>
-
- <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>,
-     url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre>
-
- <p>Les types utilisables sont : <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code> et <code>"svg"</code>.</p>
- </dd>
- <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
- <dd>L'intervalle des points de code Unicode pour lesquels la règle  <code>@font-face</code> s'applique.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+}
+```
+
+## Syntaxe
+
+### Descripteurs
+
+- {{cssxref("@font-face/font-display", "font-display")}}
+  - : Ce descripteur détermine la façon dont une fonte est affichée selon qu'elle a été téléchargée et/ou si elle est prête à être utilisée.
+- {{cssxref("@font-face/font-family", "font-family")}}
+  - : Ce descripteur définit un nom qui sera utilisé pour désigner cette police dans les différentes règles associées.
+- {{cssxref("@font-face/font-stretch", "font-stretch")}}
+  - : Une valeur {{cssxref("font-stretch")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : `font-stretch: 50% 200%;`.
+- {{cssxref("@font-face/font-style", "font-style")}}
+  - : Une valeur {{cssxref("font-style")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : `font-style: oblique 20deg 50deg;`.
+- {{cssxref("@font-face/font-variant", "font-variant")}}
+  - : Une valeur {{cssxref("font-variant")}}.
+- {{cssxref("@font-face/font-weight", "font-weight")}}
+  - : Une valeur {{cssxref("font-weight")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : `font-weight: 100 400;`.
+- {{cssxref("font-feature-settings", "font-feature-settings")}}
+  - : Ce descripteur permet d'avoir un contrôle avancé sur les fonctionnalités typographiques relatives aux fontes OpenType.
+- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+  - : Ce descripteur permet d'avoir un contrôle de bas niveau sur les variations des polices OpenType et TrueType en indiquant les nom des axes et des fonctionnalités à faire varier.
+- {{cssxref("@font-face/src", "src")}}
+
+  - : Indique la ressource qui contient les données pour la police d'écriture. Cela peut être une URL vers un fichier distant ou le nom d'une police de caractères présente sur l'ordinateur de l'utilisateur.
+
+    On peut fournir une indication de format au navigateur (afin que celui-ci sélectionne celui qui lui convient le mieux) sous la forme d'une fonction `format()` qui contient le type comme argument :
+
+    ```css
+    src: url(ideal-sans-serif.woff) format("woff"),
+         url(basic-sans-serif.ttf) format("truetype");
+    ```
+
+    Les types utilisables sont : `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"` et `"svg"`.
+
+- {{cssxref("@font-face/unicode-range", "unicode-range")}}
+  - : L'intervalle des points de code Unicode pour lesquels la règle  `@font-face` s'applique.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Police_distante">Police distante</h3>
+### Police distante
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: "Bitstream Vera Serif Bold";
   src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
 }
 
 body {
   font-family: "Bitstream Vera Serif Bold", serif;
-} </pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt; Et voici Bitstream Vera Serif Bold.&lt;/p&gt;
-</pre>
+```html
+<p> Et voici Bitstream Vera Serif Bold.</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Police_distante")}}</p>
+{{EmbedLiveSample("Police_distante")}}
 
-<h3 id="Police_locale">Police locale</h3>
+### Police locale
 
-<p>Ici, l'agent utilisateur tente d'utiliser la police Helvetica Neue Bold ou HelveticaNeue-Bold si elle existe sur l'ordinateur de l'utilisateur. Sinon, il utilise la police distante MgOpenModernaBold.ttf.</p>
+Ici, l'agent utilisateur tente d'utiliser la police Helvetica Neue Bold ou HelveticaNeue-Bold si elle existe sur l'ordinateur de l'utilisateur. Sinon, il utilise la police distante MgOpenModernaBold.ttf.
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: MaHelvetica;
   src: local("Helvetica Neue Bold"),
        local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
   font-weight: bold;
-}</pre>
+}
+```
+
+#### HTML
 
-<h4 id="HTML_2">HTML</h4>
+```html
+<p> Et voici Ma Helvetica.</p>
+```
 
-<pre class="brush: html">&lt;p&gt; Et voici Ma Helvetica.&lt;/p&gt;
-</pre>
+#### Résultat
 
-<h4 id="Résultat_2">Résultat</h4>
+{{EmbedLiveSample("Police_locale")}}
 
-<p>{{EmbedLiveSample("Police_locale")}}</p>
+## Types MIME associés aux polices
 
-<h2 id="Types_MIME_associés_aux_polices">Types MIME associés aux polices</h2>
+Voici, selon les différents formats de police, les types MIME associés :
 
-<p>Voici, selon les différents formats de police, les types MIME associés :</p>
+- TrueType
+  - : `font/ttf`
+- OpenType
+  - : `font/otf`
+- Web Open File Format
+  - : `font/woff`
+- Web Open File Format 2
+  - : `font/woff2`
 
-<dl>
- <dt>TrueType</dt>
- <dd><code>font/ttf</code></dd>
- <dt>OpenType</dt>
- <dd><code>font/otf</code></dd>
- <dt>Web Open File Format</dt>
- <dd><code>font/woff</code></dd>
- <dt>Web Open File Format 2</dt>
- <dd><code>font/woff2</code></dd>
-</dl>
+## Notes
 
-<h2 id="Notes">Notes</h2>
+- Les restrictions d'origine (même domaine) s'appliquent également sur les polices web sauf si [les contrôles d'accès HTTP](/fr/docs/HTTP/Access_control_CORS) sont paramétrés afin de lever cette restriction.
+- `@font-face` ne peut pas être déclaré au sein d'un sélecteur CSS. Ainsi l'exemple suivant ne fonctionnera pas :
 
-<ul>
- <li>Les restrictions d'origine (même domaine) s'appliquent également sur les polices web sauf si <a href="/fr/docs/HTTP/Access_control_CORS">les contrôles d'accès HTTP</a> sont paramétrés afin de lever cette restriction.</li>
- <li><code>@font-face</code> ne peut pas être déclaré au sein d'un sélecteur CSS. Ainsi l'exemple suivant ne fonctionnera pas :
-  <pre class="brush: css example-bad">.nomClasse {
-  @font-face {
-    font-family: MyHelvetica;
-    src: local("Helvetica Neue Bold"),
-         local("HelveticaNeue-Bold"),
-         url(MgOpenModernaBold.ttf;
-    font-weight: bold;
+  ```css example-bad
+  .nomClasse {
+    @font-face {
+      font-family: MyHelvetica;
+      src: local("Helvetica Neue Bold"),
+           local("HelveticaNeue-Bold"),
+           url(MgOpenModernaBold.ttf;
+      font-weight: bold;
+    }
   }
-}</pre>
- </li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
-   <td>{{Spec2('WOFF2.0')}}</td>
-   <td>Spécification du format de police avec un nouvel algorithme de compression.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
-   <td>{{Spec2('WOFF1.0')}}</td>
-   <td>Spécification du format de police.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.font-face")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/Guide/WOFF">À propos de WOFF</a></li>
- <li><a href="https://everythingfonts.com/font-face">Le générateur de règles <code>@font-face</code> par Everythingfonts </a></li>
- <li><a href="https://www.fontsquirrel.com/tools/webfont-generator">Le générateur de règles @font-face par FontSquirrel</a></li>
- <li><a href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Des polices obtenues avec <code>@font-face</code> (en anglais, sur hacks.mozilla.org)</a></li>
- <li><a href="http://openfontlibrary.org/">Une bibliothèque de polices ouvertes (<em>Open Font Library</em>)</a></li>
- <li><a href="http://caniuse.com/woff">Où puis-je utiliser WOFF ? (en anglais sur caniuse.com)</a></li>
- <li><a href="http://caniuse.com/svg-fonts">Où puis-je utiliser les polices SVG ?</a></li>
-</ul>
+  ```
+
+## Spécifications
+
+| Spécification                                                                    | État                             | Commentaires                                                                |
+| -------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------- |
+| {{SpecName('WOFF2.0', '', 'WOFF2 font format')}}                 | {{Spec2('WOFF2.0')}}     | Spécification du format de police avec un nouvel algorithme de compression. |
+| {{SpecName('WOFF1.0', '', 'WOFF font format')}}                 | {{Spec2('WOFF1.0')}}     | Spécification du format de police.                                          |
+| {{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale.                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.font-face")}}
+
+## Voir aussi
+
+- [À propos de WOFF](/fr/docs/Web/Guide/WOFF)
+- [Le générateur de règles `@font-face` par Everythingfonts](https://everythingfonts.com/font-face)
+- [Le générateur de règles @font-face par FontSquirrel](https://www.fontsquirrel.com/tools/webfont-generator)
+- [Des polices obtenues avec `@font-face` (en anglais, sur hacks.mozilla.org)](http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/)
+- [Une bibliothèque de polices ouvertes (_Open Font Library_)](http://openfontlibrary.org/)
+- [Où puis-je utiliser WOFF ? (en anglais sur caniuse.com)](http://caniuse.com/woff)
+- [Où puis-je utiliser les polices SVG ?](http://caniuse.com/svg-fonts)
diff --git a/files/fr/web/css/@font-face/line-gap-override/index.md b/files/fr/web/css/@font-face/line-gap-override/index.md
index 3c70e24a29..c697ac9ec1 100644
--- a/files/fr/web/css/@font-face/line-gap-override/index.md
+++ b/files/fr/web/css/@font-face/line-gap-override/index.md
@@ -1,42 +1,43 @@
 ---
 title: line-gap-override
 slug: Web/CSS/@font-face/line-gap-override
+translation_of: Web/CSS/@font-face/line-gap-override
 browser-compat: css.at-rules.font-face.line-gap-override
-translation_of: 'Web/CSS/@font-face/line-gap-override'
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Le descripteur CSS <strong><code>line-gap-override</code></strong> définit la mesure de l'écart de lignes de la police. La mesure de l'écart de lignes peut être l'écart recommandé par la police ou encore un écart externe.</p>
+Le descripteur CSS **`line-gap-override`** définit la mesure de l'écart de lignes de la police. La mesure de l'écart de lignes peut être l'écart recommandé par la police ou encore un écart externe.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">line-gap-override: normal;
-line-gap-override: 90%;</pre>
+```css
+line-gap-override: normal;
+line-gap-override: 90%;
+```
 
-<h3 id="values">Valeurs</h3>
+### Valeurs
 
-<dl>
-  <dt><code>normal</code></dt>
-  <dd>La valeur par défaut. Lorsqu'elle est utilisée, la valeur de la mesure est obtenue à partir du fichier de police.</dd>
-  <dt><code>&lt;percentage&gt;</code></dt>
-  <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}).</dd>
-</dl>
+- `normal`
+  - : La valeur par défaut. Lorsqu'elle est utilisée, la valeur de la mesure est obtenue à partir du fichier de police.
+- `<percentage>`
+  - : Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui traduit l'augmentation ou la réduction par rapport à la taille de la police ({{cssxref("font-size")}}).
 
-<h2 id="formal_definition">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="formal_syntax">Syntaxe formelle</h2>
+## Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="overriding_metrics_of_a_fallback_font">Surcharge de la mesure d'une police de recours</h3>
+### Surcharge de la mesure d'une police de recours
 
-<p>La propriété <code>line-gap-override</code> peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.</p>
+La propriété `line-gap-override` peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: web-font;
   src: url("https://example.com/font.woff");
 }
@@ -45,30 +46,29 @@ line-gap-override: 90%;</pre>
   font-family: local-font;
   src: local(Local Font);
   line-gap-override: 125%;
-}</pre>
+}
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("@font-face/descent-override", "descent-override")}}</li>
- <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
- <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
- <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
- <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
- <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
- <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
- <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
- <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
- <li>{{cssxref("@font-face/line-gap-override", "line-gap-override")}}</li>
- <li>{{cssxref("@font-face/src", "src")}}</li>
- <li>{{cssxref("@font-face/size-adjust", "size-adjust")}}</li>
- <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
-</ul>
+- {{cssxref("@font-face/descent-override", "descent-override")}}
+- {{cssxref("@font-face/font-display", "font-display")}}
+- {{cssxref("@font-face/font-family", "font-family")}}
+- {{cssxref("@font-face/font-weight", "font-weight")}}
+- {{cssxref("@font-face/font-style", "font-style")}}
+- {{cssxref("@font-face/font-stretch", "font-stretch")}}
+- {{cssxref("@font-face/font-variant", "font-variant")}}
+- {{cssxref("font-feature-settings", "font-feature-settings")}}
+- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+- {{cssxref("@font-face/line-gap-override", "line-gap-override")}}
+- {{cssxref("@font-face/src", "src")}}
+- {{cssxref("@font-face/size-adjust", "size-adjust")}}
+- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
diff --git a/files/fr/web/css/@font-face/size-adjust/index.md b/files/fr/web/css/@font-face/size-adjust/index.md
index d56be8dda9..51ac210d30 100644
--- a/files/fr/web/css/@font-face/size-adjust/index.md
+++ b/files/fr/web/css/@font-face/size-adjust/index.md
@@ -1,43 +1,44 @@
 ---
 title: size-adjust
 slug: Web/CSS/@font-face/size-adjust
+translation_of: Web/CSS/@font-face/size-adjust
 browser-compat: css.at-rules.font-face.size-adjust
-translation_of: 'Web/CSS/@font-face/size-adjust'
 ---
-<p>{{CSSRef}}{{SeeCompatTable}}</p>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>Le descripteur CSS <strong><code>size-adjust</code></strong> CSS définit un multiplicateur destiné aux contours des glyphes et aux mesures associées à la police. Cela facilite l'harmonisation de l'apparence des polices lorsqu'elles sont rendues avec la même taille.</p>
+Le descripteur CSS **`size-adjust`** CSS définit un multiplicateur destiné aux contours des glyphes et aux mesures associées à la police. Cela facilite l'harmonisation de l'apparence des polices lorsqu'elles sont rendues avec la même taille.
 
-<p>Le descripteur <code>size-adjust</code> se comporte d'une manière similaire à la propriété {{cssxref("font-size-adjust")}}. Il calcule l'ajustement à effectuer par police en faisant la correspondance avec leurs hauteurs respectives.</p>
+Le descripteur `size-adjust` se comporte d'une manière similaire à la propriété {{cssxref("font-size-adjust")}}. Il calcule l'ajustement à effectuer par police en faisant la correspondance avec leurs hauteurs respectives.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">size-adjust: 90%;</pre>
+```css
+size-adjust: 90%;
+```
 
-<h3 id="values">Valeurs</h3>
+### Valeurs
 
-<dl>
-  <dt><code>&lt;percentage&gt;</code></dt>
-  <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}), avec une valeur initiale de 100%.</dd>
-</dl>
+- `<percentage>`
+  - : Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}), avec une valeur initiale de 100%.
 
-<p>Toutes les mesures associées à la police sont mises à l'échelle en utilisant le pourcentage fourni. Cela comprend les glyphes, les tables de hauteur de ligne et surcharge les valeurs fournies par les descripteurs {{cssxref("@font-face")}}.</p>
+Toutes les mesures associées à la police sont mises à l'échelle en utilisant le pourcentage fourni. Cela comprend les glyphes, les tables de hauteur de ligne et surcharge les valeurs fournies par les descripteurs {{cssxref("@font-face")}}.
 
-<h2 id="formal_definition">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="formal_syntax">Syntaxe formelle</h2>
+## Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="overriding_metrics_of_a_fallback_font">Surcharge de la mesure d'une police de recours</h3>
+### Surcharge de la mesure d'une police de recours
 
-<p>La propriété <code>size-adjust</code> peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.</p>
+La propriété `size-adjust` peut aider à la surcharge des mesures d'une police de secours pour qu'elles correspondent mieux à celles de la police principale.
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: web-font;
   src: url("https://example.com/font.woff");
 }
@@ -46,27 +47,26 @@ translation_of: 'Web/CSS/@font-face/size-adjust'
   font-family: local-font;
   src: local(Local Font);
   size-adjust: 90%;
-}</pre>
+}
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
-  <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
-  <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
-  <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
-  <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
-  <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
-  <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
-  <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
-  <li>{{cssxref("@font-face/src", "src")}}</li>
-  <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
-</ul>
+- {{cssxref("@font-face/font-display", "font-display")}}
+- {{cssxref("@font-face/font-family", "font-family")}}
+- {{cssxref("@font-face/font-weight", "font-weight")}}
+- {{cssxref("@font-face/font-style", "font-style")}}
+- {{cssxref("@font-face/font-stretch", "font-stretch")}}
+- {{cssxref("@font-face/font-variant", "font-variant")}}
+- {{cssxref("font-feature-settings", "font-feature-settings")}}
+- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+- {{cssxref("@font-face/src", "src")}}
+- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}
diff --git a/files/fr/web/css/@font-face/src/index.md b/files/fr/web/css/@font-face/src/index.md
index 0670afaf67..0e675fa6ea 100644
--- a/files/fr/web/css/@font-face/src/index.md
+++ b/files/fr/web/css/@font-face/src/index.md
@@ -7,26 +7,27 @@ tags:
   - Reference
 translation_of: Web/CSS/@font-face/src
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le descripteur <strong><code>src</code></strong>, associé à la règle @ {{cssxref("@font-face")}}, permet de définir la ressource qui contient les données relatives à une police de caractères. Ce descripteur est obligatoire afin que la règle <code>@font-face</code> soit considérée comme valide.</p>
+Le descripteur **`src`**, associé à la règle @ {{cssxref("@font-face")}}, permet de définir la ressource qui contient les données relatives à une police de caractères. Ce descripteur est obligatoire afin que la règle `@font-face` soit considérée comme valide.
 
-<p>Sa valeur est composée d'une liste de noms séparés par des virgules, ordonnés par priorité dont chacun fait référence à une police de caractères externe ou locale. Lorsqu'une police doit être utilisée, l'agent utilisateur parcourt la liste de ces références et utilise la première police qui peut être chargée correctement. Si la police de caractères contient des données invalides ou si le nom ne correspond à aucune police de caractères, l'agent utilisateur passe à la suivante.</p>
+Sa valeur est composée d'une liste de noms séparés par des virgules, ordonnés par priorité dont chacun fait référence à une police de caractères externe ou locale. Lorsqu'une police doit être utilisée, l'agent utilisateur parcourt la liste de ces références et utilise la première police qui peut être chargée correctement. Si la police de caractères contient des données invalides ou si le nom ne correspond à aucune police de caractères, l'agent utilisateur passe à la suivante.
 
-<p>Là aussi, les URL utilisées peuvent être relatives. Dans le cas où une URL relative est utilisée, elle est résolue grâce à l'emplacement de la feuille de styles qui contient la règle <code>@font-face</code>. Pour les polices SVG, l'URL pointe vers un élément du document qui contient les définitions SVG de la police. Si l'élément de référence est absent, une référence implicite sera construite avec la première police définie. De même, pour les formats contenant plusieurs polices, seule une police est chargée pour une règle <code>@font-face</code> donnée. Les identifiants de fragment de l'URL peuvent être utilisés pour indiquer la police à charger. Si le format conteneur ne possède pas de schéma d'identification des fragments, ce sera un schéma simple d'indexation (ex. "font-collection#1" pour la première police, "font-collection#2" pour la seconde, etc.) qui sera utilisé.</p>
+Là aussi, les URL utilisées peuvent être relatives. Dans le cas où une URL relative est utilisée, elle est résolue grâce à l'emplacement de la feuille de styles qui contient la règle `@font-face`. Pour les polices SVG, l'URL pointe vers un élément du document qui contient les définitions SVG de la police. Si l'élément de référence est absent, une référence implicite sera construite avec la première police définie. De même, pour les formats contenant plusieurs polices, seule une police est chargée pour une règle `@font-face` donnée. Les identifiants de fragment de l'URL peuvent être utilisés pour indiquer la police à charger. Si le format conteneur ne possède pas de schéma d'identification des fragments, ce sera un schéma simple d'indexation (ex. "font-collection#1" pour la première police, "font-collection#2" pour la seconde, etc.) qui sera utilisé.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* &lt;url&gt; */
+```css
+/* <url> */
 src: url(https://unsiteweb.com/chemin/vers/police.woff); /* URL absolue */
 src: url(chemin/vers/police.woff);                       /* URL relative */
 src: url(chemin/vers/police.woff) format("woff");        /* format explicite */
 src: url('chemin/vers/police.woff');                     /* URL entre quotes */
 src: url(chemin/vers/policesvg.svg#exemple);             /* fragment identifiant une police */
 
-/* Valeurs de type &lt;font-face-name&gt; */
+/* Valeurs de type <font-face-name> */
 src: local(police);      /* nom sans double quote */
 src: local(une police); /* nom avec espace */
 src: local("police");    /* nom entre double quotes */
@@ -35,49 +36,35 @@ src: local("police");    /* nom entre double quotes */
 src: local(police), url(chemin/vers/police.svg) format("svg"),
     url(chemin/vers/police.woff) format("woff"),
     url(chemin/vers/police.otf) format("opentype");
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;url&gt; [ format( &lt;string&gt;# ) ]?</code></dt>
- <dd>Définit une référence externe, composée d'une URL et d'une indication optionnelle quant au format de la police chargée via cette URL. L'indication de format contient une liste de chaînes de caractères dont chacune doit correspondre à un format de police connu. Si un agent utilisateur ne prend pas en charge le format indiqué, il ne téléchargera pas la ressource liée à la police. Si aucune indication de format n'est fournie, la ressource associée est toujours téléchargée.</dd>
- <dt><code>&lt;font-face-name&gt;</code></dt>
- <dd>Définit le nom d'une police installée localement grâce à la fonction <code>local()</code> qui permet d'identifier une police de caractères au sein d'une famille de polices. Le nom de la police peut être entre double quotes.</dd>
-</dl>
+- `<url> [ format( <string># ) ]?`
+  - : Définit une référence externe, composée d'une URL et d'une indication optionnelle quant au format de la police chargée via cette URL. L'indication de format contient une liste de chaînes de caractères dont chacune doit correspondre à un format de police connu. Si un agent utilisateur ne prend pas en charge le format indiqué, il ne téléchargera pas la ressource liée à la police. Si aucune indication de format n'est fournie, la ressource associée est toujours téléchargée.
+- `<font-face-name>`
+  - : Définit le nom d'une police installée localement grâce à la fonction `local()` qui permet d'identifier une police de caractères au sein d'une famille de polices. Le nom de la police peut être entre double quotes.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: policeexemple;
   src: local(Police Exemple), url('policeexemple.woff') format("woff"),
       url('policeexemple.otf') format("opentype");
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.font-face.src")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                | État                             | Commentaires         |
+| ------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#src-desc', 'src')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.font-face.src")}}
diff --git a/files/fr/web/css/@font-face/unicode-range/index.md b/files/fr/web/css/@font-face/unicode-range/index.md
index 75a2fa5342..c034e9d9bf 100644
--- a/files/fr/web/css/@font-face/unicode-range/index.md
+++ b/files/fr/web/css/@font-face/unicode-range/index.md
@@ -8,59 +8,55 @@ tags:
   - Reference
 translation_of: Web/CSS/@font-face/unicode-range
 ---
-<div>{{cssref}}</div>
+{{cssref}}
 
-<p>Le descripteur <strong><code>unicode-range</code></strong>, associé à la règle @ {{cssxref("@font-face")}}, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée.</p>
+Le descripteur **`unicode-range`**, associé à la règle @ {{cssxref("@font-face")}}, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée.
 
-<p>Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées.</p>
+Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeurs &lt;unicode-range&gt; */
+```css
+/* Valeurs <unicode-range> */
 unicode-range: U+26;                 /* un seul point de code         */
 unicode-range: U+0-7F;
 unicode-range: U+0025-00FF;          /* un intervalle spécifique      */
 unicode-range: U+4??;                /* un intervalle de substitution */
 unicode-range: U+0025-00FF, U+4??;   /* plusieurs valeurs             */
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<p>Une valeur de type <code>&lt;unicode-range&gt;</code> peut se présenter de trois façons différentes :</p>
-
-<ul>
- <li>un seul point de code
-  <ul>
-   <li>Ex : <code>U+26</code></li>
-  </ul>
- </li>
- <li>un intervalle spécifique de points de code
-  <ul>
-   <li>Ex : <code>U+0025-00FF</code> indique que l'intervalle contient tous les caractères contenus entre les points de code <code>U+0025</code> et <code>U+00FF</code></li>
-  </ul>
- </li>
- <li>un intervalle de substitution indiqué par <code>?</code>
-  <ul>
-   <li>Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, <code>U+4??</code> signifie « tous les caractères contenus dans l'intervalle entre les points de code <code>U+400</code> et <code>U+4FF</code>).</li>
-  </ul>
- </li>
-</ul>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+Une valeur de type `<unicode-range>` peut se présenter de trois façons différentes :
+
+- un seul point de code
+
+  - Ex : `U+26`
+
+- un intervalle spécifique de points de code
+
+  - Ex : `U+0025-00FF` indique que l'intervalle contient tous les caractères contenus entre les points de code `U+0025` et `U+00FF`
+
+- un intervalle de substitution indiqué par `?`
+
+  - Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, `U+4??` signifie « tous les caractères contenus dans l'intervalle entre les points de code `U+400` et `U+4FF`).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (<em>Helvetica</em>) et une police avec des empattements (<em>Times New Roman</em>) pour l'esperluette.</p>
+Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (_Helvetica_) et une police avec des empattements (_Times New Roman_) pour l'esperluette.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style.</p>
+Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style.
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: 'Ampersand';
   src: local('Times New Roman');
   unicode-range: U+26;
@@ -69,39 +65,29 @@ unicode-range: U+0025-00FF, U+4??;   /* plusieurs valeurs             */
 div {
   font-size: 4em;
   font-family: Ampersand, Helvetica, sans-serif;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;Me &amp; You = Us&lt;/div&gt;</pre>
+```html
+<div>Me & You = Us</div>
+```
 
-<h3 id="Résultat_de_référence_(image_statique)">Résultat de référence (image statique)</h3>
+### Résultat de référence (image statique)
 
-<p><img src="https://mdn.mozillademos.org/files/6043/Refresult.png"></p>
+![](https://mdn.mozillademos.org/files/6043/Refresult.png)
 
-<h3 id="Résultat_du_navigateur">Résultat du navigateur</h3>
+### Résultat du navigateur
 
-<p>{{EmbedLiveSample("Exemples", 500,104)}}</p>
+{{EmbedLiveSample("Exemples", 500,104)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.font-face.unicode-range")}}</p>
+{{Compat("css.at-rules.font-face.unicode-range")}}
diff --git a/files/fr/web/css/@font-feature-values/index.md b/files/fr/web/css/@font-feature-values/index.md
index cf733cde7b..6b1211f0f1 100644
--- a/files/fr/web/css/@font-feature-values/index.md
+++ b/files/fr/web/css/@font-feature-values/index.md
@@ -7,11 +7,12 @@ tags:
   - Règle @
 translation_of: Web/CSS/@font-feature-values
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/At-rule">règle @</a> <strong><code>@font-feature-values</code></strong> permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.</p>
+La [règle @](/fr/docs/Web/CSS/At-rule) **`@font-feature-values`** permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.
 
-<pre class="brush: css">@font-feature-values Font One {
+```css
+@font-feature-values Font One {
 /* On active la caractéristique nice-style
    sur Font One */
   @styleset {
@@ -32,58 +33,41 @@ translation_of: Web/CSS/@font-feature-values
 .nice-look {
   font-variant-alternates: styleset(nice-style);
 }
-</pre>
+```
 
-<p>La règle @ <code>@font-feature-values</code> peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein <a href="/fr/docs/Web/CSS/At-rule" title="CSS/At-rule#Conditional_Group_Rules">d'un groupe de règles conditionnelles</a>.</p>
+La règle @ `@font-feature-values` peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein [d'un groupe de règles conditionnelles](/fr/docs/Web/CSS/At-rule "CSS/At-rule#Conditional_Group_Rules").
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Blocs_liés_aux_caractéristiques">Blocs liés aux caractéristiques</h3>
+### Blocs liés aux caractéristiques
 
-<dl>
- <dt><code>@swash</code></dt>
- <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "swash()", "#swash()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
- <dt><code>@annotation</code></dt>
- <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
- <dt><code>@ornaments</code></dt>
- <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}}. La caractéristique d'ornement est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
- <dt><code>@stylistic</code></dt>
- <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
- <dt><code>@styleset</code></dt>
- <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : <code>ident1: 2 4 12 1</code> correspondra aux valeurs OpenType <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, <code>ss01</code>. Les valeurs supérieures à <code>99</code> sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées.</dd>
- <dt><code>@character-variant</code></dt>
- <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : <code>ident1: 2</code>  correspond à <code>cv02=1</code> et <code>ident2: 2 4</code> correspond à  <code>cv02)4</code>, en revanche <code>ident2: 2 4 5</code> est invalide.</dd>
-</dl>
+- `@swash`
+  - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "swash()", "#swash()")}}. Une telle caractéristique est définie avec une seule valeur : `ident1: 2` est valide alors que `ident2: 2 4` est invalide.
+- `@annotation`
+  - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}}. Une telle caractéristique est définie avec une seule valeur : `ident1: 2` est valide alors que `ident2: 2 4` est invalide.
+- `@ornaments`
+  - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}}. La caractéristique d'ornement est définie avec une seule valeur : `ident1: 2` est valide alors que `ident2: 2 4` est invalide.
+- `@stylistic`
+  - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}}. Une telle caractéristique est définie avec une seule valeur : `ident1: 2` est valide alors que `ident2: 2 4` est invalide.
+- `@styleset`
+  - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : `ident1: 2 4 12 1` correspondra aux valeurs OpenType `ss02`, `ss04`, `ss12`, `ss01`. Les valeurs supérieures à `99` sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées.
+- `@character-variant`
+  - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : `ident1: 2`  correspond à `cv02=1` et `ident2: 2 4` correspond à  `cv02)4`, en revanche `ident2: 2 4 5` est invalide.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.font-feature-values")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété {{cssxref("font-variant-alternates")}} qui utilise la valeur définie par cette règle @.</li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                        | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.font-feature-values")}}
+
+## Voir aussi
+
+- La propriété {{cssxref("font-variant-alternates")}} qui utilise la valeur définie par cette règle @.
diff --git a/files/fr/web/css/@import/index.md b/files/fr/web/css/@import/index.md
index 41f8a5dd52..b2d3f300b4 100644
--- a/files/fr/web/css/@import/index.md
+++ b/files/fr/web/css/@import/index.md
@@ -7,73 +7,46 @@ tags:
   - Règle @
 translation_of: Web/CSS/@import
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> <strong><code>@import</code></strong> est utilisée afin d'importer des règles à partir d'autres feuilles de style. Ces règles @ doivent être utilisées avant toutes les autres règles, à l'exception de {{cssxref("@charset")}}. <code>@import</code> n'est pas <a href="/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS">une instruction imbriquée</a> et ne peut donc pas être utilisée à l'intérieur <a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">de groupe de règles conditionnelles</a>.</p>
+La [règle @](/fr/docs/Web/CSS/Règles_@) **`@import`** est utilisée afin d'importer des règles à partir d'autres feuilles de style. Ces règles @ doivent être utilisées avant toutes les autres règles, à l'exception de {{cssxref("@charset")}}. `@import` n'est pas [une instruction imbriquée](/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS) et ne peut donc pas être utilisée à l'intérieur [de groupe de règles conditionnelles](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe).
 
-<pre class="brush:css no-line-numbers">@import url("fineprint.css") print;
+```css
+@import url("fineprint.css") print;
 @import url("bluish.css") speech;
 @import 'custom.css';
 @import url("chrome://communicator/skin/");
 @import "common.css" screen;
 @import url('landscape.css') screen and (orientation:landscape);
-</pre>
+```
 
-<p>Afin que les agents utilisateurs évitent de récupérer des ressources pour des types de média qui ne sont pas pris en charge, les auteurs peuvent définir des règles <code>@import</code> spécifiques à chaque média. Ces imports conditionnels comportent une liste de <a href="/fr/docs/Web/CSS/Media_queries">requête média</a> séparées par des virgules, situées après l'URL. Si aucune requête média n'est indiquée, l'import est inconditionnel. Cela aura le même effet que d'utiliser la requête média <code>all</code>.</p>
+Afin que les agents utilisateurs évitent de récupérer des ressources pour des types de média qui ne sont pas pris en charge, les auteurs peuvent définir des règles `@import` spécifiques à chaque média. Ces imports conditionnels comportent une liste de [requête média](/fr/docs/Web/CSS/Media_queries) séparées par des virgules, situées après l'URL. Si aucune requête média n'est indiquée, l'import est inconditionnel. Cela aura le même effet que d'utiliser la requête média `all`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">@import <em>url</em>;
-@import <em>url</em> <em>liste-requetes-media</em>;
-</pre>
+    @import url;
+    @import url liste-requetes-media;
 
-<p>où on a :</p>
+où on a :
 
-<dl>
- <dt><code>url</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;string&gt;")}} ou {{cssxref("&lt;url&gt;")}} qui représente l'emplacement de la ressource qu'on souhaite importer. L'URL peut être absolue ou relative. On notera que, pour un paquet Mozilla, l'URL ne pointe pas nécessairement vers un fichier, elle peut simplement définir le nom du paquet et la partie utilisée, le fichier approprié sera alors choisi automatiquement (e.g. <strong>chrome://communicator/skin/</strong>). <a href="/fr/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">Voir cet article</a> pour plus d'informations.</dd>
- <dt><code>liste-requetes-media</code></dt>
- <dd>Une liste de <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">requêtes média</a> séparées par des virgules qui conditionnent l'application des règles CSS pour l'URL associée. Si le navigateur ne prend en charge aucune des requêtes indiquées, il ne charge pas la ressource associée.</dd>
-</dl>
+- `url`
+  - : Une valeur de type {{cssxref("&lt;string&gt;")}} ou {{cssxref("&lt;url&gt;")}} qui représente l'emplacement de la ressource qu'on souhaite importer. L'URL peut être absolue ou relative. On notera que, pour un paquet Mozilla, l'URL ne pointe pas nécessairement vers un fichier, elle peut simplement définir le nom du paquet et la partie utilisée, le fichier approprié sera alors choisi automatiquement (e.g. **chrome://communicator/skin/**). [Voir cet article](/fr/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL) pour plus d'informations.
+- `liste-requetes-media`
+  - : Une liste de [requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries) séparées par des virgules qui conditionnent l'application des règles CSS pour l'URL associée. Si le navigateur ne prend en charge aucune des requêtes indiquées, il ne charge pas la ressource associée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}</td>
-   <td>{{Spec2('CSS3 Cascade')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Extension de la syntaxe afin de prendre en charge n'importe quelle requête média et pas uniquement <a href="/fr/docs/Web/CSS/@media#Types_de_médias">celles sur les types de média</a>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Prise en charge du type {{cssxref("&lt;string&gt;")}} pour indiquer l'URL d'une feuille de style. Il est désormais nécessaire d'insérer les règles <code>@import</code> au début du document CSS.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                                     | Commentaires                                                                                                                                                                                      |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}} | {{Spec2('CSS3 Cascade')}}         |                                                                                                                                                                                                   |
+| {{SpecName('CSS3 Media Queries', '#media0', '@import')}}     | {{Spec2('CSS3 Media Queries')}} | Extension de la syntaxe afin de prendre en charge n'importe quelle requête média et pas uniquement [celles sur les types de média](/fr/docs/Web/CSS/@media#Types_de_médias).                      |
+| {{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}} | {{Spec2('CSS2.1')}}                 | Prise en charge du type {{cssxref("&lt;string&gt;")}} pour indiquer l'URL d'une feuille de style. Il est désormais nécessaire d'insérer les règles `@import` au début du document CSS. |
+| {{SpecName('CSS1', '#the-cascade', '@import')}}                 | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.import")}}</p>
+{{Compat("css.at-rules.import")}}
diff --git a/files/fr/web/css/@keyframes/index.md b/files/fr/web/css/@keyframes/index.md
index 9856d8f815..a2a57a15d6 100644
--- a/files/fr/web/css/@keyframes/index.md
+++ b/files/fr/web/css/@keyframes/index.md
@@ -7,11 +7,12 @@ tags:
   - Règle @
 translation_of: Web/CSS/@keyframes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle </a><strong><code>@keyframes</code></strong> permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec <a href="/fr/docs/Web/CSS/CSS_Transitions">les transitions</a>.</p>
+La [règle ](/fr/docs/Web/CSS/R%C3%A8gles_@)**`@keyframes`** permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec [les transitions](/fr/docs/Web/CSS/CSS_Transitions).
 
-<pre class="brush: css no-line-numbers">@keyframes slidein {
+```css
+@keyframes slidein {
   from {
     margin-left: 100%;
     width: 300%;
@@ -21,47 +22,50 @@ translation_of: Web/CSS/@keyframes
     margin-left: 0%;
     width: 100%;
   }
-}</pre>
+}
+```
 
-<p>Il est possible de manipuler la règle @ <code>@keyframes</code> via JavaScript et le CSSOM, notamment avec l'interface {{domxref("CSSKeyframesRule")}}.</p>
+Il est possible de manipuler la règle @ `@keyframes` via JavaScript et le CSSOM, notamment avec l'interface {{domxref("CSSKeyframesRule")}}.
 
-<p>Afin d'utiliser ces règles, on créera une règle <code>@keyframes</code> avec un nom pour chaque étape et on utilisera ce nom avec la propriété {{cssxref("animation-name")}} afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle <code>@keyframes</code> contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape..</p>
+Afin d'utiliser ces règles, on créera une règle `@keyframes` avec un nom pour chaque étape et on utilisera ce nom avec la propriété {{cssxref("animation-name")}} afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle `@keyframes` contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape..
 
-<p>Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement.</p>
+Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement.
 
-<h3 id="Validité_de_la_liste_des_étapes">Validité de la liste des étapes</h3>
+### Validité de la liste des étapes
 
-<p>Si une liste d'étapes ne spécifie pas le début (<code>0%</code>/<code>from</code>) ou la fin (<code>100%</code>/<code>to</code>) d'une animation, le navigateur va utiliser les styles de l'élement définis par ailleurs. C'est assez pratique pour animer un élément depuis et vers son état initial.</p>
+Si une liste d'étapes ne spécifie pas le début (`0%`/`from`) ou la fin (`100%`/`to`) d'une animation, le navigateur va utiliser les styles de l'élement définis par ailleurs. C'est assez pratique pour animer un élément depuis et vers son état initial.
 
-<p>Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées.</p>
+Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées.
 
-<h3 id="Résolution_des_doublons">Résolution des doublons</h3>
+### Résolution des doublons
 
-<p>Si plusieurs règles <code>@keyframes</code> existent avec le même nom, c'est la dernière qui est utilisée. Les règles <code>@keyframes</code> ne forment pas de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom.</p>
+Si plusieurs règles `@keyframes` existent avec le même nom, c'est la dernière qui est utilisée. Les règles `@keyframes` ne forment pas de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom.
 
-<p>Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement.</p>
+Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement.
 
-<h3 id="Gestion_des_propriétés_absentes">Gestion des propriétés absentes</h3>
+### Gestion des propriétés absentes
 
-<p>Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation :</p>
+Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation :
 
-<pre class="brush: css">@keyframes identifier {
+```css
+@keyframes identifier {
   0% { top: 0; left: 0; }
   30% { top: 50px; }
   68%, 72% { left: 50px; }
   100% { top: 100px; left: 100%; }
 }
-</pre>
+```
 
-<p>Ici, la propriété {{cssxref("top")}} est animée en passant par les étapes <code>0%</code>, <code>30%</code> et <code>100%</code>. Quant à {{cssxref("left")}}, elle est animée aux étapes <code>0%</code>, <code>68%</code> , <code>72%</code> et <code>100%</code>.</p>
+Ici, la propriété {{cssxref("top")}} est animée en passant par les étapes `0%`, `30%` et `100%`. Quant à {{cssxref("left")}}, elle est animée aux étapes `0%`, `68%` , `72%` et `100%`.
 
-<p>Seules les propriétés qui sont définies sur les étapes de début (<code>0%</code>) et de fin (<code>100%</code>) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation.</p>
+Seules les propriétés qui sont définies sur les étapes de début (`0%`) et de fin (`100%`) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation.
 
-<h3 id="!important_dans_une_étape"><code>!important</code> dans une étape</h3>
+### `!important` dans une étape
 
-<p>Les déclarations qui utilisent <code>!important</code> dans une description d'étape sont ignorées</p>
+Les déclarations qui utilisent `!important` dans une description d'étape sont ignorées
 
-<pre class="brush: css">@keyframes important1 {
+```css
+@keyframes important1 {
   from { margin-top: 50px; }
   50%  { margin-top: 150px !important; } /* ignorée */
   to   { margin-top: 100px; }
@@ -73,32 +77,31 @@ translation_of: Web/CSS/@keyframes
   to   { margin-top: 150px !important; /* ignorée */
          margin-bottom: 50px; }
 }
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;identifier&gt;</code></dt>
- <dd>Un nom ({{cssxref("custom-ident")}}) qui permet d'identifier la liste d'étapes. Cela doit être <a href="/fr/docs/Web/CSS/custom-ident">un identifiant valide selon la syntaxe CSS</a>.</dd>
- <dt><code>from</code></dt>
- <dd>Indique le point de départ de l'animation (correspond à un avancement de <code>0%</code>).</dd>
- <dt><code>to</code></dt>
- <dd>Indique la fin de l'animation (correspond à un avancement de <code>100%</code>).</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>Le pourcentage d'avancement de l'animation auquel l'étape décrite s'applique.</dd>
-</dl>
+- `<identifier>`
+  - : Un nom ({{cssxref("custom-ident")}}) qui permet d'identifier la liste d'étapes. Cela doit être [un identifiant valide selon la syntaxe CSS](/fr/docs/Web/CSS/custom-ident).
+- `from`
+  - : Indique le point de départ de l'animation (correspond à un avancement de `0%`).
+- `to`
+  - : Indique la fin de l'animation (correspond à un avancement de `100%`).
+- {{cssxref("&lt;percentage&gt;")}}
+  - : Le pourcentage d'avancement de l'animation auquel l'étape décrite s'applique.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 25s;
   animation-name: slidein;
 }
@@ -118,52 +121,40 @@ translation_of: Web/CSS/@keyframes
     margin-left: 0%;
     width: 100%;
   }
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Le Chat grimaça en apercevant Alice. Elle trouva qu’il
   avait l’air bon enfant, et cependant il avait de
   très longues griffes et une grande rangée de dents ;
   aussi comprit-elle qu’il fallait le traiter avec
   respect.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","500","300")}}</p>
+{{EmbedLiveSample("Exemples","500","300")}}
 
-<h3 id="Plus_dexemples">Plus d'exemples ?</h3>
+### Plus d'exemples ?
 
-<p>Regardez <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Utiliser les animations CSS</a> pour de plus amples exemples.</p>
+Regardez [Utiliser les animations CSS](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS) pour de plus amples exemples.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#keyframes', '@keyframes')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#keyframes', '@keyframes')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.keyframes")}}</p>
+{{Compat("css.at-rules.keyframes")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
+- {{domxref("AnimationEvent")}}
diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md
index 10c33af0f5..9ec09a1821 100644
--- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md
+++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md
@@ -9,38 +9,33 @@ tags:
   - Non-standard
 translation_of: Web/CSS/@media/-moz-device-pixel-ratio
 ---
-<div>{{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}}</div>
+{{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}}
 
-<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia">caractéristique média</a> <strong><code>-moz-device-pixel-ratio</code></strong>, associée à <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.</p>
+La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia) **`-moz-device-pixel-ratio`**, associée à [`@media`](/fr/docs/Web/CSS/@media "The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."), est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.
 
-<div class="warning">
-<p><strong>Attention :</strong> Ne pas utiliser cette fonctionnalité ! La caractéristique <code><a href="/fr/docs/Web/CSS/@media/resolution">resolution</a></code> et l'unité <code>dppx</code> permettent d'obtenir le même mécanisme.<br>
- <br>
- <code>-moz-device-pixel-ratio</code> peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et <code>-webkit-device-pixel-ratio</code> peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge <code>dppx</code>. Par exemple :</p>
+> **Attention :** Ne pas utiliser cette fonctionnalité ! La caractéristique [`resolution`](/fr/docs/Web/CSS/@media/resolution) et l'unité `dppx` permettent d'obtenir le même mécanisme.
+>
+> `-moz-device-pixel-ratio` peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et `-webkit-device-pixel-ratio` peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge `dppx`. Par exemple :
+>
+> ```css
+> @media (-webkit-min-device-pixel-ratio: 2), /* Navigateurs basés sur Webkit */
+>        (min--moz-device-pixel-ratio: 2),    /* Anciens Firefox (avant Firefox 16) */
+>        (min-resolution: 2dppx),             /* La méthode standard */
+>        (min-resolution: 192dpi)             /* Utilisée si dppx n'est pas gérée */
+> ```
+>
+> Voir [cet article du CSSWG](https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) pour les bonnes pratiques quant à la compatibilité de `resolution` et `dppx`.
 
-<pre class="brush: css">@media (-webkit-min-device-pixel-ratio: 2), /* Navigateurs basés sur Webkit */
-       (min--moz-device-pixel-ratio: 2),    /* Anciens Firefox (avant Firefox 16) */
-       (min-resolution: 2dppx),             /* La méthode standard */
-       (min-resolution: 192dpi)             /* Utilisée si dppx n'est pas gérée */ </pre>
+> **Note :** Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées  `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`.
 
-<p>Voir <a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">cet article du CSSWG</a> pour les bonnes pratiques quant à la compatibilité de <code>resolution</code> et <code>dppx</code>.</p>
-</div>
+## Syntaxe
 
-<div class="note">
-  <p><strong>Note :</strong> Cette caractéristique est également implémentée par Webkit et <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 pour Windows Phone 8.1</a> sous le nom <code>-webkit-device-pixel-ratio</code>. Les versions préfixées pour les seuils minimal / maximal sont intitulées <code>min--moz-device-pixel-ratio</code> et <code>max--moz-device-pixel-ratio</code> sous Gecko, tandis que sous Webkit, elles sont intitulées  <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</p>
-</div>
+- {{cssxref("&lt;number&gt;")}}
+  - : Le nombre de pixels physiques pour un pixel CSS.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+**Média :** {{cssxref("Media/Visual")}}
+**Gestion des préfixes min/max :** Oui
 
-<dl>
- <dt>{{cssxref("&lt;number&gt;")}}</dt>
- <dd>Le nombre de pixels physiques pour un pixel CSS.</dd>
-</dl>
+## Compatibilité des navigateurs
 
-<p><br>
- <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
- <strong>Gestion des préfixes min/max :</strong> Oui</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}</p>
+{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}
diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.md b/files/fr/web/css/@media/-ms-high-contrast/index.md
index 814c43f592..746cd6a87c 100644
--- a/files/fr/web/css/@media/-ms-high-contrast/index.md
+++ b/files/fr/web/css/@media/-ms-high-contrast/index.md
@@ -10,44 +10,37 @@ tags:
 translation_of: Web/CSS/@media/-ms-high-contrast
 original_slug: Web/CSS/-ms-high-contrast
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#cibler_des_caract%c3%a9ristiques_m%c3%a9dia">caractéristique média</a> <code><strong>-ms-high-contrast</strong></code>, relative à la règle @ <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>, est une <a href="/en-US/docs/Web/CSS/Microsoft_extensions">extension Microsoft </a>qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.</p>
+La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#cibler_des_caract%c3%a9ristiques_m%c3%a9dia) **`-ms-high-contrast`**, relative à la règle @ [`@media`](/fr/docs/Web/CSS/@media), est une [extension Microsoft ](/en-US/docs/Web/CSS/Microsoft_extensions)qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.
 
-<p>Cette caractéristique média s'applique aux média de type matriciel (<em>bitmap</em>). Elle ne gère pas les préfixes <code>min</code> et <code>max</code>.</p>
+Cette caractéristique média s'applique aux média de type matriciel (_bitmap_). Elle ne gère pas les préfixes `min` et `max`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique média <strong><code>-ms-high-contrast</code></strong> est définie avec une des valeurs définies ci-après.</p>
+La caractéristique média **`-ms-high-contrast`** est définie avec une des valeurs définies ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>active</code></dt>
- <dd>
- <p>Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé, quel que soit la variation de couleur.</p>
- </dd>
- <dt><code>none</code>{{deprecated_inline}}</dt>
- <dd>Cette valeur n'est plus prise en charge par Edge.</dd>
- <dt><code>black-on-white</code></dt>
- <dd>
- <p>Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en noir sur blanc.</p>
- </dd>
- <dt><code>white-on-black</code></dt>
- <dd>
- <p>Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en blanc sur noir.</p>
- </dd>
-</dl>
+- `active`
+  - : Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé, quel que soit la variation de couleur.
+- `none`{{deprecated_inline}}
+  - : Cette valeur n'est plus prise en charge par Edge.
+- `black-on-white`
+  - : Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en noir sur blanc.
+- `white-on-black`
+  - : Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en blanc sur noir.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Les déclarations suivantes s'appliqueront respectivement sur des applications utilisées avec un mode de contraste élevé, avec une variation en noir sur blanc et enfin avec une variation en blanc sur noir.</p>
+Les déclarations suivantes s'appliqueront respectivement sur des applications utilisées avec un mode de contraste élevé, avec une variation en noir sur blanc et enfin avec une variation en blanc sur noir.
 
-<pre class="brush: css">@media screen and (-ms-high-contrast: active) {
+```css
+@media screen and (-ms-high-contrast: active) {
   /* Règles utilisées dans tous les cas si
      le contraste élevé est utilisé */
 }
@@ -57,16 +50,16 @@ original_slug: Web/CSS/-ms-high-contrast
 @media screen and (-ms-high-contrast: white-on-black) {
   div { background-image: url('image-wb.png'); }
 }
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<p>Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.</p>
+Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>À partir de Microsoft Edge, <code><strong>-ms-high-contrast: none</strong></code> n'est plus pris en charge.</p>
+À partir de Microsoft Edge, **`-ms-high-contrast: none`** n'est plus pris en charge.
 
-<p>La caractéristique média <code><strong>-ms-high-contrast</strong></code> fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}.</p>
+La caractéristique média **`-ms-high-contrast`** fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}.
 
-<p>La caractéristique média <code><strong>-ms-high-contrast</strong></code> a été introduite avec Windows 8.</p>
+La caractéristique média **`-ms-high-contrast`** a été introduite avec Windows 8.
diff --git a/files/fr/web/css/@media/-webkit-animation/index.md b/files/fr/web/css/@media/-webkit-animation/index.md
index e283f61a62..d14a4b5549 100644
--- a/files/fr/web/css/@media/-webkit-animation/index.md
+++ b/files/fr/web/css/@media/-webkit-animation/index.md
@@ -8,29 +8,29 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/-webkit-animation
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p><strong><code>-webkit-animation</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui permet d'indiquer si les animationsCSS ({{cssxref("animation")}}) sont prises en charge dans leurs versions préfixées. Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.</p>
+**`-webkit-animation`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média) booléenne non-standard qui permet d'indiquer si les animationsCSS ({{cssxref("animation")}}) sont prises en charge dans leurs versions préfixées. Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@media (-webkit-animation) {
+```css
+@media (-webkit-animation) {
   /* CSS à utiliser si les animations sont prises en charge */
-} </pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a>.</p>
+Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3).
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.-webkit-animation")}}</p>
+{{Compat("css.at-rules.media.-webkit-animation")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-webkit-transform-3d")}}</li>
- <li>{{cssxref("-webkit-transform-2d")}}</li>
- <li>{{cssxref("-webkit-transition")}}</li>
- <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
-</ul>
+- {{cssxref("-webkit-transform-3d")}}
+- {{cssxref("-webkit-transform-2d")}}
+- {{cssxref("-webkit-transition")}}
+- [Page de test sur quirksmode.org](http://www.quirksmode.org/css/tests/mediaqueries/animation.html)
diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md
index 3d96ba5464..023c96d1d2 100644
--- a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md
+++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.md
@@ -8,30 +8,27 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p><strong><code>-webkit-device-pixel-ratio</code></strong> est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.</p>
+**`-webkit-device-pixel-ratio`** est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.
 
-<p>Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter <a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">un pixel CSS (<code>px</code>)</a>. Bien que la valeur soit de type {{cssxref("&lt;number&gt;")}}, sans unité donc, l'unité implicite est <a href="/fr/docs/Web/CSS/resolution#unités"><code>dppx</code></a>.</p>
+Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter [un pixel CSS (`px`)](/fr/docs/Web/CSS/length#unités_de_longueur_absolues). Bien que la valeur soit de type {{cssxref("&lt;number&gt;")}}, sans unité donc, l'unité implicite est [`dppx`](/fr/docs/Web/CSS/resolution#unités).
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.</p>
-</div>
+> **Attention :** Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p><strong><code>-webkit-device-pixel-ratio</code></strong> est une valleur décrivant un intervalle. On peut également utiliser <strong><code>-webkit-min-device-pixel-ratio</code></strong> et <strong><code>-webkit-max-device-pixel-ratio</code></strong> pour fixer un seuil minimum/maximum.</p>
+**`-webkit-device-pixel-ratio`** est une valleur décrivant un intervalle. On peut également utiliser **`-webkit-min-device-pixel-ratio`** et **`-webkit-max-device-pixel-ratio`** pour fixer un seuil minimum/maximum.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;number&gt;")}}</dt>
- <dd>Le nombre de pixels physiques pour chaque pixel (<code><a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">px</a></code>) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est <code><a href="/fr/docs/Web/CSS/resolution#dppx">dppx</a></code>.</dd>
-</dl>
+- {{cssxref("&lt;number&gt;")}}
+  - : Le nombre de pixels physiques pour chaque pixel ([`px`](/fr/docs/Web/CSS/length#unités_de_longueur_absolues)) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est [`dppx`](/fr/docs/Web/CSS/resolution#dppx).
 
-<h2 id="Implémentation">Implémentation</h2>
+## Implémentation
 
-<pre class="brush: css">/* Unité dppx implicite */
+```css
+/* Unité dppx implicite */
 @media (-webkit-min-device-pixel-ratio: 2) { ... }
 /* équivalent à */
 @media (min-resolution: 2dppx) { ... }
@@ -40,13 +37,14 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
 @media (-webkit-max-device-pixel-ratio: 2) { ... }
 /* équivalent à */
 @media (max-resolution: 2dppx) { ... }
-</pre>
+```
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* Résolution exacte */
+```css
+/* Résolution exacte */
 @media (-webkit-device-pixel-ratio: 1) {
   p {
     color: red;
@@ -65,52 +63,35 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
   p {
     background: yellow;
   }
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;Voici un test pour la densité de pixel de votre appareil.&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>Définition initiale dans un standard.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference 'media query extensions'.</a></td>
-   <td>Documentation non-officielle, non-standard.</td>
-   <td>Documentation initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("@media/resolution","resolution")}}</li>
- <li>{{cssxref("-webkit-transition")}}</li>
- <li>{{cssxref("-webkit-transform-3d")}}</li>
- <li>{{cssxref("-webkit-transform-2d")}}</li>
- <li>{{cssxref("-webkit-animation")}}</li>
- <li><a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">Article du W3C pour éviter le préfixe</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<p>Voici un test pour la densité de pixel de votre appareil.</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                                                                                                                                                                  | État                                        | Commentaires                          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------- |
+| {{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}                                                                                           | {{Spec2('Compat')}}                    | Définition initiale dans un standard. |
+| [Safari CSS Reference 'media query extensions'.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) | Documentation non-officielle, non-standard. | Documentation initiale.               |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}
+
+## Voir aussi
+
+- {{cssxref("@media/resolution","resolution")}}
+- {{cssxref("-webkit-transition")}}
+- {{cssxref("-webkit-transform-3d")}}
+- {{cssxref("-webkit-transform-2d")}}
+- {{cssxref("-webkit-animation")}}
+- [Article du W3C pour éviter le préfixe](https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/)
diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.md b/files/fr/web/css/@media/-webkit-transform-2d/index.md
index 94ab2e5e51..90a9cf0635 100644
--- a/files/fr/web/css/@media/-webkit-transform-2d/index.md
+++ b/files/fr/web/css/@media/-webkit-transform-2d/index.md
@@ -8,27 +8,23 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/-webkit-transform-2d
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p><strong><code>-webkit-transform-2d</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui indique si les transformations CSS en 2D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.</p>
+**`-webkit-transform-2d`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média) booléenne non-standard qui indique si les transformations CSS en 2D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.
 
-<div class="note">
-<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.</p>
-</div>
+> **Note :** Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a> .</p>
+Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) .
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.-webkit-transform-2d")}}</p>
+{{Compat("css.at-rules.media.-webkit-transform-2d")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-webkit-transition")}}</li>
- <li>{{cssxref("-webkit-transform-3d")}}</li>
- <li>{{cssxref("-webkit-animation")}}</li>
- <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
-</ul>
+- {{cssxref("-webkit-transition")}}
+- {{cssxref("-webkit-transform-3d")}}
+- {{cssxref("-webkit-animation")}}
+- [Page de test sur quirksmode.org](http://www.quirksmode.org/css/tests/mediaqueries/animation.html)
diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.md b/files/fr/web/css/@media/-webkit-transform-3d/index.md
index 887649670d..e6f8af8642 100644
--- a/files/fr/web/css/@media/-webkit-transform-3d/index.md
+++ b/files/fr/web/css/@media/-webkit-transform-3d/index.md
@@ -8,17 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/-webkit-transform-3d
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p><strong><code>-webkit-transform-3d</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui indique si les transformations CSS en 3D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.</p>
+**`-webkit-transform-3d`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média) booléenne non-standard qui indique si les transformations CSS en 3D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.
 
-<div class="note">
-<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.</p>
-</div>
+> **Note :** Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.
 
-<h2 id="Exmple">Exmple</h2>
+## Exmple
 
-<pre class="brush: css">@media (-webkit-transform-3d) {
+```css
+@media (-webkit-transform-3d) {
   .toto {
     transform-style: preserve-3d;
   }
@@ -28,41 +27,23 @@ translation_of: Web/CSS/@media/-webkit-transform-3d
   .toto {
     transform-style: preserve-3d;
   }
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>Définition initiale dans un standard.</td>
-  </tr>
-  <tr>
-   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference media query extensions in that document.</a></td>
-   <td>Documentation non-officielle, non-standard.</td>
-   <td>Documentation initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                                                                                                 | État                                        | Commentaires                          |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------------------------------------- |
+| {{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}                                                                                                                          | {{Spec2('Compat')}}                    | Définition initiale dans un standard. |
+| [Safari CSS Reference media query extensions in that document.](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) | Documentation non-officielle, non-standard. | Documentation initiale.               |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.-webkit-transform-3d")}}</p>
+{{Compat("css.at-rules.media.-webkit-transform-3d")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li>
- <li>{{cssxref("@media/-webkit-transition", "-webkit-transition")}}</li>
- <li>{{cssxref("@media/-webkit-animation", "-webkit-animation")}}</li>
- <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
-</ul>
+- {{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}
+- {{cssxref("@media/-webkit-transition", "-webkit-transition")}}
+- {{cssxref("@media/-webkit-animation", "-webkit-animation")}}
+- [Page de test sur quirksmode.org](http://www.quirksmode.org/css/tests/mediaqueries/animation.html)
diff --git a/files/fr/web/css/@media/-webkit-transition/index.md b/files/fr/web/css/@media/-webkit-transition/index.md
index 4a408bf765..bc50ddcdbb 100644
--- a/files/fr/web/css/@media/-webkit-transition/index.md
+++ b/files/fr/web/css/@media/-webkit-transition/index.md
@@ -9,41 +9,39 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/-webkit-transition
 ---
-<div>{{CSSRef}}{{Non-standard_header}}{{obsolete_header}}</div>
+{{CSSRef}}{{Non-standard_header}}{{obsolete_header}}
 
-<p><strong><code>-webkit-transition</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui permet d'indiquer si les transitions CSS ({{cssxref("transition")}}) sont prises en charge dans leurs versions préfixées.</p>
+**`-webkit-transition`** est une [caractéristique média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média) booléenne non-standard qui permet d'indiquer si les transitions CSS ({{cssxref("transition")}}) sont prises en charge dans leurs versions préfixées.
 
-<div class="note">
-<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.</p>
-</div>
+> **Note :** Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.
 
-<h2 id="Privilégier_supports">Privilégier <code>@supports</code></h2>
+## Privilégier `@supports`
 
-<p>S'il vous faut déterminer si les transitions CSS sont prises en charges, évitez d'utiliser <code>-webkit-transition</code>. En lieu et place, on utilisera la règle @ {{cssxref("@supports")}} :</p>
+S'il vous faut déterminer si les transitions CSS sont prises en charges, évitez d'utiliser `-webkit-transition`. En lieu et place, on utilisera la règle @ {{cssxref("@supports")}} :
 
-<pre class="brush: css">@supports(transition: initial) {
+```css
+@supports(transition: initial) {
   /* Les règles CSS à utiliser si   */
   /* les transitions sont prises en */
   /* charge. */
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a>.</p>
+Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3).
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.-webkit-transition")}}</p>
+{{Compat("css.at-rules.media.-webkit-transition")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les media queries</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></li>
- <li>{{cssxref("@supports")}}</li>
- <li>{{cssxref("transition")}}</li>
- <li>{{cssxref("-webkit-transform-3d")}}</li>
- <li>{{cssxref("-webkit-transform-2d")}}</li>
- <li>{{cssxref("-webkit-animation")}}</li>
- <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
-</ul>
+- [Utiliser les media queries](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries)
+- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS)
+- {{cssxref("@supports")}}
+- {{cssxref("transition")}}
+- {{cssxref("-webkit-transform-3d")}}
+- {{cssxref("-webkit-transform-2d")}}
+- {{cssxref("-webkit-animation")}}
+- [Page de test sur quirksmode.org](http://www.quirksmode.org/css/tests/mediaqueries/animation.html)
diff --git a/files/fr/web/css/@media/any-hover/index.md b/files/fr/web/css/@media/any-hover/index.md
index 27509c77c4..6eba582600 100644
--- a/files/fr/web/css/@media/any-hover/index.md
+++ b/files/fr/web/css/@media/any-hover/index.md
@@ -7,64 +7,51 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/any-hover
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>any-hover</code></strong> est une caractéristique média CSS qui permet de vérifier si un mécanisme de saisie/d'entrée permet à l'utilisateur de survoler les éléments.</p>
+**`any-hover`** est une caractéristique média CSS qui permet de vérifier si un mécanisme de saisie/d'entrée permet à l'utilisateur de survoler les éléments.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>any-hover</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+La caractéristique `any-hover` est définie avec un mot-clé parmi ceux de la liste ci-après.
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Parmi les mécanismes de saisi, aucun ne permet de survoler les éléments (ou il n'existe aucun dispositif de pointage).</dd>
- <dt><code>hover</code></dt>
- <dd>Un ou plusieurs mécanismes de saisie permettent de survoler le contenu simplement.</dd>
-</dl>
+- `none`
+  - : Parmi les mécanismes de saisi, aucun ne permet de survoler les éléments (ou il n'existe aucun dispositif de pointage).
+- `hover`
+  - : Un ou plusieurs mécanismes de saisie permettent de survoler le contenu simplement.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;a href="#"&gt;Essayez de me survoler !&lt;/a&gt;</pre>
+```html
+<a href="#">Essayez de me survoler !</a>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@media (any-hover: hover) {
+```css
+@media (any-hover: hover) {
   a:hover {
     background: yellow;
   }
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.any-hover")}}</p>
+{{Compat("css.at-rules.media.any-hover")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/@media/hover">La caractéristique média <code>hover</code></a></li>
-</ul>
+- [La caractéristique média `hover`](/fr/docs/Web/CSS/@media/hover)
diff --git a/files/fr/web/css/@media/any-pointer/index.md b/files/fr/web/css/@media/any-pointer/index.md
index a2ef25ec7c..bff694bf34 100644
--- a/files/fr/web/css/@media/any-pointer/index.md
+++ b/files/fr/web/css/@media/any-pointer/index.md
@@ -7,43 +7,40 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/any-pointer
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>any-pointer</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer si un des mécanismes de saisie/d'entrée disponibles est un dispositif de pointage et sa précision le cas échéant.</p>
+**`any-pointer`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer si un des mécanismes de saisie/d'entrée disponibles est un dispositif de pointage et sa précision le cas échéant.
 
-<div class="note">
-<p><strong>Note :</strong> Si on souhaite tester la précision du mécanisme de pointage <em>principal</em>, on pourra utiliser la caractéristique <code><a href="/fr/docs/Web/CSS/@media/pointer">pointer</a></code> à la place.</p>
-</div>
+> **Note :** Si on souhaite tester la précision du mécanisme de pointage _principal_, on pourra utiliser la caractéristique [`pointer`](/fr/docs/Web/CSS/@media/pointer) à la place.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>any-pointer</code> est définie comme un mot-clé parmi ceux de la liste ci-après.</p>
+La caractéristique `any-pointer` est définie comme un mot-clé parmi ceux de la liste ci-après.
 
-<dl>
- <dt><code>none</code></dt>
- <dd>L'appareil ne dispose d'aucun dispositif de pointage.</dd>
- <dt><code>coarse</code></dt>
- <dd>Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est limitée.</dd>
- <dt><code>fine</code></dt>
- <dd>Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.</dd>
-</dl>
+- `none`
+  - : L'appareil ne dispose d'aucun dispositif de pointage.
+- `coarse`
+  - : Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est limitée.
+- `fine`
+  - : Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.
 
-<div class="note">
-<p><strong>Note :</strong> Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur <code>none</code> ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.</p>
-</div>
+> **Note :** Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur `none` ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.</p>
+Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
-&lt;label for="test"&gt;Coucou !&lt;/label&gt;</pre>
+```html
+<input id="test" type="checkbox" />
+<label for="test">Coucou !</label>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input[type="checkbox"]:checked {
+```css
+input[type="checkbox"]:checked {
   background: gray;
 }
 
@@ -67,37 +64,23 @@ translation_of: Web/CSS/@media/any-pointer
     height: 30px;
     border: 2px solid red;
   }
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.any-pointer")}}</p>
+{{Compat("css.at-rules.media.any-pointer")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/@media/pointer">La caractéristique média <code>pointer</code></a></li>
-</ul>
+- [La caractéristique média `pointer`](/fr/docs/Web/CSS/@media/pointer)
diff --git a/files/fr/web/css/@media/aspect-ratio/index.md b/files/fr/web/css/@media/aspect-ratio/index.md
index 0999d4619e..8c2c20469b 100644
--- a/files/fr/web/css/@media/aspect-ratio/index.md
+++ b/files/fr/web/css/@media/aspect-ratio/index.md
@@ -7,60 +7,44 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/aspect-ratio
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>aspect-ratio</code></strong> est une caractéristique média CSS dont la valeur correspond au ratio ({{cssxref("&lt;ratio&gt;")}}) entre la largeur et la hauteur de la zone d'affichage (<em>viewport</em>).</p>
+**`aspect-ratio`** est une caractéristique média CSS dont la valeur correspond au ratio ({{cssxref("&lt;ratio&gt;")}}) entre la largeur et la hauteur de la zone d'affichage (_viewport_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>aspect-ratio</code> est définie avec un ratio (type CSS {{cssxref("&lt;ratio&gt;")}}) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-aspect-ratio</code></strong> et <code><strong>max-aspect-ratio</strong></code> afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.</p>
+La caractéristique `aspect-ratio` est définie avec un ratio (type CSS {{cssxref("&lt;ratio&gt;")}}) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-aspect-ratio`** et **`max-aspect-ratio`** afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="exemples_de_valeurs_pour_aspect-ratio">Exemples de valeurs pour aspect-ratio</h3>
+### Exemples de valeurs pour aspect-ratio
 
-<pre class="brush: css">
+```css
 aspect-ratio: 1 / 1;
 aspect-ratio: 16 / 9;
-</pre>
+```
 
-<h2 id="Correspondance_entre_width_et_height_et_aspect-ratio">Correspondance entre width et height et aspect-ratio</h2>
+## Correspondance entre width et height et aspect-ratio
 
-<p>Les navigateurs ont ajouté une propriété <code>aspect-ratio</code> interne qui s'applique aux <a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés</a> et aux autres éléments associés qui acceptent des attributs <code>width</code> et <code>height</code>. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur.</p>
+Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) et aux autres éléments associés qui acceptent des attributs `width` et `height`. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur.
 
-<p>Pour Firefox, la feuille de style interne ressemble à :</p>
+Pour Firefox, la feuille de style interne ressemble à :
 
-<pre class="brush: css">
+```css
 img, input[type="image"], video, embed, iframe, marquee, object, table {
   aspect-ratio: attr(width) / attr(height);
-}</pre>
+}
+```
 
-<p>Pour en savoir plus, vous pouvez consulter <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/">Définir la hauteur et largeur des images redevient important (en anglais)</a>.</p>
+Pour en savoir plus, vous pouvez consulter [Définir la hauteur et largeur des images redevient important (en anglais)](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}} | {{Spec2('CSS4 Media Queries')}} | Aucune modification. |
+| {{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p>
+{{Compat("css.at-rules.media.aspect-ratio")}}
diff --git a/files/fr/web/css/@media/aural/index.md b/files/fr/web/css/@media/aural/index.md
index 3de1642213..af70dab5b3 100644
--- a/files/fr/web/css/@media/aural/index.md
+++ b/files/fr/web/css/@media/aural/index.md
@@ -8,35 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/aural
 ---
-<div>{{CSSRef}}{{obsolete_header("6.0")}} {{deprecated_header}}</div>
+{{CSSRef}}{{obsolete_header("6.0")}} {{deprecated_header}}
 
-<p>Un <a href="/fr/docs/Web/CSS/@media#Groupes_de_médias">groupe de médias</a> défini par les standards <a href="/fr/docs/Web/CSS">CSS</a>.</p>
+Un [groupe de médias](/fr/docs/Web/CSS/@media#Groupes_de_médias) défini par les standards [CSS](/fr/docs/Web/CSS).
 
-<div class="note">
-<p><strong>Note :</strong> Ce groupe de médias n'a jamais été complètement implémenté dans Gecko et a été supprimé dans {{Gecko("6.0")}}. C'est le type de média <a href="/fr/docs/Web/CSS/@media#speech">speech</a> qui le remplace.</p>
-</div>
+> **Note :** Ce groupe de médias n'a jamais été complètement implémenté dans Gecko et a été supprimé dans {{Gecko("6.0")}}. C'est le type de média [speech](/fr/docs/Web/CSS/@media#speech) qui le remplace.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://www.w3.org/TR/CSS2/aural.html#q19.0">CSS Level 2</a></td>
-   <td>Dépréciation</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                              | État         | Commentaires         |
+| ---------------------------------------------------------- | ------------ | -------------------- |
+| [CSS Level 2](https://www.w3.org/TR/CSS2/aural.html#q19.0) | Dépréciation | Définition initiale. |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/@media">@media</a></li>
-</ul>
+- [@media](/fr/docs/Web/CSS/@media)
diff --git a/files/fr/web/css/@media/color-gamut/index.md b/files/fr/web/css/@media/color-gamut/index.md
index e50d76749f..2437d4344d 100644
--- a/files/fr/web/css/@media/color-gamut/index.md
+++ b/files/fr/web/css/@media/color-gamut/index.md
@@ -7,60 +7,49 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/color-gamut
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>color-gamut</code></strong> est une caractéristique média dont la valeur décrit l'intervalle approximatif des couleurs qui sont prises en charge par l'agent utilisateur et l'appareil responsable de l'affichage.</p>
+**`color-gamut`** est une caractéristique média dont la valeur décrit l'intervalle approximatif des couleurs qui sont prises en charge par l'agent utilisateur et l'appareil responsable de l'affichage.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>color-gamut</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+La caractéristique `color-gamut` est définie avec un mot-clé parmi ceux de la liste ci-après.
 
-<dl>
- <dt><code>srgb</code></dt>
- <dd>L'appareil d'affichage prend approximativement en charge l'espace de couleurs <a href="https://en.wikipedia.org/wiki/SRGB">sRGB</a> ou un espace plus grand. Cela correspond à la majorité des appareils d'affichage.</dd>
- <dt><code>p3</code></dt>
- <dd>L'appareil d'affichage prend approximativement en charge l'espace de couleurs spécifié par <a href="https://en.wikipedia.org/wiki/DCI-P3">l'espace de couleur DCI P3</a> ou un espace plus grand; L'espace p3 est plus grand (et inclut) l'espace srgb.</dd>
- <dt><code>rec2020</code></dt>
- <dd>L'appareil d'affichage prend approximativement l'espace de couleurs spécifié par <a href="https://en.wikipedia.org/wiki/Rec._2020">l'espace de couleurs ITU-R Recommendation BT.2020</a> ou un espace plus grand. L'espace rec2020 est plus grand (et inclut) l'espace p3.</dd>
-</dl>
+- `srgb`
+  - : L'appareil d'affichage prend approximativement en charge l'espace de couleurs [sRGB](https://en.wikipedia.org/wiki/SRGB) ou un espace plus grand. Cela correspond à la majorité des appareils d'affichage.
+- `p3`
+  - : L'appareil d'affichage prend approximativement en charge l'espace de couleurs spécifié par [l'espace de couleur DCI P3](https://en.wikipedia.org/wiki/DCI-P3) ou un espace plus grand; L'espace p3 est plus grand (et inclut) l'espace srgb.
+- `rec2020`
+  - : L'appareil d'affichage prend approximativement l'espace de couleurs spécifié par [l'espace de couleurs ITU-R Recommendation BT.2020](https://en.wikipedia.org/wiki/Rec._2020) ou un espace plus grand. L'espace rec2020 est plus grand (et inclut) l'espace p3.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Un test simple.&lt;/p&gt;</pre>
+```html
+<p>Un test simple.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@media (color-gamut: srgb) {
+```css
+@media (color-gamut: srgb) {
   p {
     background: #f4ae8a;
   }
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.color-gamut")}}</p>
+{{Compat("css.at-rules.media.color-gamut")}}
diff --git a/files/fr/web/css/@media/color-index/index.md b/files/fr/web/css/@media/color-index/index.md
index d50db80028..0224cbe792 100644
--- a/files/fr/web/css/@media/color-index/index.md
+++ b/files/fr/web/css/@media/color-index/index.md
@@ -7,26 +7,28 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/color-index
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>color-index</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur correspond au nombre d'entrées que comporte la palette de couleurs du périphérique de sortie, ou zéro si ce dernier n'en utilise pas.</p>
+**`color-index`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur correspond au nombre d'entrées que comporte la palette de couleurs du périphérique de sortie, ou zéro si ce dernier n'en utilise pas.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>color-index</code> est définie sous la forme d'un entier (type {{cssxref("&lt;integer&gt;")}}) et représente le nombre d'entrées de la palette de couleurs de l'appareil d'affichage (ou zéro si l'appareil n'utilise pas une telle palette). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-color-index</code></strong> et <code><strong>max-color-index</strong></code> afin cibler des règles en fonction d'un minimum ou d'un maximum.</p>
+La caractéristique `color-index` est définie sous la forme d'un entier (type {{cssxref("&lt;integer&gt;")}}) et représente le nombre d'entrées de la palette de couleurs de l'appareil d'affichage (ou zéro si l'appareil n'utilise pas une telle palette). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-color-index`** et **`max-color-index`** afin cibler des règles en fonction d'un minimum ou d'un maximum.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Un test simple.&lt;/p&gt;
-</pre>
+```html
+<p>Un test simple.</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   color: black;
 }
 
@@ -40,43 +42,29 @@ translation_of: Web/CSS/@media/color-index
   p {
     color: #1475ef;
   }
-}</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Exemple_simple")}}</p>
-
-<h3 id="Feuille_de_style_personnalisée">Feuille de style personnalisée</h3>
-
-<p>Ce fragment HTML permet d'appliquer une feuille de style spécifique pour les appareils qui disposent d'au moins 256 couleurs.</p>
-
-<pre class="brush: html"><code>&lt;link rel="stylesheet" href="http://toto.truc.com/base.css" /&gt;
-&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://toto.truc.com/feuille_style_couleurs.css" /&gt;</code></pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Etat</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#color-index', 'color-index')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale, la valeur ne peut pas être négative.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.color-index")}}</p>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Exemple_simple")}}
+
+### Feuille de style personnalisée
+
+Ce fragment HTML permet d'appliquer une feuille de style spécifique pour les appareils qui disposent d'au moins 256 couleurs.
+
+```html
+<link rel="stylesheet" href="http://toto.truc.com/base.css" />
+<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://toto.truc.com/feuille_style_couleurs.css" />
+```
+
+## Spécifications
+
+| Spécification                                                                            | Etat                                     | Commentaires                                                                  |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Media Queries', '#color-index', 'color-index')}} | {{Spec2('CSS4 Media Queries')}} | La valeur peut désormais être négative (ce qui correspond à un booléen faux). |
+| {{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale, la valeur ne peut pas être négative.                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.color-index")}}
diff --git a/files/fr/web/css/@media/color/index.md b/files/fr/web/css/@media/color/index.md
index 166d7849d0..66676f58f2 100644
--- a/files/fr/web/css/@media/color/index.md
+++ b/files/fr/web/css/@media/color/index.md
@@ -7,32 +7,32 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>color</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur est le nombre de bits par composante de couleur du périphérique de sortie, ou zéro si ce dernier ne gère pas les couleurs.</p>
+**`color`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur est le nombre de bits par composante de couleur du périphérique de sortie, ou zéro si ce dernier ne gère pas les couleurs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>color</code> est définie avec un entier (type CSS {{cssxref("&lt;integer&gt;")}}) et représente le nombre de bits utiisé par l'appareil d'affichage pour représenter chaque composante de couleur. Si l'appareil ne gère pas les couleurs, la valeur sera zéro. C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-color</code></strong> et <code><strong>max-color</strong></code> afin de cibler des règles en fonction d'un minimum ou d'un maximum.</p>
+La caractéristique `color` est définie avec un entier (type CSS {{cssxref("&lt;integer&gt;")}}) et représente le nombre de bits utiisé par l'appareil d'affichage pour représenter chaque composante de couleur. Si l'appareil ne gère pas les couleurs, la valeur sera zéro. C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-color`** et **`max-color`** afin de cibler des règles en fonction d'un minimum ou d'un maximum.
 
-<div class="note">
-<p><strong>Note :</strong> Si les différentes composantes sont représentées sur un nombre différent de bits, c'est le plus petit de ces nombres qui est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge mais 6 bits pour le vert, on considèrera que l'appareil utilise 5 bits par couleur. Si l'appareil utilise des couleur indexées, c'est le nombre minimal de bits par composantes parmi les couleurs de l'index qui est utilisé.</p>
-</div>
+> **Note :** Si les différentes composantes sont représentées sur un nombre différent de bits, c'est le plus petit de ces nombres qui est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge mais 6 bits pour le vert, on considèrera que l'appareil utilise 5 bits par couleur. Si l'appareil utilise des couleur indexées, c'est le nombre minimal de bits par composantes parmi les couleurs de l'index qui est utilisé.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
    Ce texte sera noir pour les appareils qui ne prennent en charge
    aucune couleur, rouge pour ceux qui prennent peu de couleurs en
    charge et vert sinon.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   color: black;
 }
 
@@ -49,44 +49,26 @@ translation_of: Web/CSS/@media/color
   p {
     color: #24ba13;
   }
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#color', 'color')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale, la valeur ne peut pas être négative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#color', 'color')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>La valeur peut désormais être négative (ce qui correspond alors à un booléen faux).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs HTML à CSS</a></li>
- <li>La propriété CSS {{cssxref("color")}}</li>
- <li>Le type de donnée CSS {{cssxref("&lt;color&gt;")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                            | État                                     | Commentaires                                                                        |
+| ------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Media Queries', '#color', 'color')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale, la valeur ne peut pas être négative.                           |
+| {{SpecName('CSS4 Media Queries', '#color', 'color')}} | {{Spec2('CSS4 Media Queries')}} | La valeur peut désormais être négative (ce qui correspond alors à un booléen faux). |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.color")}}
+
+## Voir aussi
+
+- [Appliquer des couleurs HTML à CSS](/fr/docs/Web/HTML/Applying_color)
+- La propriété CSS {{cssxref("color")}}
+- Le type de donnée CSS {{cssxref("&lt;color&gt;")}}
diff --git a/files/fr/web/css/@media/device-aspect-ratio/index.md b/files/fr/web/css/@media/device-aspect-ratio/index.md
index f9054e3aa9..9922175c94 100644
--- a/files/fr/web/css/@media/device-aspect-ratio/index.md
+++ b/files/fr/web/css/@media/device-aspect-ratio/index.md
@@ -8,17 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/device-aspect-ratio
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p><strong><code>device-aspect-ratio</code></strong> est une caractéristique média (cf. {{cssxref("@media")}}) dont la valeur correspond au ratio entre la largeur et la hauteur de l'appareil d'affichage.</p>
+**`device-aspect-ratio`** est une caractéristique média (cf. {{cssxref("@media")}}) dont la valeur correspond au ratio entre la largeur et la hauteur de l'appareil d'affichage.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>device-aspect-ratio</code> est définie sous la forme d'un ratio (type CSS {{cssxref("&lt;ratio&gt;")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-device-aspect-ratio</code></strong> et <code><strong>max-device-aspect-ratio</strong></code> afin de cibler des règles en fonction de minimum ou maximum.</p>
+La caractéristique `device-aspect-ratio` est définie sous la forme d'un ratio (type CSS {{cssxref("&lt;ratio&gt;")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-device-aspect-ratio`** et **`max-device-aspect-ratio`** afin de cibler des règles en fonction de minimum ou maximum.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">article {
+```css
+article {
   padding: 1rem;
 }
 
@@ -26,32 +27,16 @@ translation_of: Web/CSS/@media/device-aspect-ratio
   article {
     padding: 1rem 5vw;
   }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.device-aspect-ratio")}}</p>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                                     | Commentaires                                                            |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------- |
+| {{SpecName('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}} | {{Spec2('CSS4 Media Queries')}} | Dépréciation dans la spécification de niveau 4 pour les requêtes média. |
+| {{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale.                                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.device-aspect-ratio")}}
diff --git a/files/fr/web/css/@media/device-height/index.md b/files/fr/web/css/@media/device-height/index.md
index 3fdbf2c38f..117e647809 100644
--- a/files/fr/web/css/@media/device-height/index.md
+++ b/files/fr/web/css/@media/device-height/index.md
@@ -8,44 +8,29 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/device-height
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p><strong><code>device-height</code></strong> est une caractéristique média (cf. {{cssxref("@media")}}) dépréciée dont la valeur correspond à la hauteur de la surface de rendu pour l'appareil d'affichage.</p>
+**`device-height`** est une caractéristique média (cf. {{cssxref("@media")}}) dépréciée dont la valeur correspond à la hauteur de la surface de rendu pour l'appareil d'affichage.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>device-height</code> est définie comme une longueur (type  {{cssxref("&lt;length&gt;")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-device-height</code></strong> et <code><strong>max-device-height</strong></code> afin d'utiliser des critères de minimum et maximum.</p>
+La caractéristique `device-height` est définie comme une longueur (type  {{cssxref("&lt;length&gt;")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-device-height`** et **`max-device-height`** afin d'utiliser des critères de minimum et maximum.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels.</p>
+Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels.
 
-<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://toto.truc.com/short-styles.css" /&gt;</pre>
+```html
+<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://toto.truc.com/short-styles.css" />
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                     | Commentaires                                                            |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------- |
+| {{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}} | {{Spec2('CSS4 Media Queries')}} | Dépréciation dans la spécification de niveau 4 pour les requêtes média. |
+| {{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale.                                                    |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.device-height")}}</p>
+{{Compat("css.at-rules.media.device-height")}}
diff --git a/files/fr/web/css/@media/device-width/index.md b/files/fr/web/css/@media/device-width/index.md
index 54e3589e24..38b3cf5547 100644
--- a/files/fr/web/css/@media/device-width/index.md
+++ b/files/fr/web/css/@media/device-width/index.md
@@ -8,44 +8,29 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/device-width
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p><strong><code>device-width</code></strong> est une caractéristique média dépréciée dont la valeur représente la largeur de la surface de rendu de l'appareil d'affichage.</p>
+**`device-width`** est une caractéristique média dépréciée dont la valeur représente la largeur de la surface de rendu de l'appareil d'affichage.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p><code>device-width</code> est définie comme une longueur (type {{cssxref("&lt;length&gt;")}}). C'est une caractéristique d'intervalle et les variantes préfixées <strong><code>min-device-width</code></strong> et <code><strong>max-device-width</strong></code> peuvent être utilisées pour manipuler un minimum ou un maximum.</p>
+`device-width` est définie comme une longueur (type {{cssxref("&lt;length&gt;")}}). C'est une caractéristique d'intervalle et les variantes préfixées **`min-device-width`** et **`max-device-width`** peuvent être utilisées pour manipuler un minimum ou un maximum.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels.</p>
+Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels.
 
-<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://toto.truc.com/narrow-styles.css" /&gt;</pre>
+```html
+<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://toto.truc.com/narrow-styles.css" />
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#device-width', 'device-width')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires                                                            |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------- |
+| {{SpecName('CSS4 Media Queries', '#device-width', 'device-width')}} | {{Spec2('CSS4 Media Queries')}} | Dépréciation dans la spécification de niveau 4 pour les requêtes média. |
+| {{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale.                                                    |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.device-width")}}</p>
+{{Compat("css.at-rules.media.device-width")}}
diff --git a/files/fr/web/css/@media/display-mode/index.md b/files/fr/web/css/@media/display-mode/index.md
index 0e32d83a0b..addb021017 100644
--- a/files/fr/web/css/@media/display-mode/index.md
+++ b/files/fr/web/css/@media/display-mode/index.md
@@ -7,76 +7,40 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/display-mode
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>display-mode</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau.</p>
+**`display-mode`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau.
 
-<p>Cette caractéristique correspond à la propriété <a href="/fr/docs/Web/Manifest#display"><code>display</code> </a>du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non).</p>
+Cette caractéristique correspond à la propriété [`display` ](/fr/docs/Web/Manifest#display)du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>display-mode</code> est définie avec un mot-clé parmi ceux du tableau ci-après.</p>
+La caractéristique `display-mode` est définie avec un mot-clé parmi ceux du tableau ci-après.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Valeur (mode d'affichage)</th>
-   <th scope="col">Description</th>
-   <th scope="col">Mode d'affichage utilisé en recours</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>fullscreen</code></td>
-   <td>Toute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (<em>chrome</em>) n'est affiché.</td>
-   <td><code>standalone</code></td>
-  </tr>
-  <tr>
-   <td><code>standalone</code></td>
-   <td>L'application se comportera comme une application indépendante avec une fenêtre différente, une icône distincte dans les barres d'application. Dans ce mode, l'agent utilisateur supprimera les éléments d'interface utilisateur liés au contrôle de la navigation mais pourra conserver les autres éléments tels que la barre d'état.</td>
-   <td><code>minimal-ui</code></td>
-  </tr>
-  <tr>
-   <td><code>minimal-ui</code></td>
-   <td>L'application se comportera comme une application indépendante mais son interface utilisateur sera restreinte aux contrôles de navigation. Les éléments affichés peuvent varier selon les navigateurs.</td>
-   <td><code>browser</code></td>
-  </tr>
-  <tr>
-   <td><code>browser</code></td>
-   <td>L'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés.</td>
-   <td>Aucun</td>
-  </tr>
- </tbody>
-</table>
+| Valeur (mode d'affichage) | Description                                                                                                                                                                                                                                                                                                                            | Mode d'affichage utilisé en recours |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| `fullscreen`              | Toute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (_chrome_) n'est affiché.                                                                                                                                                                                                                        | `standalone`                        |
+| `standalone`              | L'application se comportera comme une application indépendante avec une fenêtre différente, une icône distincte dans les barres d'application. Dans ce mode, l'agent utilisateur supprimera les éléments d'interface utilisateur liés au contrôle de la navigation mais pourra conserver les autres éléments tels que la barre d'état. | `minimal-ui`                        |
+| `minimal-ui`              | L'application se comportera comme une application indépendante mais son interface utilisateur sera restreinte aux contrôles de navigation. Les éléments affichés peuvent varier selon les navigateurs.                                                                                                                                 | `browser`                           |
+| `browser`                 | L'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés.                                                                                                                                                                                                         | Aucun                               |
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@media all and (display-mode: fullscreen) {
+```css
+@media all and (display-mode: fullscreen) {
   body {
     margin: 0;
     border: 5px solid black;
   }
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td>
-   <td>{{Spec2('Manifest')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}} | {{Spec2('Manifest')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.display-mode")}}</p>
+{{Compat("css.at-rules.media.display-mode")}}
diff --git a/files/fr/web/css/@media/forced-colors/index.md b/files/fr/web/css/@media/forced-colors/index.md
index ab75ac487c..cc33f5cca5 100644
--- a/files/fr/web/css/@media/forced-colors/index.md
+++ b/files/fr/web/css/@media/forced-colors/index.md
@@ -7,78 +7,59 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/forced-colors
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}{{draft}}</div>
+{{CSSRef}}{{SeeCompatTable}}{{draft}}
 
-<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>forced-colors</code></strong> est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.</p>
+La [caractéristique média](</fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)>) **`forced-colors`** est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur</p>
-</div>
+> **Note :** Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur
 
-<h2 id="Valeurs">Valeurs</h2>
+## Valeurs
 
-<dl>
- <dt><code><dfn>none</dfn></code></dt>
- <dd>La palette de couleur n'est pas restreinte.</dd>
- <dt><code>active</code></dt>
- <dd>La palette de couleur est restreinte et c'est l'agent utilisateur qui fournira la palette utilisable via un système de mots-clés de couleurs CSS systèmes. La valeur de <code>prefers-color-scheme</code> sera également mise à jour afin que les auteurs puissent adapter la page.</dd>
-</dl>
+- `none`
+  - : La palette de couleur n'est pas restreinte.
+- `active`
+  - : La palette de couleur est restreinte et c'est l'agent utilisateur qui fournira la palette utilisable via un système de mots-clés de couleurs CSS systèmes. La valeur de `prefers-color-scheme` sera également mise à jour afin que les auteurs puissent adapter la page.
 
-<h2 id="Préférences_utilisateur">Préférences utilisateur</h2>
+## Préférences utilisateur
 
-<p>À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que de nombreux systèmes d'exploitation prennent en charge ce type de paramètre.</p>
+À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que de nombreux systèmes d'exploitation prennent en charge ce type de paramètre.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, les couleurs utilisées par défaut sont exotiques voire illisibles. On tire ici parti d'une requête média pour utiliser une palette restreinte de l'agent utilisateur.</p>
+Dans cet exemple, les couleurs utilisées par défaut sont exotiques voire illisibles. On tire ici parti d'une requête média pour utiliser une palette restreinte de l'agent utilisateur.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre>&lt;div class="colors"&gt;quelques couleurs étranges&lt;/div&gt;
-</pre>
+    <div class="colors">quelques couleurs étranges</div>
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre>.colors {
-  background-color: red;
-  color: grey;
-}
+    .colors {
+      background-color: red;
+      color: grey;
+    }
 
-@media (forced-colors: active) {
-  .colors {
-    background-color: white;
-    color: black;
-  }
-}
-</pre>
+    @media (forced-colors: active) {
+      .colors {
+        background-color: white;
+        color: black;
+      }
+    }
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS5 Media Queries', '#forced-colors', 'forced-colors')}}</td>
-   <td>{{Spec2('CSS5 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS5 Media Queries', '#forced-colors', 'forced-colors')}} | {{Spec2('CSS5 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+{{Compat("javascript.builtins.Array.sort")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p>
+{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}
diff --git a/files/fr/web/css/@media/grid/index.md b/files/fr/web/css/@media/grid/index.md
index f0ba7043ff..060d9b8156 100644
--- a/files/fr/web/css/@media/grid/index.md
+++ b/files/fr/web/css/@media/grid/index.md
@@ -7,27 +7,30 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/grid
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>grid</code></strong> est une caractéristique média CSS (cf {{cssxref("@media")}}) dont la valeur est un booléen qui indique si l'appareil d'affichage fonctionne grâce à une grille (ex. un terminal ou un appareil qui ne dispose que d'une police à chasse fixe) ou grâce à une matrice d'affichage (avec des pixels « classiques »).</p>
+**`grid`** est une caractéristique média CSS (cf {{cssxref("@media")}}) dont la valeur est un booléen qui indique si l'appareil d'affichage fonctionne grâce à une grille (ex. un terminal ou un appareil qui ne dispose que d'une police à chasse fixe) ou grâce à une matrice d'affichage (avec des pixels « classiques »).
 
-<p>La plupart des ordinateurs actuels possèdent des écrans matriciels. Parmi les appareils qui utilisent un affichage en grille, on trouve les appareils qui n'affichent que du texte dans un terminal ou des téléphones simples avec une seule police fixe.</p>
+La plupart des ordinateurs actuels possèdent des écrans matriciels. Parmi les appareils qui utilisent un affichage en grille, on trouve les appareils qui n'affichent que du texte dans un terminal ou des téléphones simples avec une seule police fixe.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>grid</code> est une valeur booléenne (<code>0</code> ou <code>1</code>) (type {{cssxref("&lt;mq-boolean&gt;")}}) qui indique si l'appareil d'affichage fonctionne selon une grille.</p>
+La caractéristique `grid` est une valeur booléenne (`0` ou `1`) (type {{cssxref("&lt;mq-boolean&gt;")}}) qui indique si l'appareil d'affichage fonctionne selon une grille.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="unknown"&gt;Impossible de savoir si l'affichage fonctionne sur une grille. :-(&lt;/p&gt;
-&lt;p class="bitmap"&gt;L'appareil dispose d'un affichage matriciel.&lt;/p&gt;
-&lt;p class="grid"&gt;L'appareil utilise une grille pour l'affichage !&lt;/p&gt;</pre>
+```html
+<p class="unknown">Impossible de savoir si l'affichage fonctionne sur une grille. :-(</p>
+<p class="bitmap">L'appareil dispose d'un affichage matriciel.</p>
+<p class="grid">L'appareil utilise une grille pour l'affichage !</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">:not(.unknown) {
+```css
+:not(.unknown) {
   color: lightgray;
 }
 
@@ -51,31 +54,19 @@ translation_of: Web/CSS/@media/grid
     color: black;
     text-transform: uppercase;
   }
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#grid', 'grid')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.grid")}}</p>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                        | État                                     | Commentaires         |
+| -------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Media Queries', '#grid', 'grid')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.grid")}}
diff --git a/files/fr/web/css/@media/height/index.md b/files/fr/web/css/@media/height/index.md
index 6e88c3a451..9e51d9bd6e 100644
--- a/files/fr/web/css/@media/height/index.md
+++ b/files/fr/web/css/@media/height/index.md
@@ -7,26 +7,29 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/height
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>height</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur représente la hauteur de la zone d'affichage (<em>viewport</em>) (ou de la boîte de page pour les média paginés).</p>
+**`height`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur représente la hauteur de la zone d'affichage (_viewport_) (ou de la boîte de page pour les média paginés).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>height</code> est définie comme une longueur (type {{cssxref("&lt;length&gt;")}}) et représente la hauteur de la zone d'affichage. C'est une caractéristique d'intervalle et on peut donc utiliser les variantes préfixées <strong><code>min-height</code></strong> et <strong><code>max-height</code></strong> afin de cibler des règles selon un minimum ou un maximum.</p>
+La caractéristique `height` est définie comme une longueur (type {{cssxref("&lt;length&gt;")}}) et représente la hauteur de la zone d'affichage. C'est une caractéristique d'intervalle et on peut donc utiliser les variantes préfixées **`min-height`** et **`max-height`** afin de cibler des règles selon un minimum ou un maximum.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
+```html
+<div>
   Surveillez cet élément lors du
   redimensionnement de la zone d'affichage.
-&lt;/div&gt;</pre>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* Hauteur exacte */
+```css
+/* Hauteur exacte */
 @media (height: 360px) {
   div {
     color: red;
@@ -46,36 +49,19 @@ translation_of: Web/CSS/@media/height
     border: 2px solid blue;
   }
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples','90%')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#height', 'height')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale. La valeur ne doit pas être négative.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.height")}}</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples','90%')}}
+
+## Spécifications
+
+| Spécification                                                            | État                                     | Commentaires                                                                  |
+| ------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Media Queries', '#height', 'height')}} | {{Spec2('CSS4 Media Queries')}} | La valeur peut désormais être négative (ce qui correspond à un booléen faux). |
+| {{SpecName('CSS3 Media Queries', '#height', 'height')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. La valeur ne doit pas être négative.                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.height")}}
diff --git a/files/fr/web/css/@media/hover/index.md b/files/fr/web/css/@media/hover/index.md
index 2ca99b76f9..5f73a6bf83 100644
--- a/files/fr/web/css/@media/hover/index.md
+++ b/files/fr/web/css/@media/hover/index.md
@@ -7,64 +7,51 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/hover
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><code><strong>hover</strong></code> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal permet à l'utilisateur de survoler les éléments.</p>
+**`hover`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal permet à l'utilisateur de survoler les éléments.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>hover</code> est définie avec un mot-clé parmi ceux de la liste suivant :</p>
+La caractéristique `hover` est définie avec un mot-clé parmi ceux de la liste suivant :
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Le mécanisme de saisie principal ne permet pas de survoler les éléments (ou ne le permet pas de façon simple ; par exemple sur les appareils mobiles qui émulent le survol avec un appui long) ou il n'existe pas de dispositif de pointage principal.</dd>
- <dt><code>hover</code></dt>
- <dd>Le mécanisme de saisie principal permet de survoler les éléments simplement.</dd>
-</dl>
+- `none`
+  - : Le mécanisme de saisie principal ne permet pas de survoler les éléments (ou ne le permet pas de façon simple ; par exemple sur les appareils mobiles qui émulent le survol avec un appui long) ou il n'existe pas de dispositif de pointage principal.
+- `hover`
+  - : Le mécanisme de saisie principal permet de survoler les éléments simplement.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;a href="#"&gt;Essayez de me survoler !&lt;/a&gt;</pre>
+```html
+<a href="#">Essayez de me survoler !</a>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@media (hover: hover) {
+```css
+@media (hover: hover) {
   a:hover {
     background: yellow;
   }
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | État                                     | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Media Queries', '#hover', 'hover')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.hover")}}</p>
+{{Compat("css.at-rules.media.hover")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/@media/any-hover">La caractéristique média <code>any-hover</code></a></li>
-</ul>
+- [La caractéristique média `any-hover`](/fr/docs/Web/CSS/@media/any-hover)
diff --git a/files/fr/web/css/@media/index.md b/files/fr/web/css/@media/index.md
index bc94ddbaf3..141f634f08 100644
--- a/files/fr/web/css/@media/index.md
+++ b/files/fr/web/css/@media/index.md
@@ -1,22 +1,21 @@
 ---
 title: '@media'
 slug: Web/CSS/@media
-browser-compat: css.at-rules.media
 translation_of: Web/CSS/@media
+browser-compat: css.at-rules.media
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/At-rule">règle @</a> <strong><code>@media</code></strong> permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs <a href="/fr/docs/Web/CSS/Media_Queries">requêtes média (<i lang="en">media queries</i>)</a>. Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté.</p>
+La [règle @](/fr/docs/Web/CSS/At-rule) **`@media`** permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs [requêtes média (<i lang="en">media queries</i>)](/fr/docs/Web/CSS/Media_Queries). Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté.
 
-<div class="note">
-  <p><strong>Note :</strong> Il est possible de manipuler la règle @ <code>@media</code> via le CSSOM (et JavaScript) grâce à l'interface <a href="/fr/docs/Web/API/CSSMediaRule"><code>CSSMediaRule</code></a>.</p>
-</div>
+> **Note :** Il est possible de manipuler la règle @ `@media` via le CSSOM (et JavaScript) grâce à l'interface [`CSSMediaRule`](/fr/docs/Web/API/CSSMediaRule).
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<p>Une requête média (type <code>&lt;media-query&gt;</code>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre <a href="/fr/docs/Web/CSS/At-rule#les_r%c3%a8gles_de_groupe_conditionnelles">règle conditionnelle</a>.</p>
+Une requête média (type `<media-query>`) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre [règle conditionnelle](/fr/docs/Web/CSS/At-rule#les_r%c3%a8gles_de_groupe_conditionnelles).
 
-<pre class="brush: css">/* Au niveau le plus haut du code */
+```css
+/* Au niveau le plus haut du code */
 @media screen and (min-width: 900px) {
   article {
     padding: 1rem 3rem;
@@ -31,41 +30,42 @@ translation_of: Web/CSS/@media
     }
   }
 }
-</pre>
+```
 
-<p>Pour plus d'informations sur la syntaxe des requêtes média, voir <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">Utiliser les requêtes média</a>.</p>
+Pour plus d'informations sur la syntaxe des requêtes média, voir [Utiliser les requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries).
 
-<h2 id="description">Description</h2>
+## Description
 
-<h3 id="media_types">Types de média</h3>
+### Types de média
 
-<p>{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_types")}}</p>
+{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_types")}}
 
-<h3 id="media_features">Caractéristiques de média</h3>
+### Caractéristiques de média
 
-<p>{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_features")}}</p>
+{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_features")}}
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme valeur pour <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">les requêtes média</a> lorsqu'il faut utiliser une longueur (<a href="/fr/docs/Web/CSS/&lt;length&gt;"><code>&lt;length&gt;</code></a>).</p>
+Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité [`em`](/fr/docs/Web/CSS/length#em) comme valeur pour [les requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries) lorsqu'il faut utiliser une longueur ([`<length>`](/fr/docs/Web/CSS/<length>)).
 
-<p>Les unités <code><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille">em</a></code> et <code><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille">px</a></code> sont toutes les deux valides mais <code><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille">em</a></code> s'adapte mieux quand la taille de la police du navigateur a été ajustée.</p>
+Les unités [`em`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille) et [`px`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille) sont toutes les deux valides mais [`em`](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille) s'adapte mieux quand la taille de la police du navigateur a été ajustée.
 
-<p>On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code> afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements</a>.</p>
+On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur [`prefers-reduced-motion` afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements](/fr/docs/Web/CSS/@media/prefers-reduced-motion).
 
-<h2 id="security">Sécurité</h2>
+## Sécurité
 
-<p>Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon non-désirée.</p>
+Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon non-désirée.
 
-<p>Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.</p>
+Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.
 
-<h3 id="formal_syntax">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@media print {
+```css
+@media print {
   body { font-size: 10pt }
 }
 @media screen {
@@ -81,32 +81,31 @@ translation_of: Web/CSS/@media
   and (-webkit-min-device-pixel-ratio: 2) {
     body { line-height: 1.4 }
 }
-</pre>
+```
 
-<p>Avec la mise à jour de la spécification pour les requêtes média, une nouvelle syntaxe, plus concise, peut être utilisée pour les tests d'intervalle :</p>
+Avec la mise à jour de la spécification pour les requêtes média, une nouvelle syntaxe, plus concise, peut être utilisée pour les tests d'intervalle :
 
-<pre class="brush: css">@media (height &gt; 600px) {
+```css
+@media (height > 600px) {
   body { line-height: 1.4; }
 }
 
-@media (400px &lt;= width &lt;= 700px) {
+@media (400px <= width <= 700px) {
   body { line-height: 1.4; }
 }
-</pre>
+```
 
-<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">Utiliser les requêtes média</a>.</p>
+Pour plus d'exemples, voir [Utiliser les requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">Utiliser les requêtes média</a></li>
- <li>L'interface CSSOM <a href="/fr/docs/Web/API/CSSMediaRule"><code>CSSMediaRule</code></a> qui est associée avec cette règle @.</li>
-</ul>
+- [Utiliser les requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries)
+- L'interface CSSOM [`CSSMediaRule`](/fr/docs/Web/API/CSSMediaRule) qui est associée avec cette règle @.
diff --git a/files/fr/web/css/@media/inverted-colors/index.md b/files/fr/web/css/@media/inverted-colors/index.md
index 9d1983d497..a91cc83a32 100644
--- a/files/fr/web/css/@media/inverted-colors/index.md
+++ b/files/fr/web/css/@media/inverted-colors/index.md
@@ -7,39 +7,40 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/inverted-colors
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>inverted-colors</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs.</p>
+**`inverted-colors`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :</p>
+Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Les couleurs sont affichées normalement.</dd>
- <dt><code>inverted</code></dt>
- <dd>Les couleurs des pixels de la zone affichée ont été inversées.</dd>
-</dl>
+- `none`
+  - : Les couleurs sont affichées normalement.
+- `inverted`
+  - : Les couleurs des pixels de la zone affichée ont été inversées.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Si vous utilisez les couleurs inversées, ce texte devrait
   être bleu sur blanc (l'inverse de jaune sur noir). Sinon,
   il devrait être rouge sur gris clair.
-&lt;/p&gt;
-&lt;p&gt;
+</p>
+<p>
   Si le texte est gris, cela indique que votre navigateur
   ne prend pas en charge la caractéristique média
   `inverted-colors`.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   color: gray;
 }
 
@@ -55,36 +56,20 @@ translation_of: Web/CSS/@media/inverted-colors
     background: #eee;
     color: red;
   }
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS5 Media Queries', '#inverted', 'inverted-colors')}}</td>
-   <td>{{Spec2('CSS5 Media Queries')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Repoussée à la spécification de niveau 5 pour les requêtes média.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.inverted-colors")}}</p>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                                      |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------- |
+| {{SpecName('CSS5 Media Queries', '#inverted', 'inverted-colors')}} | {{Spec2('CSS5 Media Queries')}} |                                                                   |
+| {{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}} | {{Spec2('CSS4 Media Queries')}} | Repoussée à la spécification de niveau 5 pour les requêtes média. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.inverted-colors")}}
diff --git a/files/fr/web/css/@media/monochrome/index.md b/files/fr/web/css/@media/monochrome/index.md
index d52c7db54d..5d28532ff3 100644
--- a/files/fr/web/css/@media/monochrome/index.md
+++ b/files/fr/web/css/@media/monochrome/index.md
@@ -7,30 +7,33 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/monochrome
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>monochrome</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil.</p>
+**`monochrome`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>monochrome</code> est un entier (type {{cssxref("&lt;integer&gt;")}})) dont la valeur correspond au nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. Si l'appareil n'est pas monochrome, cela vaudra 0. Cette caractéristique est une caractéristique d'intervalle ce qui signifie qu'on peut également utiliser les variantes préfixées <strong><code>min-monochrome</code></strong> et <strong><code>max-monochrome</code></strong> afin de cibler les règles en fonction d'un minimum ou d'un maximum.</p>
+La caractéristique `monochrome` est un entier (type {{cssxref("&lt;integer&gt;")}})) dont la valeur correspond au nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. Si l'appareil n'est pas monochrome, cela vaudra 0. Cette caractéristique est une caractéristique d'intervalle ce qui signifie qu'on peut également utiliser les variantes préfixées **`min-monochrome`** et **`max-monochrome`** afin de cibler les règles en fonction d'un minimum ou d'un maximum.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="mono"&gt;
+```html
+<p class="mono">
   Votre appareil prend en charge les
   pixels monochrome !
-&lt;/p&gt;
-&lt;p class="no-mono"&gt;
+</p>
+<p class="no-mono">
   Votre appareil ne prend pas en charge
   les pixels monochromes.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   display: none;
 }
 
@@ -48,36 +51,20 @@ translation_of: Web/CSS/@media/monochrome
     display: block;
     color: #ee3636;
   }
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#monochrome', 'monochrome')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>La valeur peut désormais être négative, auquel cas cela correspond à un booléen faux.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale. La valeur ne doit pas être négative.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.monochrome")}}</p>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                     | Commentaires                                                                          |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Media Queries', '#monochrome', 'monochrome')}} | {{Spec2('CSS4 Media Queries')}} | La valeur peut désormais être négative, auquel cas cela correspond à un booléen faux. |
+| {{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. La valeur ne doit pas être négative.                             |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.monochrome")}}
diff --git a/files/fr/web/css/@media/orientation/index.md b/files/fr/web/css/@media/orientation/index.md
index 53208a4b34..d63cc3c6be 100644
--- a/files/fr/web/css/@media/orientation/index.md
+++ b/files/fr/web/css/@media/orientation/index.md
@@ -7,33 +7,33 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/orientation
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>orientation</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée pour vérifier l'orientation de la zone d'affichage (<em>viewport</em>) (ou la boîte de la page pour les média paginés).</p>
+**`orientation`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée pour vérifier l'orientation de la zone d'affichage (_viewport_) (ou la boîte de la page pour les média paginés).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>orientation</code> se définit grâce à l'un des mots-clés suivants :</p>
+La caractéristique `orientation` se définit grâce à l'un des mots-clés suivants :
 
-<dl>
- <dt><code>portrait</code></dt>
- <dd>La zone d'affichage est en mode portrait (la hauteur est la plus grande dimension).</dd>
- <dt><code>landscape</code></dt>
- <dd>La zone d'affichage est en mode paysage (la largeur est la plus grande dimension).</dd>
-</dl>
+- `portrait`
+  - : La zone d'affichage est en mode portrait (la hauteur est la plus grande dimension).
+- `landscape`
+  - : La zone d'affichage est en mode paysage (la largeur est la plus grande dimension).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;Boîte 1&lt;/div&gt;
-&lt;div&gt;Boîte 2&lt;/div&gt;
-&lt;div&gt;Boîte 3&lt;/div&gt;
-</pre>
+```html
+<div>Boîte 1</div>
+<div>Boîte 2</div>
+<div>Boîte 3</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">body {
+```css
+body {
   display: flex;
 }
 
@@ -51,36 +51,20 @@ div {
   body {
     flex-direction: column;
   }
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.orientation")}}</p>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}} | {{Spec2('CSS4 Media Queries')}} | Aucune modification. |
+| {{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.orientation")}}
diff --git a/files/fr/web/css/@media/overflow-block/index.md b/files/fr/web/css/@media/overflow-block/index.md
index 0ba8f3cf08..d5566d992e 100644
--- a/files/fr/web/css/@media/overflow-block/index.md
+++ b/files/fr/web/css/@media/overflow-block/index.md
@@ -7,63 +7,51 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/overflow-block
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>overflow-block</code></strong> est une caractéristique média CSS qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (<em>viewport</em>) dans l'axe logique de bloc (c'est-à-dire le sens perpendiculaire au sens de lecture).</p>
+**`overflow-block`** est une caractéristique média CSS qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (_viewport_) dans l'axe logique de bloc (c'est-à-dire le sens perpendiculaire au sens de lecture).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>overflow-block</code> est définie avec un mot-clé de la liste suivante :</p>
+La caractéristique `overflow-block` est définie avec un mot-clé de la liste suivante :
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Le contenu qui dépasse n'est pas affiché.</dd>
- <dt><code>scroll</code></dt>
- <dd>Une barre de défilement est ajoutée afin de pouvoir visualiser le contenu qui dépasse de la zone d'affichage.</dd>
- <dt><code>optional-paged</code></dt>
- <dd>Une barre de défilement est ajoutée pour que l'utilisateur puisse voir le contenu ou l'auteur peut utiliser des sauts de page afin que le contenu soit lisible sur une autre page (ex. diaporamas).</dd>
- <dt><code>paged</code></dt>
- <dd>Le contenu qui dépasse est entraîné sur la page suivante (ex. livres électroniques, impression).</dd>
-</dl>
+- `none`
+  - : Le contenu qui dépasse n'est pas affiché.
+- `scroll`
+  - : Une barre de défilement est ajoutée afin de pouvoir visualiser le contenu qui dépasse de la zone d'affichage.
+- `optional-paged`
+  - : Une barre de défilement est ajoutée pour que l'utilisateur puisse voir le contenu ou l'auteur peut utiliser des sauts de page afin que le contenu soit lisible sur une autre page (ex. diaporamas).
+- `paged`
+  - : Le contenu qui dépasse est entraîné sur la page suivante (ex. livres électroniques, impression).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.&lt;/p&gt;
-</pre>
+```html
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@media (overflow-block: scroll) {
+```css
+@media (overflow-block: scroll) {
   p {
     color: red;
   }
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.overflow-block")}}</p>
+{{Compat("css.at-rules.media.overflow-block")}}
diff --git a/files/fr/web/css/@media/overflow-inline/index.md b/files/fr/web/css/@media/overflow-inline/index.md
index 142a85420a..421b5dd2c1 100644
--- a/files/fr/web/css/@media/overflow-inline/index.md
+++ b/files/fr/web/css/@media/overflow-inline/index.md
@@ -7,26 +7,25 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/overflow-inline
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>overflow-inline</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (<em>viewport</em>) dans l'axe logique en ligne (c'est-à-dire le sens correspondant au sens de lecture).</p>
+**`overflow-inline`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (_viewport_) dans l'axe logique en ligne (c'est-à-dire le sens correspondant au sens de lecture).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>overflow-inline</code> est définit avec un mot-clé parmi ceux de la liste suivante :</p>
+La caractéristique `overflow-inline` est définit avec un mot-clé parmi ceux de la liste suivante :
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Le contenu qui dépasse n'est pas affiché.</dd>
- <dt><code>scroll</code></dt>
- <dd>Le contenu qui dépasse peut être visualisé en utilisant une barre de défilement.</dd>
-</dl>
+- `none`
+  - : Le contenu qui dépasse n'est pas affiché.
+- `scroll`
+  - : Le contenu qui dépasse peut être visualisé en utilisant une barre de défilement.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus.
   Vestibulum ante ipsum primis in faucibus orci luctus et
@@ -37,40 +36,29 @@ translation_of: Web/CSS/@media/overflow-inline
   massa et feugiat. Integer rutrum ullamcorper eleifend.
   Proin sit amet tincidunt risus. Sed nec augue congue eros
   accumsan tincidunt sed eget ex.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@media (overflow-inline: scroll) {
+```css
+@media (overflow-inline: scroll) {
   p {
     color: red;
   }
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.overflow-inline")}}</p>
+{{Compat("css.at-rules.media.overflow-inline")}}
diff --git a/files/fr/web/css/@media/pointer/index.md b/files/fr/web/css/@media/pointer/index.md
index 6fecdf4b85..9af141f6f0 100644
--- a/files/fr/web/css/@media/pointer/index.md
+++ b/files/fr/web/css/@media/pointer/index.md
@@ -7,39 +7,38 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/pointer
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>pointer</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal est un dispositif de pointage et, le cas échéant, de connaître sa précision.</p>
+**`pointer`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal est un dispositif de pointage et, le cas échéant, de connaître sa précision.
 
-<div class="note">
-<p><strong>Note :</strong> Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique <code><a href="/fr/docs/Web/CSS/@media/any-pointer">any-pointer</a></code>.</p>
-</div>
+> **Note :** Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique [`any-pointer`](/fr/docs/Web/CSS/@media/any-pointer).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Cette caractéristique est définie avec un mot-clé parmi les suivants :</p>
+Cette caractéristique est définie avec un mot-clé parmi les suivants :
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.</dd>
- <dt><code>coarse</code></dt>
- <dd>Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.</dd>
- <dt><code>fine</code></dt>
- <dd>Le mécanisme de saisie principal inclut un dispositif de pointage précis.</dd>
-</dl>
+- `none`
+  - : Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.
+- `coarse`
+  - : Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.
+- `fine`
+  - : Le mécanisme de saisie principal inclut un dispositif de pointage précis.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.</p>
+Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
-&lt;label for="test"&gt;Coucou !&lt;/label&gt;</pre>
+```html
+<input id="test" type="checkbox" />
+<label for="test">Coucou !</label>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input[type="checkbox"]:checked {
+```css
+input[type="checkbox"]:checked {
   background: gray;
 }
 
@@ -63,37 +62,23 @@ translation_of: Web/CSS/@media/pointer
     height: 30px;
     border: 2px solid red;
   }
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Ajout dans la spécification de niveau 4 pour les requêtes média.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                                     | Commentaires                                                     |
+| ---------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------- |
+| {{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}} | {{Spec2('CSS4 Media Queries')}} | Ajout dans la spécification de niveau 4 pour les requêtes média. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.pointer")}}</p>
+{{Compat("css.at-rules.media.pointer")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/@media/any-pointer">La caractéristique média <code>any-pointer</code></a></li>
-</ul>
+- [La caractéristique média `any-pointer`](/fr/docs/Web/CSS/@media/any-pointer)
diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.md b/files/fr/web/css/@media/prefers-color-scheme/index.md
index 4476aacdf7..4f89fe96ee 100644
--- a/files/fr/web/css/@media/prefers-color-scheme/index.md
+++ b/files/fr/web/css/@media/prefers-color-scheme/index.md
@@ -8,29 +8,26 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/prefers-color-scheme
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<div class="note">
-<p><strong>Note :</strong> Si vous avez modifié <code>privacy.resistFingerprinting</code> à <strong>vrai</strong>, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à <code>light</code>.<br>
- Sinon, vous pouvez créer le paramètre numérique <code>ui.systemUsesDarkTheme</code> pour redéfinier le comportement par défaut et retourner <code>light</code> (valeur : 0), <code>dark</code> (valeur : 1), or <code>no-preference</code> (valeur : 2). (Firefox retournera<code>light</code> si une autre valeur est utilisée.)</p>
-</div>
+> **Note :** Si vous avez modifié `privacy.resistFingerprinting` à **vrai**, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à `light`.
+> Sinon, vous pouvez créer le paramètre numérique `ui.systemUsesDarkTheme` pour redéfinier le comportement par défaut et retourner `light` (valeur : 0), `dark` (valeur : 1), or `no-preference` (valeur : 2). (Firefox retournera`light` si une autre valeur est utilisée.)
 
-<p>La caractéristique média <strong><code>prefers-color-scheme</code></strong> permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).</p>
+La caractéristique média **`prefers-color-scheme`** permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<dl>
- <dt><code><dfn>light</dfn></code></dt>
- <dd>Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante claire, ou qu'il n'a pas exprimé son choix.</dd>
- <dt><code>dark</code></dt>
- <dd>Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.</dd>
-</dl>
+- `light`
+  - : Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante claire, ou qu'il n'a pas exprimé son choix.
+- `dark`
+  - : Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.day   { background: #eee; color: black; }
+```css
+.day   { background: #eee; color: black; }
 .night { background: #333; color: white; }
 
 @media (prefers-color-scheme: dark) {
@@ -50,52 +47,38 @@ translation_of: Web/CSS/@media/prefers-color-scheme
   height: 2em;
   vertical-align: middle;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="day"&gt;Jour (initial)&lt;/div&gt;
-&lt;div class="day light-scheme"&gt;Jour (modifié si utilisation d'un thème clair)&lt;/div&gt;
-&lt;div class="day dark-scheme"&gt;Jour (modifié si utilisation d'un thème sombre)&lt;/div&gt; &lt;br&gt;
+```html
+<div class="day">Jour (initial)</div>
+<div class="day light-scheme">Jour (modifié si utilisation d'un thème clair)</div>
+<div class="day dark-scheme">Jour (modifié si utilisation d'un thème sombre)</div> <br>
 
-&lt;div class="night"&gt;Nuit (initial)&lt;/div&gt;
-&lt;div class="night light-scheme"&gt;Nuit (modifié si utilisation d'un thème clair)&lt;/div&gt;
-&lt;div class="night dark-scheme"&gt;Nuit (modifié si utilisation d'un thème sombre)&lt;/div&gt;
-</pre>
+<div class="night">Nuit (initial)</div>
+<div class="night light-scheme">Nuit (modifié si utilisation d'un thème clair)</div>
+<div class="night dark-scheme">Nuit (modifié si utilisation d'un thème sombre)</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</td>
-   <td>{{Spec2('CSS5 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}} | {{Spec2('CSS5 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p>
+{{Compat("css.at-rules.media.prefers-color-scheme")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Tutoriel vidéo (en anglais) : « Coding a Dark Mode for your Website », Coder un thème sombre pour votre site web</a></li>
- <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Revoir la conception d'un produit ou d'un site pour le mode sombre </a></li>
- <li>Modifier le thème du system sur <a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a> et <a href="https://www.phonandroid.com/android-10-comment-activer-le-theme-fonce.html">Android</a>.</li>
-</ul>
+- [Tutoriel vidéo (en anglais) : « Coding a Dark Mode for your Website », Coder un thème sombre pour votre site web](https://www.youtube.com/watch?v=jmepqJ5UbuM)
+- [Revoir la conception d'un produit ou d'un site pour le mode sombre](https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode)
+- Modifier le thème du system sur [Windows](https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/), [macOS](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/) et [Android](https://www.phonandroid.com/android-10-comment-activer-le-theme-fonce.html).
 
-<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</div>
+{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}
diff --git a/files/fr/web/css/@media/prefers-contrast/index.md b/files/fr/web/css/@media/prefers-contrast/index.md
index c2bc1770ca..16467d0867 100644
--- a/files/fr/web/css/@media/prefers-contrast/index.md
+++ b/files/fr/web/css/@media/prefers-contrast/index.md
@@ -7,78 +7,59 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/prefers-contrast
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}{{draft}}</div>
+{{CSSRef}}{{SeeCompatTable}}{{draft}}
 
-<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>prefers-contrast</code></strong> permet de détecter si l'utilisateur a configuré son système pour utiliser un contraste élevé.</p>
+La [caractéristique média](</fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)>) **`prefers-contrast`** permet de détecter si l'utilisateur a configuré son système pour utiliser un contraste élevé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<dl>
- <dt><code><dfn>no-preference</dfn></code></dt>
- <dd>Cette valeur indique que l'utilisateur n'a exprimé aucune préférence particulière. La valeur de ce mot-clé est évaluée à <code>false</code> dans un contexte booléen.</dd>
- <dt><code>high</code></dt>
- <dd>Cette valeur indique que l'utilisateur a configuré son système pour avoir un contraste plus élevé.</dd>
- <dt><code><dfn>low</dfn></code></dt>
- <dd>Cette valeur indique que l'utilisateur a configuré son système afin d'avoir un niveau de contraste plus faible.</dd>
-</dl>
+- `no-preference`
+  - : Cette valeur indique que l'utilisateur n'a exprimé aucune préférence particulière. La valeur de ce mot-clé est évaluée à `false` dans un contexte booléen.
+- `high`
+  - : Cette valeur indique que l'utilisateur a configuré son système pour avoir un contraste plus élevé.
+- `low`
+  - : Cette valeur indique que l'utilisateur a configuré son système afin d'avoir un niveau de contraste plus faible.
 
-<h2 id="Préférences_utilisateur">Préférences utilisateur</h2>
+## Préférences utilisateur
 
-<p>À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que différents systèmes d'exploitation prennent en charge ce type de paramètre.</p>
+À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que différents systèmes d'exploitation prennent en charge ce type de paramètre.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.</p>
+Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre>&lt;div class="contrast"&gt;Une boîte avec un contraste faible.&lt;/div&gt;
-</pre>
+    <div class="contrast">Une boîte avec un contraste faible.</div>
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre>.contrast {
-  color: grey;
-}
+    .contrast {
+      color: grey;
+    }
 
-@media (prefers-contrast: high) {
-  .contrast {
-    color: black;
-  }
-}
-</pre>
+    @media (prefers-contrast: high) {
+      .contrast {
+        color: black;
+      }
+    }
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}</td>
-   <td>{{Spec2('CSS5 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                            | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}} | {{Spec2('CSS5 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.prefers-contrast")}}</p>
+{{Compat("css.at-rules.media.prefers-contrast")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La caractéristique média spécifique à Microsoft <code><a href="https://msdn.microsoft.com/library/Hh771830">-ms-high-contrast</a></code></li>
-</ul>
+- La caractéristique média spécifique à Microsoft [`-ms-high-contrast`](https://msdn.microsoft.com/library/Hh771830)
 
-<p>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p>
+{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}
diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.md b/files/fr/web/css/@media/prefers-reduced-motion/index.md
index daf259477f..602abf4761 100644
--- a/files/fr/web/css/@media/prefers-reduced-motion/index.md
+++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md
@@ -10,48 +10,44 @@ tags:
   - media feature
 translation_of: Web/CSS/@media/prefers-reduced-motion
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_features">requêtes média</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p>
+La [requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) [CSS](/fr/docs/Web/CSS) **`prefers-reduced-motion`** détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.
 
-<div class="warning">
-  <p><strong>Attention :</strong> Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.</p>
-</div>
+> **Attention :** Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<dl>
-  <dt><code><dfn>no-preference</dfn></code></dt>
-  <dd>Cette valeur indique que l'utilisateur n'a rien indiqué au système.</dd>
-  <dt><code><dfn>reduce</dfn></code></dt>
-  <dd>Cette valeur indique que l'utilisateur souhaite utiliser une interface qui minimise la quantité d'animation, au point où tout mouvement qui n'est pas essentiel a été retiré.</dd>
-</dl>
+- `no-preference`
+  - : Cette valeur indique que l'utilisateur n'a rien indiqué au système.
+- `reduce`
+  - : Cette valeur indique que l'utilisateur souhaite utiliser une interface qui minimise la quantité d'animation, au point où tout mouvement qui n'est pas essentiel a été retiré.
 
-<h2 id="user_preferences">Gestion des préférences</h2>
+## Gestion des préférences
 
-<p>Dans Firefox, la valeur <code>reduce</code> est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :</p>
+Dans Firefox, la valeur `reduce` est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :
 
-<ul>
-  <li>Pour GTK/Gnome, si <code>gtk-enable-animation</code> vaut <code>false</code>. Cela peut être configuré par le menu « Ajustements » de Gnome.</li>
-  <li>Pour Windows 10 : Paramètres &gt; Options d'ergonomie &gt; Vision &gt; Afficher &gt; Afficher les animations dans windows</li>
-  <li>Pour macOS : Préférences système &gt; Accessibilité &gt; Affichage &gt; Réduire les animations.</li>
-  <li>Dans iOS : Paramètres &gt ; Général &gt ; Accessibilité &gt ; Réduire les animations.</li>
-	<li>Dans Android 9+ : Paramètres &gt ; Accessibilité &gt ; Supprimer les animations.</li>
-	<li>Dans la page <code>about:config</code> de Firefox : Ajoutez une préférence numérique appelée <code>ui.prefersReducedMotion</code> et définissez sa valeur soit à <code>0</code> pour des animations complètes, soit à <code>1</code> pour indiquer une préférence pour des mouvements réduits. Les modifications apportées à cette préférence prennent effet immédiatement.</li>
-</ul>
+- Pour GTK/Gnome, si `gtk-enable-animation` vaut `false`. Cela peut être configuré par le menu « Ajustements » de Gnome.
+- Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows
+- Pour macOS : Préférences système > Accessibilité > Affichage > Réduire les animations.
+- Dans iOS : Paramètres > ; Général > ; Accessibilité > ; Réduire les animations.
+- Dans Android 9+ : Paramètres > ; Accessibilité > ; Supprimer les animations.
+- Dans la page `about:config` de Firefox : Ajoutez une préférence numérique appelée `ui.prefersReducedMotion` et définissez sa valeur soit à `0` pour des animations complètes, soit à `1` pour indiquer une préférence pour des mouvements réduits. Les modifications apportées à cette préférence prennent effet immédiatement.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<p>Cet exemple possède une animation désagréable qui sera exécutée à moins d'activer la réduction de mouvement dans les préférences relatives à l'accessibilité.</p>
+Cet exemple possède une animation désagréable qui sera exécutée à moins d'activer la réduction de mouvement dans les préférences relatives à l'accessibilité.
 
-<h3 id="html">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="animation"&gt;boîte animée&lt;/div&gt;
-</pre>
+```html
+<div class="animation">boîte animée</div>
+```
 
-<h3 id="css">CSS</h3>
+### CSS
 
-<pre class="brush: css">.animation {
+```css
+.animation {
   animation: vibrate 0.3s linear infinite both;
 }
 
@@ -60,9 +56,10 @@ translation_of: Web/CSS/@media/prefers-reduced-motion
   animation: none;
   }
 }
-</pre>
+```
 
-<pre class="brush: css hidden">.animation {
+```css hidden
+.animation {
   background-color: rebeccapurple;
   color: #fff;
   font: 1.2em Helvetica, arial, sans-serif;
@@ -103,38 +100,23 @@ translation_of: Web/CSS/@media/prefers-reduced-motion
       transform: translate(0);
   }
 }
-</pre>
+```
 
-<h3 id="result">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("example")}}</p>
+{{EmbedLiveSample("example")}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaire</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td>
-      <td>{{Spec2('CSS5 Media Queries')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}} | {{Spec2('CSS5 Media Queries')}} | Définition initiale. |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>
+{{Compat("css.at-rules.media.prefers-reduced-motion")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">Une introduction aux requêtes média pour la réduction de mouvement</a></li>
-  <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion (WebKit Blog)</a> comprend des exemples de déclencheurs de mouvements vestibulaires.</li>
-</ul>
+- [Une introduction aux requêtes média pour la réduction de mouvement](https://css-tricks.com/introduction-reduced-motion-media-query/)
+- [Responsive Design for Motion (WebKit Blog)](https://webkit.org/blog/7551/responsive-design-for-motion/) comprend des exemples de déclencheurs de mouvements vestibulaires.
diff --git a/files/fr/web/css/@media/resolution/index.md b/files/fr/web/css/@media/resolution/index.md
index 771d463cd5..3f2851c729 100644
--- a/files/fr/web/css/@media/resolution/index.md
+++ b/files/fr/web/css/@media/resolution/index.md
@@ -7,24 +7,26 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/resolution
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>resolution</code></strong> est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage.</p>
+**`resolution`** est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>resolution</code> est une valeur de type {{cssxref("&lt;resolution&gt;")}} qui représente la densité de pixels de l'appareil d'affichage. C'est une caractéristique d'intervalle, cela signifie qu'on peut utiliser les variantes préfixées <code><strong>min-resolution</strong></code> et <strong><code>max-resolution</code></strong> afin d'établir des règles selon un minimum ou un maximum.</p>
+La caractéristique `resolution` est une valeur de type {{cssxref("&lt;resolution&gt;")}} qui représente la densité de pixels de l'appareil d'affichage. C'est une caractéristique d'intervalle, cela signifie qu'on peut utiliser les variantes préfixées **`min-resolution`** et **`max-resolution`** afin d'établir des règles selon un minimum ou un maximum.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Un test pour la densité de pixels de votre appareil.&lt;/p&gt;
-</pre>
+```html
+<p>Un test pour la densité de pixels de votre appareil.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* Résolution exacte  */
+```css
+/* Résolution exacte  */
 @media (resolution: 150dpi) {
   p {
     color: red;
@@ -43,31 +45,19 @@ translation_of: Web/CSS/@media/resolution
   p {
     background: yellow;
   }
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.resolution")}}</p>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.resolution")}}
diff --git a/files/fr/web/css/@media/scripting/index.md b/files/fr/web/css/@media/scripting/index.md
index 4fd191ef33..9c5940f749 100644
--- a/files/fr/web/css/@media/scripting/index.md
+++ b/files/fr/web/css/@media/scripting/index.md
@@ -7,35 +7,35 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/scripting
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>scripting</code></strong> est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles.</p>
+**`scripting`** est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>scripting</code> est définie avec un mot-clé parmi les suivants :</p>
+La caractéristique `scripting` est définie avec un mot-clé parmi les suivants :
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Les outils de script sont indisponibles pour le document courant.</dd>
- <dt><code>initial-only</code></dt>
- <dd>Les outils de script sont disponibles pendant le chargement de la page mais pas ensuite.</dd>
- <dt><code>enabled</code></dt>
- <dd>Les outils de script sont pris en charge et actifs pour le document courant.</dd>
-</dl>
+- `none`
+  - : Les outils de script sont indisponibles pour le document courant.
+- `initial-only`
+  - : Les outils de script sont disponibles pendant le chargement de la page mais pas ensuite.
+- `enabled`
+  - : Les outils de script sont pris en charge et actifs pour le document courant.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="script-none"&gt;Les outils de script ne sont pas disponibles. :-(&lt;/p&gt;
-&lt;p class="script-initial-only"&gt;Les outils de script sont uniquement disponibles au chargement initial.&lt;/p&gt;
-&lt;p class="script-enabled"&gt;Les outils de script sont activés ! :-)&lt;/p&gt;
-</pre>
+```html
+<p class="script-none">Les outils de script ne sont pas disponibles. :-(</p>
+<p class="script-initial-only">Les outils de script sont uniquement disponibles au chargement initial.</p>
+<p class="script-enabled">Les outils de script sont activés ! :-)</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   color: lightgray;
 }
 
@@ -55,31 +55,19 @@ translation_of: Web/CSS/@media/scripting
   .script-enabled {
     color: red;
   }
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Reporté à la spécification Media Queries Level 5.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.scripting")}}</p>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                    | État                                     | Commentaires                                      |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------- |
+| {{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}} | {{Spec2('CSS4 Media Queries')}} | Reporté à la spécification Media Queries Level 5. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.scripting")}}
diff --git a/files/fr/web/css/@media/shape/index.md b/files/fr/web/css/@media/shape/index.md
index 0f07c013b2..edf2c2a7f9 100644
--- a/files/fr/web/css/@media/shape/index.md
+++ b/files/fr/web/css/@media/shape/index.md
@@ -9,37 +9,35 @@ tags:
   - Règle @
 translation_of: Web/CSS/@media/shape
 ---
-<div>{{CSSRef}} {{Non-standard_header}}</div>
+{{CSSRef}} {{Non-standard_header}}
 
-<p>La caractéristique média <strong><code>shape</code></strong> peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.</p>
+La caractéristique média **`shape`** peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>shape</code> peut prendre une valeur parmi deux valeurs définies : <code>rect</code> qui représente un écran rectangulaire ou <code>round</code> qui représente un écran circulaire, ovale ou elliptique.</p>
+La caractéristique `shape` peut prendre une valeur parmi deux valeurs définies : `rect` qui représente un écran rectangulaire ou `round` qui représente un écran circulaire, ovale ou elliptique.
 
-<dl>
- <dt><code><dfn>rect</dfn></code></dt>
- <dd>La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.</dd>
- <dt><code><dfn>round</dfn></code></dt>
- <dd>La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.</dd>
-</dl>
+- `rect`
+  - : La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.
+- `round`
+  - : La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<div class="note">
-<p><strong>Note :</strong> Aucun navigateur n'implémente actuellement cette fonctionnalité.</p>
-</div>
+> **Note :** Aucun navigateur n'implémente actuellement cette fonctionnalité.
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h1&gt;Coucou le monde !&lt;/h1&gt;
-</pre>
+```html
+<h1>Coucou le monde !</h1>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   text-align: left;
 }
 
@@ -54,42 +52,30 @@ translation_of: Web/CSS/@media/shape
     text-align: center;
   }
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+{{EmbedLiveSample("Exemple_simple")}}
 
-<h3 id="Feuille_de_style_spécifique">Feuille de style spécifique</h3>
+### Feuille de style spécifique
 
-<p>Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.</p>
+Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.
 
-<pre class="brush: html"><code>&lt;head&gt;
-    &lt;link rel="stylesheet" href="default.css" /&gt;</code>
-<code>    &lt;link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /&gt;
-    &lt;link media="screen and (shape: round)" rel="stylesheet" href="round.css" /&gt;
-&lt;/head&gt;
-</code></pre>
+```html
+<head>
+    <link rel="stylesheet" href="default.css" />
+    <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" />
+    <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
+</head>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><em><a href="https://drafts.csswg.org/css-round-display/">CSS Round Display Level 1</a></em></td>
-   <td>Brouillon</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                              | État      | Commentaires         |
+| -------------------------------------------------------------------------- | --------- | -------------------- |
+| _[CSS Round Display Level 1](https://drafts.csswg.org/css-round-display/)_ | Brouillon | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.media.shape")}}</p>
+{{Compat("css.at-rules.media.shape")}}
diff --git a/files/fr/web/css/@media/update-frequency/index.md b/files/fr/web/css/@media/update-frequency/index.md
index 41b540b3ba..0c5ee270ab 100644
--- a/files/fr/web/css/@media/update-frequency/index.md
+++ b/files/fr/web/css/@media/update-frequency/index.md
@@ -7,36 +7,36 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/update-frequency
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>update</code></strong> est une caractéristique média (cf. {{cssxref("@media")}}) qui permet de vérifier la vitesse à laquelle l'appareil d'affichage peut modifier l'apparence du contenu.</p>
+**`update`** est une caractéristique média (cf. {{cssxref("@media")}}) qui permet de vérifier la vitesse à laquelle l'appareil d'affichage peut modifier l'apparence du contenu.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La caractéristique <code>update</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+La caractéristique `update` est définie avec un mot-clé parmi ceux de la liste ci-après.
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Une fois le document affiché, son apparence ne peut plus être modifiée (ex. le document est imprimé sur du papier).</dd>
- <dt><code>slow</code></dt>
- <dd>Une fois le document affiché, son apparence peut évoluer mais lentement (ex. des livres électroniques utilisant une encre électronique ou des appareils de lecture avec un niveau d'énergie faible).</dd>
- <dt><code>fast</code></dt>
- <dd>Une fois le document affiché, son apparence peut évoluer rapidement (ex. un ordinateur qui serait capable de gérer les transitions CSS).</dd>
-</dl>
+- `none`
+  - : Une fois le document affiché, son apparence ne peut plus être modifiée (ex. le document est imprimé sur du papier).
+- `slow`
+  - : Une fois le document affiché, son apparence peut évoluer mais lentement (ex. des livres électroniques utilisant une encre électronique ou des appareils de lecture avec un niveau d'énergie faible).
+- `fast`
+  - : Une fois le document affiché, son apparence peut évoluer rapidement (ex. un ordinateur qui serait capable de gérer les transitions CSS).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Si ce texte est animé, cela signifie que vous utilisez
   un appareil avec un affichage qui évolue rapidement.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@keyframes jiggle {
+```css
+@keyframes jiggle {
   from {
     transform: translateY(0);
   }
@@ -50,31 +50,19 @@ translation_of: Web/CSS/@media/update-frequency
   p {
     animation: 1s jiggle linear alternate infinite;
   }
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#update', 'update')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.update")}}</p>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                            | État                                     | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Media Queries', '#update', 'update')}} | {{Spec2('CSS4 Media Queries')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.update")}}
diff --git a/files/fr/web/css/@media/width/index.md b/files/fr/web/css/@media/width/index.md
index b32ee66222..d13d54f681 100644
--- a/files/fr/web/css/@media/width/index.md
+++ b/files/fr/web/css/@media/width/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/@media/width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>width</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer des styles différents en fonction de la largeur de la zone d'affichage (<em>viewport</em>) ou de la largeur de la page (pour <a href="/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s">les média paginés</a>). La largeur est exprimée comme une longueur CSS (type {{cssxref("&lt;length&gt;")}}.</p>
+**`width`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer des styles différents en fonction de la largeur de la zone d'affichage (_viewport_) ou de la largeur de la page (pour [les média paginés](/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s)). La largeur est exprimée comme une longueur CSS (type {{cssxref("&lt;length&gt;")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p><strong><code>width</code></strong> est une valeur décrivant la largeur d'affichage, les versions préfixées <strong><code>min-width</code></strong> et <code><strong>max-width</strong></code> peuvent également être utilisées afin de décrire la largeur minimale (resp. la largeur maximale).</p>
+**`width`** est une valeur décrivant la largeur d'affichage, les versions préfixées **`min-width`** et **`max-width`** peuvent également être utilisées afin de décrire la largeur minimale (resp. la largeur maximale).
 
-<pre class="brush: css">/* Largeur exacte */
+```css
+/* Largeur exacte */
 @media (width: 300px) {}
 
 /* Un viewport avec une largeur minimale */
@@ -23,17 +24,20 @@ translation_of: Web/CSS/@media/width
 
 /* Un viewport avec une largeur maximale */
 @media (max-width: 1000px) {}
-</pre>
+```
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;Observez cet élément lorsque vous redimensionnez la largeur du viewport.&lt;/div&gt;</pre>
+```html
+<div>Observez cet élément lorsque vous redimensionnez la largeur du viewport.</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* Largeur exacte */
+```css
+/* Largeur exacte */
 @media (width: 360px) {
   div {
     color: red;
@@ -53,36 +57,19 @@ translation_of: Web/CSS/@media/width
     border: 2px solid blue;
   }
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples','90%')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#width', 'width')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale. La valeur ne peut pas être négative.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media.width")}}</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples','90%')}}
+
+## Spécifications
+
+| Spécification                                                            | État                                     | Commentaires                                                                  |
+| ------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Media Queries', '#width', 'width')}} | {{Spec2('CSS4 Media Queries')}} | La valeur peut désormais être négative (ce qui correspond à un booléen faux). |
+| {{SpecName('CSS3 Media Queries', '#width', 'width')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. La valeur ne peut pas être négative.                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.media.width")}}
diff --git a/files/fr/web/css/@namespace/index.md b/files/fr/web/css/@namespace/index.md
index b30bf8e593..1e3ebd0e0b 100644
--- a/files/fr/web/css/@namespace/index.md
+++ b/files/fr/web/css/@namespace/index.md
@@ -7,70 +7,58 @@ tags:
   - Règle @
 translation_of: Web/CSS/@namespace
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>@namespace</code></strong> est <a href="/fr/docs/Web/CSS/Règles_@">une règle @</a> qui définit <a href="/fr/docs/Glossaire/Namespace">les espaces de noms XML</a> utilisés dans une feuille de style CSS. Les espaces de noms définis sont alors utilisés pour restreindre les sélecteurs <a href="/fr/docs/Web/CSS/Sélecteurs_universels">universels</a>, <a href="/fr/docs/Web/CSS/Sélecteurs_de_type">de type</a>, et <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">d'attribut</a> afin que ceux-ci ne sélectionnent que les éléments contenus dans cet espace de nom. La règle <code>@namespace</code> est généralement utilisée lorsqu'on manipule des documents entremêlant différents espaces de noms (par exemple, un document HTML5 qui contient du SVG en ligne ou du MathML ou alors un fichier XML qui est composé de plusieurs vocabulaires).</p>
+**`@namespace`** est [une règle @](/fr/docs/Web/CSS/Règles_@) qui définit [les espaces de noms XML](/fr/docs/Glossaire/Namespace) utilisés dans une feuille de style CSS. Les espaces de noms définis sont alors utilisés pour restreindre les sélecteurs [universels](/fr/docs/Web/CSS/Sélecteurs_universels), [de type](/fr/docs/Web/CSS/Sélecteurs_de_type), et [d'attribut](/fr/docs/Web/CSS/Sélecteurs_d_attribut) afin que ceux-ci ne sélectionnent que les éléments contenus dans cet espace de nom. La règle `@namespace` est généralement utilisée lorsqu'on manipule des documents entremêlant différents espaces de noms (par exemple, un document HTML5 qui contient du SVG en ligne ou du MathML ou alors un fichier XML qui est composé de plusieurs vocabulaires).
 
-<pre class="brush: css no-line-numbers">@namespace url(http://www.w3.org/1999/xhtml);
+```css
+@namespace url(http://www.w3.org/1999/xhtml);
 @namespace svg url(http://www.w3.org/2000/svg);
 
-/* Cela correspond à tous les éléments XHTML &lt;a&gt;
+/* Cela correspond à tous les éléments XHTML <a>
   car XHTML est l'espace de nom par défaut, sans
   préfixe. */
 a {}
 
-/* Cela correspond à tous les éléments SVG &lt;a&gt; */
+/* Cela correspond à tous les éléments SVG <a> */
 svg|a {}
 
-/* Cela correspond aux éléments &lt;a&gt; XHTML et SVG */
+/* Cela correspond aux éléments <a> XHTML et SVG */
 *|a {}
-</pre>
+```
 
-<p>Les règles <code>@namespace</code> doivent suivre les règles @ {{cssxref("@charset")}} et {{cssxref("@import")}} et précéder les autres règles @ ainsi que les déclarations de style contenus dans la feuille de style.</p>
+Les règles `@namespace` doivent suivre les règles @ {{cssxref("@charset")}} et {{cssxref("@import")}} et précéder les autres règles @ ainsi que les déclarations de style contenus dans la feuille de style.
 
-<p><code>@namespace</code> peut être utilisée afin de définir <strong>l'espace de noms par défaut</strong> de la feuille de style. Lorsqu'un espace de noms par défaut est définit, les sélecteurs universels et les sélecteurs de types (pas les sélecteurs d'attribut, cf. note ci-après) ne s'appliqueront qu'aux éléments de cet espace de noms.</p>
+`@namespace` peut être utilisée afin de définir **l'espace de noms par défaut** de la feuille de style. Lorsqu'un espace de noms par défaut est définit, les sélecteurs universels et les sélecteurs de types (pas les sélecteurs d'attribut, cf. note ci-après) ne s'appliqueront qu'aux éléments de cet espace de noms.
 
-<p>La règle <code>@namespace</code> peut également être utilisée afin de définir <strong>un préfixe d'espace de noms</strong>. Lorsqu'un sélecteur universel, de type ou d'attribut est préfixé avec le préfixe de l'espace de noms, ce sélecteur ne ciblera les éléments que si l'espace de nom <strong>et</strong> le nom ou l'attribut de l'élément correspond.</p>
+La règle `@namespace` peut également être utilisée afin de définir **un préfixe d'espace de noms**. Lorsqu'un sélecteur universel, de type ou d'attribut est préfixé avec le préfixe de l'espace de noms, ce sélecteur ne ciblera les éléments que si l'espace de nom **et** le nom ou l'attribut de l'élément correspond.
 
-<p>En <a href="/fr/docs/Glossaire/HTML5">HTML5</a>, les <a href="https://html.spec.whatwg.org/#foreign-elements">éléments étrangers</a> connus seront automatiquement affectés à des espaces de noms. Cela signifie que les éléments HTML se comporteront comme s'ils appartenaient à l'espace de noms XHTML (<code>http://www.w3.org/1999/xhtml</code>) même s'il n'y a aucun attribut <code>xmlns</code> dans le document. Les éléments <code><a href="/fr/docs/Web/SVG/Element/svg">&lt;svg&gt;</a></code> et <code><a href="/fr/docs/Web/MathML/Element/math">&lt;math&gt;</a></code> seront affectés à leurs espaces de noms respectifs (<code>http://www.w3.org/2000/svg</code> et <code>http://www.w3.org/1998/Math/MathML</code>).</p>
+En [HTML5](/fr/docs/Glossaire/HTML5), les [éléments étrangers](https://html.spec.whatwg.org/#foreign-elements) connus seront automatiquement affectés à des espaces de noms. Cela signifie que les éléments HTML se comporteront comme s'ils appartenaient à l'espace de noms XHTML (`http://www.w3.org/1999/xhtml`) même s'il n'y a aucun attribut `xmlns` dans le document. Les éléments [`<svg>`](/fr/docs/Web/SVG/Element/svg) et [`<math>`](/fr/docs/Web/MathML/Element/math) seront affectés à leurs espaces de noms respectifs (`http://www.w3.org/2000/svg` et `http://www.w3.org/1998/Math/MathML`).
 
-<div class="note">
-<p><strong>Note :</strong> En XML, sauf si un préfixe est directement apposé sur l'attribut (ex. <code>xlink:href</code>), cet attribut n'est rattaché à aucun espace de noms. Autrement dit, les attributs n'héritent pas de l'espace de noms de l'élément auquel ils sont rattachés. Afin de respecter ce comportement, l'espace de noms par défaut n'est pas appliqué aux sélecteurs d'attributs.</p>
-</div>
+> **Note :** En XML, sauf si un préfixe est directement apposé sur l'attribut (ex. `xlink:href`), cet attribut n'est rattaché à aucun espace de noms. Autrement dit, les attributs n'héritent pas de l'espace de noms de l'élément auquel ils sont rattachés. Afin de respecter ce comportement, l'espace de noms par défaut n'est pas appliqué aux sélecteurs d'attributs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Espace de noms par défaut */
-@namespace url(<em>XML-namespace-URL</em>);
-@namespace "<em>XML-namespace-URL</em>";
+```css
+/* Espace de noms par défaut */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
 
 /* Espace de noms préfixé */
-@namespace <em>préfixe</em> url(<em>XML-namespace-URL</em>);
-@namespace <em>préfixe</em> "<em>XML-namespace-URL</em>";</pre>
+@namespace préfixe url(XML-namespace-URL);
+@namespace préfixe "XML-namespace-URL";
+```
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
-   <td>{{Spec2('CSS3 Namespaces')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.namespace")}}</p>
+## Spécifications
+
+| Spécification                                                                    | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}} | {{Spec2('CSS3 Namespaces')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.namespace")}}
diff --git a/files/fr/web/css/@page/index.md b/files/fr/web/css/@page/index.md
index 9d44d62546..563e341e7e 100644
--- a/files/fr/web/css/@page/index.md
+++ b/files/fr/web/css/@page/index.md
@@ -7,99 +7,74 @@ tags:
   - Règle @
 translation_of: Web/CSS/@page
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La règle @ <strong><code>@page</code></strong> est utilisée afin de modifier certaines propriétés CSS lorsqu'on imprime un document. La règle <code>@page</code> ne permet par de modifier toutes les propriétés mais uniquement celles qui portent sur les marges, les lignes orphelines et veuves ainsi que les sauts de page du document. Si on utilise cette règle @ pour modifier une autre propriété, ce changement sera ignoré.</p>
+La règle @ **`@page`** est utilisée afin de modifier certaines propriétés CSS lorsqu'on imprime un document. La règle `@page` ne permet par de modifier toutes les propriétés mais uniquement celles qui portent sur les marges, les lignes orphelines et veuves ainsi que les sauts de page du document. Si on utilise cette règle @ pour modifier une autre propriété, ce changement sera ignoré.
 
-<pre class="brush: css no-line-numbers">@page {
+```css
+@page {
   margin: 1cm;
 }
 
 @page :first {
   margin: 2cm;
-}</pre>
+}
+```
+
+La règle @ `@page` peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}.
 
-<p>La règle @ <code>@page</code> peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}.</p>
+> **Note :** Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("&lt;length&gt;")}}) relative à la zone d'affichage (_viewport_) : `vh`, `vw`, `vmin` et `vmax`. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle `@page`.
 
-<div class="note">
-  <p><strong>Note :</strong> Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("&lt;length&gt;")}}) relative à la zone d'affichage (<em>viewport</em>) : <code>vh</code>, <code>vw</code>, <code>vmin</code> et <code>vmax</code>. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle <code>@page</code>.</p>
-</div>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+### Descripteurs
 
-<h3 id="Descripteurs">Descripteurs</h3>
+- [`size`](/fr/docs/Web/CSS/@page/size)
+  - : Définit la taille et l'orientation du bloc englobant la boîte de la page. En général, lorsqu'une boîte correspondant à une page est rendu sur une feuille, cela indique la taille de la page utilisée.
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/@page/size"><code>size</code></a></dt>
- <dd>Définit la taille et l'orientation du bloc englobant la boîte de la page. En général, lorsqu'une boîte correspondant à une page est rendu sur une feuille, cela indique la taille de la page utilisée.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt><code><a href="/fr/docs/orphaned/Web/CSS/@page/marks">marks</a></code></dt>
- <dd>Ajoute des marques pour la découpe ou l'alignement des pages du document.</dd>
-</dl>
+- [`marks`](/fr/docs/orphaned/Web/CSS/@page/marks)
+  - : Ajoute des marques pour la découpe ou l'alignement des pages du document.
 
-<dl>
- <dt><a href="/fr/docs/orphaned/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
- <dd>Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.</dd>
-</dl>
+<!---->
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- [`bleed`](/fr/docs/orphaned/Web/CSS/@page/bleed)
+  - : Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@page :first {
+```css
+@page :first {
   margin: 2cm 3cm;
-} </pre>
-
-<p>Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées à <code>@page</code> :</p>
-
-<ul>
- <li>{{cssxref(":blank")}}</li>
- <li>{{cssxref(":first")}}</li>
- <li>{{cssxref(":left")}}</li>
- <li>{{cssxref(":right")}}</li>
- <li>{{cssxref(":recto")}} {{experimental_inline}}</li>
- <li>{{cssxref(":verso")}} {{experimental_inline}}</li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>Ajout des sélecteurs de page <code>:recto</code> et <code>:verso</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
-   <td>{{Spec2('CSS3 Paged Media')}}</td>
-   <td>Aucun changement depuis  {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle <code>@page</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.page")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">Le bug de suivi Mozilla pour l'ensemble des fonctionnalités associées aux médias paginés.</a></li>
-</ul>
+}
+```
+
+Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées à `@page` :
+
+- {{cssxref(":blank")}}
+- {{cssxref(":first")}}
+- {{cssxref(":left")}}
+- {{cssxref(":right")}}
+- {{cssxref(":recto")}} {{experimental_inline}}
+- {{cssxref(":verso")}} {{experimental_inline}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                             | Commentaires                                                                                                                          |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}} | {{Spec2('CSS Logical Properties')}} | Ajout des sélecteurs de page `:recto` et `:verso`.                                                                                    |
+| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}                         | {{Spec2('CSS3 Paged Media')}}         | Aucun changement depuis  {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle `@page`. |
+| {{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}                     | {{Spec2('CSS2.1')}}                         | Définition initiale.                                                                                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.page")}}
+
+## Voir aussi
+
+- [Le bug de suivi Mozilla pour l'ensemble des fonctionnalités associées aux médias paginés.](https://bugzilla.mozilla.org/show_bug.cgi?id=286443)
diff --git a/files/fr/web/css/@page/size/index.md b/files/fr/web/css/@page/size/index.md
index 89d4723b4d..6cdf3c70a7 100644
--- a/files/fr/web/css/@page/size/index.md
+++ b/files/fr/web/css/@page/size/index.md
@@ -8,22 +8,23 @@ tags:
   - Reference
 translation_of: Web/CSS/@page/size
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>Le descripteur <strong><code>size</code></strong>, associé à la règle @ {{cssxref("@page")}}, permet de définir les dimensions et l'orientation de la boîte utilisée pour représenter une page. La plupart du temps, cette taille correspondra à la totalité de la taille de la page imprimée.</p>
+Le descripteur **`size`**, associé à la règle @ {{cssxref("@page")}}, permet de définir les dimensions et l'orientation de la boîte utilisée pour représenter une page. La plupart du temps, cette taille correspondra à la totalité de la taille de la page imprimée.
 
-<p>Les dimensions de cette boîte peuvent être définies de façon absolues ou relatives (dans ce cas, la page occupera l'espace disponible).</p>
+Les dimensions de cette boîte peuvent être définies de façon absolues ou relatives (dans ce cas, la page occupera l'espace disponible).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Des mots-clés qui peuvent être utilisées
+```css
+/* Des mots-clés qui peuvent être utilisées
    pour remplir l'espace disponible         */
 size: auto;
 size: portrait;
 size: landscape;
 
 /* Des valeurs de longueur */
-/* Type &lt;length&gt;           */
+/* Type <length>           */
 /* 1 valeur : hauteur = largeur */
 size: 6in;
 
@@ -39,87 +40,72 @@ size: letter;
 
 /* Une déclaration incluant la taille et l'orientation */
 size: A4 portrait;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>L'agent utilisateur décidera de la taille de page. En général, ce seront les dimensions de la page cible (celle sur laquelle imprimer/afficher) qui seront utilisées.</dd>
- <dt><code>landscape</code></dt>
- <dd>Le contenu de la page est affiché en paysage (le côté le plus long de la page sera le côté horizontal).</dd>
- <dt><code>portrait</code></dt>
- <dd>Le contenu de la page est affiché en portrait (le côté le plus long de la page sera le côté vertical).</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de longueur (cf. {{cssxref("&lt;length&gt;")}}). La première valeur utilisée correspond à la largeur de la boîte de la page et la deuxième correspond à la hauteur. Si une seule valeur est fournie, celle-ci sera utilisée pour la largeur et pour la hauteur.</dd>
- <dt><code>&lt;page-size&gt;</code></dt>
- <dd><p>Un mot-clé avec l'une des valeurs suivantes :</p>
- <dl>
-  <dt><code>A5</code></dt>
-  <dd>Ce mot-clé correspond aux dimensions ISO standard : 148mm x 210mm.</dd>
-  <dt><code>A4</code></dt>
-  <dd>Ce mot-clé correspond aux dimensions ISO standard : 210mm x 297mm (c'est le format le plus utilisé pour les impressions occasionnelles sur les imprimantes personnelles).</dd>
-  <dt><code>A3</code></dt>
-  <dd>Ce mot-clé correspond aux dimensions ISO standard : 297mm x 420mm.</dd>
-  <dt><code>B5</code></dt>
-  <dd>Ce mot-clé correspond aux dimensions ISO standard : 176mm x 250mm.</dd>
-  <dt><code>B4</code></dt>
-  <dd>Ce mot-clé correspond aux dimensions ISO standard : 250mm x 353mm.</dd>
-  <dt><code>JIS-B5</code></dt>
-  <dd>Ce mot-clé correspond aux dimensions JIS standard : 182mm x 257mm.</dd>
-  <dt><code>JIS-B4</code></dt>
-  <dd>Ce mot-clé correspond aux dimensions JIS standard : 257mm x 364mm.</dd>
-  <dt><code>letter</code></dt>
-  <dd>Ce mot-clé correspond à la taille standard du papier à lettre aux États-Unis : 8.5in x 11in.</dd>
-  <dt><code>legal</code></dt>
-  <dd>Ce mot-clé correspond à la taille standard des documents légaux aux États-Unis : 8.5in par 14in.</dd>
-  <dt><code>ledger</code></dt>
-  <dd>Ce mot-clé correspond à la taille standard des pages d'un livre en grand format aux États-Unis. Cela correspond à : 11in x 17in.</dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: css">@page {
+```
+
+### Valeurs
+
+- `auto`
+  - : L'agent utilisateur décidera de la taille de page. En général, ce seront les dimensions de la page cible (celle sur laquelle imprimer/afficher) qui seront utilisées.
+- `landscape`
+  - : Le contenu de la page est affiché en paysage (le côté le plus long de la page sera le côté horizontal).
+- `portrait`
+  - : Le contenu de la page est affiché en portrait (le côté le plus long de la page sera le côté vertical).
+- `<length>`
+  - : Une valeur de longueur (cf. {{cssxref("&lt;length&gt;")}}). La première valeur utilisée correspond à la largeur de la boîte de la page et la deuxième correspond à la hauteur. Si une seule valeur est fournie, celle-ci sera utilisée pour la largeur et pour la hauteur.
+- `<page-size>`
+
+  - : Un mot-clé avec l'une des valeurs suivantes :
+
+    - `A5`
+      - : Ce mot-clé correspond aux dimensions ISO standard : 148mm x 210mm.
+    - `A4`
+      - : Ce mot-clé correspond aux dimensions ISO standard : 210mm x 297mm (c'est le format le plus utilisé pour les impressions occasionnelles sur les imprimantes personnelles).
+    - `A3`
+      - : Ce mot-clé correspond aux dimensions ISO standard : 297mm x 420mm.
+    - `B5`
+      - : Ce mot-clé correspond aux dimensions ISO standard : 176mm x 250mm.
+    - `B4`
+      - : Ce mot-clé correspond aux dimensions ISO standard : 250mm x 353mm.
+    - `JIS-B5`
+      - : Ce mot-clé correspond aux dimensions JIS standard : 182mm x 257mm.
+    - `JIS-B4`
+      - : Ce mot-clé correspond aux dimensions JIS standard : 257mm x 364mm.
+    - `letter`
+      - : Ce mot-clé correspond à la taille standard du papier à lettre aux États-Unis : 8.5in x 11in.
+    - `legal`
+      - : Ce mot-clé correspond à la taille standard des documents légaux aux États-Unis : 8.5in par 14in.
+    - `ledger`
+      - : Ce mot-clé correspond à la taille standard des pages d'un livre en grand format aux États-Unis. Cela correspond à : 11in x 17in.
+
+## Exemples
+
+```css
+@page {
   size: 4cm 6cm landscape;
 }
-</pre>
+```
 
-<pre class="brush: css">@media print {
+```css
+@media print {
   @page {
     size: 50mm 150mm;
   }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Paged Media', '#size', 'size')}}</td>
-   <td>{{Spec2('CSS3 Paged Media')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.page.size")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("@page/bleed", "bleed")}}</li>
- <li>{{cssxref("@page/marks", "marks")}}</li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                    | État                                     | Commentaires         |
+| ---------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Paged Media', '#size', 'size')}} | {{Spec2('CSS3 Paged Media')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.page.size")}}
+
+## Voir aussi
+
+- {{cssxref("@page/bleed", "bleed")}}
+- {{cssxref("@page/marks", "marks")}}
diff --git a/files/fr/web/css/@property/index.md b/files/fr/web/css/@property/index.md
index cdcb5770ff..bc30e0b52f 100644
--- a/files/fr/web/css/@property/index.md
+++ b/files/fr/web/css/@property/index.md
@@ -1,80 +1,80 @@
 ---
 title: '@property'
 slug: Web/CSS/@property
+translation_of: Web/CSS/@property
 browser-compat: css.at-rules.property
-translation_of: 'Web/CSS/@property'
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La règle {{cssxref("at-rule")}} <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>@property</code></strong> fait partie du panel d'API <a href="/fr/docs/Web/Houdini">CSS Houdini</a>, qui permet de définir explicitement leurs propriétés CSS personnalisées (voir {{cssxref('--*', 'CSS custom properties')}}). Cela permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non.</p>
+La règle {{cssxref("at-rule")}} [CSS](/fr/docs/Web/CSS) **`@property`** fait partie du panel d'API [CSS Houdini](/fr/docs/Web/Houdini), qui permet de définir explicitement leurs propriétés CSS personnalisées (voir {{cssxref('--*', 'CSS custom properties')}}). Cela permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non.
 
-<p>La règle <code>@property</code> permet l'enregistrement d'une propriété personnalisée directement dans une feuille de styles sans avoir à utiliser la moindre ligne de JavaScript. Une règle <code>@property</code> valide enregistre une nouvelle propriété personnalisée comme si {{domxref('CSS.registerProperty')}} avait été appelé avec les mêmes paramètres.</p>
+La règle `@property` permet l'enregistrement d'une propriété personnalisée directement dans une feuille de styles sans avoir à utiliser la moindre ligne de JavaScript. Une règle `@property` valide enregistre une nouvelle propriété personnalisée comme si {{domxref('CSS.registerProperty')}} avait été appelé avec les mêmes paramètres.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">@property --property-name {
-  syntax: '&lt;color&gt;';
+```css
+@property --property-name {
+  syntax: '<color>';
   inherits: false;
   initial-value: #c0ffee;
-}</pre>
+}
+```
 
-<h3 id="descriptors">Descripteurs</h3>
+### Descripteurs
 
-<dl>
-  <dt>{{cssxref("@property/syntax","syntax")}}</dt>
-  <dd>Décrit la syntaxe autorisée de la propriété.</dd>
-  <dt>{{cssxref("@property/inherits","inherits")}}</dt>
-  <dd>Détermine si l'enregistrement de la propriété personnalisée spécifiée avec <code>@property</code> hérite ou non par défaut.</dd>
-  <dt>{{cssxref("@property/initial-value","initial-value")}}</dt>
-  <dd>Détermine la valeur initiale de la propriété.</dd>
-</dl>
+- {{cssxref("@property/syntax","syntax")}}
+  - : Décrit la syntaxe autorisée de la propriété.
+- {{cssxref("@property/inherits","inherits")}}
+  - : Détermine si l'enregistrement de la propriété personnalisée spécifiée avec `@property` hérite ou non par défaut.
+- {{cssxref("@property/initial-value","initial-value")}}
+  - : Détermine la valeur initiale de la propriété.
 
-<p>Une règle <code>@property</code> valide enregistre une propriété personnalisée avec comme nom de propriété la sérialisation de du préfixe de la règle.</p>
+Une règle `@property` valide enregistre une propriété personnalisée avec comme nom de propriété la sérialisation de du préfixe de la règle.
 
-<p>Une règle <code>@property</code> nécessite le respecte d'une syntaxe (voir {{cssxref("@property/syntax","syntax")}}) et une description d'héritage (voir {{cssxref("@property/inherits","inherits")}}). Si l'un des deux manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée. Le descripteur {{cssxref("@property/initial-value","initial-value")}} est optionnel, uniquement si la syntaxe est une définition de syntaxe universelle. Sinon, le descripteur est requis (s'il manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée).</p>
+Une règle `@property` nécessite le respecte d'une syntaxe (voir {{cssxref("@property/syntax","syntax")}}) et une description d'héritage (voir {{cssxref("@property/inherits","inherits")}}). Si l'un des deux manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée. Le descripteur {{cssxref("@property/initial-value","initial-value")}} est optionnel, uniquement si la syntaxe est une définition de syntaxe universelle. Sinon, le descripteur est requis (s'il manque, l'ensemble de la règle est invalide et celle-ci doit être ignorée).
 
-<p>Les descripteurs inconnus ne sont pas valides et sont ignorés, mais n'invalident pas l'ensemble de la règle <code>@property</code>.</p>
+Les descripteurs inconnus ne sont pas valides et sont ignorés, mais n'invalident pas l'ensemble de la règle `@property`.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} <code>--my-color</code> en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur :</p>
+Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} `--my-color` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur :
 
-<p>Utilisation de la règle <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/At-rule">at-rule</a>  {{cssxref('@property')}} :</p>
+Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} :
 
-<pre class="brush: css">@property --my-color {
-  syntax: '&lt;color&gt;';
+```css
+@property --my-color {
+  syntax: '<color>';
   inherits: false;
   initial-value: #c0ffee;
 }
-</pre>
+```
 
-<p>Équivalent avec la fonction <a href="/en-US/docs/Web/JavaScript">JavaScript</a> {{domxref('CSS.registerProperty')}} :</p>
+Équivalent avec la fonction [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}} :
 
-<pre class="brush: js">window.CSS.registerProperty({
+```js
+window.CSS.registerProperty({
   name: '--my-color',
-  syntax: '&lt;color&gt;',
+  syntax: '<color>',
   inherits: false,
   initialValue: '#c0ffee',
 });
-</pre>
+```
 
-<h2 id="formal_syntax">Syntaxe formelle</h2>
+## Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/CSS_Properties_and_Values_API">API Propriétés et valeurs CSS</a></li>
-  <li><a href="/fr/docs/Web/API/CSS_Painting_API">API Peinture CSS</a></li>
-  <li><a href="/fr/docs/Web/API/CSS_Typed_OM_API">API Typage de modèle d'objet CSS</a></li>
-  <li><a href="/fr/docs/Web/Houdini">CSS Houdini</a></li>
-</ul>
+- [API Propriétés et valeurs CSS](/fr/docs/Web/API/CSS_Properties_and_Values_API)
+- [API Peinture CSS](/fr/docs/Web/API/CSS_Painting_API)
+- [API Typage de modèle d'objet CSS](/fr/docs/Web/API/CSS_Typed_OM_API)
+- [CSS Houdini](/fr/docs/Web/Houdini)
diff --git a/files/fr/web/css/@supports/index.md b/files/fr/web/css/@supports/index.md
index 163bcdd89f..f142fe1ba4 100644
--- a/files/fr/web/css/@supports/index.md
+++ b/files/fr/web/css/@supports/index.md
@@ -7,154 +7,181 @@ tags:
   - Règle @
 translation_of: Web/CSS/@supports
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La règle <strong><code>@supports</code></strong> permet de définir des déclarations qui dépendent de la prise en charge du navigateur d'une ou plusieurs fonctionnalités CSS. Cette condition est définie par un ensemble de paires de propriété/valeur qui forment une combinaison de conjonctions, disjonctions, négations. Une telle condition est appelée « condition de prise en charge » (ou <em>supports condition</em>).</p>
+La règle **`@supports`** permet de définir des déclarations qui dépendent de la prise en charge du navigateur d'une ou plusieurs fonctionnalités CSS. Cette condition est définie par un ensemble de paires de propriété/valeur qui forment une combinaison de conjonctions, disjonctions, négations. Une telle condition est appelée « condition de prise en charge » (ou _supports condition_).
 
-<pre class="brush: css no-line-numbers">@supports (display: grid) {
+```css
+@supports (display: grid) {
   div {
     display: grid;
   }
-}</pre>
+}
+```
 
-<pre class="brush: css no-line-numbers">@supports not (display: grid) {
+```css
+@supports not (display: grid) {
   div {
     float: right;
   }
-}</pre>
+}
+```
 
-<p><code>@supports</code> permet ainsi au moteur de rendu de tester la présence d'une fonctionnalité (on parle de <em>feature query</em>).</p>
+`@supports` permet ainsi au moteur de rendu de tester la présence d'une fonctionnalité (on parle de _feature query_).
 
-<p>La règle @ <code>@supports</code> peut être utilisée au niveau le plus haut de la feuille de style et également à l'intérieur d'<a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">un groupe de règle conditionnel</a>. Cette règle @ peut être manipulée via le modèle d'objets CSS et JavaScript, notamment via l'interface {{domxref("CSSSupportsRule")}}.</p>
+La règle @ `@supports` peut être utilisée au niveau le plus haut de la feuille de style et également à l'intérieur d'[un groupe de règle conditionnel](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). Cette règle @ peut être manipulée via le modèle d'objets CSS et JavaScript, notamment via l'interface {{domxref("CSSSupportsRule")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une condition de prise en charge se compose d'une ou plusieurs déclarations combinées entre elles par des opérateurs logiques (<code>and</code>, <code>or</code>, <code>not</code>). La précédence des opérateurs peut être surchargée en utilisant des parenthèses autour des déclarations.</p>
+Une condition de prise en charge se compose d'une ou plusieurs déclarations combinées entre elles par des opérateurs logiques (`and`, `or`, `not`). La précédence des opérateurs peut être surchargée en utilisant des parenthèses autour des déclarations.
 
-<h3 id="Syntaxe_déclarative">Syntaxe déclarative</h3>
+### Syntaxe déclarative
 
-<p>La plus simple expression est une déclaration CSS, c'est-à-dire un nom de propriété CSS suivi par deux points (:) puis une valeur. Ainsi, l'expression suivante :</p>
+La plus simple expression est une déclaration CSS, c'est-à-dire un nom de propriété CSS suivi par deux points (:) puis une valeur. Ainsi, l'expression suivante :
 
-<pre class="brush:css">@supports ( transform-origin: 5% 5% ) { }</pre>
+```css
+@supports ( transform-origin: 5% 5% ) { }
+```
 
-<p>renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur <code>5% 5%</code> est valide.</p>
+renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur `5% 5%` est valide.
 
-<p>Une déclaration CSS est toujours encadrée par des parenthèses.</p>
+Une déclaration CSS est toujours encadrée par des parenthèses.
 
-<h3 id="Syntaxe_fonctionnelle">Syntaxe fonctionnelle</h3>
+### Syntaxe fonctionnelle
 
-<p>La deuxième syntaxe permet d'utiliser une fonction. Cette syntaxe est prise en charge par les différents navigateurs mais les fonctions sont en cours de standardisation.</p>
+La deuxième syntaxe permet d'utiliser une fonction. Cette syntaxe est prise en charge par les différents navigateurs mais les fonctions sont en cours de standardisation.
 
-<h4 id="selector_Experimental_inline"><code>selector()</code> {{Experimental_inline}}</h4>
+#### `selector()` {{Experimental_inline}}
 
-<p>Dans l'exemple qui suit, on teste si le navigateur prend en charge la syntaxe du sélecteur passé en argument. Ici, le code renvoie VRAI si le navigateur prend en charge les <a href="/fr/docs/Web/CSS/Sélecteurs_enfant">sélecteurs enfants</a></p>
+Dans l'exemple qui suit, on teste si le navigateur prend en charge la syntaxe du sélecteur passé en argument. Ici, le code renvoie VRAI si le navigateur prend en charge les [sélecteurs enfants](/fr/docs/Web/CSS/Sélecteurs_enfant)
 
-<pre class="brush: css">@supports selector(A &gt; B) { }</pre>
+```css
+@supports selector(A > B) { }
+```
 
-<h3 id="Lopérateur_not">L'opérateur <code>not</code></h3>
+### L'opérateur `not`
 
-<p>L'opérateur <code>not</code> peut être utilisée avant une expression afin de créer un expression dont le résultat logique est la négation du résultat de l'expression originale. Ainsi, l'expression suivante :</p>
+L'opérateur `not` peut être utilisée avant une expression afin de créer un expression dont le résultat logique est la négation du résultat de l'expression originale. Ainsi, l'expression suivante :
 
-<pre class="brush:css">@supports not ( transform-origin: 10em 10em 10em ) { }</pre>
+```css
+@supports not ( transform-origin: 10em 10em 10em ) { }
+```
 
-<p>renvoie VRAI si la propriété {{cssxref("transform-origin")}} du navigateur ne considère pas la valeur <code>10em 10em 10em</code> comme valide.</p>
+renvoie VRAI si la propriété {{cssxref("transform-origin")}} du navigateur ne considère pas la valeur `10em 10em 10em` comme valide.
 
-<p>Comme pour les autres opérateurs, on peut appliquer l'opérateur <code>not</code> à une déclaration, quelle que soit sa complexité. Les exemples qui suivent sont donc des expressions valides :</p>
+Comme pour les autres opérateurs, on peut appliquer l'opérateur `not` à une déclaration, quelle que soit sa complexité. Les exemples qui suivent sont donc des expressions valides :
 
-<pre class="brush:css">@supports not ( not ( transform-origin: 2px ) ) { }
-@supports (display: grid) and ( not (display: inline-grid) ) { }</pre>
+```css
+@supports not ( not ( transform-origin: 2px ) ) { }
+@supports (display: grid) and ( not (display: inline-grid) ) { }
+```
 
-<div class="note">
-<p><strong>Note :</strong> Au niveau le plus haut, il n'est pas nécessaire d'encadrer l'opérateur <code>not</code> entre parenthèses. Si on souhaite le combiner avec d'autres opérateurs comme <code>and</code> ou <code>or</code>, il faudra utiliser des parenthèses.</p>
-</div>
+> **Note :** Au niveau le plus haut, il n'est pas nécessaire d'encadrer l'opérateur `not` entre parenthèses. Si on souhaite le combiner avec d'autres opérateurs comme `and` ou `or`, il faudra utiliser des parenthèses.
 
-<h3 id="Lopérateur_and">L'opérateur <code>and</code></h3>
+### L'opérateur `and`
 
-<p>L'opérateur <code>and</code> peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la conjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si et seulement si les deux expressions de départ sont vraies et FAUX sinon. Dans l'exemple suivant, l'expression complète ne sera vérifiée que si les deux expressions sont vérifiées :</p>
+L'opérateur `and` peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la conjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si et seulement si les deux expressions de départ sont vraies et FAUX sinon. Dans l'exemple suivant, l'expression complète ne sera vérifiée que si les deux expressions sont vérifiées :
 
-<pre class="brush:css">@supports (display: table-cell) and (display: list-item) { }</pre>
+```css
+@supports (display: table-cell) and (display: list-item) { }
+```
 
-<p>On peut enchaîner plusieurs conjonctions sans avoir à ajouter de parenthèses (l'opérateur est commutatif).</p>
+On peut enchaîner plusieurs conjonctions sans avoir à ajouter de parenthèses (l'opérateur est commutatif).
 
-<pre class="brush:css">@supports (display: table-cell) and (display: list-item) and (display:run-in) { }</pre>
+```css
+@supports (display: table-cell) and (display: list-item) and (display:run-in) { }
+```
 
-<p>sera équivalente à :</p>
+sera équivalente à :
 
-<pre class="brush:css">@supports (display: table-cell) and ((display: list-item) and (display:run-in)) { }</pre>
+```css
+@supports (display: table-cell) and ((display: list-item) and (display:run-in)) { }
+```
 
-<h3 id="Lopérateur_or">L'opérateur <code>or</code></h3>
+### L'opérateur `or`
 
-<p>L'opérateur <code>or</code> peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la disjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si au moins une des deux expressions est vraie. Dans l'exemple qui suit, l'expression complète est vérifiée si au moins une des deux (ce peuvent être les deux) expressions est vérifiée :</p>
+L'opérateur `or` peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la disjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si au moins une des deux expressions est vraie. Dans l'exemple qui suit, l'expression complète est vérifiée si au moins une des deux (ce peuvent être les deux) expressions est vérifiée :
 
-<pre class="brush:css;">@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) { }</pre>
+```css
+@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) { }
+```
 
-<p>On peut enchaîner plusieurs disjonctions sans qu'il soit nécessaire d'ajouter des parenthèses.</p>
+On peut enchaîner plusieurs disjonctions sans qu'il soit nécessaire d'ajouter des parenthèses.
 
-<pre class="brush:css">@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
-          ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  ) { }</pre>
+```css
+@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
+          ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  ) { }
+```
 
-<p>sera ainsi équivalente à :</p>
+sera ainsi équivalente à :
 
-<pre class="brush:css">@supports ( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
-          (( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  ))) { }</pre>
+```css
+@supports ( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
+          (( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  ))) { }
+```
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utilise à la fois l'opérateur <code>and</code> et l'opérateur <code>or</code>, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.</p>
-</div>
+> **Note :** Lorsqu'on utilise à la fois l'opérateur `and` et l'opérateur `or`, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Tester_la_prise_en_charge_dune_propriété_CSS_donnée">Tester la prise en charge d'une propriété CSS donnée</h3>
+### Tester la prise en charge d'une propriété CSS donnée
 
-<pre class="brush:css;">@supports (animation-name: test) {
+```css
+@supports (animation-name: test) {
     … /* Du code CSS spécifique, appliqué quand les animations sont prises en charge sans préfixe */
     @keyframes { /* @supports est une règle @ qui peut inclure d'autres règles @ */
       …
     }
 }
-</pre>
+```
 
-<h3 id="Tester_la_prise_en_charge_dune_propriété_CSS_donnée_ou_dune_version_préfixée">Tester la prise en charge d'une propriété CSS donnée ou d'une version préfixée</h3>
+### Tester la prise en charge d'une propriété CSS donnée ou d'une version préfixée
 
-<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+```css
+@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
             (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
     … /* Du code CSS spécifique, appliqué lorsque les transformations 3D,
          sont prises en charge, éventuellement avec un préfixe */
 }
-</pre>
+```
 
-<h3 id="Tester_labsence_de_prise_en_charge_dune_propriété_CSS">Tester l'absence de prise en charge d'une propriété CSS</h3>
+### Tester l'absence de prise en charge d'une propriété CSS
 
-<pre class="brush:css;">@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+```css
+@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
     … /* Du code CSS spécifique, appliqué pour simuler text-align-last:justify */
-}</pre>
+}
+```
 
-<h3 id="Tester_la_prise_en_charge_des_propriétés_personnalisées">Tester la prise en charge des propriétés personnalisées</h3>
+### Tester la prise en charge des propriétés personnalisées
 
-<pre class="brush:css;">@supports (--toto: green) {
+```css
+@supports (--toto: green) {
   body {
     color: --nomVar;
   }
-}</pre>
+}
+```
 
-<h3 id="Tester_la_prise_en_charge_dun_sélecteur">Tester la prise en charge d'un sélecteur</h3>
+### Tester la prise en charge d'un sélecteur
 
-<p>{{SeeCompatTable}}</p>
+{{SeeCompatTable}}
 
-<pre class="brush: css;">/* Cette règle ne sera pas appliquée si le navigateur */
+```css
+/* Cette règle ne sera pas appliquée si le navigateur */
 /* ne prend pas en charge :is() */
-:is(ul, ol) &gt; li {
+:is(ul, ol) > li {
   … /* Le CSS à utiliser lorsque :is(…) est pris en charge */
 }
 
 @supports not selector(:is(a, b)) {
   /* Que faire lorsque :is() n'est pas pris en charge */
-  ul &gt; li,
-  ol &gt; li {
+  ul > li,
+  ol > li {
     …
   }
 }
@@ -164,44 +191,25 @@ translation_of: Web/CSS/@supports
   /* Sinon elle pourra être partiellement appliquée pour les */
   /* navigateurs qui ne prennent pas en charge :is(…) */
   :is(nth-child(1n of ul, ol) a,
-  details &gt; summary) {
+  details > summary) {
     … /* CSS appliqué quand le sélecteur :is(…) et quand la forme
          `of` pour :nth-child sont pris en charge */
   }
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Conditional", "#at-supports", "@supports")}}</td>
-   <td>{{Spec2("CSS4 Conditional")}}</td>
-   <td>Ajout de la fonction <code>selector()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}</td>
-   <td>{{Spec2("CSS3 Conditional")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.supports")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La classe CSSOM {{domxref("CSSSupportsRule")}}</li>
- <li>La méthode {{domxref("CSS.supports")}} qui permet d'effectuer les mêmes vérifications via JavaScript.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                                     | Commentaires                       |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- |
+| {{SpecName("CSS4 Conditional", "#at-supports", "@supports")}} | {{Spec2("CSS4 Conditional")}} | Ajout de la fonction `selector()`. |
+| {{SpecName("CSS3 Conditional", "#at-supports", "@supports")}} | {{Spec2("CSS3 Conditional")}} | Définition initiale.               |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.supports")}}
+
+## Voir aussi
+
+- La classe CSSOM {{domxref("CSSSupportsRule")}}
+- La méthode {{domxref("CSS.supports")}} qui permet d'effectuer les mêmes vérifications via JavaScript.
diff --git a/files/fr/web/css/@viewport/index.md b/files/fr/web/css/@viewport/index.md
index b14056c7ea..e27650eec2 100644
--- a/files/fr/web/css/@viewport/index.md
+++ b/files/fr/web/css/@viewport/index.md
@@ -8,66 +8,65 @@ tags:
   - Règle @
 translation_of: Web/CSS/@viewport
 ---
-<div>{{SeeCompatTable}}{{CSSRef}}</div>
+{{SeeCompatTable}}{{CSSRef}}
 
-<p>La règle @<strong> <code>@viewport</code></strong> permet de configurer la zone d'affichage (le <em>viewport</em> en anglais) à travers laquelle le document est affiché. Cette règle est principalement utilisée pour les appareils mobiles mais aussi pour les navigateurs de bureau (par exemple Microsoft Edge qui gère la division de l'écran).</p>
+La règle @** `@viewport`** permet de configurer la zone d'affichage (le _viewport_ en anglais) à travers laquelle le document est affiché. Cette règle est principalement utilisée pour les appareils mobiles mais aussi pour les navigateurs de bureau (par exemple Microsoft Edge qui gère la division de l'écran).
 
-<p>Les longueurs exprimées en pourcentages sont calculées de façon relative à la <strong>zone d'affichage initiale</strong> c'est-à-dire le <em>viewport</em> avant tout ajustement effectué par le navigateur ou par les styles de la page. Généralement, cela correspond à la taille de la fenêtre pour les navigateurs de bureau lorsqu'ils ne sont pas utilisés en mode plein écran.</p>
+Les longueurs exprimées en pourcentages sont calculées de façon relative à la **zone d'affichage initiale** c'est-à-dire le _viewport_ avant tout ajustement effectué par le navigateur ou par les styles de la page. Généralement, cela correspond à la taille de la fenêtre pour les navigateurs de bureau lorsqu'ils ne sont pas utilisés en mode plein écran.
 
-<p>Pour les appareils mobiles (ou pour les appareils de bureau qui sont en plein écran), la zone d'affichage initiale correspond à la portion de l'écran disponible pour l'application. Cela peut correspondre à l'écran entier ou bien à l'écran auquel on enlève les zones contrôlées par le système d'exploitation (par exemple la barre de tâche) ou bien encore à la zone de l'écran qui n'est pas occupée par le système d'exploitation ou d'autres applications.</p>
+Pour les appareils mobiles (ou pour les appareils de bureau qui sont en plein écran), la zone d'affichage initiale correspond à la portion de l'écran disponible pour l'application. Cela peut correspondre à l'écran entier ou bien à l'écran auquel on enlève les zones contrôlées par le système d'exploitation (par exemple la barre de tâche) ou bien encore à la zone de l'écran qui n'est pas occupée par le système d'exploitation ou d'autres applications.
 
-<pre class="brush: css no-line-numbers">@viewport {
+```css
+@viewport {
   width: device-width;
-}</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Cette règle @ contient un ensemble de descripteurs CSS dans un bloc délimité par des accolades.</p>
-
-<p>Un facteur de zoom de <code>1.0</code> ou de <code>100%</code> signifie qu'il n'y a eu aucun zoom. Si la valeur est supérieure, cela signifie qu'on a zoomé pour agrandir le contenu. Inversement, si la valeur est inférieure à <code>1.0</code> ou à <code>100%</code>, cela signifie qu'on a dézoomé.</p>
-
-<h3 id="Descripteurs">Descripteurs</h3>
-
-<p>Les navigateurs sont supposés ignorer les descripteurs non reconnus.</p>
-
-<dl>
- <dt>{{cssxref("@viewport/min-width","min-width")}}</dt>
- <dd>Ce descripteur détermine la largeur minimale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
- <dt>{{cssxref("@viewport/max-width","max-width")}}</dt>
- <dd>Ce descripteur détermine la largeur maximale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
- <dt>{{cssxref("@viewport/width","width")}}</dt>
- <dd>Ce descripteur est un raccourci qui permet de définir <code>min-width</code> et <code>max-width</code>.</dd>
- <dt>{{cssxref("@viewport/min-height","min-height")}}</dt>
- <dd>Ce descripteur détermine la hauteur minimale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
- <dt>{{cssxref("@viewport/max-height","max-height")}}</dt>
- <dd>Ce descripteur détermine la hauteur maximale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
- <dt>{{cssxref("@viewport/height","height")}}</dt>
- <dd>Ce descripteur est un raccourci qui permet de définir <code>min-height</code> et <code>max-height</code>.</dd>
- <dt>{{cssxref("@viewport/zoom","zoom")}}</dt>
- <dd>Ce descripteur permet de définir le niveau de zoom initial.</dd>
- <dt>{{cssxref("@viewport/min-zoom","min-zoom")}}</dt>
- <dd>Ce descripteur permet de définir le niveau de zoom minimal.</dd>
- <dt>{{cssxref("@viewport/max-zoom","max-zoom")}}</dt>
- <dd>Ce descripteur permet de définir le niveau de zoom maximal.</dd>
- <dt>{{cssxref("@viewport/user-zoom","user-zoom")}}</dt>
- <dd>Ce descripteur indique si l'utilisateur peut, ou non, changer le niveau de zoom.</dd>
- <dt>{{cssxref("@viewport/orientation","orientation")}}</dt>
- <dd>Ce descripteur contrôle l'orientation du document.</dd>
- <dt>{{cssxref("@viewport/ viewport-fit", "viewport-fit")}}</dt>
- <dd>Ce descripteur contrôle l'affichage du document pour les affichages non-rectangulaires.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong>Un facteur de zoom de <code>1.0</code> ou <code>100%</code> correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.</p>
-</div>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+}
+```
+
+## Syntaxe
+
+Cette règle @ contient un ensemble de descripteurs CSS dans un bloc délimité par des accolades.
+
+Un facteur de zoom de `1.0` ou de `100%` signifie qu'il n'y a eu aucun zoom. Si la valeur est supérieure, cela signifie qu'on a zoomé pour agrandir le contenu. Inversement, si la valeur est inférieure à `1.0` ou à `100%`, cela signifie qu'on a dézoomé.
+
+### Descripteurs
+
+Les navigateurs sont supposés ignorer les descripteurs non reconnus.
+
+- {{cssxref("@viewport/min-width","min-width")}}
+  - : Ce descripteur détermine la largeur minimale de la zone d'affichage (_viewport_) lorsque le document est affiché initialement.
+- {{cssxref("@viewport/max-width","max-width")}}
+  - : Ce descripteur détermine la largeur maximale de la zone d'affichage (_viewport_) lorsque le document est affiché initialement.
+- {{cssxref("@viewport/width","width")}}
+  - : Ce descripteur est un raccourci qui permet de définir `min-width` et `max-width`.
+- {{cssxref("@viewport/min-height","min-height")}}
+  - : Ce descripteur détermine la hauteur minimale de la zone d'affichage (_viewport_) lorsque le document est affiché initialement.
+- {{cssxref("@viewport/max-height","max-height")}}
+  - : Ce descripteur détermine la hauteur maximale de la zone d'affichage (_viewport_) lorsque le document est affiché initialement.
+- {{cssxref("@viewport/height","height")}}
+  - : Ce descripteur est un raccourci qui permet de définir `min-height` et `max-height`.
+- {{cssxref("@viewport/zoom","zoom")}}
+  - : Ce descripteur permet de définir le niveau de zoom initial.
+- {{cssxref("@viewport/min-zoom","min-zoom")}}
+  - : Ce descripteur permet de définir le niveau de zoom minimal.
+- {{cssxref("@viewport/max-zoom","max-zoom")}}
+  - : Ce descripteur permet de définir le niveau de zoom maximal.
+- {{cssxref("@viewport/user-zoom","user-zoom")}}
+  - : Ce descripteur indique si l'utilisateur peut, ou non, changer le niveau de zoom.
+- {{cssxref("@viewport/orientation","orientation")}}
+  - : Ce descripteur contrôle l'orientation du document.
+- {{cssxref("@viewport/ viewport-fit", "viewport-fit")}}
+  - : Ce descripteur contrôle l'affichage du document pour les affichages non-rectangulaires.
+
+> **Note :**Un facteur de zoom de `1.0` ou `100%` correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@viewport {
+```css
+@viewport {
   min-width: 640px;
   max-width: 800px;
 }
@@ -80,39 +79,21 @@ translation_of: Web/CSS/@viewport
 
 @viewport {
   orientation: landscape;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td>
-   <td>{{Spec2("CSS Round Display")}}</td>
-   <td>Définition du descripteur {{cssxref("@viewport/viewport-fit", "viewport-fit")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
-   <td>{{Spec2('CSS3 Device')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.viewport")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{HTMLElement("meta")}} et plus précisément <code>&lt;meta name="viewport"&gt;</code></li>
- <li><a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport">Utiliser la balise <code>meta</code> afin de contrôler la disposition sur les navigateurs mobiles</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                                     | Commentaires                                                                                        |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}} | {{Spec2("CSS Round Display")}} | Définition du descripteur {{cssxref("@viewport/viewport-fit", "viewport-fit")}}. |
+| {{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}                 | {{Spec2('CSS3 Device')}}         | Définition initiale.                                                                                |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.at-rules.viewport")}}
+
+## Voir aussi
+
+- {{HTMLElement("meta")}} et plus précisément `<meta name="viewport">`
+- [Utiliser la balise `meta` afin de contrôler la disposition sur les navigateurs mobiles](/fr/docs/Mozilla/Mobile/Balise_meta_viewport)
diff --git a/files/fr/web/css/_colon_-moz-broken/index.md b/files/fr/web/css/_colon_-moz-broken/index.md
index cab1b281e3..4e006e5f91 100644
--- a/files/fr/web/css/_colon_-moz-broken/index.md
+++ b/files/fr/web/css/_colon_-moz-broken/index.md
@@ -1,43 +1,45 @@
 ---
 title: ':-moz-broken'
-slug: 'Web/CSS/:-moz-broken'
+slug: Web/CSS/:-moz-broken
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-broken'
+translation_of: Web/CSS/:-moz-broken
 ---
-<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
 
-<p>La <a href="/en-US/docs/Web/CSS">p</a><a href="/fr/docs/Web/CSS/Pseudo-classes">seudo-class CSS</a> <code>:-moz-broken </code>s'adapte aux éléments qui représentent des liens cassés vers des images.</p>
+La [p](/en-US/docs/Web/CSS)[seudo-class CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-broken `s'adapte aux éléments qui représentent des liens cassés vers des images.
 
-<p>Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes.</p>
+Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">:-moz-broken</pre>
+    :-moz-broken
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;img src="broken.jpg" alt="Cette image ne fonctionne pas. :-("&gt;</pre>
+```html
+<img src="broken.jpg" alt="Cette image ne fonctionne pas. :-(">
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">:-moz-broken {
+```css
+:-moz-broken {
   background: bisque;
   padding: 8px;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{bug("11011")}}</li>
- <li>{{cssxref(":-moz-loading")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}</li>
-</ul>
+- {{bug("11011")}}
+- {{cssxref(":-moz-loading")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}
diff --git a/files/fr/web/css/_colon_-moz-drag-over/index.md b/files/fr/web/css/_colon_-moz-drag-over/index.md
index f8ef38f055..07b3e2e36c 100644
--- a/files/fr/web/css/_colon_-moz-drag-over/index.md
+++ b/files/fr/web/css/_colon_-moz-drag-over/index.md
@@ -1,44 +1,45 @@
 ---
 title: ':-moz-drag-over'
-slug: 'Web/CSS/:-moz-drag-over'
+slug: Web/CSS/:-moz-drag-over
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-drag-over'
+translation_of: Web/CSS/:-moz-drag-over
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>La pseudo-classe <strong><code>:-moz-drag-over</code></strong> permet de mettre en forme un élément lorsqu'un événement <code>drag-over</code> est appelé dessus.</p>
+La pseudo-classe **`:-moz-drag-over`** permet de mettre en forme un élément lorsqu'un événement `drag-over` est appelé dessus.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>element</var>:-moz-drag-over { <em>propriétés de mise en forme</em> }
-</pre>
+    element:-moz-drag-over { propriétés de mise en forme }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">td:-moz-drag-over {
+```css
+td:-moz-drag-over {
   color: red;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;table border="1"&gt;
-  &lt;tr&gt;
-    &lt;td width="100px" height="100px"&gt;Drag Over&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-</pre>
+```html
+<table border="1">
+  <tr>
+    <td width="100px" height="100px">Drag Over</td>
+  </tr>
+</table>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+{{EmbedLiveSample("Exemples","200","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
diff --git a/files/fr/web/css/_colon_-moz-first-node/index.md b/files/fr/web/css/_colon_-moz-first-node/index.md
index 74fcd7f5bb..6007b9e0d4 100644
--- a/files/fr/web/css/_colon_-moz-first-node/index.md
+++ b/files/fr/web/css/_colon_-moz-first-node/index.md
@@ -1,58 +1,55 @@
 ---
 title: ':-moz-first-node'
-slug: 'Web/CSS/:-moz-first-node'
+slug: Web/CSS/:-moz-first-node
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-first-node'
+translation_of: Web/CSS/:-moz-first-node
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>La pseudo-classe <strong><code>:-moz-first-node</code></strong> correspond à un élément si celui-ci est le premier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":first-child")}} car elle ne cible pas le premier élément qui possède du texte (hors blancs).</p>
+La pseudo-classe **`:-moz-first-node`** correspond à un élément si celui-ci est le premier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":first-child")}} car elle ne cible pas le premier élément qui possède du texte (hors blancs).
 
-<div class="note">
-  <p><strong>Note :</strong> Tout blanc qui serait au début d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p>
-</div>
+> **Note :** Tout blanc qui serait au début d'un élément est ignoré pour la détermination de `:-moz-last-node`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>span</var>:-moz-first-node { <em>propriétés de mise en forme</em> }
-</pre>
+    span:-moz-first-node { propriétés de mise en forme }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">span:-moz-first-node {
+```css
+span:-moz-first-node {
   background-color: lime;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;p&gt;
-  &lt;span&gt;:-moz-first-node&lt;/span&gt;
-  &lt;span&gt;:-moz-last-node&lt;/span&gt;
-&lt;/p&gt;
-&lt;p&gt;
+```html
+<p>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</p>
+<p>
   Bip bop bip bop
-  &lt;span&gt;Cet élément n'est pas ciblé car il y a du texte avant.&lt;/span&gt;
-&lt;/p&gt;
-</pre>
+  <span>Cet élément n'est pas ciblé car il y a du texte avant.</span>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "220", "20")}}</p>
+{{EmbedLiveSample("Exemples", "220", "20")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-last-node")}}</li>
- <li>{{cssxref(":last-child")}}</li>
-</ul>
+- {{cssxref(":-moz-last-node")}}
+- {{cssxref(":last-child")}}
diff --git a/files/fr/web/css/_colon_-moz-focusring/index.md b/files/fr/web/css/_colon_-moz-focusring/index.md
index 6e6181fb70..4734e1c6f9 100644
--- a/files/fr/web/css/_colon_-moz-focusring/index.md
+++ b/files/fr/web/css/_colon_-moz-focusring/index.md
@@ -1,32 +1,31 @@
 ---
 title: ':-moz-focusring'
-slug: 'Web/CSS/:-moz-focusring'
+slug: Web/CSS/:-moz-focusring
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-focusring'
+translation_of: Web/CSS/:-moz-focusring
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>La pseudo-classe <strong><code>:-moz-focusring</code></strong> est similaire à la pseudo-classe {{cssxref(":focus")}} mais ne cible un élément que si celui-ci a le focus <strong>et</strong> qu'un indicateur doit être dessiné autour ou sur cet élément.</p>
+La pseudo-classe **`:-moz-focusring`** est similaire à la pseudo-classe {{cssxref(":focus")}} mais ne cible un élément que si celui-ci a le focus **et** qu'un indicateur doit être dessiné autour ou sur cet élément.
 
-<p>Si <code>:-moz-focusring</code> correspond à un élément, <code>:focus</code> correspondra également (bien que l'inverse ne soit pas toujours vrai). Cela dépend de l'agent utilisateur qui indique si un anneau de focus doit être dessiné sur l'élément qui a reçu le focus. Cette indication dépend fortement du système d'exploitation et le comportement de cette pseudo-classe diffèrera donc selon les plateformes et/ou les paramètres du système.</p>
+Si `:-moz-focusring` correspond à un élément, `:focus` correspondra également (bien que l'inverse ne soit pas toujours vrai). Cela dépend de l'agent utilisateur qui indique si un anneau de focus doit être dessiné sur l'élément qui a reçu le focus. Cette indication dépend fortement du système d'exploitation et le comportement de cette pseudo-classe diffèrera donc selon les plateformes et/ou les paramètres du système.
 
-<div class="note">
-<p><strong>Note :</strong> Les développeurs utilisent souvent <code>:-moz-focusring</code> pour différencier l'atteinte du focus via le <strong>clic de la souris</strong> ou via <strong>la navigation au clavier (avec la tabulation)</strong>. Cette pseudo-classe est également utile si on crée un <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">élément personnalisé</a> dont on veut changer le style en fonction de son comportement.</p>
-</div>
+> **Note :** Les développeurs utilisent souvent `:-moz-focusring` pour différencier l'atteinte du focus via le **clic de la souris** ou via **la navigation au clavier (avec la tabulation)**. Cette pseudo-classe est également utile si on crée un [élément personnalisé](/en-US/docs/Web/Web_Components/Using_custom_elements) dont on veut changer le style en fonction de son comportement.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">:-moz-focusring</pre>
+    :-moz-focusring
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input {
+```css
+input {
   margin: 5px;
 }
 
@@ -34,26 +33,26 @@ translation_of: 'Web/CSS/:-moz-focusring'
   color: red;
   outline: 2px dotted green;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input/&gt;</pre>
+```html
+<input/>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemple")}}</p>
+{{EmbedLiveSample("Exemple")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette fonctionnalité ne fait partie d'aucune spécification bien qu'elle ait <a href="https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html">discutée avec le groupe de travail</a> et qu'il a été <a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">conclus de son ajout dans la spécification CSS sur les sélecteurs de niveau 4 ou 5</a>.</p>
+Cette fonctionnalité ne fait partie d'aucune spécification bien qu'elle ait [discutée avec le groupe de travail](https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html) et qu'il a été [conclus de son ajout dans la spécification CSS sur les sélecteurs de niveau 4 ou 5](https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html).
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-focusring")}}</p>
+{{Compat("css.selectors.-moz-focusring")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{bug("418521")}}</li>
-</ul>
+- {{bug("418521")}}
diff --git a/files/fr/web/css/_colon_-moz-handler-blocked/index.md b/files/fr/web/css/_colon_-moz-handler-blocked/index.md
index 0168f703f5..ef0e403061 100644
--- a/files/fr/web/css/_colon_-moz-handler-blocked/index.md
+++ b/files/fr/web/css/_colon_-moz-handler-blocked/index.md
@@ -1,26 +1,24 @@
 ---
 title: ':-moz-handler-blocked'
-slug: 'Web/CSS/:-moz-handler-blocked'
+slug: Web/CSS/:-moz-handler-blocked
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-handler-blocked'
+translation_of: Web/CSS/:-moz-handler-blocked
 ---
-<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
 
-<p>La pseudo-classe <strong><code>:-moz-handler-blocked</code></strong> permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été bloqué par l'utilisateur.</p>
+La pseudo-classe **`:-moz-handler-blocked`** permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été bloqué par l'utilisateur.
 
-<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+Cette pseudo-classe est principalement destinée aux développeurs de thèmes.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-handler-crashed")}}</li>
- <li>{{cssxref(":-moz-handler-disabled")}}</li>
-</ul>
+- {{cssxref(":-moz-handler-crashed")}}
+- {{cssxref(":-moz-handler-disabled")}}
diff --git a/files/fr/web/css/_colon_-moz-handler-crashed/index.md b/files/fr/web/css/_colon_-moz-handler-crashed/index.md
index 72f1bdff9f..02567714c9 100644
--- a/files/fr/web/css/_colon_-moz-handler-crashed/index.md
+++ b/files/fr/web/css/_colon_-moz-handler-crashed/index.md
@@ -1,26 +1,24 @@
 ---
 title: ':-moz-handler-crashed'
-slug: 'Web/CSS/:-moz-handler-crashed'
+slug: Web/CSS/:-moz-handler-crashed
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-handler-crashed'
+translation_of: Web/CSS/:-moz-handler-crashed
 ---
-<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}</div>
+{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}
 
-<p>La pseudo-classe <strong><code>:-moz-handler-crashed</code></strong> permet de cibler un élément qui ne peut pas être affiché car le plugin sensé le dessiner a planté.</p>
+La pseudo-classe **`:-moz-handler-crashed`** permet de cibler un élément qui ne peut pas être affiché car le plugin sensé le dessiner a planté.
 
-<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+Cette pseudo-classe est principalement destinée aux développeurs de thèmes.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.}</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-handler-blocked")}}</li>
- <li>{{cssxref(":-moz-handler-disabled")}}</li>
-</ul>
+- {{cssxref(":-moz-handler-blocked")}}
+- {{cssxref(":-moz-handler-disabled")}}
diff --git a/files/fr/web/css/_colon_-moz-handler-disabled/index.md b/files/fr/web/css/_colon_-moz-handler-disabled/index.md
index 12ade56fe0..b8b8b3de39 100644
--- a/files/fr/web/css/_colon_-moz-handler-disabled/index.md
+++ b/files/fr/web/css/_colon_-moz-handler-disabled/index.md
@@ -1,26 +1,24 @@
 ---
 title: ':-moz-handler-disabled'
-slug: 'Web/CSS/:-moz-handler-disabled'
+slug: Web/CSS/:-moz-handler-disabled
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-handler-disabled'
+translation_of: Web/CSS/:-moz-handler-disabled
 ---
-<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
 
-<p>La pseudo-classe <strong><code>:-moz-handler-disabled</code></strong> permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été désactivé par l'utilisateur.</p>
+La pseudo-classe **`:-moz-handler-disabled`** permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été désactivé par l'utilisateur.
 
-<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+Cette pseudo-classe est principalement destinée aux développeurs de thèmes.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-handler-blocked")}}</li>
- <li>{{cssxref(":-moz-handler-crashed")}}</li>
-</ul>
+- {{cssxref(":-moz-handler-blocked")}}
+- {{cssxref(":-moz-handler-crashed")}}
diff --git a/files/fr/web/css/_colon_-moz-last-node/index.md b/files/fr/web/css/_colon_-moz-last-node/index.md
index aab079a2e6..b2d49eef88 100644
--- a/files/fr/web/css/_colon_-moz-last-node/index.md
+++ b/files/fr/web/css/_colon_-moz-last-node/index.md
@@ -1,58 +1,55 @@
 ---
 title: ':-moz-last-node'
-slug: 'Web/CSS/:-moz-last-node'
+slug: Web/CSS/:-moz-last-node
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-last-node'
+translation_of: Web/CSS/:-moz-last-node
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>La pseudo-classe <strong><code>:-moz-last-node</code></strong> correspond à un élément si celui-ci est le dernier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":last-child")}} car elle ne cible pas le dernier élément qui possède du texte (hors blancs).</p>
+La pseudo-classe **`:-moz-last-node`** correspond à un élément si celui-ci est le dernier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":last-child")}} car elle ne cible pas le dernier élément qui possède du texte (hors blancs).
 
-<div class="note">
-  <p><strong>Note :</strong> Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p>
-</div>
+> **Note :** Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de `:-moz-last-node`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>span</var>:-moz-last-node { <em>propriétés de mise en forme</em> }
-</pre>
+    span:-moz-last-node { propriétés de mise en forme }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">span:-moz-last-node {
+```css
+span:-moz-last-node {
   background-color: lime;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;p&gt;
-  &lt;span&gt;:-moz-first-node&lt;/span&gt;
-  &lt;span&gt;:-moz-last-node&lt;/span&gt;
-&lt;/p&gt;
-&lt;p&gt;
-  &lt;span&gt;Cet élément n'est pas ciblé car il est suivi par du texte.&lt;/span&gt;
+```html
+<p>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</p>
+<p>
+  <span>Cet élément n'est pas ciblé car il est suivi par du texte.</span>
   Bip bop bip bop.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "220", "20")}}</p>
+{{EmbedLiveSample("Exemples", "220", "20")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-first-node")}}</li>
- <li>{{cssxref(":last-child")}}</li>
-</ul>
+- {{cssxref(":-moz-first-node")}}
+- {{cssxref(":last-child")}}
diff --git a/files/fr/web/css/_colon_-moz-list-bullet/index.md b/files/fr/web/css/_colon_-moz-list-bullet/index.md
index 8bbfcb6954..cc220e95b1 100644
--- a/files/fr/web/css/_colon_-moz-list-bullet/index.md
+++ b/files/fr/web/css/_colon_-moz-list-bullet/index.md
@@ -9,48 +9,49 @@ tags:
 translation_of: Web/CSS/:-moz-list-bullet
 original_slug: Web/CSS/::-moz-list-bullet
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément CSS</a> non-standard <strong><code>::-moz-list-bullet</code></strong> de Mozilla est utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément {{htmlelement("li")}}) contenu dans un élément {{htmlelement("ul")}}).</p>
+Le [pseudo-élément CSS](/fr/docs/Web/CSS/Pseudo-éléments) non-standard **`::-moz-list-bullet`** de Mozilla est utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément {{htmlelement("li")}}) contenu dans un élément {{htmlelement("ul")}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">li::-moz-list-bullet { <em>propriétés de style</em> }</pre>
+    li::-moz-list-bullet { propriétés de style }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;Numéro 1&lt;/li&gt;
-  &lt;li&gt;Numéro 2&lt;/li&gt;
-  &lt;li&gt;Numéro 3&lt;/li&gt;
-&lt;/ul&gt;
+```html
+<ul>
+  <li>Numéro 1</li>
+  <li>Numéro 2</li>
+  <li>Numéro 3</li>
+</ul>
 
-&lt;ul class="list"&gt;
-  &lt;li&gt;Numéro 1&lt;/li&gt;
-  &lt;li&gt;Numéro 2&lt;/li&gt;
-  &lt;li&gt;Numéro 3&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+<ul class="list">
+  <li>Numéro 1</li>
+  <li>Numéro 2</li>
+  <li>Numéro 3</li>
+</ul>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.list ::-moz-list-bullet {
+```css
+.list ::-moz-list-bullet {
   font-size: 36px;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}</p>
+{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-list-number")}}</li>
- <li>{{cssxref("::marker")}}</li>
-</ul>
+- {{cssxref(":-moz-list-number")}}
+- {{cssxref("::marker")}}
diff --git a/files/fr/web/css/_colon_-moz-list-number/index.md b/files/fr/web/css/_colon_-moz-list-number/index.md
index 8a4d2f4be6..96b4f9ca7f 100644
--- a/files/fr/web/css/_colon_-moz-list-number/index.md
+++ b/files/fr/web/css/_colon_-moz-list-number/index.md
@@ -9,45 +9,44 @@ tags:
 translation_of: Web/CSS/:-moz-list-number
 original_slug: Web/CSS/::-moz-list-number
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément CSS</a> <strong><code>::-moz-list-number</code></strong> permet de personnaliser l'apparence des numéros des éléments de liste ({{HTMLElement("li")}}) au sein des listes numérotées ({{HTMLElement("ol")}}).</p>
+Le [pseudo-élément CSS](/fr/docs/Web/CSS/Pseudo-éléments) **`::-moz-list-number`** permet de personnaliser l'apparence des numéros des éléments de liste ({{HTMLElement("li")}}) au sein des listes numérotées ({{HTMLElement("ol")}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">li::-moz-list-number { <em>propriétés de style</em> }
-</pre>
+    li::-moz-list-number { propriétés de style }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">li::-moz-list-number {
+```css
+li::-moz-list-number {
   font-style: italic;
   font-weight: bold;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;ol&gt;
-  &lt;li&gt;Premier élément&lt;/li&gt;
-  &lt;li&gt;Second élément&lt;/li&gt;
-  &lt;li&gt;Troisième élément&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
+```html
+<ol>
+  <li>Premier élément</li>
+  <li>Second élément</li>
+  <li>Troisième élément</li>
+</ol>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemple")}}</p>
+{{EmbedLiveSample("Exemple")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-list-bullet")}}</li>
- <li>{{cssxref("::marker")}}</li>
-</ul>
+- {{cssxref(":-moz-list-bullet")}}
+- {{cssxref("::marker")}}
diff --git a/files/fr/web/css/_colon_-moz-loading/index.md b/files/fr/web/css/_colon_-moz-loading/index.md
index 4efb552f03..b5aacfc7f7 100644
--- a/files/fr/web/css/_colon_-moz-loading/index.md
+++ b/files/fr/web/css/_colon_-moz-loading/index.md
@@ -1,36 +1,36 @@
 ---
 title: ':-moz-loading'
-slug: 'Web/CSS/:-moz-loading'
+slug: Web/CSS/:-moz-loading
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-loading'
+translation_of: Web/CSS/:-moz-loading
 ---
-<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}</div>
+{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}
 
-<p>La pseudo-classe <strong><code>:-moz-loading</code></strong> correspond aux éléments qui ne peuvent être affichés, car ils n'ont pas été chargés (par exemple les images qui n'ont pas encore été transférées sur le réseau). On notera que les images <em>en cours de chargement</em> (le fichier est arrivé et est en train d'être traité pour affichage par le navigateur) ne sont pas ciblées par cette pseudo-classse.</p>
+La pseudo-classe **`:-moz-loading`** correspond aux éléments qui ne peuvent être affichés, car ils n'ont pas été chargés (par exemple les images qui n'ont pas encore été transférées sur le réseau). On notera que les images _en cours de chargement_ (le fichier est arrivé et est en train d'être traité pour affichage par le navigateur) ne sont pas ciblées par cette pseudo-classse.
 
-<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+Cette pseudo-classe est principalement destinée aux développeurs de thèmes.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">:-moz-loading</pre>
+    :-moz-loading
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">img:-moz-loading {
+```css
+img:-moz-loading {
   background-color: #aaa;
   background-image: url(loading-animation.gif) center no-repeat;
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-broken")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}</li>
-</ul>
+- {{cssxref(":-moz-broken")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}
diff --git a/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md
index 13622d0dd1..21b5b54dea 100644
--- a/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md
+++ b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.md
@@ -1,6 +1,6 @@
 ---
 title: ':-moz-locale-dir(ltr)'
-slug: 'Web/CSS/:-moz-locale-dir(ltr)'
+slug: Web/CSS/:-moz-locale-dir(ltr)
 tags:
   - CSS
   - Localisation
@@ -8,40 +8,41 @@ tags:
   - Pseudo-classe
   - Reference
   - l10n
-translation_of: 'Web/CSS/:-moz-locale-dir(ltr)'
+translation_of: Web/CSS/:-moz-locale-dir(ltr)
 ---
-<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div>
+{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
 
-<p>La pseudo-classe <strong><code>:-moz-locale-dir(ltr)</code></strong> correspond à un élément si l'interface utilisateur est affichée de gauche à droite. Ceci est déterminé par la préférence <code>intl.uidirection.</code><em><code>locale</code></em> (où <em><code>locale</code></em> est le language courant) qui est fixé à "ltr".</p>
+La pseudo-classe **`:-moz-locale-dir(ltr)`** correspond à un élément si l'interface utilisateur est affichée de gauche à droite. Ceci est déterminé par la préférence `intl.uidirection.`_`locale`_ (où _`locale`_ est le language courant) qui est fixé à "ltr".
 
-<p>Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins du langage de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte le langage de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétée par les spécificités du langage.</p>
+Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins du langage de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte le langage de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétée par les spécificités du langage.
 
-<p>Ce sélecteur ne fonctionne pas pour les documents l'HTML; il fait correspondre toujours, peu importe si le langage de l'UI va de gauche à droite ou de droite à gauche.</p>
+Ce sélecteur ne fonctionne pas pour les documents l'HTML; il fait correspondre toujours, peu importe si le langage de l'UI va de gauche à droite ou de droite à gauche.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Sur une interface allant de gauche à droite, ce texte devrait être rouge.&lt;/p&gt;
-</pre>
+```html
+<p>Sur une interface allant de gauche à droite, ce texte devrait être rouge.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p:-moz-locale-dir(ltr) {
+```css
+p:-moz-locale-dir(ltr) {
   color: red;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":dir",":dir(…)")}}</li>
- <li>{{cssxref(":-moz-locale-dir(rtl)")}}</li>
-</ul>
+- {{cssxref(":dir",":dir(…)")}}
+- {{cssxref(":-moz-locale-dir(rtl)")}}
diff --git a/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md
index 8ab4f863d5..060e075bfd 100644
--- a/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md
+++ b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.md
@@ -1,6 +1,6 @@
 ---
 title: ':-moz-locale-dir(rtl)'
-slug: 'Web/CSS/:-moz-locale-dir(rtl)'
+slug: Web/CSS/:-moz-locale-dir(rtl)
 tags:
   - CSS
   - Droite-à-gauche
@@ -8,40 +8,41 @@ tags:
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-locale-dir(rtl)'
+translation_of: Web/CSS/:-moz-locale-dir(rtl)
 ---
-<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div>
+{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:-moz-locale-dir(rtl)</code></strong> correspond à un élément si l'interface utilisateur est affichée de droite à gauche. Elle est déterminée par la préférence <code>intl.uidirection.</code><em><code>locale</code></em> (où <em><code>locale</code></em> est la langue courante) qui est fixée à <code>"rtl"</code>.</p>
+La [pseudo-classe CSS](/fr/docs/Web/CSS/Pseudo-classes) **`:-moz-locale-dir(rtl)`** correspond à un élément si l'interface utilisateur est affichée de droite à gauche. Elle est déterminée par la préférence `intl.uidirection.`_`locale`_ (où _`locale`_ est la langue courante) qui est fixée à `"rtl"`.
 
-<p>Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins de la langue de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte la langue de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétées par les spécificités de la langue.</p>
+Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins de la langue de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte la langue de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétées par les spécificités de la langue.
 
-<p>Ce sélecteur ne fonctionne pas correctement pour des documents HTML ; il ne fait jamais correspondre, peu importe si la langue de l'interface utilisateur va de gauche à droite ou de droite à gauche.</p>
+Ce sélecteur ne fonctionne pas correctement pour des documents HTML ; il ne fait jamais correspondre, peu importe si la langue de l'interface utilisateur va de gauche à droite ou de droite à gauche.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p:-moz-locale-dir(rtl) {
+```css
+p:-moz-locale-dir(rtl) {
   color: red;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;En utilisant une interface de droite à gauche, ce texte sera rouge.&lt;/p&gt;
-</pre>
+```html
+<p>En utilisant une interface de droite à gauche, ce texte sera rouge.</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-locale-dir(ltr)")}}</li>
- <li><a href="/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales">Garantir le fonctionnement de votre thème avec les locales RTL</a></li>
-</ul>
+- {{cssxref(":-moz-locale-dir(ltr)")}}
+- [Garantir le fonctionnement de votre thème avec les locales RTL](/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales)
diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.md b/files/fr/web/css/_colon_-moz-only-whitespace/index.md
index d53499bc80..55acde836f 100644
--- a/files/fr/web/css/_colon_-moz-only-whitespace/index.md
+++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.md
@@ -1,36 +1,36 @@
 ---
 title: ':-moz-only-whitespace'
-slug: 'Web/CSS/:-moz-only-whitespace'
+slug: Web/CSS/:-moz-only-whitespace
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
   - Sélecteur
-translation_of: 'Web/CSS/:-moz-only-whitespace'
+translation_of: Web/CSS/:-moz-only-whitespace
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<div class="note">
-<p><strong>Note :</strong> Dans la spécification {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur {{CSSxRef(":empty")}} a été modifié pour se comporter comme <code>:-moz-only-whitespace</code> mais aucun navigateur ne prend actuellement en charge cette fonctionnalité.</p>
-</div>
+> **Note :** Dans la spécification {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur {{CSSxRef(":empty")}} a été modifié pour se comporter comme `:-moz-only-whitespace` mais aucun navigateur ne prend actuellement en charge cette fonctionnalité.
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:-moz-only-whitespace</code></strong> correspond aux éléments qui n'ont aucun nœud enfant, aux nœuds texte vides ou aux nœuds texte ne possédant que des espaces.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:-moz-only-whitespace`** correspond aux éléments qui n'ont aucun nœud enfant, aux nœuds texte vides ou aux nœuds texte ne possédant que des espaces.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt; &lt;/div&gt;
-</pre>
+```html
+<div> </div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css hidden">:root {
+```css hidden
+:root {
   overflow: hidden;
   max-width: 100vw;
   max-height: 100vh;
@@ -43,31 +43,31 @@ div {
   min-height: 16px;
   min-height: 1rem;
 }
-</pre>
+```
 
-<pre class="brush: css">div {
+```css
+div {
   border: 4px solid red;
 }
 
 :-moz-only-whitespace {
   border-color: lime;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemple", "100%", "50")}}</p>
+{{EmbedLiveSample("Exemple", "100%", "50")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe a été renommée en <code>:blank</code> dans {{SpecName("CSS4 Selectors", "#changes-2018-02")}} puis la fonctionnalité a été fusionnée avec {{CSSxRef(":empty")}} et {{CSSxRef(":blank")}} a été redéfinie afin d'indiquer un élément {{HTMLElement("input")}} vide.</p>
+Cette pseudo-classe a été renommée en `:blank` dans {{SpecName("CSS4 Selectors", "#changes-2018-02")}} puis la fonctionnalité a été fusionnée avec {{CSSxRef(":empty")}} et {{CSSxRef(":blank")}} a été redéfinie afin d'indiquer un élément {{HTMLElement("input")}} vide.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.moz-only-whitespace")}}</p>
+{{Compat("css.selectors.moz-only-whitespace")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":empty")}}</li>
-</ul>
+- {{CSSxRef(":blank")}} {{Experimental_Inline}}
+- {{CSSxRef(":empty")}}
diff --git a/files/fr/web/css/_colon_-moz-submit-invalid/index.md b/files/fr/web/css/_colon_-moz-submit-invalid/index.md
index 30f9856f3d..5ae1fc9dc3 100644
--- a/files/fr/web/css/_colon_-moz-submit-invalid/index.md
+++ b/files/fr/web/css/_colon_-moz-submit-invalid/index.md
@@ -1,37 +1,34 @@
 ---
 title: ':-moz-submit-invalid'
-slug: 'Web/CSS/:-moz-submit-invalid'
+slug: Web/CSS/:-moz-submit-invalid
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-submit-invalid'
+translation_of: Web/CSS/:-moz-submit-invalid
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> CSS <strong><code>:-moz-submit-invalid</code></strong> représente tout bouton {{HTMLElement("input")}} de type <code>submit</code> présent sur un formulaire dont le contenu n'est pas valide compte-tenu de ses <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation">contraintes de validation</a>.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) CSS **`:-moz-submit-invalid`** représente tout bouton {{HTMLElement("input")}} de type `submit` présent sur un formulaire dont le contenu n'est pas valide compte-tenu de ses [contraintes de validation](/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation "en/HTML/HTML5/Forms in HTML5#Constraint Validation").
 
-<p>Par défaut, aucun style n'est appliqué. Vous pouvez utiliser cette pseudo-classe afin de personnaliser l'apparence du bouton <code>submit</code> lorsqu'il y a des champs de formulaire invalides.</p>
+Par défaut, aucun style n'est appliqué. Vous pouvez utiliser cette pseudo-classe afin de personnaliser l'apparence du bouton `submit` lorsqu'il y a des champs de formulaire invalides.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">:-moz-submit-invalid
-</pre>
+    :-moz-submit-invalid
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-submit-invalid")}}</p>
+{{Compat("css.selectors.-moz-submit-invalid")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":valid")}}</li>
- <li>{{cssxref(":invalid")}}</li>
- <li>{{cssxref(":required")}}</li>
- <li>{{cssxref(":optional")}}</li>
-</ul>
+- {{cssxref(":valid")}}
+- {{cssxref(":invalid")}}
+- {{cssxref(":required")}}
+- {{cssxref(":optional")}}
diff --git a/files/fr/web/css/_colon_-moz-suppressed/index.md b/files/fr/web/css/_colon_-moz-suppressed/index.md
index d250f94a15..3dddc706a2 100644
--- a/files/fr/web/css/_colon_-moz-suppressed/index.md
+++ b/files/fr/web/css/_colon_-moz-suppressed/index.md
@@ -1,38 +1,38 @@
 ---
 title: ':-moz-suppressed'
-slug: 'Web/CSS/:-moz-suppressed'
+slug: Web/CSS/:-moz-suppressed
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-suppressed'
+translation_of: Web/CSS/:-moz-suppressed
 ---
-<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
 
-<p><code>:-moz-suppressed</code> est une pseudo-classe spécifique à Mozilla qui permet de sélectionner les images qui n’ont pas été chargées car le chargement des images depuis ce site a été bloqué.</p>
+`:-moz-suppressed` est une pseudo-classe spécifique à Mozilla qui permet de sélectionner les images qui n’ont pas été chargées car le chargement des images depuis ce site a été bloqué.
 
-<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+Ce sélecteur est principalement destiné aux développeurs de thèmes.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">:-moz-suppressed</pre>
+    :-moz-suppressed
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: css">:-moz-suppressed {
+```css
+:-moz-suppressed {
   background: yellow;
   padding: 8px;
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-broken")}}</li>
- <li>{{cssxref(":-moz-loading")}}</li>
- <li>{{cssxref(":-moz-user-disabled")}}</li>
-</ul>
+- {{cssxref(":-moz-broken")}}
+- {{cssxref(":-moz-loading")}}
+- {{cssxref(":-moz-user-disabled")}}
diff --git a/files/fr/web/css/_colon_-moz-user-disabled/index.md b/files/fr/web/css/_colon_-moz-user-disabled/index.md
index 7890fbdca6..46b0a59daf 100644
--- a/files/fr/web/css/_colon_-moz-user-disabled/index.md
+++ b/files/fr/web/css/_colon_-moz-user-disabled/index.md
@@ -1,38 +1,38 @@
 ---
 title: ':-moz-user-disabled'
-slug: 'Web/CSS/:-moz-user-disabled'
+slug: Web/CSS/:-moz-user-disabled
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-user-disabled'
+translation_of: Web/CSS/:-moz-user-disabled
 ---
-<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <code>:-moz-user-disabled</code> correspond aux  éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur.</p>
+La [pseudo-classe CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-user-disabled` correspond aux  éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur.
 
-<p>Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes.</p>
+Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">:-moz-user-disabled</pre>
+    :-moz-user-disabled
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">:-moz-user-disabled {
+```css
+:-moz-user-disabled {
   background-color: lightgray;
   padding: 8px;
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":-moz-broken")}}</li>
- <li>{{cssxref(":-moz-loading")}}</li>
- <li>{{cssxref(":-moz-suppressed")}}</li>
-</ul>
+- {{cssxref(":-moz-broken")}}
+- {{cssxref(":-moz-loading")}}
+- {{cssxref(":-moz-suppressed")}}
diff --git a/files/fr/web/css/_colon_-moz-window-inactive/index.md b/files/fr/web/css/_colon_-moz-window-inactive/index.md
index e0352a939f..e31fd89e80 100644
--- a/files/fr/web/css/_colon_-moz-window-inactive/index.md
+++ b/files/fr/web/css/_colon_-moz-window-inactive/index.md
@@ -1,53 +1,53 @@
 ---
 title: ':-moz-window-inactive'
-slug: 'Web/CSS/:-moz-window-inactive'
+slug: Web/CSS/:-moz-window-inactive
 tags:
   - CSS
   - Non-standard
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:-moz-window-inactive'
+translation_of: Web/CSS/:-moz-window-inactive
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La pseudo-classe <strong><code>:-moz-window-inactive</code></strong>, spécifique à Mozilla, correspond à n'importe quel élément qui se trouve sur une fenêtre inactive.</p>
+La pseudo-classe **`:-moz-window-inactive`**, spécifique à Mozilla, correspond à n'importe quel élément qui se trouve sur une fenêtre inactive.
 
-<div class="note">
-  <p><strong>Note :</strong> Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut <code>active="true"</code> sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.</p>
-</div>
+> **Note :** Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut `active="true"` sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.
 
-<p><code>:-moz-window-inactive</code> fonctionne également pour le contenu des documents HTML.</p>
+`:-moz-window-inactive` fonctionne également pour le contenu des documents HTML.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple illustre la modification de l'apparence de l'arrière-plan d'une boîte selon que la fenêtre est active ou non.</p>
+Cet exemple illustre la modification de l'apparence de l'arrière-plan d'une boîte selon que la fenêtre est active ou non.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">#maboite {
+```css
+#maboite {
   background: linear-gradient(to bottom, blue, cyan);
 }
 
 #maboite:-moz-window-inactive {
   background: cyan;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="maboite" style="width:200px; height:200px;"&gt;
-  &lt;p&gt;Une boîte :)&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div id="maboite" style="width:200px; height:200px;">
+  <p>Une boîte :)</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","220","220")}}</p>
+{{EmbedLiveSample("Exemples","220","220")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-window-inactive")}}</p>
+{{Compat("css.selectors.-moz-window-inactive")}}
diff --git a/files/fr/web/css/_colon_active/index.md b/files/fr/web/css/_colon_active/index.md
index 0ac630a4c3..8317472411 100644
--- a/files/fr/web/css/_colon_active/index.md
+++ b/files/fr/web/css/_colon_active/index.md
@@ -1,129 +1,106 @@
 ---
 title: ':active'
-slug: 'Web/CSS/:active'
+slug: Web/CSS/:active
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:active'
+translation_of: Web/CSS/:active
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:active</code></strong> permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un <em>feedback</em> indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:active`** permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un _feedback_ indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.
 
-<pre class="brush: css no-line-numbers">/* ne cible &lt;a&gt; que lorsqu'il est activé */
+```css
+/* ne cible <a> que lorsqu'il est activé */
 /* par exemple quand on clique dessus */
 a:active {
   color: red;
-}</pre>
+}
+```
 
-<p>La pseudo-classe <code>:active</code> est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML {{HTMLElement("a")}} et {{HTMLElement("button")}} mais n'est pas restreinte à ceux-ci. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément {{HTMLElement("label")}} associé.</p>
+La pseudo-classe `:active` est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML {{HTMLElement("a")}} et {{HTMLElement("button")}} mais n'est pas restreinte à ceux-ci. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément {{HTMLElement("label")}} associé.
 
-<p>La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec <code>:active</code> doit être écrite après les autres : <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec `:active` doit être écrite après les autres : `:link` — `:visited` — `:hover` — `:active`.
 
-<div class="note">
-  <p><strong>Note :</strong> Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe <code>:active</code> ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.</p>
-</div>
+> **Note :** Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe `:active` ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Liens_actifs">Liens actifs</h3>
+### Liens actifs
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">a:link { color: blue; }          /* Liens non visités */
+```css
+a:link { color: blue; }          /* Liens non visités */
 a:visited { color: purple; }     /* Liens visités */
 a:hover { background: yellow; }  /* Liens survolés */
 a:active { color: red; }         /* Liens actifs */
 
-p:active { background: #eee; }   /* Paragraphes actifs */</pre>
+p:active { background: #eee; }   /* Paragraphes actifs */
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Ce paragraphe contient un lien :
-  &lt;a href="#"&gt;Ce lien devient rouge quand vous cliquez dessus.&lt;/a&gt;
+```html
+<p>Ce paragraphe contient un lien :
+  <a href="#">Ce lien devient rouge quand vous cliquez dessus.</a>
   Le paragraphe sera sur un fond gris quand vous cliquerez dessus
   ou sur le lien.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Liens_actifs')}}</p>
+{{EmbedLiveSample('Liens_actifs')}}
 
-<h3 id="Éléments_de_formulaire_actifs">Éléments de formulaire actifs</h3>
+### Éléments de formulaire actifs
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">form :active {
+```css
+form :active {
   color: red;
 }
 
 form button {
   background: white;
-}</pre>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="mon-button"&gt;Un bouton :&lt;/label&gt;
-  &lt;button id="mon-button" type="button"&gt;Cliquez sur moi ou sur mon libellé !&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('Éléments_de_formulaire_actifs')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.active")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":link")}}</li>
- <li>{{cssxref(":visited")}}</li>
- <li>{{cssxref(":hover")}}</li>
-</ul>
+}
+```
+
+#### HTML
+
+```html
+<form>
+  <label for="mon-button">Un bouton :</label>
+  <button id="mon-button" type="button">Cliquez sur moi ou sur mon libellé !</button>
+</form>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Éléments_de_formulaire_actifs')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} | {{Spec2('HTML WHATWG')}}     |                      |
+| {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}                 | {{Spec2('CSS4 Selectors')}} | Aucune modification. |
+| {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}             | {{Spec2('CSS3 Selectors')}} | Aucune modification. |
+| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}}             | Aucune modification. |
+| {{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}                     | {{Spec2('CSS1')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.active")}}
+
+## Voir aussi
+
+- {{cssxref(":link")}}
+- {{cssxref(":visited")}}
+- {{cssxref(":hover")}}
diff --git a/files/fr/web/css/_colon_any-link/index.md b/files/fr/web/css/_colon_any-link/index.md
index 689e4d42b2..b6d515c4f0 100644
--- a/files/fr/web/css/_colon_any-link/index.md
+++ b/files/fr/web/css/_colon_any-link/index.md
@@ -1,33 +1,36 @@
 ---
 title: ':any-link'
-slug: 'Web/CSS/:any-link'
+slug: Web/CSS/:any-link
 tags:
   - CSS
   - Experimental
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:any-link'
+translation_of: Web/CSS/:any-link
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La pseudo-classe <strong><code>:any-link</code></strong> permet de représenter un élément qui agit comme la source de l'ancre d'un hyperlien (qu'il ait été visité ou non). Elle permet donc de cibler les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}} avec un attribut <code>href</code>. Autrement dit, elle cible les éléments qui correspondent à {{cssxref(":link")}} ou à {{cssxref(":visited")}}.</p>
+La pseudo-classe **`:any-link`** permet de représenter un élément qui agit comme la source de l'ancre d'un hyperlien (qu'il ait été visité ou non). Elle permet donc de cibler les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}} avec un attribut `href`. Autrement dit, elle cible les éléments qui correspondent à {{cssxref(":link")}} ou à {{cssxref(":visited")}}.
 
-<pre class="brush: css no-line-numbers  language-css">/* cible tous les éléments qui seraient ciblés par */
+```css
+/* cible tous les éléments qui seraient ciblés par */
 /* :link ou :visited */
 :any-link {
   color: green;
   font-weight: bold;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">:any-link {
+```css
+:any-link {
   color: green;
   font-weight: bold;
 }
@@ -37,37 +40,26 @@ translation_of: 'Web/CSS/:any-link'
   color: green;
   font-weight: bold;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;a href="https://mozilla.org"&gt;Une page différente&lt;/a&gt;&lt;br&gt;
-&lt;a href="#"&gt;Une ancre&lt;/a&gt;&lt;br&gt;
-&lt;a&gt;Un lien sans cible (n'est pas mis en forme)&lt;/a&gt;</pre>
+```html
+<a href="https://mozilla.org">Une page différente</a><br>
+<a href="#">Une ancre</a><br>
+<a>Un lien sans cible (n'est pas mis en forme)</a>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+{{EmbedLiveSample("Exemples","100%","100%")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}} | {{Spec2('CSS4 Selectors')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.any-link")}}</p>
+{{Compat("css.selectors.any-link")}}
diff --git a/files/fr/web/css/_colon_autofill/index.md b/files/fr/web/css/_colon_autofill/index.md
index c74d26ed18..b1b7827003 100644
--- a/files/fr/web/css/_colon_autofill/index.md
+++ b/files/fr/web/css/_colon_autofill/index.md
@@ -9,26 +9,22 @@ tags:
 translation_of: Web/CSS/:-webkit-autofill
 original_slug: Web/CSS/:-webkit-autofill
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La pseudo-classe <strong><code>:-webkit-autofill</code></strong> correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.</p>
+La pseudo-classe **`:-webkit-autofill`** correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.
 
-<div class="note">
-  <p><strong>Note :</strong> Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent <code>!important</code> pour les déclarations avec <code>:-webkit-autofill</code> ce qui les rend difficilement modifiables sans utiliser JavaScript.</p>
-</div>
+> **Note :** Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent `!important` pour les déclarations avec `:-webkit-autofill` ce qui les rend difficilement modifiables sans utiliser JavaScript.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-autofill")}}</p>
+{{Compat("css.selectors.-webkit-autofill")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://code.google.com/p/chromium/issues/detail?id=46543">Bug Chromium n°46543 : Le fond jaune des champs texte saisis automatiquement ne peut pas être désactivé.</a></li>
- <li><a href="https://bugs.webkit.org/show_bug.cgi?id=66032">Bug WebKit n°66032 : Permettre aux auteurs de surcharger la couleur des champs remplis automatiquement.</a></li>
- <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Bug Mozilla n°740979 : Implémentation de la pseudo-classe <code>:-moz-autofill</code> pour  les éléments <code>input</code> avec une valeur saisie automatiquement.</a></li>
-</ul>
+- [Bug Chromium n°46543 : Le fond jaune des champs texte saisis automatiquement ne peut pas être désactivé.](https://code.google.com/p/chromium/issues/detail?id=46543)
+- [Bug WebKit n°66032 : Permettre aux auteurs de surcharger la couleur des champs remplis automatiquement.](https://bugs.webkit.org/show_bug.cgi?id=66032)
+- [Bug Mozilla n°740979 : Implémentation de la pseudo-classe `:-moz-autofill` pour  les éléments `input` avec une valeur saisie automatiquement.](https://bugzilla.mozilla.org/show_bug.cgi?id=740979)
diff --git a/files/fr/web/css/_colon_blank/index.md b/files/fr/web/css/_colon_blank/index.md
index db9d6f5d06..5623cca528 100644
--- a/files/fr/web/css/_colon_blank/index.md
+++ b/files/fr/web/css/_colon_blank/index.md
@@ -1,51 +1,34 @@
 ---
 title: ':blank'
-slug: 'Web/CSS/:blank'
+slug: Web/CSS/:blank
 tags:
   - CSS
   - Draft
   - Experimental
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:blank'
+translation_of: Web/CSS/:blank
 ---
-<p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p>
+{{CSSRef}}{{Draft}}{{SeeCompatTable}}
 
-<div class="note">
-<p><strong>Note :</strong> Le sélecteur <code>:blank</code> est une fonctionnalité considérée risquée car en cours de modification par le CSSWG. Voir <a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">l'<em>issue</em> n°1967 à ce propos</a>.</p>
-</div>
+> **Note :** Le sélecteur `:blank` est une fonctionnalité considérée risquée car en cours de modification par le CSSWG. Voir [l'_issue_ n°1967 à ce propos](https://github.com/w3c/csswg-drafts/issues/1967 "[selectors] decide on :blank").
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:blank</code></strong> permet de sélectionner les champs saissables par l'utilisateur et qui sont vides (par exemple des éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} où rien n'a encore été saisi).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:blank`** permet de sélectionner les champs saissables par l'utilisateur et qui sont vides (par exemple des éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} où rien n'a encore été saisi).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.blank")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{CSSxRef(":empty")}}</li>
-</ul>
+## Spécifications
+
+| Spécification                                                                | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}} | {{Spec2("CSS4 Selectors")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.blank")}}
+
+## Voir aussi
+
+- {{CSSxRef(":empty")}}
diff --git a/files/fr/web/css/_colon_checked/index.md b/files/fr/web/css/_colon_checked/index.md
index fba13cef19..14955f7d3e 100644
--- a/files/fr/web/css/_colon_checked/index.md
+++ b/files/fr/web/css/_colon_checked/index.md
@@ -7,56 +7,55 @@ tags:
   - Reference
 translation_of: Web/CSS/:checked
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La pseudo-classe <strong><code>:checked</code></strong> représente n'importe quel <strong>bouton radio</strong> (<code><a href="/fr/docs/Web/HTML/Element/Input/radio">&lt;input type="radio"&gt;</a></code>), <strong>case à cocher </strong>(<code><a href="/fr/docs/Web/HTML/Element/Input/checkbox">&lt;input type="checkbox"&gt;</a></code>) ou <strong>option</strong> ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (<code>on</code>). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe <code>:checked</code> ne s'applique plus à l'élément en question.</p>
+La pseudo-classe **`:checked`** représente n'importe quel **bouton radio** ([`<input type="radio">`](/fr/docs/Web/HTML/Element/Input/radio)), **case à cocher** ([`<input type="checkbox">`](/fr/docs/Web/HTML/Element/Input/checkbox)) ou **option** ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (`on`). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe `:checked` ne s'applique plus à l'élément en question.
 
-<pre class="brush: css no-line-numbers">/* cible n'importe quel bouton radio sélectionné, case
+```css
+/* cible n'importe quel bouton radio sélectionné, case
 /* à cocher cochée ou option sélectionnée */
 input:checked {
   margin-left: 25px;
   border: 1px solid blue;
 }
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Les navigateurs considèrent souvent les éléments <code>&lt;option&gt;</code> comme <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">des éléments remplacés</a>et la possibilité de mise en forme avec <code>:checked</code> varie d'un navigateur à l'autre.</p>
-</div>
+> **Note :** Les navigateurs considèrent souvent les éléments `<option>` comme [des éléments remplacés](/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9)et la possibilité de mise en forme avec `:checked` varie d'un navigateur à l'autre.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">
-&lt;div&gt;
-  &lt;input type="radio" name="my-input" id="yes"&gt;
-  &lt;label for="yes"&gt;Oui&lt;/label&gt;
+```html
+<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Oui</label>
 
-  &lt;input type="radio" name="my-input" id="no"&gt;
-  &lt;label for="no"&gt;Non&lt;/label&gt;
-&lt;/div&gt;
+  <input type="radio" name="my-input" id="no">
+  <label for="no">Non</label>
+</div>
 
-&lt;div&gt;
-  &lt;input type="checkbox" name="my-checkbox" id="opt-in"&gt;
-  &lt;label for="opt-in"&gt;Cochez-moi !&lt;/label&gt;
-&lt;/div&gt;
+<div>
+  <input type="checkbox" name="my-checkbox" id="opt-in">
+  <label for="opt-in">Cochez-moi !</label>
+</div>
 
-&lt;select name="my-select" id="fruit"&gt;
-  &lt;option value="opt1"&gt;Pommes&lt;/option&gt;
-  &lt;option value="opt2"&gt;Raisins&lt;/option&gt;
-  &lt;option value="opt3"&gt;Poires&lt;/option&gt;
-&lt;/select&gt;
-</pre>
+<select name="my-select" id="fruit">
+  <option value="opt1">Pommes</option>
+  <option value="opt2">Raisins</option>
+  <option value="opt3">Poires</option>
+</select>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">
+```css
 div,
 select {
   margin: 8px;
@@ -82,51 +81,22 @@ option:checked {
   box-shadow: 0 0 0 3px lime;
   color: red;
 }
-</pre>
-
-<h4 id="résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("exemple_simple")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-checked', ':checked')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-checked', ':checked')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>La sémantique relative au HTML est définie.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#checked', ':checked')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Lien avec la spécification de niveau 3 pour les sélecteurs.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#checked', ':checked')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.checked")}}</p>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("exemple_simple")}}
+
+## Spécifications
+
+| Spécification                                                                    | État                                 | Commentaires                                                       |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', '#selector-checked', ':checked')}} | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                               |
+| {{SpecName('HTML5 W3C', '#selector-checked', ':checked')}}     | {{Spec2('HTML5 W3C')}}         | La sémantique relative au HTML est définie.                        |
+| {{SpecName('CSS4 Selectors', '#checked', ':checked')}}         | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                               |
+| {{SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked')}} | {{Spec2('CSS3 Basic UI')}} | Lien avec la spécification de niveau 3 pour les sélecteurs.        |
+| {{SpecName('CSS3 Selectors', '#checked', ':checked')}}         | {{Spec2('CSS3 Selectors')}} | Définition de la pseudo-classe mais pas de la sémantique associée. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.checked")}}
diff --git a/files/fr/web/css/_colon_current/index.md b/files/fr/web/css/_colon_current/index.md
index b96560db91..2ddaa36dc0 100644
--- a/files/fr/web/css/_colon_current/index.md
+++ b/files/fr/web/css/_colon_current/index.md
@@ -1,66 +1,69 @@
 ---
 title: ':current'
-slug: 'Web/CSS/:current'
-browser-compat: css.selectors.current
+slug: Web/CSS/:current
 translation_of: Web/CSS/:current
+browser-compat: css.selectors.current
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Le sélecteur de <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>:current</code></strong> est une pseudo-classe agissant dans la dimension temporelle et représentant l'élément actuellement affiché, ou un ancêtre de cet élément. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a>.</p>
+Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:current`** est une pseudo-classe agissant dans la dimension temporelle et représentant l'élément actuellement affiché, ou un ancêtre de cet élément. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format [WebVTT](/fr/docs/Web/API/WebVTT_API).
 
-<pre class="brush: css">:current(p, span) {
+```css
+:current(p, span) {
   background-color: yellow;
-}</pre>
+}
+```
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="css">CSS</h3>
+### CSS
 
-<pre class="brush: css">:current(p, span) {
+```css
+:current(p, span) {
   background-color: yellow;
-}</pre>
+}
+```
 
-<h3 id="html">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;video controls preload="metadata"&gt;
-  &lt;source src="video.mp4" type="video/mp4" /&gt;
-  &lt;source src="video.webm" type="video/webm" /&gt;
-  &lt;track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default&gt;
-&lt;/video&gt;</pre>
+```html
+<video controls preload="metadata">
+  <source src="video.mp4" type="video/mp4" />
+  <source src="video.webm" type="video/webm" />
+  <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default>
+</video>
+```
 
-<h3 id="webvtt">WebVTT</h3>
+### WebVTT
 
-<pre>FICHIER WEBVTT
+    FICHIER WEBVTT
 
-1
-00:00:03.500 --&gt; 00:00:05.000
-Voici le premier sous-titre
+    1
+    00:00:03.500 --> 00:00:05.000
+    Voici le premier sous-titre
 
-2
-00:00:06.000 --&gt; 00:00:09.000
-Voici le second sous-titre
+    2
+    00:00:06.000 --> 00:00:09.000
+    Voici le second sous-titre
 
-3
-00:00:11.000 --&gt; 00:00:19.000
-Voici le troisième sous-titre
-</pre>
+    3
+    00:00:11.000 --> 00:00:19.000
+    Voici le troisième sous-titre
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li>
- <li>{{cssxref(":past")}}</li>
- <li>{{cssxref(":future")}}</li>
-</ul>
+- [Web Video Text Tracks Format (WebVTT)](/fr/docs/Web/API/WebVTT_API)
+- {{cssxref(":past")}}
+- {{cssxref(":future")}}
diff --git a/files/fr/web/css/_colon_default/index.md b/files/fr/web/css/_colon_default/index.md
index 195232f149..f5c160b3eb 100644
--- a/files/fr/web/css/_colon_default/index.md
+++ b/files/fr/web/css/_colon_default/index.md
@@ -1,111 +1,86 @@
 ---
 title: ':default'
-slug: 'Web/CSS/:default'
+slug: Web/CSS/:default
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:default'
+translation_of: Web/CSS/:default
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:default</code></strong> représente un élément de l'interface utilisateur qui est l'élément par défaut parmi d'autres éléments semblables (par exemple le bouton par défaut d'un groupe de boutons).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:default`** représente un élément de l'interface utilisateur qui est l'élément par défaut parmi d'autres éléments semblables (par exemple le bouton par défaut d'un groupe de boutons).
 
-<pre class="brush: css no-line-numbers">/* Cible l'élément par défaut d'un groupe */
+```css
+/* Cible l'élément par défaut d'un groupe */
 :default {
   background-color: lime;
-}</pre>
+}
+```
 
-<p>Ainsi, le bouton actionné par défaut parmi plusieurs boutons pourra être mis en forme en le ciblant avec cette pseudo-classe.</p>
+Ainsi, le bouton actionné par défaut parmi plusieurs boutons pourra être mis en forme en le ciblant avec cette pseudo-classe.
 
-<p>Ce sélecteur peut être utilisé sur des éléments {{htmlelement("button")}}, <code><a href="/fr/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code> et {{htmlelement("option")}} :</p>
+Ce sélecteur peut être utilisé sur des éléments {{htmlelement("button")}}, [`<input type="checkbox">`](/fr/docs/Web/HTML/Element/input/checkbox), [`<input type="radio">`](/fr/docs/Web/HTML/Element/input/radio) et {{htmlelement("option")}} :
 
-<ul>
- <li>Un élément <code>&lt;option&gt;</code> par défaut est le premier qui possède l'attribut <code>selected</code> ou le premier qui est activé selon l'ordre du DOM.</li>
- <li>Les éléments <code>&lt;input type="checkbox"&gt;</code> et <code>&lt;input type="radio"&gt;</code> seront ciblés s'ils possèdent l'attribut <code>checked</code>.</li>
- <li>L'élément <code>&lt;button&gt;</code> est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments {{htmlelement("input")}} dont le type permet d'envoyer des formulaires tels que <code>image</code> ou <code>submit</code>).</li>
-</ul>
+- Un élément `<option>` par défaut est le premier qui possède l'attribut `selected` ou le premier qui est activé selon l'ordre du DOM.
+- Les éléments `<input type="checkbox">` et `<input type="radio">` seront ciblés s'ils possèdent l'attribut `checked`.
+- L'élément `<button>` est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments {{htmlelement("input")}} dont le type permet d'envoyer des formulaires tels que `image` ou `submit`).
 
-<div class="note">
-<p><strong>Note :</strong> La spécification WHATWG HTML définit cela dans <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default">le paragraphe 4.16.3</a>.</p>
-</div>
+> **Note :** La spécification WHATWG HTML définit cela dans [le paragraphe 4.16.3](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default).
 
-<p>Les éléments de l'interface utilisateur qui permette une sélection multiple peuvent avoir plusieurs éléments par défaut. Dans ce cas, tous les éléments par défaut sont ciblés via la pseudo-classe <code>:default</code>.</p>
+Les éléments de l'interface utilisateur qui permette une sélection multiple peuvent avoir plusieurs éléments par défaut. Dans ce cas, tous les éléments par défaut sont ciblés via la pseudo-classe `:default`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input:default {
+```css
+input:default {
   box-shadow: 0 0 2px 1px coral;
 }
 
 input:default + label {
   color: coral;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;fieldset&gt;
-  &lt;legend&gt;Saison préférée&lt;/legend&gt;
-
-  &lt;input type="radio" name="season" id="spring"&gt;
-  &lt;label for="spring"&gt;Printemps&lt;/label&gt;
-
-  &lt;input type="radio" name="season" id="summer" checked&gt;
-  &lt;label for="summer"&gt;Eté&lt;/label&gt;
-
-  &lt;input type="radio" name="season" id="fall"&gt;
-  &lt;label for="fall"&gt;Automne&lt;/label&gt;
-
-  &lt;input type="radio" name="season" id="winter"&gt;
-  &lt;label for="winter"&gt;Hiver&lt;/label&gt;
-&lt;/fieldset&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-default', ':default')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>La sémantique liée au HTML est définie et les contraintes de validation sont également définies.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Définition initiale de la pseudo-classe mais pas de la sémantique associée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.default")}}</p>
+```
+
+### HTML
+
+```html
+<fieldset>
+  <legend>Saison préférée</legend>
+
+  <input type="radio" name="season" id="spring">
+  <label for="spring">Printemps</label>
+
+  <input type="radio" name="season" id="summer" checked>
+  <label for="summer">Eté</label>
+
+  <input type="radio" name="season" id="fall">
+  <label for="fall">Automne</label>
+
+  <input type="radio" name="season" id="winter">
+  <label for="winter">Hiver</label>
+</fieldset>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                    | État                                 | Commentaires                                                                                     |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', '#selector-default', ':default')}} | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                                                             |
+| {{SpecName('HTML5 W3C', '#selector-default', ':default')}}     | {{Spec2('HTML5 W3C')}}         | La sémantique liée au HTML est définie et les contraintes de validation sont également définies. |
+| {{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                                                             |
+| {{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}} | {{Spec2('CSS3 Basic UI')}} | Définition initiale de la pseudo-classe mais pas de la sémantique associée.                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.default")}}
diff --git a/files/fr/web/css/_colon_defined/index.md b/files/fr/web/css/_colon_defined/index.md
index a1bfe2b1b9..fadc318c67 100644
--- a/files/fr/web/css/_colon_defined/index.md
+++ b/files/fr/web/css/_colon_defined/index.md
@@ -1,6 +1,6 @@
 ---
 title: ':defined'
-slug: 'Web/CSS/:defined'
+slug: Web/CSS/:defined
 tags:
   - CSS
   - Layout
@@ -8,14 +8,15 @@ tags:
   - Reference
   - Selector
   - Web
-translation_of: 'Web/CSS/:defined'
+translation_of: Web/CSS/:defined
 browser-compat: css.selectors.defined
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:defined</code></strong> représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur, ainsi que les éléments personnalisés (« <em>custom elements</em> ») ayant correctement été définis (c'est-à-dire grâce à la méthode <a href="/fr/docs/Web/API/CustomElementRegistry/define"><code>CustomElementRegistry.define()</code></a>).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:defined`** représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur, ainsi que les éléments personnalisés (« _custom elements_ ») ayant correctement été définis (c'est-à-dire grâce à la méthode [`CustomElementRegistry.define()`](/fr/docs/Web/API/CustomElementRegistry/define)).
 
-<pre class="brush: css">/* Cette règle cible tout élément défini */
+```css
+/* Cette règle cible tout élément défini */
 :defined {
   font-style: italic;
 }
@@ -24,19 +25,20 @@ browser-compat: css.selectors.defined
 simple-custom:defined {
   display: block;
 }
-</pre>
+```
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Les fragments de code qui suivent sont tirés <a href="https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class">du dépôt <code>defined-pseudo-class</code></a> (<a href="https://mdn.github.io/web-components-examples/defined-pseudo-class/">voir le résultat en <em>live</em></a>).</p>
+Les fragments de code qui suivent sont tirés [du dépôt `defined-pseudo-class`](https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class) ([voir le résultat en _live_](https://mdn.github.io/web-components-examples/defined-pseudo-class/)).
 
-<p>Pour cette démonstration on définit un élément personnalisé trivial :</p>
+Pour cette démonstration on définit un élément personnalisé trivial :
 
-<pre class="brush: js">customElements.define('simple-custom',
+```js
+customElements.define('simple-custom',
   class extends HTMLElement {
     constructor() {
       super();
@@ -47,17 +49,21 @@ simple-custom:defined {
       let shadowRoot = this.attachShadow({mode: 'open'})
         .appendChild(divElem);
   }
-})</pre>
+})
+```
 
-<p>On insère ensuite une copie de cet élément dans le document, à côté d'un paragraphe classique {<code>&lt;p&gt;</code> :</p>
+On insère ensuite une copie de cet élément dans le document, à côté d'un paragraphe classique {`<p>` :
 
-<pre class="brush: html">&lt;simple-custom text="Le texte de l'élément personnalisé"&gt;&lt;/simple-custom&gt;
+```html
+<simple-custom text="Le texte de l'élément personnalisé"></simple-custom>
 
-&lt;p&gt;Un paragraphe normal&lt;/p&gt;</pre>
+<p>Un paragraphe normal</p>
+```
 
-<p>Dans la feuille CSS, on inclut d'abord les règles suivantes :</p>
+Dans la feuille CSS, on inclut d'abord les règles suivantes :
 
-<pre class="brush: css">// On utilise deux arrières-plans distincts pour ces deux éléments
+```css
+// On utilise deux arrières-plans distincts pour ces deux éléments
 p {
   background: yellow;
 }
@@ -69,30 +75,31 @@ simple-custom {
 // On met en italique le texte de ces deux éléments
 :defined {
   font-style: italic;
-}</pre>
+}
+```
 
-<p>Ensuite, on fournit les deux règles suivantes afin de masquer les instances de l'élément personnalisé qui ne sont pas définies et, pour celles qui sont définies, on indique que ce sont des éléments de bloc :</p>
+Ensuite, on fournit les deux règles suivantes afin de masquer les instances de l'élément personnalisé qui ne sont pas définies et, pour celles qui sont définies, on indique que ce sont des éléments de bloc :
 
-<pre class="brush: css">simple-custom:not(:defined) {
+```css
+simple-custom:not(:defined) {
   display: none;
 }
 
 simple-custom:defined {
   display: block;
-}</pre>
+}
+```
 
-<p>Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en forme sur la page.</p>
+Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en forme sur la page.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
 {{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
-</ul>
+- [Les composants web](/fr/docs/Web/Web_Components)
diff --git a/files/fr/web/css/_colon_dir/index.md b/files/fr/web/css/_colon_dir/index.md
index 258e28c8b5..a05a60ce96 100644
--- a/files/fr/web/css/_colon_dir/index.md
+++ b/files/fr/web/css/_colon_dir/index.md
@@ -1,47 +1,48 @@
 ---
 title: ':dir'
-slug: 'Web/CSS/:dir'
+slug: Web/CSS/:dir
 tags:
   - CSS
   - Experimental
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:dir'
+translation_of: Web/CSS/:dir
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong> <code>:dir</code></strong> permet de cibler un élément selon la direction du texte qu'il contient. En HTML, la direction est définie grâce à l'attribut {{htmlattrxref("dir", "html")}}. Pour les autres types de document, cela peut être déterminé autrement.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:dir`** permet de cibler un élément selon la direction du texte qu'il contient. En HTML, la direction est définie grâce à l'attribut {{htmlattrxref("dir", "html")}}. Pour les autres types de document, cela peut être déterminé autrement.
 
-<pre class="brush: css">/* Cible le contenu avec du texte */
+```css
+/* Cible le contenu avec du texte */
 /* écrit de droite à gauche */
 :dir(rtl) {
   background-color: red;
-}</pre>
+}
+```
 
-<p>On notera que la pseudo-classe <code>:dir()</code> ne fonctionne pas de la même façon que le sélecteur d'attribut <code>[dir=…]</code>. Ce dernier utilise la valeur de l'attribut {{htmlattrxref("dir", "html")}} et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon <code>[dir=rtl]</code> ou <code>[dir=ltr]</code> ne pourront pas correspondre à la valeur <code>auto</code> qui peut être utilisée sur l'attribut <code>dir</code>. Au contraire, <code>:dir()</code> calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille <code>auto</code>).</p>
+On notera que la pseudo-classe `:dir()` ne fonctionne pas de la même façon que le sélecteur d'attribut `[dir=…]`. Ce dernier utilise la valeur de l'attribut {{htmlattrxref("dir", "html")}} et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon `[dir=rtl]` ou `[dir=ltr]` ne pourront pas correspondre à la valeur `auto` qui peut être utilisée sur l'attribut `dir`. Au contraire, `:dir()` calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille `auto`).
 
-<p><code>:dir()</code> ne prend en compte que la valeur <em>sémantique</em> de la direction, celle qui est définie par le document (la plupart du temps un document HTML). Elle ne tiendra pas compte de la direction liée à la mise en forme, purement stylistique, modifiée par des propriétés telles que {{cssxref("direction")}}.</p>
+`:dir()` ne prend en compte que la valeur _sémantique_ de la direction, celle qui est définie par le document (la plupart du temps un document HTML). Elle ne tiendra pas compte de la direction liée à la mise en forme, purement stylistique, modifiée par des propriétés telles que {{cssxref("direction")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La pseudo-classe <code>:dir()</code> nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler</p>
+La pseudo-classe `:dir()` nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>direction</code></dt>
- <dd>La direction du texte pour les éléments qu'on souhaite sélectionner. La valeur peut être <code>ltr</code> (texte écrit de gauche à droite) ou <code>rtl</code> (texte écrit de droite à gauche).</dd>
-</dl>
+- `direction`
+  - : La direction du texte pour les éléments qu'on souhaite sélectionner. La valeur peut être `ltr` (texte écrit de gauche à droite) ou `rtl` (texte écrit de droite à gauche).
 
-<h3 id="Syntaxe_formelle_2">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">:-moz-dir(rtl) {
+```css
+:-moz-dir(rtl) {
   color: lime;
 }
 
@@ -55,53 +56,36 @@ translation_of: 'Web/CSS/:dir'
 
 :dir(ltr) {
   color: black;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush:html;">&lt;div dir="rtl"&gt;
-  &lt;span&gt;test1&lt;/span&gt;
-  &lt;div dir="ltr"&gt;test2
-    &lt;div dir="auto"&gt;עִבְרִית&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%", 70)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.dir")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":lang")}}</li>
- <li>{{cssxref(":dir")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%", 70)}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}} | {{Spec2('HTML WHATWG')}}     | Aucune modification. |
+| {{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}                 | {{Spec2('CSS4 Selectors')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.dir")}}
+
+## Voir aussi
+
+- {{cssxref(":lang")}}
+- {{cssxref(":dir")}}
diff --git a/files/fr/web/css/_colon_disabled/index.md b/files/fr/web/css/_colon_disabled/index.md
index a39b26df64..57e5ddfed8 100644
--- a/files/fr/web/css/_colon_disabled/index.md
+++ b/files/fr/web/css/_colon_disabled/index.md
@@ -1,115 +1,87 @@
 ---
 title: ':disabled'
-slug: 'Web/CSS/:disabled'
+slug: Web/CSS/:disabled
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:disabled'
+translation_of: Web/CSS/:disabled
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:disabled</code></strong> permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:disabled`** permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.
 
-<pre class="brush: css no-line-numbers">/* Cible tous les champs de saisie texte */
+```css
+/* Cible tous les champs de saisie texte */
 /* qui sont désactivés */
 input[type="text"]:disabled {
   background: #ccc;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">input[type="text"]:disabled { background: #ccc; }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;form action="#"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Adresse de livraison&lt;/legend&gt;
-    &lt;input type="text" placeholder="Nom"&gt;
-    &lt;input type="text" placeholder="Adresse"&gt;
-    &lt;input type="text" placeholder="Code postal"&gt;
-  &lt;/fieldset&gt;
-  &lt;fieldset id="facturation"&gt;
-    &lt;legend&gt;Adresse de facturation&lt;/legend&gt;
-    &lt;label for="facturation_livraison"&gt;Identique à l'adresse de livraison&lt;/label&gt;
-    &lt;input type="checkbox" id="facturation_livraison" onchange="javascript:toggleBilling()" checked&gt;
-    &lt;br /&gt;
-    &lt;input type="text" placeholder="Nom" disabled&gt;
-    &lt;input type="text" placeholder="Adresse" disabled&gt;
-    &lt;input type="text" placeholder="Code postal" disabled&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">function toggleBilling() {
+## Exemples
+
+### CSS
+
+```css
+input[type="text"]:disabled { background: #ccc; }
+```
+
+### HTML
+
+```html
+<form action="#">
+  <fieldset>
+    <legend>Adresse de livraison</legend>
+    <input type="text" placeholder="Nom">
+    <input type="text" placeholder="Adresse">
+    <input type="text" placeholder="Code postal">
+  </fieldset>
+  <fieldset id="facturation">
+    <legend>Adresse de facturation</legend>
+    <label for="facturation_livraison">Identique à l'adresse de livraison</label>
+    <input type="checkbox" id="facturation_livraison" onchange="javascript:toggleBilling()" checked>
+    <br />
+    <input type="text" placeholder="Nom" disabled>
+    <input type="text" placeholder="Adresse" disabled>
+    <input type="text" placeholder="Code postal" disabled>
+  </fieldset>
+</form>
+```
+
+### JavaScript
+
+```js
+function toggleBilling() {
   var billingItems = document.querySelectorAll('#facturation input[type="text"]');
-  for (var i = 0; i &lt; billingItems.length; i++) {
+  for (var i = 0; i < billingItems.length; i++) {
     billingItems[i].disabled = !billingItems[i].disabled;
   }
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '300px', '250px')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition de la sémantique relative à HTML et aux formulaires.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Référence à la spécification de niveau 3 sur les sélecteurs.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition de la pseudo-classe mais sans la sémantique associée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.disabled")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>
-  <p>{{cssxref(":enabled")}}</p>
- </li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '300px', '250px')}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                 | Commentaires                                                     |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}} | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                             |
+| {{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}     | {{Spec2('HTML5 W3C')}}         | Définition de la sémantique relative à HTML et aux formulaires.  |
+| {{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                             |
+| {{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}     | {{Spec2('CSS3 Basic UI')}} | Référence à la spécification de niveau 3 sur les sélecteurs.     |
+| {{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}} | {{Spec2('CSS3 Selectors')}} | Définition de la pseudo-classe mais sans la sémantique associée. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.disabled")}}
+
+## Voir aussi
+
+- {{cssxref(":enabled")}}
diff --git a/files/fr/web/css/_colon_empty/index.md b/files/fr/web/css/_colon_empty/index.md
index 81091c8db4..87d8eb5f2f 100644
--- a/files/fr/web/css/_colon_empty/index.md
+++ b/files/fr/web/css/_colon_empty/index.md
@@ -7,29 +7,30 @@ tags:
   - Reference
 translation_of: Web/CSS/:empty
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:empty</code></strong> correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires, les attributs ou le contenu généré en CSS avec {{cssxref("content")}} n'ont pas d'influence sur le contenu de l'élément (autrement dit, si un élément ne contient que des commentaires, il sera considéré comme vide).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:empty`** correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires, les attributs ou le contenu généré en CSS avec {{cssxref("content")}} n'ont pas d'influence sur le contenu de l'élément (autrement dit, si un élément ne contient que des commentaires, il sera considéré comme vide).
 
-<pre class="brush: css no-line-numbers">/* Cible tous les éléments &lt;div&gt; qui */
+```css
+/* Cible tous les éléments <div> qui */
 /* n'ont  pas de contenu */
 div:empty {
   background: lime;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Avec {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur <code>:empty</code> a été modifié afin de se comporter comme {{CSSxRef(":-moz-only-whitespace")}} mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.</p>
-</div>
+> **Note :** Avec {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur `:empty` a été modifié afin de se comporter comme {{CSSxRef(":-moz-only-whitespace")}} mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">body {
+```css
+body {
   display: flex;
   justify-content: space-around;
 }
@@ -43,63 +44,49 @@ div:empty {
 .box:empty {
   background: blue;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div class="box"&gt;&lt;!-- Je serai bleu. --&gt;&lt;/div&gt;
-&lt;div class="box"&gt;Je serai rouge.&lt;/div&gt;
-&lt;div class="box"&gt;
-    &lt;!-- Je serai rouge à cause des espaces autour du commentaire --&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples','100%','105')}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle ({{HTMLElement("a")}}, {{HTMLElement("button")}}, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility">l'arbre d'accessibilité</a>, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.</p>
-
-<p>Le texte fournissant le nom accessible peut être masqué grâce <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" rel="noopener">à des propriétés</a> afin de le retirer visuellement mais de le conserver pour les technologies d'assistance. Cette méthode est généralement utilisée pour les boutons utilisant une simple icône comme indication.</p>
-
-<ul>
- <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)</a></li>
- <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/"><i lang="en">Hidden content for better a11y</i> (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre la règle WCAG 2.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html"><i lang="en">Understanding Success Criterion 2.4.4</i> (en anglais) </a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#the-empty-pseudo", ":empty")}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Modifier afin d'obtenir le comportement de {{CSSxRef(":-moz-only-whitespace")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Selectors", "#empty-pseudo", ":empty")}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.empty")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":blank")}}{{Experimental_inline}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<div class="box"><!-- Je serai bleu. --></div>
+<div class="box">Je serai rouge.</div>
+<div class="box">
+    <!-- Je serai rouge à cause des espaces autour du commentaire -->
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples','100%','105')}}
+
+## Accessibilité
+
+Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle ({{HTMLElement("a")}}, {{HTMLElement("button")}}, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de [l'arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility), une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.
+
+Le texte fournissant le nom accessible peut être masqué grâce [à des propriétés](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link) afin de le retirer visuellement mais de le conserver pour les technologies d'assistance. Cette méthode est généralement utilisée pour les boutons utilisant une simple icône comme indication.
+
+- [Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)](https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
+- <i lang="en">Hidden content for better a11y</i>
+
+  [<i lang="en">Hidden content for better a11y</i> (en anglais)](https://gomakethings.com/hidden-content-for-better-a11y/)
+
+- [Comprendre la règle WCAG 2.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
+- <i lang="en">Understanding Success Criterion 2.4.4</i>
+
+  [<i lang="en">Understanding Success Criterion 2.4.4</i> (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html)
+
+## Spécifications
+
+| Spécification                                                                    | État                                 | Commentaires                                                                                 |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS4 Selectors", "#the-empty-pseudo", ":empty")}} | {{Spec2('CSS4 Selectors')}} | Modifier afin d'obtenir le comportement de {{CSSxRef(":-moz-only-whitespace")}}. |
+| {{SpecName("CSS3 Selectors", "#empty-pseudo", ":empty")}}     | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.empty")}}
+
+## Voir aussi
+
+- {{cssxref(":blank")}}{{Experimental_inline}}
diff --git a/files/fr/web/css/_colon_enabled/index.md b/files/fr/web/css/_colon_enabled/index.md
index 09241724f6..e7a7829ac0 100644
--- a/files/fr/web/css/_colon_enabled/index.md
+++ b/files/fr/web/css/_colon_enabled/index.md
@@ -1,102 +1,76 @@
 ---
 title: ':enabled'
-slug: 'Web/CSS/:enabled'
+slug: Web/CSS/:enabled
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:enabled'
+translation_of: Web/CSS/:enabled
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:enabled</code></strong> permet de cibler un élément activé. Un élément est activé s'il peut être sélectionné, si on peut cliquer dessus ou si on peut y saisir du texte ou y passer le focus (un élément peut également être dans un état désactivé).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:enabled`** permet de cibler un élément activé. Un élément est activé s'il peut être sélectionné, si on peut cliquer dessus ou si on peut y saisir du texte ou y passer le focus (un élément peut également être dans un état désactivé).
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; actif */
+```css
+/* Cible n'importe quel élément <input> actif */
 input:enabled {
   color: #22AA22;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, les textes des éléments activés seront verts alors que ceux des éléments désactivés seront gris. L'utilisateur peut ainsi reconnaître les éléments avec lesquels interagir.</p>
+Dans cet exemple, les textes des éléments activés seront verts alors que ceux des éléments désactivés seront gris. L'utilisateur peut ainsi reconnaître les éléments avec lesquels interagir.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;form action="url_of_form"&gt;
-  &lt;label for="PremierChamp"&gt;Premier champ (activé) :&lt;/label&gt;
-  &lt;input type="text" id="PremierChamp" value="Titi"&gt;&lt;br /&gt;
+```html
+<form action="url_of_form">
+  <label for="PremierChamp">Premier champ (activé) :</label>
+  <input type="text" id="PremierChamp" value="Titi"><br />
 
-  &lt;label for="DeuxiemeChamp"&gt;Deuxième champ (désactivé) :&lt;/label&gt;
-  &lt;input type="text" id="DeuxiemeChamp" value="Toto" disabled="disabled"&gt;&lt;br /&gt;
+  <label for="DeuxiemeChamp">Deuxième champ (désactivé) :</label>
+  <input type="text" id="DeuxiemeChamp" value="Toto" disabled="disabled"><br />
 
-  &lt;input type="button" value="Envoyer"/&gt;
-&lt;/form&gt;
-</pre>
+  <input type="button" value="Envoyer"/>
+</form>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css; highlight:[1,4]">input:enabled {
+```css
+input:enabled {
   color: #22AA22;
 }
 
 input:disabled {
   color: #D9D9D9;
 }
-  </pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<div>{{EmbedLiveSample("Exemples",550,95)}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition de la sémantique dans le contexte de HTML et des formulaires.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Lien vers la spécification des sélecteurs de niveau 3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.enabled")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":disabled")}}</li>
-</ul>
+
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples",550,95)}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                 | Commentaires                                                             |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}     | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                                     |
+| {{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}         | {{Spec2('HTML5 W3C')}}         | Définition de la sémantique dans le contexte de HTML et des formulaires. |
+| {{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                                     |
+| {{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}     | {{Spec2('CSS3 Basic UI')}} | Lien vers la spécification des sélecteurs de niveau 3.                   |
+| {{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}} | {{Spec2('CSS3 Selectors')}} | Définition de la pseudo-classe mais pas de la sémantique associée.       |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.enabled")}}
+
+## Voir aussi
+
+- {{cssxref(":disabled")}}
diff --git a/files/fr/web/css/_colon_first-child/index.md b/files/fr/web/css/_colon_first-child/index.md
index f82d5e854b..dfbce41751 100644
--- a/files/fr/web/css/_colon_first-child/index.md
+++ b/files/fr/web/css/_colon_first-child/index.md
@@ -1,126 +1,110 @@
 ---
 title: ':first-child'
-slug: 'Web/CSS/:first-child'
+slug: Web/CSS/:first-child
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:first-child'
+translation_of: Web/CSS/:first-child
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:first-child</code></strong> permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:first-child`** permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;p&gt; qui est */
+```css
+/* Cible n'importe quel élément <p> qui est */
 /* le premier fils de son élément parent */
 p:first-child {
   color: lime;
   background-color: black;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.</p>
-</div>
+> **Note :** Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Premier_exemple">Premier exemple</h3>
+### Premier exemple
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p:first-child {
+```css
+p:first-child {
   color: lime;
   background-color: black;
   padding: 5px;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p&gt;Ce paragraphe est mis en forme car c'est un élément
-     p ET que c'est le premier fils de l'élément div.&lt;/p&gt;
-  &lt;p&gt;En revanche, ce paragraphe n'est pas mis en forme
-     car ce n'est pas le premier !&lt;/p&gt;
-&lt;/div&gt;
+```html
+<div>
+  <p>Ce paragraphe est mis en forme car c'est un élément
+     p ET que c'est le premier fils de l'élément div.</p>
+  <p>En revanche, ce paragraphe n'est pas mis en forme
+     car ce n'est pas le premier !</p>
+</div>
 
-&lt;div&gt;
-  &lt;h2&gt;Ce titre h2 n'est pas mis en forme car ce n'est pas
-      un paragraphe.&lt;/h2&gt;
-  &lt;p&gt;Et ce paragraphe n'est pas mis en forme car ce n'est pas
-     le premier fils !&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+<div>
+  <h2>Ce titre h2 n'est pas mis en forme car ce n'est pas
+      un paragraphe.</h2>
+  <p>Et ce paragraphe n'est pas mis en forme car ce n'est pas
+     le premier fils !</p>
+</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Premier_exemple','100%',300)}}</p>
+{{EmbedLiveSample('Premier_exemple','100%',300)}}
 
-<h3 id="Utiliser_les_listes_non_ordonnées">Utiliser les listes non ordonnées</h3>
+### Utiliser les listes non ordonnées
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">li{
+```css
+li{
   color:blue;
 }
 
 li:first-child{
   color:green;
-}</pre>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;Élément 1 de la liste&lt;/li&gt;
-  &lt;li&gt;Élément 2&lt;/li&gt;
-  &lt;li&gt;Élément 3&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('Utiliser_les_listes_non_ordonnées',300,100)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Les éléments correspondants ne doivent pas avoir nécessairement de parent.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.first-child")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+}
+```
+
+#### HTML
 
+```html
 <ul>
- <li>{{cssxref(":last-child")}}</li>
- <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
- <li>{{cssxref(":last-of-type")}}</li>
- <li>{{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}</li>
+  <li>Élément 1 de la liste</li>
+  <li>Élément 2</li>
+  <li>Élément 3</li>
 </ul>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Utiliser_les_listes_non_ordonnées',300,100)}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires                                                               |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}} | {{Spec2('CSS4 Selectors')}} | Les éléments correspondants ne doivent pas avoir nécessairement de parent. |
+| {{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification.                                                       |
+| {{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}     | {{Spec2('CSS2.1')}}             | Définition initiale.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.first-child")}}
+
+## Voir aussi
+
+- {{cssxref(":last-child")}}
+- {{CSSxRef(":nth-child", ":nth-child()")}}
+- {{cssxref(":last-of-type")}}
+- {{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}
diff --git a/files/fr/web/css/_colon_first-of-type/index.md b/files/fr/web/css/_colon_first-of-type/index.md
index c4582933bd..037dba0868 100644
--- a/files/fr/web/css/_colon_first-of-type/index.md
+++ b/files/fr/web/css/_colon_first-of-type/index.md
@@ -1,93 +1,73 @@
 ---
 title: ':first-of-type'
-slug: 'Web/CSS/:first-of-type'
+slug: Web/CSS/:first-of-type
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:first-of-type'
+translation_of: Web/CSS/:first-of-type
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:first-of-type</code></strong> permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:first-of-type`** permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).
 
-<pre class="brush: css no-line-numbers">/* Cible le premier élément &lt;p&gt; d'un type donné */
+```css
+/* Cible le premier élément <p> d'un type donné */
 /* parmi ses éléments voisins */
 p:first-of-type {
   color: red;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).</p>
-</div>
+> **Note :** Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div :first-of-type {
+```css
+div :first-of-type {
   background-color: lime;
-}</pre>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <span>Voici le premier span !</span>
+  <span>Un autre span, pas le premier.</span>
+  <span>Quid de cet <em>élément imbriqué </em>?</span>
+  <b>Un autre type d'élément.</b>
+  <span>Ce type là est déjà apparu.</span>
+</div>
+```
 
-<h3 id="HTML">HTML</h3>
+### Résultat
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;span&gt;Voici le premier span !&lt;/span&gt;
-  &lt;span&gt;Un autre span, pas le premier.&lt;/span&gt;
-  &lt;span&gt;Quid de cet &lt;em&gt;élément imbriqué &lt;/em&gt;?&lt;/span&gt;
-  &lt;b&gt;Un autre type d'élément.&lt;/b&gt;
-  &lt;span&gt;Ce type là est déjà apparu.&lt;/span&gt;
-&lt;/div&gt;
-</pre>
+{{EmbedLiveSample('Exemples','100%', '120')}}
 
-<h3 id="Résultat">Résultat</h3>
+> **Note :** On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.
 
-<div>{{EmbedLiveSample('Exemples','100%', '120')}}</div>
+> **Note :** Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le `<div>`.
 
-<div class="note">
-<p><strong>Note :</strong> On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.</p>
-</div>
+## Spécifications
 
-<div class="note">
-<p><strong>Note :</strong> Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le <code>&lt;div&gt;</code>.</p>
-</div>
+| Spécification                                                                                    | État                                 | Commentaires                                                       |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------ |
+| {{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}} | {{Spec2('CSS4 Selectors')}} | Les éléments ciblés ne doivent pas nécessairement avoir de parent. |
+| {{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                               |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.first-of-type")}}
+
+## Voir aussi
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Les éléments ciblés ne doivent pas nécessairement avoir de parent.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.first-of-type")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":nth-of-type")}},</li>
- <li>{{cssxref(":last-of-type")}}</li>
- <li>{{cssxref(":first-child")}}</li>
-</ul>
+- {{cssxref(":nth-of-type")}},
+- {{cssxref(":last-of-type")}}
+- {{cssxref(":first-child")}}
diff --git a/files/fr/web/css/_colon_first/index.md b/files/fr/web/css/_colon_first/index.md
index 00a1c2771e..72ad3d0e02 100644
--- a/files/fr/web/css/_colon_first/index.md
+++ b/files/fr/web/css/_colon_first/index.md
@@ -7,92 +7,79 @@ tags:
   - Reference
 translation_of: Web/CSS/:first
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La pseudo-classe <strong><code>:first</code></strong>, liée à la règle @ {{cssxref("@page")}} décrit la mise en forme de la première page lors de l'impression d'un document. ( voir {{cssxref(":first-child")}} pour le premier élément d'un noeud )</p>
+La pseudo-classe **`:first`**, liée à la règle @ {{cssxref("@page")}} décrit la mise en forme de la première page lors de l'impression d'un document. ( voir {{cssxref(":first-child")}} pour le premier élément d'un noeud )
 
-<pre class="brush: css no-line-numbers">/* Cible le contenu de la première page */
+```css
+/* Cible le contenu de la première page */
 /* lorsqu'on imprime */
 @page :first {
   margin-left: 50%;
   margin-top: 50%;
-}</pre>
+}
+```
 
-<p>Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe :</p>
+Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe :
 
-<ul>
- <li>Les propriétés liées aux marges : {{cssxref("margin")}}</li>
- <li>Les propriétés liées aux lignes veuves et orphelines : {{cssxref("orphans")}} et {{cssxref("widows")}}</li>
- <li>Les propriétés liées aux sauts de page : {{cssxref("page-break")}}</li>
-</ul>
+- Les propriétés liées aux marges : {{cssxref("margin")}}
+- Les propriétés liées aux lignes veuves et orphelines : {{cssxref("orphans")}} et {{cssxref("widows")}}
+- Les propriétés liées aux sauts de page : {{cssxref("page-break")}}
 
-<p>De plus, seules <a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">les unités absolues</a> peuvent être utilisées pour les marges.</p>
+De plus, seules [les unités absolues](/fr/docs/Web/CSS/length#unités_de_longueur_absolues) peuvent être utilisées pour les marges.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@page :first {
+```css
+@page :first {
   margin-left: 50%;
   margin-top: 50%;
 }
 
 p {
   page-break-after: always;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Première page.&lt;/p&gt;
-&lt;p&gt;Deuxième page.&lt;/p&gt;
-&lt;button&gt;Imprimer&lt;/button&gt;</pre>
+```html
+<p>Première page.</p>
+<p>Deuxième page.</p>
+<button>Imprimer</button>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">document.querySelector("button").addEventListener('click', () =&gt; {
+```js
+document.querySelector("button").addEventListener('click', () => {
   window.print();
-});</pre>
-
-<p>Appuyez sur le bouton "Imprimer!" pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défaut.</p>
-
-<p>{{EmbedLiveSample("Exemples","80%","150px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}</td>
-   <td>{{Spec2('CSS3 Paged Media')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.first")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("@page")}}</li>
- <li>{{cssxref(":left")}}</li>
- <li>{{cssxref(":right")}}</li>
-</ul>
+});
+```
+
+Appuyez sur le bouton "Imprimer!" pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défaut.
+
+{{EmbedLiveSample("Exemples","80%","150px")}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}} | {{Spec2('CSS3 Paged Media')}} | Aucune modification. |
+| {{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}     | {{Spec2('CSS2.1')}}                 | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.first")}}
+
+## Voir aussi
+
+- {{cssxref("@page")}}
+- {{cssxref(":left")}}
+- {{cssxref(":right")}}
diff --git a/files/fr/web/css/_colon_focus-visible/index.md b/files/fr/web/css/_colon_focus-visible/index.md
index 8354f4329b..f5deaa99f2 100644
--- a/files/fr/web/css/_colon_focus-visible/index.md
+++ b/files/fr/web/css/_colon_focus-visible/index.md
@@ -1,43 +1,46 @@
 ---
 title: ':focus-visible'
-slug: 'Web/CSS/:focus-visible'
+slug: Web/CSS/:focus-visible
 tags:
   - CSS
   - Pseudo-classe
   - Reference
   - Web
-translation_of: 'Web/CSS/:focus-visible'
+translation_of: Web/CSS/:focus-visible
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La pseudo-classe <strong><code>:focus-visible</code></strong> s'applique lorsqu'un élément correspond à la pseudo-classe {{cssxref("focus")}} et que l'agent utilisateur détermine, via une heuristique, que le focus devrait être mis en évidence sur l'élément (la plupart des navigateurs affichent un contour en surbrillance par défaut).</p>
+La pseudo-classe **`:focus-visible`** s'applique lorsqu'un élément correspond à la pseudo-classe {{cssxref("focus")}} et que l'agent utilisateur détermine, via une heuristique, que le focus devrait être mis en évidence sur l'élément (la plupart des navigateurs affichent un contour en surbrillance par défaut).
 
-<p>Ce sélecteur peut être utile afin de fournir un indicateur de focus différent selon le mode de navigation de l'utilisateur (souris ou clavier).</p>
+Ce sélecteur peut être utile afin de fournir un indicateur de focus différent selon le mode de navigation de l'utilisateur (souris ou clavier).
 
-<p>On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée  <code>:-moz-focusring</code>. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations.</p>
+On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée  `:-moz-focusring`. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>:focus-visible</pre>
+    :focus-visible
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<p>Dans cet exemple, le sélecteur <code>:focus-visible</code> utilise le comportement de l'agent utilisateur afin de déterminer lorsqu'il doit s'appliquer. Pour utiliser l'exemple, comparez ce qui se produit selon que vous utilisez une souris ou un clavier et notez la différence avec les éléments ciblés par <code>:focus</code>.</p>
+Dans cet exemple, le sélecteur `:focus-visible` utilise le comportement de l'agent utilisateur afin de déterminer lorsqu'il doit s'appliquer. Pour utiliser l'exemple, comparez ce qui se produit selon que vous utilisez une souris ou un clavier et notez la différence avec les éléments ciblés par `:focus`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;input value="Styles par défaut"&gt;&lt;br&gt;
-&lt;button&gt;Styles par défaut&lt;/button&gt;&lt;br&gt;
-&lt;input class="focus-only" value=":focus only"&gt;&lt;br&gt;
-&lt;button class="focus-only"&gt;:focus only&lt;/button&gt;&lt;br&gt;
-&lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
-&lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>
+```html
+<input value="Styles par défaut"><br>
+<button>Styles par défaut</button><br>
+<input class="focus-only" value=":focus only"><br>
+<button class="focus-only">:focus only</button><br>
+<input class="focus-visible-only" value=":focus-visible only"><br>
+<button class="focus-visible-only">:focus-visible only</button>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">input, button {
+```css
+input, button {
   margin: 10px;
 }
 
@@ -48,21 +51,24 @@ translation_of: 'Web/CSS/:focus-visible'
 .focus-visible-only:focus-visible {
   outline: 4px dashed darkorange;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Exemple_simple', '100%', '300')}}</p>
+{{EmbedLiveSample('Exemple_simple', '100%', '300')}}
 
-<h3 id="Choisir_d'afficher_l’indicateur_de_focus">Choisir d'afficher l’indicateur de focus</h3>
+### Choisir d'afficher l’indicateur de focus
 
-<p>Un contrôle personnalisé (par exemple un bouton provenant d'un <em><a href="/fr/docs/Web/Web_Components/Using_custom_elements">custom element</a></em>) peut utiliser <code>:focus-visible</code> afin d'appliquer ou non un indicateur de focus pour la navigation au clavier afin de calquer au comportement natif de {{htmlelement("button")}}.</p>
+Un contrôle personnalisé (par exemple un bouton provenant d'un _[custom element](/fr/docs/Web/Web_Components/Using_custom_elements)_) peut utiliser `:focus-visible` afin d'appliquer ou non un indicateur de focus pour la navigation au clavier afin de calquer au comportement natif de {{htmlelement("button")}}.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;custom-button tabindex="0" role="button"&gt;Cliquez-moi&lt;/custom-button&gt;</pre>
+```html
+<custom-button tabindex="0" role="button">Cliquez-moi</custom-button>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">custom-button {
+```css
+custom-button {
   display: inline-block;
   margin: 10px;
 }
@@ -86,50 +92,34 @@ custom-button:focus-visible {
      navigation est au clavier */
   outline: 4px dashed darkorange;
   background: transparent;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Choisir_d'afficher_l’indicateur_de_focus", '100%', '300')}}</p>
+{{EmbedLiveSample("Choisir_d'afficher_l’indicateur_de_focus", '100%', '300')}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<h3 id="Troubles_de_la_vision">Troubles de la vision</h3>
+### Troubles de la vision
 
-<p>Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> nécessite un contraste minimum de 3 à 1.</p>
+Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) nécessite un contraste minimum de 3 à 1.
 
-<ul>
- <li>Indicateurs visuels de focus accessibles : <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Conseils sur la conception d'indicateurs utiles et utilisables (en anglais)</a></li>
-</ul>
+- Indicateurs visuels de focus accessibles : [Conseils sur la conception d'indicateurs utiles et utilisables (en anglais)](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)
 
-<h3 id="Troubles_cognitifs">Troubles cognitifs</h3>
+### Troubles cognitifs
 
-<p>L'apparition ou la disparition d'un indicateur de focus peut être source de confusion pour les personnes souffrant de troubles cognitifs ou pour les personnes qui ne sont pas habituées à ces interfaces.</p>
+L'apparition ou la disparition d'un indicateur de focus peut être source de confusion pour les personnes souffrant de troubles cognitifs ou pour les personnes qui ne sont pas habituées à ces interfaces.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}} | {{Spec2("CSS4 Selectors")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.focus-visible")}}</p>
+{{Compat("css.selectors.focus-visible")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":focus")}}</li>
- <li>{{cssxref(":focus-within")}}</li>
-</ul>
+- {{cssxref(":focus")}}
+- {{cssxref(":focus-within")}}
diff --git a/files/fr/web/css/_colon_focus-within/index.md b/files/fr/web/css/_colon_focus-within/index.md
index 96f6ec7d91..0b530933ca 100644
--- a/files/fr/web/css/_colon_focus-within/index.md
+++ b/files/fr/web/css/_colon_focus-within/index.md
@@ -1,35 +1,38 @@
 ---
 title: ':focus-within'
-slug: 'Web/CSS/:focus-within'
+slug: Web/CSS/:focus-within
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:focus-within'
+translation_of: Web/CSS/:focus-within
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:focus-within</code></strong> s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du <em>Shadow DOM</em>. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:focus-within`** s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du _Shadow DOM_. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire).
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel &lt;div&gt; lorsqu'un */
+```css
+/* Cible n'importe quel <div> lorsqu'un */
 /* de ses descendants a reçu le focus */
 div:focus-within {
   background: yellow;
-}</pre>
+}
+```
 
-<p>Cette pseudo-classe s'applique également aux descendants de l'élément ciblé ainsi qu'aux descendants dont la racine est la racine d'un arbre du {{Glossary("Shadow DOM")}}.</p>
+Cette pseudo-classe s'applique également aux descendants de l'élément ciblé ainsi qu'aux descendants dont la racine est la racine d'un arbre du {{Glossary("Shadow DOM")}}.
 
-<p>Ce sélecteur est notamment utile lorsqu'on veut, par exemple, mettre en avant l'ensemble d'un formulaire lorsque l'utilisateur passe le focus sur l'un de ses éléments {{HTMLElement("input")}}.</p>
+Ce sélecteur est notamment utile lorsqu'on veut, par exemple, mettre en avant l'ensemble d'un formulaire lorsque l'utilisateur passe le focus sur l'un de ses éléments {{HTMLElement("input")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.name-container {
+```css
+.name-container {
   padding: 4px;
 }
 
@@ -39,56 +42,43 @@ div:focus-within {
 
 input {
   margin: 4px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   L'élément div ci-après aura un fond jaune
   si l'un des deux champs de saisie a le focus.
-&lt;/p&gt;
-&lt;div class="name-container"&gt;
-  &lt;label for="prenom"&gt;
+</p>
+<div class="name-container">
+  <label for="prenom">
     Prénom :
-    &lt;input id="prenom" placeholder="Prénom" type="text"&gt;
-  &lt;/label&gt;
-  &lt;label for="nom"&gt;
+    <input id="prenom" placeholder="Prénom" type="text">
+  </label>
+  <label for="nom">
     Nom :
-    &lt;input id="nom" placeholder="Nom" type="text"&gt;
-  &lt;/label&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 500, 150)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.focus-within")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":focus")}}</li>
- <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
-</ul>
+    <input id="nom" placeholder="Nom" type="text">
+  </label>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 500, 150)}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}} | {{Spec2("CSS4 Selectors")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.focus-within")}}
+
+## Voir aussi
+
+- {{cssxref(":focus")}}
+- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}}
diff --git a/files/fr/web/css/_colon_focus/index.md b/files/fr/web/css/_colon_focus/index.md
index 2f2b20b790..2188885f3e 100644
--- a/files/fr/web/css/_colon_focus/index.md
+++ b/files/fr/web/css/_colon_focus/index.md
@@ -1,33 +1,36 @@
 ---
 title: ':focus'
-slug: 'Web/CSS/:focus'
+slug: Web/CSS/:focus
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:focus'
+translation_of: Web/CSS/:focus
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:focus</code></strong> permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:focus`** permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire).
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; */
+```css
+/* Cible n'importe quel élément <input> */
 /* uniquement lorsqu'il a le focus */
 input:focus {
   color: red;
-}</pre>
+}
+```
 
-<p>Cette pseudo-classe ne s'applique qu'aux éléments avec le focus, elle ne s'applique pas à ses parents (comme {{cssxref(":checked")}}, {{cssxref(":enabled")}} mais pas comme {{cssxref(":active")}} ou {{cssxref(":hover")}}).</p>
+Cette pseudo-classe ne s'applique qu'aux éléments avec le focus, elle ne s'applique pas à ses parents (comme {{cssxref(":checked")}}, {{cssxref(":enabled")}} mais pas comme {{cssxref(":active")}} ou {{cssxref(":hover")}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.prenom:focus {
+```css
+.prenom:focus {
   background: yellow;
   color: red;
 }
@@ -35,74 +38,46 @@ input:focus {
 .nom:focus {
   background: yellow;
   color: lime;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;input class="prenom" value="Rouge si focus"&gt;
-&lt;input class="nom" value="Vert si focus"&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '100%', 40)}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> nécessite un contraste minimum de 3 à 1.</p>
-
-<ul>
- <li>Indicateurs visuels de focus accessibles : <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Conseils sur la conception d'indicateurs utiles et utilisables (en anglais)</a></li>
-</ul>
-
-<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3>
-
-<p>Il ne faut jamais retirer l'indicateur de focus sans le remplacer par un autre indicateur qui respecte la recommandation <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> :</p>
-
-<ul>
- <li><a href="https://a11yproject.com/posts/never-remove-css-outlines/">Ne jamais retirer les bordures/contours CSS (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition de la sémantique relative à HTML.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.focus")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
- <li>{{cssxref(":focus-within")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<input class="prenom" value="Rouge si focus">
+<input class="nom" value="Vert si focus">
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '100%', 40)}}
+
+## Accessibilité
+
+Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) nécessite un contraste minimum de 3 à 1.
+
+- Indicateurs visuels de focus accessibles : [Conseils sur la conception d'indicateurs utiles et utilisables (en anglais)](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)
+
+### `:focus { outline: none; }`
+
+Il ne faut jamais retirer l'indicateur de focus sans le remplacer par un autre indicateur qui respecte la recommandation [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) :
+
+- [Ne jamais retirer les bordures/contours CSS (en anglais)](https://a11yproject.com/posts/never-remove-css-outlines/)
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                 | Commentaires                                 |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}                     | {{Spec2('HTML WHATWG')}}     | Définition de la sémantique relative à HTML. |
+| {{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}                                     | {{Spec2('CSS4 Selectors')}} | Aucune modification.                         |
+| {{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification.                         |
+| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}                 | {{Spec2('CSS2.1')}}             | Définition initiale.                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.focus")}}
+
+## Voir aussi
+
+- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}}
+- {{cssxref(":focus-within")}}
diff --git a/files/fr/web/css/_colon_fullscreen/index.md b/files/fr/web/css/_colon_fullscreen/index.md
index 70a63996e7..3855532430 100644
--- a/files/fr/web/css/_colon_fullscreen/index.md
+++ b/files/fr/web/css/_colon_fullscreen/index.md
@@ -1,91 +1,80 @@
 ---
 title: ':fullscreen'
-slug: 'Web/CSS/:fullscreen'
+slug: Web/CSS/:fullscreen
 tags:
   - CSS
   - Fullscreen API
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:fullscreen'
+translation_of: Web/CSS/:fullscreen
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:fullscreen</code></strong> permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:fullscreen`** permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>La pseudo-classe <code>:fullscreen</code> permet de configurer la taille, le style ou la disposition du contenu lorsque les éléments passent de l'état plein écran à l'état normal et vice versa.</p>
+La pseudo-classe `:fullscreen` permet de configurer la taille, le style ou la disposition du contenu lorsque les éléments passent de l'état plein écran à l'état normal et vice versa.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on change la couleur d'un bouton selon que le document est en plein écran ou non. On n'utilise pas JavaScript pour changer les styles.</p>
+Dans cet exemple, on change la couleur d'un bouton selon que le document est en plein écran ou non. On n'utilise pas JavaScript pour changer les styles.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>On utilise deux règles. La première qui permet de définir la couleur d'arrière plan pour le bouton « Passer en mode plein écran » lorsque l'élément n'est pas en plein écran. Pour distinguer ce cas, on utilise <code>:not(:fullscreen)</code>, qui permet de cibler les éléments qui n'ont pas la pseudo-classe <code>:fullscreen</code>.</p>
+On utilise deux règles. La première qui permet de définir la couleur d'arrière plan pour le bouton « Passer en mode plein écran » lorsque l'élément n'est pas en plein écran. Pour distinguer ce cas, on utilise `:not(:fullscreen)`, qui permet de cibler les éléments qui n'ont pas la pseudo-classe `:fullscreen`.
 
-<pre class="brush: css">#fs-toggle:not(:fullscreen) {
+```css
+#fs-toggle:not(:fullscreen) {
   background-color: #afa;
 }
-</pre>
+```
 
-<p>Lorsque le document est en mode plein écran, on utilise cette fois-ci la pseudo-classe <code>:fullscreen</code> et on définit une autre couleur (ici un rouge pâle).</p>
+Lorsque le document est en mode plein écran, on utilise cette fois-ci la pseudo-classe `:fullscreen` et on définit une autre couleur (ici un rouge pâle).
 
-<pre class="brush: css">#fs-toggle:fullscreen {
+```css
+#fs-toggle:fullscreen {
   background-color: #faa;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;h1&gt;MDN Web Docs Demo: :fullscreen pseudo-class&lt;/h1&gt;
+```html
+<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
 
-&lt;p&gt;This demo uses the &lt;code&gt;:fullscreen&lt;/code&gt; pseudo-class to automatically
+<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
   change the style of a button used to toggle full-screen mode on and off,
-  entirely using CSS.&lt;/p&gt;
-
-&lt;button id="fs-toggle"&gt;Toggle Fullscreen&lt;/button&gt;</pre>
-
-<p>Dans ce fragment de code HTML, c'est l'élément {{HTMLElement("button")}} avec l'identifiant <code>"fs-toggle"</code> qui changera d'une couleur à une autre selon que le document est en plein écran ou non.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td>
-   <td>{{Spec2('Fullscreen')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.fullscreen")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Fullscreen_API">L'API Fullscreen</a></li>
- <li><a href="/fr/docs/Web/API/Fullscreen_API/Guide">Le guide de l'API Fullscreen</a></li>
- <li>{{cssxref("::backdrop")}}</li>
- <li>Les API DOM :
-  <ul>
-   <li>{{domxref("Element.requestFullscreen()")}},</li>
-   <li>{{domxref("Document.exitFullscreen()")}},</li>
-   <li>{{domxref("Document.fullscreenElement")}}</li>
-  </ul>
- </li>
- <li>L'attribut {{HTMLAttrXRef("allowfullscreen", "iframe")}}</li>
-</ul>
+  entirely using CSS.</p>
+
+<button id="fs-toggle">Toggle Fullscreen</button>
+```
+
+Dans ce fragment de code HTML, c'est l'élément {{HTMLElement("button")}} avec l'identifiant `"fs-toggle"` qui changera d'une couleur à une autre selon que le document est en plein écran ou non.
+
+## Spécifications
+
+| Spécification                                                                                | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}} | {{Spec2('Fullscreen')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.fullscreen")}}
+
+## Voir aussi
+
+- [L'API Fullscreen](/fr/docs/Web/API/Fullscreen_API)
+- [Le guide de l'API Fullscreen](/fr/docs/Web/API/Fullscreen_API/Guide)
+- {{cssxref("::backdrop")}}
+- Les API DOM :
+
+  - {{domxref("Element.requestFullscreen()")}},
+  - {{domxref("Document.exitFullscreen()")}},
+  - {{domxref("Document.fullscreenElement")}}
+
+- L'attribut {{HTMLAttrXRef("allowfullscreen", "iframe")}}
diff --git a/files/fr/web/css/_colon_future/index.md b/files/fr/web/css/_colon_future/index.md
index 5f52b3f062..ef82a54d5a 100644
--- a/files/fr/web/css/_colon_future/index.md
+++ b/files/fr/web/css/_colon_future/index.md
@@ -1,66 +1,69 @@
 ---
 title: ':future'
-slug: 'Web/CSS/:future'
-browser-compat: css.selectors.future
+slug: Web/CSS/:future
 translation_of: Web/CSS/:future
+browser-compat: css.selectors.future
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Le sélecteur de <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>:future</code></strong> est une pseudo-classe agissant dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement après un élément correspondant à {{cssxref(":current")}}. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a>.</p>
+Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:future`** est une pseudo-classe agissant dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement après un élément correspondant à {{cssxref(":current")}}. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format [WebVTT](/fr/docs/Web/API/WebVTT_API).
 
-<pre class="brush: css">:future(p, span) {
+```css
+:future(p, span) {
   display: none;
-}</pre>
+}
+```
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="css">CSS</h3>
+### CSS
 
-<pre class="brush: css">:future(p, span) {
+```css
+:future(p, span) {
   display: none;
-}</pre>
+}
+```
 
-<h3 id="html">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;video controls preload="metadata"&gt;
-  &lt;source src="video.mp4" type="video/mp4" /&gt;
-  &lt;source src="video.webm" type="video/webm" /&gt;
-  &lt;track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default&gt;
-&lt;/video&gt;</pre>
+```html
+<video controls preload="metadata">
+  <source src="video.mp4" type="video/mp4" />
+  <source src="video.webm" type="video/webm" />
+  <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default>
+</video>
+```
 
-<h3 id="webvtt">WebVTT </h3>
+### WebVTT 
 
-<pre>FICHIER WEBVTT
+    FICHIER WEBVTT
 
-1
-00:00:03.500 --&gt; 00:00:05.000
-Voici le premier sous-titre
+    1
+    00:00:03.500 --> 00:00:05.000
+    Voici le premier sous-titre
 
-2
-00:00:06.000 --&gt; 00:00:09.000
-Voici le second sous-titre
+    2
+    00:00:06.000 --> 00:00:09.000
+    Voici le second sous-titre
 
-3
-00:00:11.000 --&gt; 00:00:19.000
-Voici le troisième sous-titre
-</pre>
+    3
+    00:00:11.000 --> 00:00:19.000
+    Voici le troisième sous-titre
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li>
- <li>{{cssxref(":current")}}</li>
- <li>{{cssxref(":past")}}</li>
-</ul>
+- [Web Video Text Tracks Format (WebVTT)](/fr/docs/Web/API/WebVTT_API)
+- {{cssxref(":current")}}
+- {{cssxref(":past")}}
diff --git a/files/fr/web/css/_colon_has/index.md b/files/fr/web/css/_colon_has/index.md
index 6b2f7ff50e..29cfe11144 100644
--- a/files/fr/web/css/_colon_has/index.md
+++ b/files/fr/web/css/_colon_has/index.md
@@ -1,67 +1,57 @@
 ---
 title: ':has'
-slug: 'Web/CSS/:has'
+slug: Web/CSS/:has
 tags:
   - CSS
   - Experimental
   - Pseudo-classe
   - Reference
   - Sélecteur
-translation_of: 'Web/CSS/:has'
+translation_of: Web/CSS/:has
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:has()</code></strong> permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément (selon la portée, {{cssxref(":scope")}}, de l'élément).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:has()`** permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément (selon la portée, {{cssxref(":scope")}}, de l'élément).
 
-<p>Cette pseudo-classe <code>:has()</code> prend en paramètre une liste de sélecteurs.</p>
+Cette pseudo-classe `:has()` prend en paramètre une liste de sélecteurs.
 
-<div class="note">
-<p><strong>Note :</strong> Pour des raisons de performances et dans la spécification actuelle, <a href="https://drafts.csswg.org/selectors/#live-profile"><code>has()</code> n'est pas classé comme un sélecteur dynamique</a> et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}.</p>
-</div>
+> **Note :** Pour des raisons de performances et dans la spécification actuelle, [`has()` n'est pas classé comme un sélecteur dynamique](https://drafts.csswg.org/selectors/#live-profile) et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}.
 
-<pre class="brush: js">/* Avec cette ligne de JavaScript, on récupère  */
-/* tous les éléments &lt;a&gt; qui ont un fils direct */
-/* qui est un élément &lt;img&gt; */
+```js
+/* Avec cette ligne de JavaScript, on récupère  */
+/* tous les éléments <a> qui ont un fils direct */
+/* qui est un élément <img> */
 /* Attention, actuellement cette fonction n'est */
 /* pas prise en charge par les navigateurs et   */
 /* n'est pas conçue pour fonctionner dans les   */
 /* feuilles de style */
-var test = document.querySelector('a:has(&gt; img)');</pre>
+var test = document.querySelector('a:has(> img)');
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">:has(<em>liste_selecteurs</em>) {<em> proprietes</em> }</pre>
+    :has(liste_selecteurs) { proprietes }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} :</p>
+Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} :
 
-<pre class="brush: css">a:has(&gt; img)
-</pre>
+```css
+a:has(> img)
+```
 
-<p>Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} :</p>
+Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} :
 
-<pre class="brush: css">h1:has(+ p)</pre>
+```css
+h1:has(+ p)
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#relational", ":has()")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | État                                 | Commentaires        |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName("CSS4 Selectors", "#relational", ":has()")}} | {{Spec2("CSS4 Selectors")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.has")}}</p>
+{{Compat("css.selectors.has")}}
diff --git a/files/fr/web/css/_colon_host()/index.md b/files/fr/web/css/_colon_host()/index.md
index f2bbe1b429..90be6890ff 100644
--- a/files/fr/web/css/_colon_host()/index.md
+++ b/files/fr/web/css/_colon_host()/index.md
@@ -1,44 +1,46 @@
 ---
 title: ':host()'
-slug: 'Web/CSS/:host()'
+slug: Web/CSS/:host()
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:host()'
+translation_of: Web/CSS/:host()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction de <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host()</code></strong> permet de sélectionner l'hôte du <em>shadow DOM</em> contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.</p>
+La fonction de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host()`** permet de sélectionner l'hôte du _shadow DOM_ contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.
 
-<p>Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction <code>:host()</code>. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser  {{cssxref(":host-context()")}}.</p>
+Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser  {{cssxref(":host-context()")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonction n'a aucun effet si elle est utilisée en dehors d'un <em>shadow DOM</em>.</p>
-</div>
+> **Note :** Cette fonction n'a aucun effet si elle est utilisée en dehors d'un _shadow DOM_.
 
-<pre class="brush: css no-line-numbers">/* On cible l'hôte du shadow DOM uniquement s'il
+```css
+/* On cible l'hôte du shadow DOM uniquement s'il
    correspond au sélecteur passé en argument */
 :host(.special-custom-element) {
   font-weight: bold;
 }
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Les fragments de code suivants sont extraits du dépôt d'exemple <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors"><em>host-selectors</em></a><em> </em>(<a href="https://mdn.github.io/web-components-examples/host-selectors/">voir le résultat <em>live</em></a>).</p>
+Les fragments de code suivants sont extraits du dépôt d'exemple [_host-selectors_](https://github.com/mdn/web-components-examples/tree/master/host-selectors)\* *([voir le résultat *live\*](https://mdn.github.io/web-components-examples/host-selectors/)).
 
-<p>Dans cet exemple, on dispose d'un élément personnalisé,  <code>&lt;context-span&gt;</code>, qui peut contenir du texte :</p>
+Dans cet exemple, on dispose d'un élément personnalisé,  `<context-span>`, qui peut contenir du texte :
 
-<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+```html
+<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+```
 
-<p>Dans le constructeur de l'élément, on crée un élément <code>style</code> et un élément <code>span</code>. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément <code>style</code> recevra quelques règles CSS :</p>
+Dans le constructeur de l'élément, on crée un élément `style` et un élément `span`. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément `style` recevra quelques règles CSS :
 
-<pre class="brush: js">let style = document.createElement('style');
+```js
+let style = document.createElement('style');
 let span = document.createElement('span');
 span.textContent = this.textContent;
 
@@ -51,37 +53,23 @@ style.textContent = 'span:hover { text-decoration: underline; }' +
                     ':host-context(h1):after { content: " - no links in headers!" }' +
                     ':host-context(article, aside) { color: gray; }' +
                     ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
-
-<p>La règle <code>:host(.footer) { color : red; }</code> s'applique à toutes les instances de l'élément <code>&lt;context-span&gt;</code> (il s'agit ici de l'hôte) du document qui possèdent la classe <code>footer</code>. Ici, pour ces éléments donnés, on utilise une couleur spécifique.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Scope', '#host-selector', ':host()')}}</td>
-   <td>{{Spec2('CSS Scope')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.hostfunction")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
- <li>{{cssxref(":host")}}</li>
- <li>{{cssxref(":host-context()")}}</li>
-</ul>
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+```
+
+La règle `:host(.footer) { color : red; }` s'applique à toutes les instances de l'élément `<context-span>` (il s'agit ici de l'hôte) du document qui possèdent la classe `footer`. Ici, pour ces éléments donnés, on utilise une couleur spécifique.
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('CSS Scope', '#host-selector', ':host()')}} | {{Spec2('CSS Scope')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.hostfunction")}}
+
+## Voir aussi
+
+- [Les composants web](/fr/docs/Web/Web_Components)
+- {{cssxref(":host")}}
+- {{cssxref(":host-context()")}}
diff --git a/files/fr/web/css/_colon_host-context()/index.md b/files/fr/web/css/_colon_host-context()/index.md
index 6457aa73c3..f1c99619f4 100644
--- a/files/fr/web/css/_colon_host-context()/index.md
+++ b/files/fr/web/css/_colon_host-context()/index.md
@@ -1,25 +1,24 @@
 ---
 title: ':host-context()'
-slug: 'Web/CSS/:host-context()'
+slug: Web/CSS/:host-context()
 tags:
   - CSS
   - Experimental
   - Pseudo-classe
   - Reference
   - Web
-translation_of: 'Web/CSS/:host-context()'
+translation_of: Web/CSS/:host-context()
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host-context()</code></strong> est une fonction qui sélectionne l'hôte (<em>shadow host</em>) du <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em> qui contient le CSS utilisé à l'intérieur, uniquement si le sélecteur fourni en argument correspond à l'ancêtre de l'hôte selon l'arborescence du DOM.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host-context()`** est une fonction qui sélectionne l'hôte (_shadow host_) du _[shadow DOM](/fr/docs/Web/Web_Components/Using_shadow_DOM)_ qui contient le CSS utilisé à l'intérieur, uniquement si le sélecteur fourni en argument correspond à l'ancêtre de l'hôte selon l'arborescence du DOM.
 
-<p>Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — <code>h1</code> par exemple — afin de sélectionner uniquement les instances d'un élément personnalisé (<em>custom element</em>) présentes à l'intérieur d'un élément <code>&lt;h1&gt;</code>.</p>
+Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — `h1` par exemple — afin de sélectionner uniquement les instances d'un élément personnalisé (_custom element_) présentes à l'intérieur d'un élément `<h1>`.
 
-<div class="note">
-<p><strong>Note :</strong> Cette pseudo-classe n'a aucun effet en dehors d'un <em>shadow DOM</em>.</p>
-</div>
+> **Note :** Cette pseudo-classe n'a aucun effet en dehors d'un _shadow DOM_.
 
-<pre class="brush: css no-line-numbers">/* Cible un hôte uniquement si c'est un descendant
+```css
+/* Cible un hôte uniquement si c'est un descendant
    du sélecteur passé en argument */
 :host-context(h1) {
   font-weight: bold;
@@ -28,24 +27,26 @@ translation_of: 'Web/CSS/:host-context()'
 :host-context(main article) {
   font-weight: bold;
 }
+```
 
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Les fragments de code suivants sont tirés du dépôt <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors"><em>host-selectors</em></a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">voir le résultat <em>live</em></a>).</p>
+Les fragments de code suivants sont tirés du dépôt [_host-selectors_](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([voir le résultat _live_](https://mdn.github.io/web-components-examples/host-selectors/)).
 
-<p>Dans cet exemple, on dispose d'un élément personnalisé — <code>&lt;context-span&gt;</code> — au sein duquel on peut avoir du texte :</p>
+Dans cet exemple, on dispose d'un élément personnalisé — `<context-span>` — au sein duquel on peut avoir du texte :
 
-<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+```html
+<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+```
 
-<p>Dans le constructeur de l'élément, on crée des éléments <code>style</code> et <code>span</code> et on remplit le <code>span</code> avec le contenu de l'élément personnalisé puis on applique certains règles CSS pour l'élément <code>style</code> :</p>
+Dans le constructeur de l'élément, on crée des éléments `style` et `span` et on remplit le `span` avec le contenu de l'élément personnalisé puis on applique certains règles CSS pour l'élément `style` :
 
-<pre class="brush: js">let style = document.createElement('style');
+```js
+let style = document.createElement('style');
 let span = document.createElement('span');
 span.textContent = this.textContent;
 
@@ -58,37 +59,23 @@ style.textContent = 'span:hover { text-decoration: underline; }' +
                     ':host-context(h1):after { content: " - no links in headers!" }' +
                     ':host-context(article, aside) { color: gray; }' +
                     ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
-
-<p>Les règles <code>:host-context(h1) { font-style: italic; }</code> et <code>:host-context(h1):after { content: " - no links in headers!" }</code> permettent de mettre en forme l'instance de l'élément <code>&lt;context-span&gt;</code> (l'hôte de cette instance) à l'intérieur de l'élément <code>&lt;h1&gt;</code>. Nous avons utilisé cet hôte afin d'indiquer clairement qu'un tel élément personnalisé ne doit pas apparaître dans un titre <code>&lt;h1&gt;</code>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Scope', '#host-selector', ':host-context()')}}</td>
-   <td>{{Spec2('CSS Scope')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.host-context")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
- <li>{{cssxref(":host")}}</li>
- <li>{{cssxref(":host()")}}</li>
-</ul>
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+```
+
+Les règles `:host-context(h1) { font-style: italic; }` et `:host-context(h1):after { content: " - no links in headers!" }` permettent de mettre en forme l'instance de l'élément `<context-span>` (l'hôte de cette instance) à l'intérieur de l'élément `<h1>`. Nous avons utilisé cet hôte afin d'indiquer clairement qu'un tel élément personnalisé ne doit pas apparaître dans un titre `<h1>`.
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('CSS Scope', '#host-selector', ':host-context()')}} | {{Spec2('CSS Scope')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.host-context")}}
+
+## Voir aussi
+
+- [Les composants web](/fr/docs/Web/Web_Components)
+- {{cssxref(":host")}}
+- {{cssxref(":host()")}}
diff --git a/files/fr/web/css/_colon_host/index.md b/files/fr/web/css/_colon_host/index.md
index e8a2a7a89f..83237f7080 100644
--- a/files/fr/web/css/_colon_host/index.md
+++ b/files/fr/web/css/_colon_host/index.md
@@ -1,41 +1,43 @@
 ---
 title: ':host'
-slug: 'Web/CSS/:host'
+slug: Web/CSS/:host
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:host'
+translation_of: Web/CSS/:host
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host</code></strong> permet de cibler l'hôte d'un <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em> contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (<em>custom element</em>) depuis l'intérieur du <em>shadow DOM</em>.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host`** permet de cibler l'hôte d'un _[shadow DOM](/fr/docs/Web/Web_Components/Using_shadow_DOM)_ contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (_custom element_) depuis l'intérieur du _shadow DOM_.
 
-<div class="note">
-<p><strong>Note :</strong> Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un <em>shadow DOM</em>.</p>
-</div>
+> **Note :** Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un _shadow DOM_.
 
-<pre class="brush: css no-line-numbers">/* Cible la racine d'un hôte de shadow DOM */
+```css
+/* Cible la racine d'un hôte de shadow DOM */
 :host {
   font-weight: bold;
 }
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Les fragments de code qui suivent sont extraits du dépôt d'exemple <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors"><em>host-selectors</em></a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">voir le résultat <em>live</em></a>).</p>
+Les fragments de code qui suivent sont extraits du dépôt d'exemple [_host-selectors_](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([voir le résultat _live_](https://mdn.github.io/web-components-examples/host-selectors/)).
 
-<p>Dans cet exemple, on dispose d'un élément personnalisé <code>&lt;context-span&gt;</code>  qui peut contenir du texte :</p>
+Dans cet exemple, on dispose d'un élément personnalisé `<context-span>`  qui peut contenir du texte :
 
-<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+```html
+<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+```
 
-<p>Pour le constructeur de cet élément, on crée des éléments <code>style</code> et <code>span</code> : l'élément <code>span</code> recevra le contenu de l'élément personnalisé et <code>style</code> recevra quelques règles CSS :</p>
+Pour le constructeur de cet élément, on crée des éléments `style` et `span` : l'élément `span` recevra le contenu de l'élément personnalisé et `style` recevra quelques règles CSS :
 
-<pre class="brush: js">let style = document.createElement('style');
+```js
+let style = document.createElement('style');
 let span = document.createElement('span');
 span.textContent = this.textContent;
 
@@ -48,37 +50,23 @@ style.textContent = 'span:hover { text-decoration: underline; }' +
                     ':host-context(h1):after { content: " - no links in headers!" }' +
                     ':host-context(article, aside) { color: gray; }' +
                     ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
-
-<p>La règle <code>:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }</code> permet de cibler l'ensemble des instances de <code>&lt;context-span&gt;</code> (qui est l'hôte ici) dans le document.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Scope', '#host-selector', ':host')}}</td>
-   <td>{{Spec2('CSS Scope')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.host")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
- <li>{{cssxref(":host()")}}</li>
- <li>{{cssxref(":host-context()")}}</li>
-</ul>
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+```
+
+La règle `:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` permet de cibler l'ensemble des instances de `<context-span>` (qui est l'hôte ici) dans le document.
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('CSS Scope', '#host-selector', ':host')}} | {{Spec2('CSS Scope')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.host")}}
+
+## Voir aussi
+
+- [Les composants web](/fr/docs/Web/Web_Components)
+- {{cssxref(":host()")}}
+- {{cssxref(":host-context()")}}
diff --git a/files/fr/web/css/_colon_hover/index.md b/files/fr/web/css/_colon_hover/index.md
index 3871067514..c1ee18e528 100644
--- a/files/fr/web/css/_colon_hover/index.md
+++ b/files/fr/web/css/_colon_hover/index.md
@@ -7,91 +7,66 @@ tags:
   - Reference
 translation_of: Web/CSS/:hover
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:hover</code></strong> permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:hover`** permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;a&gt; lorsque  */
+```css
+/* Cible n'importe quel élément <a> lorsque  */
 /* celui-ci est survolé */
 a:hover {
   background-color: gold;
-}</pre>
+}
+```
 
-<p>La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle <code>:hover</code> après les règles <code>:link</code> et <code>:visited</code> mais avant la règle <code>:active</code> (l'ordre est  <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code> – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent.</p>
+La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle `:hover` après les règles `:link` et `:visited` mais avant la règle `:active` (l'ordre est  `:link` — `:visited` — `:hover` — `:active` – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent.
 
-<p>La pseudo-classe <code>:hover</code> peut être appliquée à n'importe quel <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a>. {{experimental_inline}}</p>
+La pseudo-classe `:hover` peut être appliquée à n'importe quel [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements). {{experimental_inline}}
 
-<div class="note">
-  <p><strong>Note :</strong> sur les écrans tactiles, <code>:hover</code> est problématique voire impossible. La pseudo-classe <code>:hover</code> n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.</p>
-</div>
+> **Note :** sur les écrans tactiles, `:hover` est problématique voire impossible. La pseudo-classe `:hover` n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">a:hover {
+```css
+a:hover {
   background-color: gold;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;
-  &lt;a href="#"&gt;Ce lien sera écrit sur un fond doré lors du survol.&lt;/a&gt;
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> On peut utiliser la pseudo-classe <code>:checked</code> dans une galerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Commentaires</th>
-   <th scope="col">Retours</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}}</td>
-   <td> </td>
-   <td><a href="https://github.com/whatwg/html/issues"><em>Issues</em> GitHub du WHATWG HTML (en anglais)</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover')}}</td>
-   <td>Permet d'appliquer <code>:hover</code> à n'importe quel pseudo-élément.</td>
-   <td><a href="https://github.com/w3c/csswg-drafts/issues">Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}}</td>
-   <td> </td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}}</td>
-   <td>Définition initiale.</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.hover")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Bogue Chromium #370155 : Don't make :hover sticky on tap on sites that set a mobile viewport</a></li>
- <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Bogue Chromium #306581 : Immediately show hover and active states on touch when page isn't scrollable</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<p>
+  <a href="#">Ce lien sera écrit sur un fond doré lors du survol.</a>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+> **Note :** On peut utiliser la pseudo-classe `:checked` dans une galerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.
+
+## Spécifications
+
+| Spécification                                                                                                    | Commentaires                                                 | Retours                                                                                                               |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}}                     |                                                              | [_Issues_ GitHub du WHATWG HTML (en anglais)](https://github.com/whatwg/html/issues)                                  |
+| {{SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover')}}                                 | Permet d'appliquer `:hover` à n'importe quel pseudo-élément. | [Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)](https://github.com/w3c/csswg-drafts/issues) |
+| {{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}} |                                                              |                                                                                                                       |
+| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}}                 | Définition initiale.                                         |                                                                                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.hover")}}
+
+## Voir aussi
+
+- [Bogue Chromium #370155 : Don't make :hover sticky on tap on sites that set a mobile viewport](https://code.google.com/p/chromium/issues/detail?id=370155)
+- [Bogue Chromium #306581 : Immediately show hover and active states on touch when page isn't scrollable](https://code.google.com/p/chromium/issues/detail?id=306581)
diff --git a/files/fr/web/css/_colon_in-range/index.md b/files/fr/web/css/_colon_in-range/index.md
index b8c69639c9..0ac6b479b0 100644
--- a/files/fr/web/css/_colon_in-range/index.md
+++ b/files/fr/web/css/_colon_in-range/index.md
@@ -7,32 +7,33 @@ tags:
   - Reference
 translation_of: Web/CSS/:in-range
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:in-range</code></strong> cible un élément {{htmlelement("input")}} lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}}.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:in-range`** cible un élément {{htmlelement("input")}} lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}}.
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt;   */
+```css
+/* Cible n'importe quel élément <input>   */
 /* qui possède un intervalle et pour le-  */
 /* quel la valeur est dans cet intervalle */
 input:in-range {
   background-color: rgba(0, 255, 0, 0.25);
-}</pre>
+}
+```
 
-<p>Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.</p>
+Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme <em>dans l'intervalle</em> ou <em>en dehors de l'intervalle</em>.</p>
-</div>
+> **Note :** Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme _dans l'intervalle_ ou _en dehors de l'intervalle_.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">li {
+```css
+li {
   list-style: none;
   margin-bottom: 1em;
 }
@@ -51,54 +52,38 @@ input:in-range + label::after {
 }
 input:out-of-range + label::after {
   content:' non autorisée !';
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
-  &lt;ul&gt;Les valeurs entre 1 et 10 sont valides.
-    &lt;li&gt;
-      &lt;input id="valeur1" name="valeur1" type="number" placeholder="de 1 à 10" min="1" max="10" value="12"&gt;
-      &lt;label for="valeur1"&gt;Votre valeur est &lt;/label&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/form&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<div>{{EmbedLiveSample('Exemples',600,140)}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Etat</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition de la correspondance entre <code>:in-range</code> et les éléments HTML.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.in-range")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":out-of-range")}}</li>
- <li><a href="/fr/docs/Learn/Forms/Form_validation">Guide de validation pour les données de formulaire</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<form action="" id="form1">
+  <ul>Les valeurs entre 1 et 10 sont valides.
+    <li>
+      <input id="valeur1" name="valeur1" type="number" placeholder="de 1 à 10" min="1" max="10" value="12">
+      <label for="valeur1">Votre valeur est </label>
+    </li>
+  </ul>
+</form>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples',600,140)}}
+
+## Spécifications
+
+| Spécification                                                                                        | Etat                                 | Commentaires                                                            |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}} | {{Spec2('HTML WHATWG')}}     | Définition de la correspondance entre `:in-range` et les éléments HTML. |
+| {{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}                 | {{Spec2('CSS4 Selectors')}} | Définition initiale.                                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.in-range")}}
+
+## Voir aussi
+
+- {{cssxref(":out-of-range")}}
+- [Guide de validation pour les données de formulaire](/fr/docs/Learn/Forms/Form_validation)
diff --git a/files/fr/web/css/_colon_indeterminate/index.md b/files/fr/web/css/_colon_indeterminate/index.md
index a94a588e4b..59ad1c0db6 100644
--- a/files/fr/web/css/_colon_indeterminate/index.md
+++ b/files/fr/web/css/_colon_indeterminate/index.md
@@ -7,119 +7,100 @@ tags:
   - Reference
 translation_of: Web/CSS/:indeterminate
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:indeterminate</code></strong> permet de cibler un élément de formulaire dont l'état est indéterminé.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:indeterminate`** permet de cibler un élément de formulaire dont l'état est indéterminé.
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; */
+```css
+/* Cible n'importe quel élément <input> */
 /* dans un état indéterminé */
 input:indeterminate {
   background: lime;
-}</pre>
+}
+```
 
-<p>Cela inclut :</p>
+Cela inclut :
 
-<ul>
- <li>un élément <code><a href="/fr/docs/Web/HTML/Element/Input/checkbox">&lt;input type="checkbox"&gt;</a></code> dont la propriété du DOM <code>indeterminate</code> est fixée à <code>true</code> via du code JavaScript</li>
- <li>des éléments <code><a href="/fr/docs/Web/HTML/Element/Input/radio">&lt;input type="radio"&gt;</a></code> dont tous les boutons radio du groupe sont décochés</li>
- <li>des éléments {{HTMLElement("progress")}} dans un état indéterminé.</li>
-</ul>
+- un élément [`<input type="checkbox">`](/fr/docs/Web/HTML/Element/Input/checkbox) dont la propriété du DOM `indeterminate` est fixée à `true` via du code JavaScript
+- des éléments [`<input type="radio">`](/fr/docs/Web/HTML/Element/Input/radio) dont tous les boutons radio du groupe sont décochés
+- des éléments {{HTMLElement("progress")}} dans un état indéterminé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Case_à_cocher_et_bouton_radio">Case à cocher et bouton radio</h3>
+### Case à cocher et bouton radio
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">input, span {
+```css
+input, span {
   background: red;
 }
 
 :indeterminate, :indeterminate + label {
   background: lime;
 }
-</pre>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;input type="checkbox" id="checkbox"&gt;
-  &lt;label for="checkbox"&gt;L'arrière-plan devrait être vert.&lt;/label&gt;
-&lt;/div&gt;
-&lt;div&gt;
-  &lt;input type="radio" id="radio"&gt;
-  &lt;label for="radio"&gt;L'arrière-plan devrait être vert.&lt;/label&gt;
-&lt;/div&gt;</pre>
-
-<h4 id="JavaScript">JavaScript</h4>
-
-<pre class="brush: js">var inputs = document.getElementsByTagName("input");
-for(var i = 0; i &lt; inputs.length; i++) {
+```
+
+#### HTML
+
+```html
+<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">L'arrière-plan devrait être vert.</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">L'arrière-plan devrait être vert.</label>
+</div>
+```
+
+#### JavaScript
+
+```js
+var inputs = document.getElementsByTagName("input");
+for(var i = 0; i < inputs.length; i++) {
   inputs[i].indeterminate = true;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Case_à_cocher_et_bouton_radio', '100%', 50)}}</p>
+{{EmbedLiveSample('Case_à_cocher_et_bouton_radio', '100%', 50)}}
 
-<h3 id="Élément_progress">Élément <code>progress</code></h3>
+### Élément `progress`
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">progress:indeterminate {
+```css
+progress:indeterminate {
   opacity: 0.5;
   box-shadow: 0 0 2px 1px red;
 }
-</pre>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;progress/&gt;
-</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('Élément_progress', '100%', 30)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition de la sémantique relative à HTML et des contraintes de validation associées.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Définition de la pseudo-classe, sans notion de sémantique associée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.indeterminate")}}</p>
+```
+
+#### HTML
+
+```html
+<progress/>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Élément_progress', '100%', 30)}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires                                                                            |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | --------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}} | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                                                    |
+| {{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}     | {{Spec2('HTML5 W3C')}}         | Définition de la sémantique relative à HTML et des contraintes de validation associées. |
+| {{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}         | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                                                    |
+| {{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}         | {{Spec2('CSS3 Basic UI')}} | Définition de la pseudo-classe, sans notion de sémantique associée.                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.indeterminate")}}
diff --git a/files/fr/web/css/_colon_invalid/index.md b/files/fr/web/css/_colon_invalid/index.md
index 37ae6658b6..cbf2fb9c75 100644
--- a/files/fr/web/css/_colon_invalid/index.md
+++ b/files/fr/web/css/_colon_invalid/index.md
@@ -1,34 +1,37 @@
 ---
 title: ':invalid'
-slug: 'Web/CSS/:invalid'
+slug: Web/CSS/:invalid
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:invalid'
+translation_of: Web/CSS/:invalid
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:invalid</code></strong> cible tout élément {{HTMLElement("input")}} pour lequel <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">la validation</a> du contenu échoue par rapport au type de donnée attendu. Ceci permet de mettre en forme les champs non valides pour aider l'utilisateur à identifier et à corriger les erreurs.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:invalid`** cible tout élément {{HTMLElement("input")}} pour lequel [la validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation "en/HTML/HTML5/Constraint_validation") du contenu échoue par rapport au type de donnée attendu. Ceci permet de mettre en forme les champs non valides pour aider l'utilisateur à identifier et à corriger les erreurs.
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément input  */
+```css
+/* Cible n'importe quel élément input  */
 /* dont la valeur ne satisfait pas aux */
 /* critères de validation */
 input:invalid {
   background-color: pink;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple présente un formulaire simple dont les éléments sont verts lors qu'ils sont valides et rouges lorsqu'ils ne le sont pas.</p>
+Cet exemple présente un formulaire simple dont les éléments sont verts lors qu'ils sont valides et rouges lorsqu'ils ne le sont pas.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">label {
+```css
+label {
   display: block;
   margin: 1px;
   padding: 1px;
@@ -63,48 +66,49 @@ input:required {
 input:required:invalid {
   border-color: #c00000;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div class="field"&gt;
-    &lt;label for="url_input"&gt;Veuillez saisir une URL :&lt;/label&gt;
-    &lt;input type="url" id="url_input"&gt;
-  &lt;/div&gt;
+```html
+<form>
+  <div class="field">
+    <label for="url_input">Veuillez saisir une URL :</label>
+    <input type="url" id="url_input">
+  </div>
 
-  &lt;div class="field"&gt;
-    &lt;label for="email_input"&gt;Veuillez saisir une adresse électronique :&lt;/label&gt;
-    &lt;input type="email" id="email_input" required&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+  <div class="field">
+    <label for="email_input">Veuillez saisir une adresse électronique :</label>
+    <input type="email" id="email_input" required>
+  </div>
+</form>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemple','600',120)}}</p>
+{{EmbedLiveSample('Exemple','600',120)}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.</p>
+La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.
 
-<ul>
- <li><a href="/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">Explications des recommendations WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
-</ul>
+- [Explications des recommendations 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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<h3 id="Boutons_radio">Boutons radio</h3>
+### Boutons radio
 
-<p>Si un quelconque bouton radio dans un groupe (c'est-à-dire, avec la même valeur pour leur attribut <code>name</code>) possède l'attribut <code>required</code> , la pseudo-classe <code>:invalid</code> est appliquée à tous les boutons si aucun d'entre eux n'est sélectionné.</p>
+Si un quelconque bouton radio dans un groupe (c'est-à-dire, avec la même valeur pour leur attribut `name`) possède l'attribut `required` , la pseudo-classe `:invalid` est appliquée à tous les boutons si aucun d'entre eux n'est sélectionné.
 
-<h3 id="Gestion_dans_Gecko">Gestion dans Gecko</h3>
+### Gestion dans Gecko
 
-<p>Par défaut, Gecko n'applique pas de style particulier à la pseudo-classe <code>:invalid</code> . Toutefois un style différent est appliqué (un halo rouge utilisant la propriété {{cssxref("box-shadow")}}) via la pseudo-classe {{cssxref(":-moz-ui-invalid")}}, qui s'applique dans un sous-ensemble des cas de <code>:invalid</code>.</p>
+Par défaut, Gecko n'applique pas de style particulier à la pseudo-classe `:invalid` . Toutefois un style différent est appliqué (un halo rouge utilisant la propriété {{cssxref("box-shadow")}}) via la pseudo-classe {{cssxref(":-moz-ui-invalid")}}, qui s'applique dans un sous-ensemble des cas de `:invalid`.
 
-<p>Ce halo peut être désactivé avec les règles suivantes :</p>
+Ce halo peut être désactivé avec les règles suivantes :
 
-<pre class="brush: css">:invalid {
+```css
+:invalid {
   box-shadow: none;
 }
 
@@ -114,48 +118,26 @@ input:required:invalid {
 
 :-moz-ui-invalid {
   box-shadow: none;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.invalid")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":valid")}}</li>
- <li>{{cssxref(":-moz-submit-invalid")}} et {{cssxref(":-moz-ui-invalid")}}</li>
- <li>{{cssxref(":required")}}</li>
- <li>{{cssxref(":optional")}}</li>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données d'un formulaire</a></li>
- <li><a href="/fr/docs/Web/API/ValidityState">Accéder à l'état de validité en JavaScript</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                                 | Commentaire                                                                   |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}     | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                                          |
+| {{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}         | {{Spec2('HTML5 W3C')}}         | Définition de la sémantique relative à HTML et aux contraintes de validation. |
+| {{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}} | {{Spec2('CSS4 Selectors')}} | Définition initiale.                                                          |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.invalid")}}
+
+## Voir aussi
+
+- {{cssxref(":valid")}}
+- {{cssxref(":-moz-submit-invalid")}} et {{cssxref(":-moz-ui-invalid")}}
+- {{cssxref(":required")}}
+- {{cssxref(":optional")}}
+- [La validation des données d'un formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire)
+- [Accéder à l'état de validité en JavaScript](/fr/docs/Web/API/ValidityState)
diff --git a/files/fr/web/css/_colon_is/index.md b/files/fr/web/css/_colon_is/index.md
index 3268425e30..caaa2a95b3 100644
--- a/files/fr/web/css/_colon_is/index.md
+++ b/files/fr/web/css/_colon_is/index.md
@@ -9,17 +9,16 @@ tags:
   - Web
 translation_of: Web/CSS/:is
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:is()</code></strong> prend comme argument une liste de sélecteurs, et cible tous les éléments sélectionnés par chaque sélecteur de cette liste. Cela permet d'écrire des sélecteurs expansifs de façon plus concise.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:is()`** prend comme argument une liste de sélecteurs, et cible tous les éléments sélectionnés par chaque sélecteur de cette liste. Cela permet d'écrire des sélecteurs expansifs de façon plus concise.
 
-<p>La plupart des navigateurs prennent encore en charge cette fonctionnalité via <code>:matches()</code>, ou via la pseudo-classe préfixée — <code>:any()</code> (anciennes versions de Chrome, Firefox et Safari). <code>:any()</code> fonctionne exactement comme <code>:matches()</code> et <code>:is()</code> mais nécessite l'utilisation de préfixes et ne prend pas en charge <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">les sélecteurs complexes</a>.</p>
+La plupart des navigateurs prennent encore en charge cette fonctionnalité via `:matches()`, ou via la pseudo-classe préfixée — `:any()` (anciennes versions de Chrome, Firefox et Safari). `:any()` fonctionne exactement comme `:matches()` et `:is()` mais nécessite l'utilisation de préfixes et ne prend pas en charge [les sélecteurs complexes](/en-US/docs/Learn/CSS/Building_blocks/Selectors).
 
-<div class="note">
-<p><strong>Note :</strong> <code>:matches()</code> a été renommé en <code>is()</code> d'après <a href="https://github.com/w3c/csswg-drafts/issues/3258">l'<em>issue</em> 3258 du CSSWG</a>.</p>
-</div>
+> **Note :** `:matches()` a été renommé en `is()` d'après [l'_issue_ 3258 du CSSWG](https://github.com/w3c/csswg-drafts/issues/3258).
 
-<pre class="brush: css no-line-numbers">/* Sélectionne n'importe quel paragraphe survolé
+```css
+/* Sélectionne n'importe quel paragraphe survolé
    qui se trouve au sein d'un header, main, ou
    footer */
 :is(header, main, footer) p:hover {
@@ -49,36 +48,39 @@ footer p:hover {
   color: red;
   cursor: pointer;
 }
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_fonctionnant_pour_les_différents_navigateurs">Exemple fonctionnant pour les différents navigateurs</h3>
+### Exemple fonctionnant pour les différents navigateurs
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;header&gt;
-  &lt;p&gt;Voici un paragraphe dans un en-tête.&lt;/p&gt;
-&lt;/header&gt;
+```html
+<header>
+  <p>Voici un paragraphe dans un en-tête.</p>
+</header>
 
-&lt;main&gt;
-  &lt;ul&gt;
-    &lt;li&gt;&lt;p&gt;Mon premier élément de&lt;/p&gt;&lt;p&gt;liste&lt;/p&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;p&gt;Mon deuxième élément de&lt;/p&gt;&lt;p&gt;liste&lt;/p&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/main&gt;
+<main>
+  <ul>
+    <li><p>Mon premier élément de</p><p>liste</p></li>
+    <li><p>Mon deuxième élément de</p><p>liste</p></li>
+  </ul>
+</main>
 
-&lt;footer&gt;
-  &lt;p&gt;Et un paragraphe de pied de page&lt;/p&gt;
-&lt;/footer&gt;</pre>
+<footer>
+  <p>Et un paragraphe de pied de page</p>
+</footer>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">:-webkit-any(header, main, footer) p:hover {
+```css
+:-webkit-any(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
 }
@@ -90,11 +92,13 @@ footer p:hover {
 :is(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
-}</pre>
+}
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">let matchedItems;
+```js
+let matchedItems;
 
 try {
   matchedItems = document.querySelectorAll(':is(header, main, footer) p');
@@ -114,7 +118,7 @@ try {
   }
 }
 
-for(let i = 0; i &lt; matchedItems.length; i++) {
+for(let i = 0; i < matchedItems.length; i++) {
   applyHandler(matchedItems[i]);
 }
 
@@ -122,15 +126,17 @@ function applyHandler(elem) {
   elem.addEventListener('click', function(e) {
     alert('Ce paragraphe est à l\'intérieur d\'un élément ' + e.target.parentNode.nodeName);
   });
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample('Exemple_fonctionnant_pour_les_différents_navigateurs', '100%', '300')}}</p>
+{{EmbedLiveSample('Exemple_fonctionnant_pour_les_différents_navigateurs', '100%', '300')}}
 
-<h3 id="Simplifier_les_listes_de_sélecteurs">Simplifier les listes de sélecteurs</h3>
+### Simplifier les listes de sélecteurs
 
-<p>La pseudo-classe <code>:matches()</code> permet de simplifier largement les sélecteurs CSS. Ainsi, la règle suivante :</p>
+La pseudo-classe `:matches()` permet de simplifier largement les sélecteurs CSS. Ainsi, la règle suivante :
 
-<pre class="brush: css">/* les listes non ordonnées sur 3 niveaux ou plus */
+```css
+/* les listes non ordonnées sur 3 niveaux ou plus */
 /* utilisent un carré comme puce */
 ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
 ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
@@ -146,31 +152,36 @@ dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
 dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
   list-style-type: square;
 }
-</pre>
+```
 
-<p>pourra être remplacée par :</p>
+pourra être remplacée par :
 
-<pre class="brush: css">/* les listes non ordonnées sur 3 niveaux ou plus */
+```css
+/* les listes non ordonnées sur 3 niveaux ou plus */
 /* utilisent un carré comme puce */
 :matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
 :matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
 :matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
   list-style-type: square;
-}</pre>
+}
+```
 
-<p>En revanche, le modèle d'usage suivant n'est pas recommandée (cf. <a href="#issues_with_performance_and_specificity">la section qui suit sur les performances</a>) :</p>
+En revanche, le modèle d'usage suivant n'est pas recommandée (cf. [la section qui suit sur les performances](#issues_with_performance_and_specificity)) :
 
-<pre class="brush: css">:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
+```css
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
   list-style-type: square;
-}</pre>
+}
+```
 
-<h3 id="Notes">Simplifier les sélecteurs de section</h3>
+### Simplifier les sélecteurs de section
 
-<p>La pseudo-classe <code>:matches</code> est particulièrement utile lorsqu'on manipule les <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections et en-têtes</a> HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans <code>:matches()</code>) s'avèrerait plutôt compliqué.</p>
+La pseudo-classe `:matches` est particulièrement utile lorsqu'on manipule les [sections et en-têtes](/en-US/docs/Sections_and_Outlines_of_an_HTML5_document "Sections and Outlines of an HTML5 document") HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans `:matches()`) s'avèrerait plutôt compliqué.
 
-<p>Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser <code>:matches()</code>, on obtient ces règles plutôt compliquées :</p>
+Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser `:matches()`, on obtient ces règles plutôt compliquées :
 
-<pre class="brush: css">/* Niveau 0 */
+```css
+/* Niveau 0 */
 h1 {
   font-size: 30px;
 }
@@ -187,11 +198,12 @@ nav section h1, nav article h1, nav aside h1, nav nav h1 {
 }
 /* Niveau 3 */
 /* … j'ai abandonné */
-</pre>
+```
 
-<p>Avec <code>:is()</code>, c'est plus simple :</p>
+Avec `:is()`, c'est plus simple :
 
-<pre class="brush: css">/* Niveau 0 */
+```css
+/* Niveau 0 */
 h1 {
   font-size: 30px;
 }
@@ -209,73 +221,66 @@ h1 {
 :is(section, article, aside, nav)
 :is(section, article, aside, nav) h1 {
   font-size: 15px;
-}</pre>
+}
+```
 
-<h3 id="Éviter_linvalidation_dune_liste_de_sélecteur">Éviter l'invalidation d'une liste de sélecteur</h3>
+### Éviter l'invalidation d'une liste de sélecteur
 
-<p>À la différence des listes de sélecteurs, la pseudo-classe <code>:is()</code> ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur.</p>
+À la différence des listes de sélecteurs, la pseudo-classe `:is()` ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur.
 
-<pre class="brush: css">:is(:valid, :incompatible) {
+```css
+:is(:valid, :incompatible) {
   ...
 }
-</pre>
+```
 
-<p>Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler <code>:valid</code> même si les navigateurs ne prennent pas en charge le sélecteur <code>:incompatible</code>. En revanche :</p>
+Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler `:valid` même si les navigateurs ne prennent pas en charge le sélecteur `:incompatible`. En revanche :
 
-<pre class="brush: css">:valid, :incompatible {
+```css
+:valid, :incompatible {
   ...
-}</pre>
+}
+```
 
-<p>L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge <code>:incompatible</code>, même si <code>:valid</code> est bien pris en charge.</p>
+L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge `:incompatible`, même si `:valid` est bien pris en charge.
 
-<h2 id="Notes_2">Notes</h2>
+## Notes
 
-<h3 id="Issues_with_performance_and_specificity">Problèmes de performances avec <code>any():</code> et la spécificité</h3>
+### Problèmes de performances avec `any():` et la spécificité
 
-<p>{{Bug(561154)}} suit un problème de spécificité relatif à <code>:-moz-any()</code>. L'implémentation  place <code>:-moz-any()</code> dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur.</p>
+{{Bug(561154)}} suit un problème de spécificité relatif à `:-moz-any()`. L'implémentation  place `:-moz-any()` dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur.
 
-<p>Ainsi :</p>
+Ainsi :
 
-<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
-</pre>
+```css
+.a > :-moz-any(.b, .c)
+```
 
-<p>sera plus lent que</p>
+sera plus lent que
 
-<pre class="brush: css">.a &gt; .b, .a &gt; .c
-</pre>
+```css
+.a > .b, .a > .c
+```
 
-<p>et cette dernière version sera plus rapide :</p>
+et cette dernière version sera plus rapide :
 
-<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c</pre>
+```css
+:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+```
 
-<p><code>:is()</code> doit permettre de corriger de tels problèmes.</p>
+`:is()` doit permettre de corriger de tels problèmes.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#matches-pseudo", ":is()")}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Selectors", "#matches-pseudo", ":is()")}} | {{Spec2('CSS4 Selectors')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.is")}}</p>
+{{Compat("css.selectors.is")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme <code>is()</code>, avec une spécificité nulle</li>
- <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
-</ul>
+- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme `is()`, avec une spécificité nulle
+- [Les composants web](/fr/docs/Web/Web_Components)
diff --git a/files/fr/web/css/_colon_lang/index.md b/files/fr/web/css/_colon_lang/index.md
index b564018c4e..ca2ccc2a82 100644
--- a/files/fr/web/css/_colon_lang/index.md
+++ b/files/fr/web/css/_colon_lang/index.md
@@ -1,131 +1,108 @@
 ---
 title: ':lang'
-slug: 'Web/CSS/:lang'
+slug: Web/CSS/:lang
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:lang'
+translation_of: Web/CSS/:lang
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <code><strong>:lang</strong></code> permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:lang`** permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.
 
-<pre class="brush: css no-line-numbers">/* Correspond aux paragraphes, uniquement si ceux-ci */
+```css
+/* Correspond aux paragraphes, uniquement si ceux-ci */
 /* sont indiqués comme étant en anglais (en) */
 p:lang(en) {
   quotes: '\201C' '\201D' '\2018' '\2019';
-}</pre>
-
-<div class="note">
-<p><strong>Note :</strong> En HTML, la langue d'un élément est déterminée par l'attribut {{htmlattrxref("lang")}}, l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.</p>
+}
+```
 
-<p>Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.</p>
-</div>
+> **Note :** En HTML, la langue d'un élément est déterminée par l'attribut {{htmlattrxref("lang")}}, l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.
+>
+> Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h3 id="Paramètre">Paramètre</h3>
+### Paramètre
 
-<dl>
- <dt><code>language-code</code></dt>
- <dd>La chaîne de caractères ({{cssxref("&lt;string&gt;")}}) qui définit la langue des éléments qu'on veut sélectionner.</dd>
-</dl>
+- `language-code`
+  - : La chaîne de caractères ({{cssxref("&lt;string&gt;")}}) qui définit la langue des éléments qu'on veut sélectionner.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, la pseudo-classe <code>:lang</code> est utilisée pour faire correspondre le parent d'une citation en utilisant {{cssxref(":first-child")}}. Il ne s'agit pas de la seule solution pour ce type de problème, ni même de la meilleure (qui dépendra du type de document). Les valeurs Unicode sont utilisées pour certains caractères spéciaux de citation.</p>
+Dans cet exemple, la pseudo-classe `:lang` est utilisée pour faire correspondre le parent d'une citation en utilisant {{cssxref(":first-child")}}. Il ne s'agit pas de la seule solution pour ce type de problème, ni même de la meilleure (qui dépendra du type de document). Les valeurs Unicode sont utilisées pour certains caractères spéciaux de citation.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">:lang(fr) &gt; Q {
+```css
+:lang(fr) > Q {
   quotes: '« ' ' »';
 }
 
-:lang(de) &gt; Q {
+:lang(de) > Q {
   quotes: '»' '«' '\2039' '\203A';
 }
 
-:lang(en) &gt; Q {
+:lang(en) > Q {
   quotes: '\201C' '\201D' '\2018' '\2019';
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div lang="fr"&gt;
-  &lt;q&gt;
+```html
+<div lang="fr">
+  <q>
     Cette citation française a
-      &lt;q&gt;une citation&lt;/q&gt;
+      <q>une citation</q>
     imbriquée.
-  &lt;/q&gt;
-&lt;/div&gt;
+  </q>
+</div>
 
-&lt;div lang="de"&gt;
-  &lt;q&gt;
+<div lang="de">
+  <q>
     Cette citation allemande a
-      &lt;q&gt;une citation&lt;/q&gt;
+      <q>une citation</q>
     imbriquée.
-  &lt;/q&gt;
-&lt;/div&gt;
+  </q>
+</div>
 
-&lt;div lang="en"&gt;
-  &lt;q&gt;
+<div lang="en">
+  <q>
     Cette citation anglaise a
-      &lt;q&gt;une citation&lt;/q&gt;
+      <q>une citation</q>
     imbriquée.
-  &lt;/q&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemple', '350')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Ajout du <em>joker</em> pour correspondre à toutes les langues. Ajout des listes de langues séparées par des virgules.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.lang")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":dir")}}</li>
- <li>L'attribut HTML {{htmlattrxref("lang")}}</li>
- <li><a href="/fr/docs/Web/API/HTMLElement/lang">Propriété <code>lang</code> du DOM</a></li>
- <li><a href="https://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.1">Les codes de langues selon W3C HTML4 (en anglais)</a></li>
- <li><a href="https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">L'attribut <code>lang</code> selon W3C DOM Level 2 HTML (en anglais)</a></li>
- <li><a href="https://tools.ietf.org/html/bcp47">Les codes de langues BCP 47</a></li>
-</ul>
+  </q>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemple', '350')}}
+
+## Spécifications
+
+| Spécification                                                                | État                                 | Commentaires                                                                                                    |
+| ---------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}} | {{Spec2('CSS4 Selectors')}} | Ajout du _joker_ pour correspondre à toutes les langues. Ajout des listes de langues séparées par des virgules. |
+| {{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification significative.                                                                              |
+| {{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}     | {{Spec2('CSS2.1')}}             | Définition initiale.                                                                                            |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.lang")}}
+
+## Voir aussi
+
+- {{cssxref(":dir")}}
+- L'attribut HTML {{htmlattrxref("lang")}}
+- [Propriété `lang` du DOM](/fr/docs/Web/API/HTMLElement/lang)
+- [Les codes de langues selon W3C HTML4 (en anglais)](https://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.1)
+- [L'attribut `lang` selon W3C DOM Level 2 HTML (en anglais)](https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807)
+- [Les codes de langues BCP 47](https://tools.ietf.org/html/bcp47)
diff --git a/files/fr/web/css/_colon_last-child/index.md b/files/fr/web/css/_colon_last-child/index.md
index 26b3e6dc6d..97f45b245c 100644
--- a/files/fr/web/css/_colon_last-child/index.md
+++ b/files/fr/web/css/_colon_last-child/index.md
@@ -1,85 +1,68 @@
 ---
 title: ':last-child'
-slug: 'Web/CSS/:last-child'
+slug: Web/CSS/:last-child
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:last-child'
+translation_of: Web/CSS/:last-child
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:last-child</code></strong> permet de cibler un élément qui est le dernier enfant de son parent.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:last-child`** permet de cibler un élément qui est le dernier enfant de son parent.
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;li&gt; tant que    */
+```css
+/* Cible n'importe quel élément <li> tant que    */
 /* celui-ci est le dernier enfant de son élément */
 /* parent */
 li:last-child {
   background-color: lime;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> En CSS3, l'élément ciblé devait avoir un élément parent, cette restriction a été levée en CSS4.</p>
-</div>
+> **Note :** En CSS3, l'élément ciblé devait avoir un élément parent, cette restriction a été levée en CSS4.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">li:last-child {
+```css
+li:last-child {
   background-color: lime;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul&gt;
-   &lt;li&gt;Cet élément n'est pas vert !&lt;/li&gt;
-   &lt;li&gt;Celui-ci est vert.&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '100%', 100)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Il n'est plus obligatoire que l'élément ciblé ait un parent.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.last-child")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+```
+
+### HTML
 
+```html
 <ul>
- <li>{{cssxref(":first-child")}}</li>
- <li>{{cssxref(":nth-child")}}</li>
- <li>{{cssxref(":last-of-type")}}</li>
- <li>{{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}}</li>
+   <li>Cet élément n'est pas vert !</li>
+   <li>Celui-ci est vert.</li>
 </ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '100%', 100)}}
+
+## Spécifications
+
+| Spécification                                                                    | État                                 | Commentaires                                                 |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------ |
+| {{SpecName('CSS4 Selectors', '#last-child', ':last-child')}} | {{Spec2('CSS4 Selectors')}} | Il n'est plus obligatoire que l'élément ciblé ait un parent. |
+| {{SpecName('CSS3 Selectors', '#last-child', ':last-child')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.last-child")}}
+
+## Voir aussi
+
+- {{cssxref(":first-child")}}
+- {{cssxref(":nth-child")}}
+- {{cssxref(":last-of-type")}}
+- {{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}}
diff --git a/files/fr/web/css/_colon_last-of-type/index.md b/files/fr/web/css/_colon_last-of-type/index.md
index 8feeeed2f2..6b757122d9 100644
--- a/files/fr/web/css/_colon_last-of-type/index.md
+++ b/files/fr/web/css/_colon_last-of-type/index.md
@@ -1,100 +1,84 @@
 ---
 title: ':last-of-type'
-slug: 'Web/CSS/:last-of-type'
+slug: Web/CSS/:last-of-type
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:last-of-type'
+translation_of: Web/CSS/:last-of-type
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:last-of-type</code></strong> cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:last-of-type`** cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel paragraphe qui est     */
+```css
+/* Cible n'importe quel paragraphe qui est     */
 /* le dernier paragraphe de son élément parent */
 p:last-of-type {
   color: lime;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).</p>
-</div>
+> **Note :** Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Pour cibler le dernier élément {{HTMLElement("em")}} au sein d'un élément {{HTMLElement("p")}}, on pourra utiliser la règle qui suit (illustrée ensuite sur un fragment HTML).</p>
+Pour cibler le dernier élément {{HTMLElement("em")}} au sein d'un élément {{HTMLElement("p")}}, on pourra utiliser la règle qui suit (illustrée ensuite sur un fragment HTML).
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p em:last-of-type {
+```css
+p em:last-of-type {
   color: lime;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;
-  &lt;em&gt;Je ne suis pas vert :(&lt;/em&gt;
-  &lt;strong&gt;Je ne suis pas vert :(&lt;/strong&gt;
-  &lt;em&gt;Je suis vert :D&lt;/em&gt;
-  &lt;strong&gt;Je ne suis pas vert non plus :(&lt;/strong&gt;
-&lt;/p&gt;
-
-&lt;p&gt;
-  &lt;em&gt;Je ne suis pas vert :(&lt;/em&gt;
-  &lt;span&gt;
-    &lt;em&gt;Je suis vert !&lt;/em&gt;
-  &lt;/span&gt;
-  &lt;strong&gt;Je ne suis pas vert :(&lt;/strong&gt;
-  &lt;em&gt;Je suis vert :D&lt;/em&gt;
-  &lt;span&gt;
-    &lt;em&gt;Je suis aussi vert !&lt;/em&gt;
-    &lt;strike&gt;Je ne suis pas vert&lt;/strike&gt;
-  &lt;/span&gt;
-  &lt;strong&gt;Je ne suis pas vert non plus :(&lt;/strong&gt;
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<div>{{EmbedLiveSample('Exemples','100%', '120')}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.last-of-type")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":nth-last-of-type")}}</li>
- <li>{{cssxref(":first-of-type")}}</li>
- <li>{{cssxref(":last-child")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<p>
+  <em>Je ne suis pas vert :(</em>
+  <strong>Je ne suis pas vert :(</strong>
+  <em>Je suis vert :D</em>
+  <strong>Je ne suis pas vert non plus :(</strong>
+</p>
+
+<p>
+  <em>Je ne suis pas vert :(</em>
+  <span>
+    <em>Je suis vert !</em>
+  </span>
+  <strong>Je ne suis pas vert :(</strong>
+  <em>Je suis vert :D</em>
+  <span>
+    <em>Je suis aussi vert !</em>
+    <strike>Je ne suis pas vert</strike>
+  </span>
+  <strong>Je ne suis pas vert non plus :(</strong>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples','100%', '120')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires                                                        |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}} | {{Spec2('CSS4 Selectors')}} | L'élément ciblé ne doit pas nécessairement avoir un élément parent. |
+| {{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                                |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.last-of-type")}}
+
+## Voir aussi
+
+- {{cssxref(":nth-last-of-type")}}
+- {{cssxref(":first-of-type")}}
+- {{cssxref(":last-child")}}
diff --git a/files/fr/web/css/_colon_left/index.md b/files/fr/web/css/_colon_left/index.md
index 545f6f24f1..4539daecd4 100644
--- a/files/fr/web/css/_colon_left/index.md
+++ b/files/fr/web/css/_colon_left/index.md
@@ -1,72 +1,54 @@
 ---
 title: ':left'
-slug: 'Web/CSS/:left'
+slug: Web/CSS/:left
 tags:
   - CSS
   - Pseudo-classe
   - Reference
   - Web
-translation_of: 'Web/CSS/:left'
+translation_of: Web/CSS/:left
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <code><strong>:left</strong></code>, liée à la règle {{cssxref("@page")}}, permet de cibler les pages de gauche lors d'une impression. Ceci permet de mettre en forme spécifiquement les pages de gauche.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:left`**, liée à la règle {{cssxref("@page")}}, permet de cibler les pages de gauche lors d'une impression. Ceci permet de mettre en forme spécifiquement les pages de gauche.
 
-<pre class="brush: css no-line-numbers">/* Sélectionne le contenu des pages gauches */
+```css
+/* Sélectionne le contenu des pages gauches */
 /* lors de l'impression */
 @page :left {
   margin: 2in 3in;
-}</pre>
+}
+```
 
-<p>La position de la page soit à gauche ou à droite dépend de la direction d'écriture globale du document. Par exemple, si la première page est selon la direction « gauche à droite » alors elle sera une page {{cssxref(":right")}}, si elle est définie de « droite à gauche » ce sera une page <code>:left</code>.</p>
+La position de la page soit à gauche ou à droite dépend de la direction d'écriture globale du document. Par exemple, si la première page est selon la direction « gauche à droite » alors elle sera une page {{cssxref(":right")}}, si elle est définie de « droite à gauche » ce sera une page `:left`.
 
-<div class="note">
-  <p><strong>Note :</strong> Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de <strong>la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.</p>
-</div>
+> **Note :** Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de **la boîte correspondant à la page** peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@page :left {
+```css
+@page :left {
   margin: 2cm 3cm;
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':left')}}</td>
-   <td>{{Spec2('CSS3 Paged Media')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':left')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Paged Media', '#left-right-first', ':left')}} | {{Spec2('CSS3 Paged Media')}} | Aucune modification. |
+| {{SpecName('CSS2.1', 'page.html#page-selectors', ':left')}}     | {{Spec2('CSS2.1')}}                 | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.left")}}</p>
+{{Compat("css.selectors.left")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("@page")}}</li>
- <li>{{cssxref(":first")}}</li>
- <li>{{cssxref(":right")}}</li>
-</ul>
+- {{cssxref("@page")}}
+- {{cssxref(":first")}}
+- {{cssxref(":right")}}
diff --git a/files/fr/web/css/_colon_link/index.md b/files/fr/web/css/_colon_link/index.md
index a429ffe7e9..cda59d44d3 100644
--- a/files/fr/web/css/_colon_link/index.md
+++ b/files/fr/web/css/_colon_link/index.md
@@ -1,110 +1,82 @@
 ---
 title: ':link'
-slug: 'Web/CSS/:link'
+slug: Web/CSS/:link
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:link'
+translation_of: Web/CSS/:link
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:link</code></strong> permet de sélectionner les liens à l'intérieur d'éléments. Elle sélectionnera tout lien n'ayant pas été visité, même ceux qui seraient déjà mis en forme via des sélecteurs utilisant d'autres pseudo-classes comme {{cssxref(":hover")}}, {{cssxref(":active")}} ou {{cssxref(":visited")}}.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:link`** permet de sélectionner les liens à l'intérieur d'éléments. Elle sélectionnera tout lien n'ayant pas été visité, même ceux qui seraient déjà mis en forme via des sélecteurs utilisant d'autres pseudo-classes comme {{cssxref(":hover")}}, {{cssxref(":active")}} ou {{cssxref(":visited")}}.
 
-<pre class="brush: css no-line-numbers">/* Cible les liens qui n'ont pas encore */
+```css
+/* Cible les liens qui n'ont pas encore */
 /* été visités */
 a:link {
   color: red;
-}</pre>
+}
+```
 
-<p>Afin que la mise en forme s'applique au mieux, la règle <code>:link</code> doit être placée avant les autres : <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. La pseudo-classe {{cssxref(":focus")}} est habituellement placée juste avant ou juste après <code>:hover</code>, en fonction de l'effet désiré.</p>
+Afin que la mise en forme s'applique au mieux, la règle `:link` doit être placée avant les autres : `:link` — `:visited` — `:hover` — `:active`. La pseudo-classe {{cssxref(":focus")}} est habituellement placée juste avant ou juste après `:hover`, en fonction de l'effet désiré.
 
-<div class="note">
-<p><strong>Note :</strong> On utilisera {{cssxref("any-link")}} pour sélectionner un élément qu'il ait été visité ou non.</p>
-</div>
+> **Note :** On utilisera {{cssxref("any-link")}} pour sélectionner un élément qu'il ait été visité ou non.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">a:link {
+```css
+a:link {
   color: red;
 }
 
 .external:link {
   background-color: lightblue;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Et si on allait voir
-  &lt;a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/"&gt;
+```html
+<p>Et si on allait voir
+  <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/">
   un peu de JavaScript ?
-  &lt;/a&gt;
-&lt;/p&gt;
-&lt;p&gt;Sinon, on peut continuer à se cultiver sur CSS autre part
-  &lt;a class="external" href="https://css-tricks.com/"&gt;
+  </a>
+</p>
+<p>Sinon, on peut continuer à se cultiver sur CSS autre part
+  <a class="external" href="https://css-tricks.com/">
   comme CSS Tricks.
-  &lt;/a&gt;
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#link', ':link')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#link', ':link')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Levée de la restriction limitant l'utilisation de cette pseudo-classe à l'élément {{HTMLElement("a")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':link')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.link")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":link")}}</li>
- <li>{{cssxref(":visited")}}</li>
- <li>{{cssxref(":hover")}}</li>
- <li>{{cssxref(":active")}}.</li>
-</ul>
+  </a>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","200")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires                                                                                                    |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}} | {{Spec2('HTML WHATWG')}}     |                                                                                                                 |
+| {{SpecName('CSS4 Selectors', '#link', ':link')}}                             | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                                                                            |
+| {{SpecName('CSS3 Selectors', '#link', ':link')}}                             | {{Spec2('CSS3 Selectors')}} | Aucune modification.                                                                                            |
+| {{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link')}} | {{Spec2('CSS2.1')}}             | Levée de la restriction limitant l'utilisation de cette pseudo-classe à l'élément {{HTMLElement("a")}}. |
+| {{SpecName('CSS1', '#anchor-pseudo-classes', ':link')}}                     | {{Spec2('CSS1')}}             | Définition initiale.                                                                                            |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.link")}}
+
+## Voir aussi
+
+- {{cssxref(":link")}}
+- {{cssxref(":visited")}}
+- {{cssxref(":hover")}}
+- {{cssxref(":active")}}.
diff --git a/files/fr/web/css/_colon_local-link/index.md b/files/fr/web/css/_colon_local-link/index.md
index 9f86e4fbd7..1f845e8a46 100644
--- a/files/fr/web/css/_colon_local-link/index.md
+++ b/files/fr/web/css/_colon_local-link/index.md
@@ -1,52 +1,51 @@
 ---
 title: ':local-link'
-slug: 'Web/CSS/:local-link'
-browser-compat: css.selectors.local-link
+slug: Web/CSS/:local-link
 translation_of: Web/CSS/:local-link
+browser-compat: css.selectors.local-link
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>:local-link</code></strong> représente un lien vers le même document. Il s'agit donc d'un élément qui est l'ancre source d'un lien hypertexte dont la cible est une URL absolue correspondant à l'URL du document contenant l'élément.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:local-link`** représente un lien vers le même document. Il s'agit donc d'un élément qui est l'ancre source d'un lien hypertexte dont la cible est une URL absolue correspondant à l'URL du document contenant l'élément.
 
-<pre>/* Sélectionne n'importe quel &lt;a&gt; ciblant le document courant */
-a:local-link {
-  color: green;
-}
-</pre>
+    /* Sélectionne n'importe quel <a> ciblant le document courant */
+    a:local-link {
+      color: green;
+    }
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;a href="#target"&gt;Voici un lien vers la page courante.&lt;/a&gt;&lt;br&gt;
-&lt;a href="https://example.com"&gt;Voici un lien externe&lt;/a&gt;&lt;br&gt;
-</pre>
+```html
+<a href="#target">Voici un lien vers la page courante.</a><br>
+<a href="https://example.com">Voici un lien externe</a><br>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">a:local-link {
+```css
+a:local-link {
   color: green;
 }
-</pre>
+```
 
-<h3 id="Result">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Examples")}}</p>
+{{EmbedLiveSample("Examples")}}
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Pseudo-classes relatives aux liens : {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}</li>
-</ul>
+- Pseudo-classes relatives aux liens : {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}
diff --git a/files/fr/web/css/_colon_not/index.md b/files/fr/web/css/_colon_not/index.md
index 8cf347c1fc..9aac424c0a 100644
--- a/files/fr/web/css/_colon_not/index.md
+++ b/files/fr/web/css/_colon_not/index.md
@@ -7,44 +7,41 @@ tags:
   - Reference
 translation_of: Web/CSS/:not
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> de négation, <strong><code>:not()</code></strong>, est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) de négation, **`:not()`**, est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.
 
-<pre class="brush: css no-line-numbers">/* Sélectionne n'importe quel élément qui n'est */
+```css
+/* Sélectionne n'importe quel élément qui n'est */
 /* pas un paragraphe */
 :not(p) {
   color: blue;
-}</pre>
-
-<p>La <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">spécificité</a> de la pseudo-classe <code>:not</code> est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.</p>
-
-<div class="note">
-<p><strong>Note :</strong>
-<ul>
- <li>Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, <code>:not(*) </code>va exclure tous les éléments et ne sera jamais appliqué.</li>
- <li>À l'inverse, il est possible d'augmenter la <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">spécificitié</a> d'un sélecteur. Ainsi. <code>toto:not(truc)</code> ciblera les mêmes éléments que <code>toto</code>, mais avec une spécificité plus forte.</li>
- <li><code>:not(toto){}</code> ciblera tout élément qui n'est pas <code>toto</code>, <strong>notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}</strong>.</li>
- <li>Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, <code>body :not(table) a</code> s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie <code>:not()</code> du sélecteur.</li>
-</ul>
-</p>
-</div>
+}
+```
+
+La [spécificité](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) de la pseudo-classe `:not` est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.
+
+> **Note :**
+>
+> - Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, `:not(*) `va exclure tous les éléments et ne sera jamais appliqué.
+> - À l'inverse, il est possible d'augmenter la [spécificitié](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) d'un sélecteur. Ainsi. `toto:not(truc)` ciblera les mêmes éléments que `toto`, mais avec une spécificité plus forte.
+> - `:not(toto){}` ciblera tout élément qui n'est pas `toto`, **notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}**.
+> - Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, `body :not(table) a` s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie `:not()` du sélecteur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La pseudo-classe <code>:not()</code> prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou <a href="/fr/docs/Web/CSS/Pseudo-elements">de pseudo-élément</a>.</p>
+La pseudo-classe `:not()` prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou [de pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements).
 
-<div class="warning">
-<p><strong>Attention :</strong> la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.</p>
-</div>
+> **Attention :** la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* Contient tous les paragraphes (p) sauf
+```css
+/* Contient tous les paragraphes (p) sauf
    ceux avec le sélecteur de class "classy" */
 p:not(.classy) {
   color: red;
@@ -62,49 +59,34 @@ p:not(.classy) {
 /* Note : cette syntaxe n'est pas bien supportée */
 body :not(.classy, p) {
   font-family: sans-serif;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Un peu de texte.
-&lt;/p&gt;
-&lt;p class="classy"&gt;
+</p>
+<p class="classy">
   Encore du texte.
-&lt;/p&gt;
-&lt;span&gt;
+</p>
+<span>
   Et toujours du texte.
-&lt;span&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>La définition de l'argument est étendue afin d'autoriser les sélecteurs complexes.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.not")}}</p>
+<span>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                            | État                                 | Commentaires                                                                       |
+| ------------------------------------------------------------------------ | ------------------------------------ | ---------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#negation', ':not()')}} | {{Spec2('CSS4 Selectors')}} | La définition de l'argument est étendue afin d'autoriser les sélecteurs complexes. |
+| {{SpecName('CSS3 Selectors', '#negation', ':not()')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                                               |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.not")}}
diff --git a/files/fr/web/css/_colon_nth-child/index.md b/files/fr/web/css/_colon_nth-child/index.md
index 0e9b1efcac..46df691595 100644
--- a/files/fr/web/css/_colon_nth-child/index.md
+++ b/files/fr/web/css/_colon_nth-child/index.md
@@ -1,91 +1,84 @@
 ---
 title: ':nth-child'
-slug: 'Web/CSS/:nth-child'
+slug: Web/CSS/:nth-child
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:nth-child'
+translation_of: Web/CSS/:nth-child
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-child(an+b)</code></strong> permet de cibler un élément qui possède <code><em>a</em>n+<em>b</em>-1</code> éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières <code>n</code> et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif <em>an+b</em>.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:nth-child(an+b)`** permet de cibler un élément qui possède `an+b-1` éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières `n` et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif _an+b_.
 
-<pre class="brush: css no-line-numbers">/* Cible les éléments en fonction de leur position dans */
+```css
+/* Cible les éléments en fonction de leur position dans */
 /* le document : ici le 4e, 8e, 16e, 20e, etc. quel que */
 /* soit le type de l'élément */
 body :nth-child(4n) {
   background-color: lime;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.</p>
-</div>
+> **Note :** Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.
 
-<p>Illustrons cela avec quelques exemples :</p>
+Illustrons cela avec quelques exemples :
 
-<ul>
- <li><code>1n+0</code> ou <code>n</code> ciblera chaque élément fils. <code>n</code> ne cible aucun élément pour le navigateur Android jusqu'à la version 4.3 alors qu'<code>1n</code> fonctionne. <code>1n</code> est synonyme de <code>1n+0</code> et les deux peuvent donc être utilisés de façon équivalente.</li>
- <li><code>2n+0</code> ou <code>2n</code> ciblera les éléments fils 2, 4, 6, 8, etc. On pourra utiliser le mot-clé <strong><code>even</code></strong> à la place de cette expression.</li>
- <li><code>2n+1</code> ciblera les éléments fils 1, 3, 5, 7, etc. On pourra utiliser le mot-clé <strong><code>odd</code></strong> à la place de cette expression.</li>
- <li><code>3n+4</code> permettra de cibler les éléments fils 4, 7, 10, 13, etc.</li>
- <li><code>0n+3</code> (ou plus simplement <code>3</code>) permettra de cibler le troisième élément.</li>
-</ul>
+- `1n+0` ou `n` ciblera chaque élément fils. `n` ne cible aucun élément pour le navigateur Android jusqu'à la version 4.3 alors qu'`1n` fonctionne. `1n` est synonyme de `1n+0` et les deux peuvent donc être utilisés de façon équivalente.
+- `2n+0` ou `2n` ciblera les éléments fils 2, 4, 6, 8, etc. On pourra utiliser le mot-clé **`even`** à la place de cette expression.
+- `2n+1` ciblera les éléments fils 1, 3, 5, 7, etc. On pourra utiliser le mot-clé **`odd`** à la place de cette expression.
+- `3n+4` permettra de cibler les éléments fils 4, 7, 10, 13, etc.
+- `0n+3` (ou plus simplement `3`) permettra de cibler le troisième élément.
 
-<p>Les valeurs des coefficients <code><em>a</em></code> et <code><em>b</em></code> doivent être des entiers et l'indice du premier élément fils commence à 1. Autrement dit, cette pseudo-classe permettra de cibler les éléments fils dont l'indice appartient à l'ensemble <code>{ an + b; n = 0, 1, 2, ... }</code>.</p>
+Les valeurs des coefficients `a` et `b` doivent être des entiers et l'indice du premier élément fils commence à 1. Autrement dit, cette pseudo-classe permettra de cibler les éléments fils dont l'indice appartient à l'ensemble `{ an + b; n = 0, 1, 2, ... }`.
 
-<p>Cette pseudo-classe pourra ainsi être utilisée pour mettre en forme certaines lignes d'un tableau.</p>
+Cette pseudo-classe pourra ainsi être utilisée pour mettre en forme certaines lignes d'un tableau.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La pseudo-classe <code>nth-child</code> prend un seul argument qui représente le motif de répétition des éléments ciblés.</p>
+La pseudo-classe `nth-child` prend un seul argument qui représente le motif de répétition des éléments ciblés.
 
-<h3 id="Valeurs_avec_un_mot-clé">Valeurs avec un mot-clé</h3>
+### Valeurs avec un mot-clé
 
-<dl>
- <dt><code>odd</code></dt>
- <dd>Représente les éléments dont la position est impaire par rapport à leurs voisins.</dd>
- <dt><code>even</code></dt>
- <dd>Représente les éléments dont la position est paire par rapport à leurs voisins.</dd>
-</dl>
+- `odd`
+  - : Représente les éléments dont la position est impaire par rapport à leurs voisins.
+- `even`
+  - : Représente les éléments dont la position est paire par rapport à leurs voisins.
 
-<h3 id="Notation_fonctionnelle">Notation fonctionnelle</h3>
+### Notation fonctionnelle
 
-<dl>
- <dt><code>&lt;An+B&gt;</code></dt>
- <dd>Représente les éléments dont la position est la <code>An+B</code>-ième avec <code>n</code> qui parcourt les entiers à partir de 0. Les valeurs fournies pour <code>A</code> et <code>B</code> doivent être des entiers ({{cssxref("&lt;integer&gt;")}}).</dd>
-</dl>
+- `<An+B>`
+  - : Représente les éléments dont la position est la `An+B`-ième avec `n` qui parcourt les entiers à partir de 0. Les valeurs fournies pour `A` et `B` doivent être des entiers ({{cssxref("&lt;integer&gt;")}}).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemples_de_sélecteurs">Exemples de sélecteurs</h3>
+### Exemples de sélecteurs
 
-<dl>
- <dt><code>tr:nth-child(2n+1)</code></dt>
- <dd>Permettra de cibler les lignes impaires d'un tableau.</dd>
- <dt><code>tr:nth-child(odd)</code></dt>
- <dd>Permettra de cibler les lignes impaires d'un tableau.</dd>
- <dt><code>tr:nth-child(2n)</code></dt>
- <dd>Permettra de cibler les lignes paires d'un tableau.</dd>
- <dt><code>tr:nth-child(even)</code></dt>
- <dd>Permettra de cibler les lignes paires d'un tableau.</dd>
- <dt><code>span:nth-child(0n+1)</code></dt>
- <dd>Permettra de cibler un élément {{HTMLElement("span")}} qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe {{cssxref(":first-child")}}.</dd>
- <dt><code>span:nth-child(1)</code></dt>
- <dd>Synonyme à l'exemple précédent.</dd>
- <dt><code>span:nth-child(-n+3)</code></dt>
- <dd>Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément <code>span</code>.</dd>
-</dl>
+- `tr:nth-child(2n+1)`
+  - : Permettra de cibler les lignes impaires d'un tableau.
+- `tr:nth-child(odd)`
+  - : Permettra de cibler les lignes impaires d'un tableau.
+- `tr:nth-child(2n)`
+  - : Permettra de cibler les lignes paires d'un tableau.
+- `tr:nth-child(even)`
+  - : Permettra de cibler les lignes paires d'un tableau.
+- `span:nth-child(0n+1)`
+  - : Permettra de cibler un élément {{HTMLElement("span")}} qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe {{cssxref(":first-child")}}.
+- `span:nth-child(1)`
+  - : Synonyme à l'exemple précédent.
+- `span:nth-child(-n+3)`
+  - : Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément `span`.
 
-<h3 id="Exemple_démonstratif">Exemple démonstratif</h3>
+### Exemple démonstratif
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">html {
+```css
+html {
   font-family: sans-serif;
 }
 
@@ -100,107 +93,90 @@ span, div em {
 .deuxieme span:nth-child(2n+1),
 .troisieme span:nth-of-type(2n+1) {
   background-color: lime;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush:html">&lt;p&gt;
-  &lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;,
-  &lt;em&gt;sans&lt;/em&gt; un &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+```html
+<p>
+  <code>span:nth-child(2n+1)</code>,
+  <em>sans</em> un <code>&lt;em&gt;</code>
   parmi les éléments. Les éléments fils 1, 3,
   5 et 7 sont sélectionnés.
-&lt;/p&gt;
-
-&lt;div class="premier"&gt;
-  &lt;span&gt;Ce span est sélectionné !&lt;/span&gt;
-  &lt;span&gt;Pas ce span ci. :(&lt;/span&gt;
-  &lt;span&gt;Celui-ci ?&lt;/span&gt;
-  &lt;span&gt;Celui-là ?&lt;/span&gt;
-  &lt;span&gt;Un autre exemple&lt;/span&gt;
-  &lt;span&gt;Et encore un&lt;/span&gt;
-  &lt;span&gt;Puis un dernier&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;p&gt;
-  &lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;,
-  &lt;em&gt;avec&lt;/em&gt; un élément &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+</p>
+
+<div class="premier">
+  <span>Ce span est sélectionné !</span>
+  <span>Pas ce span ci. :(</span>
+  <span>Celui-ci ?</span>
+  <span>Celui-là ?</span>
+  <span>Un autre exemple</span>
+  <span>Et encore un</span>
+  <span>Puis un dernier</span>
+</div>
+
+<p>
+  <code>span:nth-child(2n+1)</code>,
+  <em>avec</em> un élément <code>&lt;em&gt;</code>
   parmi les fils. Les éléments fils 1, 5,
   et 7 sont sélectionnés. 3 est compté
   mais n'est pas ciblé car ce n'est pas
-  &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.
-&lt;/p&gt;
-
-&lt;div class="deuxieme"&gt;
-  &lt;span&gt;Ce span est sélectionné !&lt;/span&gt;
-  &lt;span&gt;Pas ce span ci. :(&lt;/span&gt;
-  &lt;em&gt;Ici on a un em.&lt;/em&gt;
-  &lt;span&gt;Qu'en est-il de celui-ci ?&lt;/span&gt;
-  &lt;span&gt;De celui-là ?&lt;/span&gt;
-  &lt;span&gt;Voici un autre exemple&lt;/span&gt;
-  &lt;span&gt;Et encore un&lt;/span&gt;
-  &lt;span&gt;Puis un dernier&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;p&gt;
-  &lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;,
-  &lt;em&gt;avec&lt;/em&gt; un &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+  <code>&lt;span&gt;</code>.
+</p>
+
+<div class="deuxieme">
+  <span>Ce span est sélectionné !</span>
+  <span>Pas ce span ci. :(</span>
+  <em>Ici on a un em.</em>
+  <span>Qu'en est-il de celui-ci ?</span>
+  <span>De celui-là ?</span>
+  <span>Voici un autre exemple</span>
+  <span>Et encore un</span>
+  <span>Puis un dernier</span>
+</div>
+
+<p>
+  <code>span:nth-of-type(2n+1)</code>,
+  <em>avec</em> un <code>&lt;em&gt;</code>
   parmi les éléments fils. Les éléments fils
   1, 4, 6 et 8 sont sélectionnés. 3 n'est pas
-  compté ni ciblé car c'est un &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
-  et pas un &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; et
-  &lt;code&gt;nth-of-type&lt;/code&gt; ne sélectionne que les
-  fils de ce type. Ce &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; est
+  compté ni ciblé car c'est un <code>&lt;em&gt;</code>,
+  et pas un <code>&lt;span&gt;</code> et
+  <code>nth-of-type</code> ne sélectionne que les
+  fils de ce type. Ce <code>&lt;em&gt;</code> est
   sauté et est ignoré.
-&lt;/p&gt;
-
-&lt;div class="troisieme"&gt;
-  &lt;span&gt;Ce span est sélectionné !&lt;/span&gt;
-  &lt;span&gt;Pas ce span ci. :(&lt;/span&gt;
-  &lt;em&gt;Ici on a un em.&lt;/em&gt;
-  &lt;span&gt;Qu'en est-il de celui-ci ?&lt;/span&gt;
-  &lt;span&gt;De celui-là ?&lt;/span&gt;
-  &lt;span&gt;Voici un autre exemple&lt;/span&gt;
-  &lt;span&gt;Et encore un&lt;/span&gt;
-  &lt;span&gt;Puis un dernier&lt;/span&gt;
-&lt;/div&gt;
-</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<div>{{EmbedLiveSample('Exemple_demonstratif','100%', '550')}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Ajout de la syntaxe <code>&lt;selector&gt;</code>. Les éléments ciblés peuvent ne pas avoir d'élément parent.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.nth-child")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":nth-of-type")}}</li>
- <li>{{cssxref(":first-child")}}</li>
- <li>{{cssxref(":last-child")}}</li>
-</ul>
+</p>
+
+<div class="troisieme">
+  <span>Ce span est sélectionné !</span>
+  <span>Pas ce span ci. :(</span>
+  <em>Ici on a un em.</em>
+  <span>Qu'en est-il de celui-ci ?</span>
+  <span>De celui-là ?</span>
+  <span>Voici un autre exemple</span>
+  <span>Et encore un</span>
+  <span>Puis un dernier</span>
+</div>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Exemple_demonstratif','100%', '550')}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                 | Commentaires                                                                                 |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}} | {{Spec2('CSS4 Selectors')}} | Ajout de la syntaxe `<selector>`. Les éléments ciblés peuvent ne pas avoir d'élément parent. |
+| {{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.nth-child")}}
+
+## Voir aussi
+
+- {{cssxref(":nth-of-type")}}
+- {{cssxref(":first-child")}}
+- {{cssxref(":last-child")}}
diff --git a/files/fr/web/css/_colon_nth-col/index.md b/files/fr/web/css/_colon_nth-col/index.md
index d8ff143e54..e872c7f848 100644
--- a/files/fr/web/css/_colon_nth-col/index.md
+++ b/files/fr/web/css/_colon_nth-col/index.md
@@ -1,52 +1,57 @@
 ---
 title: ':nth-col'
-slug: 'Web/CSS/:nth-col'
+slug: Web/CSS/:nth-col
+translation_of: Web/CSS/:nth-col
 browser-compat: css.selectors.nth-col
-translation_of: 'Web/CSS/:nth-col'
 ---
-<p>{{CSSRef}}{{SeeCompatTable}}</p>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>:nth-col()</code></strong> est conçue pour les tableaux et les grilles. Elle accepte les notations de type <code>An+B</code> telles qu'utilisées avec le sélecteur {{Cssxref(":nth-child")}}, ce qui permet de cibler un jeu de colonnes. Les valeurs <i>odd</i> et <i>even</i> sont aussi valides.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:nth-col()`** est conçue pour les tableaux et les grilles. Elle accepte les notations de type `An+B` telles qu'utilisées avec le sélecteur {{Cssxref(":nth-child")}}, ce qui permet de cibler un jeu de colonnes. Les valeurs _odd_ et _even_ sont aussi valides.
 
-<pre class="brush: css">/* Sélectionne toutes les valeurs impaires du tableau */
+```css
+/* Sélectionne toutes les valeurs impaires du tableau */
 :nth-col(odd) {
   background-color: pink;
-}</pre>
+}
+```
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<p>La pseudo-classe <code>nth-col</code> est spécifiée avec un argument unique qui représente le motif utilisé pour faire la correspondance des éléments.</p>
+La pseudo-classe `nth-col` est spécifiée avec un argument unique qui représente le motif utilisé pour faire la correspondance des éléments.
 
-<p>Voir {{Cssxref(":nth-child")}} pour une explication plus détaillée de cette syntaxe.</p>
+Voir {{Cssxref(":nth-child")}} pour une explication plus détaillée de cette syntaxe.
 
-<h3 id="formal_syntax">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="basic_example">Exemple basique</h3>
+### Exemple basique
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td&gt;un&lt;/td&gt;
-    &lt;td&gt;deux&lt;/td&gt;
-    &lt;td&gt;trois&lt;/td&gt;
-    &lt;td&gt;quatre&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-  &lt;td&gt;un&lt;/td&gt;
-    &lt;td&gt;deux&lt;/td&gt;
-    &lt;td&gt;trois&lt;/td&gt;
-    &lt;td&gt;quatre&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
+```html
+<table>
+  <tr>
+    <td>un</td>
+    <td>deux</td>
+    <td>trois</td>
+    <td>quatre</td>
+  </tr>
+  <tr>
+  <td>un</td>
+    <td>deux</td>
+    <td>trois</td>
+    <td>quatre</td>
+  </tr>
+</table>
+```
 
-<h4 id="css">CSS</h4>
+#### CSS
 
-<pre class="brush: css">td {
+```css
+td {
   border: 1px solid #ccc;
   padding: .2em;
 }
@@ -55,22 +60,20 @@ translation_of: 'Web/CSS/:nth-col'
 :nth-col(2n+1) {
   background-color: pink;
 }
-</pre>
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('basic_example', 250, 200)}}</p>
+{{EmbedLiveSample('basic_example', 250, 200)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
-</ul>
+- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}
diff --git a/files/fr/web/css/_colon_nth-last-child/index.md b/files/fr/web/css/_colon_nth-last-child/index.md
index d99871fa8a..770f93502c 100644
--- a/files/fr/web/css/_colon_nth-last-child/index.md
+++ b/files/fr/web/css/_colon_nth-last-child/index.md
@@ -1,195 +1,181 @@
 ---
 title: ':nth-last-child'
-slug: 'Web/CSS/:nth-last-child'
+slug: Web/CSS/:nth-last-child
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:nth-last-child'
+translation_of: Web/CSS/:nth-last-child
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-last-child</code></strong> permet de cibler les éléments qui possèdent <code><em>a</em>n+<em>b</em>-1</code> nœud frères qui les suivent pour un même élément parent avec un indice n entier qui est incrémenté à partir de 0. Avec CSS3, il était nécessaire que l'élément ciblé ait un élément parent, cette restriction a été levée en CSS4.</p>
+La [pseudo-classe](/fr/docs/CSS/Pseudo-classes) **`:nth-last-child`** permet de cibler les éléments qui possèdent `an+b-1` nœud frères qui les suivent pour un même élément parent avec un indice n entier qui est incrémenté à partir de 0. Avec CSS3, il était nécessaire que l'élément ciblé ait un élément parent, cette restriction a été levée en CSS4.
 
-<pre class="brush: css no-line-numbers">/* Cible les éléments qui sont les 4e, 8e, 16e     */
+```css
+/* Cible les éléments qui sont les 4e, 8e, 16e     */
 /* 20e à partir de la fin, quel que soit leur type */
 body: nth-last-child(4n) {
   background-color: lime;
-}</pre>
+}
+```
 
-<p>Cette pseudo-classe fonctionne comme {{cssxref(":nth-child")}} mais cette fois-ci, le comptage s'effectue depuis la fin. Pour plus d'informations sur la syntaxe des arguments, voir {{cssxref(":nth-child")}}.</p>
+Cette pseudo-classe fonctionne comme {{cssxref(":nth-child")}} mais cette fois-ci, le comptage s'effectue depuis la fin. Pour plus d'informations sur la syntaxe des arguments, voir {{cssxref(":nth-child")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La pseudo-classe <code>nth-last-child</code> prend un seul argument qui représente le motif de répétition des éléments ciblés, compté à partir de la fin.</p>
+La pseudo-classe `nth-last-child` prend un seul argument qui représente le motif de répétition des éléments ciblés, compté à partir de la fin.
 
-<h3 id="Valeurs_avec_un_mot-clé">Valeurs avec un mot-clé</h3>
+### Valeurs avec un mot-clé
 
-<dl>
- <dt><code>odd</code></dt>
- <dd>Représente les éléments dont la position est impaire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.</dd>
- <dt><code>even</code></dt>
- <dd>Représente les éléments dont la position est paire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.</dd>
-</dl>
+- `odd`
+  - : Représente les éléments dont la position est impaire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.
+- `even`
+  - : Représente les éléments dont la position est paire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.
 
-<h3 id="Notation_fonctionnelle">Notation fonctionnelle</h3>
+### Notation fonctionnelle
 
-<dl>
- <dt><code>&lt;An+B&gt;</code></dt>
- <dd>Représente les éléments dont la position, à partir de la fin, est la <code>An+B</code>-ième avec <code>n</code> qui parcourt les entiers à partir de 0. Les valeurs fournies pour <code>A</code> et <code>B</code> doivent être des entiers {{cssxref("&lt;integer&gt;")}}.</dd>
-</dl>
+- `<An+B>`
+  - : Représente les éléments dont la position, à partir de la fin, est la `An+B`-ième avec `n` qui parcourt les entiers à partir de 0. Les valeurs fournies pour `A` et `B` doivent être des entiers {{cssxref("&lt;integer&gt;")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemples_2">Exemples</h3>
+### Exemples
 
-<dl>
- <dt><code>tr:</code>nth-last-child<code>(-n+4)</code></dt>
- <dd>Permettra de cibler les quatre dernières lignes d'un tableau.</dd>
- <dt><code>span:nth-last-child(even)</code> ou <code>span:nth-last-child(2n)</code></dt>
- <dd>Permettra de cibler tous les éléments {{HTMLElement("span")}} pairs en partant de la fin.</dd>
-</dl>
+- `tr:`nth-last-child`(-n+4)`
+  - : Permettra de cibler les quatre dernières lignes d'un tableau.
+- `span:nth-last-child(even)` ou `span:nth-last-child(2n)`
+  - : Permettra de cibler tous les éléments {{HTMLElement("span")}} pairs en partant de la fin.
 
-<h3 id="Exemple_appliqué">Exemple appliqué</h3>
+### Exemple appliqué
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">table {
+```css
+table {
   border:1px solid blue;
 }
 tr:nth-last-child(-n+3) { /* les trois derniers enfants */
   background-color: lime;
 }
-</pre>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Première ligne&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-       &lt;td&gt;Deuxième ligne&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-       &lt;td&gt;Troisième ligne&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-       &lt;td&gt;Quatrième ligne&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-       &lt;td&gt;Sixième ligne&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample('Exemple_appliqué', '100%', 150)}}</p>
-
-<h3 id="Cas_aux_limites">Cas aux limites</h3>
-
-<p><code>n</code> commence à zéro et le dernier élément commence à un, <code>n</code> et <code>n+1</code> sélectionnent donc les mêmes éléments.</p>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Première ligne&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Deuxième ligne&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Troisième ligne&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css">tr:nth-last-child(n) {
+```
+
+#### HTML
+
+```html
+<table>
+  <tbody>
+    <tr>
+      <td>Première ligne</td>
+    </tr>
+    <tr>
+       <td>Deuxième ligne</td>
+    </tr>
+    <tr>
+       <td>Troisième ligne</td>
+    </tr>
+    <tr>
+       <td>Quatrième ligne</td>
+    </tr>
+    <tr>
+       <td>Sixième ligne</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Exemple_appliqué', '100%', 150)}}
+
+### Cas aux limites
+
+`n` commence à zéro et le dernier élément commence à un, `n` et `n+1` sélectionnent donc les mêmes éléments.
+
+#### HTML
+
+```html
+<table>
+  <tbody>
+    <tr>
+      <td>Première ligne</td>
+    </tr>
+    <tr>
+      <td>Deuxième ligne</td>
+    </tr>
+    <tr>
+      <td>Troisième ligne</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+#### CSS
+
+```css
+tr:nth-last-child(n) {
   background-color: lightgray;
 }
 
 tr:nth-last-child(n+1){
   font-weight: 600;
 }
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Cas_aux_limites')}}</p>
+{{EmbedLiveSample('Cas_aux_limites')}}
 
-<h3 id="Mise_en_forme_selon_le_nombre_d’éléments">Mise en forme selon le nombre d’éléments</h3>
+### Mise en forme selon le nombre d’éléments
 
-<p>Il est possible d'utiliser les compteurs pour mettre en forme une liste selon le nombre d'éléments qu'elle contient. Dans l'exemple qui suit, on met les éléments de la liste en rouge si celle-ci contient au moins trois éléments. Pour cela, on combine la pseudo-classe <code>nth-last-child</code> et <a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">le sélecteur de voisins généraux (<em>general sibling combinator</em>)</a>.</p>
+Il est possible d'utiliser les compteurs pour mettre en forme une liste selon le nombre d'éléments qu'elle contient. Dans l'exemple qui suit, on met les éléments de la liste en rouge si celle-ci contient au moins trois éléments. Pour cela, on combine la pseudo-classe `nth-last-child` et [le sélecteur de voisins généraux (_general sibling combinator_)](/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux).
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h4&gt;Une liste avec quatre éléments :&lt;/h4&gt;
-&lt;ol&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-&lt;/ol&gt;
+```html
+<h4>Une liste avec quatre éléments :</h4>
+<ol>
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+</ol>
 
-&lt;h4&gt;Une liste avec deux éléments :&lt;/h4&gt;
-&lt;ol&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-&lt;/ol&gt;</pre>
+<h4>Une liste avec deux éléments :</h4>
+<ol>
+  <li>Un</li>
+  <li>Deux</li>
+</ol>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">li:nth-last-child(n+3),
+```css
+li:nth-last-child(n+3),
 li:nth-last-child(n+3) ~ li {
   color: red;
-}</pre>
-
-<h4 id="Résultat_3">Résultat</h4>
-
-<p>{{EmbedLiveSample("Mise_en_forme_selon_le_nombre_d’éléments", '100%', 270)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Les éléments ciblés peuvent ne pas avoir d'élément parent.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Mise_en_forme_selon_le_nombre_d’éléments", '100%', 270)}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires                                               |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} | {{Spec2('CSS4 Selectors')}} | Les éléments ciblés peuvent ne pas avoir d'élément parent. |
+| {{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                       |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.nth-last-child")}}</p>
+{{Compat("css.selectors.nth-last-child")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":nth-child")}}</li>
- <li><em><a href="https://alistapart.com/article/quantity-queries-for-css">Quantity Queries for CSS</a></em></li>
-</ul>
+- {{cssxref(":nth-child")}}
+- _[Quantity Queries for CSS](https://alistapart.com/article/quantity-queries-for-css)_
diff --git a/files/fr/web/css/_colon_nth-last-col/index.md b/files/fr/web/css/_colon_nth-last-col/index.md
index 767e6afc0b..212050450f 100644
--- a/files/fr/web/css/_colon_nth-last-col/index.md
+++ b/files/fr/web/css/_colon_nth-last-col/index.md
@@ -1,52 +1,57 @@
 ---
 title: ':nth-last-col'
-slug: 'Web/CSS/:nth-last-col'
+slug: Web/CSS/:nth-last-col
+translation_of: Web/CSS/:nth-last-col
 browser-compat: css.selectors.nth-last-col
-translation_of: 'Web/CSS/:nth-last-col'
 ---
-<p>{{CSSRef}}{{SeeCompatTable}}</p>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>:nth-last-col()</code></strong> est conçue pour les tableaux et les grilles. Elle accepte les notations de type <code>An+B</code> telles qu'utilisées avec le sélecteur {{Cssxref(":nth-child")}}, ce qui permet de cibler plusieurs colonnes en comptant à partir de la fin du jeu de colonnes. Les valeurs <i>odd</i> et <i>even</i> sont aussi valides.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:nth-last-col()`** est conçue pour les tableaux et les grilles. Elle accepte les notations de type `An+B` telles qu'utilisées avec le sélecteur {{Cssxref(":nth-child")}}, ce qui permet de cibler plusieurs colonnes en comptant à partir de la fin du jeu de colonnes. Les valeurs _odd_ et _even_ sont aussi valides.
 
-<pre class="brush: css">/* Sélectionne toutes les valeurs impaires du tableau */
+```css
+/* Sélectionne toutes les valeurs impaires du tableau */
 :nth-last-col(odd) {
   background-color: pink;
-}</pre>
+}
+```
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<p>La pseudo-classe <code>nth-last-col</code> est spécifiée avec un argument unique qui représente le motif utilisé pour faire la correspondance des éléments.</p>
+La pseudo-classe `nth-last-col` est spécifiée avec un argument unique qui représente le motif utilisé pour faire la correspondance des éléments.
 
-<p>Voir {{Cssxref(":nth-child")}} pour une explication plus détaillée de cette syntaxe.</p>
+Voir {{Cssxref(":nth-child")}} pour une explication plus détaillée de cette syntaxe.
 
-<h3 id="formal_syntax">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="basic_example">Exemple basique</h3>
+### Exemple basique
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td&gt;un&lt;/td&gt;
-    &lt;td&gt;deux&lt;/td&gt;
-    &lt;td&gt;trois&lt;/td&gt;
-    &lt;td&gt;quatre&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;un&lt;/td&gt;
-    &lt;td&gt;deux&lt;/td&gt;
-    &lt;td&gt;trois&lt;/td&gt;
-    &lt;td&gt;quatre&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
+```html
+<table>
+  <tr>
+    <td>un</td>
+    <td>deux</td>
+    <td>trois</td>
+    <td>quatre</td>
+  </tr>
+  <tr>
+    <td>un</td>
+    <td>deux</td>
+    <td>trois</td>
+    <td>quatre</td>
+  </tr>
+</table>
+```
 
-<h4 id="css">CSS</h4>
+#### CSS
 
-<pre class="brush: css">td {
+```css
+td {
   border: 1px solid #ccc;
   padding: .2em;
 }
@@ -55,22 +60,20 @@ translation_of: 'Web/CSS/:nth-last-col'
 :nth-last-col(2n+1) {
   background-color: pink;
 }
-</pre>
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('basic_example', 250, 200)}}</p>
+{{EmbedLiveSample('basic_example', 250, 200)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
-</ul>
+- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}
diff --git a/files/fr/web/css/_colon_nth-last-of-type/index.md b/files/fr/web/css/_colon_nth-last-of-type/index.md
index 21460cfb7e..7c87c93290 100644
--- a/files/fr/web/css/_colon_nth-last-of-type/index.md
+++ b/files/fr/web/css/_colon_nth-last-of-type/index.md
@@ -1,91 +1,76 @@
 ---
 title: ':nth-last-of-type'
-slug: 'Web/CSS/:nth-last-of-type'
+slug: Web/CSS/:nth-last-of-type
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:nth-last-of-type'
+translation_of: Web/CSS/:nth-last-of-type
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-last-of-type</code></strong> permet de cibler des éléments qui possèdent <code><em>a</em>n+<em>b</em>-1</code> nœud frères étant les mêmes éléments à partir de la fin de l'arbre et qui ont le même élément parent (l'indice <code>n</code> sera incrémenté à partir de 0). Autrement dit, la pseudo-classe parcourra les éléments d'un type donné en partant de la fin de l'élément parent, selon le motif passé en argument.</p>
+La [pseudo-classe](/fr/docs/CSS/Pseudo-classes) **`:nth-last-of-type`** permet de cibler des éléments qui possèdent `an+b-1` nœud frères étant les mêmes éléments à partir de la fin de l'arbre et qui ont le même élément parent (l'indice `n` sera incrémenté à partir de 0). Autrement dit, la pseudo-classe parcourra les éléments d'un type donné en partant de la fin de l'élément parent, selon le motif passé en argument.
 
-<pre class="brush: css no-line-numbers">/* Cible les éléments &lt;div&gt; qui sont les 4e */
+```css
+/* Cible les éléments <div> qui sont les 4e */
 /* 8e, 16e, 20e, à partir du dernier élément */
-/* &lt;div&gt; d'un élément parent */
+/* <div> d'un élément parent */
 div:nth-last-of-type(4n) {
   background-color: lime;
-}</pre>
+}
+```
 
-<p>Pour plus de détails sur les arguments passés à cette pseudo-classe, voir {{cssxref(":nth-child")}}.</p>
+Pour plus de détails sur les arguments passés à cette pseudo-classe, voir {{cssxref(":nth-child")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La pseudo-classe <code>nth-last-of-type</code> prend un seul argument qui représente le motif de répétition des éléments correspondants, comptés à partir de la fin.</p>
+La pseudo-classe `nth-last-of-type` prend un seul argument qui représente le motif de répétition des éléments correspondants, comptés à partir de la fin.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin :</p>
+Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin :
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">span:nth-last-of-type(2) {
+```css
+span:nth-last-of-type(2) {
   background-color: lime;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;span&gt;Ce span est le premier !&lt;/span&gt;
-  &lt;span&gt;Ce span ne l'est pas. :(&lt;/span&gt;
-  &lt;em&gt;Celui-ci est bizarre.&lt;/em&gt;
-  &lt;span&gt;Celui-ci l'est !&lt;/span&gt;
-  &lt;strike&gt;C'est un autre type&lt;/strike&gt;
-  &lt;span&gt;Malheureusement, celui-ci ne l'est pas.&lt;/span&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<div>{{EmbedLiveSample('Exemples')}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.nth-last-of-type")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":last-of-type")}}</li>
- <li>{{cssxref(":nth-of-type")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<div>
+  <span>Ce span est le premier !</span>
+  <span>Ce span ne l'est pas. :(</span>
+  <em>Celui-ci est bizarre.</em>
+  <span>Celui-ci l'est !</span>
+  <strike>C'est un autre type</strike>
+  <span>Malheureusement, celui-ci ne l'est pas.</span>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                 | Commentaires                                                        |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}} | {{Spec2('CSS4 Selectors')}} | L'élément ciblé ne doit pas nécessairement avoir un élément parent. |
+| {{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                                |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.nth-last-of-type")}}
+
+## Voir aussi
+
+- {{cssxref(":last-of-type")}}
+- {{cssxref(":nth-of-type")}}
diff --git a/files/fr/web/css/_colon_nth-of-type/index.md b/files/fr/web/css/_colon_nth-of-type/index.md
index 9a64cd08c6..0d76ca640d 100644
--- a/files/fr/web/css/_colon_nth-of-type/index.md
+++ b/files/fr/web/css/_colon_nth-of-type/index.md
@@ -9,49 +9,51 @@ tags:
   - Web
 translation_of: Web/CSS/:nth-of-type
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-of-type()</code></strong> correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:nth-of-type()`** correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs.
 
-<pre class="brush: css no-line-numbers  language-css">/* Sélectionne chaque élément de type &lt;p&gt; dont
-la position parmi l'ensemble des éléments de type &lt;p&gt;
+```css
+/* Sélectionne chaque élément de type <p> dont
+la position parmi l'ensemble des éléments de type <p>
 descendants directement du même élément parent,
 est un multiple de 4. */
 p:nth-of-type(4n) {
   color: lime;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La pseudo-classe <code>nth-of-type</code> ne prend qu'un argument qui représente le motif de répétition pour les éléments ciblés.</p>
+La pseudo-classe `nth-of-type` ne prend qu'un argument qui représente le motif de répétition pour les éléments ciblés.
 
-<p>Pour une explication plus détaillée de sa syntax voir {{Cssxref(":nth-child")}}</p>
+Pour une explication plus détaillée de sa syntax voir {{Cssxref(":nth-child")}}
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans cet exemple nous allons colorer un paragrapher sur deux avec des couleurs différentes et mettre le premier paragraphe en gras</p>
-
+## Exemples
 
+Dans cet exemple nous allons colorer un paragrapher sur deux avec des couleurs différentes et mettre le premier paragraphe en gras
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;div&gt;Cet élément n'est pas compté.&lt;/div&gt;
-  &lt;p&gt;1er paragraphe.&lt;/p&gt;
-  &lt;p&gt;2e paragraphe.&lt;/p&gt;
-  &lt;div&gt;Cet élément n'est pas compté.&lt;/div&gt;
-  &lt;p&gt;3e paragraphe.&lt;/p&gt;
-  &lt;p&gt;4e paragraphe.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <div>Cet élément n'est pas compté.</div>
+  <p>1er paragraphe.</p>
+  <p>2e paragraphe.</p>
+  <div>Cet élément n'est pas compté.</div>
+  <p>3e paragraphe.</p>
+  <p>4e paragraphe.</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css line-numbers  language-css">/* Paragraphes impairs */
+```css
+/* Paragraphes impairs */
 p:nth-of-type(2n+1) {
   color: red;
 }
@@ -64,43 +66,25 @@ p:nth-of-type(2n) {
 /* Premier paragraphe */
 p:nth-of-type(1) {
   font-weight: bold;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<div>{{EmbedLiveSample('Exemples','250','200')}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.nth-of-type")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":nth-child")}}</li>
- <li>{{cssxref(":nth-last-of-type")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples','250','200')}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires                                                        |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}} | {{Spec2('CSS4 Selectors')}} | L'élément ciblé ne doit pas nécessairement avoir un élément parent. |
+| {{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                                |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.nth-of-type")}}
+
+## Voir aussi
+
+- {{cssxref(":nth-child")}}
+- {{cssxref(":nth-last-of-type")}}
diff --git a/files/fr/web/css/_colon_only-child/index.md b/files/fr/web/css/_colon_only-child/index.md
index 0f992ae22e..9f04b643c6 100644
--- a/files/fr/web/css/_colon_only-child/index.md
+++ b/files/fr/web/css/_colon_only-child/index.md
@@ -1,71 +1,74 @@
 ---
 title: ':only-child'
-slug: 'Web/CSS/:only-child'
+slug: Web/CSS/:only-child
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:only-child'
+translation_of: Web/CSS/:only-child
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:only-child</code></strong> représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que <code>:first-child:last-child</code> ou <code>:nth-child(1):nth-last-child(1)</code>, mais avec une spécificité inférieure.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:only-child`** représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que `:first-child:last-child` ou `:nth-child(1):nth-last-child(1)`, mais avec une spécificité inférieure.
 
-<pre class="brush: css no-line-numbers">/* Cible chaque élément &lt;p&gt; si celui-ci   */
+```css
+/* Cible chaque élément <p> si celui-ci   */
 /* est le seul élément fils de son parent */
 p:only-child {
   background-color: lime;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.</p>
-</div>
+> **Note :** En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">span:only-child {
+```css
+span:only-child {
   color:red;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;span&gt;
+```html
+<div>
+  <span>
     Ce span est l'unique enfant
     de son parent
-  &lt;/span&gt;
-&lt;/div&gt;
+  </span>
+</div>
 
-&lt;div&gt;
-  &lt;span&gt;
+<div>
+  <span>
     Ce span est l'un des deux
     enfants de son parent
-  &lt;/span&gt;
-  &lt;span&gt;
+  </span>
+  <span>
     Ce span est l'un des deux
     enfants de son parent
-  &lt;/span&gt;
-&lt;/div&gt;
-</pre>
+  </span>
+</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_simple', '100%', 150)}}</p>
+{{EmbedLiveSample('Exemple_simple', '100%', 150)}}
 
-<h3 id="Exemple_avec_une_liste">Exemple avec une liste</h3>
+### Exemple avec une liste
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">li li {
+```css
+li li {
   list-style-type : disc;
 }
 
@@ -73,69 +76,52 @@ li:only-child {
   color: #6699ff;
   font-style: italic;
   list-style-type: square;
-}</pre>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;Premier
-    &lt;ul&gt;
-      &lt;li&gt;Ceci est l'unique élément enfant&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-  &lt;li&gt;Deuxième
-    &lt;ul&gt;
-      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
-      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-  &lt;li&gt;Troisième
-    &lt;ul&gt;
-      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
-      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
-      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ol&gt;
-</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.only-child")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":only-of-type")}}</li>
- <li>{{cssxref(":first-child")}}</li>
- <li>{{cssxref(":last-child")}}</li>
- <li>{{cssxref(":nth-child")}}</li>
-</ul>
+}
+```
+
+#### HTML
+
+```html
+<ol>
+  <li>Premier
+    <ul>
+      <li>Ceci est l'unique élément enfant</li>
+    </ul>
+  </li>
+  <li>Deuxième
+    <ul>
+      <li>Cette liste a deux éléments</li>
+      <li>Cette liste a deux éléments</li>
+    </ul>
+  </li>
+  <li>Troisième
+    <ul>
+      <li>Cette liste a trois éléments</li>
+      <li>Cette liste a trois éléments</li>
+      <li>Cette liste a trois éléments</li>
+    </ul>
+  </li>
+</ol>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                 | Commentaires                                                          |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS4 Selectors')}} | Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé. |
+| {{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.only-child")}}
+
+## Voir aussi
+
+- {{cssxref(":only-of-type")}}
+- {{cssxref(":first-child")}}
+- {{cssxref(":last-child")}}
+- {{cssxref(":nth-child")}}
diff --git a/files/fr/web/css/_colon_only-of-type/index.md b/files/fr/web/css/_colon_only-of-type/index.md
index 4c1042a821..1d34bb6186 100644
--- a/files/fr/web/css/_colon_only-of-type/index.md
+++ b/files/fr/web/css/_colon_only-of-type/index.md
@@ -1,35 +1,36 @@
 ---
 title: ':only-of-type'
-slug: 'Web/CSS/:only-of-type'
+slug: Web/CSS/:only-of-type
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:only-of-type'
+translation_of: Web/CSS/:only-of-type
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:only-of-type</code></strong> CSS permet de cibler un élément qui ne possède aucun nœud frère du même type pour un même élément parent (par exemple, sélectionner le seul élément {{HTMLElement("em")}} d'un {{HTMLElement("dd")}}).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:only-of-type`** CSS permet de cibler un élément qui ne possède aucun nœud frère du même type pour un même élément parent (par exemple, sélectionner le seul élément {{HTMLElement("em")}} d'un {{HTMLElement("dd")}}).
 
-<pre class="brush: css no-line-numbers">/* Cible un élément &lt;p&gt; si celui-ci est le */
+```css
+/* Cible un élément <p> si celui-ci est le */
 /* seul paragraphe de son élément parent   */
 p:only-of-type {
   background-color: lime;
-}</pre>
+}
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).</p>
-</div>
+> **Note :** Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">li li {
+```css
+li li {
   list-style-type : disc;
 }
 
@@ -37,76 +38,59 @@ li:only-of-type {
   color: #6699ff;
   font-style: italic;
   list-style-type: square;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;Premier
-    &lt;ul&gt;
-      &lt;li&gt;Ceci est l'unique li&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-  &lt;li&gt;Deuxième
-    &lt;ul&gt;
-      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
-      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-  &lt;li&gt;Troisième
-    &lt;ul&gt;
-      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
-      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
-      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ol&gt;
-&lt;ol&gt;
-  &lt;li&gt;Une seule liste imbriquée
-    &lt;ul&gt;Avec
-      &lt;li&gt;Un seul item&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ol&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '100%', 150)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.only-of-type")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":only-child")}}</li>
- <li>{{cssxref(":nth-of-type")}}</li>
- <li>{{cssxref(":first-of-type")}}</li>
- <li>{{cssxref(":last-of-type")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<ol>
+  <li>Premier
+    <ul>
+      <li>Ceci est l'unique li</li>
+    </ul>
+  </li>
+  <li>Deuxième
+    <ul>
+      <li>Cette liste a deux éléments</li>
+      <li>Cette liste a deux éléments</li>
+    </ul>
+  </li>
+  <li>Troisième
+    <ul>
+      <li>Cette liste a trois éléments</li>
+      <li>Cette liste a trois éléments</li>
+      <li>Cette liste a trois éléments</li>
+    </ul>
+  </li>
+</ol>
+<ol>
+  <li>Une seule liste imbriquée
+    <ul>Avec
+      <li>Un seul item</li>
+    </ul>
+  </li>
+</ol>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '100%', 150)}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires                                                        |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}} | {{Spec2('CSS4 Selectors')}} | L'élément ciblé ne doit pas nécessairement avoir un élément parent. |
+| {{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                                |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.only-of-type")}}
+
+## Voir aussi
+
+- {{cssxref(":only-child")}}
+- {{cssxref(":nth-of-type")}}
+- {{cssxref(":first-of-type")}}
+- {{cssxref(":last-of-type")}}
diff --git a/files/fr/web/css/_colon_optional/index.md b/files/fr/web/css/_colon_optional/index.md
index f37ff60318..01d467a2af 100644
--- a/files/fr/web/css/_colon_optional/index.md
+++ b/files/fr/web/css/_colon_optional/index.md
@@ -1,35 +1,36 @@
 ---
 title: ':optional'
-slug: 'Web/CSS/:optional'
+slug: Web/CSS/:optional
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:optional'
+translation_of: Web/CSS/:optional
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:optional</code></strong> permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}  pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:optional`** permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}  pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire.
 
-<pre class="brush: css no-line-numbers">/* Cible les élméents &lt;input&gt; qui sont optionnels */
+```css
+/* Cible les élméents <input> qui sont optionnels */
 /* c'est-à-dire qui n'ont pas d'attribut required */
 input:optional {
   border: 1px dashed black;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe {{cssxref(":required")}}.</p>
-</div>
+> **Note :** Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe {{cssxref(":required")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input {
+```css
+input {
   border-width: 3px;
 }
 input:optional {
@@ -37,78 +38,51 @@ input:optional {
 }
 input:required {
   border-color: #800000;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="url-input"&gt;Tapez une URL :&lt;/label&gt;
-  &lt;input type="url" id="url-input"&gt;
-  &lt;br&gt;
-  &lt;br&gt;
-  &lt;label for="email-input"&gt;Tapez une adresse électronique :&lt;/label&gt;
-  &lt;input type="email" id="email-input" required&gt;
-&lt;/form&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples','100%',150)}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.</p>
-
-<p>Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.</p>
-
-<ul>
- <li><a href="/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">Explications des recommendation WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-optional', ':optional')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Définition de la pseudo-classe mais sans la sémantique associée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.optional")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":required")}}</li>
- <li>{{cssxref(":invalid")}}</li>
- <li>{{cssxref(":valid")}}</li>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données de formulaire</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<form>
+  <label for="url-input">Tapez une URL :</label>
+  <input type="url" id="url-input">
+  <br>
+  <br>
+  <label for="email-input">Tapez une adresse électronique :</label>
+  <input type="email" id="email-input" required>
+</form>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples','100%',150)}}
+
+## Accessibilité
+
+Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.
+
+Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.
+
+- [Explications des recommendation 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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires                                                                  |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#selector-optional', ':optional')}}         | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                                          |
+| {{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}             | {{Spec2('HTML5 W3C')}}         | Définition de la sémantique relative à HTML et aux contraintes de validation. |
+| {{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}             | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                                          |
+| {{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional')}} | {{Spec2('CSS3 Basic UI')}} | Définition de la pseudo-classe mais sans la sémantique associée.              |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.optional")}}
+
+## Voir aussi
+
+- {{cssxref(":required")}}
+- {{cssxref(":invalid")}}
+- {{cssxref(":valid")}}
+- [La validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire)
diff --git a/files/fr/web/css/_colon_out-of-range/index.md b/files/fr/web/css/_colon_out-of-range/index.md
index 44486cf80d..f3fbbc575c 100644
--- a/files/fr/web/css/_colon_out-of-range/index.md
+++ b/files/fr/web/css/_colon_out-of-range/index.md
@@ -7,41 +7,44 @@ tags:
   - Reference
 translation_of: Web/CSS/:out-of-range
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:out-of-range</code></strong> cible un élément {{HTMLElement("input")}} lorsque la valeur de son attribut <code>value</code> est en dehors de l'intervalle autorisé par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}} attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:out-of-range`** cible un élément {{HTMLElement("input")}} lorsque la valeur de son attribut `value` est en dehors de l'intervalle autorisé par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}} attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; qui possède un */
+```css
+/* Cible n'importe quel élément <input> qui possède un */
 /* attribut range et que la valeur associée est en     */
 /* dehors de cet intervalle */
 input:out-of-range {
   background-color: rgba(255, 0, 0, 0.25);
-}</pre>
+}
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.</p>
-</div>
+> **Note :** Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;form action="" id="form1"&gt;
-  &lt;ul&gt;Les valeurs entre 1 et 10 sont autorisées.
-    &lt;li&gt;
-      &lt;input id="valeur1" name="valeur1" type="number" placeholder="1 à 10" min="1" max="10" value="12"&gt;
-      &lt;label for="valeur1"&gt;Votre valeur est &lt;/label&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/form&gt;</pre>
+```html
+<form action="" id="form1">
+  <ul>Les valeurs entre 1 et 10 sont autorisées.
+    <li>
+      <input id="valeur1" name="valeur1" type="number" placeholder="1 à 10" min="1" max="10" value="12">
+      <label for="valeur1">Votre valeur est </label>
+    </li>
+  </ul>
+</form>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css;">li {
+```css
+li {
   list-style: none;
   margin-bottom: 1em;
 }
@@ -65,43 +68,25 @@ input:in-range + label::after {
 
 input:out-of-range + label::after {
     content:'hors des limites !';
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples',600,140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition de la correspondance entre <code>:out-of-range</code> et les éléments HTML.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.out-of-range")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":in-range")}}</li>
- <li><a href="/fr/docs/Learn/Forms/Form_validation">Le guide de validation des données de formulaire</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples',600,140)}}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                 | Commentaires                                                                |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}} | {{Spec2('HTML WHATWG')}}     | Définition de la correspondance entre `:out-of-range` et les éléments HTML. |
+| {{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}                 | {{Spec2('CSS4 Selectors')}} | Définition initiale.                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.out-of-range")}}
+
+## Voir aussi
+
+- {{cssxref(":in-range")}}
+- [Le guide de validation des données de formulaire](/fr/docs/Learn/Forms/Form_validation)
diff --git a/files/fr/web/css/_colon_past/index.md b/files/fr/web/css/_colon_past/index.md
index cc8a1a3cae..46d313140c 100644
--- a/files/fr/web/css/_colon_past/index.md
+++ b/files/fr/web/css/_colon_past/index.md
@@ -1,66 +1,69 @@
 ---
 title: ':past'
-slug: 'Web/CSS/:past'
-browser-compat: css.selectors.past
+slug: Web/CSS/:past
 translation_of: Web/CSS/:past
+browser-compat: css.selectors.past
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Le sélecteur de <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>:past</code></strong> est une pseudo-classe agissant dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement avant un élément correspondant à {{cssxref(":current")}}. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a>.</p>
+Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:past`** est une pseudo-classe agissant dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement avant un élément correspondant à {{cssxref(":current")}}. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format [WebVTT](/fr/docs/Web/API/WebVTT_API).
 
-<pre class="brush: css">:past(p, span) {
+```css
+:past(p, span) {
   display: none;
-}</pre>
+}
+```
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="css">CSS</h3>
+### CSS
 
-<pre class="brush: css">:past(p, span) {
+```css
+:past(p, span) {
   display: none;
-}</pre>
+}
+```
 
-<h3 id="html">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;video controls preload="metadata"&gt;
-  &lt;source src="video.mp4" type="video/mp4" /&gt;
-  &lt;source src="video.webm" type="video/webm" /&gt;
-  &lt;track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default&gt;
-&lt;/video&gt;</pre>
+```html
+<video controls preload="metadata">
+  <source src="video.mp4" type="video/mp4" />
+  <source src="video.webm" type="video/webm" />
+  <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default>
+</video>
+```
 
-<h3 id="webvtt">WebVTT</h3>
+### WebVTT
 
-<pre>FICHIER WEBVTT
+    FICHIER WEBVTT
 
-1
-00:00:03.500 --&gt; 00:00:05.000
-Voici le premier sous-titre
+    1
+    00:00:03.500 --> 00:00:05.000
+    Voici le premier sous-titre
 
-2
-00:00:06.000 --&gt; 00:00:09.000
-Voici le second sous-titre
+    2
+    00:00:06.000 --> 00:00:09.000
+    Voici le second sous-titre
 
-3
-00:00:11.000 --&gt; 00:00:19.000
-Voici le troisième sous-titre
-</pre>
+    3
+    00:00:11.000 --> 00:00:19.000
+    Voici le troisième sous-titre
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li>
-  <li>{{cssxref(":current")}}</li>
-  <li>{{cssxref(":future")}}</li>
-</ul>
+- [Web Video Text Tracks Format (WebVTT)](/fr/docs/Web/API/WebVTT_API)
+- {{cssxref(":current")}}
+- {{cssxref(":future")}}
diff --git a/files/fr/web/css/_colon_placeholder-shown/index.md b/files/fr/web/css/_colon_placeholder-shown/index.md
index 93f571be8a..6bc13d87d0 100644
--- a/files/fr/web/css/_colon_placeholder-shown/index.md
+++ b/files/fr/web/css/_colon_placeholder-shown/index.md
@@ -1,93 +1,109 @@
 ---
 title: ':placeholder-shown'
-slug: 'Web/CSS/:placeholder-shown'
+slug: Web/CSS/:placeholder-shown
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:placeholder-shown'
+translation_of: Web/CSS/:placeholder-shown
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:placeholder-shown</code></strong> permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">un texte de substitution</a>.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:placeholder-shown`** permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant [un texte de substitution](/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute).
 
-<pre class="brush: css no-line-numbers">/* Cible tout élément &lt;input&gt; ou &lt;textarea&gt; avec un */
+```css
+/* Cible tout élément <input> ou <textarea> avec un */
 /* attribut placeholder actuellement affiché        */
 :placeholder-shown {
   border: 2px solid silver;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css hidden">input:-ms-input-placeholder {
+```css hidden
+input:-ms-input-placeholder {
   border-color: silver;
 }
 
 input:-moz-placeholder {
   border-color: silver;
-}</pre>
+}
+```
 
-<pre class="brush: css">input {
+```css
+input {
   border: 2px solid black;
   padding: 3px;
 }
 
 :placeholder-shown {
   border-color: silver;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;input placeholder="Saisir quelque chose ici"&gt;</pre>
+```html
+<input placeholder="Saisir quelque chose ici">
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 200, 60)}}</p>
+{{EmbedLiveSample("Exemples", 200, 60)}}
 
-<h3 id="Dépassement_du_texte">Dépassement du texte</h3>
+### Dépassement du texte
 
-<p>Sur certains écrans plus étroits (tels que ceux des smartphones), la largeur des boîtes de recherche et celle des champs de formulaire peut être réduite fortement. Le texte de substitution peut donc être tronqué de façon indésirable. On peut alors utiliser {{cssxref("text-overflow")}} pour gérer cela gracieusement.</p>
+Sur certains écrans plus étroits (tels que ceux des smartphones), la largeur des boîtes de recherche et celle des champs de formulaire peut être réduite fortement. Le texte de substitution peut donc être tronqué de façon indésirable. On peut alors utiliser {{cssxref("text-overflow")}} pour gérer cela gracieusement.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;input placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !"&gt;</pre>
+```html
+<input placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !">
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css hidden">input:-ms-input-placeholder {
+```css hidden
+input:-ms-input-placeholder {
   text-overflow: ellipsis;
 }
 
 input:-moz-placeholder {
   text-overflow: ellipsis;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css">input:placeholder-shown {
+```css
+input:placeholder-shown {
   text-overflow: ellipsis;
-}</pre>
+}
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Dépassement_du_texte", 200, 60)}}</p>
+{{EmbedLiveSample("Dépassement_du_texte", 200, 60)}}
 
-<h3 id="Texte_coloré">Texte coloré</h3>
+### Texte coloré
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;input placeholder="Saisir quelque chose ici"&gt;</pre>
+```html
+<input placeholder="Saisir quelque chose ici">
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css hidden">input:-ms-input-placeholder {
+```css hidden
+input:-ms-input-placeholder {
   color: red;
   font-style: italic;
 }
@@ -95,41 +111,46 @@ input:-moz-placeholder {
 input:-moz-placeholder {
   color: red;
   font-style: italic;
-}</pre>
+}
+```
 
-<pre class="brush: css">input:placeholder-shown {
+```css
+input:placeholder-shown {
   color: red;
   font-style: italic;
 }
-</pre>
-
-<h4 id="Résultat_3">Résultat</h4>
-
-<p>{{EmbedLiveSample("Texte_coloré")}}</p>
-
-<h3 id="Champ_de_saisie_personnalisé">Champ de saisie personnalisé</h3>
-
-<h4 id="HTML_4">HTML</h4>
-
-<pre class="brush: html">&lt;form id="test"&gt;
-  &lt;p&gt;
-    &lt;label for="name"&gt;Enter Student Name:&lt;/label&gt;
-    &lt;input id="name" placeholder="Student Name"/&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="branch"&gt;Enter Student Branch:&lt;/label&gt;
-    &lt;input id="branch" placeholder="Student Branch"/&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="sid"&gt;Enter Student ID:&lt;/label&gt;
-    &lt;input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/&gt;
-  &lt;/p&gt;
-  &lt;input type="submit"/&gt;
-&lt;/form&gt;</pre>
-
-<h4 id="CSS_4">CSS</h4>
-
-<pre class="brush: css hidden">input.studentid:-ms-input-placeholder {
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Texte_coloré")}}
+
+### Champ de saisie personnalisé
+
+#### HTML
+
+```html
+<form id="test">
+  <p>
+    <label for="name">Enter Student Name:</label>
+    <input id="name" placeholder="Student Name"/>
+  </p>
+  <p>
+    <label for="branch">Enter Student Branch:</label>
+    <input id="branch" placeholder="Student Branch"/>
+  </p>
+  <p>
+    <label for="sid">Enter Student ID:</label>
+    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
+  </p>
+  <input type="submit"/>
+</form>
+```
+
+#### CSS
+
+```css hidden
+input.studentid:-ms-input-placeholder {
   background-color: yellow;
   color: red;
   font-style: italic;
@@ -139,9 +160,11 @@ input.studentid:-moz-placeholder {
   background-color: yellow;
   color: red;
   font-style: italic;
-}</pre>
+}
+```
 
-<pre class="brush: css">input {
+```css
+input {
   background-color: #E8E8E8;
   color: black;
 }
@@ -150,41 +173,27 @@ input.studentid:placeholder-shown {
   background-color: yellow;
   color: red;
   font-style: italic;
-}</pre>
-
-<h4 id="Résultat_4">Résultat</h4>
-
-<p>{{EmbedLiveSample("Champ_de_saisie_personnalisé", 200, 180)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.placeholder-shown")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("::placeholder")}}</li>
- <li>{{cssxref("::-moz-placeholder")}}</li>
- <li>{{HTMLElement("input")}}</li>
- <li>{{HTMLElement("textarea")}}</li>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li>
-</ul>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Champ_de_saisie_personnalisé", 200, 180)}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}} | {{Spec2("CSS4 Selectors")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.placeholder-shown")}}
+
+## Voir aussi
+
+- {{cssxref("::placeholder")}}
+- {{cssxref("::-moz-placeholder")}}
+- {{HTMLElement("input")}}
+- {{HTMLElement("textarea")}}
+- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
diff --git a/files/fr/web/css/_colon_read-only/index.md b/files/fr/web/css/_colon_read-only/index.md
index 41a0a4a663..cc5e2f5a73 100644
--- a/files/fr/web/css/_colon_read-only/index.md
+++ b/files/fr/web/css/_colon_read-only/index.md
@@ -1,17 +1,18 @@
 ---
 title: ':read-only'
-slug: 'Web/CSS/:read-only'
+slug: Web/CSS/:read-only
 tags:
   - CSS
   - Pseudo-classe
   - Refrence
-translation_of: 'Web/CSS/:read-only'
+translation_of: Web/CSS/:read-only
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:read-only</code></strong> permet de cibler un élément que l'utilisateur ne peut pas modifier (l'élément est en lecture seule).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:read-only`** permet de cibler un élément que l'utilisateur ne peut pas modifier (l'élément est en lecture seule).
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; */
+```css
+/* Cible n'importe quel élément <input> */
 /* en lecture seule */
 
 /* Firefox utilise un préfixe */
@@ -22,79 +23,58 @@ input:-moz-read-only {
 /* Blink/WebKit/Edge n'ont pas de préfixe */
 input:read-only {
   background-color: #ccc;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec {{htmlattrxref("readonly", "input")}}. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.</p>
-</div>
+> **Note :** Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec {{htmlattrxref("readonly", "input")}}. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input { min-width: 25em; }
+```css
+input { min-width: 25em; }
 input:-moz-read-only { background: cyan; }
 input:read-only { background: cyan; }
 
 p:-moz-read-only { background: lightgray; }
 p:read-only { background: lightgray; }
 p[contenteditable="true"] { color: blue; }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input type="text" value="Un champ en lecture seule" readonly /&gt;
-&lt;p contenteditable="true"&gt;
+```html
+<input type="text" value="Un champ en lecture seule" readonly />
+<p contenteditable="true">
   Essayez un peu d'éditer ce paragraphe.
-&lt;/p&gt;
-&lt;p&gt;
+</p>
+<p>
   Bonne chance pour celui-là !
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-read-only', ':read-only')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-read-only', ':read-only')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.read-only")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":read-write")}}</li>
- <li>L'attribut HTML {{htmlattrxref("contenteditable")}}</li>
-</ul>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                 | Commentaires                                                                  |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#selector-read-only', ':read-only')}} | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                                          |
+| {{SpecName('HTML5 W3C', '#selector-read-only', ':read-only')}} | {{Spec2('HTML5 W3C')}}         | Définition de la sémantique relative à HTML et aux contraintes de validation. |
+| {{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only')}}     | {{Spec2('CSS4 Selectors')}} | Définition de la pseudo-classe mais pas de la sémantique associée.            |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.read-only")}}
+
+## Voir aussi
+
+- {{cssxref(":read-write")}}
+- L'attribut HTML {{htmlattrxref("contenteditable")}}
diff --git a/files/fr/web/css/_colon_read-write/index.md b/files/fr/web/css/_colon_read-write/index.md
index 9dc879a98d..3837a4e300 100644
--- a/files/fr/web/css/_colon_read-write/index.md
+++ b/files/fr/web/css/_colon_read-write/index.md
@@ -1,17 +1,18 @@
 ---
 title: ':read-write'
-slug: 'Web/CSS/:read-write'
+slug: Web/CSS/:read-write
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:read-write'
+translation_of: Web/CSS/:read-write
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:read-write</code></strong> permet de cibler un élément lorsque celui-ci peut être édité par l'utilisateur (par exemple les champs texte d'un formulaire ou les éléments {{HTMLElement("textarea")}}).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:read-write`** permet de cibler un élément lorsque celui-ci peut être édité par l'utilisateur (par exemple les champs texte d'un formulaire ou les éléments {{HTMLElement("textarea")}}).
 
-<pre class="brush: css no-line-numbers">/* Cible tout élément éditable */
+```css
+/* Cible tout élément éditable */
 /* Pris en charge dans Firefox avec un préfixe */
 input:-moz-read-write {
   background-color: #ccc;
@@ -20,75 +21,54 @@ input:-moz-read-write {
 /* Pris en charge sans préfixe pour Blink/WebKit/Edge */
 input:read-write {
   background-color: #ccc;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Ce sélecteur ne sélectionne pas que les champs de saisie textuels ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}). Il permet de sélectionner n'importe quel élément qui peut être édité par l'utilisateur (par exemple un élément {{htmlelement("p")}} avec un attribut {{htmlattrxref("contenteditable")}}).</p>
-</div>
+> **Note :** Ce sélecteur ne sélectionne pas que les champs de saisie textuels ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}). Il permet de sélectionner n'importe quel élément qui peut être édité par l'utilisateur (par exemple un élément {{htmlelement("p")}} avec un attribut {{htmlattrxref("contenteditable")}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css line-numbers  language-css">input { min-width: 25em; }
+```css
+input { min-width: 25em; }
 input:-moz-read-write { background: cyan; }
 input:read-write { background: cyan; }
 
 p:-moz-read-write { background: lightgray; }
 p:read-write { background: lightgray; }
 p[contenteditable="true"] { color: blue; }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;input type="text" value="Un champ en lecture seule"/&gt;
-&lt;p contenteditable&gt;Essayez un peu d'éditer ce paragraphe.&lt;/p&gt;
-&lt;p&gt;Bonne chance pour celui-là !&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-read-write', ':read-write')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-read-write', ':read-write')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.read-write")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":read-only")}}</li>
- <li>L'attribut HTML {{htmlattrxref("contenteditable")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<input type="text" value="Un champ en lecture seule"/>
+<p contenteditable>Essayez un peu d'éditer ce paragraphe.</p>
+<p>Bonne chance pour celui-là !</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                 | Commentaires                                                                  |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#selector-read-write', ':read-write')}} | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                                          |
+| {{SpecName('HTML5 W3C', '#selector-read-write', ':read-write')}}     | {{Spec2('HTML5 W3C')}}         | Définition de la sémantique relative à HTML et aux contraintes de validation. |
+| {{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write')}}         | {{Spec2('CSS4 Selectors')}} | Définition de la pseudo-classe mais pas de la sémantique associée.            |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.read-write")}}
+
+## Voir aussi
+
+- {{cssxref(":read-only")}}
+- L'attribut HTML {{htmlattrxref("contenteditable")}}
diff --git a/files/fr/web/css/_colon_required/index.md b/files/fr/web/css/_colon_required/index.md
index 2768e83a6f..591d2cc962 100644
--- a/files/fr/web/css/_colon_required/index.md
+++ b/files/fr/web/css/_colon_required/index.md
@@ -1,35 +1,36 @@
 ---
 title: ':required'
-slug: 'Web/CSS/:required'
+slug: Web/CSS/:required
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:required'
+translation_of: Web/CSS/:required
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:required</code></strong> permet de cibler un élément {{HTMLElement("input")}} pour lequel l'attribut {{htmlattrxref("required", "input")}} est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:required`** permet de cibler un élément {{HTMLElement("input")}} pour lequel l'attribut {{htmlattrxref("required", "input")}} est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.
 
-<pre class="brush: css no-line-numbers">/* Cible les éléments &lt;input&gt; qui ont */
+```css
+/* Cible les éléments <input> qui ont */
 /* l'attribut required */
 input:required {
   border: 1px dashed red;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> La pseudo-classe {{cssxref(":optional")}} pourra être utilisée pour mettre en forme les champs facultatifs.</p>
-</div>
+> **Note :** La pseudo-classe {{cssxref(":optional")}} pourra être utilisée pour mettre en forme les champs facultatifs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input {
+```css
+input {
   border-width: 3px;
 }
 input:optional {
@@ -37,82 +38,55 @@ input:optional {
 }
 input:required {
   border-color: #800000;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="url-input"&gt;Tapez une URL :&lt;/label&gt;
-  &lt;input type="url" id="url-input"&gt;
-  &lt;br&gt;
-  &lt;br&gt;
-  &lt;label for="email-input"&gt;Tapez une adresse courriel :&lt;/label&gt;
-  &lt;input type="email" id="email-input" required&gt;
-&lt;/form&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples','100%',150)}}</p>
-
-<p> </p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.</p>
-
-<p>Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.</p>
-
-<ul>
- <li><a href="/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">Explications des recommendation WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<p> </p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-required', ':required')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-required', ':required')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.required")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":optional")}}</li>
- <li>{{cssxref(":invalid")}}</li>
- <li>{{cssxref(":valid")}}</li>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données d'un formulaire</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<form>
+  <label for="url-input">Tapez une URL :</label>
+  <input type="url" id="url-input">
+  <br>
+  <br>
+  <label for="email-input">Tapez une adresse courriel :</label>
+  <input type="email" id="email-input" required>
+</form>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples','100%',150)}}
+
+
+
+## Accessibilité
+
+Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.
+
+Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.
+
+- [Explications des recommendation 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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+
+
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires                                                                  |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#selector-required', ':required')}}         | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                                          |
+| {{SpecName('HTML5 W3C', '#selector-required', ':required')}}             | {{Spec2('HTML5 W3C')}}         | Définition de la sémantique relative à HTML et aux contraintes de validation. |
+| {{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}             | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                                          |
+| {{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}} | {{Spec2('CSS3 Basic UI')}} | Définition de la pseudo-classe mais pas de la sémantique associée.            |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.required")}}
+
+## Voir aussi
+
+- {{cssxref(":optional")}}
+- {{cssxref(":invalid")}}
+- {{cssxref(":valid")}}
+- [La validation des données d'un formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire)
diff --git a/files/fr/web/css/_colon_right/index.md b/files/fr/web/css/_colon_right/index.md
index ecaaba1862..d869d73b36 100644
--- a/files/fr/web/css/_colon_right/index.md
+++ b/files/fr/web/css/_colon_right/index.md
@@ -1,71 +1,53 @@
 ---
 title: ':right'
-slug: 'Web/CSS/:right'
+slug: Web/CSS/:right
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:right'
+translation_of: Web/CSS/:right
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:right</code></strong>, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:right`**, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite.
 
-<pre class="brush: css no-line-numbers">/* Sélectionne le contenu des pages droites */
+```css
+/* Sélectionne le contenu des pages droites */
 /* lorsqu'on imprime le document */
 @page :right {
   margin: 2in 3in;
-}</pre>
+}
+```
 
-<p>La position de la page (à gauche ou à droite) dépend de la direction d'écriture appliquée au document. Si la première page est écrite de la gauche vers la droite, alors ce sera une page droite, sinon ce sera une page gauche (qui pourra alors être ciblée avec {{cssxref(":left")}}).</p>
+La position de la page (à gauche ou à droite) dépend de la direction d'écriture appliquée au document. Si la première page est écrite de la gauche vers la droite, alors ce sera une page droite, sinon ce sera une page gauche (qui pourra alors être ciblée avec {{cssxref(":left")}}).
 
-<div class="note">
-  <p><strong>Note :</strong> Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} <strong>de la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.</p>
-</div>
+> **Note :** Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} **de la boîte correspondant à la page** peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">@page :right {
+```css
+@page :right {
   margin: 2cm 3cm;
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':right')}}</td>
-   <td>{{Spec2('CSS3 Paged Media')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':right')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Paged Media', '#left-right-first', ':right')}} | {{Spec2('CSS3 Paged Media')}} | Aucune modification. |
+| {{SpecName('CSS2.1', 'page.html#page-selectors', ':right')}}     | {{Spec2('CSS2.1')}}                 | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.right")}}</p>
+{{Compat("css.selectors.right")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("@page")}}</li>
- <li>{{cssxref(":first")}}</li>
- <li>{{cssxref(":left")}}</li>
-</ul>
+- {{cssxref("@page")}}
+- {{cssxref(":first")}}
+- {{cssxref(":left")}}
diff --git a/files/fr/web/css/_colon_root/index.md b/files/fr/web/css/_colon_root/index.md
index c570e7fd8e..ea0786bc53 100644
--- a/files/fr/web/css/_colon_root/index.md
+++ b/files/fr/web/css/_colon_root/index.md
@@ -1,60 +1,46 @@
 ---
 title: ':root'
-slug: 'Web/CSS/:root'
+slug: Web/CSS/:root
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:root'
+translation_of: Web/CSS/:root
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:root</code></strong> permet de cibler la racine de l'arbre représentant le document. Pour un document HTML, <code>:root</code> ciblera donc l'élément {{HTMLElement("html")}} et aura le même comportement que le sélecteur <code>html</code> mais <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Le_poids_des_sélecteurs">sa spécificité</a> sera plus forte.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:root`** permet de cibler la racine de l'arbre représentant le document. Pour un document HTML, `:root` ciblera donc l'élément {{HTMLElement("html")}} et aura le même comportement que le sélecteur `html` mais [sa spécificité](/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Le_poids_des_sélecteurs) sera plus forte.
 
-<pre class="brush: css no-line-numbers">/* Sélectionne l'élément racine du document */
-/* Pour un document HTML, c'est &lt;html&gt; */
+```css
+/* Sélectionne l'élément racine du document */
+/* Pour un document HTML, c'est <html> */
 :root {
   background: yellow;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p><code>:root</code> peut être utile lorsqu'on déclare <a href="/fr/docs/Web/CSS/--*">des propriétés CSS personnalisées globales</a> :</p>
+`:root` peut être utile lorsqu'on déclare [des propriétés CSS personnalisées globales](/fr/docs/Web/CSS/--*) :
 
-<pre class="brush: css">:root {
+```css
+:root {
   --main-color: hotpink;
   --pane-padding: 5px 42px;
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.root")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                            | État                                 | Commentaires         |
+| ------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. |
+| {{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.root")}}
diff --git a/files/fr/web/css/_colon_scope/index.md b/files/fr/web/css/_colon_scope/index.md
index 3b260fd2a9..3998e5a5ee 100644
--- a/files/fr/web/css/_colon_scope/index.md
+++ b/files/fr/web/css/_colon_scope/index.md
@@ -1,82 +1,73 @@
 ---
 title: ':scope'
-slug: 'Web/CSS/:scope'
+slug: Web/CSS/:scope
 tags:
   - CSS
   - Experimental
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:scope'
+translation_of: Web/CSS/:scope
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:scope</code></strong> correspond aux éléments qui sont un point de référence pour faire correspondre les sélecteurs.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:scope`** correspond aux éléments qui sont un point de référence pour faire correspondre les sélecteurs.
 
-<pre class="brush: css">/* Sélectionne un élément dans la portée */
+```css
+/* Sélectionne un élément dans la portée */
 :scope {
   background-color: lime;
-}</pre>
+}
+```
 
-<p>À l'heure actuelle, lorsqu'elle est utilisée dans une feuille de style, <code>:scope</code> est identique à {{cssxref(":root")}} car il n'existe pas de moyen pour identifier un élément dont la portée est restreinte. Lorsqu'elle est utilisée à travers des méthodes telles que {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}} ou {{domxref("Element.closest()")}}, <code>:scope</code> correspond à l'élément sur lequel la méthode est appelée.</p>
+À l'heure actuelle, lorsqu'elle est utilisée dans une feuille de style, `:scope` est identique à {{cssxref(":root")}} car il n'existe pas de moyen pour identifier un élément dont la portée est restreinte. Lorsqu'elle est utilisée à travers des méthodes telles que {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}} ou {{domxref("Element.closest()")}}, `:scope` correspond à l'élément sur lequel la méthode est appelée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on voit comment utiliser <code>:scope</code> via la méthode {{domxref("Element.matches()")}}.</p>
+Dans cet exemple, on voit comment utiliser `:scope` via la méthode {{domxref("Element.matches()")}}.
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">let paragraphe = document.getElementById("para");
+```js
+let paragraphe = document.getElementById("para");
 let output = document.getElementById("output");
 
 if (paragraphe.matches(":scope")) {
   output.innerText = "Oui l'élément est dans sa propre portée, comme attendu !";
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p id="para"&gt;
+```html
+<p id="para">
   Voici un paragraphe, pas vraiment intéressant mais bon.
-&lt;/p&gt;
-&lt;p id="output"&gt;&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<div>{{EmbedLiveSample('Exemples')}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.scope")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> {{cssxref(":root")}}</li>
- <li><a href="/fr/docs/Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs">Localiser des éléments du DOM grâce aux sélecteurs</a></li>
- <li>{{domxref("Element.querySelector()")}} et {{domxref("Element.querySelectorAll()")}}</li>
- <li>{{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
- <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
- <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
-</ul>
+</p>
+<p id="output"></p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                    | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope')}} | {{Spec2('CSS4 Selectors')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.scope")}}
+
+## Voir aussi
+
+- La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) {{cssxref(":root")}}
+- [Localiser des éléments du DOM grâce aux sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs)
+- {{domxref("Element.querySelector()")}} et {{domxref("Element.querySelectorAll()")}}
+- {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}
+- {{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}
+- {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}
diff --git a/files/fr/web/css/_colon_target-within/index.md b/files/fr/web/css/_colon_target-within/index.md
index 6da19d0862..83508162f1 100644
--- a/files/fr/web/css/_colon_target-within/index.md
+++ b/files/fr/web/css/_colon_target-within/index.md
@@ -1,54 +1,57 @@
 ---
 title: ':target-within'
 slug: Web/CSS/:target-within
+translation_of: Web/CSS/:target-within
 browser-compat: css.selectors.target-within
-translation_of: 'Web/CSS/:target-within'
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>:target-within</code></strong> représente un élément ciblé ou qui <em>contient</em> un élément ciblé. Un élément ciblé est un élément unique disposant d'un <code><a href="/fr/docs/Web/HTML/Global_attributes#attr-id">id</a></code> correspondant au fragment de l'URL. En d'autres termes, il représente un élément qui correspond lui-même à la pseudo-classe {{CSSxRef(":target")}} ou qui a un descendant correspondant à <code>:target</code> (cela inclut les descendants des <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">arbres fantômes</a>).</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:target-within`** représente un élément ciblé ou qui _contient_ un élément ciblé. Un élément ciblé est un élément unique disposant d'un [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id) correspondant au fragment de l'URL. En d'autres termes, il représente un élément qui correspond lui-même à la pseudo-classe {{CSSxRef(":target")}} ou qui a un descendant correspondant à `:target` (cela inclut les descendants des [arbres fantômes](/fr/docs/Web/Web_Components/Using_shadow_DOM)).
 
-<pre class="brush: css no-line-numbers">/* Sélectionne une &lt;div&gt; lorsqu'un de ses descendants est une cible */
+```css
+/* Sélectionne une <div> lorsqu'un de ses descendants est une cible */
 div:target-within {
   background: cyan;
 }
-</pre>
+```
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<p>{{CSSSyntax}}</p>
+{{CSSSyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="highlighting_an_article">Mise en avant d'un article</h3>
+### Mise en avant d'un article
 
-<p>La pseudo-classe <code>:target-within</code> peut être utilisée pour mettre en avant un article si quoi que ce soit dans son contenu a été mis en lien. La pseudo-classe <code>:target</code> est aussi utilisée pour montrer l'élément qui a été ciblé.</p>
+La pseudo-classe `:target-within` peut être utilisée pour mettre en avant un article si quoi que ce soit dans son contenu a été mis en lien. La pseudo-classe `:target` est aussi utilisée pour montrer l'élément qui a été ciblé.
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h3&gt;Table des matières&lt;/h3&gt;
-&lt;ol&gt;
- &lt;li&gt;&lt;a href="#p1"&gt;Aller au premier paragraphe !&lt;/a&gt;&lt;/li&gt;
- &lt;li&gt;&lt;a href="#p2"&gt;Aller au second paragraphe !&lt;/a&gt;&lt;/li&gt;
-&lt;/ol&gt;
+```html
+<h3>Table des matières</h3>
+<ol>
+ <li><a href="#p1">Aller au premier paragraphe !</a></li>
+ <li><a href="#p2">Aller au second paragraphe !</a></li>
+</ol>
 
-&lt;article&gt;
-  &lt;h3&gt;Mon bel article&lt;/h3&gt;
-  &lt;p id="p1"&gt;Vous pouvez cibler &lt;i&gt;ce paragraphe&lt;/i&gt; en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !&lt;/p&gt;
-  &lt;p id="p2"&gt;Ceci est &lt;i&gt;un autre paragraphe&lt;/i&gt;, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?&lt;/p&gt;
-&lt;/article&gt;
-</pre>
+<article>
+  <h3>Mon bel article</h3>
+  <p id="p1">Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !</p>
+  <p id="p2">Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?</p>
+</article>
+```
 
-<h4 id="css">CSS</h4>
+#### CSS
 
-<pre class="brush: css">article:target-within {
+```css
+article:target-within {
   background-color: gold;
 }
 
 /* Ajout d'un pseudo élément à l'intérieur de l'élément cible */
 p:target::before {
   font: 70% sans-serif;
-  content: &quot;►&quot;;
+  content: "►";
   color: limegreen;
   margin-right: .25em;
 }
@@ -56,22 +59,21 @@ p:target::before {
 /* Style des éléments en italique à l'intérieur de l'élément cible */
 p:target i {
   color: red;
-}</pre>
+}
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<div>{{EmbedLiveSample('examples', 500, 300)}}</div>
+{{EmbedLiveSample('examples', 500, 300)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{CSSxRef(":target")}}</li>
-</ul>
+- {{CSSxRef(":target")}}
diff --git a/files/fr/web/css/_colon_target/index.md b/files/fr/web/css/_colon_target/index.md
index 183349cc73..5d3ca51a11 100644
--- a/files/fr/web/css/_colon_target/index.md
+++ b/files/fr/web/css/_colon_target/index.md
@@ -1,43 +1,46 @@
 ---
 title: ':target'
-slug: 'Web/CSS/:target'
+slug: Web/CSS/:target
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:target'
+translation_of: Web/CSS/:target
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:target</code></strong> permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:target`** permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document.
 
-<pre class="brush: css no-line-numbers">/* Cible un élément dont l'identifiant      */
+```css
+/* Cible un élément dont l'identifiant      */
 /* correspond au fragment de l'URL courante */
 :target {
   border: 2px solid black;
-}</pre>
+}
+```
 
-<p>Les URI comportant des fragments d'identifiant peuvent être utilisées pour créer des liens vers un élément donné d'un document qu'on appellera l'élément cible (<em>target element</em>). Voici un exemple d'URI qui pointe vers une <em>ancre</em> intitulée <code>section2</code> :</p>
+Les URI comportant des fragments d'identifiant peuvent être utilisées pour créer des liens vers un élément donné d'un document qu'on appellera l'élément cible (_target element_). Voici un exemple d'URI qui pointe vers une _ancre_ intitulée `section2` :
 
-<pre>http://exemple.com/chemin/document.html#section2</pre>
+    http://exemple.com/chemin/document.html#section2
 
-<p>L'élément suivant sera donc ciblé par le sélecteur <code>:target</code> avec l'URL précédente :</p>
+L'élément suivant sera donc ciblé par le sélecteur `:target` avec l'URL précédente :
 
-<pre class="brush: html">&lt;section id="section2"&gt;Exemple&lt;/section&gt;</pre>
+```html
+<section id="section2">Exemple</section>
+```
 
-<div class="note">
-  <p><strong>Note :</strong> L'attribut <code>id</code> a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, <code>&lt;a&gt;</code> était nécessairement l'élément cible. La pseudo-classe <code>:target</code> permet également de gérer ces cibles.</p>
-</div>
+> **Note :** L'attribut `id` a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, `<a>` était nécessairement l'élément cible. La pseudo-classe `:target` permet également de gérer ces cibles.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemples_simples">Exemples simples</h3>
+### Exemples simples
 
-<pre class="brush:css">/* Exemple de code pouvant être utilisé dans une feuille
+```css
+/* Exemple de code pouvant être utilisé dans une feuille
    de style utilisateur. Une flèche rouge/jaune indique
    l'élément cible. */
 
@@ -56,44 +59,48 @@ translation_of: 'Web/CSS/:target'
   margin-right:   0.13em;
   vertical-align: 20%;
 }
-</pre>
+```
 
-<h3 id="Manipuler_les_éléments_avec_display_none">Manipuler les éléments avec <code>display: none</code></h3>
+### Manipuler les éléments avec `display: none`
 
-<p>La pseudo-classe <code>:target</code> s'accommode également des éléments qui ne sont pas affichés.</p>
+La pseudo-classe `:target` s'accommode également des éléments qui ne sont pas affichés.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#newcomment {
+```css
+#newcomment {
   display: none;
 }
 
 #newcomment:target {
   display: block;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;&lt;a href="#newcomment"&gt;Ajouter un commentaire&lt;/a&gt;&lt;/p&gt;
-&lt;div id="newcomment"&gt;
-  &lt;form&gt;
-  &lt;p&gt;Saisir un commentaire :&lt;br /&gt;
-  &lt;textarea&gt;&lt;/textarea&gt;&lt;/p&gt;
-  &lt;/form&gt;
-&lt;/div&gt;
-</pre>
+```html
+<p><a href="#newcomment">Ajouter un commentaire</a></p>
+<div id="newcomment">
+  <form>
+  <p>Saisir un commentaire :<br />
+  <textarea></textarea></p>
+  </form>
+</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Manipuler_les_éléments_avec_display:_none")}}</p>
+{{EmbedLiveSample("Manipuler_les_éléments_avec_display:_none")}}
 
-<h3 id="Révéler_des_éléments">Révéler des éléments</h3>
+### Révéler des éléments
 
-<p><code>:target</code> peut être utile afin de révéler/masquer certains éléments invisibles.</p>
+`:target` peut être utile afin de révéler/masquer certains éléments invisibles.
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div.lightbox {
+```css
+div.lightbox {
   display: none;
   position: fixed;
   left: 0;
@@ -173,68 +180,48 @@ div.lightbox figure .closemsg, div.lightbox figure figcaption {
   height: 100%;
   background-color: #000000;
   opacity: 0.85;
-}</pre>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;p&gt;Un texte pour l'exemple&amp;hellip;&lt;/p&gt;
-&lt;p&gt;[ &lt;a href="#exemple1"&gt;Ouvrir l'exemple n°1&lt;/a&gt; | &lt;a href="#exemple2"&gt; Ouvrir l'exemple n°2&lt;/a&gt; ]&lt;/p&gt;
-&lt;p&gt;Un autre texte pour l'exemple&amp;hellip;&lt;/p&gt;
-&lt;div class="lightbox" id="exemple1"&gt;
-  &lt;figure&gt;
-    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
-    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.&lt;br /&gt;
-    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.&lt;/figcaption&gt;
-  &lt;/figure&gt;
-&lt;/div&gt;
-
-&lt;div class="lightbox" id="exemple2"&gt;
-  &lt;figure&gt;
-    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
-    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.&lt;/figcaption&gt;
-  &lt;/figure&gt;
-&lt;/div&gt;</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Révéler_des_éléments")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition de la sémantique relative à HTML.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
-   <td>{{Spec2("CSS3 Selectors")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.target")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors">Utiliser la pseudo-classe <code>:target</code> dans les sélecteurs</a></li>
- <li><a href="https://madmurphy.github.io/takefive.css/">Un exemple d'utilisation de <code>:target</code> pour un système de diapositives, sur GitHub</a></li>
-</ul>
+}
+```
+
+#### HTML
+
+```html
+<p>Un texte pour l'exemple&hellip;</p>
+<p>[ <a href="#exemple1">Ouvrir l'exemple n°1</a> | <a href="#exemple2"> Ouvrir l'exemple n°2</a> ]</p>
+<p>Un autre texte pour l'exemple&hellip;</p>
+<div class="lightbox" id="exemple1">
+  <figure>
+    <a href="#" class="closemsg"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.<br />
+    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="exemple2">
+  <figure>
+    <a href="#" class="closemsg"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.</figcaption>
+  </figure>
+</div>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Révéler_des_éléments")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires                                 |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------------------------------- |
+| {{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}} | {{Spec2("HTML WHATWG")}}     | Définition de la sémantique relative à HTML. |
+| {{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}             | {{Spec2("CSS4 Selectors")}} | Aucune modification.                         |
+| {{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}                 | {{Spec2("CSS3 Selectors")}} | Définition initiale.                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.target")}}
+
+## Voir aussi
+
+- [Utiliser la pseudo-classe `:target` dans les sélecteurs](/fr/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors)
+- [Un exemple d'utilisation de `:target` pour un système de diapositives, sur GitHub](https://madmurphy.github.io/takefive.css/)
diff --git a/files/fr/web/css/_colon_user-invalid/index.md b/files/fr/web/css/_colon_user-invalid/index.md
index 4fe074a4d4..a393bc9ef6 100644
--- a/files/fr/web/css/_colon_user-invalid/index.md
+++ b/files/fr/web/css/_colon_user-invalid/index.md
@@ -9,41 +9,37 @@ tags:
 translation_of: Web/CSS/:user-invalid
 original_slug: Web/CSS/:-moz-ui-invalid
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>La pseudo-classe <strong><code>:-moz-ui-invalid</code></strong> représente n'importe quel élément de formulaire dont la valeur est invalide selon <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">ses contraintes de validation</a>.</p>
+La pseudo-classe **`:-moz-ui-invalid`** représente n'importe quel élément de formulaire dont la valeur est invalide selon [ses contraintes de validation](/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation).
 
-<p>Cette pseudo-classe est appliquée d'après les règles suivantes :</p>
+Cette pseudo-classe est appliquée d'après les règles suivantes :
 
-<ul>
- <li>Si le contrôle n'a pas le focus et que cette valeur est invalide, la pseudo-classe est appliquée.</li>
- <li>Si le contrôle a le focus et que la valeur était valide (même si elle était vide) lorsque le focus a été obtenu, la pseudo-classe n'est pas appliquée.</li>
- <li>Si le contrôle a le focus et que la valeur était invalide lorsque le focus a été obtenu, on revalide le contenu à chaque frappe.</li>
- <li>Si l'élément est obligatoire, les règles précédentes ne s'appliquent que si l'utilisateur a modifié la valeur ou tenté de soumettre le formulaire.</li>
-</ul>
+- Si le contrôle n'a pas le focus et que cette valeur est invalide, la pseudo-classe est appliquée.
+- Si le contrôle a le focus et que la valeur était valide (même si elle était vide) lorsque le focus a été obtenu, la pseudo-classe n'est pas appliquée.
+- Si le contrôle a le focus et que la valeur était invalide lorsque le focus a été obtenu, on revalide le contenu à chaque frappe.
+- Si l'élément est obligatoire, les règles précédentes ne s'appliquent que si l'utilisateur a modifié la valeur ou tenté de soumettre le formulaire.
 
-<p>Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.</p>
+Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.
 
-<p>Par défaut, Gecko applique un style qui crée un halo rouge (grâce à {{cssxref("box-shadow")}}) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe {{cssxref(":invalid")}}.</p>
+Par défaut, Gecko applique un style qui crée un halo rouge (grâce à {{cssxref("box-shadow")}}) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe {{cssxref(":invalid")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-ui-invalid")}}</p>
+{{Compat("css.selectors.-moz-ui-invalid")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":valid")}}</li>
- <li>{{cssxref(":invalid")}}</li>
- <li>{{cssxref(":required")}}</li>
- <li>{{cssxref(":optional")}}</li>
- <li>{{cssxref(":-moz-ui-valid")}}</li>
-</ul>
+- {{cssxref(":valid")}}
+- {{cssxref(":invalid")}}
+- {{cssxref(":required")}}
+- {{cssxref(":optional")}}
+- {{cssxref(":-moz-ui-valid")}}
diff --git a/files/fr/web/css/_colon_valid/index.md b/files/fr/web/css/_colon_valid/index.md
index 31ab4fd0a7..95688d6f31 100644
--- a/files/fr/web/css/_colon_valid/index.md
+++ b/files/fr/web/css/_colon_valid/index.md
@@ -1,31 +1,34 @@
 ---
 title: ':valid'
-slug: 'Web/CSS/:valid'
+slug: Web/CSS/:valid
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:valid'
+translation_of: Web/CSS/:valid
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:valid</code></strong> permet de cibler tout élément {{HTMLElement("input")}} ou {{HTMLElement("form")}} dont la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation</a> du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:valid`** permet de cibler tout élément {{HTMLElement("input")}} ou {{HTMLElement("form")}} dont la [validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.
 
-<pre class="brush: css no-line-numbers">input:valid {
+```css
+input:valid {
   background-color: #ddffdd;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple présente un formulaire dont les éléments se colorent en vert lorsqu'ils sont valides et en rouge lorsqu'ils sont invalides.</p>
+Cet exemple présente un formulaire dont les éléments se colorent en vert lorsqu'ils sont valides et en rouge lorsqu'ils sont invalides.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input:invalid {
+```css
+input:invalid {
   background-color: #ffdddd;
 }
 
@@ -48,71 +51,49 @@ input:required {
 
 input:required:valid {
   border-color: #008000;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;label&gt;Veuillez saisir une URL :&lt;/label&gt;
-  &lt;input type="url"&gt;
-  &lt;br&gt;
-  &lt;br&gt;
-  &lt;label&gt;Veuillez saisir une adresse électronique :&lt;/label&gt;
-  &lt;input type="email" required&gt;
-&lt;/form&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples',600,150)}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.</p>
-
-<ul>
- <li><a href="/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">Explications des recommendation WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.valid")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":invalid")}}</li>
- <li>{{cssxref(":required")}}</li>
- <li>{{cssxref(":optional")}}</li>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données d'un formulaire</a></li>
- <li><a href="/fr/docs/Web/API/ValidityState">Accéder à l'état de validité en JavaScript</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<form>
+  <label>Veuillez saisir une URL :</label>
+  <input type="url">
+  <br>
+  <br>
+  <label>Veuillez saisir une adresse électronique :</label>
+  <input type="email" required>
+</form>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples',600,150)}}
+
+## Accessibilité
+
+La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.
+
+- [Explications des recommendation 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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+
+## Spécifications
+
+| Spécification                                                                    | État                                 | Commentaires                                                                  |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}     | {{Spec2('HTML WHATWG')}}     | Aucune modification.                                                          |
+| {{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}         | {{Spec2('HTML5 W3C')}}         | Définition de la sémantique relative à HTML et aux contraintes de validation. |
+| {{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                                          |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.valid")}}
+
+## Voir aussi
+
+- {{cssxref(":invalid")}}
+- {{cssxref(":required")}}
+- {{cssxref(":optional")}}
+- [La validation des données d'un formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire)
+- [Accéder à l'état de validité en JavaScript](/fr/docs/Web/API/ValidityState)
diff --git a/files/fr/web/css/_colon_visited/index.md b/files/fr/web/css/_colon_visited/index.md
index 4bb1cd4122..2de38cc227 100644
--- a/files/fr/web/css/_colon_visited/index.md
+++ b/files/fr/web/css/_colon_visited/index.md
@@ -1,111 +1,82 @@
 ---
 title: ':visited'
-slug: 'Web/CSS/:visited'
+slug: Web/CSS/:visited
 tags:
   - CSS
   - Pseudo-classe
   - Reference
-translation_of: 'Web/CSS/:visited'
+translation_of: Web/CSS/:visited
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:visited</code></strong> permet de modifier l'aspect d'un lien après que l'utilisateur l'a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:visited`** permet de modifier l'aspect d'un lien après que l'utilisateur l'a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.
 
-<pre class="brush: css no-line-numbers">a:visited {
+```css
+a:visited {
   color: #4b2f89;
-}</pre>
+}
+```
 
-<p>Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : <code>:visited</code> doit être utilisée après une règle basée sur <code>:link</code>, mais avant les autres  (<code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>).</p>
+Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : `:visited` doit être utilisée après une règle basée sur `:link`, mais avant les autres  (`:link` — `:visited` — `:hover` — `:active`).
 
-<h2 id="Restrictions">Restrictions</h2>
+## Restrictions
 
-<p>Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe :</p>
+Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe :
 
-<ul>
- <li>Les propriétés CSS autorisées sont  {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("outline-color")}}, {{cssxref("column-rule-color")}}</li>
- <li>Les attributs SVG autorisés sont {{SVGAttr("fill")}} and {{SVGAttr("stroke")}}.</li>
- <li>La composante alpha sera ignorée : la composante alpha d'un lien non-visité est utilisé à la place (sauf quand l'opacité est <code>0</code>, dans ce cas, toute la couleur est ignorée, ainsi que celle de la règle non-visité).</li>
- <li>Bien qu'on puisse modifier la couleur d'un lien, la méthode {{domxref("window.getComputedStyle")}} mentira et indiquera toujours la valeur de la couleur de la règle pour les liens non-visités.</li>
-</ul>
+- Les propriétés CSS autorisées sont  {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("outline-color")}}, {{cssxref("column-rule-color")}}
+- Les attributs SVG autorisés sont {{SVGAttr("fill")}} and {{SVGAttr("stroke")}}.
+- La composante alpha sera ignorée : la composante alpha d'un lien non-visité est utilisé à la place (sauf quand l'opacité est `0`, dans ce cas, toute la couleur est ignorée, ainsi que celle de la règle non-visité).
+- Bien qu'on puisse modifier la couleur d'un lien, la méthode {{domxref("window.getComputedStyle")}} mentira et indiquera toujours la valeur de la couleur de la règle pour les liens non-visités.
 
-<p>Pour d'autres informations sur ces limitations et leurs raisons d'être, se référer à l 'article <a href="/fr/docs/Web/CSS/:visited_et_la_vie_privée">Vie privée et le sélecteur <code>:visited</code></a>.</p>
+Pour d'autres informations sur ces limitations et leurs raisons d'être, se référer à l 'article [Vie privée et le sélecteur `:visited`](/fr/docs/Web/CSS/:visited_et_la_vie_privée).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">a:visited { color: #00ff00; }</pre>
+```css
+a:visited { color: #00ff00; }
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;&lt;a href="https://developer.mozilla.org/fr/docs/Web/CSS/:visited"&gt;
+```html
+<p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/:visited">
   Cette page est visitée
-&lt;/a&gt;&lt;/p&gt;
-&lt;p&gt;&lt;a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/"&gt;
+</a></p>
+<p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/">
   Essayez celle-ci peut-être ?
-&lt;/a&gt;&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#link', ':visited')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#link', ':visited')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Suppression de la restriction limitant son usage à l'élément {{HTMLElement("a")}}. Permission donnée aux navigateurs de limiter le comportement de cette pseudo-classe pour des questions de vie privée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':visited')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.visited")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Privacy_and_the_:visited_selector">Vie privée et le sélecteur <code>:visited</code></a></li>
- <li>Les pseudo-classes relatives aux liens :
-  <ul>
-   <li>{{cssxref(":link")}},</li>
-   <li>{{cssxref(":visited")}},</li>
-   <li>{{cssxref(":hover")}},</li>
-   <li>{{cssxref(":active")}}.</li>
-  </ul>
- </li>
-</ul>
+</a></p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires                                                                                                                                                                                                     |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited')}} | {{Spec2('HTML WHATWG')}}     |                                                                                                                                                                                                                  |
+| {{SpecName('CSS4 Selectors', '#link', ':visited')}}                                 | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                                                                                                                                                                             |
+| {{SpecName('CSS3 Selectors', '#link', ':visited')}}                                 | {{Spec2('CSS3 Selectors')}} | Aucune modification.                                                                                                                                                                                             |
+| {{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited')}}     | {{Spec2('CSS2.1')}}             | Suppression de la restriction limitant son usage à l'élément {{HTMLElement("a")}}. Permission donnée aux navigateurs de limiter le comportement de cette pseudo-classe pour des questions de vie privée. |
+| {{SpecName('CSS1', '#anchor-pseudo-classes', ':visited')}}                         | {{Spec2('CSS1')}}             | Définition initiale.                                                                                                                                                                                             |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.visited")}}
+
+## Voir aussi
+
+- [Vie privée et le sélecteur `:visited`](/fr/docs/Web/CSS/Privacy_and_the_:visited_selector)
+- Les pseudo-classes relatives aux liens :
+
+  - {{cssxref(":link")}},
+  - {{cssxref(":visited")}},
+  - {{cssxref(":hover")}},
+  - {{cssxref(":active")}}.
diff --git a/files/fr/web/css/_colon_where/index.md b/files/fr/web/css/_colon_where/index.md
index 3e9f501aba..2ebec4bdd2 100644
--- a/files/fr/web/css/_colon_where/index.md
+++ b/files/fr/web/css/_colon_where/index.md
@@ -1,50 +1,35 @@
 ---
 title: ':where()'
-slug: 'Web/CSS/:where'
+slug: Web/CSS/:where
 tags:
   - CSS
   - Experimental
   - Pseudo-classe
   - Reference
   - Sélecteur
-translation_of: 'Web/CSS/:where'
+translation_of: Web/CSS/:where
 ---
-<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{Draft}}{{SeeCompatTable}}
 
-<p>La pseudo-classe fonctionnelle <strong><code>:where()</code></strong> prend comme argument une liste de sélecteurs et cible tout élément qui peut être sélectionné par l'un des sélecteurs de la liste.</p>
+La pseudo-classe fonctionnelle **`:where()`** prend comme argument une liste de sélecteurs et cible tout élément qui peut être sélectionné par l'un des sélecteurs de la liste.
 
-<p>La différence entre <code>:where()</code> et {{CSSxRef(":is", ":is()")}} est la suivante : <code>:where()</code> aura toujours <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">une spécificité</a> nulle tandis que <code>:is()</code> prend la spécificité du sélecteur passé en argument le plus spécifique.</p>
+La différence entre `:where()` et {{CSSxRef(":is", ":is()")}} est la suivante : `:where()` aura toujours [une spécificité](/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité) nulle tandis que `:is()` prend la spécificité du sélecteur passé en argument le plus spécifique.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.where")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
- <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
-</ul>
+## Spécifications
+
+| Spécification                                                                    | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}} | {{Spec2("CSS4 Selectors")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.where")}}
+
+## Voir aussi
+
+- {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}
+- [Les composants web](/fr/docs/Web/Web_Components)
diff --git a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md
index c99555216a..6003a42e0c 100644
--- a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md
@@ -1,58 +1,54 @@
 ---
 title: '::-moz-color-swatch'
-slug: 'Web/CSS/::-moz-color-swatch'
+slug: Web/CSS/::-moz-color-swatch
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-moz-color-swatch'
+translation_of: Web/CSS/::-moz-color-swatch
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::-moz-color-swatch</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_Mozilla">un pseudo-élément spécifique à Mozilla</a> qui représente la couleur sélectionnée d'un élément {{HTMLElement("input")}} avec <code>type="color"</code>.</p>
+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::-moz-color-swatch`** est [un pseudo-élément spécifique à Mozilla](/fr/docs/Web/CSS/Extensions_Mozilla) qui représente la couleur sélectionnée d'un élément {{HTMLElement("input")}} avec `type="color"`.
 
-<div class="note">
-<p><strong>Note :</strong> Utiliser <code>::-moz-color-swatch</code> sur tout autre élément qu'un  <code>&lt;input type="color"&gt;</code> n'aura aucun effet.</p>
-</div>
+> **Note :** Utiliser `::-moz-color-swatch` sur tout autre élément qu'un  `<input type="color">` n'aura aucun effet.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input type="color" value="#de2020"/&gt;
-</pre>
+```html
+<input type="color" value="#de2020"/>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input[type=color]::-moz-color-swatch {
+```css
+input[type=color]::-moz-color-swatch {
   border-radius: 10px;
   border-style: none;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+{{EmbedLiveSample("Exemples", 300, 50)}}
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<p>Ce pseudo-élément est spécifique à Gecko et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est spécifique à Gecko et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-color-swatch")}}</p>
+{{Compat("css.selectors.-moz-color-swatch")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les pseudo-éléments semblables utilisés par les autres navigateurs :
-  <ul>
-   <li>{{cssxref("::-webkit-color-swatch")}} pris en charge par WebKit et Blink (utilisés par Safari, Chrome et Opera)</li>
-  </ul>
- </li>
-</ul>
+- Les pseudo-éléments semblables utilisés par les autres navigateurs :
+
+  - {{cssxref("::-webkit-color-swatch")}} pris en charge par WebKit et Blink (utilisés par Safari, Chrome et Opera)
diff --git a/files/fr/web/css/_doublecolon_-moz-page-sequence/index.md b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.md
index 908a8e6ed7..f096fba911 100644
--- a/files/fr/web/css/_doublecolon_-moz-page-sequence/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.md
@@ -1,32 +1,30 @@
 ---
 title: '::-moz-page-sequence'
-slug: 'Web/CSS/::-moz-page-sequence'
+slug: Web/CSS/::-moz-page-sequence
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-moz-page-sequence'
+translation_of: Web/CSS/::-moz-page-sequence
 ---
-<div>{{CSSRef}}{{non-standard_header}}</div>
+{{CSSRef}}{{non-standard_header}}
 
-<p>Le pseudo-élément <code>::-moz-page-sequence</code>, spécifique à Mozilla, représente l'arrière-plan du document lors de la prévisualisation avant une impression.</p>
+Le pseudo-élément `::-moz-page-sequence`, spécifique à Mozilla, représente l'arrière-plan du document lors de la prévisualisation avant une impression.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-page-sequence")}}</p>
+{{Compat("css.selectors.-moz-page-sequence")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("::-moz-page")}}</li>
- <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li>
-</ul>
+- {{cssxref("::-moz-page")}}
+- {{cssxref("::-moz-scrolled-page-sequence")}}
diff --git a/files/fr/web/css/_doublecolon_-moz-page/index.md b/files/fr/web/css/_doublecolon_-moz-page/index.md
index 3cd419c099..8187f599fc 100644
--- a/files/fr/web/css/_doublecolon_-moz-page/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-page/index.md
@@ -1,32 +1,30 @@
 ---
 title: '::-moz-page'
-slug: 'Web/CSS/::-moz-page'
+slug: Web/CSS/::-moz-page
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-moz-page'
+translation_of: Web/CSS/::-moz-page
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> CSS <code>::-moz-page</code>, spécifique à Mozilla, est appliqué aux pages individuelles dans les impressions ou les aperçus avant impression.</p>
+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-éléments) CSS `::-moz-page`, spécifique à Mozilla, est appliqué aux pages individuelles dans les impressions ou les aperçus avant impression.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-page")}}</p>
+{{Compat("css.selectors.-moz-page")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("::-moz-page-sequence")}}</li>
- <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li>
-</ul>
+- {{cssxref("::-moz-page-sequence")}}
+- {{cssxref("::-moz-scrolled-page-sequence")}}
diff --git a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.md b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.md
index 51dc574676..717f75667b 100644
--- a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.md
@@ -1,47 +1,49 @@
 ---
 title: '::-moz-progress-bar'
-slug: 'Web/CSS/::-moz-progress-bar'
+slug: Web/CSS/::-moz-progress-bar
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-moz-progress-bar'
+translation_of: Web/CSS/::-moz-progress-bar
 ---
-<div>{{Non-standard_header}}{{CSSRef}}</div>
+{{Non-standard_header}}{{CSSRef}}
 
-<p>Le pseudo-élément <strong><code>::-moz-progress-bar</code></strong> s'appliquant à la zone d'élément HTML {{HTMLElement("progress")}} représente la valeur de la progression effectuée jusqu'à présent. Vous pourrez par exemple, modifier la couleur de la barre de progression.</p>
+Le pseudo-élément **`::-moz-progress-bar`** s'appliquant à la zone d'élément HTML {{HTMLElement("progress")}} représente la valeur de la progression effectuée jusqu'à présent. Vous pourrez par exemple, modifier la couleur de la barre de progression.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#redbar::-moz-progress-bar {
+```css
+#redbar::-moz-progress-bar {
   background-color: red;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html;">&lt;progress id="redbar" value="30" max="100"&gt;30 %&lt;/progress&gt;</pre>
+```html
+<progress id="redbar" value="30" max="100">30 %</progress>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("progress")}}</li>
- <li>{{cssxref("::-ms-fill")}}</li>
- <li>{{cssxref("::-webkit-progress-bar")}}</li>
- <li>{{cssxref("::-webkit-progress-value")}}</li>
- <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
-</ul>
+- {{HTMLElement("progress")}}
+- {{cssxref("::-ms-fill")}}
+- {{cssxref("::-webkit-progress-bar")}}
+- {{cssxref("::-webkit-progress-value")}}
+- {{cssxref("::-webkit-progress-inner-element")}}
diff --git a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md
index b4f123f2fb..1b7167364e 100644
--- a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md
@@ -1,67 +1,63 @@
 ---
 title: '::-moz-range-progress'
-slug: 'Web/CSS/::-moz-range-progress'
+slug: Web/CSS/::-moz-range-progress
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-moz-range-progress'
+translation_of: Web/CSS/::-moz-range-progress
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-moz-range-progress</code></strong> représente la portion de la piste d'un élément {{HTMLElement("input")}} de type <code>range</code>, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur.</p>
+Le pseudo-élément **`::-moz-range-progress`** représente la portion de la piste d'un élément {{HTMLElement("input")}} de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur.
 
-<div class="note">
-<p><strong>Note :</strong> Si <code>::-moz-range-progress</code> est utilisé sur autre chose qu'un élément <code>&lt;input type="range"&gt;</code>, il n'aura aucun effet.</p>
-</div>
+> **Note :** Si `::-moz-range-progress` est utilisé sur autre chose qu'un élément `<input type="range">`, il n'aura aucun effet.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input[type=range]::-moz-range-progress {
+```css
+input[type=range]::-moz-range-progress {
   background-color: green;
   height: 1em;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
-</pre>
+```html
+<input type="range" min="0" max="100" step="5" value="50"/>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+{{EmbedLiveSample("Exemples", 300, 50)}}
 
-<p>Une barre de progression mise en forme avec cette déclaration devrait ressembler à :</p>
+Une barre de progression mise en forme avec cette déclaration devrait ressembler à :
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/12041/Screen%20Shot%202015-12-04%20at%2020.14.48.png"></p>
+![](https://mdn.mozillademos.org/files/12041/Screen%20Shot%202015-12-04%20at%2020.14.48.png)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-range-progress")}}</p>
+{{Compat("css.selectors.-moz-range-progress")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` :
 
-  <ul>
-   <li>{{cssxref("::-moz-range-thumb")}}</li>
-   <li>{{cssxref("::-moz-range-track")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("::-ms-fill-upper")}} pris en charge par Internet Explorer et Ege</li>
- <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
- <li><a href="https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode : Mettre en forme les pistes et curseurs</a></li>
-</ul>
+  - {{cssxref("::-moz-range-thumb")}}
+  - {{cssxref("::-moz-range-track")}}
+
+- {{cssxref("::-ms-fill-upper")}} pris en charge par Internet Explorer et Ege
+- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
+- [QuirksMode : Mettre en forme les pistes et curseurs](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html)
diff --git a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md
index 2b64feb5a9..d1a2f98238 100644
--- a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md
@@ -1,71 +1,66 @@
 ---
 title: '::-moz-range-thumb'
-slug: 'Web/CSS/::-moz-range-thumb'
+slug: Web/CSS/::-moz-range-thumb
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-moz-range-thumb'
+translation_of: Web/CSS/::-moz-range-thumb
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-moz-range-thumb</code></strong> représente le curseur qui se déplace le long de la piste dans un élément {{HTMLElement("input")}} de type <code>range</code> et qui permet de modifier la valeur numérique associée.</p>
+Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se déplace le long de la piste dans un élément {{HTMLElement("input")}} de type `range` et qui permet de modifier la valeur numérique associée.
 
-<div class="note">
-<p><strong>Note :</strong> Utiliser <code>::-moz-range-thumb</code> avec un autre élément que  <code>&lt;input type="range"&gt;</code> n'aura aucun effet.</p>
-</div>
+> **Note :** Utiliser `::-moz-range-thumb` avec un autre élément que  `<input type="range">` n'aura aucun effet.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input[type=range]::-moz-range-thumb {
+```css
+input[type=range]::-moz-range-thumb {
   background-color: green;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
-</pre>
+```html
+<input type="range" min="0" max="100" step="5" value="50"/>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+{{EmbedLiveSample("Exemples", 300, 50)}}
 
-<p>Une barre de progression mise en forme avec ces règles devrait ressembler à :</p>
+Une barre de progression mise en forme avec ces règles devrait ressembler à :
 
-<p><img alt="The thumb of the &lt;input type=right> styled in green" src="https://mdn.mozillademos.org/files/12027/Screen%20Shot%202015-12-04%20at%2013.30.08.png"></p>
+![The thumb of the <input type=right> styled in green](https://mdn.mozillademos.org/files/12027/Screen%20Shot%202015-12-04%20at%2013.30.08.png)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-range-thumb")}}</p>
+{{Compat("css.selectors.-moz-range-thumb")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` :
 
-  <ul>
-   <li>{{cssxref("::-moz-range-track")}}</li>
-   <li>{{cssxref("::-moz-range-progress")}}</li>
-  </ul>
- </li>
- <li>Les pseudo-éléments utilisés par les autres navigateurs :
-  <ul>
-   <li>{{cssxref("::-webkit-slider-thumb")}} pour WebKit/Blink (Safari, Chrome et Opera).</li>
-   <li>{{cssxref("::-ms-thumb")}} pour Internet Explorer/Edge.</li>
-  </ul>
- </li>
- <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
- <li><a href="https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode : Mettre en forme les pistes et curseurs</a></li>
-</ul>
+  - {{cssxref("::-moz-range-track")}}
+  - {{cssxref("::-moz-range-progress")}}
+
+- Les pseudo-éléments utilisés par les autres navigateurs :
+
+  - {{cssxref("::-webkit-slider-thumb")}} pour WebKit/Blink (Safari, Chrome et Opera).
+  - {{cssxref("::-ms-thumb")}} pour Internet Explorer/Edge.
+
+- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
+- [QuirksMode : Mettre en forme les pistes et curseurs](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html)
diff --git a/files/fr/web/css/_doublecolon_-moz-range-track/index.md b/files/fr/web/css/_doublecolon_-moz-range-track/index.md
index f8fd1cce12..440c9bde5e 100644
--- a/files/fr/web/css/_doublecolon_-moz-range-track/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-range-track/index.md
@@ -1,70 +1,65 @@
 ---
 title: '::-moz-range-track'
-slug: 'Web/CSS/::-moz-range-track'
+slug: Web/CSS/::-moz-range-track
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-moz-range-track'
+translation_of: Web/CSS/::-moz-range-track
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-moz-range-track</code></strong> est un pseudo-élément spsécifique à Mozilla et représente la piste d'un élément {{HTMLElement("input")}} de type <code>range</code>.</p>
+Le pseudo-élément **`::-moz-range-track`** est un pseudo-élément spsécifique à Mozilla et représente la piste d'un élément {{HTMLElement("input")}} de type `range`.
 
-<div class="note">
-<p><strong>Note :</strong> <code>::-moz-range-track</code> n'aura aucun effet s'il est utilisé sur autre chose qu'un élément <code>&lt;input type="range"&gt;</code>.</p>
-</div>
+> **Note :** `::-moz-range-track` n'aura aucun effet s'il est utilisé sur autre chose qu'un élément `<input type="range">`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input[type=range]::-moz-range-track {
+```css
+input[type=range]::-moz-range-track {
   background-color: green;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
-</pre>
+```html
+<input type="range" min="0" max="100" step="5" value="50"/>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+{{EmbedLiveSample("Exemples", 300, 50)}}
 
-<p>Une barre de progression mise en forme de cette façon devrait ressembler à :</p>
+Une barre de progression mise en forme de cette façon devrait ressembler à :
 
-<p><img alt="A range with the track green." src="https://mdn.mozillademos.org/files/11999/Screen%20Shot%202015-12-04%20at%2010.14.34.png"></p>
+![A range with the track green.](https://mdn.mozillademos.org/files/11999/Screen%20Shot%202015-12-04%20at%2010.14.34.png)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-range-track")}}</p>
+{{Compat("css.selectors.-moz-range-track")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` :
 
-  <ul>
-   <li>{{cssxref("::-moz-range-thumb")}} qui représente le curseur qui se déplace le long de la piste.</li>
-   <li>{{cssxref("::-moz-range-progress")}} qui représente la partie inférieure de la piste (ce qui est déjà « couvert »).</li>
-  </ul>
- </li>
- <li>Les pseudo-éléments utilisés par les autres navigateurs :
-  <ul>
-   <li>{{cssxref("::-webkit-slider-runnable-track")}} pour WebKit/Blink (Safari, Chrome et Opera).</li>
-   <li>{{cssxref("::-ms-track")}} pour Internet Explorer/Edge.</li>
-  </ul>
- </li>
- <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
-</ul>
+  - {{cssxref("::-moz-range-thumb")}} qui représente le curseur qui se déplace le long de la piste.
+  - {{cssxref("::-moz-range-progress")}} qui représente la partie inférieure de la piste (ce qui est déjà « couvert »).
+
+- Les pseudo-éléments utilisés par les autres navigateurs :
+
+  - {{cssxref("::-webkit-slider-runnable-track")}} pour WebKit/Blink (Safari, Chrome et Opera).
+  - {{cssxref("::-ms-track")}} pour Internet Explorer/Edge.
+
+- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
diff --git a/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md b/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md
index 7fea3ec964..1c1b441c7b 100644
--- a/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.md
@@ -1,32 +1,30 @@
 ---
 title: '::-moz-scrolled-page-sequence'
-slug: 'Web/CSS/::-moz-scrolled-page-sequence'
+slug: Web/CSS/::-moz-scrolled-page-sequence
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-moz-scrolled-page-sequence'
+translation_of: Web/CSS/::-moz-scrolled-page-sequence
 ---
-<div>{{CSSRef}}{{non-standard_header}}</div>
+{{CSSRef}}{{non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-moz-scrolled-page-sequence</code></strong> est un pseudo-élément spécifique à Mozilla et représente l'arrière-plan de la prévisualisation de l'impression.</p>
+Le pseudo-élément **`::-moz-scrolled-page-sequence`** est un pseudo-élément spécifique à Mozilla et représente l'arrière-plan de la prévisualisation de l'impression.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-moz-scrolled-page-sequence")}}</p>
+{{Compat("css.selectors.-moz-scrolled-page-sequence")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("::-moz-page")}}</li>
- <li>{{cssxref("::-moz-page-sequence")}}</li>
-</ul>
+- {{cssxref("::-moz-page")}}
+- {{cssxref("::-moz-page-sequence")}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md
index e8230dce99..3c000979d9 100644
--- a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md
@@ -1,46 +1,47 @@
 ---
 title: '::-webkit-inner-spin-button'
-slug: 'Web/CSS/::-webkit-inner-spin-button'
+slug: Web/CSS/::-webkit-inner-spin-button
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-inner-spin-button'
+translation_of: Web/CSS/::-webkit-inner-spin-button
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-inner-spin-button</code></strong> permet de mettre en forme la partie intérieure de la roulette qui permet de choisir la valeur d'un élément {{HTMLElement("input")}} de type <code>number</code>.</p>
+Le pseudo-élément **`::-webkit-inner-spin-button`** permet de mettre en forme la partie intérieure de la roulette qui permet de choisir la valeur d'un élément {{HTMLElement("input")}} de type `number`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input[type=number]::-webkit-inner-spin-button {
+```css
+input[type=number]::-webkit-inner-spin-button {
   cursor: pointer;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input type="number"&gt;
-</pre>
+```html
+<input type="number">
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', 200, 30)}}</p>
+{{EmbedLiveSample('Exemples', 200, 30)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-inner-spin-button")}}</p>
+{{Compat("css.selectors.-webkit-inner-spin-button")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("::-webkit-outer-spin-button")}}</li>
- <li>{{cssxref("::-webkit-textfield-decoration-container")}}</li>
- <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement">Mettre en forme les contrôles de formulaires  – WebKit (en anglais)</a></li>
-</ul>
+- {{cssxref("::-webkit-outer-spin-button")}}
+- {{cssxref("::-webkit-textfield-decoration-container")}}
+- [Mettre en forme les contrôles de formulaires  – WebKit (en anglais)](https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement)
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md
index 0700be99b5..cc2773837c 100644
--- a/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.md
@@ -1,22 +1,23 @@
 ---
 title: '::-webkit-meter-bar'
-slug: 'Web/CSS/::-webkit-meter-bar'
+slug: Web/CSS/::-webkit-meter-bar
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-meter-bar'
+translation_of: Web/CSS/::-webkit-meter-bar
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-meter-bar</code></strong> est un pseudo-élément spécifique à WebKit et permet de mettre en forme l'arrière-plan d'un élément {{HTMLElement("meter")}}.</p>
+Le pseudo-élément **`::-webkit-meter-bar`** est un pseudo-élément spécifique à WebKit et permet de mettre en forme l'arrière-plan d'un élément {{HTMLElement("meter")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">meter {
+```css
+meter {
    /* On réinitialise l'apparence par défaut */
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -27,40 +28,36 @@ meter::-webkit-meter-bar  {
   background: #eee;
   box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset;
   border-radius: 3px;
-}</pre>
+}
+```
+
+### HTML
 
-<h3 id="HTML">HTML</h3>
+```html
+<meter min="0" max="10" value="6">Score sur 10</meter>
+```
 
-<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score sur 10&lt;/meter&gt;</pre>
+### Résultat
 
-<h3 id="Résultat">Résultat</h3>
+{{EmbedLiveSample('Exemples')}}
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+> **Note :** Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.
 
-<div class="note">
-<p><strong>Note :</strong> Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.</p>
-</div>
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.selectors.-webkit-meter-bar")}}
 
-<p>{{Compat("css.selectors.-webkit-meter-bar")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :
 
-<ul>
- <li>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :
-  <ul>
-   <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
-   <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
-   <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
-   <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
-  </ul>
- </li>
- <li><a href="/fr/docs/Web/CSS/Webkit_Extensions">Les extensions CSS WebKit</a></li>
-</ul>
+  - {{cssxref("::-webkit-meter-inner-element")}}
+  - {{cssxref("::-webkit-meter-even-less-good-value")}}
+  - {{cssxref("::-webkit-meter-optimum-value")}}
+  - {{cssxref("::-webkit-meter-suboptimum-value")}}
 
-<p> </p>
+- [Les extensions CSS WebKit](/fr/docs/Web/CSS/Webkit_Extensions)
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
index e9736324a9..fdd97574b4 100644
--- a/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md
@@ -1,54 +1,54 @@
 ---
 title: '::-webkit-meter-even-less-good-value'
-slug: 'Web/CSS/::-webkit-meter-even-less-good-value'
+slug: Web/CSS/::-webkit-meter-even-less-good-value
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-meter-even-less-good-value'
+translation_of: Web/CSS/::-webkit-meter-even-less-good-value
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-meter-even-less-good-value</code></strong> donne une couleur rouge à l'élément {{HTMLElement("meter")}} lorsque les valeurs de <code>value</code> et d'optimum sont dans des intervalles opposés (par exemple : <code>value</code> &lt; <code>low</code> &lt; <code>high</code> &lt; <code>optimum</code> ou <code>value</code> &gt; <code>high</code> &gt; <code>low</code> &gt; <code>optimum</code>).</p>
+Le pseudo-élément **`::-webkit-meter-even-less-good-value`** donne une couleur rouge à l'élément {{HTMLElement("meter")}} lorsque les valeurs de `value` et d'optimum sont dans des intervalles opposés (par exemple : `value` < `low` < `high` < `optimum` ou `value` > `high` > `low` > `optimum`).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">meter::-webkit-meter-even-less-good-value {
+```css
+meter::-webkit-meter-even-less-good-value {
   background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
   height: 100%;
   box-sizing: border-box;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+```html
+<meter min="0" max="10" value="6">Score out of 10</meter>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '100%', 50)}}</p>
+{{EmbedLiveSample('Exemples', '100%', 50)}}
 
-<div class="note">
-<p><strong>Note :</strong> Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.</p>
-</div>
+> **Note :** Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-meter-even-less-good-value")}}</p>
+{{Compat("css.selectors.-webkit-meter-even-less-good-value")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :
 
-<ul>
- <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
- <li>{{cssxref("::-webkit-meter-bar")}}</li>
- <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
- <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
-</ul>
+- {{cssxref("::-webkit-meter-inner-element")}}
+- {{cssxref("::-webkit-meter-bar")}}
+- {{cssxref("::-webkit-meter-optimum-value")}}
+- {{cssxref("::-webkit-meter-suboptimum-value")}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md
index 3ae9405761..28d971f409 100644
--- a/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.md
@@ -1,22 +1,23 @@
 ---
 title: '::-webkit-meter-inner-element'
-slug: 'Web/CSS/::-webkit-meter-inner-element'
+slug: Web/CSS/::-webkit-meter-inner-element
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-meter-inner-element'
+translation_of: Web/CSS/::-webkit-meter-inner-element
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-meter-inner-element</code></strong> est un pseudo-élément qui permet de sélectionner et d'appliquer des styles au conteneur d'un élément {{htmlelement("meter")}}.</p>
+Le pseudo-élément **`::-webkit-meter-inner-element`** est un pseudo-élément qui permet de sélectionner et d'appliquer des styles au conteneur d'un élément {{htmlelement("meter")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">meter {
+```css
+meter {
   /* Réinitialise l'apparence par défaut */
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -27,35 +28,34 @@ meter::-webkit-meter-inner-element {
   -webkit-appearance: inherit;
   box-sizing: inherit;
   border: 1px solid #aaa;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+```html
+<meter min="0" max="10" value="6">Score out of 10</meter>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '100%', 50)}}</p>
+{{EmbedLiveSample('Exemples', '100%', 50)}}
 
-<div class="note">
-<p><strong>Note :</strong> Cela ne fonctionne que pour les navigateurs Webkit/Blink.</p>
-</div>
+> **Note :** Cela ne fonctionne que pour les navigateurs Webkit/Blink.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-meter-inner-element")}}</p>
+{{Compat("css.selectors.-webkit-meter-inner-element")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :
 
-<ul>
- <li>{{cssxref("::-webkit-meter-bar")}}</li>
- <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
- <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
- <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
-</ul>
+- {{cssxref("::-webkit-meter-bar")}}
+- {{cssxref("::-webkit-meter-even-less-good-value")}}
+- {{cssxref("::-webkit-meter-optimum-value")}}
+- {{cssxref("::-webkit-meter-suboptimum-value")}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md
index e8f23f94e6..ace0f0dc57 100644
--- a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md
@@ -1,22 +1,23 @@
 ---
 title: '::-webkit-meter-optimum-value'
-slug: 'Web/CSS/::-webkit-meter-optimum-value'
+slug: Web/CSS/::-webkit-meter-optimum-value
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-meter-optimum-value'
+translation_of: Web/CSS/::-webkit-meter-optimum-value
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-meter-optimum-value</code></strong> permet de mettre en forme l'élément {{HTMLElement("meter")}} lorsque la valeur de son attribut tombe dans l'intervalle haut. La couleur appliquée par défaut est le vert.</p>
+Le pseudo-élément **`::-webkit-meter-optimum-value`** permet de mettre en forme l'élément {{HTMLElement("meter")}} lorsque la valeur de son attribut tombe dans l'intervalle haut. La couleur appliquée par défaut est le vert.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">meter::-webkit-meter-bar {
+```css
+meter::-webkit-meter-bar {
   background : none;
   background-color : whiteSmoke;
   box-shadow : 0 5px 5px -5px #333 inset;
@@ -24,31 +25,32 @@ translation_of: 'Web/CSS/::-webkit-meter-optimum-value'
 
 meter::-webkit-meter-optimum-value {
   box-shadow: 0 5px 5px -5px #999 inset;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+```html
+<meter min="0" max="10" value="6">Score out of 10</meter>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Examples', '100%', 50)}}</p>
+{{EmbedLiveSample('Examples', '100%', 50)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-meter-optimum-value")}}</p>
+{{Compat("css.selectors.-webkit-meter-optimum-value")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :
 
-<ul>
- <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
- <li>{{cssxref("::-webkit-meter-bar")}}</li>
- <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
- <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
-</ul>
+- {{cssxref("::-webkit-meter-inner-element")}}
+- {{cssxref("::-webkit-meter-bar")}}
+- {{cssxref("::-webkit-meter-even-less-good-value")}}
+- {{cssxref("::-webkit-meter-suboptimum-value")}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
index 3700e1e859..b7b414c9a9 100644
--- a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md
@@ -1,54 +1,54 @@
 ---
 title: '::-webkit-meter-suboptimum-value'
-slug: 'Web/CSS/::-webkit-meter-suboptimum-value'
+slug: Web/CSS/::-webkit-meter-suboptimum-value
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-meter-suboptimum-value'
+translation_of: Web/CSS/::-webkit-meter-suboptimum-value
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-meter-suboptimum-value</code></strong> donne une couleur jaune à l'élément {{HTMLElement("meter")}} lorsque la valeur de l'attribut est en dehors de l'intervalle haut des valeurs.</p>
+Le pseudo-élément **`::-webkit-meter-suboptimum-value`** donne une couleur jaune à l'élément {{HTMLElement("meter")}} lorsque la valeur de l'attribut est en dehors de l'intervalle haut des valeurs.
 
-<h2 id="Exemples"><strong>Exemples</strong></h2>
+## **Exemples**
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">meter::-webkit-meter-suboptimum-value {
+```css
+meter::-webkit-meter-suboptimum-value {
   background: -webkit-gradient linear, left top, left bottom;
   height: 100%;
   box-sizing: border-box;
-}</pre>
+}
+```
 
-<h3 id="HTML"><strong>HTML</strong></h3>
+### **HTML**
 
-<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score sur 10&lt;/meter&gt;</pre>
+```html
+<meter min="0" max="10" value="6">Score sur 10</meter>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Examples', '100%', 50)}}</p>
+{{EmbedLiveSample('Examples', '100%', 50)}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonctionnalité ne sera visible que depuis un navigateur WebKit/Blink.</p>
-</div>
+> **Note :** Cette fonctionnalité ne sera visible que depuis un navigateur WebKit/Blink.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-meter-suboptimum-value")}}</p>
+{{Compat("css.selectors.-webkit-meter-suboptimum-value")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :
 
-<ul>
- <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
- <li>{{cssxref("::-webkit-meter-bar")}}</li>
- <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
- <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
-</ul>
+- {{cssxref("::-webkit-meter-inner-element")}}
+- {{cssxref("::-webkit-meter-bar")}}
+- {{cssxref("::-webkit-meter-even-less-good-value")}}
+- {{cssxref("::-webkit-meter-optimum-value")}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.md b/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.md
index 58b369dfdf..377583c4a5 100644
--- a/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.md
@@ -1,46 +1,47 @@
 ---
 title: '::-webkit-outer-spin-button'
-slug: 'Web/CSS/::-webkit-outer-spin-button'
+slug: Web/CSS/::-webkit-outer-spin-button
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-outer-spin-button'
+translation_of: Web/CSS/::-webkit-outer-spin-button
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-outer-spin-button</code></strong> peut être utilisé afin de mettre en forme la partie extérieure du sélecteur numérique utilisé pour les éléments {{HTMLElement("input")}} de type <code>number</code>.</p>
+Le pseudo-élément **`::-webkit-outer-spin-button`** peut être utilisé afin de mettre en forme la partie extérieure du sélecteur numérique utilisé pour les éléments {{HTMLElement("input")}} de type `number`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input::-webkit-outer-spin-button {
+```css
+input::-webkit-outer-spin-button {
   -webkit-appearance: none;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input type="number"&gt;
-</pre>
+```html
+<input type="number">
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 200, 30)}}</p>
+{{EmbedLiveSample("Exemples", 200, 30)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink, il ne fait partie d'aucune spécification standard.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink, il ne fait partie d'aucune spécification standard.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-outer-spin-button")}}</p>
+{{Compat("css.selectors.-webkit-outer-spin-button")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("::-webkit-inner-spin-button")}}</li>
- <li>{{cssxref("::-webkit-textfield-decoration-container")}}</li>
- <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement">Mettre en forme les contrôles des formulaires – WebKit (en anglais)</a></li>
-</ul>
+- {{cssxref("::-webkit-inner-spin-button")}}
+- {{cssxref("::-webkit-textfield-decoration-container")}}
+- [Mettre en forme les contrôles des formulaires – WebKit (en anglais)](https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement)
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md
index 9fc489d9c2..73bcfe23d6 100644
--- a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md
@@ -8,57 +8,54 @@ tags:
   - Reference
 translation_of: Web/CSS/::-webkit-progress-bar
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-progress-bar</code></strong> représente l'ensemble de la barre d'un élément {{HTMLElement("progress")}}. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément {{cssxref("::-webkit-progress-value")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-inner-element")}} et c'est le pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-value")}}.</p>
+Le pseudo-élément **`::-webkit-progress-bar`** représente l'ensemble de la barre d'un élément {{HTMLElement("progress")}}. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément {{cssxref("::-webkit-progress-value")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-inner-element")}} et c'est le pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-value")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("appearance")}} vaille <code>none</code> sur l'élément <code>&lt;progress&gt;</code>.</p>
-</div>
+> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("appearance")}} vaille `none` sur l'élément `<progress>`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">progress {
+```css
+progress {
   -webkit-appearance: none;
 }
 
 ::-webkit-progress-bar {
    background-color: orange;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;progress value="10" max="50"&gt;
-</pre>
+```html
+<progress value="10" max="50">
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+{{EmbedLiveSample("Exemples", 200, 50)}}
 
-<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p>
+Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :
 
-<p><img alt="" src="progress-bar.png"></p>
+![](progress-bar.png)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-progress-bar")}}</p>
+{{Compat("css.selectors.-webkit-progress-bar")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} :
-  <ul>
-   <li>{{cssxref("::-webkit-progress-value")}}</li>
-   <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("::-moz-progress-bar")}}</li>
- <li>{{cssxref("::-ms-fill")}}</li>
-</ul>
+- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} :
+
+  - {{cssxref("::-webkit-progress-value")}}
+  - {{cssxref("::-webkit-progress-inner-element")}}
+
+- {{cssxref("::-moz-progress-bar")}}
+- {{cssxref("::-ms-fill")}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md
index cfe8be136c..ac3b173d3c 100644
--- a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md
@@ -1,64 +1,61 @@
 ---
 title: '::-webkit-progress-inner-element'
-slug: 'Web/CSS/::-webkit-progress-inner-element'
+slug: Web/CSS/::-webkit-progress-inner-element
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-progress-inner-element'
+translation_of: Web/CSS/::-webkit-progress-inner-element
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-progress-inner-element</code></strong> représente le cadre extérieur de l'élément {{HTMLElement("progress")}}. C'est un pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.</p>
+Le pseudo-élément **`::-webkit-progress-inner-element`** représente le cadre extérieur de l'élément {{HTMLElement("progress")}}. C'est un pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille <code>none</code> sur l'élément <code>&lt;progress&gt;</code>.</p>
-</div>
+> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille `none` sur l'élément `<progress>`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">progress {
+```css
+progress {
   -webkit-appearance: none;
 }
 
 ::-webkit-progress-inner-element {
   border: 2px solid black;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;progress value="10" max="50"&gt;
-</pre>
+```html
+<progress value="10" max="50">
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+{{EmbedLiveSample("Exemples", 200, 50)}}
 
-<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p>
+Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13492/-webkit-progress-inner-element%20example.png"></p>
+![](https://mdn.mozillademos.org/files/13492/-webkit-progress-inner-element%20example.png)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-progress-inner-element")}}</p>
+{{Compat("css.selectors.-webkit-progress-inner-element")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}}
-  <ul>
-   <li>{{cssxref("::-webkit-progress-bar")}}</li>
-   <li>{{cssxref("::-webkit-progress-value")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("::-moz-progress-bar")}}</li>
- <li>{{cssxref("::-ms-fill")}}</li>
-</ul>
+- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}}
+
+  - {{cssxref("::-webkit-progress-bar")}}
+  - {{cssxref("::-webkit-progress-value")}}
+
+- {{cssxref("::-moz-progress-bar")}}
+- {{cssxref("::-ms-fill")}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md
index 91a831dcef..0b9d310140 100644
--- a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md
@@ -8,56 +8,54 @@ tags:
   - Reference
 translation_of: Web/CSS/::-webkit-progress-value
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-progress-value</code></strong> permet de représenter la portion « remplie » de la barre d'un élément {{HTMLElement("progress")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.</p>
+Le pseudo-élément **`::-webkit-progress-value`** permet de représenter la portion « remplie » de la barre d'un élément {{HTMLElement("progress")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille <code>none</code> sur l'élément <code>&lt;progress&gt;</code>.</p>
-</div>
+> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille `none` sur l'élément `<progress>`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">progress {
+```css
+progress {
   -webkit-appearance: none;
 }
 
 ::-webkit-progress-value {
   background-color: orange;
-}</pre>
+}
+```
+
+### HTML
+
+```html
+<progress value="10" max="50">
+```
 
-<h3 id="HTML">HTML</h3>
+### Résultat
 
-<pre class="brush: html">&lt;progress value="10" max="50"&gt;
-</pre>
+{{EmbedLiveSample("Exemples", 200, 50)}}
 
-<h3 id="Résultat">Résultat</h3>
+Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :
 
-<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+![](progress-value.png)
 
-<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p>
+## Spécifications
 
-<p><img alt="" src="progress-value.png"></p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Compatibilité des navigateurs
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+{{Compat("css.selectors.-webkit-progress-value")}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Voir aussi
 
-<p>{{Compat("css.selectors.-webkit-progress-value")}}</p>
+- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} :
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+  - {{cssxref("::-webkit-progress-bar")}}
+  - {{cssxref("::-webkit-progress-inner-element")}}
 
-<ul>
- <li>Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} :
-  <ul>
-   <li>{{cssxref("::-webkit-progress-bar")}}</li>
-   <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("::-moz-progress-bar")}}</li>
- <li>{{cssxref("::-ms-fill")}}</li>
-</ul>
+- {{cssxref("::-moz-progress-bar")}}
+- {{cssxref("::-ms-fill")}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.md b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.md
index 27ce824819..6f3c528d63 100644
--- a/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.md
@@ -1,38 +1,35 @@
 ---
 title: '::-webkit-scrollbar'
-slug: 'Web/CSS/::-webkit-scrollbar'
+slug: Web/CSS/::-webkit-scrollbar
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-scrollbar'
+translation_of: Web/CSS/::-webkit-scrollbar
 ---
-<div>{{Draft}}{{CSSRef}}{{Non-standard_header}}</div>
+{{Draft}}{{CSSRef}}{{Non-standard_header}}Le pseudo-élément **`::-webkit-scrollbar`** permet de modifier le style de la barre de défilement associée à un élément. Il s'agit d'un pseudo-élément propriétaire, uniquement disponible pour les navigateurs WebKit.
 
-<div>Le pseudo-élément <code><strong>::-webkit-scrollbar</strong></code> permet de modifier le style de la barre de défilement associée à un élément. Il s'agit d'un pseudo-élément propriétaire, uniquement disponible pour les navigateurs WebKit.</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Sélecteurs_de_scrollbars">Sélecteurs de <em>scrollbars</em></h2>
+## Sélecteurs de _scrollbars_
 
-<p>You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers:</p>
+You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers:
 
-<ul>
- <li><code>::-webkit-scrollbar</code> — la barre entière.</li>
- <li><code>::-webkit-scrollbar-button</code> — les boutons de la barre de défilement (les flèches vers le bas ou le haut)</li>
- <li><code>::-webkit-scrollbar-thumb</code> — l'emplacement qui permet de déplacer la barre de défilement.</li>
- <li><code>::-webkit-scrollbar-track</code> — la piste (la zone de progression) de la barre de défilement</li>
- <li><code>::-webkit-scrollbar-track-piece</code> — la partie de la piste qui n'est pas couverte par le bouton de la barre de défilement.</li>
- <li><code>::-webkit-scrollbar-corner</code> — le coin inférieur de la barre où les barres horizontales et verticales se rencontrent.</li>
- <li><code>::-webkit-resizer</code> — le bouton qui apparaît dans le coin inférieur de certains éléments et qui permet de les redimensionner.</li>
-</ul>
+- `::-webkit-scrollbar` — la barre entière.
+- `::-webkit-scrollbar-button` — les boutons de la barre de défilement (les flèches vers le bas ou le haut)
+- `::-webkit-scrollbar-thumb` — l'emplacement qui permet de déplacer la barre de défilement.
+- `::-webkit-scrollbar-track` — la piste (la zone de progression) de la barre de défilement
+- `::-webkit-scrollbar-track-piece` — la partie de la piste qui n'est pas couverte par le bouton de la barre de défilement.
+- `::-webkit-scrollbar-corner` — le coin inférieur de la barre où les barres horizontales et verticales se rencontrent.
+- `::-webkit-resizer` — le bouton qui apparaît dans le coin inférieur de certains éléments et qui permet de les redimensionner.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
+```css
+.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
   display: block;
   width: 10em;
   overflow: auto;
@@ -53,9 +50,10 @@ translation_of: 'Web/CSS/::-webkit-scrollbar'
 .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
     background: #000;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="visible-scrollbar"&gt;
+```html
+<div class="visible-scrollbar">
   Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
   Proin at nulla elementum, consectetur ex eget, commodo ante.
   Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
@@ -67,54 +65,52 @@ translation_of: 'Web/CSS/::-webkit-scrollbar'
   amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
   mattis cursus dolor. Pellentesque id pretium est. Quisque
   convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
-&lt;/div&gt;
-&lt;div class="invisible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
-&lt;div class="mostly-customized-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;br&gt;
-And pretty tall&lt;br&gt;
-thing with weird scrollbars.&lt;br&gt;
-Who thought scrollbars could be made weeeeird?&lt;/div&gt;
-</pre>
+</div>
+<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
+<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
+And pretty tall<br>
+thing with weird scrollbars.<br>
+Who thought scrollbars could be made weeeeird?</div>
+```
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="-webkit-scrollbar"><code>::-webkit-scrollbar</code></h3>
+### `::-webkit-scrollbar`
 
-<p>{{Compat("css.selectors.-webkit-scrollbar")}}</p>
+{{Compat("css.selectors.-webkit-scrollbar")}}
 
-<h3 id="-webkit-scrollbar-button"><code>::-webkit-scrollbar-button</code></h3>
+### `::-webkit-scrollbar-button`
 
-<p>{{Compat("css.selectors.-webkit-scrollbar-button")}}</p>
+{{Compat("css.selectors.-webkit-scrollbar-button")}}
 
-<h3 id="-webkit-scrollbar-thumb"><code>::-webkit-scrollbar-thumb</code></h3>
+### `::-webkit-scrollbar-thumb`
 
-<p>{{Compat("css.selectors.-webkit-scrollbar-thumb")}}</p>
+{{Compat("css.selectors.-webkit-scrollbar-thumb")}}
 
-<h3 id="-webkit-scrollbar-track"><code>::-webkit-scrollbar-track</code></h3>
+### `::-webkit-scrollbar-track`
 
-<p>{{Compat("css.selectors.-webkit-scrollbar-track")}}</p>
+{{Compat("css.selectors.-webkit-scrollbar-track")}}
 
-<h3 id="-webkit-scrollbar-track-piece"><code>::-webkit-scrollbar-track-piece</code></h3>
+### `::-webkit-scrollbar-track-piece`
 
-<p>{{Compat("css.selectors.-webkit-scrollbar-track-piece")}}</p>
+{{Compat("css.selectors.-webkit-scrollbar-track-piece")}}
 
-<h3 id="-webkit-scrollbar-corner"><code>::-webkit-scrollbar-corner</code></h3>
+### `::-webkit-scrollbar-corner`
 
-<p>{{Compat("css.selectors.-webkit-scrollbar-corner")}}</p>
+{{Compat("css.selectors.-webkit-scrollbar-corner")}}
 
-<h3 id="-webkit-resizer"><code>::-webkit-resizer</code></h3>
+### `::-webkit-resizer`
 
-<p>{{Compat("css.selectors.-webkit-resizer")}}</p>
+{{Compat("css.selectors.-webkit-resizer")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Billet du blog WebKit <a href="https://webkit.org/blog/363/styling-scrollbars/">sur la mise en forme des barres de défilement</a></li>
- <li>{{cssxref('-ms-overflow-style')}}</li>
- <li>{{CSSxRef("scrollbar-width")}}</li>
-</ul>
+- Billet du blog WebKit [sur la mise en forme des barres de défilement](https://webkit.org/blog/363/styling-scrollbars/)
+- {{cssxref('-ms-overflow-style')}}
+- {{CSSxRef("scrollbar-width")}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.md b/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.md
index 7859eca19f..d1760d7b96 100644
--- a/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.md
@@ -1,32 +1,30 @@
 ---
 title: '::-webkit-search-cancel-button'
-slug: 'Web/CSS/::-webkit-search-cancel-button'
+slug: Web/CSS/::-webkit-search-cancel-button
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-search-cancel-button'
+translation_of: Web/CSS/::-webkit-search-cancel-button
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-search-cancel-button</code></strong> représente le bouton d'annulation présenté au bout d'un champ {{HTMLElement("input")}} de type <code>search</code> et qui permet d'effacer la valeur actuellement saisie dans l'élément {{HTMLElement("input")}}. Ce bouton et ce pseudo-élément ne sont pas standards et ne sont pris en charge que par WebKit et Blink. Ce bouton est uniquement affiché pour les éléments {{HTMLElement("input")}} qui ne sont pas vides.</p>
+Le pseudo-élément **`::-webkit-search-cancel-button`** représente le bouton d'annulation présenté au bout d'un champ {{HTMLElement("input")}} de type `search` et qui permet d'effacer la valeur actuellement saisie dans l'élément {{HTMLElement("input")}}. Ce bouton et ce pseudo-élément ne sont pas standards et ne sont pris en charge que par WebKit et Blink. Ce bouton est uniquement affiché pour les éléments {{HTMLElement("input")}} qui ne sont pas vides.
 
-<h2 id="Syntaxe"><strong>Syntaxe</strong></h2>
+## **Syntaxe**
 
-<pre class="syntaxbox"> <em>selecteur</em>::-webkit-search-cancel-button</pre>
+     selecteur::-webkit-search-cancel-button
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-search-cancel-button")}}</p>
+{{Compat("css.selectors.-webkit-search-cancel-button")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref('::-ms-clear')}}</li>
- <li>{{cssxref('::-webkit-search-results-button')}}</li>
-</ul>
+- {{cssxref('::-ms-clear')}}
+- {{cssxref('::-webkit-search-results-button')}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.md b/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.md
index 4dc067866c..a18305eada 100644
--- a/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.md
@@ -1,31 +1,29 @@
 ---
 title: '::-webkit-search-results-button'
-slug: 'Web/CSS/::-webkit-search-results-button'
+slug: Web/CSS/::-webkit-search-results-button
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-search-results-button'
+translation_of: Web/CSS/::-webkit-search-results-button
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-search-results-button</code></strong> représente le bouton affiché sur le bord gauche d'un élément {{HTMLElement("input")}} de type <code>"search"</code> qui affiche un menu proposant les dernières recherches effectuées à l'utilisateur. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par WebKit/Blink. Le bouton des résultats de recherche est uniquement affiché pour les éléments {{HTMLElement("input")}} qui possèdent <a href="/fr/docs/Web/HTML/Element/Input">un attribut <code>r</code><code>esults</code></a>.</p>
+Le pseudo-élément **`::-webkit-search-results-button`** représente le bouton affiché sur le bord gauche d'un élément {{HTMLElement("input")}} de type `"search"` qui affiche un menu proposant les dernières recherches effectuées à l'utilisateur. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par WebKit/Blink. Le bouton des résultats de recherche est uniquement affiché pour les éléments {{HTMLElement("input")}} qui possèdent [un attribut ` r``esults `](/fr/docs/Web/HTML/Element/Input).
 
-<h2 id="Syntaxe"><strong>Syntaxe</strong></h2>
+## **Syntaxe**
 
-<pre class="syntaxbox"> <em>selecteur</em>::-webkit-search-results-button</pre>
+     selecteur::-webkit-search-results-button
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-search-results-button")}}</p>
+{{Compat("css.selectors.-webkit-search-results-button")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref('::-webkit-search-cancel-button')}}</li>
-</ul>
+- {{cssxref('::-webkit-search-cancel-button')}}
diff --git a/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.md b/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.md
index 288756a23b..a0ea432041 100644
--- a/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.md
@@ -1,33 +1,31 @@
 ---
 title: '::-webkit-slider-runnable-track'
-slug: 'Web/CSS/::-webkit-slider-runnable-track'
+slug: Web/CSS/::-webkit-slider-runnable-track
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-slider-runnable-track'
+translation_of: Web/CSS/::-webkit-slider-runnable-track
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-slider-runnable-track</code></strong> représente la piste utilisée par un élément {{HTMLElement("input")}} de type <code>"range"</code> (cf. {{HTMLElement("input/range", '&lt;input type="range"&gt;')}}).</p>
+Le pseudo-élément **`::-webkit-slider-runnable-track`** représente la piste utilisée par un élément {{HTMLElement("input")}} de type `"range"` (cf. {{HTMLElement("input/range", '&lt;input type="range"&gt;')}}).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<p>{{Compat("css.selectors.-webkit-slider-runnable-track")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("css.selectors.-webkit-slider-runnable-track")}}
 
-<ul>
- <li>{{cssxref("::-webkit-slider-thumb")}}</li>
- <li>Similar pseudo-elements used by other browsers:
-  <ul>
-   <li>{{cssxref("::-ms-track")}}</li>
-   <li>{{cssxref("::-moz-range-track")}}</li>
-  </ul>
- </li>
- <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
-</ul>
+## Voir aussi
+
+- {{cssxref("::-webkit-slider-thumb")}}
+- Similar pseudo-elements used by other browsers:
+
+  - {{cssxref("::-ms-track")}}
+  - {{cssxref("::-moz-range-track")}}
+
+- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
diff --git a/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.md b/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.md
index 2af11cb873..1277db0723 100644
--- a/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.md
@@ -1,34 +1,31 @@
 ---
 title: '::-webkit-slider-thumb'
-slug: 'Web/CSS/::-webkit-slider-thumb'
+slug: Web/CSS/::-webkit-slider-thumb
 tags:
   - CSS
   - Non-standard
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::-webkit-slider-thumb'
+translation_of: Web/CSS/::-webkit-slider-thumb
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-slider-thumb</code></strong> représente le curseur que peut déplacer l'utilisateur le long de la piste d'un élément {{HTMLElement("input")}} de type "<code>range"</code> afin de modifier la valeur numérique associée.</p>
+Le pseudo-élément **`::-webkit-slider-thumb`** représente le curseur que peut déplacer l'utilisateur le long de la piste d'un élément {{HTMLElement("input")}} de type "`range"` afin de modifier la valeur numérique associée.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-slider-thumb")}}</p>
+{{Compat("css.selectors.-webkit-slider-thumb")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("::-webkit-slider-runnable-track")}}</li>
- <li>Les pseudo-éléments analogues utilisés par les autres navigateurs :
-  <ul>
-   <li>{{cssxref("::-moz-range-thumb")}}</li>
-   <li>{{cssxref("::-ms-thumb")}}</li>
-  </ul>
- </li>
- <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
-</ul>
+- {{cssxref("::-webkit-slider-runnable-track")}}
+- Les pseudo-éléments analogues utilisés par les autres navigateurs :
+
+  - {{cssxref("::-moz-range-thumb")}}
+  - {{cssxref("::-ms-thumb")}}
+
+- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
diff --git a/files/fr/web/css/_doublecolon_after/index.md b/files/fr/web/css/_doublecolon_after/index.md
index 5b7aa71588..b00ba2fb2d 100644
--- a/files/fr/web/css/_doublecolon_after/index.md
+++ b/files/fr/web/css/_doublecolon_after/index.md
@@ -1,76 +1,80 @@
 ---
 title: '::after (:after)'
-slug: 'Web/CSS/::after'
+slug: Web/CSS/::after
 tags:
   - CSS
   - Disposition
   - Pseudo-element
   - Reference
   - Web
-translation_of: 'Web/CSS/::after'
+translation_of: Web/CSS/::after
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>En CSS, <strong><code>::after</code> </strong>crée un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte">en ligne</a> ».</p>
+En CSS, **`::after` **crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-éléments) qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « [en ligne](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte) ».
 
-<pre class="brush:css no-line-numbers">/* Ajoute une flèche après les liens */
+```css
+/* Ajoute une flèche après les liens */
 a:after {
   content: "→";
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> les pseudo-éléments générés par <code>::before</code> et <code>::after</code> sont <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">contenus dans la boîte de mise en forme de l'élément</a>. Aussi, <code>::before</code> et <code>::after</code> ne s'appliquent pas aux <em><a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés</a></em> tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}.</p>
-</div>
+> **Note :** les pseudo-éléments générés par `::before` et `::after` sont [contenus dans la boîte de mise en forme de l'élément](https://www.w3.org/TR/CSS2/generate.html#before-after-content). Aussi, `::before` et `::after` ne s'appliquent pas aux *[éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé)* tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<div class="note">
-<p><strong>Note :</strong> CSS3 a introduit la notation <code>::after</code>  (avec deux deux-points) pour distinguer les <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> des <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a>. Les navigateurs acceptent aussi<code>:after</code>, introduite dans CSS2.</p>
-</div>
+> **Note :** CSS3 a introduit la notation `::after`  (avec deux deux-points) pour distinguer les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi`:after`, introduite dans CSS2.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_simple">Utilisation simple</h3>
+### Utilisation simple
 
-<p>Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux.</p>
+Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="texte-ennuyeux"&gt;Voici un peu de vieux texte ennuyeux ordinaire.&lt;/p&gt;
-&lt;p&gt;Voici un peu de texte normal qui n'est ni ennuyeux, ni intéressant.&lt;/p&gt;
-&lt;p class="texte-interessant"&gt;Contribuer à MDN est facile et amusant.
-  Cliquez simplement sur le bouton Modifier pour ajouter de nouveaux exemples vivants, ou améliorer ceux existants.&lt;/p&gt;</pre>
+```html
+<p class="texte-ennuyeux">Voici un peu de vieux texte ennuyeux ordinaire.</p>
+<p>Voici un peu de texte normal qui n'est ni ennuyeux, ni intéressant.</p>
+<p class="texte-interessant">Contribuer à MDN est facile et amusant.
+  Cliquez simplement sur le bouton Modifier pour ajouter de nouveaux exemples vivants, ou améliorer ceux existants.</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.texte-interessant::after {
-  content: "&lt;- maintenant, cela *est* intéressant !";
+```css
+.texte-interessant::after {
+  content: "<- maintenant, cela *est* intéressant !";
   color: green;
 }
 
 .texte-ennuyeux::after {
-  content: "&lt;- ENNUYEUX !";
+  content: "<- ENNUYEUX !";
   color: red;
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utilisation_simple', '100%', 170)}}</p>
+{{EmbedLiveSample('Utilisation_simple', '100%', 170)}}
 
-<h3 id="Exemple_décoratif">Exemple décoratif</h3>
+### Exemple décoratif
 
-<p>On peut mettre en forme du texte ou des images avec la propriété {{cssxref("content")}} à peu près de quelque manière que nous le voulions :</p>
+On peut mettre en forme du texte ou des images avec la propriété {{cssxref("content")}} à peu près de quelque manière que nous le voulions :
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;span class="ruban"&gt;Observez où se trouve la boîte orange.&lt;/span&gt;
-</pre>
+```html
+<span class="ruban">Observez où se trouve la boîte orange.</span>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.ruban {
+```css
+.ruban {
   background-color: #5BC8F7;
 }
 
@@ -79,30 +83,34 @@ a:after {
   background-color: #FFBA10;
   border-color: black;
   border-style: dotted;
-}</pre>
+}
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_décoratif', '100%', 60)}}</p>
+{{EmbedLiveSample('Exemple_décoratif', '100%', 60)}}
 
-<h3 id="Bulles_d’information">Bulles d’information</h3>
+### Bulles d’information
 
-<p>Dans l'exemple suivant, on illustre le <a href="/fr-FR/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <code>::after </code>avec l'expression CSS {{cssxref("attr()")}} et un attribut de données personnalisé <code>data-descr</code> afin de créer une <em>bulle d'information</em> de type glossaire en CSS pur.</p>
+Dans l'exemple suivant, on illustre le [pseudo-élément](/fr-FR/docs/Web/CSS/Pseudo-elements) `::after `avec l'expression CSS {{cssxref("attr()")}} et un attribut de données personnalisé `data-descr` afin de créer une _bulle d'information_ de type glossaire en CSS pur.
 
-<p>On peut également aider les utilisateurs de clavier avec cette technique, en ajoutant un <code>tabindex</code> de <code>0</code> pour faire un <code>span</code> focusable, et en utilisant la sélection <code>:focus</code>. Cela montre à quel point les options <code>::before</code> and <code>::after </code>peuvent être flexibles, bien que, pour l'expérience la plus accessible, un widget de divulgation sémantique créé d'une autre manière serait probablement plus approprié..</p>
+On peut également aider les utilisateurs de clavier avec cette technique, en ajoutant un `tabindex` de `0` pour faire un `span` focusable, et en utilisant la sélection `:focus`. Cela montre à quel point les options `::before` and `::after `peuvent être flexibles, bien que, pour l'expérience la plus accessible, un widget de divulgation sémantique créé d'une autre manière serait probablement plus approprié..
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Voici l’exemple en action du code ci-dessus.&lt;br /&gt;
-  Nous avons un peu de &lt;span data-descr="collection de mots et de ponctuation"&gt;texte&lt;/span&gt;
-  ici avec quelques &lt;span data-descr="petites fenêtres surgissantes qui se cachent aussi"&gt;
-  bulles d’information&lt;/span&gt;.&lt;br /&gt;
-  Ne soyez pas timide, survolez le texte pour jeter un &lt;span data-descr="à ne pas prendre au sens littéral"&gt;œil&lt;/span&gt;.
-&lt;/p&gt;</pre>
+```html
+<p>Voici l’exemple en action du code ci-dessus.<br />
+  Nous avons un peu de <span data-descr="collection de mots et de ponctuation">texte</span>
+  ici avec quelques <span data-descr="petites fenêtres surgissantes qui se cachent aussi">
+  bulles d’information</span>.<br />
+  Ne soyez pas timide, survolez le texte pour jeter un <span data-descr="à ne pas prendre au sens littéral">œil</span>.
+</p>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">span[data-descr] {
+```css
+span[data-descr] {
   position: relative;
   text-decoration: underline;
   color: #00F;
@@ -122,58 +130,28 @@ span[data-descr]:hover::after {
   color: #000000;
   font-size: 14px;
   z-index: 1;
-}</pre>
-
-<h4 id="Résultat_3">Résultat</h4>
-
-<p>{{EmbedLiveSample("Bulles_d’information", '100%', 150)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
-   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
-   <td>Pas de changement significatif depuis la spécification précédente.</td>
-  </tr>
-  <tr>
-   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
-   <td>{{Spec2("CSS3 Transitions")}}</td>
-   <td>Permet les transitions sur les propriétés définies sur les pseudo-éléments.</td>
-  </tr>
-  <tr>
-   <td>{{Specname("CSS3 Animations", "", "")}}</td>
-   <td>{{Spec2("CSS3 Animations")}}</td>
-   <td>Permet les animations sur les propriétés définies sur les pseudo-éléments.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Introduit la syntaxe à deux deux-points.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale, utilisant la syntaxe à un deux-points.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.after")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("::before")}}</li>
- <li>{{cssxref("content")}}</li>
-</ul>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Bulles_d’information", '100%', 150)}}
+
+## Spécifications
+
+| Spécifications                                                                                   | Statut                                       | Commentaire                                                                 |
+| ------------------------------------------------------------------------------------------------ | -------------------------------------------- | --------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}     | {{Spec2('CSS4 Pseudo-Elements')}} | Pas de changement significatif depuis la spécification précédente.          |
+| {{Specname("CSS3 Transitions", "#animatable-properties", "")}}             | {{Spec2("CSS3 Transitions")}}     | Permet les transitions sur les propriétés définies sur les pseudo-éléments. |
+| {{Specname("CSS3 Animations", "", "")}}                                             | {{Spec2("CSS3 Animations")}}         | Permet les animations sur les propriétés définies sur les pseudo-éléments.  |
+| {{SpecName('CSS3 Selectors', '#gen-content', '::after')}}                     | {{Spec2('CSS3 Selectors')}}         | Introduit la syntaxe à deux deux-points.                                    |
+| {{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}} | {{Spec2('CSS2.1')}}                     | Définition initiale, utilisant la syntaxe à un deux-points.                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.after")}}
+
+## Voir aussi
+
+- {{cssxref("::before")}}
+- {{cssxref("content")}}
diff --git a/files/fr/web/css/_doublecolon_backdrop/index.md b/files/fr/web/css/_doublecolon_backdrop/index.md
index 4a5d8fae17..cf54d7149d 100644
--- a/files/fr/web/css/_doublecolon_backdrop/index.md
+++ b/files/fr/web/css/_doublecolon_backdrop/index.md
@@ -7,72 +7,58 @@ tags:
   - Reference
 translation_of: Web/CSS/::backdrop
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">pseudo-élément</a> <code><strong>::backdrop</strong></code> est une boîte de la taille de la zone d'affichage (<em>viewport</em>) qui est affichée immédiatement sous un élément lorsque ce dernier est affiché en plein écran. Cela correspond aux éléments passés en plein écran via l'<a href="/fr/docs/Web/API/Fullscreen_API">API Fullscreen</a> et aux éléments {{HTMLElement("dialog")}}.</p>
+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments) **`::backdrop`** est une boîte de la taille de la zone d'affichage (_viewport_) qui est affichée immédiatement sous un élément lorsque ce dernier est affiché en plein écran. Cela correspond aux éléments passés en plein écran via l'[API Fullscreen](/fr/docs/Web/API/Fullscreen_API) et aux éléments {{HTMLElement("dialog")}}.
 
-<p>Lorsque plusieurs éléments sont en plein écran, ce pseudo-élément est dessiné derrière l'élément qui est le plus en avant et par dessus les autres éléments.</p>
+Lorsque plusieurs éléments sont en plein écran, ce pseudo-élément est dessiné derrière l'élément qui est le plus en avant et par dessus les autres éléments.
 
-<pre class="brush: css no-line-numbers">// Cette ombre n'est affichée que lorsque la boîte de dialogue
+```css
+// Cette ombre n'est affichée que lorsque la boîte de dialogue
 // est ouverte avec dialog.showModal()
 dialog::backdrop {
   background: rgba(255,0,0,.25);
-}</pre>
+}
+```
 
-<div class="note">
-  <p><strong>Note :</strong> L'élément <code>::backdrop</code> peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.</p>
-</div>
+> **Note :** L'élément `::backdrop` peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.
 
-<p>Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.</p>
+Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on indique que l'ombre derrière la vidéo en plein écran doit être bleu-gris plutôt que noire.</p>
+Dans cet exemple, on indique que l'ombre derrière la vidéo en plein écran doit être bleu-gris plutôt que noire.
 
-<pre class="brush: css">video::backdrop {
+```css
+video::backdrop {
   background-color: #448;
 }
-</pre>
+```
 
-<p>Voici le résultat obtenu :</p>
+Voici le résultat obtenu :
 
-<p><img alt="" src="bbb-backdrop.png"></p>
+![](bbb-backdrop.png)
 
-<p>On peut voir ici les bandes bleu-gris au dessus et en dessous de la vidéo alors que la zone est normalement noire.</p>
+On peut voir ici les bandes bleu-gris au dessus et en dessous de la vidéo alors que la zone est normalement noire.
 
-<p>Vous pouvez <a href="https://fullscreen-requestfullscreen-demo.glitch.me/">voir cette démonstration en <em>live</em></a> ou <a href="https://glitch.com/edit/#!/fullscreen-requestfullscreen-demo">voir et modifier le code sur Glitch</a>.</p>
+Vous pouvez [voir cette démonstration en _live_](https://fullscreen-requestfullscreen-demo.glitch.me/) ou [voir et modifier le code sur Glitch](https://glitch.com/edit/#!/fullscreen-requestfullscreen-demo).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
-   <td>{{Spec2('Fullscreen')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}} | {{Spec2('Fullscreen')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.backdrop")}}</p>
+{{Compat("css.selectors.backdrop")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La pseudo-classe {{cssxref(":fullscreen")}}</li>
- <li>L'élément HTML {{HTMLElement("dialog")}}</li>
- <li><a href="/fr/docs/Web/API/Fullscreen_API">L'API Fullscreen</a></li>
-</ul>
+- La pseudo-classe {{cssxref(":fullscreen")}}
+- L'élément HTML {{HTMLElement("dialog")}}
+- [L'API Fullscreen](/fr/docs/Web/API/Fullscreen_API)
diff --git a/files/fr/web/css/_doublecolon_before/index.md b/files/fr/web/css/_doublecolon_before/index.md
index 51d962fb43..10fe4f2b16 100644
--- a/files/fr/web/css/_doublecolon_before/index.md
+++ b/files/fr/web/css/_doublecolon_before/index.md
@@ -1,68 +1,74 @@
 ---
 title: '::before (:before)'
-slug: 'Web/CSS/::before'
+slug: Web/CSS/::before
 tags:
   - CSS
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::before'
+translation_of: Web/CSS/::before
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>::before</code></strong> crée un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS {{cssxref("content")}}. Par défaut, l'élément créé est de type en-ligne (<em>inline</em>).</p>
+**`::before`** crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-éléments) qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS {{cssxref("content")}}. Par défaut, l'élément créé est de type en-ligne (_inline_).
 
-<pre class="brush:css no-line-numbers">/* On ajoute un coeur avant les liens */
+```css
+/* On ajoute un coeur avant les liens */
 a::before {
   content: "♥";
 }
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Les pseudo-éléments générés par <code>::before</code> et <code>::after</code> sont contenus dans la boîte de mise en forme de l'élément. Aussi, <code>::before</code> et <code>::after</code> ne s'appliquent pas <a href="/fr/docs/Web/CSS/Élément_remplacé">aux éléments remplacés</a> tels que {{HTMLElement("img")}} ou {{HTMLElement("br")}}.</p>
-</div>
+> **Note :** Les pseudo-éléments générés par `::before` et `::after` sont contenus dans la boîte de mise en forme de l'élément. Aussi, `::before` et `::after` ne s'appliquent pas [aux éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé) tels que {{HTMLElement("img")}} ou {{HTMLElement("br")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<p>La notation <code>::before</code> a été introduite par CSS 3 pour différencier les <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> et les <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a>. Les navigateurs acceptent aussi la notation <code>:before </code>introduite par CSS 2.</p>
+La notation `::before` a été introduite par CSS 3 pour différencier les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) et les [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi la notation `:before `introduite par CSS 2.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Ajouter_des_guillemets">Ajouter des guillemets</h3>
+### Ajouter des guillemets
 
-<p>Un exemple simple utilisant les pseudo-éléments pour ajouter des guillemets. Ici nous avons <code>::before</code> et {{cssxref("::after")}} pour effectuer l'insertion.</p>
+Un exemple simple utilisant les pseudo-éléments pour ajouter des guillemets. Ici nous avons `::before` et {{cssxref("::after")}} pour effectuer l'insertion.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;q&gt;Quelques guillemets&lt;/q&gt;, dit-il, &lt;q&gt;sont mieux que pas du tout&lt;/q&gt;</pre>
+```html
+<q>Quelques guillemets</q>, dit-il, <q>sont mieux que pas du tout</q>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">q::before {
+```css
+q::before {
   content: "«";
   color: blue;
 }
 q::after {
   content: '»';
   color: red;
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Ajouter_des_guillemets', '500', '50', '')}}</p>
+{{EmbedLiveSample('Ajouter_des_guillemets', '500', '50', '')}}
 
-<h3 id="Exemple_décoratif">Exemple décoratif</h3>
+### Exemple décoratif
 
-<p>Il est possible de mettre du style à du texte ou des images, dans la propriété {{cssxref("content")}} , quasiment de n'importe quelle manière.</p>
+Il est possible de mettre du style à du texte ou des images, dans la propriété {{cssxref("content")}} , quasiment de n'importe quelle manière.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;span class="ribbon"&gt;Observez où est placée la boite orange.&lt;/span&gt;</pre>
+```html
+<span class="ribbon">Observez où est placée la boite orange.</span>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.ribbon {
+```css
+.ribbon {
   background-color: #5BC8F7;
 }
 
@@ -71,31 +77,34 @@ q::after {
   background-color: #FFBA10;
   border-color: black;
   border-style: dotted;
-}</pre>
+}
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_décoratif', 450, 60)}}</p>
+{{EmbedLiveSample('Exemple_décoratif', 450, 60)}}
 
-<h3 id="Liste_de_choses_à_faire">Liste de choses à faire</h3>
+### Liste de choses à faire
 
-<p>Dans cet exemple, nous allons créer une simple liste de choses à faire en utilisant les pseudo-éléments. Cette méthode peut être utilisée pour ajouter une petite touche à l'interface utilisateur et améliorer l'expérience utilisateur.</p>
+Dans cet exemple, nous allons créer une simple liste de choses à faire en utilisant les pseudo-éléments. Cette méthode peut être utilisée pour ajouter une petite touche à l'interface utilisateur et améliorer l'expérience utilisateur.
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;Acheter du lait&lt;/li&gt;
-  &lt;li&gt;Promener le chien&lt;/li&gt;
-  &lt;li&gt;Faire de l'exercice&lt;/li&gt;
-  &lt;li&gt;Coder&lt;/li&gt;
-  &lt;li&gt;Jouer de la musique&lt;/li&gt;
-  &lt;li&gt;Se reposer&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<ul>
+  <li>Acheter du lait</li>
+  <li>Promener le chien</li>
+  <li>Faire de l'exercice</li>
+  <li>Coder</li>
+  <li>Jouer de la musique</li>
+  <li>Se reposer</li>
+</ul>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">li {
+```css
+li {
   list-style-type: none;
   position: relative;
   margin: 1px;
@@ -120,68 +129,39 @@ li.done::before {
   margin-top: -1em;
   transform: rotate(45deg);
   width: 0.5em;
-}</pre>
+}
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var list = document.querySelector('ul');
+```js
+var list = document.querySelector('ul');
 list.addEventListener('click', function(ev) {
   if( ev.target.tagName === 'LI') {
      ev.target.classList.toggle('done');
   }
 }, false);
-</pre>
-
-<h4 id="Résultat_3">Résultat</h4>
-
-<p>{{EmbedLiveSample('Liste_de_choses_à_faire', '400', '300', '')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
-   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
-   <td>Pas de modification significative depuis la spécification précédente.</td>
-  </tr>
-  <tr>
-   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
-   <td>{{Spec2("CSS3 Transitions")}}</td>
-   <td>Les transitions peuvent être appliquées sur les propriétés de ce pseudo-élément.</td>
-  </tr>
-  <tr>
-   <td>{{Specname("CSS3 Animations", "", "")}}</td>
-   <td>{{Spec2("CSS3 Animations")}}</td>
-   <td>Les animations peuvent être appliquées sur les propriétés de ce pseudo-élément.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Introduction de la syntaxe avec les deux deux-points.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale avec une seule fois le caractère deux-points.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.before")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+```
 
-<ul>
- <li>{{cssxref("::after")}}</li>
- <li>{{cssxref("content")}}</li>
-</ul>
+#### Résultat
+
+{{EmbedLiveSample('Liste_de_choses_à_faire', '400', '300', '')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                         | Commentaires                                                                     |
+| ------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Pas de modification significative depuis la spécification précédente.            |
+| {{Specname("CSS3 Transitions", "#animatable-properties", "")}}             | {{Spec2("CSS3 Transitions")}}     | Les transitions peuvent être appliquées sur les propriétés de ce pseudo-élément. |
+| {{Specname("CSS3 Animations", "", "")}}                                             | {{Spec2("CSS3 Animations")}}         | Les animations peuvent être appliquées sur les propriétés de ce pseudo-élément.  |
+| {{SpecName('CSS3 Selectors', '#gen-content', '::before')}}                     | {{Spec2('CSS3 Selectors')}}         | Introduction de la syntaxe avec les deux deux-points.                            |
+| {{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}} | {{Spec2('CSS2.1')}}                     | Définition initiale avec une seule fois le caractère deux-points.                |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.before")}}
+
+## Voir aussi
+
+- {{cssxref("::after")}}
+- {{cssxref("content")}}
diff --git a/files/fr/web/css/_doublecolon_cue-region/index.md b/files/fr/web/css/_doublecolon_cue-region/index.md
index 4386cd36f5..fe67c59d01 100644
--- a/files/fr/web/css/_doublecolon_cue-region/index.md
+++ b/files/fr/web/css/_doublecolon_cue-region/index.md
@@ -1,82 +1,65 @@
 ---
 title: '::cue-region'
-slug: 'Web/CSS/::cue-region'
+slug: Web/CSS/::cue-region
 tags:
   - CSS
   - Media
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::cue-region'
+translation_of: Web/CSS/::cue-region
 ---
-<p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p>
+{{CSSRef}}{{Draft}}{{SeeCompatTable}}
 
-<p>Le pseudo-élément CSS <strong><code>::cue-region</code></strong> correspond à une piste {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} de l'élément ciblé. Il peut être utilisé afin de <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">mettre en forme des sous-titres et autres indications textuelles</a> de pistes VTT.</p>
+Le pseudo-élément CSS **`::cue-region`** correspond à une piste {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} de l'élément ciblé. Il peut être utilisé afin de [mettre en forme des sous-titres et autres indications textuelles](/docs/Web/API/WebVTT_API#Styling_WebTT_cues) de pistes VTT.
 
-<pre class="brush: css; no-line-numbers">::cue-region {
+```css
+::cue-region {
   color: yellow;
   font-weight: bold;
-}</pre>
+}
+```
 
-<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+## Propriétés autorisées
 
-<p>Les règles utilisant <code>::cue-region</code> sont limitées aux propriétés CSS suivantes :</p>
+Les règles utilisant `::cue-region` sont limitées aux propriétés CSS suivantes :
 
-<ul>
- <li>{{CSSxRef("background")}} ainsi que les propriétés détaillées correspondantes</li>
- <li>{{CSSxRef("color")}}</li>
- <li>{{CSSxRef("font")}} ainsi que les propriétés détaillées correspondantes</li>
- <li>{{CSSxRef("line-height")}}</li>
- <li>{{CSSxRef("opacity")}}</li>
- <li>{{CSSxRef("outline")}} ainsi que les propriétés détaillées correspondantes</li>
- <li>{{CSSxRef("ruby-position")}}</li>
- <li>{{CSSxRef("text-combine-upright")}}</li>
- <li>{{CSSxRef("text-decoration")}} ainsi que les propriétés détaillées correspondantes</li>
- <li>{{CSSxRef("text-shadow")}}</li>
- <li>{{CSSxRef("visibility")}}</li>
- <li>{{CSSxRef("white-space")}}</li>
-</ul>
+- {{CSSxRef("background")}} ainsi que les propriétés détaillées correspondantes
+- {{CSSxRef("color")}}
+- {{CSSxRef("font")}} ainsi que les propriétés détaillées correspondantes
+- {{CSSxRef("line-height")}}
+- {{CSSxRef("opacity")}}
+- {{CSSxRef("outline")}} ainsi que les propriétés détaillées correspondantes
+- {{CSSxRef("ruby-position")}}
+- {{CSSxRef("text-combine-upright")}}
+- {{CSSxRef("text-decoration")}} ainsi que les propriétés détaillées correspondantes
+- {{CSSxRef("text-shadow")}}
+- {{CSSxRef("visibility")}}
+- {{CSSxRef("white-space")}}
 
-<p>Les propriétés sont appliquées à l'intégralité des indications textuelles comme si celles-ci formaient une seule unité. La seulle exception à ce comportement est l'application de <code>background</code> (et/ou des propriétés détaillées correspondantes) : cette propriété s'applique distinctement à chaque partie du texte séparément afin d'éviter de masquer ou d'obscurcir de grandes zones de texte sur le média.</p>
+Les propriétés sont appliquées à l'intégralité des indications textuelles comme si celles-ci formaient une seule unité. La seulle exception à ce comportement est l'application de `background` (et/ou des propriétés détaillées correspondantes) : cette propriété s'applique distinctement à chaque partie du texte séparément afin d'éviter de masquer ou d'obscurcir de grandes zones de texte sur le média.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<div class="note">
-<p><strong>Note :</strong> Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("WebVTT", "#the-cue-region-pseudo-element", "the <code>::cue-region</code> pseudo-element")}}</td>
-   <td>{{Spec2("WebVTT")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.cue-region")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres sélecteurs {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} :
-  <ul>
-   <li>{{CSSxRef("::cue")}}</li>
-   <li>{{CSSxRef(":past")}}</li>
-   <li>{{CSSxRef(":future")}}</li>
-  </ul>
- </li>
-</ul>
+## Exemples
+
+> **Note :** Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.
+
+## Spécifications
+
+| Spécification                                                                                                                                | État                     | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------------------- |
+| {{SpecName("WebVTT", "#the-cue-region-pseudo-element", "the <code>::cue-region</code> pseudo-element")}} | {{Spec2("WebVTT")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.cue-region")}}
+
+## Voir aussi
+
+- Les autres sélecteurs {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} :
+
+  - {{CSSxRef("::cue")}}
+  - {{CSSxRef(":past")}}
+  - {{CSSxRef(":future")}}
diff --git a/files/fr/web/css/_doublecolon_cue/index.md b/files/fr/web/css/_doublecolon_cue/index.md
index 01ab9c8284..35884e8e95 100644
--- a/files/fr/web/css/_doublecolon_cue/index.md
+++ b/files/fr/web/css/_doublecolon_cue/index.md
@@ -1,79 +1,68 @@
 ---
 title: '::cue'
-slug: 'Web/CSS/::cue'
+slug: Web/CSS/::cue
 tags:
   - CSS
   - Pseudo-element
   - Reference
   - WebVTT
-translation_of: 'Web/CSS/::cue'
+translation_of: Web/CSS/::cue
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le pseudo-élément CSS <strong><code>::cue</code></strong> permet de cibler les indications textuelles <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a> d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme <a href="/fr/docs/Web/API/WebVTT_API#Styling_WebTT_cues">les légendes et autres indications textuelles</a> pour les médias avec des pistes VTT.</p>
+Le pseudo-élément CSS **`::cue`** permet de cibler les indications textuelles [WebVTT](/fr/docs/Web/API/WebVTT_API) d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme [les légendes et autres indications textuelles](/fr/docs/Web/API/WebVTT_API#Styling_WebTT_cues) pour les médias avec des pistes VTT.
 
-<pre class="brush: css no-line-numbers">::cue {
+```css
+::cue {
   color: yellow;
   font-weight: bold;
-}</pre>
+}
+```
 
-<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+## Propriétés autorisées
 
-<p>Seul un sous-ensemble des propriétés CSS peut être utilisé avec le pseudo-élément <code>::cue</code> :</p>
+Seul un sous-ensemble des propriétés CSS peut être utilisé avec le pseudo-élément `::cue` :
 
-<ul>
- <li>{{CSSxRef("background")}} et les propriétés détaillées associées</li>
- <li>{{CSSxRef("color")}}</li>
- <li>{{CSSxRef("font")}} et les propriétés détaillées associées</li>
- <li>{{CSSxRef("line-height")}}</li>
- <li>{{CSSxRef("opacity")}}</li>
- <li>{{CSSxRef("outline")}} et les propriétés détaillées associées</li>
- <li>{{CSSxRef("ruby-position")}}</li>
- <li>{{CSSxRef("text-combine-upright")}}</li>
- <li>{{CSSxRef("text-decoration")}} et les propriétés détaillées associées</li>
- <li>{{CSSxRef("text-shadow")}}</li>
- <li>{{CSSxRef("visibility")}}</li>
- <li>{{CSSxRef("white-space")}}</li>
-</ul>
+- {{CSSxRef("background")}} et les propriétés détaillées associées
+- {{CSSxRef("color")}}
+- {{CSSxRef("font")}} et les propriétés détaillées associées
+- {{CSSxRef("line-height")}}
+- {{CSSxRef("opacity")}}
+- {{CSSxRef("outline")}} et les propriétés détaillées associées
+- {{CSSxRef("ruby-position")}}
+- {{CSSxRef("text-combine-upright")}}
+- {{CSSxRef("text-decoration")}} et les propriétés détaillées associées
+- {{CSSxRef("text-shadow")}}
+- {{CSSxRef("visibility")}}
+- {{CSSxRef("white-space")}}
 
-<p>Les propriétés sont appliquées à l'ensembles des indications (comme si celles-ci formaient un seul ensemble). Seule <code>background</code> (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).</p>
+Les propriétés sont appliquées à l'ensembles des indications (comme si celles-ci formaient un seul ensemble). Seule `background` (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>La règle CSS suivante permet d'avoir les indications textuelles dans un texte blanc et sur un arrière-plan qui est une boîte noire transparent.</p>
+La règle CSS suivante permet d'avoir les indications textuelles dans un texte blanc et sur un arrière-plan qui est une boîte noire transparent.
 
-<pre class="brush: css">::cue {
+```css
+::cue {
   color: #fff;
   background-color: rgba(0, 0, 0, 0.6);
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td>
-   <td>{{Spec2("WebVTT")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.cue")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Tracks Format (WebVTT)</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                | État                     | Commentaires         |
+| ---------------------------------------------------------------------------- | ------------------------ | -------------------- |
+| {{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}} | {{Spec2("WebVTT")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.cue")}}
+
+## Voir aussi
+
+- [Web Video Tracks Format (WebVTT)](/fr/docs/Web/API/WebVTT_API)
diff --git a/files/fr/web/css/_doublecolon_file-selector-button/index.md b/files/fr/web/css/_doublecolon_file-selector-button/index.md
index 67030cc606..ffb7931294 100644
--- a/files/fr/web/css/_doublecolon_file-selector-button/index.md
+++ b/files/fr/web/css/_doublecolon_file-selector-button/index.md
@@ -9,45 +9,48 @@ tags:
 translation_of: Web/CSS/::file-selector-button
 original_slug: Web/CSS/::-webkit-file-upload-button
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>Le pseudo-élément <strong><code>::-webkit-file-upload-button</code></strong> représente le bouton d'un élément {{HTMLElement("input")}} de type <code>file</code>.</p>
+Le pseudo-élément **`::-webkit-file-upload-button`** représente le bouton d'un élément {{HTMLElement("input")}} de type `file`.
 
-<p>Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.</p>
+Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>selecteur</var>::-webkit-file-upload-button
-</pre>
+    selecteur::-webkit-file-upload-button
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input, label {
+```css
+input, label {
   display: block;
 }
 
 input[type=file]::-webkit-file-upload-button {
   border: 1px solid grey;
   background: #FFFAAA;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="fileUpload"&gt;Uploader un fichier&lt;/label&gt;&lt;br&gt;
-  &lt;input type="file" id="fileUpload"&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="fileUpload">Uploader un fichier</label><br>
+  <input type="file" id="fileUpload">
+</form>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.-webkit-file-upload-button")}}</p>
+{{Compat("css.selectors.-webkit-file-upload-button")}}
diff --git a/files/fr/web/css/_doublecolon_first-letter/index.md b/files/fr/web/css/_doublecolon_first-letter/index.md
index 23d75fa8fd..f35e8c4cee 100644
--- a/files/fr/web/css/_doublecolon_first-letter/index.md
+++ b/files/fr/web/css/_doublecolon_first-letter/index.md
@@ -7,135 +7,127 @@ tags:
   - Reference
 translation_of: Web/CSS/::first-letter
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::first-letter</code></strong> sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.</p>
+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::first-letter`** sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.
 
-<pre class="brush: css no-line-numbers">/* Sélectionne la première lettre */
-/* d'un élément &lt;p&gt; */
+```css
+/* Sélectionne la première lettre */
+/* d'un élément <p> */
 p::first-letter {
   color: red;
   font-size: 130%;
-}</pre>
+}
+```
 
-<p>La première lettre d'un élément n'est pas forcément évidente à identifier :</p>
+La première lettre d'un élément n'est pas forcément évidente à identifier :
 
-<ul>
- <li>La ponctuation, c'est-à-dire n'importe quel caractère défini dans une des classes Unicode <i lang="en">open</i> (Ps), <i lang="en">close</i> (Pe), <i lang="en">initial quote</i> (Pi), <i lang="en">final quote</i> (Pf) et <i lang="en">other punctuation</i> (Po) , précédant ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.</li>
- <li>D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le <code>IJ</code> en néerlandais. Dans ces rares cas, les deux lettres du digraphes doivent être sélectionnées par le pseudo-élément <code>::first-letter</code>. (Ceci est mal supporté par les navigateurs, reportez vous au <a href="/fr/docs/Web/CSS/::first-letter#compatibilit%c3%a9_des_navigateurs">tableau de compatibilité des navigateurs</a>).</li>
- <li>Enfin, une combinaison du pseudo-élément {{cssxref("::before")}} et de la propriété {{cssxref("content")}} peut injecter du texte au début de l'élément. Dans ce cas, <code>::first-letter</code> sélectionnera la première lettre du contenu inséré.</li>
-</ul>
+- La ponctuation, c'est-à-dire n'importe quel caractère défini dans une des classes Unicode
 
-<p>Une première ligne n'a de signification que dans une <a href="/fr/docs/Web/Guide/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">boîte englobante</a>, ainsi le pseudo-élément <code>::first-letter</code> n'a un effet que sur les éléments ayant une valeur {{cssxref("display")}} correspondant à <code>block</code>, <code>inline-block</code>, <code>table-cell</code>, <code>list-item</code> ou <code>table-caption</code>. Dans tous les autres cas, <code>::first-letter</code> n'a pas d'effet.</p>
+  <i lang="en">open</i>
 
-<h2 id="Propriétés_utilisables">Propriétés utilisables</h2>
+  (Ps),
 
-<p>Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un bloc déclaratif contenant un sélecteur utilisant le pseudo-élément <code>::first-letter</code> :</p>
+  <i lang="en">close</i>
 
-<ul>
- <li>Toutes les propriétés liées aux polices de caractère : {{cssxref("font")}}, {{cssxref("font-style")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.</li>
- <li>Toutes les propriétés liées à l'arrière-plan : {{cssxref("background")}},{{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}.</li>
- <li>Toutes les propriétés liées à <code>margin</code> : {{cssxref("margin")}}, {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}.</li>
- <li>Toutes les propriétés liées à <code>padding</code> : {{cssxref("padding")}}, {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</li>
- <li>Toutes les propriétés liées aux bordures : les raccourcis {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-radius")}}, {{cssxref("border-image")}}, et les propriétés détaillées.</li>
- <li>La propriété {{cssxref("color")}} .</li>
- <li>Les propriétés  {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si <code>float</code> vaut <code>none</code>).</li>
-</ul>
+  (Pe),
 
-<p>Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.</p>
+  <i lang="en">initial quote</i>
 
-<div class="note">
-  <p><strong>Note :</strong> Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.</p>
-  <p>Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.</p>
-  <p>Si les navigateurs anciens doivent être supportés, <code>:first-letter</code> est le seul choix viable. Sinon, la syntaxe <code>::first-letter</code> doit être privilégiée.</p>
-</div>
+  (Pi),
 
-<h2 id="Syntaxe">Syntaxe</h2>
+  <i lang="en">final quote</i>
+
+  (Pf) et
+
+  <i lang="en">other punctuation</i>
+
+  (Po) , précédant ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.
+
+- D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le `IJ` en néerlandais. Dans ces rares cas, les deux lettres du digraphes doivent être sélectionnées par le pseudo-élément `::first-letter`. (Ceci est mal supporté par les navigateurs, reportez vous au [tableau de compatibilité des navigateurs](/fr/docs/Web/CSS/::first-letter#compatibilit%c3%a9_des_navigateurs)).
+- Enfin, une combinaison du pseudo-élément {{cssxref("::before")}} et de la propriété {{cssxref("content")}} peut injecter du texte au début de l'élément. Dans ce cas, `::first-letter` sélectionnera la première lettre du contenu inséré.
+
+Une première ligne n'a de signification que dans une [boîte englobante](/fr/docs/Web/Guide/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes), ainsi le pseudo-élément `::first-letter` n'a un effet que sur les éléments ayant une valeur {{cssxref("display")}} correspondant à `block`, `inline-block`, `table-cell`, `list-item` ou `table-caption`. Dans tous les autres cas, `::first-letter` n'a pas d'effet.
+
+## Propriétés utilisables
+
+Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un bloc déclaratif contenant un sélecteur utilisant le pseudo-élément `::first-letter` :
+
+- Toutes les propriétés liées aux polices de caractère : {{cssxref("font")}}, {{cssxref("font-style")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.
+- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background")}},{{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}.
+- Toutes les propriétés liées à `margin` : {{cssxref("margin")}}, {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}.
+- Toutes les propriétés liées à `padding` : {{cssxref("padding")}}, {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.
+- Toutes les propriétés liées aux bordures : les raccourcis {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-radius")}}, {{cssxref("border-image")}}, et les propriétés détaillées.
+- La propriété {{cssxref("color")}} .
+- Les propriétés  {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si `float` vaut `none`).
+
+Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.
+
+> **Note :** Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.
+>
+> Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.
+>
+> Si les navigateurs anciens doivent être supportés, `:first-letter` est le seul choix viable. Sinon, la syntaxe `::first-letter` doit être privilégiée.
+
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on prend la première lettre de chaque paragraphe et on l'affiche en rouge et en gros.</p>
+Dans cet exemple, on prend la première lettre de chaque paragraphe et on l'affiche en rouge et en gros.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p::first-letter {
+```css
+p::first-letter {
   color: red;
   font-size: 130%;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+```html
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
   ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
   dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
-  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.&lt;/p&gt;
-&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
-&lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.</p>
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
   aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
   esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
   iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
-  nulla facilisi.&lt;/p&gt;
-&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
-&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
-&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
-&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
-&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
-&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
-&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
-&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
-&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '80%', 420)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
-   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
-   <td>Généralisation des propriétés permises pour la mise en forme du texte et des popriétés de mise en page en-ligne, {{cssxref("opacity")}} et {{cssxref("box-shadow")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow avec ::first-letter')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>Autorise l'usage de {{cssxref("text-shadow")}} avec <code>::first-letter</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#first-letter', '::first-letter')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition des cas limites comme les listes, ou les comportement spécifiques à certaines langues (comme le digraphe néerlandais <code>IJ</code>).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>La définition initiale utilisait la syntaxe à un caractère deux-points.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.first-letter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("::first-line")}}</li>
-</ul>
+  nulla facilisi.</p>
+<p>-The beginning of a special punctuation mark.</p>
+<p>_The beginning of a special punctuation mark.</p>
+<p>"The beginning of a special punctuation mark.</p>
+<p>'The beginning of a special punctuation mark.</p>
+<p>*The beginning of a special punctuation mark.</p>
+<p>#The beginning of a special punctuation mark.</p>
+<p>「特殊的汉字标点符号开头。</p>
+<p>《特殊的汉字标点符号开头。</p>
+<p>“特殊的汉字标点符号开头。</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '80%', 420)}}
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                                       | Commentaire                                                                                                                                                                        |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}             | {{Spec2('CSS4 Pseudo-Elements')}} | Généralisation des propriétés permises pour la mise en forme du texte et des popriétés de mise en page en-ligne, {{cssxref("opacity")}} et {{cssxref("box-shadow")}}. |
+| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow avec ::first-letter')}} | {{Spec2('CSS3 Text Decoration')}} | Autorise l'usage de {{cssxref("text-shadow")}} avec `::first-letter`.                                                                                                    |
+| {{SpecName('CSS3 Selectors', '#first-letter', '::first-letter')}}                             | {{Spec2('CSS3 Selectors')}}         | Définition des cas limites comme les listes, ou les comportement spécifiques à certaines langues (comme le digraphe néerlandais `IJ`).                                             |
+| {{SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter')}}                         | {{Spec2('CSS2.1')}}                     | Aucune modification.                                                                                                                                                               |
+| {{SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter')}}                 | {{Spec2('CSS1')}}                     | La définition initiale utilisait la syntaxe à un caractère deux-points.                                                                                                            |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.first-letter")}}
+
+## Voir aussi
+
+- {{cssxref("::first-line")}}
diff --git a/files/fr/web/css/_doublecolon_first-line/index.md b/files/fr/web/css/_doublecolon_first-line/index.md
index 11f165eae1..6fadbb0d69 100644
--- a/files/fr/web/css/_doublecolon_first-line/index.md
+++ b/files/fr/web/css/_doublecolon_first-line/index.md
@@ -7,153 +7,134 @@ tags:
   - Reference
 translation_of: Web/CSS/::first-line
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::first-line</code></strong> applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant <code>::first-line</code> ne ciblent pas un élément HTML réel.</p>
+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::first-line`** applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant `::first-line` ne ciblent pas un élément HTML réel.
 
-<pre class="brush: css no-line-numbers">/* Sélectionne la première ligne */
-/*  d'un élément &lt;p&gt; */
+```css
+/* Sélectionne la première ligne */
+/*  d'un élément <p> */
 ::first-line {
   color: red;
   text-transform: uppercase;
-}</pre>
+}
+```
 
-<p>Une première ligne n'a de sens que dans une <a href="/fr/docs/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">boîte de type bloc</a>, et ainsi le pseudo-élément <code>::first-line</code> n'a d'effet que sur les éléments dont {{cssxref("display")}} à une valeur de <code>block</code>, <code>inline-block</code>, <code>table-cell</code> ou <code>table-caption</code>. Dans tous les autres cas, <code>::first-line</code> n'a pas d'effet.</p>
+Une première ligne n'a de sens que dans une [boîte de type bloc](/fr/docs/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes), et ainsi le pseudo-élément `::first-line` n'a d'effet que sur les éléments dont {{cssxref("display")}} à une valeur de `block`, `inline-block`, `table-cell` ou `table-caption`. Dans tous les autres cas, `::first-line` n'a pas d'effet.
 
-<h2 id="Propriétés_utilisables">Propriétés utilisables</h2>
+## Propriétés utilisables
 
-<p>Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de déclaration contenant un sélecteur CSS utilisant le pseudo-élément <code>::first-line</code> :</p>
+Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de déclaration contenant un sélecteur CSS utilisant le pseudo-élément `::first-line` :
 
-<ul>
- <li>Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}}</li>
- <li>La propriété {{cssxref("color")}}</li>
- <li>Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}</li>
- <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}}</li>
- <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}.</li>
-</ul>
+- Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}}
+- La propriété {{cssxref("color")}}
+- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}
+- {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}}
+- {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}.
 
-<p>Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.</p>
+Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.
 
-<div class="note">
-  <p><strong>Note :</strong> Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.</p>
-  <p>Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.</p>
-  <p>Si les navigateurs anciens doivent être supportés, <code>:first-line</code> est le seul choix viable ; sinon<code>,::first-line</code> est préféré.</p>
-</div>
+> **Note :** Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.
+>
+> Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.
+>
+> Si les navigateurs anciens doivent être supportés, `:first-line` est le seul choix viable ; sinon`,::first-line` est préféré.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="text-transform"><code>text-transform</code></h3>
+### `text-transform`
 
-<p>Toutes les lettres de la première ligne de chaque paragraphe sont en majuscules.</p>
+Toutes les lettres de la première ligne de chaque paragraphe sont en majuscules.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p::first-line {
+```css
+p::first-line {
   text-transform: uppercase;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('text-transform', 250, 100)}}</p>
+{{EmbedLiveSample('text-transform', 250, 100)}}
 
-<h3 id="margin-left"><code>margin-left</code></h3>
+### `margin-left`
 
-<p>Ici, l'effet est nul car <code>margin-left</code> ne peut pas être appliquée sur ce pseudo-élément.</p>
+Ici, l'effet est nul car `margin-left` ne peut pas être appliquée sur ce pseudo-élément.
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p::first-line {
+```css
+p::first-line {
   margin-left: 20px;
-}</pre>
+}
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('margin-left', 250, 100)}}</p>
+{{EmbedLiveSample('margin-left', 250, 100)}}
 
-<h3 id="text-indent"><code>text-indent</code></h3>
+### `text-indent`
 
-<p>Là encore, l'effet est nul, <code>text-indent</code> ne peut pas être appliqué sur ce pseudo-élément.</p>
+Là encore, l'effet est nul, `text-indent` ne peut pas être appliqué sur ce pseudo-élément.
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p::first-line {
+```css
+p::first-line {
   text-indent: 20px;
-}</pre>
+}
+```
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore.
-&lt;/p&gt;</pre>
-
-<h4 id="Résultat_3">Résultat</h4>
-
-<p>{{EmbedLiveSample('text-indent', 250, 100)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td>
-   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
-   <td>La définition est affinée pour indiquer où ce pseudo-élément peut correspondre. Les propriétés possibles sont généralisées (fontes, décoration, disposition en ligne et {{cssxref("opacity")}}). Définit l'héritage de <code>::first-letter</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>La propriété {{cssxref("text-shadow")}} peut être utilisée avec <code>::first-letter</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>La définition de « première ligne » a été reformulée. La syntaxe utilise désormais deux fois le caractère deux-points.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>La définition initiale qui utilise la syntaxe avec un seul caractère deux-points.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.first-line")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("::first-letter")}}</li>
-</ul>
+</p>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('text-indent', 250, 100)}}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                         | Commentaires                                                                                                                                                                                                                                   |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}             | {{Spec2('CSS4 Pseudo-Elements')}} | La définition est affinée pour indiquer où ce pseudo-élément peut correspondre. Les propriétés possibles sont généralisées (fontes, décoration, disposition en ligne et {{cssxref("opacity")}}). Définit l'héritage de `::first-letter`. |
+| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}} | {{Spec2('CSS3 Text Decoration')}} | La propriété {{cssxref("text-shadow")}} peut être utilisée avec `::first-letter`.                                                                                                                                                    |
+| {{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}                                 | {{Spec2('CSS3 Selectors')}}         | La définition de « première ligne » a été reformulée. La syntaxe utilise désormais deux fois le caractère deux-points.                                                                                                                         |
+| {{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}                 | {{Spec2('CSS2.1')}}                     | Aucune modification.                                                                                                                                                                                                                           |
+| {{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}                     | {{Spec2('CSS1')}}                     | La définition initiale qui utilise la syntaxe avec un seul caractère deux-points.                                                                                                                                                              |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.first-line")}}
+
+## Voir aussi
+
+- {{cssxref("::first-letter")}}
diff --git a/files/fr/web/css/_doublecolon_grammar-error/index.md b/files/fr/web/css/_doublecolon_grammar-error/index.md
index 6d55d7ab01..fabbda6a65 100644
--- a/files/fr/web/css/_doublecolon_grammar-error/index.md
+++ b/files/fr/web/css/_doublecolon_grammar-error/index.md
@@ -1,82 +1,71 @@
 ---
 title: '::grammar-error'
-slug: 'Web/CSS/::grammar-error'
+slug: Web/CSS/::grammar-error
 tags:
   - CSS
   - Experimental
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::grammar-error'
+translation_of: Web/CSS/::grammar-error
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>Le pseudo-élément CSS <strong><code>::grammar-error</code></strong> représente une portion de texte que le navigateur signale comme contenant une ou plusieurs erreurs de grammaire.</p>
+Le pseudo-élément CSS **`::grammar-error`** représente une portion de texte que le navigateur signale comme contenant une ou plusieurs erreurs de grammaire.
 
-<pre class="brush: css no-line-numbers">::grammar-error {
+```css
+::grammar-error {
   color: green;
-}</pre>
+}
+```
 
-<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+## Propriétés autorisées
 
-<p>Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle contenant <code>::grammar-error</code> :</p>
+Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle contenant `::grammar-error` :
 
-<ul>
- <li>{{cssxref("background-color")}},</li>
- <li>{{cssxref("caret-color")}},</li>
- <li>{{cssxref("color")}},</li>
- <li>{{cssxref("cursor")}},</li>
- <li>{{cssxref("outline")}} et les propriétés détaillées associées,</li>
- <li>{{cssxref("text-decoration")}} et les propriétés détaillées associées.</li>
- <li>{{cssxref("text-emphasis-color")}},</li>
- <li>{{cssxref("text-shadow")}}</li>
-</ul>
+- {{cssxref("background-color")}},
+- {{cssxref("caret-color")}},
+- {{cssxref("color")}},
+- {{cssxref("cursor")}},
+- {{cssxref("outline")}} et les propriétés détaillées associées,
+- {{cssxref("text-decoration")}} et les propriétés détaillées associées.
+- {{cssxref("text-emphasis-color")}},
+- {{cssxref("text-shadow")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">::grammar-error</pre>
+    ::grammar-error
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p::grammar-error { color:red }</pre>
+```css
+p::grammar-error { color:red }
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Alice devina tout de suite qu’il chercher l’éventail
   et la paire de gants.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","250","100")}}</p>
+{{EmbedLiveSample("Exemples","250","100")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}</td>
-   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                         | Commentaires        |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------- |
+| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.grammar-error")}}</p>
+{{Compat("css.selectors.grammar-error")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("::spelling-error")}}</li>
-</ul>
+- {{cssxref("::spelling-error")}}
diff --git a/files/fr/web/css/_doublecolon_marker/index.md b/files/fr/web/css/_doublecolon_marker/index.md
index d4f4c6f0dc..515ff64ac2 100644
--- a/files/fr/web/css/_doublecolon_marker/index.md
+++ b/files/fr/web/css/_doublecolon_marker/index.md
@@ -1,97 +1,79 @@
 ---
 title: '::marker'
-slug: 'Web/CSS/::marker'
+slug: Web/CSS/::marker
 tags:
   - CSS
   - Experimental
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::marker'
+translation_of: Web/CSS/::marker
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>Le pseudo-élément <strong><code>::marker</code></strong> représente le marqueur d'un élément d'une liste (par exemple la puce ou le numéro de l'élément d'un élément {{HTMLElement("li")}}). Ce pseudo-élément ne fonctionne que pour les éléments ou pseudo-éléments pour lesquels {{cssxref("display")}} vaut <code>list-item</code> (par défaut c'est le cas des éléments {{htmlelement("li")}} et {{htmlelement("summary")}}).</p>
+Le pseudo-élément **`::marker`** représente le marqueur d'un élément d'une liste (par exemple la puce ou le numéro de l'élément d'un élément {{HTMLElement("li")}}). Ce pseudo-élément ne fonctionne que pour les éléments ou pseudo-éléments pour lesquels {{cssxref("display")}} vaut `list-item` (par défaut c'est le cas des éléments {{htmlelement("li")}} et {{htmlelement("summary")}}).
 
-<pre class="brush: css no-line-numbers">::marker {
+```css
+::marker {
   color: red;
   font-size: 1.5em;
-}</pre>
+}
+```
 
-<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+## Propriétés autorisées
 
-<p>Seul un sous-ensemble de propriétés CSS peuvent être utilisées pour une règle qui utilise <code>::marker</code> :</p>
+Seul un sous-ensemble de propriétés CSS peuvent être utilisées pour une règle qui utilise `::marker` :
 
-<ul>
- <li>{{cssxref("color")}},</li>
- <li>{{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}</li>
- <li>{{cssxref("content")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Fonts">Toutes les propriétés liées aux polices (font).</a></li>
-</ul>
+- {{cssxref("color")}},
+- {{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}
+- {{cssxref("content")}}
+- [Toutes les propriétés liées aux polices (font).](/fr/docs/Web/CSS/CSS_Fonts)
 
-<div class="note">
-<p><strong>Note :</strong> La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.</p>
-</div>
+> **Note :** La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">li::marker {
+```css
+li::marker {
   color:red;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ol&gt;
- &lt;li&gt;Savoir lacer ses chaussures&lt;/li&gt;
- &lt;li&gt;Et compter deux par deux.&lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}</td>
-   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.marker")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les éléments HTML relatifs aux listes :
-  <ul>
-   <li>{{htmlelement("ul")}}</li>
-   <li>{{htmlelement("ol")}}</li>
-   <li>{{htmlelement("li")}}</li>
-  </ul>
- </li>
- <li>{{htmlelement("summary")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<ol>
+ <li>Savoir lacer ses chaussures</li>
+ <li>Et compter deux par deux.</li>
+</ol>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","150")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                         | Commentaires                       |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------- |
+| {{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Aucune modification significative. |
+| {{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}             | {{Spec2('CSS3 Lists')}}             | Définition initiale.               |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.marker")}}
+
+## Voir aussi
+
+- Les éléments HTML relatifs aux listes :
+
+  - {{htmlelement("ul")}}
+  - {{htmlelement("ol")}}
+  - {{htmlelement("li")}}
+
+- {{htmlelement("summary")}}
diff --git a/files/fr/web/css/_doublecolon_part/index.md b/files/fr/web/css/_doublecolon_part/index.md
index 98bb333590..190d0fb172 100644
--- a/files/fr/web/css/_doublecolon_part/index.md
+++ b/files/fr/web/css/_doublecolon_part/index.md
@@ -1,6 +1,6 @@
 ---
 title: '::part()'
-slug: 'Web/CSS/::part'
+slug: Web/CSS/::part
 tags:
   - '::part'
   - CSS
@@ -10,28 +10,30 @@ tags:
   - NeedsExample
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::part'
+translation_of: Web/CSS/::part
 ---
-<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{Draft}}{{SeeCompatTable}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>::part</code></strong> représente n’importe quel élément dans un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">arbre fantôme</a> qui a un attribut {{HTMLAttrxRef("part")}} correspondant.</p>
+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) [CSS](/fr/docs/Web/CSS) **`::part`** représente n’importe quel élément dans un [arbre fantôme](/fr/docs/Web/Web_Components/Using_shadow_DOM) qui a un attribut {{HTMLAttrxRef("part")}} correspondant.
 
-<pre class="brush: css no-line-numbers">custom-element::part(foo) {
+```css
+custom-element::part(foo) {
   /* Styles à appliquer à la partie `foo` */
 }
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="&lt;tabbed-custom-element>"><code>&lt;tabbed-custom-element&gt;</code></h3>
+### `<tabbed-custom-element>`
 
-<h4 id="Arbre_fantôme_&lt;tabbed-custom-element>">Arbre fantôme <code>&lt;tabbed-custom-element&gt;</code></h4>
+#### Arbre fantôme `<tabbed-custom-element>`
 
-<pre class="brush: html">&lt;style type="text/css"&gt;
+```html
+<style type="text/css">
   *, ::before, ::after {
     box-sizing: border-box;
   }
@@ -39,21 +41,21 @@ translation_of: 'Web/CSS/::part'
   :host {
     display: flex;
   }
-&lt;/style&gt;
-&lt;div part="tab active"&gt;
+</style>
+<div part="tab active">
   Tab 1
-&lt;/div&gt;
-&lt;div part="tab"&gt;
+</div>
+<div part="tab">
   Tab 2
-&lt;/div&gt;
-&lt;div part="tab"&gt;
+</div>
+<div part="tab">
   Tab 3
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<h4 id="Feuille_de_style_chargée_dans_un_arbre_léger">Feuille de style chargée dans un arbre léger</h4>
+#### Feuille de style chargée dans un arbre léger
 
-<pre class="brush: css">
+```css
 tabbed-custom-element::part(tab) {
   color: #0c0c0dcc;
   border-bottom: transparent solid 2px;
@@ -79,33 +81,20 @@ tabbed-custom-element::part(active tab) {
   color: #0060df;
   border-color: #0a84ff !important;
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">­État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS Shadow Parts", "#part", "::part")}}</td>
-   <td>{{Spec2("CSS Shadow Parts")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.part")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur <code>::part()</code></li>
- <li>L'attribut {{HTMLattrxref("exportparts")}} qui est utilisé pour exporter les parties d'un arbre <em>shadow</em> imbriqué vers un arbre classique</li>
- <li><a href="https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md">Utilisation de CSS Shadow : <code>::part</code> et <code>::theme</code></a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                        | ­État                                    | Commentaires         |
+| -------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS Shadow Parts", "#part", "::part")}} | {{Spec2("CSS Shadow Parts")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.part")}}
+
+## Voir aussi
+
+- L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur `::part()`
+- L'attribut {{HTMLattrxref("exportparts")}} qui est utilisé pour exporter les parties d'un arbre _shadow_ imbriqué vers un arbre classique
+- [Utilisation de CSS Shadow : `::part` et `::theme`](https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md)
diff --git a/files/fr/web/css/_doublecolon_placeholder/index.md b/files/fr/web/css/_doublecolon_placeholder/index.md
index 54944043c7..e5a5a5f7bd 100644
--- a/files/fr/web/css/_doublecolon_placeholder/index.md
+++ b/files/fr/web/css/_doublecolon_placeholder/index.md
@@ -7,148 +7,121 @@ tags:
   - Reference
 translation_of: Web/CSS/::placeholder
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">pseudo-élément</a> <strong><code>::placeholder</code></strong> représente <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">le texte de substitution</a> pour un élément {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}. Cela permet aux développeurs web de personnaliser l'apparence de ce texte.</p>
+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments) **`::placeholder`** représente [le texte de substitution](/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute) pour un élément {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}. Cela permet aux développeurs web de personnaliser l'apparence de ce texte.
 
-<pre class="brush: css no-line-numbers">::placeholder {
+```css
+::placeholder {
   color: blue;
   font-size: 1.5em;
-}</pre>
+}
+```
 
-<p>Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteur respectant ce pseudo-élément :</p>
+Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteur respectant ce pseudo-élément :
 
-<ul>
- <li>Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}}</li>
- <li>La propriété {{cssxref("color")}}</li>
- <li>Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}</li>
- <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}}</li>
- <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}.</li>
-</ul>
+- Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}}
+- La propriété {{cssxref("color")}}
+- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}
+- {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}}
+- {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Par défaut, dans la plupart des navigateurs, le texte de substitution est écrit en gris clair.</p>
-</div>
+> **Note :** Par défaut, dans la plupart des navigateurs, le texte de substitution est écrit en gris clair.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">input::placeholder {
+```css
+input::placeholder {
   color: red;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input type="email" placeholder="toto@exemple.com"&gt;</pre>
+```html
+<input type="email" placeholder="toto@exemple.com">
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+{{EmbedLiveSample("Exemples","200","150")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<h3 id="Contraste">Contraste</h3>
+### Contraste
 
-<h4 id="Taux_de_contraste">Taux de contraste</h4>
+#### Taux de contraste
 
-<p>Le texte de substitution est généralement représenté avec une couleur plus claire afin d'indiquer qu'il s'agit d'un suggestion et que ce contenu n'a pas été saisi par l'utilisateur ou par le site même.</p>
+Le texte de substitution est généralement représenté avec une couleur plus claire afin d'indiquer qu'il s'agit d'un suggestion et que ce contenu n'a pas été saisi par l'utilisateur ou par le site même.
 
-<p>Il est important de vérifier que le contraste entre la couleur de ce texte et celle de l'arrière-plan est suffisament élevé afin que les personnes avec des conditions de vision faibles puissent les lire.</p>
+Il est important de vérifier que le contraste entre la couleur de ce texte et celle de l'arrière-plan est suffisament élevé afin que les personnes avec des conditions de vision faibles puissent les lire.
 
-<p>La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :</p>
+La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/intro/wcag), un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :
 
-<ul>
- <li>Si le texte est en gras : 18.66px ou plus grand</li>
- <li>Sinon 24px ou plus grand</li>
-</ul>
+- Si le texte est en gras : 18.66px ou plus grand
+- Sinon 24px ou plus grand
 
-<p>Autres ressources :</p>
+Autres ressources :
 
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li>
- <li><a href="/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">Explications des recommendation WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
-</ul>
+- [WebAIM : vérificateur de contraste](https://webaim.org/resources/contrastchecker/)
+- [Explications des recommendation 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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 
-<h4 id="Utilisabilité">Utilisabilité</h4>
+#### Utilisabilité
 
-<p>Les textes de substitution avec un contraste suffisamment élevé peuvent être pris pour des textes saisis par l'utilisateur. De plus, les textes de substituion disparaissent lorsqu'une personne saisit du contenu dans l'élément {{htmlelement("input")}}. Pour ces deux raisons, les textes de subsitution peuvent gêner la complétion du formulaire, notamment pour les personnes souffrant de troubles cognitifs.</p>
+Les textes de substitution avec un contraste suffisamment élevé peuvent être pris pour des textes saisis par l'utilisateur. De plus, les textes de substituion disparaissent lorsqu'une personne saisit du contenu dans l'élément {{htmlelement("input")}}. Pour ces deux raisons, les textes de subsitution peuvent gêner la complétion du formulaire, notamment pour les personnes souffrant de troubles cognitifs.
 
-<p>Une autre méthode consiste à fournir cette information en l'incluant à proximité du champ mais en dehors et d'utiliser l'attribut <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> afin de relier l'élément {{HTMLElement("input")}} à l'indication associée.</p>
+Une autre méthode consiste à fournir cette information en l'incluant à proximité du champ mais en dehors et d'utiliser l'attribut [`aria-describedby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) afin de relier l'élément {{HTMLElement("input")}} à l'indication associée.
 
-<p>Avec cette méthode, le contenu indicatif est disponible à tout moment (même lorsqu'une information a été saisie par l'utilisateur) et le champ est vide lorsque la page est chargée. La plupart des lecteurs d'écran utiliseront <code>aria-describedby</code> afin de lire l'indication lorsque le libellé du champ aura été annoncé. La personne utilisant le lecteur d'écran pourra arrêter les annonces si elle estime que les informations supplémentaires ne sont pas nécessaires.</p>
+Avec cette méthode, le contenu indicatif est disponible à tout moment (même lorsqu'une information a été saisie par l'utilisateur) et le champ est vide lorsque la page est chargée. La plupart des lecteurs d'écran utiliseront `aria-describedby` afin de lire l'indication lorsque le libellé du champ aura été annoncé. La personne utilisant le lecteur d'écran pourra arrêter les annonces si elle estime que les informations supplémentaires ne sont pas nécessaires.
 
-<pre class="brush:html">&lt;label for="user-email"&gt;Votre adresse mail&lt;/label&gt;
-&lt;span id="user-email-hint" class="input-hint"&gt;Exemple : johndoe@example.com&lt;/span&gt;
-&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
-</pre>
+```html
+<label for="user-email">Votre adresse mail</label>
+<span id="user-email-hint" class="input-hint">Exemple : johndoe@example.com</span>
+<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
+```
 
-<ul>
- <li><a href="https://www.nngroup.com/articles/form-design-placeholders/"><em>Placeholders in Form Fields Are Harmful</em> — Nielsen Norman Group (en anglais)</a></li>
-</ul>
+- [_Placeholders in Form Fields Are Harmful_ — Nielsen Norman Group (en anglais)](https://www.nngroup.com/articles/form-design-placeholders/)
 
-<h3 id="Mode_«_contraste_élevé_»_de_Windows">Mode « contraste élevé » de Windows</h3>
+### Mode « contraste élevé » de Windows
 
-<p>Lorsque le <a href="/en-US/docs/Web/CSS/@media/-ms-high-contrast">mode de contraste élevé de Windows</a> est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.</p>
+Lorsque le [mode de contraste élevé de Windows](/en-US/docs/Web/CSS/@media/-ms-high-contrast) est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.
 
-<ul>
- <li><a href="https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — Comment utiliser <code>-ms-high-contrast</code> (en anglais)</a></li>
- <li>{{cssxref("@media/-ms-high-contrast")}}</li>
-</ul>
+- [Greg Whitworth — Comment utiliser `-ms-high-contrast` (en anglais)](https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast)
+- {{cssxref("@media/-ms-high-contrast")}}
 
-<h3 id="Libellés_(HTMLElement(&lt;label>))">Libellés ({{HTMLElement("&lt;label&gt;")}})</h3>
+### Libellés ({{HTMLElement("&lt;label&gt;")}})
 
-<p>Les textes de substitution ne doivent pas remplacer les éléments {{htmlelement("label")}}. Sans libellé associé grâce à {{htmlattrxref("for", "label")}} et à {{htmlattrxref("id")}}, les outils d'assistance tels que les lecteurs d'écran ne peuvent pas correctement analyser les éléments {{htmlelement("input")}}.</p>
+Les textes de substitution ne doivent pas remplacer les éléments {{htmlelement("label")}}. Sans libellé associé grâce à {{htmlattrxref("for", "label")}} et à {{htmlattrxref("id")}}, les outils d'assistance tels que les lecteurs d'écran ne peuvent pas correctement analyser les éléments {{htmlelement("input")}}.
 
-<ul>
- <li><a href="/fr/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">Fournir des indications simples dans un formulaire</a></li>
- <li><a href="https://www.nngroup.com/articles/form-design-placeholders/"><em>Placeholders in Form Fields Are Harmful</em> — Nielsen Norman Group (en anglais)</a></li>
-</ul>
+- [Fournir des indications simples dans un formulaire](/fr/docs/Web/Accessibility/ARIA/forms/Basic_form_hints)
+- [_Placeholders in Form Fields Are Harmful_ — Nielsen Norman Group (en anglais)](https://www.nngroup.com/articles/form-design-placeholders/)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
-   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
-   <td>Définitions initiales.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                         | Commentaires           |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------- |
+| {{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Définitions initiales. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.placeholder")}}</p>
+{{Compat("css.selectors.placeholder")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref(":placeholder-shown")}} qui permet de mettre en forme un élément qui possède un <em>placeholder</em> actif
+- {{cssxref(":placeholder-shown")}} qui permet de mettre en forme un élément qui possède un _placeholder_ actif
 
-  <ul>
-  </ul>
- </li>
- <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li>{{HTMLElement("textarea")}}</li>
- <li>Les équivalents <strong>non-standards</strong> :
-  <ul>
-   <li>{{cssxref("::-webkit-input-placeholder")}}</li>
-   <li>{{cssxref("::placeholder")}}</li>
-   <li>{{cssxref(":-ms-input-placeholder")}}</li>
-  </ul>
- </li>
-</ul>
+- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Forms_in_HTML)
+- {{HTMLElement("input")}}
+- {{HTMLElement("textarea")}}
+- Les équivalents **non-standards** :
+
+  - {{cssxref("::-webkit-input-placeholder")}}
+  - {{cssxref("::placeholder")}}
+  - {{cssxref(":-ms-input-placeholder")}}
diff --git a/files/fr/web/css/_doublecolon_selection/index.md b/files/fr/web/css/_doublecolon_selection/index.md
index 2072d308a1..b6fd689e55 100644
--- a/files/fr/web/css/_doublecolon_selection/index.md
+++ b/files/fr/web/css/_doublecolon_selection/index.md
@@ -7,43 +7,43 @@ tags:
   - Reference
 translation_of: Web/CSS/::selection
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::selection</code></strong> permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).</p>
+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::selection`** permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).
 
-<pre class="brush: css no-line-numbers">::selection {
+```css
+::selection {
   background-color: cyan;
-}</pre>
+}
+```
 
-<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+## Propriétés autorisées
 
-<p>Seul un sous-ensemble des propriétés CSS peut être utilisé pour une règle dont le sélecteur contient <code>::selection</code> :</p>
+Seul un sous-ensemble des propriétés CSS peut être utilisé pour une règle dont le sélecteur contient `::selection` :
 
-<ul>
- <li>{{cssxref("color")}},</li>
- <li>{{cssxref("background-color")}},</li>
- <li>{{cssxref("cursor")}},</li>
- <li>{{cssxref("caret-color")}},</li>
- <li>{{cssxref("outline")}} ainsi que les propriétés détaillées associées,</li>
- <li>{{cssxref("text-decoration")}} ainsi que les propriétés détaillées associées,</li>
- <li>{{cssxref("text-emphasis-color")}},</li>
- <li>{{cssxref("text-shadow")}}.</li>
-</ul>
+- {{cssxref("color")}},
+- {{cssxref("background-color")}},
+- {{cssxref("cursor")}},
+- {{cssxref("caret-color")}},
+- {{cssxref("outline")}} ainsi que les propriétés détaillées associées,
+- {{cssxref("text-decoration")}} ainsi que les propriétés détaillées associées,
+- {{cssxref("text-emphasis-color")}},
+- {{cssxref("text-shadow")}}.
 
-<p>On notera que {{cssxref("background-image")}} est ignorée, comme les autres propriétés.</p>
+On notera que {{cssxref("background-image")}} est ignorée, comme les autres propriétés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">/*Syntaxe propre à Firefox (61 et antérieur) */
-::-moz-selection
-{{csssyntax}}
-</pre>
+    /*Syntaxe propre à Firefox (61 et antérieur) */
+    ::-moz-selection
+    {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* du texte sélectionné sera jaune sur fond rouge */
+```css
+/* du texte sélectionné sera jaune sur fond rouge */
 ::-moz-selection {
   color: gold;
   background-color: red;
@@ -64,68 +64,51 @@ p::-moz-selection {
 p::selection {
   color: white;
   background-color: black;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;Un peu de texte pour tester ::selection.&lt;/div&gt;
-&lt;p&gt;Essayez également de sélectionner du texte dans ce &amp;lt;p&amp;gt;&lt;/p&gt;</pre>
+```html
+<div>Un peu de texte pour tester ::selection.</div>
+<p>Essayez également de sélectionner du texte dans ce &lt;p&gt;</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Il est recommandé de <strong>ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques</strong> et notamment si l'utilisateur a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.</p>
+Il est recommandé de **ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques** et notamment si l'utilisateur a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.
 
-<p>Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.</p>
+Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.
 
-<p>La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :</p>
+La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/intro/wcag), un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :
 
-<ul>
- <li>Si le texte est en gras : 18.66px ou plus grand</li>
- <li>Sinon 24px ou plus grand</li>
-</ul>
+- Si le texte est en gras : 18.66px ou plus grand
+- Sinon 24px ou plus grand
 
-<p>Quelques ressources :</p>
+Quelques ressources :
 
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li>
- <li><a href="/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">Explications des recommendation WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
-</ul>
+- [WebAIM : vérificateur de contraste](https://webaim.org/resources/contrastchecker/)
+- [Explications des recommendation 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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
-   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Définition initiale. |
 
-<div class="note">
-<p><strong>Note :</strong> Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie <a href="https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(selon une discussion de la liste de diffusion W3C Style)</a>.</p>
-<p>Le pseudo-élément <code>::selection</code> a de nouveau été ajouté dans la spécification pour <a href="https://dev.w3.org/csswg/css-pseudo-4/">les pseudo-éléments de niveau 4</a>.</p>
-</div>
+> **Note :** Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie [(selon une discussion de la liste de diffusion W3C Style)](https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html).
+>
+> Le pseudo-élément `::selection` a de nouveau été ajouté dans la spécification pour [les pseudo-éléments de niveau 4](https://dev.w3.org/csswg/css-pseudo-4/).
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.selection")}}</p>
+{{Compat("css.selectors.selection")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("pointer-events")}} qui contrôle les évènements actifs sur l'élément</li>
-</ul>
+- {{cssxref("pointer-events")}} qui contrôle les évènements actifs sur l'élément
diff --git a/files/fr/web/css/_doublecolon_slotted/index.md b/files/fr/web/css/_doublecolon_slotted/index.md
index 0737e7ba63..1f7e5f9bc4 100644
--- a/files/fr/web/css/_doublecolon_slotted/index.md
+++ b/files/fr/web/css/_doublecolon_slotted/index.md
@@ -1,54 +1,58 @@
 ---
 title: '::slotted()'
-slug: 'Web/CSS/::slotted'
+slug: Web/CSS/::slotted
 tags:
   - CSS
   - Pseudo-element
   - Reference
   - Web
-translation_of: 'Web/CSS/::slotted'
+translation_of: Web/CSS/::slotted
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> CSS <strong><code>::slotted()</code></strong> représente n'importe quel élément ayant été placé à l'intérieur d'un emplacement (<em>slot</em>) au sein d'un gabarit (<em>template</em>) HTML (cf. <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les gabarits et les emplacements</a> pour plus d'informations).</p>
+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-éléments) CSS **`::slotted()`** représente n'importe quel élément ayant été placé à l'intérieur d'un emplacement (_slot_) au sein d'un gabarit (_template_) HTML (cf. [Utiliser les gabarits et les emplacements](/fr/docs/Web/Web_Components/Using_templates_and_slots) pour plus d'informations).
 
-<p>Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément {{htmlelement("template")}} et/ou dans le <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em>. On notera également que ce sélecteur ne sélectionnera pas les noeuds texte placés dans les emplacements, il ne cible que les éléments.</p>
+Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément {{htmlelement("template")}} et/ou dans le _[shadow DOM](/fr/docs/Web/Web_Components/Using_shadow_DOM)_. On notera également que ce sélecteur ne sélectionnera pas les noeuds texte placés dans les emplacements, il ne cible que les éléments.
 
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément placé dans un emplacement */
+```css
+/* Cible n'importe quel élément placé dans un emplacement */
 ::slotted(*) {
   font-weight: bold;
 }
 
-/* Cible n'importe quel élément &lt;span&gt; placé dans un emplacement */
+/* Cible n'importe quel élément <span> placé dans un emplacement */
 ::slotted(span) {
   font-weight: bold;
 }
-</pre>
+```
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Les fragments de code suivants sont tirés du dépôt <code><a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">slotted-pseudo-element</a></code> (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">voir le résultat en <em>live</em></a>).</p>
+Les fragments de code suivants sont tirés du dépôt [`slotted-pseudo-element`](https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element) ([voir le résultat en _live_](https://mdn.github.io/web-components-examples/slotted-pseudo-element/)).
 
-<p>Dans cette démonstration, on utilise un gabarit avec trois emplacements :</p>
+Dans cette démonstration, on utilise un gabarit avec trois emplacements :
 
-<pre class="brush: html">&lt;template id="person-template"&gt;
-  &lt;div&gt;
-    &lt;h2&gt;Carte d'identité d'une personne&lt;/h2&gt;
-    &lt;slot name="person-name"&gt;NOM ABSENT&lt;/slot&gt;
-    &lt;ul&gt;
-      &lt;li&gt;&lt;slot name="person-age"&gt;AGE ABSENT&lt;/slot&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;slot name="person-occupation"&gt;POSTE ABSENT&lt;/slot&gt;&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/div&gt;
-&lt;/template&gt;</pre>
+```html
+<template id="person-template">
+  <div>
+    <h2>Carte d'identité d'une personne</h2>
+    <slot name="person-name">NOM ABSENT</slot>
+    <ul>
+      <li><slot name="person-age">AGE ABSENT</slot></li>
+      <li><slot name="person-occupation">POSTE ABSENT</slot></li>
+    </ul>
+  </div>
+</template>
+```
 
-<p>Un élément personnalisé — <code>&lt;person-details&gt;</code> — est défini de la façon suivante :</p>
+Un élément personnalisé — `<person-details>` — est défini de la façon suivante :
 
-<pre class="brush: js">customElements.define('person-details',
+```js
+customElements.define('person-details',
   class extends HTMLElement {
     constructor() {
       super();
@@ -67,43 +71,31 @@ translation_of: 'Web/CSS/::slotted'
       shadowRoot.appendChild(style);
       shadowRoot.appendChild(templateContent.cloneNode(true));
   }
-})</pre>
-
-<p>On voit ici que, lorsqu'on renseigne le <code>style</code> de l'élément, on sélectionne tous les éléments présents dans les emplacements (<code>::slotted(*)</code>) afin de leur fournir différentes polices et couleurs. Cela permet d'avoir une meilleur vision des emplacements qui ne sont pas encore occupés.</p>
-
-<p>Voici ce à quoi ressemblera l'élément lorsqu'il sera inséré dans la page :</p>
-
-<pre class="brush: html">&lt;person-details&gt;
-  &lt;p slot="person-name"&gt;Dr. Shazaam&lt;/p&gt;
-  &lt;span slot="person-age"&gt;Immortel&lt;/span&gt;
-  &lt;span slot="person-occupation"&gt;Super-héros&lt;/span&gt;
-&lt;/person-details&gt;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Scope', '#slotted-pseudo', '::slotted')}}</td>
-   <td>{{Spec2('CSS Scope')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.slotted")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
-</ul>
+})
+```
+
+On voit ici que, lorsqu'on renseigne le `style` de l'élément, on sélectionne tous les éléments présents dans les emplacements (`::slotted(*)`) afin de leur fournir différentes polices et couleurs. Cela permet d'avoir une meilleur vision des emplacements qui ne sont pas encore occupés.
+
+Voici ce à quoi ressemblera l'élément lorsqu'il sera inséré dans la page :
+
+```html
+<person-details>
+  <p slot="person-name">Dr. Shazaam</p>
+  <span slot="person-age">Immortel</span>
+  <span slot="person-occupation">Super-héros</span>
+</person-details>
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('CSS Scope', '#slotted-pseudo', '::slotted')}} | {{Spec2('CSS Scope')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.slotted")}}
+
+## Voir aussi
+
+- [Les composants web](/fr/docs/Web/Web_Components)
diff --git a/files/fr/web/css/_doublecolon_spelling-error/index.md b/files/fr/web/css/_doublecolon_spelling-error/index.md
index 5fc89ba317..8405cdfc65 100644
--- a/files/fr/web/css/_doublecolon_spelling-error/index.md
+++ b/files/fr/web/css/_doublecolon_spelling-error/index.md
@@ -1,82 +1,71 @@
 ---
 title: '::spelling-error'
-slug: 'Web/CSS/::spelling-error'
+slug: Web/CSS/::spelling-error
 tags:
   - CSS
   - Experimental
   - Pseudo-element
   - Reference
-translation_of: 'Web/CSS/::spelling-error'
+translation_of: Web/CSS/::spelling-error
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>Le pseudo-élément <strong><code>::spelling-error</code></strong> représente une portion de texte que le navigateur signale comme étant mal orthographiée.</p>
+Le pseudo-élément **`::spelling-error`** représente une portion de texte que le navigateur signale comme étant mal orthographiée.
 
-<pre class="brush: css no-line-numbers">::spelling-error {
+```css
+::spelling-error {
   color: red;
-}</pre>
+}
+```
 
-<h2 id="Propriétés_autoriséees">Propriétés autoriséees</h2>
+## Propriétés autoriséees
 
-<p>Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle dont le sélecteur contient <code>::spelling-error</code> :</p>
+Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle dont le sélecteur contient `::spelling-error` :
 
-<ul>
- <li>{{cssxref("color")}},</li>
- <li>{{cssxref("background-color")}},</li>
- <li>{{cssxref("cursor")}},</li>
- <li>{{cssxref("caret-color")}}</li>
- <li>{{cssxref("outline")}} et les propriétés détaillées correspondantes,</li>
- <li>{{cssxref("text-decoration")}} et les propriétés détaillées correspondantes.</li>
- <li>{{cssxref("text-emphasis-color")}},</li>
- <li>{{cssxref("text-shadow")}}</li>
-</ul>
+- {{cssxref("color")}},
+- {{cssxref("background-color")}},
+- {{cssxref("cursor")}},
+- {{cssxref("caret-color")}}
+- {{cssxref("outline")}} et les propriétés détaillées correspondantes,
+- {{cssxref("text-decoration")}} et les propriétés détaillées correspondantes.
+- {{cssxref("text-emphasis-color")}},
+- {{cssxref("text-shadow")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">::spelling-error</pre>
+    ::spelling-error
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p::spelling-error { color:red }</pre>
+```css
+p::spelling-error { color:red }
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Alice devina tout de suite qu’il cherch l’éventail
   et la paire de gants.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","250","100")}}</p>
+{{EmbedLiveSample("Exemples","250","100")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}</td>
-   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | État                                         | Commentaires        |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------- |
+| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.spelling-error")}}</p>
+{{Compat("css.selectors.spelling-error")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("::grammar-error")}}</li>
-</ul>
+- {{cssxref("::grammar-error")}}
diff --git a/files/fr/web/css/_doublecolon_target-text/index.md b/files/fr/web/css/_doublecolon_target-text/index.md
index b576694e50..77125839b7 100644
--- a/files/fr/web/css/_doublecolon_target-text/index.md
+++ b/files/fr/web/css/_doublecolon_target-text/index.md
@@ -1,43 +1,45 @@
 ---
 title: '::target-text'
-slug: 'Web/CSS/::target-text'
+slug: Web/CSS/::target-text
+translation_of: Web/CSS/::target-text
 browser-compat: css.selectors.target-text
-translation_of: 'Web/CSS/::target-text'
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::target-text</code></strong> représente le texte vers lequel l'écran vient de défiler, dans le cas où le  navigateur prend en charge les fragments <code>scroll-to-text</code>. Il permet aux auteurs de mettre en valeur cette section de texte.</p>
+Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) [CSS](/en-US/docs/Web/CSS) **`::target-text`** représente le texte vers lequel l'écran vient de défiler, dans le cas où le navigateur prend en charge les fragments `scroll-to-text`. Il permet aux auteurs de mettre en valeur cette section de texte.
 
-<pre class="brush: css no-line-numbers">::target-text {
+```css
+::target-text {
   background-color: pink;
-}</pre>
+}
+```
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="highlighting_scroll-to-text">Mise en valeur de scroll-to-text</h3>
+### Mise en valeur de scroll-to-text
 
-<pre class="brush: css no-line-numbers">::target-text {
+```css
+::target-text {
   background-color: rebeccapurple;
   color: white;
   font-weight: bold;
-}</pre>
+}
+```
 
-<p>Pour voir ce code CSS en action, suivez ce lien vers la <a href="https://mdn.github.io/css-examples/target-text/index.html#:~:text=From%20the%20foregoing%20remarks%20we%20may%20gather%20an%20idea%20of%20the%20importance">démonstration de scroll-to-text</a>.</p>
+Pour voir ce code CSS en action, suivez ce lien vers la [démonstration de scroll-to-text](https://mdn.github.io/css-examples/target-text/index.html#:~:text=From%20the%20foregoing%20remarks%20we%20may%20gather%20an%20idea%20of%20the%20importance).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://web.dev/text-fragments/">Text fragments (en anglais)</a></li>
-</ul>
+- [Text fragments (en anglais)](https://web.dev/text-fragments/)
diff --git a/files/fr/web/css/accent-color/index.md b/files/fr/web/css/accent-color/index.md
index 99717b6404..b2b898ad63 100644
--- a/files/fr/web/css/accent-color/index.md
+++ b/files/fr/web/css/accent-color/index.md
@@ -1,19 +1,20 @@
 ---
 title: accent-color
 slug: Web/CSS/accent-color
-browser-compat: css.properties.accent-color
 translation_of: Web/CSS/accent-color
+browser-compat: css.properties.accent-color
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>accent-color</code></strong> définit la couleur d'accentuation ({{Glossary("accent")}}) des éléments. Une accentuation est présente sur des éléments HTML tels que des {{HTMLElement("input")}} de type <code><a href="/fr/docs/Web/HTML/Element/input/checkbox">checkbox</a></code> ou <code><a href="/fr/docs/Web/HTML/Element/input/radio">radio</a></code>.</p>
+La propriété [CSS](/fr/docs/Web/CSS) **`accent-color`** définit la couleur d'accentuation ({{Glossary("accent")}}) des éléments. Une accentuation est présente sur des éléments HTML tels que des {{HTMLElement("input")}} de type [`checkbox`](/fr/docs/Web/HTML/Element/input/checkbox) ou [`radio`](/fr/docs/Web/HTML/Element/input/radio).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 accent-color: auto;
 
-/* Valeurs de &lt;color&gt; */
+/* Valeurs de <color> */
 accent-color: red;
 accent-color: #5729e9;
 accent-color: rgb(0, 200, 0);
@@ -23,38 +24,39 @@ accent-color: hsl(228, 4%, 24%);
 accent-color: inherit;
 accent-color: initial;
 accent-color: revert;
-accent-color: unset;</pre>
+accent-color: unset;
+```
 
-<h3 id="Values">Valeurs</h3>
+### Valeurs
 
-<dl>
-  <dt><code>auto</code></dt>
-  <dd>Représente une couleur déterminée par l'agent utilisateur, qui devrait correspondre à la couleur d'accentuation de la plateforme, s'il y en a une.
-  </dd>
-  <dt>{{cssxref("&lt;color&gt;")}}</dt>
-  <dd>Spécifie la couleur à utiliser en tant que couleur d'accentuation.</dd>
-</dl>
+- `auto`
+  - : Représente une couleur déterminée par l'agent utilisateur, qui devrait correspondre à la couleur d'accentuation de la plateforme, s'il y en a une.
+- {{cssxref("&lt;color&gt;")}}
+  - : Spécifie la couleur à utiliser en tant que couleur d'accentuation.
 
-<h2 id="Formal_definition">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax">Syntaxe formelle</h2>
+## Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<h3 id="Setting_a_custom_accent_color">Définir une couleur d'accentuation personnalisée</h3>
+### Définir une couleur d'accentuation personnalisée
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;input type="checkbox" checked /&gt;
-&lt;input type="checkbox" class="custom" checked /&gt;</pre>
+```html
+<input type="checkbox" checked />
+<input type="checkbox" class="custom" checked />
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">input {
+```css
+input {
   accent-color: auto;
   display: block;
   width: 30px;
@@ -64,25 +66,23 @@ accent-color: unset;</pre>
 input.custom {
   accent-color: rebeccapurple;
 }
-</pre>
+```
 
-<h4 id="Result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Setting_a_custom_accent_color', 500, 200)}}</p>
+{{EmbedLiveSample('Setting_a_custom_accent_color', 500, 200)}}
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément {{HTMLElement("input")}}</li>
-  <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML grâce à CSS</a></li>
-  <li>Le type de donnée {{cssxref("&lt;color&gt;")}}</li>
-  <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
-</ul>
+- L'élément {{HTMLElement("input")}}
+- [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
+- Le type de donnée {{cssxref("&lt;color&gt;")}}
+- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}
diff --git a/files/fr/web/css/actual_value/index.md b/files/fr/web/css/actual_value/index.md
index c0d975771f..27a2106ac3 100644
--- a/files/fr/web/css/actual_value/index.md
+++ b/files/fr/web/css/actual_value/index.md
@@ -8,46 +8,29 @@ tags:
 translation_of: Web/CSS/actual_value
 original_slug: Web/CSS/valeur_reelle
 ---
-<div>{{CSSRef}}</div>
-
-<p>La <strong>valeur réelle</strong> d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> pour l'épaisseur de la bordure.</p>
-
-<h2 id="Calculer_la_valeur_réelle_d'une_propriété">Calculer la valeur réelle d'une propriété</h2>
-
-<p>La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :</p>
-
-<ol>
- <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La valeur initiale</a> (indiquée par la spécification).</li>
- <li><a href="/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e">La valeur définie</a> qui résulte de <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">l'héritage et de la cascade</a>.</li>
- <li><a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">La valeur calculée</a> est calculée selon la spécification.</li>
- <li>La disposition est calculée, fournissant ainsi <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">la valeur utilisée</a>.</li>
- <li><em>La valeur réelle</em></li>
-</ol>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La valeur initiale</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e">La valeur définie</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">La valeur calculée</a></li>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
-</ul>
+{{CSSRef}}
+
+La **valeur réelle** d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer [la valeur calculée](/fr/docs/Web/CSS/Valeur_calcul%C3%A9e) pour l'épaisseur de la bordure.
+
+## Calculer la valeur réelle d'une propriété
+
+La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :
+
+1.  [La valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) (indiquée par la spécification).
+2.  [La valeur définie](/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e) qui résulte de [l'héritage et de la cascade](/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage).
+3.  [La valeur calculée](/fr/docs/Web/CSS/Valeur_calcul%C3%A9e) est calculée selon la spécification.
+4.  La disposition est calculée, fournissant ainsi [la valeur utilisée](/fr/docs/Web/CSS/Valeur_utilis%C3%A9e).
+5.  _La valeur réelle_
+
+## Spécifications
+
+| Spécification                                                                            | État                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ------------------------ | -------------------- |
+| {{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}} | {{Spec2('CSS2.1')}} | Définition initiale. |
+
+## Voir aussi
+
+- [La valeur initiale](/fr/docs/Web/CSS/Valeur_initiale)
+- [La valeur définie](/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e)
+- [La valeur calculée](/fr/docs/Web/CSS/Valeur_calcul%C3%A9e)
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
diff --git a/files/fr/web/css/adjacent_sibling_combinator/index.md b/files/fr/web/css/adjacent_sibling_combinator/index.md
index c6100f0b8e..edd67d5fde 100644
--- a/files/fr/web/css/adjacent_sibling_combinator/index.md
+++ b/files/fr/web/css/adjacent_sibling_combinator/index.md
@@ -8,76 +8,57 @@ tags:
 translation_of: Web/CSS/Adjacent_sibling_combinator
 original_slug: Web/CSS/Combinateur_de_voisin_direct
 ---
-<div>{{CSSRef("Selectors")}}</div>
+{{CSSRef("Selectors")}}
 
-<p>Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.</p>
+Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.
 
-<pre class="brush: css">/* Ne cible que les paragraphes situé directement après une image */
+```css
+/* Ne cible que les paragraphes situé directement après une image */
 img + p {
   font-style: bold;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">premier_element + element_cible { <em>styles</em> }
-</pre>
+    premier_element + element_cible { styles }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">li:first-of-type + li {
+```css
+li:first-of-type + li {
   color: red;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 200, 100)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Renomme ce sélecteur en « <em>next-sibling combinator</em> ».</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.adjacent_sibling")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+```
+
+### HTML
 
+```html
 <ul>
- <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Les combinateurs d'éléments voisins</a></li>
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
 </ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 200, 100)}}
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                 | Commentaires                                           |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| {{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}     | {{Spec2('CSS4 Selectors')}} | Renomme ce sélecteur en « _next-sibling combinator_ ». |
+| {{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}} | {{Spec2('CSS3 Selectors')}} |                                                        |
+| {{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}         | {{Spec2('CSS2.1')}}             | Définition initiale.                                   |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.adjacent_sibling")}}
+
+## Voir aussi
+
+- [Les combinateurs d'éléments voisins](/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux)
diff --git a/files/fr/web/css/align-content/index.md b/files/fr/web/css/align-content/index.md
index 014928628a..7c0d79e58c 100644
--- a/files/fr/web/css/align-content/index.md
+++ b/files/fr/web/css/align-content/index.md
@@ -7,19 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/align-content
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>align-content</code></strong> définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">un conteneur de boîte flexible</a> et le long de l'axe principal lorsque le conteneur est une grille.</p>
+La propriété CSS **`align-content`** définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est [un conteneur de boîte flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) et le long de l'axe principal lorsque le conteneur est une grille.
 
-<p>L'exemple qui suit utilise une grille comme conteneur afin d'illustrer le comportement des valeurs de cette propriété.</p>
+L'exemple qui suit utilise une grille comme conteneur afin d'illustrer le comportement des valeurs de cette propriété.
 
-<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div>
+{{EmbedInteractiveExample("pages/css/align-content.html")}}
 
-<p>Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec <code>flex-wrap: nowrap</code> par exemple).</p>
+Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec `flex-wrap: nowrap` par exemple).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Alignement le long de l'axe */
+```css
+/* Alignement le long de l'axe */
 /* Note : align-content ne prend pas en charge les valeurs left et right */
 align-content: center;     /* Les éléments sont groupés au centre */
 align-content: start;      /* Les éléments sont groupés au début  */
@@ -56,51 +57,50 @@ align-content: unsafe center;
 /* Valeurs globales */
 align-content: inherit;
 align-content: initial;
-align-content: unset;</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>start</code></dt>
- <dd>Les éléments sont regroupés vers le bord au début de l'axe de bloc.</dd>
- <dt><code>end</code></dt>
- <dd>Les éléments sont regroupés vers le bord à la fin de l'axe de bloc.</dd>
- <dt><code>flex-start</code></dt>
- <dd>Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de <code>start</code>.</dd>
- <dt><code>flex-end</code></dt>
- <dd>Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de <code>end</code>.</dd>
- <dt><code>center</code></dt>
- <dd>Les éléments sont regroupés au centre de l'axe de bloc.</dd>
- <dt><code>normal</code></dt>
- <dd>Les éléments sont groupés sur leur position par défaut, comme si <code>align-content</code> n'avait pas été défini.</dd>
- <dt><code>baseline<br>
- first baseline</code><br>
- <code>last baseline</code></dt>
- <dd><img alt="La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend." src="410px-typography_line_terms.svg.png">Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
- Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
- <dt><code>space-between</code></dt>
- <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.</dd>
- <dt><code>space-around</code></dt>
- <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, la moitié de cet espace est utilisée entre le premier élément et le bord au début du conteneur et la moitié de cet espace est utilisée entre le dernier élément et le bord à la fin du conteneur</dd>
- <dt><code>space-evenly</code></dt>
- <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, entre le premier élément et le bord du conteneur et entre le dernier élément et le bord du conteneur.</dd>
- <dt><code>stretch</code></dt>
- <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en bloc, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
- <dt><code>safe</code></dt>
- <dd>Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Si l'élément dépasse du conteneur avec la valeur d'alignement indiquée, l'élément sera alors aligné avec la valeur <code>start</code>.</dd>
- <dt><code>unsafe</code></dt>
- <dd>Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+align-content: unset;
+```
+
+### Valeurs
+
+- `start`
+  - : Les éléments sont regroupés vers le bord au début de l'axe de bloc.
+- `end`
+  - : Les éléments sont regroupés vers le bord à la fin de l'axe de bloc.
+- `flex-start`
+  - : Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de `start`.
+- `flex-end`
+  - : Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de `end`.
+- `center`
+  - : Les éléments sont regroupés au centre de l'axe de bloc.
+- `normal`
+  - : Les éléments sont groupés sur leur position par défaut, comme si `align-content` n'avait pas été défini.
+- `baseline first baseline`
+  `last baseline`
+  - : ![La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend.](410px-typography_line_terms.svg.png)Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.
+    Si `first baseline` n'est pas prise en charge, la valeur correspondra à `start`, si `last baseline` n'est pas prise en charge, la valeur correspondra à `end`.
+- `space-between`
+  - : Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.
+- `space-around`
+  - : Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, la moitié de cet espace est utilisée entre le premier élément et le bord au début du conteneur et la moitié de cet espace est utilisée entre le dernier élément et le bord à la fin du conteneur
+- `space-evenly`
+  - : Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, entre le premier élément et le bord du conteneur et entre le dernier élément et le bord du conteneur.
+- `stretch`
+  - : Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en bloc, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.
+- `safe`
+  - : Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Si l'élément dépasse du conteneur avec la valeur d'alignement indiquée, l'élément sera alors aligné avec la valeur `start`.
+- `unsafe`
+  - : Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   height:200px;
   width: 240px;
   align-content: center; /* Cette valeur peut être changée dans la démonstration */
@@ -117,7 +117,7 @@ align-content: unset;</pre>
   grid-template-columns: repeat(auto-fill, 50px);
 }
 
-div &gt; div {
+div > div {
   box-sizing: border-box;
   border: 2px solid #8c8c8c;
   width: 50px;
@@ -164,61 +164,63 @@ select {
 .row {
   margin-top: 10px;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="container" class="flex"&gt;
-  &lt;div id="item1"&gt;1&lt;/div&gt;
-  &lt;div id="item2"&gt;2&lt;/div&gt;
-  &lt;div id="item3"&gt;3&lt;/div&gt;
-  &lt;div id="item4"&gt;4&lt;/div&gt;
-  &lt;div id="item5"&gt;5&lt;/div&gt;
-  &lt;div id="item6"&gt;6&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="row"&gt;
-  &lt;label for="display"&gt;display: &lt;/label&gt;
-  &lt;select id="display"&gt;
-    &lt;option value="flex"&gt;flex&lt;/option&gt;
-    &lt;option value="grid"&gt;grid&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/div&gt;
-
-&lt;div class="row"&gt;
-  &lt;label for="values"&gt;align-content: &lt;/label&gt;
-  &lt;select id="values"&gt;
-    &lt;option value="normal"&gt;normal&lt;/option&gt;
-    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
-    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
-    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
-    &lt;option value="center" selected&gt;center&lt;/option&gt;
-    &lt;option value="space-between"&gt;space-between&lt;/option&gt;
-    &lt;option value="space-around"&gt;space-around&lt;/option&gt;
-    &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
-
-    &lt;option value="start"&gt;start&lt;/option&gt;
-    &lt;option value="end"&gt;end&lt;/option&gt;
-    &lt;option value="left"&gt;left&lt;/option&gt;
-    &lt;option value="right"&gt;right&lt;/option&gt;
-
-    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
-    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
-    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
-
-    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
-    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
-    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
-    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
-    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
-    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
-    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
-    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: js hidden">var values = document.getElementById('values');
+```
+
+### HTML
+
+```html
+<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-content: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="stretch">stretch</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="space-between">space-between</option>
+    <option value="space-around">space-around</option>
+    <option value="space-evenly">space-evenly</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+
+    <option value="baseline">baseline</option>
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+```
+
+```js hidden
+var values = document.getElementById('values');
 var display = document.getElementById('display');
 var container = document.getElementById('container');
 
@@ -229,56 +231,37 @@ values.addEventListener('change', function (evt) {
 display.addEventListener('change', function (evt) {
   container.className = evt.target.value;
 });
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 260, 290)}}</p>
+{{EmbedLiveSample("Exemples", 260, 290)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td>Ajout des valeurs <code>[ first | last ]? baseline</code>, <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> et <code>unsafe | safe</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}</td>
-   <td>{{Spec2("CSS3 Flexbox")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                     | Commentaires                                                                                          |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}} | {{Spec2("CSS3 Box Alignment")}} | Ajout des valeurs `[ first \| last ]? baseline`, `start`, `end`, `left`, `right` et `unsafe \| safe`. |
+| {{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}                     | {{Spec2("CSS3 Flexbox")}}         | Définition initiale.                                                                                  |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.align-content")}}</p>
+{{Compat("css.properties.align-content")}}
 
-<h3 id="Prise_en_charge_pour_les_dispositions_flexibles_(Flexbox)">Prise en charge pour les dispositions flexibles (<em>Flexbox</em>)</h3>
+### Prise en charge pour les dispositions flexibles (_Flexbox_)
 
-<p>{{Compat("css.properties.align-content.flex_context")}}</p>
+{{Compat("css.properties.align-content.flex_context")}}
 
-<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_grilles_CSS">Prise en charge pour les dispositions avec les grilles CSS</h3>
+### Prise en charge pour les dispositions avec les grilles CSS
 
-<p>{{Compat("css.properties.align-content.grid_context")}}</p>
+{{Compat("css.properties.align-content.grid_context")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles</a></li>
- <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner des objets dans une grille</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></em></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
-</ul>
+- [Utiliser les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_
+- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)
diff --git a/files/fr/web/css/align-items/index.md b/files/fr/web/css/align-items/index.md
index 69e1fcd440..c28220d0e1 100644
--- a/files/fr/web/css/align-items/index.md
+++ b/files/fr/web/css/align-items/index.md
@@ -7,21 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/align-items
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>align-items</code></strong> définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.</p>
+La propriété CSS **`align-items`** définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.
 
-<p>La propriété <code>align-self</code> définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (<em>cross axis</em>). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de <a href="/fr/docs/Glossary/Grid_Areas">la zone de grille</a> correspondante.</p>
+La propriété `align-self` définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (_cross axis_). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de [la zone de grille](/fr/docs/Glossary/Grid_Areas) correspondante.
 
-<p>L'exemple qui suit illustre le fonctionnement des différentes valeurs de <code>align-items</code> au sein d'une grile.</p>
+L'exemple qui suit illustre le fonctionnement des différentes valeurs de `align-items` au sein d'une grile.
 
-<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div>
+{{EmbedInteractiveExample("pages/css/align-items.html")}}
 
-<p>À l'heure actuelle, cette propriété est prise en charge pour les dispositions <em>Flexbox</em> et grilles CSS. Pour les boîtes flexibles, cela contrôle l'alignement des objets sur l'axe secondaire et pour les grilles, cela contrôle l'alignement sur l'axe en bloc.</p>
+À l'heure actuelle, cette propriété est prise en charge pour les dispositions _Flexbox_ et grilles CSS. Pour les boîtes flexibles, cela contrôle l'alignement des objets sur l'axe secondaire et pour les grilles, cela contrôle l'alignement sur l'axe en bloc.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Mots-clés de base */
+```css
+/* Mots-clés de base */
 align-items: normal;
 align-items: stretch;
 
@@ -48,57 +49,59 @@ align-items: unsafe center;
 align-items: inherit;
 align-items: initial;
 align-items: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>L'effet obtenu avec ce mot-clé dépend du mode de disposition utilisé :
- <ul>
-  <li>Pour les éléments positionnés de façon absolue, ce mot-clé est synonyme de <code>start</code> pour les éléments remplacés, pour les autres éléments positionnés de façon absolue, il est synonyme de <code>stretch</code>.</li>
-  <li>Pour les éléments avec une position statique sur une disposition absolue, ce mot-clé se comporte comme <code>stretch</code>.</li>
-  <li>Pour les éléments flexibles, ce mot-clé est synonyme de <code>stretch</code>.</li>
-  <li>Pour les éléments d'une grille, ce mot-clé se comportera comme <code>stretch</code> sauf pour les boîtes ayant des dimensions intrinsèques où il se comporte comme <code>start</code>.</li>
-  <li>Cette propriété ne s'applique pas aux boîtes en bloc ou aux cellules de tableaux.</li>
- </ul>
- </dd>
- <dt><code>flex-start</code></dt>
- <dd>Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne au début de l'axe en bloc.</dd>
- <dt><code>flex-end</code></dt>
- <dd>Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne à la fin de l'axe en bloc.</dd>
- <dt><code>center</code></dt>
- <dd>Les éléments flexibles sont centrés sur l'axe en bloc au sein de la ligne. Si ces éléments sont plus grands que la ligne, ils dépasseront également de chaque côté.</dd>
- <dt><code>start</code></dt>
- <dd>Les éléments sont alignés sur le bord au début du conteneur selon l'axe de bloc.</dd>
- <dt><code>end</code></dt>
- <dd>Les éléments sont alignés sur le bord à la fin du conteneur selon l'axe de bloc</dd>
- <dt><code>center</code></dt>
- <dd>Les éléments sont centrés sur l'axe en bloc du conteneur.</dd>
- <dt><code>self-start</code></dt>
- <dd>Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.</dd>
- <dt><code>self-end</code></dt>
- <dd>Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.</dd>
- <dt><code>baseline</code></dt>
- <dt><code>first baseline<br>
- last baseline</code></dt>
- <dd>Tous les éléments flexibles sont alignés afin que <a href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">leurs différentes lignes de base</a> soient alignées. L'élément pour lequel on a la plus grande distance entre la marge et la ligne de base est aligné sur le bord de la ligne courante.</dd>
- <dt><code>stretch</code></dt>
- <dd>Les éléments flexibles sont étirés afin que la taille de la boîte de marge sur l'axe en bloc est la même que celle de la ligne sur laquelle l'élément se trouve, tout en respectant les contraintes de hauteur et de largeur.</dd>
- <dt><code>safe</code></dt>
- <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Si la taille d'un des éléments dépasse du conteneur avec la valeur d'alignement indiquée, l'alignement sera réalisé avec la valeur <code>start</code> à la place.</dd>
- <dt><code>unsafe</code></dt>
- <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Quelle que soit la taille relative et l'éventuel dépassement de l'élément par rapport au conteneur, la valeur indiquée pour l'alignement est respectée.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `normal`
+
+  - : L'effet obtenu avec ce mot-clé dépend du mode de disposition utilisé :
+
+    - Pour les éléments positionnés de façon absolue, ce mot-clé est synonyme de `start` pour les éléments remplacés, pour les autres éléments positionnés de façon absolue, il est synonyme de `stretch`.
+    - Pour les éléments avec une position statique sur une disposition absolue, ce mot-clé se comporte comme `stretch`.
+    - Pour les éléments flexibles, ce mot-clé est synonyme de `stretch`.
+    - Pour les éléments d'une grille, ce mot-clé se comportera comme `stretch` sauf pour les boîtes ayant des dimensions intrinsèques où il se comporte comme `start`.
+    - Cette propriété ne s'applique pas aux boîtes en bloc ou aux cellules de tableaux.
+
+- `flex-start`
+  - : Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne au début de l'axe en bloc.
+- `flex-end`
+  - : Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne à la fin de l'axe en bloc.
+- `center`
+  - : Les éléments flexibles sont centrés sur l'axe en bloc au sein de la ligne. Si ces éléments sont plus grands que la ligne, ils dépasseront également de chaque côté.
+- `start`
+  - : Les éléments sont alignés sur le bord au début du conteneur selon l'axe de bloc.
+- `end`
+  - : Les éléments sont alignés sur le bord à la fin du conteneur selon l'axe de bloc
+- `center`
+  - : Les éléments sont centrés sur l'axe en bloc du conteneur.
+- `self-start`
+  - : Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.
+- `self-end`
+  - : Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.
+- `baseline`
+
+  `first baseline last baseline`
+
+  - : Tous les éléments flexibles sont alignés afin que [leurs différentes lignes de base](https://drafts.csswg.org/css-flexbox-1/#flex-baselines) soient alignées. L'élément pour lequel on a la plus grande distance entre la marge et la ligne de base est aligné sur le bord de la ligne courante.
+
+- `stretch`
+  - : Les éléments flexibles sont étirés afin que la taille de la boîte de marge sur l'axe en bloc est la même que celle de la ligne sur laquelle l'élément se trouve, tout en respectant les contraintes de hauteur et de largeur.
+- `safe`
+  - : Ce mot-clé est utilisé avec un mot-clé d'alignement. Si la taille d'un des éléments dépasse du conteneur avec la valeur d'alignement indiquée, l'alignement sera réalisé avec la valeur `start` à la place.
+- `unsafe`
+  - : Ce mot-clé est utilisé avec un mot-clé d'alignement. Quelle que soit la taille relative et l'éventuel dépassement de l'élément par rapport au conteneur, la valeur indiquée pour l'alignement est respectée.
+
+### Syntaxe formelle
+
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   height:200px;
   width: 240px;
   align-items: center; /* Cette valeur peut être modifiée dans l'exemple */
@@ -115,7 +118,7 @@ align-items: unset;
   grid-template-columns: repeat(auto-fill, 50px);
 }
 
-div &gt; div {
+div > div {
   box-sizing: border-box;
   border: 2px solid #8c8c8c;
   width: 50px;
@@ -161,59 +164,62 @@ select {
 
 .row {
   margin-top: 10px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="container" class="flex"&gt;
-  &lt;div id="item1"&gt;1&lt;/div&gt;
-  &lt;div id="item2"&gt;2&lt;/div&gt;
-  &lt;div id="item3"&gt;3&lt;/div&gt;
-  &lt;div id="item4"&gt;4&lt;/div&gt;
-  &lt;div id="item5"&gt;5&lt;/div&gt;
-  &lt;div id="item6"&gt;6&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="row"&gt;
-  &lt;label for="display"&gt;display: &lt;/label&gt;
-  &lt;select id="display"&gt;
-    &lt;option value="flex"&gt;flex&lt;/option&gt;
-    &lt;option value="grid"&gt;grid&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/div&gt;
-
-&lt;div class="row"&gt;
-  &lt;label for="values"&gt;align-items: &lt;/label&gt;
-  &lt;select id="values"&gt;
-    &lt;option value="normal"&gt;normal&lt;/option&gt;
-    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
-    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
-    &lt;option value="center" selected&gt;center&lt;/option&gt;
-    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
-    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
-
-    &lt;option value="start"&gt;start&lt;/option&gt;
-    &lt;option value="end"&gt;end&lt;/option&gt;
-    &lt;option value="self-start"&gt;self-start&lt;/option&gt;
-    &lt;option value="self-end"&gt;self-end&lt;/option&gt;
-    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
-    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
-
-    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
-    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
-    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
-    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
-    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
-    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
-    &lt;option value="safe self-end"&gt;safe self-end&lt;/option&gt;
-    &lt;option value="unsafe self-end"&gt;unsafe self-end&lt;/option&gt;
-    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
-    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: js hidden">var values = document.getElementById('values');
+}
+```
+
+### HTML
+
+```html
+<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-items: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="baseline">baseline</option>
+    <option value="stretch">stretch</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="self-start">self-start</option>
+    <option value="self-end">self-end</option>
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe self-end">safe self-end</option>
+    <option value="unsafe self-end">unsafe self-end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+```
+
+```js hidden
+var values = document.getElementById('values');
 var display = document.getElementById('display');
 var container = document.getElementById('container');
 
@@ -224,55 +230,36 @@ values.addEventListener('change', function (evt) {
 display.addEventListener('change', function (evt) {
   container.className = evt.target.value;
 });
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "260px", "290px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
-
-<p>{{Compat("css.properties.align-items.flex_context")}}</p>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_en_grille">Prise en charge pour les dispositions en grille</h3>
-
-<p>{{Compat("css.properties.align-items.grid_context")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles CSS</a></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></em></li>
- <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner des objets dans une grille</a></em></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
- <li>La propriété {{cssxref("align-self")}}</li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "260px", "290px")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}} | {{Spec2("CSS3 Box Alignment")}} |                      |
+| {{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}         | {{Spec2('CSS3 Flexbox')}}         | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+### Prise en charge pour les dispositions flexibles
+
+{{Compat("css.properties.align-items.flex_context")}}
+
+### Prise en charge pour les dispositions en grille
+
+{{Compat("css.properties.align-items.grid_context")}}
+
+## Voir aussi
+
+- [Utiliser les boîtes flexibles CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_
+- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_
+- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)
+- La propriété {{cssxref("align-self")}}
diff --git a/files/fr/web/css/align-self/index.md b/files/fr/web/css/align-self/index.md
index 02b2574984..b19cf1ca40 100644
--- a/files/fr/web/css/align-self/index.md
+++ b/files/fr/web/css/align-self/index.md
@@ -7,19 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/align-self
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>align-self</code></strong> permet d'aligner les objets flexibles d'une ligne flexible ou d'une grille en surchargeant la valeur donnée par {{cssxref("align-items")}}.</p>
+La propriété CSS **`align-self`** permet d'aligner les objets flexibles d'une ligne flexible ou d'une grille en surchargeant la valeur donnée par {{cssxref("align-items")}}.
 
-<p>Si l'un des objet a une marge automatique (<code>auto</code>) pour l'axe perpendiculaire à l'axe principal, <code>align-self</code> sera ignoré. Lorsque le conteneur est une grille, <code>align-self</code> permet d'aligner l'élément au sein de <a href="/fr/docs/Glossaire/Zones_de_grille">la zone de grille</a>. Si le conteneur est une boîte flexible, l'alignement se fait selon <a href="/fr/docs/Glossaire/Axe_transversal">l'axe secondaire</a>.</p>
+Si l'un des objet a une marge automatique (`auto`) pour l'axe perpendiculaire à l'axe principal, `align-self` sera ignoré. Lorsque le conteneur est une grille, `align-self` permet d'aligner l'élément au sein de [la zone de grille](/fr/docs/Glossaire/Zones_de_grille). Si le conteneur est une boîte flexible, l'alignement se fait selon [l'axe secondaire](/fr/docs/Glossaire/Axe_transversal).
 
-<div>{{EmbedInteractiveExample("pages/css/align-self.html")}}</div>
+{{EmbedInteractiveExample("pages/css/align-self.html")}}
 
-<p>Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.</p>
+Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 align-self: auto;
 align-self: normal;
 
@@ -47,53 +48,52 @@ align-self: unsafe center;
 /* Valeurs globales */
 align-self: inherit;
 align-self: initial;
-align-self: unset;</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>La valeur est calculée par rapport à celle de {{cssxref("align-items")}}.</dd>
- <dt><code>normal</code></dt>
- <dd>L'effet de ce mot-clé dépend du mode de disposition utilisé :
- <ul>
-  <li>Pour une disposition absolue, ce mot-clé est synonyme de <code>start</code> pour les boîtes remplacées positionnées de façon absolue, il est synonyme de <em>stretch</em> pour les autres boîtes positionnées de façon absolue.</li>
-  <li>Pour une disposition absolue et des positions statiques, ce mot-clé est synonyme de <code>stretch</code>.</li>
-  <li>Pour les éléments flexibles, ce mot-clé est synonyme de <code>stretch</code>.</li>
-  <li>Pour les éléments positionnés sur une grille, ce mot-clé est synonyme de <code>stretch</code>, sauf pour les boîtes qui ont un ratio d'aspec ou des dimensions intrinsèques, dans ce cas, cette valeur se comporte comme <code>start</code>.</li>
-  <li>Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.</li>
- </ul>
- </dd>
- <dt><code>self-start</code></dt>
- <dd>Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur au début de l'axe.</dd>
- <dt><code>self-end</code></dt>
- <dd>Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur à la fin de l'axe.</dd>
- <dt><code>flex-start</code></dt>
- <dd>Le bord de l'élément flexible, au début de l'axe perpendiculaire à l'axe principal, est aligné avec le bord au début de l'axe perpendiculaire pour la ligne flexible.</dd>
- <dt><code>flex-end</code></dt>
- <dd>Le bord de l'élément flexible, à la fin de l'axe perpendiculaire à l'axe principal, est aligné avec le bord à la fin de l'axe perpendiculaire pour la ligne flexible.</dd>
- <dt><code>center</code></dt>
- <dd>La boîte définies par les marges est centrée sur la ligne de l'axe perpendiculaire à l'axe principal de la ligne. Si l'élément est plus grand que le conteneur dans ce sens, il dépassera également de chaque côté.</dd>
- <dt><code>baseline<br>
- first baseline</code><br>
- <code>last baseline</code></dt>
- <dd>Indique l'alignement par rapport à la ligne de base.<br>
- Si besoin, la valeur <code>first baseline</code> est remplacée par <code>start</code> et <code>last baseline</code> est remplacée par <code>end</code>.</dd>
- <dt><code>stretch</code></dt>
- <dd>Si la somme des dimensions des éléments sur l'axe perpendiculaire à l'axe principal est inférieure à la dimension du conteneur et que l'élément est dimensionné automatiquement, celui-ci est agrandi (tout en respectant les éventuelles contraintes dictées par {{cssxref("max-height")}}/{{cssxref("max-width")}} ou autres) afin que l'ensemble des éléments remplissent le conteneur sur cet axe.</dd>
- <dt><code>safe</code></dt>
- <dd>Si la taille d'un élément dépasse du conteneur avec l'alignement fourni par la valeur, l'élément sera en réalité aligné comme si la valeur <code>start</code> avait été utilisée.</dd>
- <dt><code>unsafe</code></dt>
- <dd>Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement sera respectée.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+align-self: unset;
+```
+
+### Valeurs
+
+- `auto`
+  - : La valeur est calculée par rapport à celle de {{cssxref("align-items")}}.
+- `normal`
+
+  - : L'effet de ce mot-clé dépend du mode de disposition utilisé :
+
+    - Pour une disposition absolue, ce mot-clé est synonyme de `start` pour les boîtes remplacées positionnées de façon absolue, il est synonyme de _stretch_ pour les autres boîtes positionnées de façon absolue.
+    - Pour une disposition absolue et des positions statiques, ce mot-clé est synonyme de `stretch`.
+    - Pour les éléments flexibles, ce mot-clé est synonyme de `stretch`.
+    - Pour les éléments positionnés sur une grille, ce mot-clé est synonyme de `stretch`, sauf pour les boîtes qui ont un ratio d'aspec ou des dimensions intrinsèques, dans ce cas, cette valeur se comporte comme `start`.
+    - Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.
+
+- `self-start`
+  - : Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur au début de l'axe.
+- `self-end`
+  - : Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur à la fin de l'axe.
+- `flex-start`
+  - : Le bord de l'élément flexible, au début de l'axe perpendiculaire à l'axe principal, est aligné avec le bord au début de l'axe perpendiculaire pour la ligne flexible.
+- `flex-end`
+  - : Le bord de l'élément flexible, à la fin de l'axe perpendiculaire à l'axe principal, est aligné avec le bord à la fin de l'axe perpendiculaire pour la ligne flexible.
+- `center`
+  - : La boîte définies par les marges est centrée sur la ligne de l'axe perpendiculaire à l'axe principal de la ligne. Si l'élément est plus grand que le conteneur dans ce sens, il dépassera également de chaque côté.
+- `baseline first baseline`
+  `last baseline`
+  - : Indique l'alignement par rapport à la ligne de base.
+    Si besoin, la valeur `first baseline` est remplacée par `start` et `last baseline` est remplacée par `end`.
+- `stretch`
+  - : Si la somme des dimensions des éléments sur l'axe perpendiculaire à l'axe principal est inférieure à la dimension du conteneur et que l'élément est dimensionné automatiquement, celui-ci est agrandi (tout en respectant les éventuelles contraintes dictées par {{cssxref("max-height")}}/{{cssxref("max-width")}} ou autres) afin que l'ensemble des éléments remplissent le conteneur sur cet axe.
+- `safe`
+  - : Si la taille d'un élément dépasse du conteneur avec l'alignement fourni par la valeur, l'élément sera en réalité aligné comme si la valeur `start` avait été utilisée.
+- `unsafe`
+  - : Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement sera respectée.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.flex-container {
+```css
+.flex-container {
   height: 250px;
   display: flex;
 }
@@ -121,63 +121,46 @@ align-self: unset;</pre>
   -webkit-align-self: stretch;
   align-self: stretch;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div class="flex-container"&gt;
-  &lt;p class="element-flex center"&gt;Milieu&lt;/p&gt;
-  &lt;p class="element-flex baseline"&gt;Base&lt;/p&gt;
-  &lt;p class="element-flex stretch"&gt;Étiré&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}</td>
-   <td>{{Spec2("CSS3 Flexbox")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_boîtes_flexibles_(Flexbox)">Prise en charge pour les dispositions avec les boîtes flexibles (<em>Flexbox</em>)</h3>
-
-<p>{{Compat("css.properties.align-self.flex_context")}}</p>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_grilles_CSS">Prise en charge pour les dispositions avec les grilles CSS</h3>
-
-<p>{{Compat("css.properties.align-self.grid_context")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles CSS</a></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
- <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
- <li>La propriété {{cssxref("align-items")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<div class="flex-container">
+  <p class="element-flex center">Milieu</p>
+  <p class="element-flex baseline">Base</p>
+  <p class="element-flex stretch">Étiré</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","300","300")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Box Alignment")}} |                      |
+| {{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}         | {{Spec2("CSS3 Flexbox")}}         | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+### Prise en charge pour les dispositions avec les boîtes flexibles (_Flexbox_)
+
+{{Compat("css.properties.align-self.flex_context")}}
+
+### Prise en charge pour les dispositions avec les grilles CSS
+
+{{Compat("css.properties.align-self.grid_context")}}
+
+## Voir aussi
+
+- [Utiliser les boîtes flexibles CSS](/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS)
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_
+- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible)_
+- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)_
+- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)
+- La propriété {{cssxref("align-items")}}
diff --git a/files/fr/web/css/all/index.md b/files/fr/web/css/all/index.md
index 335620c2ee..cc10151b9d 100644
--- a/files/fr/web/css/all/index.md
+++ b/files/fr/web/css/all/index.md
@@ -7,63 +7,64 @@ tags:
   - Reference
 translation_of: Web/CSS/all
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> <code><strong>all</strong></code> permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style.</p>
+La [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) **`all`** permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style.
 
-<div>{{EmbedInteractiveExample("pages/css/all.html")}}</div>
+{{EmbedInteractiveExample("pages/css/all.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs globales */
+```css
+/* Valeurs globales */
 all: initial;
 all: inherit;
 all: unset;
 
 /* Héritage et cascade CSS : Niveau 4 */
 all: revert;
-</pre>
-
-<p>La propriété <code>all</code> est définie avec un des mots-clés globaux de CSS. On notera que la valeur de cette propriété n'a pas d'impact sur les propriétés {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>initial</code></dt>
- <dd>Voir {{cssxref("initial")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique <code>all</code> (ou qu'il hérite de cette valeur via un élément parent) devront prendre leurs valeurs initiales.</dd>
- <dt><code>inherit</code></dt>
- <dd>Voir {{cssxref("inherit")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique <code>all</code> (ou qu'il hérite de cette valeur via un élément parent) devront prendre les valeurs héritées (c'est-à-dire celles définies pour le parent de l'élément).</dd>
- <dt><code>unset</code></dt>
- <dd>Voir {{cssxref("unset")}}. Ce mot-clé indique que toutes les propriétés qui s'appliquent à l'élément ou à son parent prendront la valeur déclarée pour le parent si elles peuvent être héritées ou la valeur initiale sinon.</dd>
- <dt><code>revert</code></dt>
- <dd>Voir {{cssxref("revert")}}. Si la valeur obtenue dans la cascade est le mot-clé <code>revert</code>, le comportement obtenu sera différent selon l'origine de la déclaration :
- <dl>
-  <dt>La déclaration provient de l'agent utilisateur :</dt>
-  <dd>Synonyme de <code>unset</code>.</dd>
-  <dt>La déclaration provient de l'utilisateur :</dt>
-  <dd>Le moteur remonte <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage">la cascade</a> au niveau de l'agent utilisateur afin de calculer la valeur comme si aucune règle n'était appliquée par le document ou par l'utilisateur.</dd>
-  <dt>La déclaration provient de l'auteur (du document)</dt>
-  <dd>Le moteur remonte <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage">la cascade</a> au niveau de l'utilisateur afin de calculer la valeur comme si aucune règle ne provenait du document pour cette propriété.Cette origine inclue <a href="https://www.w3.org/TR/css-cascade-4/#origin">les origines des surcharges DOM et des animations</a>.</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `all` est définie avec un des mots-clés globaux de CSS. On notera que la valeur de cette propriété n'a pas d'impact sur les propriétés {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}.
+
+### Valeurs
+
+- `initial`
+  - : Voir {{cssxref("initial")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique `all` (ou qu'il hérite de cette valeur via un élément parent) devront prendre leurs valeurs initiales.
+- `inherit`
+  - : Voir {{cssxref("inherit")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique `all` (ou qu'il hérite de cette valeur via un élément parent) devront prendre les valeurs héritées (c'est-à-dire celles définies pour le parent de l'élément).
+- `unset`
+  - : Voir {{cssxref("unset")}}. Ce mot-clé indique que toutes les propriétés qui s'appliquent à l'élément ou à son parent prendront la valeur déclarée pour le parent si elles peuvent être héritées ou la valeur initiale sinon.
+- `revert`
+
+  - : Voir {{cssxref("revert")}}. Si la valeur obtenue dans la cascade est le mot-clé `revert`, le comportement obtenu sera différent selon l'origine de la déclaration :
+
+    - La déclaration provient de l'agent utilisateur :
+      - : Synonyme de `unset`.
+    - La déclaration provient de l'utilisateur :
+      - : Le moteur remonte [la cascade](/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage) au niveau de l'agent utilisateur afin de calculer la valeur comme si aucune règle n'était appliquée par le document ou par l'utilisateur.
+    - La déclaration provient de l'auteur (du document)
+      - : Le moteur remonte [la cascade](/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage) au niveau de l'utilisateur afin de calculer la valeur comme si aucune règle ne provenait du document pour cette propriété.Cette origine inclue [les origines des surcharges DOM et des animations](https://www.w3.org/TR/css-cascade-4/#origin).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;blockquote id="quote"&gt;
+```html
+<blockquote id="quote">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-&lt;/blockquote&gt;
-Phasellus eget velit sagittis.</pre>
+</blockquote>
+Phasellus eget velit sagittis.
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">body {
+```css
+body {
   font-size: small;
   background-color: #F0F0F0;
   color: blue;
@@ -73,90 +74,91 @@ blockquote {
   background-color: skyblue;
   color: red;
 }
-</pre>
+```
+
+### Résultat
 
-<h3 id="Résultat">Résultat</h3>
+#### Pas de propriété `all`
 
-<h4 id="Pas_de_propriété_all">Pas de propriété <code>all</code></h4>
+```html hidden
+<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
+```
 
-<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+```css hidden
+body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+```
 
-<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
-blockquote { background-color: skyblue;  color: red; }</pre>
 {{EmbedLiveSample("ex0", "200", "125")}}
 
-<p>L'élément {{HTMLElement("blockquote")}} utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous.</p>
+L'élément {{HTMLElement("blockquote")}} utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous.
 
-<h4 id="allunset"><code>all:unset</code></h4>
+#### `all:unset`
 
-<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+```html hidden
+<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
+```
 
-<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+```css hidden
+body { font-size: small; background-color: #F0F0F0; color:blue; }
 blockquote { background-color: skyblue;  color: red; }
-blockquote { all: unset; }</pre>
+blockquote { all: unset; }
+```
+
 {{EmbedLiveSample("ex1", "200", "125")}}
 
-<p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (<em>inline</em>) (sa valeur initiale), la valeur de {{cssxref("background-color")}} est <code>transparent</code> (la valeur initiale), mais {{cssxref("font-size")}} vaut toujours <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut (valeur héritée).</p>
+L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (_inline_) (sa valeur initiale), la valeur de {{cssxref("background-color")}} est `transparent` (la valeur initiale), mais {{cssxref("font-size")}} vaut toujours `small` (valeur héritée) et {{cssxref("color")}} vaut (valeur héritée).
 
-<h4 id="allinitial"><code>all:initial</code></h4>
+#### `all:initial`
 
-<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+```html hidden
+<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
+```
 
-<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+```css hidden
+body { font-size: small; background-color: #F0F0F0; color:blue; }
 blockquote { background-color: skyblue;  color: red; }
-blockquote { all: initial; }</pre>
+blockquote { all: initial; }
+```
+
 {{EmbedLiveSample("ex2", "200", "125")}}
 
-<p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément en ligne (sa valeur initiale). La propriété {{cssxref("background-color")}} vaut <code>transparent</code> (sa valeur initiale), {{cssxref("font-size")}} vaut <code>normal</code> (valeur initiale) et {{cssxref("color")}} vaut <code>black</code> (sa valeur initiale).</p>
+L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément en ligne (sa valeur initiale). La propriété {{cssxref("background-color")}} vaut `transparent` (sa valeur initiale), {{cssxref("font-size")}} vaut `normal` (valeur initiale) et {{cssxref("color")}} vaut `black` (sa valeur initiale).
 
-<h4 id="allinherit"><code>all:inherit</code></h4>
+#### `all:inherit`
 
-<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+```html hidden
+<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
+```
 
-<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+```css hidden
+body { font-size: small; background-color: #F0F0F0; color:blue; }
 blockquote { background-color: skyblue; color: red; }
-blockquote { all: inherit; }</pre>
+blockquote { all: inherit; }
+```
+
 {{EmbedLiveSample("ex3", "200", "125")}}
 
-<p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément de bloc (valeur héritée depuis l'élément englobant {{HTMLElement("div")}}), {{cssxref("background-color")}} vaut <code>#F0F0F0</code> (valeur héritée), {{cssxref("font-size")}} vaut <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut <code>blue</code> (valeur héritée).</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Cascade', '#all-shorthand', 'all')}}</td>
-   <td>{{Spec2('CSS4 Cascade')}}</td>
-   <td>Ajout de la valeur <code>revert</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Cascade', '#all-shorthand', 'all')}}</td>
-   <td>{{Spec2('CSS3 Cascade')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.all")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>Les mots-clés indiquant des valeurs globales pour CSS :</p>
-
-<ul>
- <li>{{cssxref("initial")}},</li>
- <li>{{cssxref("inherit")}},</li>
- <li>{{cssxref("unset")}},</li>
- <li>{{cssxref("revert")}}.</li>
-</ul>
+L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément de bloc (valeur héritée depuis l'élément englobant {{HTMLElement("div")}}), {{cssxref("background-color")}} vaut `#F0F0F0` (valeur héritée), {{cssxref("font-size")}} vaut `small` (valeur héritée) et {{cssxref("color")}} vaut `blue` (valeur héritée).
+
+## Spécifications
+
+| Spécification                                                            | État                             | Commentaires                 |
+| ------------------------------------------------------------------------ | -------------------------------- | ---------------------------- |
+| {{SpecName('CSS4 Cascade', '#all-shorthand', 'all')}} | {{Spec2('CSS4 Cascade')}} | Ajout de la valeur `revert`. |
+| {{SpecName('CSS3 Cascade', '#all-shorthand', 'all')}} | {{Spec2('CSS3 Cascade')}} | Définition initiale.         |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.all")}}
+
+## Voir aussi
+
+Les mots-clés indiquant des valeurs globales pour CSS :
+
+- {{cssxref("initial")}},
+- {{cssxref("inherit")}},
+- {{cssxref("unset")}},
+- {{cssxref("revert")}}.
diff --git a/files/fr/web/css/alpha-value/index.md b/files/fr/web/css/alpha-value/index.md
index a2736fad98..f7d89bfd2a 100644
--- a/files/fr/web/css/alpha-value/index.md
+++ b/files/fr/web/css/alpha-value/index.md
@@ -7,56 +7,39 @@ tags:
   - Type de donnée
 translation_of: Web/CSS/alpha-value
 ---
-<p>{{CSSRef}}{{draft()}}</p>
+{{CSSRef}}{{draft()}}
 
-<p>Le <a href="/fr/docs/Web/CSS/Types_CSS">type de donnée</a> CSS <strong><code>&lt;alpha-value&gt;</code></strong> représente une valeur qui peut être un nombre ({{cssxref("&lt;number&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) et qui indique le <a href="https://fr.wikipedia.org/wiki/Canal_alpha">canal alpha</a> ou <em>l'opacité</em> d'une couleur.</p>
+Le [type de donnée](/fr/docs/Web/CSS/Types_CSS) CSS **`<alpha-value>`** représente une valeur qui peut être un nombre ({{cssxref("&lt;number&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) et qui indique le [canal alpha](https://fr.wikipedia.org/wiki/Canal_alpha) ou _l'opacité_ d'une couleur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Si la valeur est fournie comme un nombre, la valeur peut être comprise entre 0 (complètement transparent) et 1 (complètement opaque). Il est possible d'utiliser des valeurs décimales comprises entre ces valeurs. Les valeurs à l'extérieur de cet intervalle sont valides mais elles sont écrétées à 0 ou 1.</p>
+Si la valeur est fournie comme un nombre, la valeur peut être comprise entre 0 (complètement transparent) et 1 (complètement opaque). Il est possible d'utiliser des valeurs décimales comprises entre ces valeurs. Les valeurs à l'extérieur de cet intervalle sont valides mais elles sont écrétées à 0 ou 1.
 
-<p>Lorsque la valeur est fournie en pourcentage 0% correspond à une transparence complète tandis que 100% correspond à une opacité totale.</p>
+Lorsque la valeur est fournie en pourcentage 0% correspond à une transparence complète tandis que 100% correspond à une opacité totale.
 
-<h2 id="Interpolation">Interpolation</h2>
+## Interpolation
 
-<p>Lorsqu'une animation fait évoluer une valeur de type <code>&lt;alpha-value&gt;</code>, les valeurs sont interpolées comme des nombres réels à point flottant. La vitesse de l'interpolation est déterminée par la <a href="/fr/docs/Web/CSS/timing-function">fonction de temporisation</a> associée à l'animation.</p>
+Lorsqu'une animation fait évoluer une valeur de type `<alpha-value>`, les valeurs sont interpolées comme des nombres réels à point flottant. La vitesse de l'interpolation est déterminée par la [fonction de temporisation](/fr/docs/Web/CSS/timing-function) associée à l'animation.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Certaines fonctionnalités CSS utilisent des valeurs <code>&lt;alpha-value&gt;</code> dont <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#RGB_colors">les notations fonctionnelles pour les couleurs telles que <code>rgba()</code> et <code>hsla()</code></a> et aussi {{cssxref("shape-image-threshold")}} (qui détermine les pixels à prendre en compte pour une image lorsqu'on souhaite en extraire une forme).</p>
+Certaines fonctionnalités CSS utilisent des valeurs `<alpha-value>` dont [les notations fonctionnelles pour les couleurs telles que `rgba()` et `hsla()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#RGB_colors) et aussi {{cssxref("shape-image-threshold")}} (qui détermine les pixels à prendre en compte pour une image lorsqu'on souhaite en extraire une forme).
 
-<pre class="brush: css">
-/* &lt;rgba()&gt; */
+```css
+/* <rgba()> */
 color: rgba(34, 12, 64, 0.6);
 color: rgba(34.0 12 64 / 60%);
-</pre>
+```
 
-<pre class="brush: css">
+```css
 /* shape-image-threshold */
 shape-image-threshold: 70%;
 shape-image-threshold: 0.7;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Colors', '#type-def-alpha-value', '&lt;alpha-value&gt;')}}</td>
-   <td>{{Spec2('CSS4 Colors')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Colors', '#alphavaluedt', '&lt;alpha-value&gt;')}}</td>
-   <td>{{Spec2('CSS3 Colors')}}</td>
-   <td>Introduit le type <code>&lt;alpha-value&gt;</code> ainsi que les notations fonctionnelles <code>rgba()</code> et <code>hsla()</code>.</td>
-  </tr>
- </tbody>
-</table>
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                             | Commentaires                                                                                   |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Colors', '#type-def-alpha-value', '&lt;alpha-value&gt;')}} | {{Spec2('CSS4 Colors')}} | Aucune modification significative.                                                             |
+| {{SpecName('CSS3 Colors', '#alphavaluedt', '&lt;alpha-value&gt;')}}             | {{Spec2('CSS3 Colors')}} | Introduit le type `<alpha-value>` ainsi que les notations fonctionnelles `rgba()` et `hsla()`. |
diff --git a/files/fr/web/css/alternative_style_sheets/index.md b/files/fr/web/css/alternative_style_sheets/index.md
index 5bb6c9afdd..ad42afc51f 100644
--- a/files/fr/web/css/alternative_style_sheets/index.md
+++ b/files/fr/web/css/alternative_style_sheets/index.md
@@ -8,71 +8,97 @@ tags:
 translation_of: Web/CSS/Alternative_style_sheets
 original_slug: Web/CSS/Feuilles_de_style_alternatives
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>En proposant <strong>des feuilles de style alternatives</strong>, une page web permet à ses utilisateurs de pouvoir choisir parmi différentes version d'une page selon leurs besoins ou leurs préférences.</p>
+En proposant **des feuilles de style alternatives**, une page web permet à ses utilisateurs de pouvoir choisir parmi différentes version d'une page selon leurs besoins ou leurs préférences.
 
-<p>Firefox permet à l'utilisateur de sélectionner le style de la page en utilisant le menu « Affichage &gt; Style de la page », Internet Explorer possède également cette fonctionnalité (depuis IE8), accesssible via « Affichage &gt; Style de la page ». Pour Chrome, il est nécessaire d'utiliser une extension afin de pouvoir utiliser cette fonctionnalité. La page web peut également fournir un élément d'interface utilisateur afin de permettre à l'utilisateur de passer d'un style à un autre.</p>
+Firefox permet à l'utilisateur de sélectionner le style de la page en utilisant le menu « Affichage > Style de la page », Internet Explorer possède également cette fonctionnalité (depuis IE8), accesssible via « Affichage > Style de la page ». Pour Chrome, il est nécessaire d'utiliser une extension afin de pouvoir utiliser cette fonctionnalité. La page web peut également fournir un élément d'interface utilisateur afin de permettre à l'utilisateur de passer d'un style à un autre.
 
-<h2 id="Exemple_d'application_définir_des_feuilles_de_style_alternatives">Exemple d'application : définir des feuilles de style alternatives</h2>
+## Exemple d'application : définir des feuilles de style alternatives
 
-<p>Pour indiquer des feuilles de style alternatives, on utilisera un élément {{HTMLElement("link")}} avec les attributs <code>rel="stylesheet alternate"</code> et <code>title="..."</code>. Ainsi :</p>
+Pour indiquer des feuilles de style alternatives, on utilisera un élément {{HTMLElement("link")}} avec les attributs `rel="stylesheet alternate"` et `title="..."`. Ainsi :
 
-<pre class="brush: html">&lt;link href="reset.css" rel="stylesheet" type="text/css"&gt;
+```html
+<link href="reset.css" rel="stylesheet" type="text/css">
 
-&lt;link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut"&gt;
-&lt;link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli"&gt;
-&lt;link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique"&gt;
-</pre>
+<link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut">
+<link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli">
+<link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique">
+```
 
-<p>Dans cet exemple, les styles « Style par défaut », « Joli » et « Basique » seront listés dans le menu « Style de la page ». C'est le style par défaut (il n'y a pas de composante <code>alternate</code> pour l'attribut <code>rel</code>) qui sera sélectionné. Lorsque l'utilisateur choisit un autre style, la page est alors immédiatement affichée avec cette feuille de style.</p>
+Dans cet exemple, les styles « Style par défaut », « Joli » et « Basique » seront listés dans le menu « Style de la page ». C'est le style par défaut (il n'y a pas de composante `alternate` pour l'attribut `rel`) qui sera sélectionné. Lorsque l'utilisateur choisit un autre style, la page est alors immédiatement affichée avec cette feuille de style.
 
-<p>Quel que soit la mise en forme choisie, les règles provenant de la feuille <code>reset.css</code> seront toujours appliquées.</p>
+Quel que soit la mise en forme choisie, les règles provenant de la feuille `reset.css` seront toujours appliquées.
 
-<h2 id="Détails">Détails</h2>
+## Détails
 
-<p>Une feuille de style fera partie d'une de ces trois catégories :</p>
+Une feuille de style fera partie d'une de ces trois catégories :
 
-<ul>
- <li><strong>Persistante</strong> (aucun <code>rel="alternate"</code>, aucun <code>title=""</code>) : la feuille de style s'applique au document quoi qu'il arrive</li>
- <li><strong>Préférée</strong> (aucun <code>rel="alternate"</code>, un attribut <code>title="..."</code> défini) : la feuille de style est appliquée par défaut mais est désactivée si une autre feuille de style est sélectionnée. <strong>Il ne peut y avoir qu'une seule feuille de style préférée</strong>. Si plusieurs feuilles de style sont fournies avec différentes valeurs pour l'attribut <code>title</code>, certaines seront ignorées.</li>
- <li><strong>Alternative</strong> (<code>rel="stylesheet alternate"</code>, un attribut <code>title="..."</code> défini) : la feuille de style est désactivée par défaut mais peut être sélectionnée.</li>
-</ul>
+- **Persistante** (aucun `rel="alternate"`, aucun `title=""`) : la feuille de style s'applique au document quoi qu'il arrive
+- **Préférée** (aucun `rel="alternate"`, un attribut `title="..."` défini) : la feuille de style est appliquée par défaut mais est désactivée si une autre feuille de style est sélectionnée. **Il ne peut y avoir qu'une seule feuille de style préférée**. Si plusieurs feuilles de style sont fournies avec différentes valeurs pour l'attribut `title`, certaines seront ignorées.
+- **Alternative** (`rel="stylesheet alternate"`, un attribut `title="..."` défini) : la feuille de style est désactivée par défaut mais peut être sélectionnée.
 
-<p>Lorsqu'une feuille de style contient un attribut <code>title</code> sur l'élément {{HTMLElement("link", "&lt;link rel=\"stylesheet\"&gt;")}} ou sur l'élément {{HTMLElement("style")}}, ce titre est l'une des options proposées à l'utilisateur. Les feuilles de style qui contiennent le même titre (<code>title</code> a la même valeur) s'appliqueront toutes pour ce choix. Enfin, les feuilles de style qui n'ont aucun attribut <code>title</code> seront toujours appliquées.</p>
+Lorsqu'une feuille de style contient un attribut `title` sur l'élément {{HTMLElement("link", "&lt;link rel=\"stylesheet\"&gt;")}} ou sur l'élément {{HTMLElement("style")}}, ce titre est l'une des options proposées à l'utilisateur. Les feuilles de style qui contiennent le même titre (`title` a la même valeur) s'appliqueront toutes pour ce choix. Enfin, les feuilles de style qui n'ont aucun attribut `title` seront toujours appliquées.
 
-<p>On utilisera <code>rel="stylesheet"</code> pour pointer vers la feuille de style par défaut et <code>rel="alternate stylesheet"</code> pour pointer vers les feuilles de style alternatives. Cela permet à l'agent utilisateur de savoir quelle feuille doit être appliquée par défaut ; c'est aussi cette valeur qui sera utilisée pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.</p>
+On utilisera `rel="stylesheet"` pour pointer vers la feuille de style par défaut et `rel="alternate stylesheet"` pour pointer vers les feuilles de style alternatives. Cela permet à l'agent utilisateur de savoir quelle feuille doit être appliquée par défaut ; c'est aussi cette valeur qui sera utilisée pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}</td>
-   <td>{{Spec2('CSSOM')}}</td>
-   <td>La spécification CSS OM définit les concepts de <strong>nom d'ensemble de feuilles de style</strong>, le <strong>marqueur « désactivé »</strong> et le <strong>nom d'ensemble de feuilles de style CSS préférées</strong>.<br>
-    Cette spécification définit comment ces concepts sont déterminés, elle laisse à la spécification HTML le soin de définir les comportements spécifiques à HTML qui doit notamment définir <strong><dfn>quand est créée une feuille de style CSS</dfn></strong>.</td>
-  </tr>
-  <tr>
-   <td>
-    <p>{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}<br>
-     {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}<br>
-     {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}</p>
-   </td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>La spécification HTML définit quand et comment <strong><dfn>créer un algorithme déterminant la feuille de style CSS</dfn></strong><dfn> et qui gère les éléments <code>&lt;link&gt;</code> et <code>&lt;style&gt;</code>. Elle définit également le comportement de <code>&lt;meta </code></dfn><code>http-equiv="default-style"&gt;</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}</td>
-   <td>{{Spec2("HTML4.01")}}</td>
-   <td>La spécification HTML définit le concept de feuilles de style préférées et alternatives.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}
+      </td>
+      <td>{{Spec2('CSSOM')}}</td>
+      <td>
+        La spécification CSS OM définit les concepts de
+        <strong>nom d'ensemble de feuilles de style</strong>, le
+        <strong>marqueur « désactivé »</strong> et le
+        <strong>nom d'ensemble de feuilles de style CSS préférées</strong
+        >.<br />Cette spécification définit comment ces concepts sont
+        déterminés, elle laisse à la spécification HTML le soin de définir les
+        comportements spécifiques à HTML qui doit notamment définir
+        <strong><dfn>quand est créée une feuille de style CSS</dfn></strong
+        >.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <p>
+          {{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}<br />{{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}<br />{{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}
+        </p>
+      </td>
+      <td>{{Spec2('HTML WHATWG')}}</td>
+      <td>
+        La spécification HTML définit quand et comment
+        <strong
+          ><dfn
+            >créer un algorithme déterminant la feuille de style CSS</dfn
+          ></strong
+        ><dfn>
+          et qui gère les éléments <code>&#x3C;link></code> et
+          <code>&#x3C;style></code>. Elle définit également le comportement de
+          <code>&#x3C;meta </code></dfn
+        ><code>http-equiv="default-style"></code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}
+      </td>
+      <td>{{Spec2("HTML4.01")}}</td>
+      <td>
+        La spécification HTML définit le concept de feuilles de style préférées
+        et alternatives.
+      </td>
+    </tr>
+  </tbody>
 </table>
diff --git a/files/fr/web/css/angle-percentage/index.md b/files/fr/web/css/angle-percentage/index.md
index 528f08969a..3e88cfb95e 100644
--- a/files/fr/web/css/angle-percentage/index.md
+++ b/files/fr/web/css/angle-percentage/index.md
@@ -7,42 +7,25 @@ tags:
   - Type
 translation_of: Web/CSS/angle-percentage
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée <strong><code>&lt;angle-percentage&gt;</code></strong> représente une valeur qui peut être une valeur de type {{cssxref("angle")}} ou une valeur de type {{cssxref("percentage")}}.</p>
+Le type de donnée **`<angle-percentage>`** représente une valeur qui peut être une valeur de type {{cssxref("angle")}} ou une valeur de type {{cssxref("percentage")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Voir la documentation des types {{cssxref("angle")}} et {{cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.</p>
+Voir la documentation des types {{cssxref("angle")}} et {{cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.
 
-<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+## Utilisation avec `calc()`
 
-<p>Lorsqu'il est possible d'utiliser une valeur de type <code>&lt;angle-percentage&gt;</code> dans une déclaration, cela signifie que le pourcentage sera résolu avec une valeur angulaire et qu'il peut être utilisé dans une expression {{Cssxref("calc()")}}.</p>
+Lorsqu'il est possible d'utiliser une valeur de type `<angle-percentage>` dans une déclaration, cela signifie que le pourcentage sera résolu avec une valeur angulaire et qu'il peut être utilisé dans une expression {{Cssxref("calc()")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Définition du type <code>&lt;angle-percentage&gt;</code>. Ajout de <code>calc()</code></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                             | Commentaires                                               |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------- |
+| {{SpecName('CSS4 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}} | {{Spec2('CSS4 Values')}} |                                                            |
+| {{SpecName('CSS3 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}} | {{Spec2('CSS3 Values')}} | Définition du type `<angle-percentage>`. Ajout de `calc()` |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.angle-percentage")}}</p>
+{{Compat("css.types.angle-percentage")}}
diff --git a/files/fr/web/css/angle/index.md b/files/fr/web/css/angle/index.md
index f020237b66..9c3efe64a9 100644
--- a/files/fr/web/css/angle/index.md
+++ b/files/fr/web/css/angle/index.md
@@ -7,88 +7,84 @@ tags:
   - Type
 translation_of: Web/CSS/angle
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de données CSS <strong><code>&lt;angle&gt;</code></strong> permet de représenter des angles exprimés en degrés, radians, grades ou tours. Les angles positifs sont des angles allant dans le sens horaire et les valeurs négatives sont des angles allant dans le sens anti-horaire. Les angles sont par exemples utilisés pour les transformations CSS ({{cssxref("transform")}}) ou les dégradés ({{cssxref("&lt;gradient&gt;")}}).</p>
+Le type de données CSS **`<angle>`** permet de représenter des angles exprimés en degrés, radians, grades ou tours. Les angles positifs sont des angles allant dans le sens horaire et les valeurs négatives sont des angles allant dans le sens anti-horaire. Les angles sont par exemples utilisés pour les transformations CSS ({{cssxref("transform")}}) ou les dégradés ({{cssxref("&lt;gradient&gt;")}}).
 
-<div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div>
+{{EmbedInteractiveExample("pages/css/type-angle.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Pour exprimer une valeur de ce type, on utilisera une valeur de type {{cssxref("&lt;number&gt;")}} (un nombre), immédiatement suivie d'une unité <code>deg</code>, <code>grad</code>, <code>rad</code> ou <code>turn</code>. Comme pour les autres dimensions présentes en CSS, il n'y a pas d'espace entre le littéral réservé à l'unité et le nombre qui indique la mesure de l'angle. L'unité est facultative pour la valeur <code>0</code> (bien qu'il soit recommandé d'écrire une unité pour des raisons de lisibilité et de cohérence). Il est possible d'utiliser un signe <code>+</code> ou <code>-</code> en préfixe.</p>
+Pour exprimer une valeur de ce type, on utilisera une valeur de type {{cssxref("&lt;number&gt;")}} (un nombre), immédiatement suivie d'une unité `deg`, `grad`, `rad` ou `turn`. Comme pour les autres dimensions présentes en CSS, il n'y a pas d'espace entre le littéral réservé à l'unité et le nombre qui indique la mesure de l'angle. L'unité est facultative pour la valeur `0` (bien qu'il soit recommandé d'écrire une unité pour des raisons de lisibilité et de cohérence). Il est possible d'utiliser un signe `+` ou `-` en préfixe.
 
-<p>Pour les propriétés statiques et pour une unité donnée, un même angle pourra être représenté par plusieurs valeurs, ainsi <code>90deg</code>, <code>-270deg</code>, <code>1turn</code> et <code>4turn</code> représentent le même angle. En revanche, pour les propriétés dynamiques (par exemple {{cssxref("transition")}} sur {{cssxref("transform")}}), l'effet obtenu sera différent.</p>
+Pour les propriétés statiques et pour une unité donnée, un même angle pourra être représenté par plusieurs valeurs, ainsi `90deg`, `-270deg`, `1turn` et `4turn` représentent le même angle. En revanche, pour les propriétés dynamiques (par exemple {{cssxref("transition")}} sur {{cssxref("transform")}}), l'effet obtenu sera différent.
 
-<h3 id="Unités">Unités</h3>
+### Unités
 
-<p>Pour représenter une valeur dans le type <code>&lt;angle&gt;</code>, on pourra utiliser les unités suivantes :</p>
+Pour représenter une valeur dans le type `<angle>`, on pourra utiliser les unités suivantes :
 
-<dl>
- <dt><code>deg</code></dt>
- <dd>Cette unité permet de représenter un angle exprimé en <a href="https://fr.wikipedia.org/wiki/Degr%C3%A9_(angle)">degrés</a>. Un cercle complet correspondra à <code>360deg</code>. Voici des valeurs pour l'exemple : <code>0deg</code>, <code>90deg</code>,<code> 360deg</code>.</dd>
- <dt><code>grad</code></dt>
- <dd>Cette unité permet de représenter un angle exprimé en <a href="https://fr.wikipedia.org/wiki/Grade_(angle)">grades</a>. Un cercle complet correspondra à <code>400grad</code>. Voici des valeurs pour l'exemple : <code>0grad</code>, <code>100grad</code>,<code> 400grad</code>.</dd>
- <dt><code>rad</code></dt>
- <dd>Cette unité permet de représenter un angle exprimé en <a href="https://fr.wikipedia.org/wiki/Radian">radians</a>. Un cercle complet correspondra à 2π radians (soit environ <code>6.2832rad</code>). Un radian correspond à 180/π degrés. Voici des valeurs pour l'exemple : <code>0rad</code>, <code>1.0708rad</code>,<code> 6.2832rad</code>.</dd>
- <dt><code>turn</code></dt>
- <dd>Cette unité représente le nombre de tours qu'effectue l'angle. Un cercle complet correspondra à <code>1turn</code>. Voici des valeurs pour l'exemple : <code>0turn</code>, <code>0.25turn</code>,<code> 1turn</code>.</dd>
-</dl>
+- `deg`
+  - : Cette unité permet de représenter un angle exprimé en [degrés](<https://fr.wikipedia.org/wiki/Degr%C3%A9_(angle)>). Un cercle complet correspondra à `360deg`. Voici des valeurs pour l'exemple : `0deg`, `90deg`,` 360deg`.
+- `grad`
+  - : Cette unité permet de représenter un angle exprimé en [grades](<https://fr.wikipedia.org/wiki/Grade_(angle)>). Un cercle complet correspondra à `400grad`. Voici des valeurs pour l'exemple : `0grad`, `100grad`,` 400grad`.
+- `rad`
+  - : Cette unité permet de représenter un angle exprimé en [radians](https://fr.wikipedia.org/wiki/Radian). Un cercle complet correspondra à 2π radians (soit environ `6.2832rad`). Un radian correspond à 180/π degrés. Voici des valeurs pour l'exemple : `0rad`, `1.0708rad`,` 6.2832rad`.
+- `turn`
+  - : Cette unité représente le nombre de tours qu'effectue l'angle. Un cercle complet correspondra à `1turn`. Voici des valeurs pour l'exemple : `0turn`, `0.25turn`,` 1turn`.
 
-<p>Même si toutes les unités exprimeront une valeur nulle identique, l'unité <strong>doit</strong><strong> être indiquée</strong> afin de lever l'ambiguïté entre un angle et une valeur de longueur (type {{cssxref("&lt;length&gt;")}}).</p>
+Même si toutes les unités exprimeront une valeur nulle identique, l'unité **doit** **être indiquée** afin de lever l'ambiguïté entre un angle et une valeur de longueur (type {{cssxref("&lt;length&gt;")}}).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
 <table>
- <tbody>
-  <tr>
-   <td><img src="angle90.png"></td>
-   <td>
-    <p>Un angle droit orienté dans le sens horaire : <code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code></p>
-   </td>
-  </tr>
-  <tr>
-   <td><img src="angle180.png"></td>
-   <td>Un angle plat orienté dans le sens horaire : <code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code></td>
-  </tr>
-  <tr>
-   <td><img src="angleminus90.png"></td>
-   <td>Un angle droit orienté dans le sens anti-horaire : <code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code></td>
-  </tr>
-  <tr>
-   <td><img src="angle0.png"></td>
-   <td>
-    <p>Un angle nul : <code>0 = 0deg = 0grad = 0turn = 0rad</code></p>
-
-    <div class="note"><p><strong>Note :</strong>Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.</p></div>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><img src="angle90.png" /></td>
+      <td>
+        <p>
+          Un angle droit orienté dans le sens horaire :
+          <code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code>
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><img src="angle180.png" /></td>
+      <td>
+        Un angle plat orienté dans le sens horaire :
+        <code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code>
+      </td>
+    </tr>
+    <tr>
+      <td><img src="angleminus90.png" /></td>
+      <td>
+        Un angle droit orienté dans le sens anti-horaire :
+        <code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code>
+      </td>
+    </tr>
+    <tr>
+      <td><img src="angle0.png" /></td>
+      <td>
+        <p>Un angle nul : <code>0 = 0deg = 0grad = 0turn = 0rad</code></p>
+        <div class="note">
+          <p>
+            <strong>Note :</strong>Si, dans l'absolu, on peut exprimer la valeur
+            nulle sans unité, il est fortement recommandé d'indiquer l'unité
+            afin de lever toute ambiguïté possible entre les angles et les
+            longueurs.
+          </p>
+        </div>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#angles', '&lt;angle&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#angles', '&lt;angle&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Values', '#angles', '&lt;angle&gt;')}} | {{Spec2('CSS4 Values')}} |                      |
+| {{SpecName('CSS3 Values', '#angles', '&lt;angle&gt;')}} | {{Spec2('CSS3 Values')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.angle")}}</p>
+{{Compat("css.types.angle")}}
diff --git a/files/fr/web/css/animation-delay/index.md b/files/fr/web/css/animation-delay/index.md
index 733ba4d654..6d7b65d0e6 100644
--- a/files/fr/web/css/animation-delay/index.md
+++ b/files/fr/web/css/animation-delay/index.md
@@ -7,44 +7,42 @@ tags:
   - Reference
 translation_of: Web/CSS/animation-delay
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>animation-delay</code></strong> définit la durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément.</p>
+La propriété **`animation-delay`** définit la durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-delay.html")}}
 
-<p>La valeur par défaut, <code>0s</code>, indique que l'animation doit démarrer dès qu'elle est appliquée. Dans les autres cas, la valeur indique le décalage à observer entre le début de l'animation et le moment où celle-ci a été appliquée sur l'élément.</p>
+La valeur par défaut, `0s`, indique que l'animation doit démarrer dès qu'elle est appliquée. Dans les autres cas, la valeur indique le décalage à observer entre le début de l'animation et le moment où celle-ci a été appliquée sur l'élément.
 
-<p>Si des valeurs négatives sont utilisées, l'animation débutera immédiatement en étant déjà « avancée ». Par exemple, si on utilise la valeur <code>-1s</code> comme durée, l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout d'une seconde.</p>
+Si des valeurs négatives sont utilisées, l'animation débutera immédiatement en étant déjà « avancée ». Par exemple, si on utilise la valeur `-1s` comme durée, l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout d'une seconde.
 
-<p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir l'ensemble des propriétés liées aux animations en une seule fois.</p>
+Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir l'ensemble des propriétés liées aux animations en une seule fois.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css  no-line-numbers">animation-delay: 3s;
+```css
+animation-delay: 3s;
 animation-delay: 2s, 4ms;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;time&gt;</code></dt>
- <dd>La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (<code>s</code> comme suffixe) ou en millisecondes (<code>ms</code> comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.</dd>
-</dl>
+- `<time>`
+  - : La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (`s` comme suffixe) ou en millisecondes (`ms` comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
-</div>
+> **Note :** Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 3s;
   animation-delay: 15s;
   animation-name: glissement;
@@ -60,48 +58,36 @@ animation-delay: 2s, 4ms;
     margin-left: 0%;
     width: 100%;
   }
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   La Chenille et Alice se considérèrent un instant en silence.
   Enfin la Chenille sortit le houka de sa bouche, et lui adressa
   la parole d’une voix endormie et traînante.
-&lt;/p&gt; </pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+{{EmbedLiveSample("Exemples","300","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.animation-delay")}}</p>
+{{Compat("css.properties.animation-delay")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/fr/web/css/animation-direction/index.md b/files/fr/web/css/animation-direction/index.md
index 45fa6dbf7b..2485631ffe 100644
--- a/files/fr/web/css/animation-direction/index.md
+++ b/files/fr/web/css/animation-direction/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/animation-direction
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>animation-direction</code></strong> indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée.</p>
+La propriété **`animation-direction`** indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée.
 
-<div>{{EmbedInteractiveExample("pages/css/animation-direction.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-direction.html")}}
 
-<p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} qui permet de définir les différentes propriétés liées aux animations avec une déclaration.</p>
+Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} qui permet de définir les différentes propriétés liées aux animations avec une déclaration.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 animation-direction: normal;
 animation-direction: reverse;
 animation-direction: alternate;
@@ -31,34 +32,31 @@ animation-direction: alternate, reverse, normal;
 animation-direction: inherit;
 animation-direction: initial;
 animation-direction: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>L'animation est jouée dans le sens normal à chaque cycle. Autrement dit, au début de chaque cycle, l'animation est initialisée dans l'état de début. C'est le réglage par défaut.</dd>
- <dt><code>reverse</code></dt>
- <dd>L'animation est jouée dans le sens inverse à chaque cycle. Au début de chaque cycle, l'animation reprend depuis l'état de fin.</dd>
- <dt><code>alternate</code></dt>
- <dd>La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens normal. Lorsque le sens est inversé, les étapes de l'animation sont effectuées de façon inversée et les fonctions de progression (<em>timing function</em><em>s</em>) sont également inversées (<code>ease-in</code> sera ainsi remplacée par <code>ease-out</code>). Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite.</dd>
- <dt><code>alternate-reverse</code></dt>
- <dd>La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens inverse (cf. ci-avant). Le premier cycle se fait dans le sens inverse, le deuxième dans le sens normal et ainsi de suite.</dd>
-</dl>
+- `normal`
+  - : L'animation est jouée dans le sens normal à chaque cycle. Autrement dit, au début de chaque cycle, l'animation est initialisée dans l'état de début. C'est le réglage par défaut.
+- `reverse`
+  - : L'animation est jouée dans le sens inverse à chaque cycle. Au début de chaque cycle, l'animation reprend depuis l'état de fin.
+- `alternate`
+  - : La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens normal. Lorsque le sens est inversé, les étapes de l'animation sont effectuées de façon inversée et les fonctions de progression (_timing function\*\*s_) sont également inversées (`ease-in` sera ainsi remplacée par `ease-out`). Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite.
+- `alternate-reverse`
+  - : La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens inverse (cf. ci-avant). Le premier cycle se fait dans le sens inverse, le deuxième dans le sens normal et ainsi de suite.
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
-</div>
+> **Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 5s;
   animation-name: glissement;
   animation-iteration-count: infinite;
@@ -81,53 +79,41 @@ animation-direction: unset;
     margin-left: 0%;
     width: 100%;
   }
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="aller"&gt;
+```html
+<p class="aller">
   La Chenille et Alice se considérèrent un instant en silence.
   Enfin la Chenille sortit le houka de sa bouche, et lui adressa
   la parole d’une voix endormie et traînante.
-&lt;/p&gt;
+</p>
 
-&lt;p class="retour"&gt;
+<p class="retour">
   « Revenez, » lui cria la Chenille. « J’ai quelque chose
   d’important à vous dire ! »
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+{{EmbedLiveSample("Exemples","300","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.animation-direction")}}</p>
+{{Compat("css.properties.animation-direction")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS" title="Tutorial about CSS animations">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS "Tutorial about CSS animations")
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/fr/web/css/animation-duration/index.md b/files/fr/web/css/animation-duration/index.md
index 766d826733..b44612966c 100644
--- a/files/fr/web/css/animation-duration/index.md
+++ b/files/fr/web/css/animation-duration/index.md
@@ -7,48 +7,44 @@ tags:
   - Reference
 translation_of: Web/CSS/animation-duration
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>animation-duration</code></strong> définit la durée d'une animation pour parcourir un cycle.</p>
+La propriété **`animation-duration`** définit la durée d'une animation pour parcourir un cycle.
 
-<div>{{EmbedInteractiveExample("pages/css/animation-duration.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-duration.html")}}
 
-<p>La valeur par défaut est <code>0s</code>, ce qui indique qu'aucune animation ne doit avoir lieu.</p>
+La valeur par défaut est `0s`, ce qui indique qu'aucune animation ne doit avoir lieu.
 
-<p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.</p>
+Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">animation-duration: 6s;
+```css
+animation-duration: 6s;
 animation-duration: 120ms;
 animation-duration: 1s, 15s;
 animation-duration: 10s, 30s, 230ms;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;time&gt;</code></dt>
- <dd>La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (<code>s</code> comme suffixe pour l'unité) ou en millisecondes (<code>ms</code> comme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.</dd>
-</dl>
+- `<time>`
+  - : La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (`s` comme suffixe pour l'unité) ou en millisecondes (`ms` comme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.
 
-<div class="note">
-  <p><strong>Note :</strong> Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de <code>0s</code>.</p>
-</div>
+> **Note :** Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de `0s`.
 
-<div class="note">
-  <p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">les valeurs des propriétés pour plusieurs animations</a>.</p>
-</div>
+> **Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 15s;
   animation-name: glissement;
   animation-iteration-count: infinite;
@@ -63,48 +59,36 @@ animation-duration: 10s, 30s, 230ms;
     margin-left: 0%;
     width: 100%;
   }
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   La Chenille et Alice se considérèrent un instant en silence.
   Enfin la Chenille sortit le houka de sa bouche, et lui adressa
   la parole d’une voix endormie et traînante.
-&lt;/p&gt; </pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+{{EmbedLiveSample("Exemples","300","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#animation-duration', 'animation-duration')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#animation-duration', 'animation-duration')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.animation-duration")}}</p>
+{{Compat("css.properties.animation-duration")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/fr/web/css/animation-fill-mode/index.md b/files/fr/web/css/animation-fill-mode/index.md
index 01b33f2513..a86250e49e 100644
--- a/files/fr/web/css/animation-fill-mode/index.md
+++ b/files/fr/web/css/animation-fill-mode/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/animation-fill-mode
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>animation-fill-mode</code></strong> indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.</p>
+La propriété **`animation-fill-mode`** indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.
 
-<div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:  css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 animation-fill-mode: none;
 animation-fill-mode: forwards;
 animation-fill-mode: backwards;
@@ -24,95 +25,49 @@ animation-fill-mode: both;
 /* Gestion de plusieurs animations */
 animation-fill-mode: none, backwards;
 animation-fill-mode: both, forwards, none;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>L'animation n'appliquera aucun style à la cible, avant et après l'exécution. Le style utilisé sera celui défini par les autres règles CSS.</dd>
- <dt><code>forwards</code></dt>
- <dd>La cible retiendra les valeurs calculées définies lors de la dernière étape (<em>keyframe</em>). La dernière étape considérée dépend de la valeur de {{cssxref("animation-direction")}} et de {{cssxref("animation-iteration-count")}} :
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col"><code>animation-direction</code></th>
-    <th scope="col"><code>animation-iteration-count</code></th>
-    <th scope="col">dernière <em>keyframe</em></th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>normal</code></td>
-    <td>pair ou impair</td>
-    <td><code>100%</code> ou <code>to</code></td>
-   </tr>
-   <tr>
-    <td><code>reverse</code></td>
-    <td>pair ou impair</td>
-    <td><code>0%</code> ou <code>from</code></td>
-   </tr>
-   <tr>
-    <td><code>alternate</code></td>
-    <td>pair</td>
-    <td><code>0%</code> ou <code>from</code></td>
-   </tr>
-   <tr>
-    <td><code>alternate</code></td>
-    <td>impair</td>
-    <td><code>100%</code> ou <code>to</code></td>
-   </tr>
-   <tr>
-    <td><code>alternate-reverse</code></td>
-    <td>pair</td>
-    <td><code>100%</code> ou <code>to</code></td>
-   </tr>
-   <tr>
-    <td><code>alternate-reverse</code></td>
-    <td>impair</td>
-    <td><code>0%</code> ou <code>from</code></td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code>backwards</code></dt>
- <dd>L'animation appliquera les valeur définies par la première <em>keyframe</em> pertinente et les retiendra pendant la durée indiquée par {{cssxref("animation-delay")}}. La première <em>keyframe</em> pertinente dépend de la valeur de {{cssxref("animation-direction")}} :
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col"><code>animation-direction</code></th>
-    <th scope="col">première <em>keyframe</em></th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>normal</code> ou <code>alternate</code></td>
-    <td><code>0%</code> ou <code>from</code></td>
-   </tr>
-   <tr>
-    <td><code>reverse</code> ou <code>alternate-reverse</code></td>
-    <td><code>100%</code> ou <code>to</code></td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code>both</code></dt>
- <dd>L'animation respectera les règles qui s'appliquent à <code>forwards</code> et <code>backwards</code>, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
-</div>
+```
+
+### Valeurs
+
+- `none`
+  - : L'animation n'appliquera aucun style à la cible, avant et après l'exécution. Le style utilisé sera celui défini par les autres règles CSS.
+- `forwards`
+
+  - : La cible retiendra les valeurs calculées définies lors de la dernière étape (_keyframe_). La dernière étape considérée dépend de la valeur de {{cssxref("animation-direction")}} et de {{cssxref("animation-iteration-count")}} :
+
+    | `animation-direction` | `animation-iteration-count` | dernière _keyframe_ |
+    | --------------------- | --------------------------- | ------------------- |
+    | `normal`              | pair ou impair              | `100%` ou `to`      |
+    | `reverse`             | pair ou impair              | `0%` ou `from`      |
+    | `alternate`           | pair                        | `0%` ou `from`      |
+    | `alternate`           | impair                      | `100%` ou `to`      |
+    | `alternate-reverse`   | pair                        | `100%` ou `to`      |
+    | `alternate-reverse`   | impair                      | `0%` ou `from`      |
+
+- `backwards`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : L'animation appliquera les valeur définies par la première _keyframe_ pertinente et les retiendra pendant la durée indiquée par {{cssxref("animation-delay")}}. La première _keyframe_ pertinente dépend de la valeur de {{cssxref("animation-direction")}} :
+
+    | `animation-direction`            | première _keyframe_ |
+    | -------------------------------- | ------------------- |
+    | `normal` ou `alternate`          | `0%` ou `from`      |
+    | `reverse` ou `alternate-reverse` | `100%` ou `to`      |
+
+- `both`
+  - : L'animation respectera les règles qui s'appliquent à `forwards` et `backwards`, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.
+
+> **Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.demo {
+```css
+.demo {
   border-top: 100px solid #ccc;
   height: 300px;
   font-family: sans-serif;
@@ -138,48 +93,36 @@ animation-fill-mode: both, forwards, none;
     -webkit-animation-name: grow;
     -webkit-animation-duration: 3s;
     -webkit-animation-fill-mode: forwards;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Déplacez votre souris sur la boîte grise.&lt;/p&gt;
-&lt;div class="demo"&gt;
-  &lt;div class="growsandstays"&gt;La boîte grandit et s'arrête&lt;/div&gt;
-  &lt;div class="grows"&gt;La boîte grandit&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<p>Déplacez votre souris sur la boîte grise.</p>
+<div class="demo">
+  <div class="growsandstays">La boîte grandit et s'arrête</div>
+  <div class="grows">La boîte grandit</div>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples',700,300)}}</p>
+{{EmbedLiveSample('Exemples',700,300)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.animation-fill-mode")}}</p>
+{{Compat("css.properties.animation-fill-mode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/fr/web/css/animation-iteration-count/index.md b/files/fr/web/css/animation-iteration-count/index.md
index 7291b39c13..f2441ca1f0 100644
--- a/files/fr/web/css/animation-iteration-count/index.md
+++ b/files/fr/web/css/animation-iteration-count/index.md
@@ -7,54 +7,52 @@ tags:
   - Reference
 translation_of: Web/CSS/animation-iteration-count
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>animation-iteration-count</code></strong> indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête.</p>
+La propriété **`animation-iteration-count`** indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête.
 
-<p>Si plusieurs valeurs sont indiquées, à chaque lancement de l'animation, c'est la valeur suivante de la liste qui est utilisée. Lorsqu'on arrive à la fin de la liste, on reprend avec la première valeur de la liste.</p>
+Si plusieurs valeurs sont indiquées, à chaque lancement de l'animation, c'est la valeur suivante de la liste qui est utilisée. Lorsqu'on arrive à la fin de la liste, on reprend avec la première valeur de la liste.
 
-<div>{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}
 
-<p>Généralement, on utilisera la propriété raccourcie {{cssxref("animation")}} afin de définir toutes les propriétés relatives à une animation.</p>
+Généralement, on utilisera la propriété raccourcie {{cssxref("animation")}} afin de définir toutes les propriétés relatives à une animation.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 animation-iteration-count: infinite;
 
 /* Valeur avec une quantité */
-/* Type &lt;number&gt;            */
+/* Type <number>            */
 animation-iteration-count: 3;
 animation-iteration-count: 2.3;
 
 /* Gestion de plusieurs animations */
 animation-iteration-count: 2, 0, infinite;
-</pre>
+```
 
-<p>La propriété <code>animation-iteration-count</code> est définie avec une ou plusieurs valeurs, parmi la liste suivante, séparées par des virgules.</p>
+La propriété `animation-iteration-count` est définie avec une ou plusieurs valeurs, parmi la liste suivante, séparées par des virgules.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>infinite</code></dt>
- <dd>L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété <strong><code>animation-direction</code></strong>.</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Le nombre de répétitions pour l'animation. La valeur par défaut est <code>1</code> (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi <code>0.5</code> indiquera une moitié du cycle de l'animation).</dd>
-</dl>
+- `infinite`
+  - : L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété **`animation-direction`**.
+- `<number>`
+  - : Le nombre de répétitions pour l'animation. La valeur par défaut est `1` (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi `0.5` indiquera une moitié du cycle de l'animation).
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
-</div>
+> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 3s;
   animation-name: glissement;
   animation-iteration-count: infinite;
@@ -78,54 +76,42 @@ animation-iteration-count: 2, 0, infinite;
     margin-left: 0%;
     width: 100%;
   }
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="infini"&gt;
+```html
+<p class="infini">
   La Chenille et Alice se considérèrent un instant en silence.
   Enfin la Chenille sortit le houka de sa bouche, et lui adressa
   la parole d’une voix endormie et traînante.
-&lt;/p&gt;
+</p>
 
-&lt;p class="dix"&gt;
+<p class="dix">
   Voyons si je me souviendrai de tout ce que je savais : quatre fois
   cinq font douze, quatre fois six font treize, quatre fois sept font
   — je n’arriverai jamais à vingt de ce train-là.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+{{EmbedLiveSample("Exemples","300","300")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.animation-iteration-count")}}</p>
+{{Compat("css.properties.animation-iteration-count")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/fr/web/css/animation-name/index.md b/files/fr/web/css/animation-name/index.md
index 107ab29d0c..9552ff7a7f 100644
--- a/files/fr/web/css/animation-name/index.md
+++ b/files/fr/web/css/animation-name/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/animation-name
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>animation-name</code></strong> définit une liste d'animations qui doivent être appliquées à l'élément ciblé. Chaque nom indique une règle @ {{cssxref("@keyframes")}} qui définit les valeurs des propriétés pour la séquence.</p>
+La propriété **`animation-name`** définit une liste d'animations qui doivent être appliquées à l'élément ciblé. Chaque nom indique une règle @ {{cssxref("@keyframes")}} qui définit les valeurs des propriétés pour la séquence.
 
-<div>{{EmbedInteractiveExample("pages/css/animation-name.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-name.html")}}
 
-<p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées aux animations.</p>
+Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées aux animations.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 animation-name: none;
 
 /* Valeur utilisant un identifiant */
@@ -30,30 +31,27 @@ animation-name: test1, animation4;
 animation-name: initial
 animation-name: inherit
 animation-name: unset
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Un mot-clé qui indique qu'aucune étape (<em>keyframe</em>) ne sera utilisée. Il peut être utilisée pour désactiver une animation sans changer l'ordre des autres identifiants ou afin de désactiver les animations provenant de la cascade.</dd>
- <dt>{{cssxref("custom-ident","&lt;custom-ident&gt;")}}</dt>
- <dd>Une chaîne de caractères qui identifie l'animation. Un identifiant est une séquence, insensible à la casse, de lettres entre <code>a</code> et <code>z</code>, de nombres entre <code>0</code> et <code>9</code>, de tirets bas (<code>_</code>) et/ou de tirets (<code>-</code>). Le première caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets en début d'identifiant. Enfin, la chaîne de l'identifiant ne peut pas être <code>unset</code>, <code>initial</code>, <code>inherit</code> ou une combinaison analogue avec une casse différente.</dd>
-</dl>
+- `none`
+  - : Un mot-clé qui indique qu'aucune étape (_keyframe_) ne sera utilisée. Il peut être utilisée pour désactiver une animation sans changer l'ordre des autres identifiants ou afin de désactiver les animations provenant de la cascade.
+- {{cssxref("custom-ident","&lt;custom-ident&gt;")}}
+  - : Une chaîne de caractères qui identifie l'animation. Un identifiant est une séquence, insensible à la casse, de lettres entre `a` et `z`, de nombres entre `0` et `9`, de tirets bas (`_`) et/ou de tirets (`-`). Le première caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets en début d'identifiant. Enfin, la chaîne de l'identifiant ne peut pas être `unset`, `initial`, `inherit` ou une combinaison analogue avec une casse différente.
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
-</div>
+> **Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 3s;
   animation-name: glissement;
   animation-iteration-count: infinite;
@@ -68,48 +66,36 @@ animation-name: unset
     margin-left: 0%;
     width: 100%;
   }
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   La Chenille et Alice se considérèrent un instant en silence.
   Enfin la Chenille sortit le houka de sa bouche, et lui adressa
   la parole d’une voix endormie et traînante.
-&lt;/p&gt; </pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+{{EmbedLiveSample("Exemples","300","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.animation-name")}}</p>
+{{Compat("css.properties.animation-name")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/fr/web/css/animation-play-state/index.md b/files/fr/web/css/animation-play-state/index.md
index c0dcf45efb..9a1e643d7a 100644
--- a/files/fr/web/css/animation-play-state/index.md
+++ b/files/fr/web/css/animation-play-state/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/animation-play-state
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>animation-play-state</code></strong> définit si une animation est en cours d'exécution ou si elle est en pause.</p>
+La propriété **`animation-play-state`** définit si une animation est en cours d'exécution ou si elle est en pause.
 
-<div>{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}
 
-<p>Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).</p>
+Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* On a une seule animation */
+```css
+/* On a une seule animation */
 animation-play-state: running;
 animation-play-state: paused;
 
@@ -29,30 +30,27 @@ animation-play-state: paused, running, running;
 animation-play-state: inherit;
 animation-play-state: initial;
 animation-play-state: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>running</code></dt>
- <dd>L'animation est en cours.</dd>
- <dt><code>paused</code></dt>
- <dd>L'animation est en pause.</dd>
-</dl>
+- `running`
+  - : L'animation est en cours.
+- `paused`
+  - : L'animation est en pause.
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">paramétrer les valeurs des propriétés pour plusieurs animations</a>.</p>
-</div>
+> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : [paramétrer les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 3s;
   animation-name: glissement;
   animation-iteration-count: infinite;
@@ -76,53 +74,41 @@ animation-play-state: unset;
     margin-left: 0%;
     width: 100%;
   }
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="arret"&gt;
+```html
+<p class="arret">
   La Chenille et Alice se considérèrent un instant en silence.
   Enfin la Chenille sortit le houka de sa bouche, et lui adressa
   la parole d’une voix endormie et traînante.
-&lt;/p&gt;
+</p>
 
-&lt;p class="encours"&gt;
+<p class="encours">
   Alice, un peu irritée du parler bref de la Chenille, se redressa
   de toute sa hauteur.
-&lt;/p&gt; </pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+{{EmbedLiveSample("Exemples","300","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.animation-play-state")}}</p>
+{{Compat("css.properties.animation-play-state")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/fr/web/css/animation-timing-function/index.md b/files/fr/web/css/animation-timing-function/index.md
index f3b7858272..126a446822 100644
--- a/files/fr/web/css/animation-timing-function/index.md
+++ b/files/fr/web/css/animation-timing-function/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/animation-timing-function
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>animation-timing-function</strong></code> définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("easing-function")}}.</p>
+La propriété **`animation-timing-function`** définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("easing-function")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
 
-<p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées à une animation.</p>
+Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées à une animation.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 animation-timing-function: ease;
 animation-timing-function: ease-in;
 animation-timing-function: ease-out;
@@ -45,80 +46,77 @@ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
 animation-timing-function: inherit;
 animation-timing-function: initial;
 animation-timing-function: unset;
-</pre>
-
-<p>Pour les animations cadencées (<em>keyframed</em>), la fonction s'applique entre chaque étape (ou <em><a href="/fr/docs/Web/CSS/@keyframes">keyframes</a></em>) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de <em>timing</em> est appliquée au début et à la fin de l'étape de l'animation.</p>
-
-<p>Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;timing-function&gt;</code></dt>
- <dd>Chaque valeur {{cssxref("easing-function")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}.
- <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.</p>
-
- <dl>
-  <dt><code>ease</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.</dd>
-  <dt><code>linear</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code> : l'animation s'effectue à vitesse constante.</dd>
-  <dt><code>ease-in</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code> : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.</dd>
-  <dt><code>ease-out</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0, 0, 0.58, 1.0)</code> : l'animation commence rapidement puis ralentit jusqu'à la fin.</dd>
-  <dt><code>ease-in-out</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code> : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.</dd>
-  <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
-  <dd>Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.</dd>
-  <dt><code>steps( n, &lt;jumpterm&gt;)</code></dt>
-  <dd>L'animation s'effectue selon <em>n</em> étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre <em>jumpterm</em>, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
-  <dl>
-   <dt><code>jump-start</code></dt>
-   <dd>La fonction est continue à gauche et le premier saut se produit au début de l'animation.</dd>
-   <dt><code>jump-end</code></dt>
-   <dd>La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.</dd>
-   <dt><code>jump-none</code></dt>
-   <dd>Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).</dd>
-   <dt><code>jump-both</code></dt>
-   <dd>Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.</dd>
-   <dt><code>start</code></dt>
-   <dd>Identique à <code>jump-start.</code></dd>
-   <dt><code>end</code></dt>
-   <dd>Identique à <code>jump-end.</code></dd>
-  </dl>
-  </dd>
-  <dt><code>step-start</code></dt>
-  <dd>Synonyme de <code>steps(1, jump-start)</code></dd>
-  <dt><code>step-end</code></dt>
-  <dd>Synonyme de <code>steps(1, jump-end)</code></dd>
- </dl>
- </dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété <code>animation-*</code>, elles seront affectées selon leur ordre aux différentes animations listées par  {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p>
-</div>
+```
+
+Pour les animations cadencées (_keyframed_), la fonction s'applique entre chaque étape (ou _[keyframes](/fr/docs/Web/CSS/@keyframes)_) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de _timing_ est appliquée au début et à la fin de l'étape de l'animation.
+
+Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.
+
+### Valeurs
+
+- `<timing-function>`
+
+  - : Chaque valeur {{cssxref("easing-function")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}.
+
+    Les valeurs avec des mots-clés (`ease`, `linear`, `ease-in-out`, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction `cubic-bezier()` permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.
+
+    - `ease`
+      - : Correspond à `cubic-bezier(0.25, 0.1, 0.25, 1.0)` : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.
+    - `linear`
+      - : Correspond à `cubic-bezier(0.0, 0.0, 1.0, 1.0)` : l'animation s'effectue à vitesse constante.
+    - `ease-in`
+      - : Correspond à `cubic-bezier(0.42, 0, 1.0, 1.0)` : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.
+    - `ease-out`
+      - : Correspond à `cubic-bezier(0, 0, 0.58, 1.0)` : l'animation commence rapidement puis ralentit jusqu'à la fin.
+    - `ease-in-out`
+      - : Correspond à `cubic-bezier(0.42, 0, 0.58, 1.0)` : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.
+    - `cubic-bezier(p1, p2, p3, p4)`
+      - : Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.
+    - `steps( n, <jumpterm>)`
+
+      - : L'animation s'effectue selon _n_ étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre _jumpterm_, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
+
+        - `jump-start`
+          - : La fonction est continue à gauche et le premier saut se produit au début de l'animation.
+        - `jump-end`
+          - : La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.
+        - `jump-none`
+          - : Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).
+        - `jump-both`
+          - : Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.
+        - `start`
+          - : Identique à `jump-start.`
+        - `end`
+          - : Identique à `jump-end.`
+
+    - `step-start`
+      - : Synonyme de `steps(1, jump-start)`
+    - `step-end`
+      - : Synonyme de `steps(1, jump-end)`
+
+> **Note :** Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété `animation-*`, elles seront affectées selon leur ordre aux différentes animations listées par  {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir [Paramétrer plusieurs valeurs de propriétés pour les animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<div>
-<h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3>
+### Courbes de Bézier cubiques
 
-<pre class="brush:html hidden">&lt;div class="parent"&gt;
-  &lt;div class="ease"&gt;ease&lt;/div&gt;
-  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
-  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
-  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
-  &lt;div class="linear"&gt;linear&lt;/div&gt;
-  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html hidden
+<div class="parent">
+  <div class="ease">ease</div>
+  <div class="easein">ease-in</div>
+  <div class="easeout">ease-out</div>
+  <div class="easeinout">ease-in-out</div>
+  <div class="linear">linear</div>
+  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
+</div>
+```
 
-<pre class="brush:css hidden">.parent &gt; div[class] {
+```css hidden
+.parent > div[class] {
     animation-name: changeme;
     animation-duration: 10s;
     animation-iteration-count: infinite;
@@ -140,9 +138,10 @@ animation-timing-function: unset;
       border: 1px solid orange;
    }
 }
-</pre>
+```
 
-<pre class="brush: css">.ease {
+```css
+.ease {
    animation-timing-function: ease;
 }
 .easein {
@@ -159,26 +158,28 @@ animation-timing-function: unset;
 }
 .cb {
    animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
-}</pre>
+}
+```
+
+{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}
 
-<div>{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}</div>
+### Fonctions en escalier
+
+```html hidden
+<div class="parent">
+  <div class="jump-start">jump-start</div>
+  <div class="jump-end">jump-end</div>
+  <div class="jump-both">jump-both</div>
+  <div class="jump-none">jump-none</div>
+  <div class="start">start</div>
+  <div class="end">end</div>
+  <div class="step-start">step-start</div>
+  <div class="step-end">step-end</div>
 </div>
+```
 
-<div>
-<h3 id="Fonctions_en_escalier">Fonctions en escalier</h3>
-
-<pre class="brush:html hidden">&lt;div class="parent"&gt;
-  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
-  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
-  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
-  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
-  &lt;div class="start"&gt;start&lt;/div&gt;
-  &lt;div class="end"&gt;end&lt;/div&gt;
-  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
-  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush:css hidden">.parent &gt; div[class] {
+```css hidden
+.parent > div[class] {
     animation-name: changeme;
     animation-duration: 10s;
     animation-iteration-count: infinite;
@@ -200,9 +201,10 @@ animation-timing-function: unset;
       border: 1px solid orange;
    }
 }
-</pre>
+```
 
-<pre class="brush: css">.jump-start {
+```css
+.jump-start {
    animation-timing-function: steps(5, jump-start);
 }
 .jump-end {
@@ -225,40 +227,25 @@ animation-timing-function: unset;
 }
 .step-end {
    animation-timing-function: step-end;
-}</pre>
+}
+```
 
-<div>{{EmbedLiveSample("Fonctions_en_escalier")}}</div>
-</div>
+{{EmbedLiveSample("Fonctions_en_escalier")}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                 | Commentaires          |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | --------------------- |
+| {{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}} | {{Spec2('CSS3 Animations')}} | Définition initiale.. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.animation-timing-function")}}
+
+## Voir aussi
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale..</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.animation-timing-function")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li>
- <li>{{cssxref('easing-function')}}</li>
- <li>L'API JavaScript {{domxref("AnimationEvent")}}</li>
-</ul>
+- [Utiliser les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations "CSS developer guide about CSS animations")
+- {{cssxref('easing-function')}}
+- L'API JavaScript {{domxref("AnimationEvent")}}
diff --git a/files/fr/web/css/animation/index.md b/files/fr/web/css/animation/index.md
index fd5be78c0d..18e3912edd 100644
--- a/files/fr/web/css/animation/index.md
+++ b/files/fr/web/css/animation/index.md
@@ -8,26 +8,25 @@ tags:
   - Reference
 translation_of: Web/CSS/animation
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>animation</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> qui permet de d'appliquer une animation entre des styles.</p>
+La propriété **`animation`** est [une propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) qui permet de d'appliquer une animation entre des styles.
 
-<p>C'est une propriété qui synthétise les propriétés suivantes :</p>
+C'est une propriété qui synthétise les propriétés suivantes :
 
-<ul>
- <li>{{cssxref("animation-name")}},</li>
- <li>{{cssxref("animation-duration")}},</li>
- <li>{{cssxref("animation-timing-function")}},</li>
- <li>{{cssxref("animation-delay")}},</li>
- <li>{{cssxref("animation-iteration-count")}},</li>
- <li>{{cssxref("animation-direction")}},</li>
- <li>{{cssxref("animation-fill-mode")}},</li>
- <li>{{cssxref("animation-play-state")}}.</li>
-</ul>
+- {{cssxref("animation-name")}},
+- {{cssxref("animation-duration")}},
+- {{cssxref("animation-timing-function")}},
+- {{cssxref("animation-delay")}},
+- {{cssxref("animation-iteration-count")}},
+- {{cssxref("animation-direction")}},
+- {{cssxref("animation-fill-mode")}},
+- {{cssxref("animation-play-state")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation.html")}}
 
-<pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay |
+```css
+/* @keyframes duration | timing-function | delay |
    iteration-count | direction | fill-mode | play-state | name */
   animation: 3s ease-in 1s 2 reverse both paused slidein;
 
@@ -36,49 +35,53 @@ translation_of: Web/CSS/animation
 
 /* @keyframes duration | name */
   animation: 3s slidein;
-</pre>
+```
 
-<h2 id="animation_example">Exemple d'animation</h2>
-<pre class="brush: html hidden">&lt;div class="grid"&gt;
-  &lt;div class="col"&gt;
-    &lt;div class="note"&gt;
+## Exemple d'animation
+
+```html hidden
+<div class="grid">
+  <div class="col">
+    <div class="note">
       Avec l'animation suivante :
-      &lt;pre&gt;@keyframes slidein {
+      <pre>@keyframes slidein {
   from { transform: scaleX(0); }
   to   { transform: scaleX(1); }
-}&lt;/pre&gt;
-    &lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt;
-        &lt;button class="play" title="LECTURE"&gt;&lt;/button&gt;
-      &lt;/div&gt;
-      &lt;div class="cell flx"&gt;
-        &lt;div class="overlay"&gt;animation: 3s ease-in 1s 2 reverse both paused slidein;&lt;/div&gt;
-        &lt;div class="animation a1"&gt;&lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt;
-        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
-      &lt;/div&gt;
-      &lt;div class="cell flx"&gt;
-        &lt;div class="overlay"&gt;animation: 3s linear 1s slidein;&lt;/div&gt;
-        &lt;div class="animation a2"&gt;&lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt;
-        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
-      &lt;/div&gt;
-      &lt;div class="cell flx"&gt;
-        &lt;div class="overlay"&gt;animation: 3s slidein;&lt;/div&gt;
-        &lt;div class="animation a3"&gt;&lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css hidden">html,body {
+}</pre>
+    </div>
+    <div class="row">
+      <div class="cell">
+        <button class="play" title="LECTURE"></button>
+      </div>
+      <div class="cell flx">
+        <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div>
+        <div class="animation a1"></div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cell">
+        <button class="pause" title="PAUSE"></button>
+      </div>
+      <div class="cell flx">
+        <div class="overlay">animation: 3s linear 1s slidein;</div>
+        <div class="animation a2"></div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="cell">
+        <button class="pause" title="PAUSE"></button>
+      </div>
+      <div class="cell flx">
+        <div class="overlay">animation: 3s slidein;</div>
+        <div class="animation a3"></div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```css hidden
+html,body {
   height: 100%;
   box-sizing: border-box;
 }
@@ -168,9 +171,11 @@ button.restart {
   width: 100%;
   height: calc(100% - 1.5em);
   transform-origin: left center;
-}</pre>
+}
+```
 
-<pre class="brush: js hidden">window.addEventListener('load', function () {
+```js hidden
+window.addEventListener('load', function () {
   var ANIMATION = Array.from(document.querySelectorAll('.animation'));
   var BUTTON    = Array.from(document.querySelectorAll('button'));
 
@@ -208,74 +213,70 @@ button.restart {
   BUTTON.forEach(function (btn, index) {
     btn.addEventListener('click', function () { playPause(index); });
   });
-})</pre>
+})
+```
+
+{{EmbedLiveSample("animation_example", "100%", 260, "", "", "example-outcome-frame")}}
+
+[Une liste des propriétés qui peuvent être animées](/fr/docs/Web/CSS/Liste_propriétés_CSS_animées) est disponible. On notera que cette liste est également valable pour [les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS).
 
-<p>{{EmbedLiveSample("animation_example", "100%", 260, "", "", "example-outcome-frame")}}</p>
+## Syntaxe
 
-<p><a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">Une liste des propriétés qui peuvent être animées</a> est disponible. On notera que cette liste est également valable pour <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">les transitions CSS</a>.</p>
+La propriété `animation` se définit grâce à une ou plusieurs animations, séparées par des virgules.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+Chaque animation se définit comme :
 
-<p>La propriété <code>animation</code> se définit grâce à une ou plusieurs animations, séparées par des virgules.</p>
+- zéro ou une valeur du type :
 
-<p>Chaque animation se définit comme :</p>
+  - {{cssxref("&lt;single-transition-timing-function&gt;")}}
+  - {{cssxref("animation", "&lt;single-animation-iteration-count&gt;", "#&lt;single-animation-iteration-count&gt;")}}
+  - {{cssxref("animation", "&lt;single-animation-direction&gt;", "#&lt;single-animation-direction&gt;")}}
+  - {{cssxref("animation", "&lt;single-animation-fill-mode&gt;", "#&lt;single-animation-fill-mode&gt;")}}
+  - {{cssxref("animation", "&lt;single-animation-play-state&gt;", "#&lt;single-animation-play-state&gt;")}}
 
-<ul>
- <li>zéro ou une valeur du type :
-  <ul>
-   <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
-   <li>{{cssxref("animation", "&lt;single-animation-iteration-count&gt;", "#&lt;single-animation-iteration-count&gt;")}}</li>
-   <li>{{cssxref("animation", "&lt;single-animation-direction&gt;", "#&lt;single-animation-direction&gt;")}}</li>
-   <li>{{cssxref("animation", "&lt;single-animation-fill-mode&gt;", "#&lt;single-animation-fill-mode&gt;")}}</li>
-   <li>{{cssxref("animation", "&lt;single-animation-play-state&gt;", "#&lt;single-animation-play-state&gt;")}} </li>
-  </ul>
- </li>
- <li>un nom optionnel pour l'animation ; celui-ci peut être le mot-clé <code>none</code>, un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) ou une chaîne de caractères ({{cssxref("&lt;string&gt;")}})</li>
- <li>zéro, une ou deux valeurs de type {{cssxref("&lt;time&gt;")}}</li>
-</ul>
+- un nom optionnel pour l'animation ; celui-ci peut être le mot-clé `none`, un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) ou une chaîne de caractères ({{cssxref("&lt;string&gt;")}})
+- zéro, une ou deux valeurs de type {{cssxref("&lt;time&gt;")}}
 
-<p>L'ordre des valeurs est important : la première valeur qui peut être analysée comme une valeur de type {{cssxref("&lt;time&gt;")}} sera affectée à {{cssxref("animation-duration")}} et la deuxième à {{cssxref("animation-delay")}}.</p>
+L'ordre des valeurs est important : la première valeur qui peut être analysée comme une valeur de type {{cssxref("&lt;time&gt;")}} sera affectée à {{cssxref("animation-duration")}} et la deuxième à {{cssxref("animation-delay")}}.
 
-<p>L'ordre des valeurs est également important pour chaque définition d'animation afin d'identifier la valeur de {{cssxref("animation-name")}} parmi les autres mots-clés. Lors de l'analyse de la déclaration, les mots-clés valides pour d'autres propriétés que {{cssxref("animation-name")}} et dont les valeurs n'ont pas été trouvées avant doivent être affectés à ces différentes propriétés et non à {{cssxref("animation-name")}}. De plus, lors de la sérialisation, les valeurs par défaut doivent être expliciter autant que nécessaire pour distinguer une valeur pour {{cssxref("animation-name")}} qui pourrait être une valeur pour une autre propriété.</p>
+L'ordre des valeurs est également important pour chaque définition d'animation afin d'identifier la valeur de {{cssxref("animation-name")}} parmi les autres mots-clés. Lors de l'analyse de la déclaration, les mots-clés valides pour d'autres propriétés que {{cssxref("animation-name")}} et dont les valeurs n'ont pas été trouvées avant doivent être affectés à ces différentes propriétés et non à {{cssxref("animation-name")}}. De plus, lors de la sérialisation, les valeurs par défaut doivent être expliciter autant que nécessaire pour distinguer une valeur pour {{cssxref("animation-name")}} qui pourrait être une valeur pour une autre propriété.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;single-animation-iteration-count&gt;</code></dt>
- <dd>Le nombre de fois où l'animation est jouée, cf.  {{cssxref("animation-iteration-count")}}.</dd>
- <dt><code>&lt;single-animation-direction&gt;</code></dt>
- <dd>La direction dans laquelle s'effectue l'animation, cf. {{cssxref("animation-direction")}}.</dd>
- <dt><code>&lt;single-animation-fill-mode&gt;</code></dt>
- <dd>La façon dont les styles sont appliquées à la cible de l'animation, avant et après son exécution, cf. {{cssxref("animation-fill-mode")}}.</dd>
- <dt><code>&lt;single-animation-play-state&gt;</code></dt>
- <dd>Si l'animation est lancée ou non, cf. {{cssxref("animation-play-state")}}.</dd>
-</dl>
+- `<single-animation-iteration-count>`
+  - : Le nombre de fois où l'animation est jouée, cf.  {{cssxref("animation-iteration-count")}}.
+- `<single-animation-direction>`
+  - : La direction dans laquelle s'effectue l'animation, cf. {{cssxref("animation-direction")}}.
+- `<single-animation-fill-mode>`
+  - : La façon dont les styles sont appliquées à la cible de l'animation, avant et après son exécution, cf. {{cssxref("animation-fill-mode")}}.
+- `<single-animation-play-state>`
+  - : Si l'animation est lancée ou non, cf. {{cssxref("animation-play-state")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<div class="note">
-<p><strong>Note :</strong> D'autres exemples sont disponibles sur la page <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Manipuler les animations CSS</a>.</p>
-</div>
+> **Note :** D'autres exemples sont disponibles sur la page [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations).
 
-<h3 id="Vue_laser">Vue laser</h3>
+### Vue laser
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="view_port"&gt;
-  &lt;div class="polling_message"&gt;
+```html
+<div class="view_port">
+  <div class="polling_message">
     En attente
-  &lt;/div&gt;
-  &lt;div class="cylon_eye"&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.polling_message {
+```css
+.polling_message {
   color: white;
   float: left;
   margin-right: 2%;
@@ -301,62 +302,43 @@ button.restart {
 
 @-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
         @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Vue_laser')}}</p>
+{{EmbedLiveSample('Vue_laser')}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Les animations qui clignotent ou scintillent sont problématiques et notamment pour les personnes souffrant de problèmes cognitifs. De plus, certains types de mouvement peuvent déclencher des désordres vestibulaires, des épilepsies, des migraines ou une sensibilité scotopique.</p>
+Les animations qui clignotent ou scintillent sont problématiques et notamment pour les personnes souffrant de problèmes cognitifs. De plus, certains types de mouvement peuvent déclencher des désordres vestibulaires, des épilepsies, des migraines ou une sensibilité scotopique.
 
-<p>Veillez à fournir un mécanisme qui permette d'interrompre ou de désactiver l'animation ainsi qu'à utiliser <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">une requête média avec <code>prefers-reduced-motion</code></a> pour les mouvements réduits afin d'obtenir une ergonomie complémentaire pour les personnes souhaitant ne pas avoir d'animations.</p>
+Veillez à fournir un mécanisme qui permette d'interrompre ou de désactiver l'animation ainsi qu'à utiliser [une requête média avec `prefers-reduced-motion`](/fr/docs/Web/CSS/@media/prefers-reduced-motion) pour les mouvements réduits afin d'obtenir une ergonomie complémentaire pour les personnes souhaitant ne pas avoir d'animations.
 
-<ul>
- <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity"><em>Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article</em> (en anglais)</a></li>
- <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/"><em>An Introduction to the Reduced Motion Media Query - CSS-Tricks</em> (en anglais)</a></li>
- <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/"><em>Responsive Design for Motion - WebKit</em> (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">Comprendre les règles WCAG 2.2</a></li>
- <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 - W3C Understanding WCAG 2.0 (en anglais)</a></em></li>
-</ul>
+- [_Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article_ (en anglais)](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity)
+- [_An Introduction to the Reduced Motion Media Query - CSS-Tricks_ (en anglais)](https://css-tricks.com/introduction-reduced-motion-media-query/)
+- [_Responsive Design for Motion - WebKit_ (en anglais)](https://webkit.org/blog/7551/responsive-design-for-motion/)
+- [Comprendre les règles WCAG 2.2](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content)
+- _[Understanding Success Criterion 2.2.2 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html)_
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#animation', 'animation')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#animation', 'animation')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.animation")}}</p>
+{{Compat("css.properties.animation")}}
 
-<h3 id="Notes_relatives_à_Quantum_(Firefox)">Notes relatives à Quantum (Firefox)</h3>
+### Notes relatives à Quantum (Firefox)
 
-<ul>
- <li>Gecko possède un bug qui fait que lorsqu'on anime un élément en dehors de l'écran pour le faire apparaître à l'écran après une durée donnée, il n'effectue pas de <em>repaint</em> sur certaines plateformes (par exemple Windows, cf. ({{bug(1383239)}})). Ce problème a été corrigé avec le nouveau moteur de rendu CSS, <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57.</li>
- <li>Un autre bug empêche d'ouvrir les éléments {{htmlelement("details")}} par défaut avec l'attribut <code>open</code> si ceux-ci sont animés (cf. {{bug(1382124)}}). Cet autre point est également résolu avec Stylo.</li>
- <li>Un autre bug ne répercute pas les modifications de {{cssxref("font-size")}} sur les animations qui utilisent l'unité <code>em</code> pour l'élément parent (cf. {{bug(1254424)}}). Stylo règle ce problème.</li>
-</ul>
+- Gecko possède un bug qui fait que lorsqu'on anime un élément en dehors de l'écran pour le faire apparaître à l'écran après une durée donnée, il n'effectue pas de _repaint_ sur certaines plateformes (par exemple Windows, cf. ({{bug(1383239)}})). Ce problème a été corrigé avec le nouveau moteur de rendu CSS, [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour Firefox 57.
+- Un autre bug empêche d'ouvrir les éléments {{htmlelement("details")}} par défaut avec l'attribut `open` si ceux-ci sont animés (cf. {{bug(1382124)}}). Cet autre point est également résolu avec Stylo.
+- Un autre bug ne répercute pas les modifications de {{cssxref("font-size")}} sur les animations qui utilisent l'unité `em` pour l'élément parent (cf. {{bug(1254424)}}). Stylo règle ce problème.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/fr/web/css/appearance/index.md b/files/fr/web/css/appearance/index.md
index 3f709c1ac5..49012e6973 100644
--- a/files/fr/web/css/appearance/index.md
+++ b/files/fr/web/css/appearance/index.md
@@ -13,23 +13,22 @@ tags:
 translation_of: Web/CSS/appearance
 browser-compat: css.properties.appearance
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>-moz-appearance</code></strong> est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native du système d'exploitation.</p>
+La propriété **`-moz-appearance`** est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native du système d'exploitation.
 
-<p>La propriété <strong><code>-webkit-appearance</code></strong> est utilisée dans les navigateurs basés sur WebKit (c'est-à-dire Safari) et sur Blink (c'est-à-dire Chrome ou Opera) et permet d'avoir la même fonctionnalités. On notera que plusieurs navigateurs, non basés sur WebKit (Firefox et Edge par exemple), prennent en charge ce préfixe pour des raisons de compatibilité web.</p>
+La propriété **`-webkit-appearance`** est utilisée dans les navigateurs basés sur WebKit (c'est-à-dire Safari) et sur Blink (c'est-à-dire Chrome ou Opera) et permet d'avoir la même fonctionnalités. On notera que plusieurs navigateurs, non basés sur WebKit (Firefox et Edge par exemple), prennent en charge ce préfixe pour des raisons de compatibilité web.
 
-<div>{{EmbedInteractiveExample("pages/css/appearance.html")}}</div>
+{{EmbedInteractiveExample("pages/css/appearance.html")}}
 
-<p>Cette propriété était utilisée dans les feuilles de style XUL afin de mettre en forme des <em>widgets</em> utilisant la mise en forme de la plateforme utilisée. Elle est également utilisée dans les implémentations XBL pour les <em>widgets</em> livrés avec les logiciels Mozilla.</p>
+Cette propriété était utilisée dans les feuilles de style XUL afin de mettre en forme des _widgets_ utilisant la mise en forme de la plateforme utilisée. Elle est également utilisée dans les implémentations XBL pour les _widgets_ livrés avec les logiciels Mozilla.
 
-<div class="note">
-<p><strong>Note :</strong><em> Cette propriété doit être utilisée avec beaucoup d'attention sur les sites web.</em> Son comportement peut varier d'un navigateur à l'autre bien que ces variations aient réduit avec le temps. Le mot-clé <code>none</code> peut avoir un comportement différent d'une plateforme à une autre et d'autres mots-clés ne sont pas pris en charge.</p>
-</div>
+> **Note :** _Cette propriété doit être utilisée avec beaucoup d'attention sur les sites web._ Son comportement peut varier d'un navigateur à l'autre bien que ces variations aient réduit avec le temps. Le mot-clé `none` peut avoir un comportement différent d'une plateforme à une autre et d'autres mots-clés ne sont pas pris en charge.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs spécifiées par le module CSS Basic User Interface de niveau 4 */
+```css
+/* Valeurs spécifiées par le module CSS Basic User Interface de niveau 4 */
 appearance: none;
 appearance: auto;
 appearance: menulist-button;
@@ -56,529 +55,235 @@ appearance: progress-bar;
 /* Liste partielle des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
 -webkit-appearance: media-mute-button;
 -webkit-appearance: caret;
-</pre>
+```
 
-<h3 id="values">Valeurs</h3>
+### Valeurs
 
-<h4 id="standard_keywords">Mots-clés standard</h4>
+#### Mots-clés standard
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th>Valeur</th>
-   <th>Navigateur</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td><code>none</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td>Aucune mise en forme particulière n'est appliquée. C'est la valeur par défaut.</td>
-  </tr>
-  <tr>
-   <td><code>auto</code></td>
-   <td>Firefox Chrome</td>
-   <td>L'agent utilisateur sélectionne la mise en forme spécifique appropriée en fonction de l'élément. Cette valeur agira comme <code>none</code> pour les éléments sans mise en forme spéciale.</td>
-  </tr>
-  <tr>
-   <td><code>menulist-button</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td>L'élément est mis en forme comme un bouton qui indiquerait qu'un menu pourrait être ouvert.</td>
-  </tr>
-  <tr>
-   <td><code>textfield</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td colspan="3">Les valeurs suivantes sont traitées de façon équivalente à <code>auto</code>:</td>
-  </tr>
-  <tr>
-   <td><code>button</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td>L'élément est dessiné comme un bouton.</td>
-  </tr>
-  <tr>
-   <td><code>checkbox</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td>L'élément est dessiné comme une case à cocher (et n'inclut que la case à cocher).</td>
-  </tr>
-  <tr>
-   <td><code>listbox</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>menulist</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>meter</code></td>
-   <td>Chrome Safari Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>progress-bar</code></td>
-   <td>Chrome Safari Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>push-button</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>radio</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td>L'élément est dessiné comme un bouton radio (et n'inclut que la portion liée au « bouton radio »).</td>
-  </tr>
-  <tr>
-   <td><code>searchfield</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>slider-horizontal</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>square-button</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>textarea</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Valeur</th>
+      <th>Navigateur</th>
+      <th>Description</th>
+    </tr>
+    <tr>
+      <td><code>none</code></td>
+      <td>Firefox Chrome Safari Edge</td>
+      <td>
+        Aucune mise en forme particulière n'est appliquée. C'est la valeur par
+        défaut.
+      </td>
+    </tr>
+    <tr>
+      <td><code>auto</code></td>
+      <td>Firefox Chrome</td>
+      <td>
+        L'agent utilisateur sélectionne la mise en forme spécifique appropriée
+        en fonction de l'élément. Cette valeur agira comme
+        <code>none</code> pour les éléments sans mise en forme spéciale.
+      </td>
+    </tr>
+    <tr>
+      <td><code>menulist-button</code></td>
+      <td>Firefox Chrome Safari Edge</td>
+      <td>
+        L'élément est mis en forme comme un bouton qui indiquerait qu'un menu
+        pourrait être ouvert.
+      </td>
+    </tr>
+    <tr>
+      <td><code>textfield</code></td>
+      <td>Firefox Chrome Safari Edge</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td colspan="3">
+        Les valeurs suivantes sont traitées de façon équivalente à
+        <code>auto</code>:
+      </td>
+    </tr>
+    <tr>
+      <td><code>button</code></td>
+      <td>Firefox Chrome Safari Edge</td>
+      <td>L'élément est dessiné comme un bouton.</td>
+    </tr>
+    <tr>
+      <td><code>checkbox</code></td>
+      <td>Firefox Chrome Safari Edge</td>
+      <td>
+        L'élément est dessiné comme une case à cocher (et n'inclut que la case à
+        cocher).
+      </td>
+    </tr>
+    <tr>
+      <td><code>listbox</code></td>
+      <td>Firefox Chrome Safari Edge</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>menulist</code></td>
+      <td>Firefox Chrome Safari Edge</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>meter</code></td>
+      <td>Chrome Safari Firefox</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>progress-bar</code></td>
+      <td>Chrome Safari Firefox</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>push-button</code></td>
+      <td>Chrome Safari Edge</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>radio</code></td>
+      <td>Firefox Chrome Safari Edge</td>
+      <td>
+        L'élément est dessiné comme un bouton radio (et n'inclut que la portion
+        liée au « bouton radio »).
+      </td>
+    </tr>
+    <tr>
+      <td><code>searchfield</code></td>
+      <td>Firefox Chrome Safari Edge</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>slider-horizontal</code></td>
+      <td>Chrome Safari Edge</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>square-button</code></td>
+      <td>Chrome Safari Edge</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>textarea</code></td>
+      <td>Firefox Chrome Safari Edge</td>
+      <td></td>
+    </tr>
+  </tbody>
 </table>
 
-<h4 id="non-standard_keywords">Mots-clés non-standards</h4>
+#### Mots-clés non-standards
 
-<p>Les valeurs suivantes sont uniquement implémentées pour l'une ou l'autre des propriétés préfixées mais pas pour la propriété standard <strong><code>appearance</code></strong>.</p>
+Les valeurs suivantes sont uniquement implémentées pour l'une ou l'autre des propriétés préfixées mais pas pour la propriété standard **`appearance`**.
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Valeur</th>
-   <th>Navigateur</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td><code>attachment</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>borderless-attachment</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>button-bevel</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>caps-lock-indicator</code></td>
-   <td>Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>caret</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>checkbox-container</code></td>
-   <td>Firefox</td>
-   <td>L'élément est dessiné comme le conteneur d'une case à cocher. Il pourra inclure un effet d'arrière-plan sur certaines plateformes. Normalement, il devrait contenir un libellé et une case à cocher.</td>
-  </tr>
-  <tr>
-   <td><code>checkbox-label</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>checkmenuitem</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>color-well</code></td>
-   <td>Safari</td>
-   <td><code>input type=color</code></td>
-  </tr>
-  <tr>
-   <td><code>continuous-capacity-level-indicator</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>default-button</code></td>
-   <td>Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>discrete-capacity-level-indicator</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>inner-spin-button</code></td>
-   <td>Firefox Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>image-controls-button</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>list-button</code></td>
-   <td>Safari</td>
-   <td>datalist</td>
-  </tr>
-  <tr>
-   <td><code>listitem</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-enter-fullscreen-button</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-exit-fullscreen-button</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-fullscreen-volume-slider</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-fullscreen-volume-slider-thumb</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-mute-button</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-play-button</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-overlay-play-button</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-return-to-realtime-button</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-rewind-button</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-seek-back-button</code></td>
-   <td>Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-seek-forward-button</code></td>
-   <td>Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-toggle-closed-captions-button</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-slider</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-sliderthumb</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-volume-slider-container</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-volume-slider-mute-button</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-volume-slider</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-volume-sliderthumb</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-controls-background</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-controls-dark-bar-background</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-controls-fullscreen-background</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-controls-light-bar-background</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-current-time-display</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>media-time-remaining-display</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>menulist-text</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>menulist-textfield</code></td>
-   <td>Firefox Chrome Safari Edge</td>
-   <td>L'élément est mis en forme comme le champ texte d'une liste de menu (non implémenté sur Windows).</td>
-  </tr>
-  <tr>
-   <td><code>meterbar</code></td>
-   <td>Firefox</td>
-   <td>On utilisera <code>meter</code> à la place.</td>
-  </tr>
-  <tr>
-   <td><code>number-input</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>progress-bar-value</code></td>
-   <td>Chrome Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>progressbar</code></td>
-   <td>Firefox</td>
-   <td>Cet élément est mis en forme comme une barre de progression, aussi, on utilisera <code>progress-bar</code> à la place.</td>
-  </tr>
-  <tr>
-   <td><code>progressbar-vertical</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>range</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>range-thumb</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>rating-level-indicator</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>relevancy-level-indicator</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scale-horizontal</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scalethumbend</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scalethumb-horizontal</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scalethumbstart</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scalethumbtick</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scalethumb-vertical</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scale-vertical</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scrollbarthumb-horizontal</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scrollbarthumb-vertical</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scrollbartrack-horizontal</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>scrollbartrack-vertical</code></td>
-   <td>Firefox</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>searchfield-decoration</code></td>
-   <td>Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>searchfield-results-decoration</code></td>
-   <td>Chrome Safari Edge</td>
-   <td>(Fonctionne sur Chrome 51 sur Windows 7)</td>
-  </tr>
-  <tr>
-   <td><code>searchfield-results-button</code></td>
-   <td>Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>searchfield-cancel-button</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>snapshotted-plugin-overlay</code></td>
-   <td>Safari</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>sheet</code></td>
-   <td>None</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>slider-vertical</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>sliderthumb-horizontal</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>sliderthumb-vertical</code></td>
-   <td>Chrome Safari Edge</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>textfield-multiline</code></td>
-   <td>Firefox</td>
-   <td>On utilisera <code>textarea</code> à la place.</td>
-  </tr>
-  <tr>
-   <td><code>-apple-pay-button</code></td>
-   <td>Safari</td>
-   <td><strong>iOS et macOS uniquement</strong>. Disponible pour le Web à partir de iOS 10.1 et macOS 10.12.1</td>
-  </tr>
- </tbody>
-</table>
+| Valeur                                 | Navigateur                 | Description                                                                                                                                                                                          |
+| -------------------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `attachment`                           | Safari                     |                                                                                                                                                                                                      |
+| `borderless-attachment`                | Safari                     |                                                                                                                                                                                                      |
+| `button-bevel`                         | Firefox Chrome Safari Edge |                                                                                                                                                                                                      |
+| `caps-lock-indicator`                  | Safari Edge                |                                                                                                                                                                                                      |
+| `caret`                                | Firefox Chrome Safari Edge |                                                                                                                                                                                                      |
+| `checkbox-container`                   | Firefox                    | L'élément est dessiné comme le conteneur d'une case à cocher. Il pourra inclure un effet d'arrière-plan sur certaines plateformes. Normalement, il devrait contenir un libellé et une case à cocher. |
+| `checkbox-label`                       | Firefox                    |                                                                                                                                                                                                      |
+| `checkmenuitem`                        | Firefox                    |                                                                                                                                                                                                      |
+| `color-well`                           | Safari                     | `input type=color`                                                                                                                                                                                   |
+| `continuous-capacity-level-indicator`  | Safari                     |                                                                                                                                                                                                      |
+| `default-button`                       | Safari Edge                |                                                                                                                                                                                                      |
+| `discrete-capacity-level-indicator`    | Safari                     |                                                                                                                                                                                                      |
+| `inner-spin-button`                    | Firefox Chrome Safari      |                                                                                                                                                                                                      |
+| `image-controls-button`                | Safari                     |                                                                                                                                                                                                      |
+| `list-button`                          | Safari                     | datalist                                                                                                                                                                                             |
+| `listitem`                             | Firefox Chrome Safari Edge |                                                                                                                                                                                                      |
+| `media-enter-fullscreen-button`        | Chrome Safari              |                                                                                                                                                                                                      |
+| `media-exit-fullscreen-button`         | Chrome Safari              |                                                                                                                                                                                                      |
+| `media-fullscreen-volume-slider`       | Safari                     |                                                                                                                                                                                                      |
+| `media-fullscreen-volume-slider-thumb` | Safari                     |                                                                                                                                                                                                      |
+| `media-mute-button`                    | Chrome Safari Edge         |                                                                                                                                                                                                      |
+| `media-play-button`                    | Chrome Safari Edge         |                                                                                                                                                                                                      |
+| `media-overlay-play-button`            | Chrome Safari              |                                                                                                                                                                                                      |
+| `media-return-to-realtime-button`      | Safari                     |                                                                                                                                                                                                      |
+| `media-rewind-button`                  | Safari                     |                                                                                                                                                                                                      |
+| `media-seek-back-button`               | Safari Edge                |                                                                                                                                                                                                      |
+| `media-seek-forward-button`            | Safari Edge                |                                                                                                                                                                                                      |
+| `media-toggle-closed-captions-button`  | Chrome Safari              |                                                                                                                                                                                                      |
+| `media-slider`                         | Chrome Safari Edge         |                                                                                                                                                                                                      |
+| `media-sliderthumb`                    | Chrome Safari Edge         |                                                                                                                                                                                                      |
+| `media-volume-slider-container`        | Chrome Safari              |                                                                                                                                                                                                      |
+| `media-volume-slider-mute-button`      | Safari                     |                                                                                                                                                                                                      |
+| `media-volume-slider`                  | Chrome Safari              |                                                                                                                                                                                                      |
+| `media-volume-sliderthumb`             | Chrome Safari              |                                                                                                                                                                                                      |
+| `media-controls-background`            | Chrome Safari              |                                                                                                                                                                                                      |
+| `media-controls-dark-bar-background`   | Safari                     |                                                                                                                                                                                                      |
+| `media-controls-fullscreen-background` | Chrome Safari              |                                                                                                                                                                                                      |
+| `media-controls-light-bar-background`  | Safari                     |                                                                                                                                                                                                      |
+| `media-current-time-display`           | Chrome Safari              |                                                                                                                                                                                                      |
+| `media-time-remaining-display`         | Chrome Safari              |                                                                                                                                                                                                      |
+| `menulist-text`                        | Firefox Chrome Safari Edge |                                                                                                                                                                                                      |
+| `menulist-textfield`                   | Firefox Chrome Safari Edge | L'élément est mis en forme comme le champ texte d'une liste de menu (non implémenté sur Windows).                                                                                                    |
+| `meterbar`                             | Firefox                    | On utilisera `meter` à la place.                                                                                                                                                                     |
+| `number-input`                         | Firefox                    |                                                                                                                                                                                                      |
+| `progress-bar-value`                   | Chrome Safari              |                                                                                                                                                                                                      |
+| `progressbar`                          | Firefox                    | Cet élément est mis en forme comme une barre de progression, aussi, on utilisera `progress-bar` à la place.                                                                                          |
+| `progressbar-vertical`                 | Firefox                    |                                                                                                                                                                                                      |
+| `range`                                | Firefox                    |                                                                                                                                                                                                      |
+| `range-thumb`                          | Firefox                    |                                                                                                                                                                                                      |
+| `rating-level-indicator`               | Safari                     |                                                                                                                                                                                                      |
+| `relevancy-level-indicator`            | Safari                     |                                                                                                                                                                                                      |
+| `scale-horizontal`                     | Firefox                    |                                                                                                                                                                                                      |
+| `scalethumbend`                        | Firefox                    |                                                                                                                                                                                                      |
+| `scalethumb-horizontal`                | Firefox                    |                                                                                                                                                                                                      |
+| `scalethumbstart`                      | Firefox                    |                                                                                                                                                                                                      |
+| `scalethumbtick`                       | Firefox                    |                                                                                                                                                                                                      |
+| `scalethumb-vertical`                  | Firefox                    |                                                                                                                                                                                                      |
+| `scale-vertical`                       | Firefox                    |                                                                                                                                                                                                      |
+| `scrollbarthumb-horizontal`            | Firefox                    |                                                                                                                                                                                                      |
+| `scrollbarthumb-vertical`              | Firefox                    |                                                                                                                                                                                                      |
+| `scrollbartrack-horizontal`            | Firefox                    |                                                                                                                                                                                                      |
+| `scrollbartrack-vertical`              | Firefox                    |                                                                                                                                                                                                      |
+| `searchfield-decoration`               | Safari Edge                |                                                                                                                                                                                                      |
+| `searchfield-results-decoration`       | Chrome Safari Edge         | (Fonctionne sur Chrome 51 sur Windows 7)                                                                                                                                                             |
+| `searchfield-results-button`           | Safari Edge                |                                                                                                                                                                                                      |
+| `searchfield-cancel-button`            | Chrome Safari Edge         |                                                                                                                                                                                                      |
+| `snapshotted-plugin-overlay`           | Safari                     |                                                                                                                                                                                                      |
+| `sheet`                                | None                       |                                                                                                                                                                                                      |
+| `slider-vertical`                      | Chrome Safari Edge         |                                                                                                                                                                                                      |
+| `sliderthumb-horizontal`               | Chrome Safari Edge         |                                                                                                                                                                                                      |
+| `sliderthumb-vertical`                 | Chrome Safari Edge         |                                                                                                                                                                                                      |
+| `textfield-multiline`                  | Firefox                    | On utilisera `textarea` à la place.                                                                                                                                                                  |
+| `-apple-pay-button`                    | Safari                     | **iOS et macOS uniquement**. Disponible pour le Web à partir de iOS 10.1 et macOS 10.12.1                                                                                                            |
 
-<h3 id="formal_syntax">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :</p>
+La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :
 
-<pre class="brush: css">.exempleun {
+```css
+.exempleun {
   appearance: toolbarbutton;
   -moz-appearance: toolbarbutton;
   -webkit-appearance: toolbarbutton;
 }
-</pre>
+```
 
-<p>Voir également <a href="https://jsfiddle.net/go392m5s/">cet exemple JSFiddle</a> qui illustre comment utiliser <code>appearance: none</code> afin d'appliquer une mise en forme spécifique aux boutons radio et aux cases à cocher.</p>
+Voir également [cet exemple JSFiddle](https://jsfiddle.net/go392m5s/) qui illustre comment utiliser `appearance: none` afin d'appliquer une mise en forme spécifique aux boutons radio et aux cases à cocher.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}} | {{Spec2('CSS3 Basic UI')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Définition de <code>appearance</code> dans la recommandation CSS 3 Basic User Interface</a> (<em>Candidate Recommendation</em> du 11 mai 2004), qui n'est plus à jour</li>
- <li><a href="https://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Les fonctionnalités abandonnées pour la spécification CSS3 sur le module d'interface utilisateur</a></li>
-</ul>
+- [Définition de `appearance` dans la recommandation CSS 3 Basic User Interface](https://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance) (_Candidate Recommendation_ du 11 mai 2004), qui n'est plus à jour
+- [Les fonctionnalités abandonnées pour la spécification CSS3 sur le module d'interface utilisateur](https://wiki.csswg.org/spec/css4-ui#dropped-css3-features)
diff --git a/files/fr/web/css/aspect-ratio/index.md b/files/fr/web/css/aspect-ratio/index.md
index aee0eae8a1..4e7925541b 100644
--- a/files/fr/web/css/aspect-ratio/index.md
+++ b/files/fr/web/css/aspect-ratio/index.md
@@ -1,70 +1,70 @@
 ---
 title: aspect-ratio
 slug: Web/CSS/aspect-ratio
+translation_of: Web/CSS/aspect-ratio
 browser-compat: css.properties.aspect-ratio
-translation_of: 'Web/CSS/aspect-ratio'
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>aspect-ratio</code></strong> définit un <strong>ratio d'affichage préférentiel</strong> pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page.</p>
+La propriété [CSS](/fr/docs/Web/CSS) **`aspect-ratio`** définit un **ratio d'affichage préférentiel** pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page.
 
-<pre class="brush:css no-line-numbers">aspect-ratio: 1 / 1;
+```css
+aspect-ratio: 1 / 1;
 
 /* Valeurs globales */
 aspect-ratio: inherit;
 aspect-ratio: initial;
 aspect-ratio: revert;
 aspect-ratio: unset;
-</pre>
+```
 
-<h3 id="values">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;auto&gt;")}}</dt>
- <dd>Les <a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés</a> ayant leur propre ratio d'affichage intrinsèque, ils utilisent <em>ce dernier</em>. Sinon, la boîte n'a pas de ratio d'affichage préférentiel. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu.</dd>
- <dt>{{cssxref("&lt;ratio&gt;")}}</dt>
- <dd>Le ratio d'affichage préférentiel de la boîte est le ratio spécifié par <code>width</code> / <code>height</code>. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu spécifiées par <code>box-sizing</code>.</dd>
-</dl>
+- {{cssxref("&lt;auto&gt;")}}
+  - : Les [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) ayant leur propre ratio d'affichage intrinsèque, ils utilisent _ce dernier_. Sinon, la boîte n'a pas de ratio d'affichage préférentiel. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu.
+- {{cssxref("&lt;ratio&gt;")}}
+  - : Le ratio d'affichage préférentiel de la boîte est le ratio spécifié par `width` / `height`. Les calculs de tailles impliquant un ratio d'affichage intrinsèque fonctionnent toujours avec les dimensions de la boîte de contenu spécifiées par `box-sizing`.
 
-<h2 id="formal_definition">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="formal_syntax">Syntaxe formelle</h2>
+## Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="examples_of_values_for_aspect-ratio">Exemples de valeurs pour aspect-ratio</h3>
+### Exemples de valeurs pour aspect-ratio
 
-<pre class="brush: css">aspect-ratio: 1 / 1;
+```css
+aspect-ratio: 1 / 1;
 aspect-ratio: 16 / 9;
-</pre>
+```
 
-<h2 id="mapping_width_and_height_to_aspect-ratio">Correspondance entre largeur et hauteur avec aspect-ratio</h2>
+## Correspondance entre largeur et hauteur avec aspect-ratio
 
-<p>Les navigateurs ont ajouté une propriété <code>aspect-ratio</code> interne qui s'applique aux <a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés</a> et à d'autres éléments liés qui acceptent les attributs <code>width</code> et <code>height</code>. Cela se passe dans la feuille de styles interne du navigateur.</p>
+Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) et à d'autres éléments liés qui acceptent les attributs `width` et `height`. Cela se passe dans la feuille de styles interne du navigateur.
 
-<p>Sur Firefox, la règle de la feuille de styles interne ressemble à cela :</p>
+Sur Firefox, la règle de la feuille de styles interne ressemble à cela :
 
-<pre class="brush: css">img, input[type="image"], video, embed, iframe, marquee, object, table {
+```css
+img, input[type="image"], video, embed, iframe, marquee, object, table {
   aspect-ratio: attr(width) / attr(height);
-}</pre>
+}
+```
 
-<p>Vous pouvez en savoir plus sur cette fonctionnalité dans l'article <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/">Setting Height And Width On Images Is Important Again (en anglais)</a>.</p>
+Vous pouvez en savoir plus sur cette fonctionnalité dans l'article [Setting Height And Width On Images Is Important Again (en anglais)](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Media/images/aspect_ratio_mapping">Faire la correspondance des attributs width et height du conteneur des éléments média avec aspect-ratio</a></li>
- <li><a href="https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/">Designing an aspect ratio unit for CSS (en anglais)</a></li>
-</ul>
+- [Faire la correspondance des attributs width et height du conteneur des éléments média avec aspect-ratio](/fr/docs/Web/Media/images/aspect_ratio_mapping)
+- [Designing an aspect ratio unit for CSS (en anglais)](https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/)
diff --git a/files/fr/web/css/at-rule/index.md b/files/fr/web/css/at-rule/index.md
index b2573ba775..d4478ab9e1 100644
--- a/files/fr/web/css/at-rule/index.md
+++ b/files/fr/web/css/at-rule/index.md
@@ -8,76 +8,55 @@ tags:
 translation_of: Web/CSS/At-rule
 original_slug: Web/CSS/Règles_@
 ---
-<div>{{cssref}}</div>
+{{cssref}}
 
-<p>Une <strong>règle @</strong> est une <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_instructions_CSS">expression CSS</a> commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blocs_CSS">bloc CSS</a> trouvé en premier.</p>
+Une **règle @** est une [expression CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_instructions_CSS) commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain [bloc CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blocs_CSS) trouvé en premier.
 
-<pre class="brush: css">/* Forme générique */
+```css
+/* Forme générique */
 @IDENTIFIANT (RÈGLE);
 
 /* Exemple : indiquer au navigateur d'utiliser */
 /* UTF-8 comme jeu de caractères */
-@charset "utf-8";</pre>
+@charset "utf-8";
+```
 
-<p>Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :</p>
+Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :
 
-<ul>
- <li>{{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.</li>
- <li>{{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.</li>
- <li>{{cssxref("@namespace")}} qui indique au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.</li>
- <li><strong><em>Les règles @ imbriquées</em></strong>. Ces règles sont un sous-ensemble des instructions imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles :
-  <ul>
-   <li>{{cssxref("@media")}} : une règle de groupe conditionnelle qui applique son contenu si l'appareil utilisé respecte les critères définis dans la « requête média » (ou <em>media query</em>).</li>
-   <li>{{cssxref("@supports")}} : une règle de groupe conditionnelle qui applique son contenu si le navigateur respecte une condition donnée (par exemple, si le navigateur supporte tel élément de syntaxe).</li>
-   <li>{{cssxref("@document")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu si le document sur lequel s'applique la feuille de style respecte une condition donnée <em>(cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)</em></li>
-   <li>{{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.</li>
-   <li>{{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.</li>
-   <li>{{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.</li>
-   <li>{{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (<em>viewport</em>) <em>(cette règle est au stade du brouillon de travail).</em></li>
-   <li>{{cssxref("@counter-style")}} : une règle qui permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis (bien que la spécification ait atteint le niveau de <em>Candidate Recommendation</em>, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)</li>
-   <li>{{cssxref("@font-feature-values")}} (ainsi que <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> et <code>@character-variant</code>) : ces règles permettent de définir des noms d'usages pour la propriété {{cssxref("font-variant-alternates")}} qui permet d'activer différentes caractéristiques des polices OpenType (bien que la spécification ait atteint le niveau de <em>Candidate Recommendation</em>, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)</li>
-  </ul>
- </li>
-</ul>
+- {{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.
+- {{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.
+- {{cssxref("@namespace")}} qui indique au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.
+- **_Les règles @ imbriquées_**. Ces règles sont un sous-ensemble des instructions imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles :
 
-<h2 id="Les_règles_de_groupe_conditionnelles">Les règles de groupe conditionnelles</h2>
+  - {{cssxref("@media")}} : une règle de groupe conditionnelle qui applique son contenu si l'appareil utilisé respecte les critères définis dans la « requête média » (ou _media query_).
+  - {{cssxref("@supports")}} : une règle de groupe conditionnelle qui applique son contenu si le navigateur respecte une condition donnée (par exemple, si le navigateur supporte tel élément de syntaxe).
+  - {{cssxref("@document")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu si le document sur lequel s'applique la feuille de style respecte une condition donnée _(cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)_
+  - {{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.
+  - {{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.
+  - {{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.
+  - {{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (_viewport_) _(cette règle est au stade du brouillon de travail)._
+  - {{cssxref("@counter-style")}} : une règle qui permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis (bien que la spécification ait atteint le niveau de _Candidate Recommendation_, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
+  - {{cssxref("@font-feature-values")}} (ainsi que `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset` et `@character-variant`) : ces règles permettent de définir des noms d'usages pour la propriété {{cssxref("font-variant-alternates")}} qui permet d'activer différentes caractéristiques des polices OpenType (bien que la spécification ait atteint le niveau de _Candidate Recommendation_, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
 
-<p>Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : <strong>les règles de groupe conditionnelles</strong>. Ces instructions partagent une syntaxe commune et permettent d'inclure des <em>instructions imbriquées </em>(soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.</p>
+## Les règles de groupe conditionnelles
 
-<p>Les règles de groupe conditionnelles définies par <a href="https://drafts.csswg.org/css-conditional-3/">la spécification de niveau 3 sur les règles CSS conditionnelles</a> sont :</p>
+Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : **les règles de groupe conditionnelles**. Ces instructions partagent une syntaxe commune et permettent d'inclure des _instructions imbriquées_ (soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.
 
-<ul>
- <li>{{cssxref("@media")}},</li>
- <li>{{cssxref("@supports")}},</li>
- <li>{{cssxref("@document")}} <em>(qui a été reporté à la spécification de niveau 4).</em></li>
-</ul>
+Les règles de groupe conditionnelles définies par [la spécification de niveau 3 sur les règles CSS conditionnelles](https://drafts.csswg.org/css-conditional-3/) sont :
 
-<p>Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.</p>
+- {{cssxref("@media")}},
+- {{cssxref("@supports")}},
+- {{cssxref("@document")}} _(qui a été reporté à la spécification de niveau 4)._
 
-<h2 id="Spécifications">Spécifications</h2>
+Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Définition</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Conditional')}}</td>
-   <td>{{Spec2('CSS3 Conditional')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>Standardisation de <code>@-webkit-keyframes</code>.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+| Spécification                                                            | État                                     | Définition                               |
+| ------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------------- |
+| {{SpecName('CSS3 Conditional')}}                             | {{Spec2('CSS3 Conditional')}} | Définition initiale.                     |
+| {{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}} | {{Spec2('Compat')}}                 | Standardisation de `@-webkit-keyframes`. |
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
-</ul>
+## Voir aussi
+
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
diff --git a/files/fr/web/css/attr()/index.md b/files/fr/web/css/attr()/index.md
index 1a026e67da..89a7c5fdd1 100644
--- a/files/fr/web/css/attr()/index.md
+++ b/files/fr/web/css/attr()/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/attr()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>attr()</code></strong> est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sur <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments</a> auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée.</p>
+La fonction **`attr()`** est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sur [les pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée.
 
-<pre class="brush:css no-line-numbers">/* Utilisation simple */
+```css
+/* Utilisation simple */
 attr(data-count);
 attr(title);
 
@@ -25,226 +26,345 @@ attr(data-count number, 0);
 attr(src url, "");
 attr(data-width px, inherit);
 attr(data-something, "default");
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> La fonction <code>attr()</code> peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>attribute-name</code></dt>
- <dd>Le nom de l'attribut de l'élément HTML ciblé par la déclaration CSS.</dd>
- <dt><code>&lt;type-or-unit&gt;</code> {{experimental_inline}}</dt>
- <dd>Un mot-clé indiquant le type de valeur pour l'attribut ou l'unité dans laquelle elle est exprimée. Si la valeur <code>&lt;type-or-unit&gt;</code> est invalide pour l'attribut ciblé, l'expression <code>attr()</code> sera également considérée comme invalide. Si cette valeur est absente, elle vaudra <code>string</code> par défaut. La liste des valeurs valides est :
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Mot-clé</th>
-    <th scope="col">Type associé</th>
-    <th scope="col">Commentaires</th>
-    <th scope="col">Valeur par défaut</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>string</code></td>
-    <td>{{cssxref("&lt;string&gt;")}}</td>
-    <td>La valeur de l'attribut est traitée comme une chaîne de caractères. Elle n'est pas réanalysée et les caractères sont utilisés tels quels (les échappements CSS ne sont pas transformés).</td>
-    <td>Une chaîne vide.</td>
-   </tr>
-   <tr>
-    <td><code>color</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;color&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme un code sur 3 ou 6 chiffres ou comme un mot-clé. Elle doit être une valeur {{cssxref("&lt;string&gt;")}} valide. Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td><code>currentColor</code></td>
-   </tr>
-   <tr>
-    <td><code>url</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;uri&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme une chaîne, utilisée dans une fonction <code>url()</code>.<br>
-     Une URL relative sera résolue par rapport au document original et non par rapport à la feuille de style. Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td>L'URL <code>about:invalid</code> qui pointe vers un document inexistant.</td>
-   </tr>
-   <tr>
-    <td><code>integer</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;integer&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme un entier ({{cssxref("&lt;integer&gt;")}}). Si elle n'est pas valide (si ce n'est pass un entier ou s'il sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
-     Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-   <tr>
-    <td><code>number</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;number&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}). Si elle n'est pas valide (si ce n'est pas un nombre ou que celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
-     Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-   <tr>
-    <td><code>length</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;length&gt;")}}</td>
-    <td>
-     <p>La valeur de l'attribut est analysée comme une longueur ({{cssxref("&lt;length&gt;")}}) et inclut l'unité (par exemple <code>12.5em</code>). Si la valeur n'est pas valide (si ce n'est pas une longueur ou que celle-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
-      Si l'unité fournie est une unité relative, <code>attr()</code> calculera la valeur absolue correspondante. Les blancs en début et en fin de chaîne sont supprimés.</p>
-    </td>
-    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-   <tr>
-    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;length&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) (il n'y a pas d'unité) et interprétée comme une longueur ({{cssxref("&lt;length&gt;")}}) grâce à l'unité passée comme argument. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
-     Si l'unité indiquée est une unité de longueur relative, <code>attr()</code> calculera la valeur absolue correspondante.<br>
-     Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-   <tr>
-    <td><code>angle</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;angle&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme un angle ({{cssxref("&lt;angle&gt;")}}) et inclut l'unité (par exemple <code>30.5deg</code>). Si la valeur n'est pas valide (si ce n'est pas un angle ou si la valeur sort de l'intervalle autorisé par la propriété CSS), ce sera la valeur par défaut qui sera utilisée.<br>
-     Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td><code>0deg</code>, ou, si <code>0deg</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-   <tr>
-    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;angle&gt;")}}</td>
-    <td>
-     <p>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) (il n'y a pas d'unité) et est interprétée comme un angle ({{cssxref("&lt;angle&gt;")}}) avec l'unité indiquée en paramètre. Si la vlaeur n'est pas vliade (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
-      Les blancs en début et en fin de chaîne sont supprimés.</p>
-    </td>
-    <td><code>0deg</code>, ou, si <code>0deg</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-   <tr>
-    <td><code>time</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;time&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme une durée ({{cssxref("&lt;time&gt;")}}) et inclut l'unité (par exemple <code>30.5ms</code>). Si elle n'est pas valide (la valeur n'est pas une durée ou n'est pas comprise dans l'intervalle autorisée), ce sera la valeur par défaut qui sera utilisée.<br>
-     Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td><code>0s</code>, ou, si <code>0s</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-   <tr>
-    <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;time&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme une durée ({{cssxref("&lt;time&gt;")}}) grâce à l'unité passée en paramètre. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.<br>
-     Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td><code>0s</code>, ou, si <code>0s</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-   <tr>
-    <td><code>frequency</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;frequency&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme une fréquence ({{cssxref("&lt;frequency&gt;")}}) et inclut l'unité (par exemple <code>30.5kHz</code>). Si elle n'est pas valide (ce n'est pas une fréquence ou celle-ci n'est pas comprise dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée. Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td><code>0Hz</code>, ou, si <code>0Hz</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-   <tr>
-    <td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;frequency&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme une fréquence grâce à l'unité indiquée. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.<br>
-     Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td><code>0Hz</code>, ou, si <code>0Hz</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-   <tr>
-    <td><code>%</code> {{experimental_inline}}</td>
-    <td>{{cssxref("&lt;percentage&gt;")}}</td>
-    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Si elle n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
-     Si la valeur fournie est utilisée comme une longueur, <code>attr()</code> calcule la longueur absolue correspondante.<br>
-     Les blancs en début et en fin de chaîne sont supprimés.</td>
-    <td><code>0%</code>, ou, si <code>0%</code> n'est pas valide, la valeur minimale de la propriété.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code>&lt;fallback&gt;</code> {{experimental_inline}}</dt>
- <dd>La valeur qui sera utilisée si l'attribut est absent ou contient une valeur invalide. La valeur indiquée avec ce paramètre doit être valide et ne doit pas contenir une autre expression <code>attr()</code>. Si <code>attr()</code> n'est pas le seul composant de la valeur d'une propriété, la valeur <code>&lt;fallback&gt;</code> doit correspondre au type défini par <code>&lt;type-or-unit&gt;</code>. Si ce paramètre n'est pas utilisé, le moteur de rendu utilisera la valeur par défaut définie par <code>&lt;type-or-unit&gt;</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+> **Note :** La fonction `attr()` peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article.
+
+## Syntaxe
+
+### Valeurs
+
+- `attribute-name`
+  - : Le nom de l'attribut de l'élément HTML ciblé par la déclaration CSS.
+- `<type-or-unit>` {{experimental_inline}}
+
+  - : Un mot-clé indiquant le type de valeur pour l'attribut ou l'unité dans laquelle elle est exprimée. Si la valeur `<type-or-unit>` est invalide pour l'attribut ciblé, l'expression `attr()` sera également considérée comme invalide. Si cette valeur est absente, elle vaudra `string` par défaut. La liste des valeurs valides est :
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <th scope="col">Mot-clé</th>
+          <th scope="col">Type associé</th>
+          <th scope="col">Commentaires</th>
+          <th scope="col">Valeur par défaut</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>string</code></td>
+          <td>{{cssxref("&lt;string&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est traitée comme une chaîne de caractères. Elle
+            n'est pas réanalysée et les caractères sont utilisés tels quels (les
+            échappements CSS ne sont pas transformés).
+          </td>
+          <td>Une chaîne vide.</td>
+        </tr>
+        <tr>
+          <td><code>color</code> {{experimental_inline}}</td>
+          <td>{{cssxref("&lt;color&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme un code sur 3 ou 6 chiffres
+            ou comme un mot-clé. Elle doit être une valeur
+            {{cssxref("&lt;string&gt;")}} valide. Les blancs en début et
+            en fin de chaîne sont supprimés.
+          </td>
+          <td><code>currentColor</code></td>
+        </tr>
+        <tr>
+          <td><code>url</code> {{experimental_inline}}</td>
+          <td>{{cssxref("&lt;uri&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme une chaîne, utilisée dans une
+            fonction <code>url()</code>.<br />Une URL relative sera résolue par
+            rapport au document original et non par rapport à la feuille de style.
+            Les blancs en début et en fin de chaîne sont supprimés.
+          </td>
+          <td>
+            L'URL <code>about:invalid</code> qui pointe vers un document inexistant.
+          </td>
+        </tr>
+        <tr>
+          <td><code>integer</code> {{experimental_inline}}</td>
+          <td>{{cssxref("&lt;integer&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme un entier
+            ({{cssxref("&lt;integer&gt;")}}). Si elle n'est pas valide (si
+            ce n'est pass un entier ou s'il sort de l'intervalle autorisé par la
+            propriété), ce sera la valeur par défaut qui sera utilisée.<br />Les
+            blancs en début et en fin de chaîne sont supprimés.
+          </td>
+          <td>
+            <code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+        <tr>
+          <td><code>number</code> {{experimental_inline}}</td>
+          <td>{{cssxref("&lt;number&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme un nombre
+            ({{cssxref("&lt;number&gt;")}}). Si elle n'est pas valide (si
+            ce n'est pas un nombre ou que celui-ci sort de l'intervalle autorisé par
+            la propriété), ce sera la valeur par défaut qui sera utilisée.<br />Les
+            blancs en début et en fin de chaîne sont supprimés.
+          </td>
+          <td>
+            <code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+        <tr>
+          <td><code>length</code> {{experimental_inline}}</td>
+          <td>{{cssxref("&lt;length&gt;")}}</td>
+          <td>
+            <p>
+              La valeur de l'attribut est analysée comme une longueur
+              ({{cssxref("&lt;length&gt;")}}) et inclut l'unité (par
+              exemple <code>12.5em</code>). Si la valeur n'est pas valide (si ce
+              n'est pas une longueur ou que celle-ci sort de l'intervalle autorisé
+              par la propriété), ce sera la valeur par défaut qui sera utilisée.<br />Si
+              l'unité fournie est une unité relative, <code>attr()</code> calculera
+              la valeur absolue correspondante. Les blancs en début et en fin de
+              chaîne sont supprimés.
+            </p>
+          </td>
+          <td>
+            <code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>,
+            <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>,
+            <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or
+            <code>pc</code> {{experimental_inline}}
+          </td>
+          <td>{{cssxref("&lt;length&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme un nombre
+            ({{cssxref("&lt;number&gt;")}}) (il n'y a pas d'unité) et
+            interprétée comme une longueur
+            ({{cssxref("&lt;length&gt;")}}) grâce à l'unité passée comme
+            argument. Si la valeur n'est pas valide (ce n'est pas un nombre ou
+            celui-ci sort de l'intervalle autorisé par la propriété), ce sera la
+            valeur par défaut qui sera utilisée.<br />Si l'unité indiquée est une
+            unité de longueur relative, <code>attr()</code> calculera la valeur
+            absolue correspondante.<br />Les blancs en début et en fin de chaîne
+            sont supprimés.
+          </td>
+          <td>
+            <code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+        <tr>
+          <td><code>angle</code> {{experimental_inline}}</td>
+          <td>{{cssxref("&lt;angle&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme un angle
+            ({{cssxref("&lt;angle&gt;")}}) et inclut l'unité (par exemple
+            <code>30.5deg</code>). Si la valeur n'est pas valide (si ce n'est pas un
+            angle ou si la valeur sort de l'intervalle autorisé par la propriété
+            CSS), ce sera la valeur par défaut qui sera utilisée.<br />Les blancs en
+            début et en fin de chaîne sont supprimés.
+          </td>
+          <td>
+            <code>0deg</code>, ou, si <code>0deg</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>deg</code>, <code>grad</code>,
+            <code>rad</code> {{experimental_inline}}
+          </td>
+          <td>{{cssxref("&lt;angle&gt;")}}</td>
+          <td>
+            <p>
+              La valeur de l'attribut est analysée comme un nombre
+              ({{cssxref("&lt;number&gt;")}}) (il n'y a pas d'unité) et
+              est interprétée comme un angle ({{cssxref("&lt;angle&gt;")}})
+              avec l'unité indiquée en paramètre. Si la vlaeur n'est pas vliade (ce
+              n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la
+              propriété), ce sera la valeur par défaut qui sera utilisée.<br />Les
+              blancs en début et en fin de chaîne sont supprimés.
+            </p>
+          </td>
+          <td>
+            <code>0deg</code>, ou, si <code>0deg</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+        <tr>
+          <td><code>time</code> {{experimental_inline}}</td>
+          <td>{{cssxref("&lt;time&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme une durée
+            ({{cssxref("&lt;time&gt;")}}) et inclut l'unité (par exemple
+            <code>30.5ms</code>). Si elle n'est pas valide (la valeur n'est pas une
+            durée ou n'est pas comprise dans l'intervalle autorisée), ce sera la
+            valeur par défaut qui sera utilisée.<br />Les blancs en début et en fin
+            de chaîne sont supprimés.
+          </td>
+          <td>
+            <code>0s</code>, ou, si <code>0s</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+        <tr>
+          <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td>
+          <td>{{cssxref("&lt;time&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme un nombre
+            ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple
+            <code>12.5</code>) et est interprétée comme une durée
+            ({{cssxref("&lt;time&gt;")}}) grâce à l'unité passée en
+            paramètre. Si la valeur n'est pas valide (ce n'est pas un nombre ou
+            celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la
+            valeur par défaut qui sera utilisée.<br />Les blancs en début et en fin
+            de chaîne sont supprimés.
+          </td>
+          <td>
+            <code>0s</code>, ou, si <code>0s</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+        <tr>
+          <td><code>frequency</code> {{experimental_inline}}</td>
+          <td>{{cssxref("&lt;frequency&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme une fréquence
+            ({{cssxref("&lt;frequency&gt;")}}) et inclut l'unité (par
+            exemple <code>30.5kHz</code>). Si elle n'est pas valide (ce n'est pas
+            une fréquence ou celle-ci n'est pas comprise dans l'intervalle
+            autorisé), ce sera la valeur par défaut qui sera utilisée. Les blancs en
+            début et en fin de chaîne sont supprimés.
+          </td>
+          <td>
+            <code>0Hz</code>, ou, si <code>0Hz</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>Hz</code>, <code>kHz</code> {{experimental_inline}}
+          </td>
+          <td>{{cssxref("&lt;frequency&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme un nombre
+            ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple
+            <code>12.5</code>) et est interprétée comme une fréquence grâce à
+            l'unité indiquée. Si la valeur n'est pas valide (ce n'est pas un nombre
+            ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la
+            valeur par défaut qui sera utilisée.<br />Les blancs en début et en fin
+            de chaîne sont supprimés.
+          </td>
+          <td>
+            <code>0Hz</code>, ou, si <code>0Hz</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+        <tr>
+          <td><code>%</code> {{experimental_inline}}</td>
+          <td>{{cssxref("&lt;percentage&gt;")}}</td>
+          <td>
+            La valeur de l'attribut est analysée comme un nombre
+            ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple
+            <code>12.5</code>) et est interprétée comme un pourcentage
+            ({{cssxref("&lt;percentage&gt;")}}). Si elle n'est pas valide
+            (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle
+            autorisé par la propriété), ce sera la valeur par défaut qui sera
+            utilisée.<br />Si la valeur fournie est utilisée comme une longueur,
+            <code>attr()</code> calcule la longueur absolue correspondante.<br />Les
+            blancs en début et en fin de chaîne sont supprimés.
+          </td>
+          <td>
+            <code>0%</code>, ou, si <code>0%</code> n'est pas valide, la valeur
+            minimale de la propriété.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+- `<fallback>` {{experimental_inline}}
+  - : La valeur qui sera utilisée si l'attribut est absent ou contient une valeur invalide. La valeur indiquée avec ce paramètre doit être valide et ne doit pas contenir une autre expression `attr()`. Si `attr()` n'est pas le seul composant de la valeur d'une propriété, la valeur `<fallback>` doit correspondre au type défini par `<type-or-unit>`. Si ce paramètre n'est pas utilisé, le moteur de rendu utilisera la valeur par défaut définie par `<type-or-unit>`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utiliser_la_propriété_content">Utiliser la propriété <code>content</code></h3>
+### Utiliser la propriété `content`
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html;">&lt;p data-toto="coucou"&gt;world&lt;/p&gt;</pre>
+```html
+<p data-toto="coucou">world</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">[data-toto]::before {
+```css
+[data-toto]::before {
   content: attr(data-toto) " ";
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utiliser_la_propriété_content", "100%", "50")}}</p>
+{{EmbedLiveSample("Utiliser_la_propriété_content", "100%", "50")}}
 
-<h3 id="Valeur_&lt;color>">Valeur <code>&lt;color&gt;</code></h3>
+### Valeur `<color>`
 
-<p>{{SeeCompatTable}}</p>
+{{SeeCompatTable}}
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html;">&lt;div class="background" data-background="lime"&gt;&lt;/div&gt;</pre>
+```html
+<div class="background" data-background="lime"></div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css;">html,
+```css
+html,
 body,
 .background {
   height: 100vh;
-}</pre>
+}
+```
 
-<pre class="brush: css">.background {
+```css
+.background {
   background-color: red;
 }
 
 .background[data-background] {
   background-color: attr(data-background color, red);
-}</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Valeur_&lt;color&gt;", "100%", "50")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}</td>
-   <td>{{Spec2("CSS4 Values")}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Ajout de deux paramètres optionnels. La fonction peut être utilisée sur toutes les propriétés et renvoyer des valeurs qui ne sont pas des chaînes de caractères. Ces modifications sont expérimentales et pourront être abandonnées pour la recommandation si la prise en charge des navigateurs est trop faible.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Utilisation limitée à {{cssxref("content")}}, la fonction renvoie toujours une chaîne de caractères ({{cssxref("&lt;string&gt;")}}).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.attr")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d'attribut</a></li>
- <li><a href="/fr/docs/Web/HTML/Global_attributes/data-*">Attributs HTML <code>data-*</code></a></li>
- <li><a href="/fr/docs/Web/SVG/Attribute/data-*">Attributs SVG <code>data-*</code></a></li>
-</ul>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Valeur_&lt;color&gt;", "100%", "50")}}
+
+## Spécifications
+
+| Spécification                                                            | État                             | Commentaires                                                                                                                                                                                                                                                                                                      |
+| ------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS4 Values", "#attr-notation", "attr()")}} | {{Spec2("CSS4 Values")}} | Aucune modification.                                                                                                                                                                                                                                                                                              |
+| {{SpecName('CSS3 Values', '#attr-notation', 'attr()')}} | {{Spec2('CSS3 Values')}} | Ajout de deux paramètres optionnels. La fonction peut être utilisée sur toutes les propriétés et renvoyer des valeurs qui ne sont pas des chaînes de caractères. Ces modifications sont expérimentales et pourront être abandonnées pour la recommandation si la prise en charge des navigateurs est trop faible. |
+| {{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}} | {{Spec2('CSS2.1')}}         | Utilisation limitée à {{cssxref("content")}}, la fonction renvoie toujours une chaîne de caractères ({{cssxref("&lt;string&gt;")}}).                                                                                                                                                             |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.attr")}}
+
+## Voir aussi
+
+- [Sélecteur d'attribut](/fr/docs/Web/CSS/Attribute_selectors)
+- [Attributs HTML `data-*`](/fr/docs/Web/HTML/Global_attributes/data-*)
+- [Attributs SVG `data-*`](/fr/docs/Web/SVG/Attribute/data-*)
diff --git a/files/fr/web/css/attribute_selectors/index.md b/files/fr/web/css/attribute_selectors/index.md
index 1c0631a784..8ab8566828 100644
--- a/files/fr/web/css/attribute_selectors/index.md
+++ b/files/fr/web/css/attribute_selectors/index.md
@@ -9,71 +9,72 @@ tags:
 translation_of: Web/CSS/Attribute_selectors
 original_slug: Web/CSS/Sélecteurs_d_attribut
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.</p>
+Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.
 
-<pre class="brush: css no-line-numbers">/* Les éléments &lt;a&gt; avec un attribut title */
+```css
+/* Les éléments <a> avec un attribut title */
 a[title] {
   color: purple;
 }
 
-/* Les éléments &lt;a&gt; avec un href qui correspond */
+/* Les éléments <a> avec un href qui correspond */
 /* à "https://example.org" */
 a[href="https://example.org"] {
   color: green;
 }
 
-/* Les éléments &lt;a&gt; dont href contient "example" */
+/* Les éléments <a> dont href contient "example" */
 a[href*="example"] {
   font-size: 2em;
 }
 
-/* Les éléments &lt;a&gt; dont href finit par ".org" */
+/* Les éléments <a> dont href finit par ".org" */
 a[href$=".org"] {
   font-style: italic;
 }
 
-/* Les éléments &lt;a&gt; dont l'attribut class contient le mot logo */
+/* Les éléments <a> dont l'attribut class contient le mot logo */
 /* comportement identique à a.logo */
 a[class~="logo"] {
   padding: 2px;
-}</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<dl>
- <dt><code>[<em>attr</em>]</code></dt>
- <dd>Permet de cibler un élément qui possède un attribut <code>attr</code>.</dd>
- <dt><code>[<em>attr</em>=<em>valeur</em>]</code></dt>
- <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est exactement <code>valeur</code>.</dd>
- <dt><code>[<em>attr</em>~=<em>valeur</em>]</code></dt>
- <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est <code>valeur</code>. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.</dd>
- <dt><code>[<em>attr</em>|=<em>valeur</em>]</code></dt>
- <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est exactement <code>valeur</code> ou dont la valeur commence par <code>valeur</code> suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.</dd>
- <dt><code>[<em>attr</em>^=<em>valeur</em>]</code></dt>
- <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur commence par <code>valeur</code>.</dd>
- <dt><code>[<em>attr</em>$=<em>valeur</em>]</code></dt>
- <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur se termine par <code>valeur</code>.</dd>
- <dt><code>[<em>attr</em>*=<em>valeur</em>]</code></dt>
- <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> et dont la valeur contient au moins une occurrence de <code>valeur</code> dans la chaîne de caractères.</dd>
- <dt><code>[<em>attr</em> <em>operateur</em> <em>valeur</em> i]</code></dt>
- <dd>On peut ajouter un <code>i</code> (ou <code>I</code>) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).</dd>
- <dt><code>[attr operateur valeur s]</code> {{experimental_inline}}</dt>
- <dd>Ajouter un <code>s</code> (ou <code>S</code>) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+}
+```
+
+## Syntaxe
+
+- `[attr]`
+  - : Permet de cibler un élément qui possède un attribut `attr`.
+- `[attr=valeur]`
+  - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est exactement `valeur`.
+- `[attr~=valeur]`
+  - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est `valeur`. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.
+- `[attr|=valeur]`
+  - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est exactement `valeur` ou dont la valeur commence par `valeur` suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.
+- `[attr^=valeur]`
+  - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur commence par `valeur`.
+- `[attr$=valeur]`
+  - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur se termine par `valeur`.
+- `[attr*=valeur]`
+  - : Permet de cibler un élément qui possède un attribut `attr` et dont la valeur contient au moins une occurrence de `valeur` dans la chaîne de caractères.
+- `[attr operateur valeur i]`
+  - : On peut ajouter un `i` (ou `I`) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).
+- `[attr operateur valeur s]` {{experimental_inline}}
+  - : Ajouter un `s` (ou `S`) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Liens">Liens</h3>
+### Liens
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">a {
+```css
+a {
   color: blue;
 }
 
@@ -102,26 +103,30 @@ a[href*="cAsE" s] {
 /* Liens qui finissent ".org" */
 a[href$=".org"] {
   color: red;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;a href="#internal"&gt;Lien interne&lt;a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="http://example.com"&gt;Lien d'exemple&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#InSensitive"&gt;Lien interne insensible à la casse&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="http://example.org"&gt;Lien vers example.org&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li><a href="#internal">Lien interne<a></li>
+  <li><a href="http://example.com">Lien d'exemple</a></li>
+  <li><a href="#InSensitive">Lien interne insensible à la casse</a></li>
+  <li><a href="http://example.org">Lien vers example.org</a></li>
+</ul>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Liens")}}</p>
+{{EmbedLiveSample("Liens")}}
 
-<h3 id="Langues">Langues</h3>
+### Langues
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">/* Tous les éléments divs avec un attribut `lang` seront en gras. */
+```css
+/* Tous les éléments divs avec un attribut `lang` seront en gras. */
 div[lang] {
   font-weight: bold;
 }
@@ -149,30 +154,32 @@ div[lang|="zh"] {
 div[data-lang="zh-TW"] {
   color: purple;
 }
-</pre>
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
-&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
-&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
-&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
-&lt;div data-lang="zh-TW"&gt;世界您好！&lt;/div&gt;
-</pre>
+```html
+<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">世界您好！</div>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Langues")}}</p>
+{{EmbedLiveSample("Langues")}}
 
-<h3 id="Listes_ordonnées">Listes ordonnées</h3>
+### Listes ordonnées
 
-<p>{{SeeCompatTable}}</p>
+{{SeeCompatTable}}
 
-<p>La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.</p>
+La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">/* Les types de liste devront être utilisé avec le
+```css
+/* Les types de liste devront être utilisé avec le
    marqueur pour la casse vu les spécifications HTML */
 ol[type="a"] {
   list-style-type: lower-alpha;
@@ -187,56 +194,36 @@ ol[type="a" s] {
 ol[type="A" s] {
   list-style-type: upper-alpha;
   background: lime;
-}</pre>
-
-<h4 id="HTML_3">HTML</h4>
-
-<pre class="brush: html;">&lt;ol type="A"&gt;
-  &lt;li&gt;Liste d'exemple&lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<h4 id="Résultat_3">Résultat</h4>
-
-<p>{{EmbedLiveSample("Listes_ordonnées")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.attribute")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+}
+```
 
-<ul>
- <li>{{CSSxRef("attr")}}</li>
- <li>Sélectionner un élément : {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}} ou {{domxref("Element.querySelector()")}}</li>
- <li>Sélectionner l'ensemble des éléments correspondants : {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} ou {{domxref("Element.querySelectorAll()")}}</li>
- <li>Ces méthodes sont implémentées sur le <em>mixin</em> {{domxref("ParentNode")}}, voir {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
-</ul>
+#### HTML
+
+```html
+<ol type="A">
+  <li>Liste d'exemple</li>
+</ol>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Listes_ordonnées")}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                 | Commentaires                                                                                |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}     | {{Spec2('CSS4 Selectors')}} | Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse. |
+| {{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}     | {{Spec2('CSS3 Selectors')}} |                                                                                             |
+| {{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS2.1')}}             | Définition initiale.                                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.attribute")}}
+
+## Voir aussi
+
+- {{CSSxRef("attr")}}
+- Sélectionner un élément : {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}} ou {{domxref("Element.querySelector()")}}
+- Sélectionner l'ensemble des éléments correspondants : {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} ou {{domxref("Element.querySelectorAll()")}}
+- Ces méthodes sont implémentées sur le _mixin_ {{domxref("ParentNode")}}, voir {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}
diff --git a/files/fr/web/css/backdrop-filter/index.md b/files/fr/web/css/backdrop-filter/index.md
index 9207d87746..2db24c66f7 100644
--- a/files/fr/web/css/backdrop-filter/index.md
+++ b/files/fr/web/css/backdrop-filter/index.md
@@ -7,18 +7,19 @@ tags:
   - Reference
 translation_of: Web/CSS/backdrop-filter
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété CSS <code><strong>backdrop-filter</strong></code> permet d'obtenir un effet de flou ou de diffusion de la couleur sur la zone derrière l'élément. L'effet étant situé <em>derrière</em> l'élément, il pourra être observé en ajustant la transparence de l'élément.</p>
+La propriété CSS **`backdrop-filter`** permet d'obtenir un effet de flou ou de diffusion de la couleur sur la zone derrière l'élément. L'effet étant situé _derrière_ l'élément, il pourra être observé en ajustant la transparence de l'élément.
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 backdrop-filter: none;
 
 /* Une valeur d'URL vers un filtre SVG */
 backdrop-filter: url(commonfilters.svg#filter);
 
 /* Les notations fonctionnelles pour les filtres */
-/* Valeur de type &lt;filter-function&gt; */
+/* Valeur de type <filter-function> */
 backdrop-filter: blur(2px);
 backdrop-filter: brightness(60%);
 backdrop-filter: contrast(40%);
@@ -37,30 +38,29 @@ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
 backdrop-filter: inherit;
 backdrop-filter: initial;
 backdrop-filter: unset;
-</pre>
+```
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Un mot-clé qui indique qu'aucun filtre n'est appliqué sur l'ombre portée.</dd>
- <dt><code>&lt;filter-function-list&gt;</code></dt>
- <dd>Une liste de fonctions de filtre (cf. {{cssxref("&lt;filter-function&gt;")}}), séparées par des espaces et qui seront appliquées à l'ombre. Les différentes fonctions qui peuvent être utilisées sont les mêmes que pour la propriété {{cssxref("filter")}}. On peut également utilisere <a href="/fr/docs/Web/SVG/Element/filter">un filtre SVG</a>.</dd>
-</dl>
+- `none`
+  - : Un mot-clé qui indique qu'aucun filtre n'est appliqué sur l'ombre portée.
+- `<filter-function-list>`
+  - : Une liste de fonctions de filtre (cf. {{cssxref("&lt;filter-function&gt;")}}), séparées par des espaces et qui seront appliquées à l'ombre. Les différentes fonctions qui peuvent être utilisées sont les mêmes que pour la propriété {{cssxref("filter")}}. On peut également utilisere [un filtre SVG](/fr/docs/Web/SVG/Element/filter).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css language-css">.box {
+```css
+.box {
   background-color: rgba(255, 255, 255, 0.95);
   border-radius: 5px;
   font-family: sans-serif;
@@ -91,46 +91,34 @@ body {
   justify-content: center;
   height: 100%;
   width: 100%;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;div class="box"&gt;
-    &lt;p&gt;backdrop-filter: blur(10px)&lt;/p&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="container">
+  <div class="box">
+    <p>backdrop-filter: blur(10px)</p>
+  </div>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', "600", "400")}}</p>
+{{EmbedLiveSample('Exemples', "600", "400")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
-   <td>{{Spec2('Filters 2.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}} | {{Spec2('Filters 2.0')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.backdrop-filter")}}</p>
+{{Compat("css.properties.backdrop-filter")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("filter")}}</li>
- <li><a href="https://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Construire des effets de transparences comme sur iOS avec <code>backdrop-filter</code> (en anglais)</a></li>
-</ul>
+- {{cssxref("filter")}}
+- [Construire des effets de transparences comme sur iOS avec `backdrop-filter` (en anglais)](https://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter)
diff --git a/files/fr/web/css/backface-visibility/index.md b/files/fr/web/css/backface-visibility/index.md
index 510a676f14..2dcb83fed9 100644
--- a/files/fr/web/css/backface-visibility/index.md
+++ b/files/fr/web/css/backface-visibility/index.md
@@ -8,49 +8,50 @@ tags:
   - Reference
 translation_of: Web/CSS/backface-visibility
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>backface-visibility</code></strong> indique si la face arrière d'un élément doit être visible lorsqu'elle est orientée vers l'utilisateur. La face arrière d'un élément est un arrière-plan transparent qui, lorsqu'il est visible, permet de voir un reflet symétrique de la face avant de l'élément.</p>
+La propriété **`backface-visibility`** indique si la face arrière d'un élément doit être visible lorsqu'elle est orientée vers l'utilisateur. La face arrière d'un élément est un arrière-plan transparent qui, lorsqu'il est visible, permet de voir un reflet symétrique de la face avant de l'élément.
 
-<div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div>
+{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
 
-<p>Dans certains cas, on souhaite que la face avant ne soit pas visible par transparence. Par exemple, si on souhaite simuler une carte à jouer qu'on retourne.</p>
+Dans certains cas, on souhaite que la face avant ne soit pas visible par transparence. Par exemple, si on souhaite simuler une carte à jouer qu'on retourne.
 
-<p>Cette propriété n'aura aucun effet tant que les transformations appliquées sont uniquement en 2D car aucun effet de perspective ne sera introduit.</p>
+Cette propriété n'aura aucun effet tant que les transformations appliquées sont uniquement en 2D car aucun effet de perspective ne sera introduit.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 backface-visibility: visible;
 backface-visibility: hidden;
 
 /* Valeurs globales */
 backface-visibility: inherit;
 backface-visibility: initial;
-backface-visibility: unset;</pre>
+backface-visibility: unset;
+```
 
-<p>La propriété <code>backface-visibility</code> est définie avec l'un des mots-clés suivants.</p>
+La propriété `backface-visibility` est définie avec l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>visible</code></dt>
- <dd>Ce mot-clé indique que la face arrière est visible lorsqu'elle est tournée vers l'utilisateur. Cela permet d'obtenir un effet miroir sur la face avant.</dd>
- <dt><code>hidden</code></dt>
- <dd>Ce mot-clé indique que la face arrière n'est pas visible. La face avant est donc cachée.</dd>
-</dl>
+- `visible`
+  - : Ce mot-clé indique que la face arrière est visible lorsqu'elle est tournée vers l'utilisateur. Cela permet d'obtenir un effet miroir sur la face avant.
+- `hidden`
+  - : Ce mot-clé indique que la face arrière n'est pas visible. La face avant est donc cachée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on dessine un cube avec des faces transparentes.</p>
+Dans cet exemple, on dessine un cube avec des faces transparentes.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* Des classes utilitaires pour afficher ou
+```css
+/* Des classes utilitaires pour afficher ou
    masquer les faces arrières du cube */
 .hidebf div {
   backface-visibility: hidden;
@@ -129,85 +130,73 @@ th, p, td {
   padding: 6px;
   font-family: sans-serif;
   text-align: left;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
-      &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;
-        &lt;div class="container"&gt;
-          &lt;div class="cube showbf"&gt;
-            &lt;div class="face front"&gt;1&lt;/div&gt;
-            &lt;div class="face back"&gt;2&lt;/div&gt;
-            &lt;div class="face right"&gt;3&lt;/div&gt;
-            &lt;div class="face left"&gt;4&lt;/div&gt;
-            &lt;div class="face top"&gt;5&lt;/div&gt;
-            &lt;div class="face bottom"&gt;6&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-        &lt;p&gt;
+}
+```
+
+### HTML
+
+```html
+<table>
+  <tbody>
+    <tr>
+      <th><code>backface-visibility: visible;</code></th>
+      <th><code>backface-visibility: hidden;</code></th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube showbf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>
           Toutes les faces sont transparentes et les trois
           faces arrières sont visibles au travers des faces
           avant.
-        &lt;/p&gt;
-      &lt;/td&gt;
-      &lt;td&gt;
-        &lt;div class="container"&gt;
-          &lt;div class="cube hidebf"&gt;
-            &lt;div class="face front"&gt;1&lt;/div&gt;
-            &lt;div class="face back"&gt;2&lt;/div&gt;
-            &lt;div class="face right"&gt;3&lt;/div&gt;
-            &lt;div class="face left"&gt;4&lt;/div&gt;
-            &lt;div class="face top"&gt;5&lt;/div&gt;
-            &lt;div class="face bottom"&gt;6&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-        &lt;p&gt;
+        </p>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube hidebf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>
           Aucune face n'est opaque mais les trois faces arrières
           sont désormais cachées.
-        &lt;/p&gt;
-      &lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '100%', 360)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+        </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '100%', 360)}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}} | {{Spec2('CSS Transforms 2')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.backface-visibility")}}</p>
+{{Compat("css.properties.backface-visibility")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
-</ul>
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS)
diff --git a/files/fr/web/css/background-attachment/index.md b/files/fr/web/css/background-attachment/index.md
index a047e44575..c4074f7289 100644
--- a/files/fr/web/css/background-attachment/index.md
+++ b/files/fr/web/css/background-attachment/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/background-attachment
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>background-attachment</code></strong> définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (<em>viewport</em>) ou si celle-ci défile avec le bloc englobant.</p>
+La propriété **`background-attachment`** définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (_viewport_) ou si celle-ci défile avec le bloc englobant.
 
-<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 background-attachment: scroll;
 background-attachment: fixed;
 background-attachment: local;
@@ -24,65 +25,69 @@ background-attachment: local;
 background-attachment: inherit;
 background-attachment: initial;
 background-attachment: unset;
-</pre>
+```
 
-<p>La propriété <code>background-attachment</code> est définie avec un des mots-clés de la liste suivante.</p>
+La propriété `background-attachment` est définie avec un des mots-clés de la liste suivante.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>fixed</code></dt>
- <dd>Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (<em>viewport</em>). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec {{cssxref("background-clip", "background-clip: text", "#text")}}).</dd>
- <dt><code>local</code></dt>
- <dd>Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur.</dd>
- <dt><code>scroll</code></dt>
- <dd>Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément.</dd>
-</dl>
+- `fixed`
+  - : Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (_viewport_). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec {{cssxref("background-clip", "background-clip: text", "#text")}}).
+- `local`
+  - : Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur.
+- `scroll`
+  - : Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush:css">p {
+```css
+p {
   background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
   background-attachment: fixed;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   There were doors all round the hall, but they were all locked; and when
   Alice had been all the way down one side and up the other, trying every
   door, she walked sadly down the middle, wondering how she was ever to
   get out again.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+{{EmbedLiveSample("Exemple_simple")}}
 
-<h3 id="Gestion_de_plusieurs_arrière-plans">Gestion de plusieurs arrière-plans</h3>
+### Gestion de plusieurs arrière-plans
 
-<p>On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en arrière-plan. On peut définir, pour chaque image, un <code>background-attachment</code> spécifique. Pour cela, on utilisera une liste, séparée par des virgules. Les images seront associées dans l'ordre à chaque propriété d'attachement.</p>
+On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en arrière-plan. On peut définir, pour chaque image, un `background-attachment` spécifique. Pour cela, on utilisera une liste, séparée par des virgules. Les images seront associées dans l'ordre à chaque propriété d'attachement.
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush:css">p {
+```css
+p {
   background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
   background-attachment: fixed, scroll;
   background-repeat: no-repeat, repeat-y;
-}</pre>
+}
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   There were doors all round the hall, but they were all locked; and when
   Alice had been all the way down one side and up the other, trying every
   door, she walked sadly down the middle, wondering how she was ever to
@@ -96,49 +101,27 @@ background-attachment: unset;
   time round, she came upon a low curtain she had not noticed before, and
   behind it was a little door about fifteen inches high: she tried the
   little golden key in the lock, and to her great delight it fitted!
-&lt;/p&gt;</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur <code>local</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background-attachment")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans" title="CSS/Multiple backgrounds">Gérer plusieurs arrière-plans</a></li>
-</ul>
+</p>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}}
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                     | Commentaires                                                                        |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}         | {{Spec2('CSS3 Backgrounds')}} | La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur `local`. |
+| {{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}} | {{Spec2('CSS2.1')}}                 | Aucune modification significative.                                                  |
+| {{SpecName('CSS1', '#background-attachment', 'background-attachment')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background-attachment")}}
+
+## Voir aussi
+
+- [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans "CSS/Multiple backgrounds")
diff --git a/files/fr/web/css/background-blend-mode/index.md b/files/fr/web/css/background-blend-mode/index.md
index 0b8bc30a7f..4f642b32e5 100644
--- a/files/fr/web/css/background-blend-mode/index.md
+++ b/files/fr/web/css/background-blend-mode/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/background-blend-mode
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>background-blend-mode</code></strong> définit la façon dont les images d'arrière-plan doivent être fusionnées entre elles et avec la couleur d'arrière-plan.</p>
+La propriété CSS **`background-blend-mode`** définit la façon dont les images d'arrière-plan doivent être fusionnées entre elles et avec la couleur d'arrière-plan.
 
-<div>{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}
 
-<p>Les modes de fusions (<em>blending modes</em>) doivent être définis dans le même ordre que les images sont définies avec {{cssxref("background-image")}}. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.</p>
+Les modes de fusions (_blending modes_) doivent être définis dans le même ordre que les images sont définies avec {{cssxref("background-image")}}. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Une valeur qui s'applique à toutes les images */
+```css
+/* Une valeur qui s'applique à toutes les images */
 background-blend-mode: normal;
 
 /* Deux valeurs, chacune pour une image */
@@ -27,90 +28,79 @@ background-blend-mode: darken, luminosity;
 background-blend-mode: initial;
 background-blend-mode: inherit;
 background-blend-mode: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;blend-mode&gt;</code></dt>
- <dd>Une valeur décrivant un mode de fusion (type {{cssxref("&lt;blend-mode&gt;")}}) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.</dd>
-</dl>
+- `<blend-mode>`
+  - : Une valeur décrivant un mode de fusion (type {{cssxref("&lt;blend-mode&gt;")}}) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<pre>Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre>
+    Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#div {
+```css
+#div {
     width: 300px;
     height: 300px;
     background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
     background-blend-mode: screen;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;
-
-&lt;select id="select"&gt;
-    &lt;option&gt;normal&lt;/option&gt;
-    &lt;option&gt;multiply&lt;/option&gt;
-    &lt;option selected&gt;screen&lt;/option&gt;
-    &lt;option&gt;overlay&lt;/option&gt;
-    &lt;option&gt;darken&lt;/option&gt;
-    &lt;option&gt;lighten&lt;/option&gt;
-    &lt;option&gt;color-dodge&lt;/option&gt;
-    &lt;option&gt;color-burn&lt;/option&gt;
-    &lt;option&gt;hard-light&lt;/option&gt;
-    &lt;option&gt;soft-light&lt;/option&gt;
-    &lt;option&gt;difference&lt;/option&gt;
-    &lt;option&gt;exclusion&lt;/option&gt;
-    &lt;option&gt;hue&lt;/option&gt;
-    &lt;option&gt;saturation&lt;/option&gt;
-    &lt;option&gt;color&lt;/option&gt;
-    &lt;option&gt;luminosity&lt;/option&gt;
-&lt;/select&gt;</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js ">document.getElementById("select").onchange = function(event) {
+}
+```
+
+### HTML
+
+```html
+<div id="div"></div>
+
+<select id="select">
+    <option>normal</option>
+    <option>multiply</option>
+    <option selected>screen</option>
+    <option>overlay</option>
+    <option>darken</option>
+    <option>lighten</option>
+    <option>color-dodge</option>
+    <option>color-burn</option>
+    <option>hard-light</option>
+    <option>soft-light</option>
+    <option>difference</option>
+    <option>exclusion</option>
+    <option>hue</option>
+    <option>saturation</option>
+    <option>color</option>
+    <option>luminosity</option>
+</select>
+```
+
+### JavaScript
+
+```js
+document.getElementById("select").onchange = function(event) {
     document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
 }
-console.log(document.getElementById('div'));</pre>
+console.log(document.getElementById('div'));
+```
 
-<p>{{EmbedLiveSample('Exemples', "330", "330")}}</p>
+{{EmbedLiveSample('Exemples', "330", "330")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}}</td>
-   <td>{{Spec2('Compositing')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}} | {{Spec2('Compositing')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.background-blend-mode")}}</p>
+{{Compat("css.properties.background-blend-mode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
- <li>{{cssxref("mix-blend-mode")}}</li>
-</ul>
+- {{cssxref("&lt;blend-mode&gt;")}}
+- {{cssxref("mix-blend-mode")}}
diff --git a/files/fr/web/css/background-clip/index.md b/files/fr/web/css/background-clip/index.md
index 78a5167402..c6947483ad 100644
--- a/files/fr/web/css/background-clip/index.md
+++ b/files/fr/web/css/background-clip/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/background-clip
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>background-clip</code></strong> définit la façon dont l'arrière-plan d'un élément (que ce soit l'image ou la couleur) s'étend sous la boîte de bordure, la boîte de remplissage (<em>padding</em>) ou la boîte de contenu.</p>
+La propriété **`background-clip`** définit la façon dont l'arrière-plan d'un élément (que ce soit l'image ou la couleur) s'étend sous la boîte de bordure, la boîte de remplissage (_padding_) ou la boîte de contenu.
 
-<div>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-clip.html")}}
 
-<p>Si aucune image ({{cssxref("background-image")}}) ni couleur ({{cssxref("background-color")}}) d'arrière-plan n'est définie, cette propriété aura uniquement un effet visuel lorsque la bordure possède des régions transparentes (via {{cssxref("border-style")}} ou {{cssxref("border-image")}}). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .</p>
+Si aucune image ({{cssxref("background-image")}}) ni couleur ({{cssxref("background-color")}}) d'arrière-plan n'est définie, cette propriété aura uniquement un effet visuel lorsque la bordure possède des régions transparentes (via {{cssxref("border-style")}} ou {{cssxref("border-image")}}). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs utilisant un mot-clé */
+```css
+/* Valeurs utilisant un mot-clé */
 background-clip: border-box;
 background-clip: padding-box;
 background-clip: content-box;
@@ -27,30 +28,29 @@ background-clip: text;
 background-clip: inherit;
 background-clip: initial;
 background-clip: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>border-box</code></dt>
- <dd>L'arrière-plan s'étend jusqu'à la limite externe de la bordure. L'arrière-plan sera situé sous la bordure en termes d'ordre z.</dd>
- <dt><code>padding-box</code></dt>
- <dd>Aucun arrière-plan n'est dessiné dans la boîte de bordure. L'arrière-plan s'étend jusqu'à la limite de la boîte de remplissage (<em>padding</em>).</dd>
- <dt><code>content-box</code></dt>
- <dd>L'arrière-plan est limité (rogné) à la boîte de contenu.</dd>
- <dt><code>text</code> {{experimental_inline}}</dt>
- <dd>L'arrière-plan est limité (rogné) au texte en premier plan.</dd>
-</dl>
+- `border-box`
+  - : L'arrière-plan s'étend jusqu'à la limite externe de la bordure. L'arrière-plan sera situé sous la bordure en termes d'ordre z.
+- `padding-box`
+  - : Aucun arrière-plan n'est dessiné dans la boîte de bordure. L'arrière-plan s'étend jusqu'à la limite de la boîte de remplissage (_padding_).
+- `content-box`
+  - : L'arrière-plan est limité (rogné) à la boîte de contenu.
+- `text` {{experimental_inline}}
+  - : L'arrière-plan est limité (rogné) au texte en premier plan.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
  border: 10px navy;
  border-style: dotted double;
  margin: 1em;
@@ -76,72 +76,53 @@ background-clip: unset;
   background-clip: text;
   color: rgba(0,0,0,.2);
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="border-box"&gt;
+```html
+<p class="border-box">
   L'arrière-plan s'étend sous la bordure.
-&lt;/p&gt;
-&lt;p class="padding-box"&gt;
+</p>
+<p class="padding-box">
   L'arrière-plan s'étend jusqu'avant la
   bordure.
-&lt;/p&gt;
-&lt;p class="content-box"&gt;
+</p>
+<p class="content-box">
   L'arrière-plan s'arrête à la boîte de
   contenu.
-&lt;/p&gt;
-&lt;p class="text"&gt;
+</p>
+<p class="text">
   L'arrière-plan se limite au texte au
   premier-plan.
-&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 600, 580)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}</td>
-   <td>{{Spec2('CSS4 Backgrounds')}}</td>
-   <td>Ajout de la valeur <code>text</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background-clip")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("clip-path")}}</li>
- <li>Les propriétés relatives à l'arrière-plan :
-  <ul>
-   <li>{{cssxref("background")}}</li>
-   <li>{{cssxref("background-color")}}</li>
-   <li>{{cssxref("background-image")}}</li>
-   <li>{{cssxref("background-origin")}}</li>
-  </ul>
- </li>
- <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
-</ul>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 600, 580)}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                     | Commentaires               |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale.       |
+| {{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}     | {{Spec2('CSS4 Backgrounds')}} | Ajout de la valeur `text`. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background-clip")}}
+
+## Voir aussi
+
+- {{cssxref("clip-path")}}
+- Les propriétés relatives à l'arrière-plan :
+
+  - {{cssxref("background")}}
+  - {{cssxref("background-color")}}
+  - {{cssxref("background-image")}}
+  - {{cssxref("background-origin")}}
+
+- [Le modèle de boîtes CSS](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte)
diff --git a/files/fr/web/css/background-color/index.md b/files/fr/web/css/background-color/index.md
index b536c82c49..474f17a985 100644
--- a/files/fr/web/css/background-color/index.md
+++ b/files/fr/web/css/background-color/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/background-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>background-color</code></strong> permet de définir la couleur utilisée pour l'arrière-plan d'un élément (celle-ci peut être une couleur transparente).</p>
+La propriété **`background-color`** permet de définir la couleur utilisée pour l'arrière-plan d'un élément (celle-ci peut être une couleur transparente).
 
-<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-color.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 background-color: red;
 
 
@@ -45,26 +46,26 @@ background-color: transparent;
 /* Valeurs globales */
 background-color: inherit;
 background-color: initial;
-background-color: unset;</pre>
+background-color: unset;
+```
 
-<p>La propriété <code>background-color</code> se définit grâce à une valeur de type <code>&lt;color&gt;</code>.</p>
+La propriété `background-color` se définit grâce à une valeur de type `<color>`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur uniforme de l'arrière-plan. Même si une ou plusieurs images sont définies grâce à {{cssxref("background-image")}}, la couleur peut avoir un impact en fonction de la transparence des images. De façon générale, c'est une bonne pratique que de définir une couleur malgré la présence d'image pour prévenir aux problèmes de chargement des images.</dd>
-</dl>
+- `<color>`
+  - : Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur uniforme de l'arrière-plan. Même si une ou plusieurs images sont définies grâce à {{cssxref("background-image")}}, la couleur peut avoir un impact en fonction de la transparence des images. De façon générale, c'est une bonne pratique que de définir une couleur malgré la présence d'image pour prévenir aux problèmes de chargement des images.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css;">.exemple_un {
+```css
+.exemple_un {
   background-color: teal;
   color: white;
 }
@@ -78,80 +79,55 @@ background-color: unset;</pre>
   background-color: #777799;
   color: #FFFFFF;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple_un"&gt;
+```html
+<div class="exemple_un">
   Lorem ipsum dolor sit amet, consectetuer
-&lt;/div&gt;
+</div>
 
-&lt;div class="exemple_deux"&gt;
+<div class="exemple_deux">
   Lorem ipsum dolor sit amet, consectetuer
-&lt;/div&gt;
+</div>
 
-&lt;div class="exemple_trois"&gt;
+<div class="exemple_trois">
   Lorem ipsum dolor sit amet, consectetuer
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Il est important de vérifier que le contraste entre la couleur d'arrière-plan et la couleur du texte est suffisamment élevé afin que le contenu de la page puisse être lu, quelles que soient les conditions de vision.</p>
-
-<p>Le ratio de contraste entre les couleurs est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Pour respecter les règles d'accessibilité <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, il faut avoir un ratio de 4.5:1 pour le contenu textuel normal et un ratio de 3:1 pour les textes plus grands comme les titres (un texte sera considéré comme grand s'il est en gras et mesure au moins 18.66px ou s'il mesure au moins 24 pixels).</p>
-
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM</a></li>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"><em>Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Commentaires</th>
-   <th scope="col">Retours</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
-   <td>Le mot-clé <code>transparent</code> a été retiré de la propriété pour être intégré au type de données {{cssxref("&lt;color&gt;")}} (dans la pratique, il n'y a aucune différence).</td>
-   <td><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3"><em>Issues</em> GitHub pour la spécification Background de niveau 3 (en anglais)</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
-   <td>Aucune modification.</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
-   <td>Définition initiale.</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>
-  <p><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrières-plans</a></p>
- </li>
- <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
- <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs à des éléments HTML grâce à CSS</a></li>
-</ul>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","150")}}
+
+## Accessibilité
+
+Il est important de vérifier que le contraste entre la couleur d'arrière-plan et la couleur du texte est suffisamment élevé afin que le contenu de la page puisse être lu, quelles que soient les conditions de vision.
+
+Le ratio de contraste entre les couleurs est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Pour respecter les règles d'accessibilité [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/intro/wcag), il faut avoir un ratio de 4.5:1 pour le contenu textuel normal et un ratio de 3:1 pour les textes plus grands comme les titres (un texte sera considéré comme grand s'il est en gras et mesure au moins 18.66px ou s'il mesure au moins 24 pixels).
+
+- [Vérificateur 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)
+
+## Spécifications
+
+| Spécification                                                                                                | Commentaires                                                                                                                                                                    | Retours                                                                                                                                   |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}             | Le mot-clé `transparent` a été retiré de la propriété pour être intégré au type de données {{cssxref("&lt;color&gt;")}} (dans la pratique, il n'y a aucune différence). | [_Issues_ GitHub pour la spécification Background de niveau 3 (en anglais)](https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3) |
+| {{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}} | Aucune modification.                                                                                                                                                            |                                                                                                                                           |
+| {{SpecName('CSS1', '#background-color', 'background-color')}}                             | Définition initiale.                                                                                                                                                            |                                                                                                                                           |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background-color")}}
+
+## Voir aussi
+
+- [Gérer plusieurs arrières-plans](/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples)
+- Le type de données {{cssxref("&lt;color&gt;")}}
+- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}
+- [Appliquer des couleurs à des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
diff --git a/files/fr/web/css/background-image/index.md b/files/fr/web/css/background-image/index.md
index 8060b3da48..6cf6e5316b 100644
--- a/files/fr/web/css/background-image/index.md
+++ b/files/fr/web/css/background-image/index.md
@@ -7,25 +7,24 @@ tags:
   - Reference
 translation_of: Web/CSS/background-image
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>background-image</code></strong> permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.</p>
+La propriété **`background-image`** permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-image.html")}}
 
-<p>Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur.</p>
+Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur.
 
-<p>Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.</p>
+Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.
 
-<p>Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme <code>none</code>.</p>
+Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme `none`.
 
-<div class="note">
-  <p><strong>Note :</strong> Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.</p>
-</div>
+> **Note :** Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur simple */
+```css
+/* Valeur simple */
 background-image: url('https://example.com/bck.png');
 
 /* Plusieurs valeurs */
@@ -38,50 +37,52 @@ background-image: none;
 background-image: inherit;
 background-image: initial;
 background-image: unset;
-</pre>
+```
 
-<p>Chaque image d'arrière-plan peut être définie avec le mot-clé <code>none</code> ou avec une valeur de type <code>&lt;image&gt;</code>. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules :</p>
+Chaque image d'arrière-plan peut être définie avec le mot-clé `none` ou avec une valeur de type `<image>`. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules :
 
-<pre class="brush: css">background-image:
+```css
+background-image:
   linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
   url("https://mdn.mozillademos.org/files/7693/catfront.png");
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.</dd>
- <dt><code>&lt;image&gt;</code></dt>
- <dd>Une valeur {{cssxref("&lt;image&gt;")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes (<code>'texte_avec_double_quotes_"_'</code>) ou des doubles quotes (<code>"texte_avec_simple_quote_'_"</code>) pour encadrer le texte qui forme l'URL.</dd>
-</dl>
+- `none`
+  - : Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.
+- `<image>`
+  - : Une valeur {{cssxref("&lt;image&gt;")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes (`'texte_avec_double_quotes_"_'`) ou des doubles quotes (`"texte_avec_simple_quote_'_"`) pour encadrer le texte qui forme l'URL.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.</p>
+On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="catsandstars"&gt;
-    Un paragraphe avec des chats&lt;br/&gt;
+```html
+<div>
+  <p class="catsandstars">
+    Un paragraphe avec des chats<br/>
     et des étoiles.
-  &lt;/p&gt;
-  &lt;p&gt;Pas ici.&lt;/p&gt;
-  &lt;p class="catsandstars"&gt;
-    Et voilà encore des chats.&lt;br/&gt;
+  </p>
+  <p>Pas ici.</p>
+  <p class="catsandstars">
+    Et voilà encore des chats.<br/>
     Et des étoiles !
-  &lt;/p&gt;
-  &lt;p&gt;Puis plus rien.&lt;/p&gt;
-&lt;/div&gt;</pre>
+  </p>
+  <p>Puis plus rien.</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   font-size: 1.5em;
   color: #FE7F88;
   background-color: transparent;
@@ -97,74 +98,45 @@ div {
                      url("https://mdn.mozillademos.org/files/7693/catfront.png");
   background-color: transparent;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
-
-<ul>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles du WCAG 1.1</a></li>
- <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("&lt;image&gt;")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}}</td>
-   <td>{{Spec2('CSS2.2')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background-image")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">Implémenter des sprites en CSS</a></li>
- <li>{{HTMLElement("img")}},</li>
- <li>{{cssxref("&lt;image&gt;")}},</li>
- <li>{{cssxref("&lt;gradient&gt;")}},</li>
- <li>{{cssxref("linear-gradient")}},</li>
- <li>{{cssxref("radial-gradient")}},</li>
- <li>{{cssxref("repeating-linear-gradient")}},</li>
- <li>{{cssxref("repeating-radial-gradient")}},</li>
- <li>{{cssxref("element()")}},</li>
- <li>{{cssxref("_image", "image()")}},</li>
- <li>{{cssxref("image-set")}},</li>
- <li>{{cssxref("url","url()")}}</li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Accessibilité
+
+Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.
+
+- [Comprendre les règles du WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## Spécifications
+
+| Spécification                                                                                                | État                                     | Commentaires                                                                                                                  |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}             | {{Spec2('CSS3 Backgrounds')}} | La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("&lt;image&gt;")}}. |
+| {{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}} | {{Spec2('CSS2.2')}}                 |                                                                                                                               |
+| {{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}} | {{Spec2('CSS2.1')}}                 | La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite.                                 |
+| {{SpecName('CSS1', '#background-image', 'background-image')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                          |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background-image")}}
+
+## Voir aussi
+
+- [Implémenter des sprites en CSS](/fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
+- {{HTMLElement("img")}},
+- {{cssxref("&lt;image&gt;")}},
+- {{cssxref("&lt;gradient&gt;")}},
+- {{cssxref("linear-gradient")}},
+- {{cssxref("radial-gradient")}},
+- {{cssxref("repeating-linear-gradient")}},
+- {{cssxref("repeating-radial-gradient")}},
+- {{cssxref("element()")}},
+- {{cssxref("_image", "image()")}},
+- {{cssxref("image-set")}},
+- {{cssxref("url","url()")}}
diff --git a/files/fr/web/css/background-origin/index.md b/files/fr/web/css/background-origin/index.md
index 30fda75135..e9a1286b35 100644
--- a/files/fr/web/css/background-origin/index.md
+++ b/files/fr/web/css/background-origin/index.md
@@ -7,21 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/background-origin
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>background-origin</code></strong> détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (<em>padding</em>).</p>
+La propriété **`background-origin`** détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (_padding_).
 
-<div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-origin.html")}}
 
-<p>Attention, <code>background-origin</code> est ignorée lorsque {{cssxref("background-attachment")}} vaut <code>fixed</code>.</p>
+Attention, `background-origin` est ignorée lorsque {{cssxref("background-attachment")}} vaut `fixed`.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration <code>background-origin</code> avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour <code>background-origin</code>.</p>
-</div>
+> **Note :** Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 background-origin: border-box;
 background-origin: padding-box;
 background-origin: content-box;
@@ -30,28 +29,27 @@ background-origin: content-box;
 background-origin: inherit;
 background-origin: initial;
 background-origin: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>border-box</code></dt>
- <dd>L'arrière-plan est positionné relativement à la boîte de bordure.</dd>
- <dt><code>padding-box</code></dt>
- <dd>L'arrière-plan est positionné relativement à la boîte de remplissage (<em>padding</em>).</dd>
- <dt><code>content-box</code></dt>
- <dd>L'arrière-plan est positionné relativement à la boîte de contenu.</dd>
-</dl>
+- `border-box`
+  - : L'arrière-plan est positionné relativement à la boîte de bordure.
+- `padding-box`
+  - : L'arrière-plan est positionné relativement à la boîte de remplissage (_padding_).
+- `content-box`
+  - : L'arrière-plan est positionné relativement à la boîte de contenu.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css;">div {
+```css
+div {
   width: 200px;
   height: 100px;
 }
@@ -65,43 +63,30 @@ background-origin: unset;
   background-origin: content-box;
   background-repeat: no-repeat;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;&lt;/div&gt;</pre>
+```html
+<div class="exemple"></div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+{{EmbedLiveSample("Exemples","300","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.background-origin")}}</p>
+{{Compat("css.properties.background-origin")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("background-clip")}}</li>
-</ul>
+- {{cssxref("background-clip")}}
diff --git a/files/fr/web/css/background-position-x/index.md b/files/fr/web/css/background-position-x/index.md
index 19ef27e117..03d62fdef2 100644
--- a/files/fr/web/css/background-position-x/index.md
+++ b/files/fr/web/css/background-position-x/index.md
@@ -8,31 +8,30 @@ tags:
   - Reference
 translation_of: Web/CSS/background-position-x
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>background-position-x</code></strong> définit la position horizontale initiale de chaque image d'arrière-plan par rapport à l'origine, définie avec {{cssxref("background-origin")}}.</p>
+La propriété **`background-position-x`** définit la position horizontale initiale de chaque image d'arrière-plan par rapport à l'origine, définie avec {{cssxref("background-origin")}}.
 
-<p>Pour plus d'informations, se référer à la documentation de la propriété {{cssxref("background-position")}} qui existe depuis plus longtemps.</p>
+Pour plus d'informations, se référer à la documentation de la propriété {{cssxref("background-position")}} qui existe depuis plus longtemps.
 
-<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-position-x.html")}}
 
-<div class="note">
-  <p><strong>Note :</strong> La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de <code>background-position-x</code>.</p>
-</div>
+> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de `background-position-x`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 background-position-x: left;
 background-position-x: right;
 background-position-x: center;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt;        */
+/* Type <percentage>        */
 background-position-x: 25%;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 background-position-x: 0px;
 background-position-x: 1cm;
 background-position-x: 8em;
@@ -49,58 +48,41 @@ background-position-x: 0px, center;
 background-position-x: inherit;
 background-position-x: initial;
 background-position-x: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>left</code></dt>
- <dd>Le bord gauche de l'image d'arrière-plan est aligné avec le bord gauche de la zone dédiée à l'arrière-plan.</dd>
- <dt><code>center</code></dt>
- <dd>L'image d'arrière-plan est centrée horizontalement par rapport à la zone dédiée à l'arrière-plan.</dd>
- <dt><code>right</code></dt>
- <dd>Le côté droit de l'image d'arrière-plan est aligné avec le côté droit de la zone dédiée à l'arrière-plan.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan, proportionnellement à la largeur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.</dd>
-</dl>
+- `left`
+  - : Le bord gauche de l'image d'arrière-plan est aligné avec le bord gauche de la zone dédiée à l'arrière-plan.
+- `center`
+  - : L'image d'arrière-plan est centrée horizontalement par rapport à la zone dédiée à l'arrière-plan.
+- `right`
+  - : Le côté droit de l'image d'arrière-plan est aligné avec le côté droit de la zone dédiée à l'arrière-plan.
+- `<length>`
+  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.
+- `<percentage>`
+  - : Une valeur en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan, proportionnellement à la largeur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td>
-   <td>{{Spec2('CSS4 Backgrounds')}}</td>
-   <td>Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background-position-x")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("background-position")}}</li>
- <li>{{cssxref("background-position-y")}}</li>
- <li>{{cssxref("background-position-inline")}}</li>
- <li>{{cssxref("background-position-block")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                                            | État                                     | Commentaires                                                                                                                         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}} | {{Spec2('CSS4 Backgrounds')}} | Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background-position-x")}}
+
+## Voir aussi
+
+- {{cssxref("background-position")}}
+- {{cssxref("background-position-y")}}
+- {{cssxref("background-position-inline")}}
+- {{cssxref("background-position-block")}}
+- [Manipuler plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
diff --git a/files/fr/web/css/background-position-y/index.md b/files/fr/web/css/background-position-y/index.md
index d6346071e7..ac91b537cf 100644
--- a/files/fr/web/css/background-position-y/index.md
+++ b/files/fr/web/css/background-position-y/index.md
@@ -8,29 +8,28 @@ tags:
   - Reference
 translation_of: Web/CSS/background-position-y
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>background-position-y</code></strong> définit la position verticale initiale de chaque image d'arrière-plan. La position est relative à l'origine définie par {{cssxref("background-origin")}}.</p>
+La propriété **`background-position-y`** définit la position verticale initiale de chaque image d'arrière-plan. La position est relative à l'origine définie par {{cssxref("background-origin")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/background-position-y.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-position-y.html")}}
 
-<div class="note">
-  <p><strong>Note :</strong> La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.</p>
-</div>
+> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 background-position-y: top;
 background-position-y: bottom;
 background-position-y: center;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt;        */
+/* Type <percentage>        */
 background-position-y: 25%;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 background-position-y: 0px;
 background-position-y: 1cm;
 background-position-y: 8em;
@@ -48,58 +47,41 @@ background-position-y: 0px, center;
 background-position-y: inherit;
 background-position-y: initial;
 background-position-y: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>top</code></dt>
- <dd>Le bord haut de l'image d'arrière-plan est aligné avec le bord haut de la zone dédiée à l'arrière-plan.</dd>
- <dt><code>center</code></dt>
- <dd>L'image d'arrière-plan est centrée verticalement par rapport à la zone dédiée à l'arrière-plan.</dd>
- <dt><code>bottom</code></dt>
- <dd>Le bas de l'image d'arrière-plan est aligné avec le bas de la zone dédiée à l'arrière-plan.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport au bord haut de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Certains navigateurs permettent d'indiquer un décalage par rapport au côté bas.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport à un bord horizontal de la zone d'arrière-plan, proportionnellement à la hauteur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Une valeur de 100% indique que le bas de l'image d'arrière-plan sera aligné avec le bas du conteneur et une valeur de 50% centrera l'image.</dd>
-</dl>
+- `top`
+  - : Le bord haut de l'image d'arrière-plan est aligné avec le bord haut de la zone dédiée à l'arrière-plan.
+- `center`
+  - : L'image d'arrière-plan est centrée verticalement par rapport à la zone dédiée à l'arrière-plan.
+- `bottom`
+  - : Le bas de l'image d'arrière-plan est aligné avec le bas de la zone dédiée à l'arrière-plan.
+- `<length>`
+  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport au bord haut de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Certains navigateurs permettent d'indiquer un décalage par rapport au côté bas.
+- `<percentage>`
+  - : Une valeur en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport à un bord horizontal de la zone d'arrière-plan, proportionnellement à la hauteur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Une valeur de 100% indique que le bas de l'image d'arrière-plan sera aligné avec le bas du conteneur et une valeur de 50% centrera l'image.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}}</td>
-   <td>{{Spec2('CSS4 Backgrounds')}}</td>
-   <td>Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background-position-y")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("background-position")}}</li>
- <li>{{cssxref("background-position-x")}}</li>
- <li>{{cssxref("background-position-inline")}}</li>
- <li>{{cssxref("background-position-block")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                                            | État                                     | Commentaires                                                                                                                         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}} | {{Spec2('CSS4 Backgrounds')}} | Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background-position-y")}}
+
+## Voir aussi
+
+- {{cssxref("background-position")}}
+- {{cssxref("background-position-x")}}
+- {{cssxref("background-position-inline")}}
+- {{cssxref("background-position-block")}}
+- [Manipuler plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
diff --git a/files/fr/web/css/background-position/index.md b/files/fr/web/css/background-position/index.md
index 5649bec662..e32881dfac 100644
--- a/files/fr/web/css/background-position/index.md
+++ b/files/fr/web/css/background-position/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/background-position
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>background-position</code></strong> permet de définir la position initiale, relative à l'origine définie par {{cssxref("background-origin")}}, pour chaque image d'arrière-plan.</p>
+La propriété **`background-position`** permet de définir la position initiale, relative à l'origine définie par {{cssxref("background-origin")}}, pour chaque image d'arrière-plan.
 
-<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-position.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs utilisant un mot-clé */
+```css
+/* Valeurs utilisant un mot-clé */
 background-position: top;
 background-position: bottom;
 background-position: left;
@@ -23,11 +24,11 @@ background-position: right;
 background-position: center;
 
 /* Valeurs proportionnelles à la boîte */
-/* Type &lt;percentage&gt;                   */
+/* Type <percentage>                   */
 background-position: 25% 75%;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 background-position: 0 0;
 background-position: 1cm 2cm;
 background-position: 10ch 8em;
@@ -45,63 +46,57 @@ background-position: top right 10px;
 background-position: inherit;
 background-position: initial;
 background-position: unset;
-</pre>
+```
 
-<p>La propriété <code>background-position</code> peut être définie grâce à une ou plusieurs valeurs <code><a href="#&lt;position>">&lt;position&gt;</a></code>, séparées par des virgules.</p>
+La propriété `background-position` peut être définie grâce à une ou plusieurs valeurs [`<position>`](#<position>), séparées par des virgules.
 
-<h3 id="Values">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Une valeur {{cssxref("&lt;position&gt;")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale.
- <p><strong>Définition avec une valeur :</strong> la valeur peut être :</p>
+- `<position>`
 
- <ul>
-  <li>Le mot-clé <code>center</code> qui centre l'image.</li>
-  <li>Un mot-clé parmi <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%).</li>
-  <li>Une longeur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.</li>
- </ul>
+  - : Une valeur {{cssxref("&lt;position&gt;")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale.
 
- <p><strong>Définition avec deux valeurs :</strong> la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être :</p>
+    **Définition avec une valeur :** la valeur peut être :
 
- <ul>
-  <li>Un des mots-clés parmi <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Si <code>left</code> ou <code>right</code> est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si <code>top</code> ou <code>bottom</code> est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.</li>
-  <li>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Si l'autre valeur vaut <code>left</code> ou <code>right</code>, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est <code>top</code> ou <code>bottom</code>,  cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.</li>
- </ul>
+    - Le mot-clé `center` qui centre l'image.
+    - Un mot-clé parmi `top`, `left`, `bottom`, `right`. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%).
+    - Une longeur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.
 
- <p>On notera que :</p>
+    **Définition avec deux valeurs :** la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être :
 
- <ul>
-  <li>si une valeur est <code>top</code> ou <code>bottom</code>, la seconde ne peut pas être <code>top</code> ou <code>bottom</code>.</li>
-  <li>si une valeur est <code>left</code> ou <code>right</code>, la seconde ne peut pas être <code>left</code> ou <code>right</code>.</li>
- </ul>
+    - Un des mots-clés parmi `top`, `left`, `bottom`, `right`. Si `left` ou `right` est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si `top` ou `bottom` est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.
+    - Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Si l'autre valeur vaut `left` ou `right`, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est `top` ou `bottom`,  cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.
 
- <p>Autrement dit "<code>top top"</code> ou "<code>left right</code>" seront considérées comme invalides.</p>
+    On notera que :
 
- <p><strong>À propos des pourcentages :</strong> lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image.</p>
+    - si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`.
+    - si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`.
 
- <p>Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante :</p>
+    Autrement dit "`top top"` ou "`left right`" seront considérées comme invalides.
 
- <p><code>(largeur conteneur - largeur image) * (position en %) = (décalage horizontal)</code><br>
-  <code>(hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)</code>.</p>
+    **À propos des pourcentages :** lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image.
 
- <p>On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour <code>background-position</code> n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image.</p>
- </dd>
-</dl>
+    Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante :
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    `(largeur conteneur - largeur image) * (position en %) = (décalage horizontal)`
+    `(hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)`.
+
+    On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemples_utilisant_plusieurs_images">Exemples utilisant plusieurs images</h3>
+### Exemples utilisant plusieurs images
 
-<p>Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile située différemment. Le rectangle final possède deux images d'arrière-plan, chacune à une position différente.</p>
+Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile située différemment. Le rectangle final possède deux images d'arrière-plan, chacune à une position différente.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: #FFEE99;
   background-repeat: no-repeat;
   width: 300px;
@@ -127,66 +122,44 @@ L'ordre est le même entre background-image et -position.
                        url("https://mdn.mozillademos.org/files/7693/catfront.png");
   background-position: 0px 0px,
                        center;
-}</pre>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;div class="exemple_un"&gt;Premier exemple&lt;/div&gt;
-&lt;div class="exemple_deux"&gt;Deuxième exemple&lt;/div&gt;
-&lt;div class="exemple_trois"&gt;Troisième exemple&lt;/div&gt;</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample('Exemples', 420, 200)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>La gestion de plusieurs arrières-plans a été ajoutée. La syntaxe avec quatre valeurs a été ajoutée. La définition des valeurs en pourcentages a été modifiée pour correspondre aux implémentations.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Cette spécification permet de mélanger les valeurs qui sont des mots-clés, les valeurs de type {{cssxref("&lt;length&gt;")}} et {{cssxref("&lt;percentage&gt;")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background-position")}}</p>
-
-<h3 id="Notes_relatives_à_Quantum_CSS">Notes relatives à Quantum CSS</h3>
-
-<ul>
- <li>Un bug de Gecko empêche la transition de <code>background-position</code> entre deux valeurs qui contiennent différents nombres de valeurs {{cssxref("&lt;position&gt;")}} (par exemple <code>background-position: 10px 10px;</code> d'une part et <code>background-position: 20px 20px, 30px 30px;</code> d'autre part) (cf. {{bug(1390446)}}). Le nouveau moteur CSS de Firefox (appelé <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) corrige ce problème.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Gérer plusieurs arrières-plans</a></li>
- <li>{{cssxref("background-position-x")}}</li>
- <li>{{cssxref("background-position-y")}}</li>
- <li>{{cssxref("background-position-inline")}}</li>
- <li>{{cssxref("background-position-block")}}</li>
- <li>{{cssxref("transform-origin")}}</li>
-</ul>
+}
+```
+
+#### HTML
+
+```html
+<div class="exemple_un">Premier exemple</div>
+<div class="exemple_deux">Deuxième exemple</div>
+<div class="exemple_trois">Troisième exemple</div>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Exemples', 420, 200)}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                     | Commentaires                                                                                                                                                                                        |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}             | {{Spec2('CSS3 Backgrounds')}} | La gestion de plusieurs arrières-plans a été ajoutée. La syntaxe avec quatre valeurs a été ajoutée. La définition des valeurs en pourcentages a été modifiée pour correspondre aux implémentations. |
+| {{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}} | {{Spec2('CSS2.1')}}                 | Cette spécification permet de mélanger les valeurs qui sont des mots-clés, les valeurs de type {{cssxref("&lt;length&gt;")}} et {{cssxref("&lt;percentage&gt;")}}.            |
+| {{SpecName('CSS1', '#background-position', 'background-position')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background-position")}}
+
+### Notes relatives à Quantum CSS
+
+- Un bug de Gecko empêche la transition de `background-position` entre deux valeurs qui contiennent différents nombres de valeurs {{cssxref("&lt;position&gt;")}} (par exemple `background-position: 10px 10px;` d'une part et `background-position: 20px 20px, 30px 30px;` d'autre part) (cf. {{bug(1390446)}}). Le nouveau moteur CSS de Firefox (appelé [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour Firefox 57) corrige ce problème.
+
+## Voir aussi
+
+- [Gérer plusieurs arrières-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
+- {{cssxref("background-position-x")}}
+- {{cssxref("background-position-y")}}
+- {{cssxref("background-position-inline")}}
+- {{cssxref("background-position-block")}}
+- {{cssxref("transform-origin")}}
diff --git a/files/fr/web/css/background-repeat/index.md b/files/fr/web/css/background-repeat/index.md
index 91aeac12e6..d11530c2ad 100644
--- a/files/fr/web/css/background-repeat/index.md
+++ b/files/fr/web/css/background-repeat/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/background-repeat
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>background-repeat</code></strong> définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée.</p>
+La propriété **`background-repeat`** définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée.
 
-<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-repeat.html")}}
 
-<p>Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (<code>round</code>) voire être distribuées avec des espaces entre les motifs pour remplir la zone (<code>space</code>).</p>
+Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (`round`) voire être distribuées avec des espaces entre les motifs pour remplir la zone (`space`).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 background-repeat: repeat-x;
 background-repeat: repeat-y;
 background-repeat: repeat;
@@ -37,78 +38,104 @@ background-repeat: no-repeat round;
 background-repeat: inherit;
 background-repeat: initial;
 background-repeat: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;repeat-style&gt;</code></dt>
- <dd>Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><strong>Une seule valeur</strong></td>
-    <td><strong>Équivalent avec deux-valeurs</strong></td>
-   </tr>
-   <tr>
-    <td><code>repeat-x</code></td>
-    <td><code>repeat no-repeat</code></td>
-   </tr>
-   <tr>
-    <td><code>repeat-y</code></td>
-    <td><code>no-repeat repeat</code></td>
-   </tr>
-   <tr>
-    <td><code>repeat</code></td>
-    <td><code>repeat repeat</code></td>
-   </tr>
-   <tr>
-    <td><code>space</code></td>
-    <td><code>space space</code></td>
-   </tr>
-   <tr>
-    <td><code>round</code></td>
-    <td><code>round round</code></td>
-   </tr>
-   <tr>
-    <td><code>no-repeat</code></td>
-    <td><code>no-repeat no-repeat</code></td>
-   </tr>
-  </tbody>
- </table>
- Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>repeat</code></td>
-    <td>L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire.</td>
-   </tr>
-   <tr>
-    <td><code>space</code></td>
-    <td>L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété {{cssxref("background-position")}} est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où <code>space</code> est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.</td>
-   </tr>
-   <tr>
-    <td><code>round</code></td>
-    <td>L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place. Ainsi, une image avec une largeur originale de 260px, répétée trois fois, pourra être étirée pour que chaque exemplaire mesure 300 pixels de large, lorsqu'une autre image sera ajoutée, elles seront compressées sur 225 pixels.</td>
-   </tr>
-   <tr>
-    <td><code>no-repeat</code></td>
-    <td>Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété {{cssxref("background-position")}}.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<repeat-style>`
+
+  - : Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><strong>Une seule valeur</strong></td>
+          <td><strong>Équivalent avec deux-valeurs</strong></td>
+        </tr>
+        <tr>
+          <td><code>repeat-x</code></td>
+          <td><code>repeat no-repeat</code></td>
+        </tr>
+        <tr>
+          <td><code>repeat-y</code></td>
+          <td><code>no-repeat repeat</code></td>
+        </tr>
+        <tr>
+          <td><code>repeat</code></td>
+          <td><code>repeat repeat</code></td>
+        </tr>
+        <tr>
+          <td><code>space</code></td>
+          <td><code>space space</code></td>
+        </tr>
+        <tr>
+          <td><code>round</code></td>
+          <td><code>round round</code></td>
+        </tr>
+        <tr>
+          <td><code>no-repeat</code></td>
+          <td><code>no-repeat no-repeat</code></td>
+        </tr>
+      </tbody>
+    </table>
+
+    Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>repeat</code></td>
+          <td>
+            L'image est répétée autant de fois que nécessaire pour recouvrir la zone
+            dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire.
+          </td>
+        </tr>
+        <tr>
+          <td><code>space</code></td>
+          <td>
+            L'image est répétée autant que possible sans rognage. La première et la
+            dernière image sont accolées aux bords de l'élément et des espaces sont
+            repartis de façon égale entre les images. La propriété
+            {{cssxref("background-position")}} est ignorée sauf s'il n'y a
+            qu'une seule image qui puisse être affichée sans être rognée. Le seul
+            cas où <code>space</code> est utilisé et qu'une image est rognée se
+            produit lorsque l'image est trop grande pour être affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>round</code></td>
+          <td>
+            L'image est répétée autant que possible et est étirée si nécessaire afin
+            qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place
+            d'ajouter une image, les autres sont compressées pour lui laisser la
+            place. Ainsi, une image avec une largeur originale de 260px, répétée
+            trois fois, pourra être étirée pour que chaque exemplaire mesure 300
+            pixels de large, lorsqu'une autre image sera ajoutée, elles seront
+            compressées sur 225 pixels.
+          </td>
+        </tr>
+        <tr>
+          <td><code>no-repeat</code></td>
+          <td>
+            Il n'y a aucune répétition de l'image (dès lors, il est possible que
+            toute la zone ne soit pas recouverte par cette image). La position de
+            l'image est définie grâce à la propriété
+            {{cssxref("background-position")}}.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* Commun à tous les DIVS */
+```css
+/* Commun à tous les DIVS */
 ol, li {
   margin: 0;
   padding: 0;
@@ -151,77 +178,57 @@ div {
     background-repeat: repeat-x,
                        repeat-y;
     height: 144px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ol&gt;
-    &lt;li&gt;no-repeat
-        &lt;div class="one"&gt;&lt;/div&gt;
-    &lt;/li&gt;
-    &lt;li&gt;repeat
-        &lt;div class="two"&gt;&lt;/div&gt;
-    &lt;/li&gt;
-    &lt;li&gt;repeat-x
-        &lt;div class="three"&gt;&lt;/div&gt;
-    &lt;/li&gt;
-    &lt;li&gt;repeat-y
-        &lt;div class="four"&gt;&lt;/div&gt;
-    &lt;/li&gt;
-    &lt;li&gt;space
-        &lt;div class="five"&gt;&lt;/div&gt;
-    &lt;/li&gt;
-    &lt;li&gt;round
-        &lt;div class="six"&gt;&lt;/div&gt;
-    &lt;/li&gt;
-    &lt;li&gt;repeat-x, repeat-y (plusieurs images)
-        &lt;div class="seven"&gt;&lt;/div&gt;
-    &lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>Dans cet exemple, chaque élément de la liste illustre une valeur différente de <code>background-repeat</code>.</p>
-
-<p>{{EmbedLiveSample('Exemples', 240, 560)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés <code>space</code> et <code>round</code> sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background-repeat")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Utiliser plusieurs arrières-plans en CSS</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<ol>
+    <li>no-repeat
+        <div class="one"></div>
+    </li>
+    <li>repeat
+        <div class="two"></div>
+    </li>
+    <li>repeat-x
+        <div class="three"></div>
+    </li>
+    <li>repeat-y
+        <div class="four"></div>
+    </li>
+    <li>space
+        <div class="five"></div>
+    </li>
+    <li>round
+        <div class="six"></div>
+    </li>
+    <li>repeat-x, repeat-y (plusieurs images)
+        <div class="seven"></div>
+    </li>
+</ol>
+```
+
+### Résultat
+
+Dans cet exemple, chaque élément de la liste illustre une valeur différente de `background-repeat`.
+
+{{EmbedLiveSample('Exemples', 240, 560)}}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                     | Commentaires                                                                                                                                                                                                                                                                                                            |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}         | {{Spec2('CSS3 Backgrounds')}} | Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés `space` et `round` sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne. |
+| {{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}} | {{Spec2('CSS2.1')}}                 | Aucune modification significative.                                                                                                                                                                                                                                                                                      |
+| {{SpecName('CSS1', '#background-repeat', 'background-repeat')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                                                                                                                                    |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background-repeat")}}
+
+## Voir aussi
+
+- [Utiliser plusieurs arrières-plans en CSS](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
diff --git a/files/fr/web/css/background-size/index.md b/files/fr/web/css/background-size/index.md
index 3ab7be1f5f..71cebb4b98 100644
--- a/files/fr/web/css/background-size/index.md
+++ b/files/fr/web/css/background-size/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/background-size
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>background-size</code></strong> définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.</p>
+La propriété CSS **`background-size`** définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.
 
-<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-size.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente.</p>
-</div>
+> **Note :** L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 background-size: cover;
 background-size: contain;
 
@@ -48,90 +47,75 @@ background-size: 6px, auto, contain;
 background-size: inherit;
 background-size: initial;
 background-size: unset;
-</pre>
-
-<p>La propriété <code>background-size</code> peut être définie de différentes façons :</p>
-
-<ul>
- <li>Avec l'un des mots-clés <code><a href="#contain">contain</a></code> ou <code><a href="#cover">cover</a></code>.</li>
- <li>Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors <code><a href="#auto">auto</a></code> par défaut)</li>
- <li>Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) ou encore <code><a href="#auto">auto</a></code>.</li>
-</ul>
-
-<p>Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}).</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>contain</code></dt>
- <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée.</dd>
- <dt><code>cover</code></dt>
- <dd>Un mot-clé dont le comportement est opposé à celui de <code>contain</code>. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan).</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (<em>padding</em>) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut <code>fixed</code>, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées.</dd>
-</dl>
-
-<h3 id="Dimensions_intrinsèques_et_proportions">Dimensions intrinsèques et proportions</h3>
-
-<p>Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles :</p>
-
-<ul>
- <li>Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques.</li>
- <li>Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions.</li>
- <li>Un dégradé CSS (cf. {{cssxref("&lt;gradient&gt;")}}) ne possède ni dimension ni proportion intrinsèque.</li>
- <li>Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur.</li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Le comportement associé aux dégradés (<code>&lt;gradient&gt;</code>) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan.</p>
-</div>
-
-<div class="note">
-<p><strong>Note :</strong> Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard.</p>
-</div>
-
-<p>Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :</p>
-
-<ul>
- <li><p>Si les deux composants de <code>background-size</code> sont définis et qu'aucun ne vaut <code>auto</code> : L'image utilise la taille définie.</p></li>
- <li><p>Si <code>background-size</code> vaut <code>contain</code> ou <code>cover</code> : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.</p></li>
- <li><p>Si <code>background-size</code> vaut <code>auto</code> ou <code>auto auto</code> :</p>
- <ul>
-  <li>Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.</li>
-  <li>Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.</li>
-  <li>Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur <code>contain</code> avait été utilisée.</li>
-  <li>Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion.</li>
-  <li>Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan.</li>
- </ul>
- <div class="note"><p><strong>Note :</strong> Les images SVG peuvent contenir un attribut <code><a href="/fr/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> pour lequel la valeur par défaut est équivalente à <code>contain</code>. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour <code>background-size</code> permet d'ignorer <code>preserveAspectRatio</code>.</p></div>
-</li>
- <li><p>Si <code>background-size</code> possède une composante <code>auto</code> et que l'autre composante est différente de <code>auto</code> :</p>
- <ul>
-  <li>Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.</li>
-  <li>Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.</li>
- </ul>
- </li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.</p>
-</div>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `background-size` peut être définie de différentes façons :
+
+- Avec l'un des mots-clés [`contain`](#contain) ou [`cover`](#cover).
+- Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors [`auto`](#auto) par défaut)
+- Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) ou encore [`auto`](#auto).
+
+Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}).
+
+### Valeurs
+
+- `contain`
+  - : Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée.
+- `cover`
+  - : Un mot-clé dont le comportement est opposé à celui de `contain`. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan).
+- `auto`
+  - : Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.
+- `<length>`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.
+- `<percentage>`
+  - : Une valeur de type {{cssxref("&lt;percentage&gt;")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (_padding_) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut `fixed`, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées.
+
+### Dimensions intrinsèques et proportions
+
+Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles :
+
+- Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques.
+- Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions.
+- Un dégradé CSS (cf. {{cssxref("&lt;gradient&gt;")}}) ne possède ni dimension ni proportion intrinsèque.
+- Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur.
+
+> **Note :** Le comportement associé aux dégradés (`<gradient>`) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan.
+
+> **Note :** Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard.
+
+Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :
+
+- Si les deux composants de `background-size` sont définis et qu'aucun ne vaut `auto` : L'image utilise la taille définie.
+- Si `background-size` vaut `contain` ou `cover` : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.
+- Si `background-size` vaut `auto` ou `auto auto` :
+
+  - Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.
+  - Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.
+  - Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur `contain` avait été utilisée.
+  - Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion.
+  - Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan.
+
+  > **Note :** Les images SVG peuvent contenir un attribut [`preserveAspectRatio`](/fr/docs/Web/SVG/Attribute/preserveAspectRatio) pour lequel la valeur par défaut est équivalente à `contain`. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour `background-size` permet d'ignorer `preserveAspectRatio`.
+
+- Si `background-size` possède une composante `auto` et que l'autre composante est différente de `auto` :
+
+  - Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.
+  - Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.
+
+> **Note :** Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="cover_2"><code>cover</code></h3>
+### `cover`
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   height: 300px;
   width: 200px;
   background-color: palegreen;
@@ -141,21 +125,25 @@ background-size: unset;
 
 .exemple_cover {
   background-size: cover;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="exemple_cover"&gt;&lt;/div&gt;</pre>
+```html
+<div class="exemple_cover"></div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("cover","200","300")}}</p>
+{{EmbedLiveSample("cover","200","300")}}
 
-<h3 id="contain_2"><code>contain</code></h3>
+### `contain`
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   height: 300px;
   width: 200px;
   background-color: palegreen;
@@ -165,21 +153,25 @@ background-size: unset;
 
 .exemple_cover {
   background-size: contain;
-}</pre>
+}
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="exemple_cover"&gt;&lt;/div&gt;</pre>
+```html
+<div class="exemple_cover"></div>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("contain","200","300")}}</p>
+{{EmbedLiveSample("contain","200","300")}}
 
-<h3 id="auto_50"><code>auto 50%</code></h3>
+### `auto 50%`
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   height: 300px;
   width: 200px;
   background-color: palegreen;
@@ -189,21 +181,25 @@ background-size: unset;
 
 .exemple_cover {
   background-size: auto 50%;
-}</pre>
+}
+```
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="exemple_cover"&gt;&lt;/div&gt;</pre>
+```html
+<div class="exemple_cover"></div>
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("auto_50","200","300")}}</p>
+{{EmbedLiveSample("auto_50","200","300")}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Si on utilise un dégradé (<code>&lt;gradient&gt;</code>) comme arrière-plan et qu'on définit une valeur associée pour la propriété <code>background-size</code>, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant <code>auto</code> ou qu'une seule largeur (par exemple <code>background-size: 50%</code>). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la <a href="https://www.w3.org/TR/css3-background/#the-background-size">spécification CSS3 pour <code>background-size</code></a> et <a href="https://dev.w3.org/csswg/css3-images/#gradients">la spécification CSS3 pour les images qui sont des dégradés</a>).</p>
+Si on utilise un dégradé (`<gradient>`) comme arrière-plan et qu'on définit une valeur associée pour la propriété `background-size`, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant `auto` ou qu'une seule largeur (par exemple `background-size: 50%`). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la [spécification CSS3 pour `background-size`](https://www.w3.org/TR/css3-background/#the-background-size) et [la spécification CSS3 pour les images qui sont des dégradés](https://dev.w3.org/csswg/css3-images/#gradients)).
 
-<pre class="brush: css">.gradient-exemple {
+```css
+.gradient-exemple {
   width: 50px;
   height: 100px;
   background-image: linear-gradient(blue, red);
@@ -218,39 +214,24 @@ background-size: unset;
   background-size: 25px 50px;
   background-size: 50% 50%;
 }
-</pre>
-
-<p>On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec <code>auto</code> lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background-size")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images">Redimensionner les images d'arrière-plan</a></li>
- <li><a href="/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds">Redimensionner les arrière-plans SVG</a></li>
- <li>{{cssxref("object-fit")}}</li>
-</ul>
+```
+
+On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec `auto` lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan.
+
+## Spécifications
+
+| Spécification                                                                                        | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background-size")}}
+
+## Voir aussi
+
+- [Redimensionner les images d'arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images)
+- [Redimensionner les arrière-plans SVG](/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds)
+- {{cssxref("object-fit")}}
diff --git a/files/fr/web/css/background/index.md b/files/fr/web/css/background/index.md
index a404e63da6..a5ab39b7e0 100644
--- a/files/fr/web/css/background/index.md
+++ b/files/fr/web/css/background/index.md
@@ -7,150 +7,122 @@ tags:
   - Reference
 translation_of: Web/CSS/background
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>background</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).</p>
+La propriété CSS **`background`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).
 
-<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background.html")}}
 
-<p>Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.</p>
+Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.
 
-<p>Lorsqu'on utilise la propriété raccourcie <code>background</code>, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.</p>
+Lorsqu'on utilise la propriété raccourcie `background`, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.
 
-<div class="note">
-<p><strong>Note :</strong> La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément.</p>
-</div>
+> **Note :** La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* On utilise une couleur &lt;background-color&gt; */
+```css
+/* On utilise une couleur <background-color> */
 background: green;
 
-/* Ici, une &lt;bg-image&gt; avec &lt;repeat-style&gt; */
+/* Ici, une <bg-image> avec <repeat-style> */
 background: url("test.jpg") repeat-y;
 
-/* Là &lt;box&gt; et &lt;background-color&gt; */
+/* Là <box> et <background-color> */
 background: border-box red;
 
 /* Ici on utilise une seule image, centrée */
 /* et remise à l'échelle */
 background: no-repeat center/80% url("../img/image.png");
-</pre>
-
-<p>La propriété <code>background</code> permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec :</p>
-
-<ul>
- <li>Zéro ou une occurence d'une valeur :
-  <ul>
-   <li><code><a href="#&lt;attachment>">&lt;attachment&gt;</a></code></li>
-   <li><code><a href="#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
-   <li><code><a href="#&lt;position>">&lt;position&gt;</a></code></li>
-   <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
-   <li><code><a href="#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
-  </ul>
- </li>
- <li>Une valeur <code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code> qui peut uniquement être utilisée directement après une valeur <code><a href="#&lt;position>">&lt;position&gt;</a></code> suivie d'une barre oblique (par exemple "<code>center/80%</code>")</li>
- <li>Une valeur <code><a href="#&lt;box>">&lt;box&gt;</a></code> présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}.</li>
- <li>Une valeur <code><a href="#&lt;background-color>">&lt;background-color&gt;</a></code> qui peut uniquement être incluse pour la dernière couche qui est définie.</li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;attachment&gt;</code></dt>
- <dd>Voir {{cssxref("background-attachment")}}</dd>
- <dt><code>&lt;box&gt;</code></dt>
- <dd>Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}}</dd>
- <dt><code>&lt;background-color&gt;</code></dt>
- <dd>Voir {{cssxref("background-color")}}</dd>
- <dt><code>&lt;bg-image&gt;</code></dt>
- <dd>Voir {{Cssxref("background-image")}}</dd>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Voir {{cssxref("background-position")}}</dd>
- <dt><code>&lt;repeat-style&gt;</code></dt>
- <dd>Voir {{cssxref("background-repeat")}}</dd>
- <dt><code>&lt;bg-size&gt;</code></dt>
- <dd>Voir {{cssxref("background-size")}}.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `background` permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec :
+
+- Zéro ou une occurence d'une valeur :
+
+  - [`<attachment>`](#<attachment>)
+  - [`<bg-image>`](#<bg-image>)
+  - [`<position>`](#<position>)
+  - [`<bg-size>`](#<bg-size>)
+  - [`<repeat-style>`](#<repeat-style>)
+
+- Une valeur [`<bg-size>`](#<bg-size>) qui peut uniquement être utilisée directement après une valeur [`<position>`](#<position>) suivie d'une barre oblique (par exemple "`center/80%`")
+- Une valeur [`<box>`](#<box>) présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}.
+- Une valeur [`<background-color>`](#<background-color>) qui peut uniquement être incluse pour la dernière couche qui est définie.
+
+### Valeurs
+
+- `<attachment>`
+  - : Voir {{cssxref("background-attachment")}}
+- `<box>`
+  - : Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}}
+- `<background-color>`
+  - : Voir {{cssxref("background-color")}}
+- `<bg-image>`
+  - : Voir {{Cssxref("background-image")}}
+- `<position>`
+  - : Voir {{cssxref("background-position")}}
+- `<repeat-style>`
+  - : Voir {{cssxref("background-repeat")}}
+- `<bg-size>`
+  - : Voir {{cssxref("background-size")}}.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="banniere"&gt;
-  Dessine-moi une étoile&lt;br/&gt;
-  Qui brille&lt;br/&gt;
+```html
+<p class="banniere">
+  Dessine-moi une étoile<br/>
+  Qui brille<br/>
   Dans le ciel.
-&lt;/p&gt;
-&lt;p class="attention"&gt;Voici un paragraphe !&lt;p&gt;</pre>
+</p>
+<p class="attention">Voici un paragraphe !<p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.attention {
+```css
+.attention {
   background: pink;
 }
 
 .banniere {
   background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre la règle 1.1 du WCAG</a></li>
- <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères pour 1.1.1, comprendre WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Pas de modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.background")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("box-decoration-break")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Les gradients</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Gérer plusieurs arrière-plans</a></li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Accessibilité
+
+Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.
+
+- [Comprendre la règle 1.1 du WCAG](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [Comprendre les critères pour 1.1.1, comprendre WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                                                                                                                                                                                                                                   |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}     | {{Spec2('CSS3 Backgrounds')}} | La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. |
+| {{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}} | {{Spec2('CSS2.1')}}                 | Pas de modification significative.                                                                                                                                                                                                             |
+| {{SpecName('CSS1', '#background', 'background')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                                                           |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.background")}}
+
+## Voir aussi
+
+- {{cssxref("box-decoration-break")}}
+- [Les gradients](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
diff --git a/files/fr/web/css/basic-shape/index.md b/files/fr/web/css/basic-shape/index.md
index 0205f6ff16..759f147f5e 100644
--- a/files/fr/web/css/basic-shape/index.md
+++ b/files/fr/web/css/basic-shape/index.md
@@ -7,132 +7,134 @@ tags:
   - Type
 translation_of: Web/CSS/basic-shape
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type <strong><code>&lt;basic-shape&gt;</code></strong> permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}.</p>
+Le type **`<basic-shape>`** permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div>
+{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Lorsque cette syntaxe est utilisée pour définir des formes, la boîte de référence sera indiquée par chaque propriété qui utilise des valeurs <code>&lt;basic-shape&gt;</code>. L'origine du repère utilisé se situe dans le coin en haut à gauche de la boîte de référence avec un axe des abscisses allant vers la droite et un axe des ordonnées allant vers le bas. Toutes les longueurs exprimées en pourcentages sont calculées en fonction des dimensions de la boîte de référence.</p>
+Lorsque cette syntaxe est utilisée pour définir des formes, la boîte de référence sera indiquée par chaque propriété qui utilise des valeurs `<basic-shape>`. L'origine du repère utilisé se situe dans le coin en haut à gauche de la boîte de référence avec un axe des abscisses allant vers la droite et un axe des ordonnées allant vers le bas. Toutes les longueurs exprimées en pourcentages sont calculées en fonction des dimensions de la boîte de référence.
 
-<p>Les formes qui suivent sont prises en charge. Toutes les valeurs <code>&lt;basic-shape&gt;</code> sont créées via une notation fonctionnelle (pour analyser la syntaxe, se référer à <a href="/fr/docs/Web/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs">cette page explicative</a>).</p>
+Les formes qui suivent sont prises en charge. Toutes les valeurs `<basic-shape>` sont créées via une notation fonctionnelle (pour analyser la syntaxe, se référer à [cette page explicative](/fr/docs/Web/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs)).
 
-<dl>
- <dt><code>inset()</code></dt>
- <dd>
-   <p>Cette fonction permet de définir un rectangle incrusté (<em>inset</em>).</p>
- <pre class="syntaxbox">inset( &lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;]? )</pre>
+- `inset()`
 
- <p>Lorsque les quatre premiers arguments sont fournis, ils représentent respectivement les décalages, vers l'intérieur, depuis les côtés haut, droit, bas et gauche par rapport à la boîte de référence. Ces arguments peuvent être utilisés de la même façon que pour {{cssxref("margin")}} afin d'utiliser seulement une, deux ou quatre valeurs.</p>
+  - : Cette fonction permet de définir un rectangle incrusté (_inset_).
 
- <p>L'argument facultatif <code>&lt;border-radius&gt;</code> permet de définir des coins arrondis pour le rectangle incrusté en utilisant la même syntaxe que pour la propriété raccourcie {{cssxref("border-radius")}}.</p>
+        inset( <shape-arg>{1,4} [round <border-radius>]? )
 
- <p>Si on utilise deux valeurs de décalage pour le même axe (par exemple un décalage depuis le bas et un décalage depuis le haut) dont la somme est supérieure à la dimension de la boîte sur cet axe, la forme obtenue ne contiendra aucune zone. On aura alors une zone de flottement vide.</p>
- </dd>
- <dt><code>polygon()</code></dt>
- <dd>
-   <p>Définit un polygone.</p>
- <pre class="syntaxbox">polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</pre>
+    Lorsque les quatre premiers arguments sont fournis, ils représentent respectivement les décalages, vers l'intérieur, depuis les côtés haut, droit, bas et gauche par rapport à la boîte de référence. Ces arguments peuvent être utilisés de la même façon que pour {{cssxref("margin")}} afin d'utiliser seulement une, deux ou quatre valeurs.
 
- <p><code>&lt;fill-rule&gt;</code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du polygone. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut pour cet argument est <code>nonzero</code>.</p>
+    L'argument facultatif `<border-radius>` permet de définir des coins arrondis pour le rectangle incrusté en utilisant la même syntaxe que pour la propriété raccourcie {{cssxref("border-radius")}}.
 
- <p>Ensuite, chaque paire d'arguments dans la liste représente les coordonnées <em>xi</em> et <em>yi</em> du i-ème sommet du polygone.</p>
- </dd>
- <dt><code>circle(</code>)</dt>
- <dd>
-  <p>Définit un cercle.</p>
- <pre class="syntaxbox">circle( [&lt;shape-radius&gt;]? [at &lt;position&gt;]? )</pre>
+    Si on utilise deux valeurs de décalage pour le même axe (par exemple un décalage depuis le bas et un décalage depuis le haut) dont la somme est supérieure à la dimension de la boîte sur cet axe, la forme obtenue ne contiendra aucune zone. On aura alors une zone de flottement vide.
 
- <p>L'argument <code>&lt;shape-radius&gt;</code> représente le rayon du cercle. Les valeurs négatives ne sont pas autorisées et les valeurs exprimées en pourcentages seront calculées de la façon suivante en fonction de la hauteur et de la largeur de la boîte de référence <code>sqrt(largeur^2+hauteur^2)/sqrt(2)</code>.</p>
+- `polygon()`
 
- <p>L'argument {{cssxref("&lt;position&gt;")}} définit la position pour le centre du cercle. La valeur par défaut est <code>center</code>.</p>
- </dd>
- <dt><code>ellipse()</code></dt>
- <dd>
-  <p>Définit une ellipse.</p>
- <pre class="syntaxbox">ellipse( [&lt;shape-radius&gt;{2}]? [at &lt;position&gt;]? )</pre>
+  - : Définit un polygone.
 
- <p>Les arguments <code>&lt;shape-radius&gt;</code> représentent les demi-axes horizontaux (r<sub>x</sub>) et verticaux (r<sub>y</sub>) de l'ellipse. Les valeurs négatives ne sont pas autorisées. Les valeurs exprimées en pourcentages sont calculées : en fonction de la hauteur de la boîte de référence pour le demi-axe vertical, en fonction de la largeur de la boîte de référence pour le demi-axe horizontal.</p>
+        polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
 
- <p>L'argument {{cssxref("&lt;position&gt;")}} définit l'emplacement du centre de l'ellipse. La valeur par défaut est <code>center</code>.</p>
- </dd>
- <dt><code>path()</code></dt>
- <dd>
-  <p>Définit un chemin.</p>
- <pre class="syntaxbox"><code>path( [&lt;fill-rule&gt;,]? &lt;string&gt;)</code></pre>
+    `<fill-rule>` représente [la règle de remplissage](/fr/docs/Web/SVG/Attribute/fill-rule) utilisée pour déterminer l'intérieur du polygone. Les valeurs possibles sont `nonzero` et `evenodd`. La valeur par défaut pour cet argument est `nonzero`.
 
- <p>L'argument optionnel <code>&lt;fill-rule&gt;</code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du chemin. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut est <code>nonzero</code>.</p>
+    Ensuite, chaque paire d'arguments dans la liste représente les coordonnées _xi_ et _yi_ du i-ème sommet du polygone.
 
- <p>L'argument obligatoire <code>&lt;string&gt;</code> est une chaîne de caractères, entre quotes, représentant <a href="/fr/docs/Web/SVG/Attribute/d">un chemin SVG</a>.</p>
- </dd>
-</dl>
+- `circle(`)
 
-<p>Les arguments qui ne sont pas définis ci-avant suivent cette syntaxe :</p>
+  - : Définit un cercle.
 
-<pre class="syntaxbox">&lt;shape-arg&gt; = &lt;length&gt; | &lt;percentage&gt;
-&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | closest-side | farthest-side</pre>
+        circle( [<shape-radius>]? [at <position>]? )
 
-<p><code>closest-side</code> utilise la distance entre le centre de la forme et le côté le plus proche de la boîte de la référence. Pour les cercles, cela au côté le plus proche dans les deux axes. Pour les ellipses, cela correspond au côté le plus proche dans l'axe du rayon de l'ellipse.</p>
+    L'argument `<shape-radius>` représente le rayon du cercle. Les valeurs négatives ne sont pas autorisées et les valeurs exprimées en pourcentages seront calculées de la façon suivante en fonction de la hauteur et de la largeur de la boîte de référence `sqrt(largeur^2+hauteur^2)/sqrt(2)`.
 
-<p>À l'inverse, <code>farthest-side</code> utilise la distance entre le centre de la forme et le côté le plus éloigné de la boîte de référence.</p>
+    L'argument {{cssxref("&lt;position&gt;")}} définit la position pour le centre du cercle. La valeur par défaut est `center`.
 
-<h2 id="Les_valeurs_calculées_des_formes_simples">Les valeurs calculées des formes simples</h2>
+- `ellipse()`
 
-<p>Les valeurs d'une fonction <code>&lt;basic-shape&gt;</code> sont calculées comme indiqué, avec ces exceptions :</p>
+  - : Définit une ellipse.
 
-<ul>
- <li>Les valeurs absentes sont incluses et leurs valeurs calculées sont leurs valeurs par défaut.</li>
- <li>Une valeur {{cssxref("&lt;position&gt;")}} pour <code>circle()</code> ou  <code>ellipse()</code> est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage.</li>
- <li>Pour <code>inset()</code>, une valeur {{cssxref("border-radius")}} est calculée comme une liste développée de de huit valeurs {{cssxref("length")}} ou de huit pourcentages.</li>
-</ul>
+        ellipse( [<shape-radius>{2}]? [at <position>]? )
 
-<h2 id="L'interpolation_des_formes_simples">L'interpolation des formes simples</h2>
+    Les arguments `<shape-radius>` représentent les demi-axes horizontaux (r<sub>x</sub>) et verticaux (r<sub>y</sub>) de l'ellipse. Les valeurs négatives ne sont pas autorisées. Les valeurs exprimées en pourcentages sont calculées : en fonction de la hauteur de la boîte de référence pour le demi-axe vertical, en fonction de la largeur de la boîte de référence pour le demi-axe horizontal.
 
-<div>Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme <a href="/fr/docs/Web/CSS/length">des longueurs</a>, <a href="/fr/docs/Web/CSS/percentage">des pourcentages</a> ou <a href="/fr/docs/Web/CSS/calc()">des valeurs calculées</a> lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.</div>
+    L'argument {{cssxref("&lt;position&gt;")}} définit l'emplacement du centre de l'ellipse. La valeur par défaut est `center`.
 
-<div> </div>
+- `path()`
 
-<ul>
- <li>Les deux formes doivent partager la même boîte de référence.</li>
- <li>Si les deux formes sont du même type et que ce type est <code>ellipse()</code> ou <code>circle()</code>, qu'aucun des rayons n'utilise les mots-clés <code>closest-side</code> ou <code>farthest-side</code>, on aura une interpolation entre chaque valeur.</li>
- <li>Si les deux formes sont de type <code>inset()</code>, on aura une interpolation entre chaque valeur.</li>
- <li>Si les deux formes sont de type <code>polygon()</code>, que les deux polygones possèdent le même nombre de sommets et utilisent la même règle <code>fill-rule</code>, l'interpolation sera appliquée entre chaque valeur.</li>
- <li>Si les deux formes sont de type <code>path()</code>, que les deux chemins possèdent le même nombre de composantes, dans le même ordre et qu'elles sont de même type, les données sont interpolées entre chaque chemin comme des nombres réels.</li>
- <li>Dans les autres cas, aucune interpolation n'est définie.</li>
-</ul>
+  - : Définit un chemin.
 
-<h2 id="Exemples">Exemples</h2>
+        path( [<fill-rule>,]? <string>)
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+    L'argument optionnel `<fill-rule>` représente [la règle de remplissage](/fr/docs/Web/SVG/Attribute/fill-rule) utilisée pour déterminer l'intérieur du chemin. Les valeurs possibles sont `nonzero` et `evenodd`. La valeur par défaut est `nonzero`.
 
-<h4 id="CSS">CSS</h4>
+    L'argument obligatoire `<string>` est une chaîne de caractères, entre quotes, représentant [un chemin SVG](/fr/docs/Web/SVG/Attribute/d).
 
-<pre class="brush: css">.clipped {
+Les arguments qui ne sont pas définis ci-avant suivent cette syntaxe :
+
+    <shape-arg> = <length> | <percentage>
+    <shape-radius> = <length> | <percentage> | closest-side | farthest-side
+
+`closest-side` utilise la distance entre le centre de la forme et le côté le plus proche de la boîte de la référence. Pour les cercles, cela au côté le plus proche dans les deux axes. Pour les ellipses, cela correspond au côté le plus proche dans l'axe du rayon de l'ellipse.
+
+À l'inverse, `farthest-side` utilise la distance entre le centre de la forme et le côté le plus éloigné de la boîte de référence.
+
+## Les valeurs calculées des formes simples
+
+Les valeurs d'une fonction `<basic-shape>` sont calculées comme indiqué, avec ces exceptions :
+
+- Les valeurs absentes sont incluses et leurs valeurs calculées sont leurs valeurs par défaut.
+- Une valeur {{cssxref("&lt;position&gt;")}} pour `circle()` ou  `ellipse()` est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage.
+- Pour `inset()`, une valeur {{cssxref("border-radius")}} est calculée comme une liste développée de de huit valeurs {{cssxref("length")}} ou de huit pourcentages.
+
+## L'interpolation des formes simples
+
+Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme [des longueurs](/fr/docs/Web/CSS/length), [des pourcentages](/fr/docs/Web/CSS/percentage) ou [des valeurs calculées](</fr/docs/Web/CSS/calc()>) lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.
+
+- Les deux formes doivent partager la même boîte de référence.
+- Si les deux formes sont du même type et que ce type est `ellipse()` ou `circle()`, qu'aucun des rayons n'utilise les mots-clés `closest-side` ou `farthest-side`, on aura une interpolation entre chaque valeur.
+- Si les deux formes sont de type `inset()`, on aura une interpolation entre chaque valeur.
+- Si les deux formes sont de type `polygon()`, que les deux polygones possèdent le même nombre de sommets et utilisent la même règle `fill-rule`, l'interpolation sera appliquée entre chaque valeur.
+- Si les deux formes sont de type `path()`, que les deux chemins possèdent le même nombre de composantes, dans le même ordre et qu'elles sont de même type, les données sont interpolées entre chaque chemin comme des nombres réels.
+- Dans les autres cas, aucune interpolation n'est définie.
+
+## Exemples
+
+### Exemple simple
+
+#### CSS
+
+```css
+.clipped {
   clip-path: circle(15px at 20px 20px); // bugs 1247229 / 1075457 pour Firefox
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;img class="clipped" src="https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg" alt="Rain Drops"&gt;
-</pre>
+```html
+<img class="clipped" src="https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg" alt="Rain Drops">
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_simple',"500","500")}}</p>
+{{EmbedLiveSample('Exemple_simple',"500","500")}}
 
-<h3 id="Polygone_animé">Polygone animé</h3>
+### Polygone animé
 
-<p>Dans cet exemple, on utilise la règle-@ {{cssxref("@keyframes")}} afin d'animer un chemin de rognage entre deux polygones. On notera que les deux polygones ont le même nombre de sommets, une condition nécessaire pour que l'animation fonctionne.</p>
+Dans cet exemple, on utilise la règle-@ {{cssxref("@keyframes")}} afin d'animer un chemin de rognage entre deux polygones. On notera que les deux polygones ont le même nombre de sommets, une condition nécessaire pour que l'animation fonctionne.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;&lt;/div&gt;</pre>
+```html
+<div></div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 300px;
   height: 300px;
   background: red;
@@ -150,39 +152,25 @@ translation_of: Web/CSS/basic-shape
   to {
     clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
   }
-}</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('Polygone_animé','100%', '340')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Shapes', '#basic-shape-functions', '&lt;basic-shape&gt;')}}</td>
-   <td>{{Spec2('CSS Shapes')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.basic-shape")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("clip-path")}}</li>
- <li>{{cssxref("shape-outside")}}</li>
- <li><a href="/fr/docs/Outils/Inspecteur/Comment/Edit_CSS_shapes">Éditer des contours de formes CSS avec les outils de développement Firefox</a></li>
-</ul>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Polygone_animé','100%', '340')}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS Shapes', '#basic-shape-functions', '&lt;basic-shape&gt;')}} | {{Spec2('CSS Shapes')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.basic-shape")}}
+
+## Voir aussi
+
+- {{cssxref("clip-path")}}
+- {{cssxref("shape-outside")}}
+- [Éditer des contours de formes CSS avec les outils de développement Firefox](/fr/docs/Outils/Inspecteur/Comment/Edit_CSS_shapes)
diff --git a/files/fr/web/css/blend-mode/index.md b/files/fr/web/css/blend-mode/index.md
index cd83ad75cd..206ef8ee2f 100644
--- a/files/fr/web/css/blend-mode/index.md
+++ b/files/fr/web/css/blend-mode/index.md
@@ -7,349 +7,363 @@ tags:
   - Type
 translation_of: Web/CSS/blend-mode
 ---
-<div>{{CSSRef}}</div>
-
-<p>Le type <strong><code>&lt;blend-mode&gt;</code></strong> est un ensemble de mots-clés qui permettent de décrire les différents modes de fusion (<em>blend modes</em>). Ce type de valeur est utilisé pour les propriétés {{cssxref("background-blend-mode")}} et {{cssxref("mix-blend-mode")}}.</p>
-
-<p>Un mode de fusion est une méthode de calcul permettant de déterminer la couleur finale d'un pixel lorsque plusieurs couches sont empilées. Chaque mode de fusion prend en entrée la couleur du premier plan et de l'arrière-plan (dans cet ordre) pour calculer la valeur de la couleur obtenue. Le résultat final est la couche visible obtenue lorsque les différents plans ont été fusionnés avec les modes de fusion.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Une valeur de type de données <code>&lt;blend-mode&gt;</code> s'écrit avec l'un des mots-clés suivants.</p>
-
-<h3 id="Valeurs_possibles">Valeurs possibles</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>
- <p>La couleur finale obtenue est la couleur du premier plan, quelle que soit la couleur de l'arrière-plan. On obtient ainsi un effet similaire à la superposition de deux feuilles de papier opaques.</p>
- </dd>
- <dt><code>multiply</code></dt>
- <dd>
- <p>La couleur finale est obtenue en multipliant les couleurs du premier plan et de l'arrière-plan.<br>
-  Si une des couches est noire, le résultat obtenu sera une image noire. Si une des couches est blanche, cela ne modifiera pas l'autre image. On obtient ainsi un effet semblable à la superposition de deux transparents.</p>
- </dd>
- <dt><code>screen</code></dt>
- <dd>
- <p>La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.</p>
- </dd>
- <dt><code>overlay</code></dt>
- <dd>La couleur finale est celle décrite par <code>multiply</code> si l'arrière-plan est plus sombre ou de <code>screen</code> si elle est plus claire. On a un effet semblable à <code>hard-light</code> avec les couches interverties.
- </dd>
- <dt><code>darken</code></dt>
- <dd>
- <p>La couleur finale est la couleur la plus sombre des deux couches.</p>
- </dd>
- <dt><code>lighten</code></dt>
- <dd>
- <p>La couleur finale est la couleur la plus claire des deux couches.</p>
- </dd>
- <dt><code>color-dodge</code></dt>
- <dd>
- <p>La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.<br>
-  Un premier-plan noir n'entraînera aucun changement.</p>
- </dd>
- <dt><code>color-burn</code></dt>
- <dd>
- <p>La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.</p>
- </dd>
- <dt><code>hard-light</code></dt>
- <dd>
- <p>La couleur finale est le résultat de <code>multiply</code> si le premier plan est plus sombre ou de <code>screen</code> si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à <code>overlay</code> avec les deux couches interverties.</p>
- </dd>
- <dt><code>soft-light</code></dt>
- <dd>
- <p>La couleur finale obtenue est semblable à <code>hard-light</code>, mais est plus douce<em><code>.</code></em></p>
- </dd>
- <dt><code>difference</code></dt>
- <dd>
- <p>La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.</p>
- </dd>
- <dt><code>exclusion</code></dt>
- <dd>
- <p>La couleur finale obtenue est semblable à <code>difference</code> avec moins de contraste. Comme pour <code>difference</code>, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.</p>
- </dd>
- <dt><code>hue</code></dt>
- <dd>
- <p>La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.</p>
- </dd>
- <dt><code>saturation</code></dt>
- <dd>
- <p>La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.</p>
- </dd>
- <dt><code>color</code></dt>
- <dd>
- <p>La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.</p>
- </dd>
- <dt><code>luminosity</code></dt>
- <dd>
- <p>La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.</p>
- </dd>
-</dl>
-
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="normal">normal</h3>
-
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
+{{CSSRef}}
+
+Le type **`<blend-mode>`** est un ensemble de mots-clés qui permettent de décrire les différents modes de fusion (_blend modes_). Ce type de valeur est utilisé pour les propriétés {{cssxref("background-blend-mode")}} et {{cssxref("mix-blend-mode")}}.
+
+Un mode de fusion est une méthode de calcul permettant de déterminer la couleur finale d'un pixel lorsque plusieurs couches sont empilées. Chaque mode de fusion prend en entrée la couleur du premier plan et de l'arrière-plan (dans cet ordre) pour calculer la valeur de la couleur obtenue. Le résultat final est la couche visible obtenue lorsque les différents plans ont été fusionnés avec les modes de fusion.
+
+## Syntaxe
+
+Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés suivants.
+
+### Valeurs possibles
+
+- `normal`
+  - : La couleur finale obtenue est la couleur du premier plan, quelle que soit la couleur de l'arrière-plan. On obtient ainsi un effet similaire à la superposition de deux feuilles de papier opaques.
+- `multiply`
+  - : La couleur finale est obtenue en multipliant les couleurs du premier plan et de l'arrière-plan.
+    Si une des couches est noire, le résultat obtenu sera une image noire. Si une des couches est blanche, cela ne modifiera pas l'autre image. On obtient ainsi un effet semblable à la superposition de deux transparents.
+- `screen`
+  - : La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.
+- `overlay`
+  - : La couleur finale est celle décrite par `multiply` si l'arrière-plan est plus sombre ou de `screen` si elle est plus claire. On a un effet semblable à `hard-light` avec les couches interverties.
+- `darken`
+  - : La couleur finale est la couleur la plus sombre des deux couches.
+- `lighten`
+  - : La couleur finale est la couleur la plus claire des deux couches.
+- `color-dodge`
+  - : La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.
+    Un premier-plan noir n'entraînera aucun changement.
+- `color-burn`
+  - : La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.
+- `hard-light`
+  - : La couleur finale est le résultat de `multiply` si le premier plan est plus sombre ou de `screen` si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à `overlay` avec les deux couches interverties.
+- `soft-light`
+  - : La couleur finale obtenue est semblable à `hard-light`, mais est plus douce*`.`*
+- `difference`
+  - : La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.
+- `exclusion`
+  - : La couleur finale obtenue est semblable à `difference` avec moins de contraste. Comme pour `difference`, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.
+- `hue`
+  - : La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.
+- `saturation`
+  - : La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.
+- `color`
+  - : La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.
+- `luminosity`
+  - : La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.
+
+## Exemples
+
+### normal
+
+```html hidden
+<div id="div"></div>
+```
+
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: normal;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('normal', "300", "350") }}</p>
+{{ EmbedLiveSample('normal', "300", "350") }}
 
-<h3 id="multiply">multiply</h3>
+### multiply
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: multiply;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('multiply', "300", "350") }}</p>
+{{ EmbedLiveSample('multiply', "300", "350") }}
 
-<h3 id="screen">screen</h3>
+### screen
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: screen;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('screen', "300", "350") }}</p>
+{{ EmbedLiveSample('screen', "300", "350") }}
 
-<h3 id="overlay">overlay</h3>
+### overlay
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: overlay;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('overlay', "300", "350") }}</p>
+{{ EmbedLiveSample('overlay', "300", "350") }}
 
-<h3 id="darken">darken</h3>
+### darken
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: darken;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('darken', "300", "350") }}</p>
+{{ EmbedLiveSample('darken', "300", "350") }}
 
-<h3 id="lighten">lighten</h3>
+### lighten
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: lighten;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('lighten', "300", "350") }}</p>
+{{ EmbedLiveSample('lighten', "300", "350") }}
 
-<h3 id="color-dodge">color-dodge</h3>
+### color-dodge
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: color-dodge;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('color-dodge', "300", "350") }}</p>
+{{ EmbedLiveSample('color-dodge', "300", "350") }}
 
-<h3 id="color-burn">color-burn</h3>
+### color-burn
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: color-burn;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('color-burn', "300", "350") }}</p>
+{{ EmbedLiveSample('color-burn', "300", "350") }}
 
-<h3 id="hard-light">hard-light</h3>
+### hard-light
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: hard-light;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('hard-light', "300", "350") }}</p>
+{{ EmbedLiveSample('hard-light', "300", "350") }}
 
-<h3 id="soft-light">soft-light</h3>
+### soft-light
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: soft-light;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('soft-light', "300", "350") }}</p>
+{{ EmbedLiveSample('soft-light', "300", "350") }}
 
-<h3 id="difference">difference</h3>
+### difference
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: difference;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('difference', "300", "350") }}</p>
+{{ EmbedLiveSample('difference', "300", "350") }}
 
-<h3 id="exclusion">exclusion</h3>
+### exclusion
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: exclusion;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('exclusion', "300", "350") }}</p>
+{{ EmbedLiveSample('exclusion', "300", "350") }}
 
-<h3 id="hue">hue</h3>
+### hue
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: hue;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('hue', "300", "350") }}</p>
+{{ EmbedLiveSample('hue', "300", "350") }}
 
-<h3 id="saturation">saturation</h3>
+### saturation
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: saturation;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('saturation', "300", "350") }}</p>
+{{ EmbedLiveSample('saturation', "300", "350") }}
 
-<h3 id="color">color</h3>
+### color
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: color;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('color', "300", "350") }}</p>
+{{ EmbedLiveSample('color', "300", "350") }}
 
-<h3 id="luminosity">luminosity</h3>
+### luminosity
 
- <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div id="div"></div>
+```
 
- <pre class="brush: css">#div {
+```css
+#div {
   width: 300px;
   height: 300px;
   background: url('br.png'),
               url('tr.png');
   background-blend-mode: luminosity;
-}</pre>
-
-<p>{{ EmbedLiveSample('luminosity', "300", "350") }}</p>
-
-<h2 id="L'interpolation_des_modes_de_fusion">L'interpolation des modes de fusion</h2>
-
-<p>Il n'y a pas d'interpolation pour les modes de fusion. Toute transition se produit brutalement.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;')}}</td>
-   <td>{{Spec2('Compositing')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.blend-mode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés utilisant des valeurs de ce type :
-  <ul>
-   <li>{{cssxref("background-blend-mode")}}</li>
-   <li>{{cssxref("mix-blend-mode")}}</li>
-  </ul>
- </li>
- <li><a href="https://en.wikipedia.org/wiki/Blend_modes">Les modes de fusion sur Wikipédia (en anglais)</a></li>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
-</ul>
+}
+```
+
+{{ EmbedLiveSample('luminosity', "300", "350") }}
+
+## L'interpolation des modes de fusion
+
+Il n'y a pas d'interpolation pour les modes de fusion. Toute transition se produit brutalement.
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;')}} | {{Spec2('Compositing')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.blend-mode")}}
+
+## Voir aussi
+
+- Les propriétés utilisant des valeurs de ce type :
+
+  - {{cssxref("background-blend-mode")}}
+  - {{cssxref("mix-blend-mode")}}
+
+- [Les modes de fusion sur Wikipédia (en anglais)](https://en.wikipedia.org/wiki/Blend_modes)
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
diff --git a/files/fr/web/css/block-size/index.md b/files/fr/web/css/block-size/index.md
index 4ed59048b2..e669281858 100644
--- a/files/fr/web/css/block-size/index.md
+++ b/files/fr/web/css/block-size/index.md
@@ -9,25 +9,26 @@ tags:
   - Reference
 translation_of: Web/CSS/block-size
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>block-size</code></strong> est une propriété <em>logique</em> qui permet de définir la taille de l'élément dans la direction orthogonale au sens de lecture. Selon la valeur de la propriété {{cssxref("writing-mode")}}, elle correspondra à la propriété physique {{cssxref("width")}} ou {{cssxref("height")}}.</p>
+La propriété **`block-size`** est une propriété _logique_ qui permet de définir la taille de l'élément dans la direction orthogonale au sens de lecture. Selon la valeur de la propriété {{cssxref("writing-mode")}}, elle correspondra à la propriété physique {{cssxref("width")}} ou {{cssxref("height")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/block-size.html")}}</div>
+{{EmbedInteractiveExample("pages/css/block-size.html")}}
 
-<p>Si le mode d'écriture est vertical, la valeur de <code>block-size</code> fera référence à la largeur de l'élément et sinon, elle fera référence à sa hauteur.</p>
+Si le mode d'écriture est vertical, la valeur de `block-size` fera référence à la largeur de l'élément et sinon, elle fera référence à sa hauteur.
 
-<p>L'autre propriété logique permettant de définir la dimension sur l'autre axe est {{cssxref("inline-size")}}.</p>
+L'autre propriété logique permettant de définir la dimension sur l'autre axe est {{cssxref("inline-size")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 block-size: 300px;
 block-size: 25em;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt;        */
+/* Type <percentage>        */
 block-size: 75%;
 
 /* Valeurs avec un mot-clé */
@@ -43,63 +44,51 @@ block-size: auto;
 block-size: inherit;
 block-size: initial;
 block-size: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>block-size</code> peut prendre les mêmes valeurs que {{cssxref("width")}} et {{cssxref("height")}}.</p>
+La propriété `block-size` peut prendre les mêmes valeurs que {{cssxref("width")}} et {{cssxref("height")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   writing-mode: vertical-rl;
   background-color: yellow;
   block-size: 200px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-</pre>
+```html
+<p class="exemple">Texte d'exemple</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.block-size")}}</p>
+{{Compat("css.properties.block-size")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques correspondantes : {{cssxref("width")}} et {{cssxref("height")}}</li>
- <li>{{cssxref("writing-mode")}}</li>
-</ul>
+- Les propriétés physiques correspondantes : {{cssxref("width")}} et {{cssxref("height")}}
+- {{cssxref("writing-mode")}}
diff --git a/files/fr/web/css/border-block-color/index.md b/files/fr/web/css/border-block-color/index.md
index d014382130..dba1787161 100644
--- a/files/fr/web/css/border-block-color/index.md
+++ b/files/fr/web/css/border-block-color/index.md
@@ -9,34 +9,34 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-color
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block-color</code></strong> définit la couleur de la bordure d'un élément sur les côtés de l'axe de bloc. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-block-color`** définit la couleur de la bordure d'un élément sur les côtés de l'axe de bloc. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">border-block-color: yellow;
+```css
+border-block-color: yellow;
 border-block-color: #F5F6F7;
-</pre>
+```
 
-<p>Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-inline-color")}} qui définit {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.</p>
+Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-inline-color")}} qui définit {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'color'&gt;</code></dt>
- <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
-</dl>
+- `<'color'>`
+  - : La couleur de la bordure. Voir {{cssxref("color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -46,55 +46,41 @@ border-block-color: #F5F6F7;
   writing-mode: vertical-lr;
   border: 10px solid blue;
   border-block-color: red;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques qui peuvent correspondre à cette propriété :
-  <ul>
-   <li>{{cssxref("border-top-color")}},</li>
-   <li>{{cssxref("border-right-color")}},</li>
-   <li>{{cssxref("border-bottom-color")}},</li>
-   <li>{{cssxref("border-left-color")}}.</li>
-  </ul>
- </li>
- <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
- <li>{{bug("1297097")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block-color")}}
+
+## Voir aussi
+
+- Les propriétés physiques qui peuvent correspondre à cette propriété :
+
+  - {{cssxref("border-top-color")}},
+  - {{cssxref("border-right-color")}},
+  - {{cssxref("border-bottom-color")}},
+  - {{cssxref("border-left-color")}}.
+
+- Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
+- {{bug("1297097")}}
diff --git a/files/fr/web/css/border-block-end-color/index.md b/files/fr/web/css/border-block-end-color/index.md
index 0837a30800..0ec14f6de2 100644
--- a/files/fr/web/css/border-block-end-color/index.md
+++ b/files/fr/web/css/border-block-end-color/index.md
@@ -9,47 +9,45 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-end-color
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block-end-color</code></strong> définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-block-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-block-end-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-block-end-color.html")}}
 
-<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :
 
-<ul>
- <li>{{cssxref("border-block-start-color")}},</li>
- <li>{{cssxref("border-inline-end-color")}},</li>
- <li>{{cssxref("border-inline-start-color")}}.</li>
-</ul>
+- {{cssxref("border-block-start-color")}},
+- {{cssxref("border-inline-end-color")}},
+- {{cssxref("border-inline-start-color")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">border-block-end-color: red;
+```css
+border-block-end-color: red;
 border-block-end-color: #fffff;
 border-block-end-color: rgb(200, 0, 0);
 
 border-block-end-color: unset;
 border-block-end-color: initial;
 border-block-end-color: inherit;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-color'&gt;</code></dt>
- <dd>La couleur utilisée pour la bordure, voir {{cssxref("border-color")}}.</dd>
-</dl>
+- `<'border-color'>`
+  - : La couleur utilisée pour la bordure, voir {{cssxref("border-color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -59,55 +57,41 @@ border-block-end-color: inherit;
   writing-mode: vertical-lr;
   border: 10px solid blue;
   border-block-end-color: red;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block-end-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-color")}},</li>
-   <li>{{cssxref("border-right-color")}},</li>
-   <li>{{cssxref("border-bottom-color")}},</li>
-   <li>{{cssxref("border-left-color")}}.</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
- <li>{{bug("1297097")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block-end-color")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-color")}},
+  - {{cssxref("border-right-color")}},
+  - {{cssxref("border-bottom-color")}},
+  - {{cssxref("border-left-color")}}.
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
+- {{bug("1297097")}}
diff --git a/files/fr/web/css/border-block-end-style/index.md b/files/fr/web/css/border-block-end-style/index.md
index 2f381a74bc..4ca9575ace 100644
--- a/files/fr/web/css/border-block-end-style/index.md
+++ b/files/fr/web/css/border-block-end-style/index.md
@@ -8,42 +8,41 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-end-style
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block-end-style</code></strong> définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-block-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-block-end-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-block-end-style.html")}}
 
-<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :
 
-<ul>
- <li>{{cssxref("border-inline-start-style")}}</li>
- <li>{{cssxref("border-inline-end-style")}}</li>
- <li>{{cssxref("border-block-start-style")}}.</li>
-</ul>
+- {{cssxref("border-inline-start-style")}}
+- {{cssxref("border-inline-end-style")}}
+- {{cssxref("border-block-start-style")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">border-block-end-style: dashed;
+```css
+border-block-end-style: dashed;
 border-block-end-style: dotted;
-border-block-end-style: groove;</pre>
+border-block-end-style: groove;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style de la ligne pour la bordure, voir {{cssxref("border-style")}}.</dd>
-</dl>
+- `<'border-style'>`
+  - : Le style de la ligne pour la bordure, voir {{cssxref("border-style")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -53,54 +52,40 @@ border-block-end-style: groove;</pre>
   writing-mode: vertical-lr;
   border: 5px solid blue;
   border-block-end-style: dashed;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block-end-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-style")}},</li>
-   <li>{{cssxref("border-right-style")}},</li>
-   <li>{{cssxref("border-bottom-style")}},</li>
-   <li>{{cssxref("border-left-style")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block-end-style")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-style")}},
+  - {{cssxref("border-right-style")}},
+  - {{cssxref("border-bottom-style")}},
+  - {{cssxref("border-left-style")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-block-end-width/index.md b/files/fr/web/css/border-block-end-width/index.md
index a6cd3ee9ea..114e01a91e 100644
--- a/files/fr/web/css/border-block-end-width/index.md
+++ b/files/fr/web/css/border-block-end-width/index.md
@@ -8,38 +8,38 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-end-width
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block-end-width</code></strong> définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-block-end-width`** définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}
 
-<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt;      */
+```css
+/* Valeur de longueur */
+/* Type <length>      */
 border-block-end-width: 5px;
 border-block-end-width: thick;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur utilisée pour la bordure, voir {{cssxref("border-width")}}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur utilisée pour la bordure, voir {{cssxref("border-width")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -49,54 +49,40 @@ border-block-end-width: thick;
   writing-mode: vertical-lr;
   border: 1px solid blue;
   border-block-end-width: 5px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block-end-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-width")}}</li>
-   <li>{{cssxref("border-right-width")}}</li>
-   <li>{{cssxref("border-bottom-width")}}</li>
-   <li>{{cssxref("border-left-width")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block-end-width")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-width")}}
+  - {{cssxref("border-right-width")}}
+  - {{cssxref("border-bottom-width")}}
+  - {{cssxref("border-left-width")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-block-end/index.md b/files/fr/web/css/border-block-end/index.md
index 4ec15731fe..e449f9d7a3 100644
--- a/files/fr/web/css/border-block-end/index.md
+++ b/files/fr/web/css/border-block-end/index.md
@@ -8,51 +8,49 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-end
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block-end</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}} et {{cssxref("border-block-end-color")}}.</p>
+La propriété **`border-block-end`** est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}} et {{cssxref("border-block-end-color")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-block-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-block-end.html")}}
 
-<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :
 
-<ul>
- <li>{{cssxref("border-block-start")}},</li>
- <li>{{cssxref("border-inline-end")}},</li>
- <li>{{cssxref("border-inline-start")}}.</li>
-</ul>
+- {{cssxref("border-block-start")}},
+- {{cssxref("border-inline-end")}},
+- {{cssxref("border-inline-start")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">border-block-end: 1px;
+```css
+border-block-end: 1px;
 border-block-end: 2px dotted;
 border-block-end: medium dashed green;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style utilisé pour la ligne de la bordure, {{cssxref("border-style")}}.</dd>
- <dt><code>&lt;'color'&gt;</code></dt>
- <dd>La couleur de la bordure, voir {{cssxref("color")}}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur de la bordure, voir {{cssxref("border-width")}}.
+- `<'border-style'>`
+  - : Le style utilisé pour la ligne de la bordure, {{cssxref("border-style")}}.
+- `<'color'>`
+  - : La couleur de la bordure, voir {{cssxref("color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -61,54 +59,40 @@ border-block-end: medium dashed green;
 .exemple {
   writing-mode: vertical-rl;
   border-block-end: 5px dashed blue;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block-end")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top")}},</li>
-   <li>{{cssxref("border-right")}},</li>
-   <li>{{cssxref("border-bottom")}},</li>
-   <li>{{cssxref("border-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block-end")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top")}},
+  - {{cssxref("border-right")}},
+  - {{cssxref("border-bottom")}},
+  - {{cssxref("border-left")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-block-start-color/index.md b/files/fr/web/css/border-block-start-color/index.md
index 95208d2f9b..e2330aab8f 100644
--- a/files/fr/web/css/border-block-start-color/index.md
+++ b/files/fr/web/css/border-block-start-color/index.md
@@ -9,47 +9,45 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-start-color
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block-start-color</code></strong> définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-block-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}
 
-<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :
 
-<ul>
- <li>{{cssxref("border-block-end-color")}},</li>
- <li>{{cssxref("border-inline-end-color")}},</li>
- <li>{{cssxref("border-inline-start-color")}}.</li>
-</ul>
+- {{cssxref("border-block-end-color")}},
+- {{cssxref("border-inline-end-color")}},
+- {{cssxref("border-inline-start-color")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">border-block-start-color: red;
+```css
+border-block-start-color: red;
 border-block-start-color: #fffff;
 border-block-start-color: rgb(200, 0, 0);
 
 border-block-start-color: unset;
 border-block-start-color: initial;
 border-block-start-color: inherit;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-color'&gt;</code></dt>
- <dd>Voir {{cssxref("border-color")}}</dd>
-</dl>
+- `<'border-color'>`
+  - : Voir {{cssxref("border-color")}}
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -59,54 +57,40 @@ border-block-start-color: inherit;
   writing-mode: vertical-lr;
   border: 10px solid blue;
   border-block-start-color: red;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block-start-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-color")}},</li>
-   <li>{{cssxref("border-right-color")}},</li>
-   <li>{{cssxref("border-bottom-color")}},</li>
-   <li>{{cssxref("border-left-color")}}.</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block-start-color")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-color")}},
+  - {{cssxref("border-right-color")}},
+  - {{cssxref("border-bottom-color")}},
+  - {{cssxref("border-left-color")}}.
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-block-start-style/index.md b/files/fr/web/css/border-block-start-style/index.md
index a6060e2c1d..ddf1ca944b 100644
--- a/files/fr/web/css/border-block-start-style/index.md
+++ b/files/fr/web/css/border-block-start-style/index.md
@@ -8,43 +8,42 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-start-style
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block-start-style</code></strong> définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-block-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}
 
-<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :
 
-<ul>
- <li>{{cssxref("border-inline-start-style")}}</li>
- <li>{{cssxref("border-inline-end-style")}}</li>
- <li>{{cssxref("border-block-end-style")}}.</li>
-</ul>
+- {{cssxref("border-inline-start-style")}}
+- {{cssxref("border-inline-end-style")}}
+- {{cssxref("border-block-end-style")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* border-block-start-style: style<em> */</em>
+```css
+/* border-block-start-style: style */
 border-block-start-style: dashed;
 border-block-start-style: dotted;
-border-block-start-style: groove;</pre>
+border-block-start-style: groove;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style utilisé pour la ligne de la bordure, voir {{cssxref("border-style")}}.</dd>
-</dl>
+- `<'border-style'>`
+  - : Le style utilisé pour la ligne de la bordure, voir {{cssxref("border-style")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -54,54 +53,40 @@ border-block-start-style: groove;</pre>
   writing-mode: vertical-lr;
   border: 5px solid blue;
   border-block-start-style: dashed;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block-start-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-style")}},</li>
-   <li>{{cssxref("border-right-style")}},</li>
-   <li>{{cssxref("border-bottom-style")}},</li>
-   <li>{{cssxref("border-left-style")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block-start-style")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-style")}},
+  - {{cssxref("border-right-style")}},
+  - {{cssxref("border-bottom-style")}},
+  - {{cssxref("border-left-style")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-block-start-width/index.md b/files/fr/web/css/border-block-start-width/index.md
index 4e9e0f6139..06219322dd 100644
--- a/files/fr/web/css/border-block-start-width/index.md
+++ b/files/fr/web/css/border-block-start-width/index.md
@@ -9,38 +9,38 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-start-width
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block-start-width</code></strong> définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-block-start-width`** définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}
 
-<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-inline-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-inline-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeur de longueur */
+/* Type <length> */
 border-block-start-width: 5px;
 border-block-start-width: thick;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>Voir {{cssxref("border-width")}}</dd>
-</dl>
+- `<'border-width'>`
+  - : Voir {{cssxref("border-width")}}
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -50,54 +50,40 @@ border-block-start-width: thick;
   writing-mode: vertical-lr;
   border: 1px solid blue;
   border-block-start-width: 5px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block-start-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-width")}}</li>
-   <li>{{cssxref("border-right-width")}}</li>
-   <li>{{cssxref("border-bottom-width")}}</li>
-   <li>{{cssxref("border-left-width")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block-start-width")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-width")}}
+  - {{cssxref("border-right-width")}}
+  - {{cssxref("border-bottom-width")}}
+  - {{cssxref("border-left-width")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-block-start/index.md b/files/fr/web/css/border-block-start/index.md
index 44fa752755..e57a88172e 100644
--- a/files/fr/web/css/border-block-start/index.md
+++ b/files/fr/web/css/border-block-start/index.md
@@ -8,51 +8,49 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-start
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block-start</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}} et {{cssxref("border-block-start-color")}}.</p>
+La propriété **`border-block-start`** est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}} et {{cssxref("border-block-start-color")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-block-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-block-start.html")}}
 
-<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :
 
-<ul>
- <li>{{cssxref("border-block-end")}},</li>
- <li>{{cssxref("border-inline-end")}},</li>
- <li>{{cssxref("border-inline-start")}}.</li>
-</ul>
+- {{cssxref("border-block-end")}},
+- {{cssxref("border-inline-end")}},
+- {{cssxref("border-inline-start")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">border-block-start: 1px;
+```css
+border-block-start: 1px;
 border-block-start: 2px dotted;
 border-block-start: medium dashed green;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur utilisée pour la bordure de ce côté, voir {{cssxref("border-width")}}.</dd>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style utilisé pour la ligne de la bordure de ce côté, voir {{cssxref("border-style")}}.</dd>
- <dt><code>&lt;'color'&gt;</code></dt>
- <dd>La couleur de la bordure de ce côté, voir {{cssxref("color")}}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur utilisée pour la bordure de ce côté, voir {{cssxref("border-width")}}.
+- `<'border-style'>`
+  - : Le style utilisé pour la ligne de la bordure de ce côté, voir {{cssxref("border-style")}}.
+- `<'color'>`
+  - : La couleur de la bordure de ce côté, voir {{cssxref("color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -61,54 +59,40 @@ border-block-start: medium dashed green;
 .exemple {
   writing-mode: vertical-rl;
   border-block-start: 5px dashed blue;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block-start")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top")}},</li>
-   <li>{{cssxref("border-right")}},</li>
-   <li>{{cssxref("border-bottom")}},</li>
-   <li>{{cssxref("border-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block-start")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top")}},
+  - {{cssxref("border-right")}},
+  - {{cssxref("border-bottom")}},
+  - {{cssxref("border-left")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-block-style/index.md b/files/fr/web/css/border-block-style/index.md
index 996bd6b92f..aecd97b006 100644
--- a/files/fr/web/css/border-block-style/index.md
+++ b/files/fr/web/css/border-block-style/index.md
@@ -9,36 +9,36 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-style
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété<strong> <code>border-block-style</code></strong> permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe de bloc. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété** `border-block-style`** permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe de bloc. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-style'&gt; */
+```css
+/* Valeurs de type <'border-style'> */
 border-block-style: dashed;
 border-block-style: dotted;
 border-block-style: groove;
-</pre>
+```
 
-<p>Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-inline-style")}} qui définit {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-end-style")}}.</p>
+Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-inline-style")}} qui définit {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-end-style")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<dl>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.</dd>
-</dl>
+- `<'border-style'>`
+  - : Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -48,54 +48,40 @@ border-block-style: groove;
   writing-mode: vertical-lr;
   border: 5px solid blue;
   border-block-style: dashed;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques qui correspondent à cette propriété logique :
-  <ul>
-   <li>{{cssxref("border-top-style")}},</li>
-   <li>{{cssxref("border-right-style")}},</li>
-   <li>{{cssxref("border-bottom-style")}},</li>
-   <li>{{cssxref("border-left-style")}}.</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="texteExemple">Texte exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block-style")}}
+
+## Voir aussi
+
+- Les propriétés physiques qui correspondent à cette propriété logique :
+
+  - {{cssxref("border-top-style")}},
+  - {{cssxref("border-right-style")}},
+  - {{cssxref("border-bottom-style")}},
+  - {{cssxref("border-left-style")}}.
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-block-width/index.md b/files/fr/web/css/border-block-width/index.md
index 356fb06bf4..eda1599a20 100644
--- a/files/fr/web/css/border-block-width/index.md
+++ b/files/fr/web/css/border-block-width/index.md
@@ -9,38 +9,38 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block-width
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block-width</code></strong> définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe de bloc. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-block-width`** définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe de bloc. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-width'&gt; */
+```css
+/* Valeurs de type <'border-width'> */
 border-block-width: 5px 10px;
 border-block-width: 5px;
 border-block-width: thick;
-</pre>
+```
 
-<p>The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}.</p>
+The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur de la bordure. Voir {{ cssxref("border-width") }}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur de la bordure. Voir {{ cssxref("border-width") }}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -50,45 +50,32 @@ border-block-width: thick;
   writing-mode: vertical-lr;
   border: 1px solid blue;
   border-block-width: 5px 10px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-block-width")}}</p>
+{{Compat("css.properties.border-block-width")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}</li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-block/index.md b/files/fr/web/css/border-block/index.md
index 5a7eaf7dc2..d57f35b980 100644
--- a/files/fr/web/css/border-block/index.md
+++ b/files/fr/web/css/border-block/index.md
@@ -9,43 +9,43 @@ tags:
   - Reference
 translation_of: Web/CSS/border-block
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-block</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en bloc.</p>
+La propriété **`border-block`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en bloc.
 
-<pre class="brush:css no-line-numbers">border-block: 1px;
+```css
+border-block: 1px;
 border-block: 2px dotted;
 border-block: medium dashed blue;
-</pre>
+```
 
-<p><code>border-block</code> peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}} et {{cssxref("border-block-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de bloc. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+`border-block` peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}} et {{cssxref("border-block-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de bloc. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-inline")}}, (qui est la proprété raccourcie pour {{cssxref("border-inline-start")}} et {{cssxref("border-inline-end")}}).</p>
+Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-inline")}}, (qui est la proprété raccourcie pour {{cssxref("border-inline-start")}} et {{cssxref("border-inline-end")}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>border-block</code> peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.</p>
+La propriété `border-block` peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur de la bordure. Voir {{cssxref("border-width")}}.</dd>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.</dd>
- <dt><code>&lt;'color'&gt;</code></dt>
- <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur de la bordure. Voir {{cssxref("border-width")}}.
+- `<'border-style'>`
+  - : Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.
+- `<'color'>`
+  - : La couleur de la bordure. Voir {{cssxref("color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -54,56 +54,42 @@ border-block: medium dashed blue;
 .exempleTexte {
   writing-mode: vertical-rl;
   border-block: 5px dashed blue;
-}</pre>
-
-<p> </p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exempleTexte"&gt;Texte exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-block")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique :
-  <ul>
-   <li>{{cssxref("border-top")}},</li>
-   <li>{{cssxref("border-right")}},</li>
-   <li>{{cssxref("border-bottom")}},</li>
-   <li>{{cssxref("border-left")}}.</li>
-  </ul>
- </li>
- <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+
+
+### HTML
+
+```html
+<div>
+  <p class="exempleTexte">Texte exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-block")}}
+
+## Voir aussi
+
+- Les propriétés physiques qui peuvent correspondre à cette propriété logique :
+
+  - {{cssxref("border-top")}},
+  - {{cssxref("border-right")}},
+  - {{cssxref("border-bottom")}},
+  - {{cssxref("border-left")}}.
+
+- Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-bottom-color/index.md b/files/fr/web/css/border-bottom-color/index.md
index a1c9a1bf02..6f4fae7925 100644
--- a/files/fr/web/css/border-bottom-color/index.md
+++ b/files/fr/web/css/border-bottom-color/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/border-bottom-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-bottom-color</code></strong> permet de définir la couleur utilisée pour la bordure basse d'un élément.</p>
+La propriété **`border-bottom-color`** permet de définir la couleur utilisée pour la bordure basse d'un élément.
 
-<p>Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-bottom")}}.</p>
+Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-bottom")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+```css
+/* Valeurs de type <color> */
 border-bottom-color: red;
 border-bottom-color: rgb(255, 128, 0);
 border-bottom-color: hsla(100%, 50%, 25%, 0.75);
@@ -29,24 +30,23 @@ border-bottom-color: transparent;
 border-bottom-color: inherit;
 border-bottom-color: initial;
 border-bottom-color: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>&lt;<code>color&gt;</code></dt>
- <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté inférieur.</dd>
-</dl>
+- <`color>`
+  - : Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté inférieur.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.maboite {
+```css
+.maboite {
   border: solid 0.3em gold;
   border-bottom-color: red;
   width: auto;
@@ -54,71 +54,51 @@ border-bottom-color: unset;
 
 .texterouge {
   color: red;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="maboite"&gt;
-  &lt;p&gt;Une boîte avec une bordure autour.
+```html
+<div class="maboite">
+  <p>Une boîte avec une bordure autour.
      Notez le côté de la boîte qui est
-     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-bottom-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés raccourciées liées aux bordures
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-bottom")}},</li>
-   <li>{{cssxref("border-color")}}.</li>
-  </ul>
- </li>
- <li>Les propriétés de couleur pour les autres bordures :
-  <ul>
-   <li>{{cssxref("border-right-color")}},</li>
-   <li>{{cssxref("border-top-color")}},</li>
-   <li>{{cssxref("border-left-color")}}.</li>
-  </ul>
- </li>
- <li>Les autres propriétés liées à la bordure du haut :
-  <ul>
-   <li>{{cssxref("border-bottom-style")}},</li>
-   <li>{{cssxref("border-bottom-width")}}.</li>
-  </ul>
- </li>
-</ul>
+     <span class="texterouge">rouge</span>.</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                     | Commentaires                                                                                                                                                             |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification significative, la valeur `transparent` a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu. |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                                                                                                                     |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-bottom-color")}}
+
+## Voir aussi
+
+- Les propriétés raccourciées liées aux bordures
+
+  - {{cssxref("border")}},
+  - {{cssxref("border-bottom")}},
+  - {{cssxref("border-color")}}.
+
+- Les propriétés de couleur pour les autres bordures :
+
+  - {{cssxref("border-right-color")}},
+  - {{cssxref("border-top-color")}},
+  - {{cssxref("border-left-color")}}.
+
+- Les autres propriétés liées à la bordure du haut :
+
+  - {{cssxref("border-bottom-style")}},
+  - {{cssxref("border-bottom-width")}}.
diff --git a/files/fr/web/css/border-bottom-left-radius/index.md b/files/fr/web/css/border-bottom-left-radius/index.md
index be45e9ff52..ce5f525dba 100644
--- a/files/fr/web/css/border-bottom-left-radius/index.md
+++ b/files/fr/web/css/border-bottom-left-radius/index.md
@@ -7,21 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/border-bottom-left-radius
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-bottom-left-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en bas à gauche de la boîte.</p>
+La propriété **`border-bottom-left-radius`** définit le rayon de courbure de la bordure pour le coin en bas à gauche de la boîte.
 
-<div>{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}
 
-<p>L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.
 
-<div class="note">
-  <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p>
-</div>
+> **Note :** Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après `border-bottom-left-radius`, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de [la propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+```css
+/* Le coin est un quart de cercle         */
 /* La valeur indique le rayon de courbure */
 border-bottom-left-radius: 3px;
 
@@ -35,36 +34,31 @@ border-bottom-left-radius: 20%;
 border-bottom-left-radius: 0.5em 1em;
 
 border-bottom-left-radius: inherit;
-</pre>
+```
 
-<p>Cette propriété peut prendre deux formes :</p>
+Cette propriété peut prendre deux formes :
 
-<ul>
- <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
- <li>Une seconde avec deux valeurs
-  <ul>
-   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
-   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
-  </ul>
- </li>
-</ul>
+- Une première avec une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure pour ce coin
+- Une seconde avec deux valeurs
 
-<h3 id="Valeurs">Valeurs</h3>
+  - La première est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
+  - La seconde est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.</dd>
-</dl>
+### Valeurs
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- `<length-percentage>`
+  - : La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: lightgreen;
   border: solid 1px black;
   width: 100px;
@@ -89,53 +83,38 @@ border-bottom-left-radius: inherit;
   background-color: rgb(250,20,70);
   background-clip: content-box; // essayez margin-box...
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
- &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
- &lt;div class="pourcentage"&gt;&lt;/div&gt;
- &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-bottom-left-radius")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
- <li>Les propriétés pour les autres coins :
-  <ul>
-   <li>{{cssxref("border-top-right-radius")}},</li>
-   <li>{{cssxref("border-top-left-radius")}},</li>
-   <li>{{cssxref("border-bottom-right-radius")}}.</li>
-  </ul>
- </li>
-</ul>
+```
+
+### HTML
+
+```html
+ <div class="arc_cercle"></div>
+ <div class="arc_ellipse"></div>
+ <div class="pourcentage"></div>
+ <div class="rognage"></div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","540")}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-bottom-left-radius")}}
+
+## Voir aussi
+
+- La propriété raccourcie {{cssxref("border-radius")}}
+- Les propriétés pour les autres coins :
+
+  - {{cssxref("border-top-right-radius")}},
+  - {{cssxref("border-top-left-radius")}},
+  - {{cssxref("border-bottom-right-radius")}}.
diff --git a/files/fr/web/css/border-bottom-right-radius/index.md b/files/fr/web/css/border-bottom-right-radius/index.md
index 9a9fb45657..1295e667a0 100644
--- a/files/fr/web/css/border-bottom-right-radius/index.md
+++ b/files/fr/web/css/border-bottom-right-radius/index.md
@@ -7,21 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/border-bottom-right-radius
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-bottom-right-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en bas à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut <code>0</code>, aucun arrondi n'a lieu et le coin est un angle droit.</p>
+La propriété **`border-bottom-right-radius`** définit le rayon de courbure de la bordure pour le coin en bas à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut `0`, aucun arrondi n'a lieu et le coin est un angle droit.
 
-<div>{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}
 
-<p>Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.
 
-<div class="note">
-  <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-right-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p>
-</div>
+> **Note :** Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après `border-bottom-right-radius`, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de [la propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+```css
+/* Le coin est un quart de cercle         */
 /* La valeur indique le rayon de courbure */
 border-bottom-right-radius: 3px;
 
@@ -35,36 +34,31 @@ border-bottom-right-radius: 20%;
 border-bottom-right-radius: 0.5em 1em;
 
 border-bottom-right-radius: inherit;
-</pre>
+```
 
-<p>Cette propriété peut prendre deux formes :</p>
+Cette propriété peut prendre deux formes :
 
-<ul>
- <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
- <li>Une seconde avec deux valeurs
-  <ul>
-   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
-   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
-  </ul>
- </li>
-</ul>
+- Une première avec une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure pour ce coin
+- Une seconde avec deux valeurs
 
-<h3 id="Valeurs">Valeurs</h3>
+  - La première est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
+  - La seconde est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.</dd>
-</dl>
+### Valeurs
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- `<length-percentage>`
+  - : La mesure du rayon ou de l'un des demi-axes de l'ellipse. La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: lightgreen;
   border: solid 1px black;
   width: 100px;
@@ -89,53 +83,38 @@ border-bottom-right-radius: inherit;
   background-color: rgb(250,20,70);
   background-clip: content-box; // essayez margin-box...
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
- &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
- &lt;div class="pourcentage"&gt;&lt;/div&gt;
- &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-bottom-right-radius")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
- <li>Les propriétés pour les autres coins :
-  <ul>
-   <li>{{cssxref("border-top-left-radius")}},</li>
-   <li>{{cssxref("border-top-right-radius")}},</li>
-   <li>{{cssxref("border-bottom-left-radius")}}.</li>
-  </ul>
- </li>
-</ul>
+```
+
+### HTML
+
+```html
+ <div class="arc_cercle"></div>
+ <div class="arc_ellipse"></div>
+ <div class="pourcentage"></div>
+ <div class="rognage"></div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","540")}}
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-bottom-right-radius")}}
+
+## Voir aussi
+
+- La propriété raccourcie {{cssxref("border-radius")}}
+- Les propriétés pour les autres coins :
+
+  - {{cssxref("border-top-left-radius")}},
+  - {{cssxref("border-top-right-radius")}},
+  - {{cssxref("border-bottom-left-radius")}}.
diff --git a/files/fr/web/css/border-bottom-style/index.md b/files/fr/web/css/border-bottom-style/index.md
index 82a22dc543..671bdd3720 100644
--- a/files/fr/web/css/border-bottom-style/index.md
+++ b/files/fr/web/css/border-bottom-style/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/border-bottom-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>border-bottom-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure en bas d'une boîte.</p>
+La propriété** `border-bottom-style`** définit le style de ligne utilisé pour mettre en forme la bordure en bas d'une boîte.
 
-<div>{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}
 
-<div class="note">
-  <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p>
-</div>
+> **Note :** La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 border-bottom-style: none;
 border-bottom-style: hidden;
 border-bottom-style: dotted;
@@ -35,71 +34,121 @@ border-bottom-style: outset;
 border-bottom-style: inherit;
 border-bottom-style: initial;
 border-bottom-style: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;br-style&gt;</code></dt>
- <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté bas. Il peut prendre l'une des valeurs suivantes :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>none</code></td>
-    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td>
-   </tr>
-   <tr>
-    <td><code>hidden</code></td>
-    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td>
-   </tr>
-   <tr>
-    <td><code>dotted</code></td>
-    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-bottom-width")}}.</td>
-   </tr>
-   <tr>
-    <td><code>dashed</code></td>
-    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
-   </tr>
-   <tr>
-    <td><code>solid</code></td>
-    <td>Affiche une ligne droite continue.</td>
-   </tr>
-   <tr>
-    <td><code>double</code></td>
-    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-bottom-width")}}.</td>
-   </tr>
-   <tr>
-    <td><code>groove</code></td>
-    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
-   </tr>
-   <tr>
-    <td><code>ridge</code></td>
-    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
-   </tr>
-   <tr>
-    <td><code>inset</code></td>
-    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
-   </tr>
-   <tr>
-    <td><code>outset</code></td>
-    <td>
-     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
-    </td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<br-style>`
+
+  - : Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté bas. Il peut prendre l'une des valeurs suivantes :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>none</code></td>
+          <td>
+            L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure
+            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
+            définie, la valeur calculée de
+            {{cssxref("border-bottom-width")}} sera <code>0</code>, même
+            si cette dernière indique une autre valeur. Lorsqu'utilisée sur une
+            cellule d'un tableau avec la fusion des bordures, <code>none</code> a la
+            priorité la plus basse donc si une autre bordure est définie et fusionne
+            avec celle-ci, elle sera affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>hidden</code></td>
+          <td>
+            L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure
+            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
+            définie, la valeur calculée de
+            {{cssxref("border-bottom-width")}} sera <code>0</code>, même
+            si cette dernière indique une autre valeur. Lorsqu'utilisée sur une
+            cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a
+            la plus haute priorité et donc si une autre bordure est définie et
+            fusionne avec celle-ci, aucune ne sera affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>dotted</code></td>
+          <td>
+            Affiche une série de points ronds. L'espace entre ces points n'est pas
+            défini par la spécification et est donc laissé à l'implémentation. Le
+            rayon des points correspond à la moitié de
+            {{cssxref("border-bottom-width")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>dashed</code></td>
+          <td>
+            Affiche une série de tirets. La taille de ces tirets n'est pas définie
+            par la spécification et est laissée à l'implémentation.
+          </td>
+        </tr>
+        <tr>
+          <td><code>solid</code></td>
+          <td>Affiche une ligne droite continue.</td>
+        </tr>
+        <tr>
+          <td><code>double</code></td>
+          <td>
+            Deux lignes droites sont affichées dont la somme des épaisseurs
+            correspond à la valeur fournie par {{cssxref("border-width")}}
+            ou {{cssxref("border-bottom-width")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>groove</code></td>
+          <td>
+            La bordure crée un effet 3D donnant l'impression qu'elle a été gravée
+            dans le document. On obtient un effet opposé à <code>ridge</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>ridge</code></td>
+          <td>
+            La bordure crée un effet 3D donnant l'impression que la bordure ressort
+            du document. L'effet obtenu est opposé à celui obtenu avec
+            <code>groove</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>inset</code></td>
+          <td>
+            La bordure crée un effet 3D qui donne l'impression que la boîte est
+            renfoncée dans le document (l'effet obtenu est opposé à celui obtenu
+            avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de
+            tableau et que {{cssxref("border-collapse")}} vaut
+            <code>collapsed</code>, cette valeur se comporte comme
+            <code>groove</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>outset</code></td>
+          <td>
+            <p>
+              La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est
+              opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule
+              de tableau avec {{cssxref("border-collapse")}} qui vaut
+              <code>collapsed</code>, cette valeur se comporte comme
+              <code>ridge</code>.
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* On applique un style sur le tableau */
+```css
+/* On applique un style sur le tableau */
 table {
   border-width: 2px;
   background-color: #52E385;
@@ -118,79 +167,60 @@ tr, td {
 .b7 {border-bottom-style:groove;}
 .b8 {border-bottom-style:ridge;}
 .b9 {border-bottom-style:inset;}
-.b10 {border-bottom-style:outset;}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td class="b1"&gt;none&lt;/td&gt;
-    &lt;td class="b2"&gt;hidden&lt;/td&gt;
-    &lt;td class="b3"&gt;petits points&lt;/td&gt;
-    &lt;td class="b4"&gt;tirets&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td class="b5"&gt;solid&lt;/td&gt;
-    &lt;td class="b6"&gt;double&lt;/td&gt;
-    &lt;td class="b7"&gt;groove&lt;/td&gt;
-    &lt;td class="b8"&gt;ridge&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td class="b9"&gt;inset&lt;/td&gt;
-    &lt;td class="b10"&gt;outset&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
+.b10 {border-bottom-style:outset;}
+```
+
+### HTML
+
+```html
+<table>
   <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">petits points</td>
+    <td class="b4">tirets</td>
   </tr>
- </thead>
- <tbody>
   <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-bottom-style')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Aucune modification significative.</td>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
   </tr>
   <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
   </tr>
- </tbody>
 </table>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 300, 200)}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                     | Commentaires                       |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-bottom-style')}}         | {{Spec2('CSS3 Backgrounds')}} | Aucune modification significative. |
+| {{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-bottom-style")}}
+
+## Voir aussi
+
+- Les autres propriétés liées au style des bordures :
+
+  - {{cssxref("border-left-style")}}
+  - {{cssxref("border-right-style")}}
+  - {{cssxref("border-top-style")}}
+  - {{cssxref("border-style")}}.
+
+- Les autres propriétés liées à la bordure haute :
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-bottom-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres propriétés liées au style des bordures :
-  <ul>
-   <li>{{cssxref("border-left-style")}}</li>
-   <li>{{cssxref("border-right-style")}}</li>
-   <li>{{cssxref("border-top-style")}}</li>
-   <li>{{cssxref("border-style")}}.</li>
-  </ul>
- </li>
- <li>Les autres propriétés liées à la bordure haute :
-  <ul>
-   <li>{{cssxref("border-bottom")}}</li>
-   <li>{{cssxref("border-bottom-color")}}</li>
-   <li>{{cssxref("border-bottom-width")}}.</li>
-  </ul>
- </li>
-</ul>
+  - {{cssxref("border-bottom")}}
+  - {{cssxref("border-bottom-color")}}
+  - {{cssxref("border-bottom-width")}}.
diff --git a/files/fr/web/css/border-bottom-width/index.md b/files/fr/web/css/border-bottom-width/index.md
index 62e85b5adb..f1007dcad2 100644
--- a/files/fr/web/css/border-bottom-width/index.md
+++ b/files/fr/web/css/border-bottom-width/index.md
@@ -7,16 +7,17 @@ tags:
   - Reference
 translation_of: Web/CSS/border-bottom-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-bottom-width</code></strong> définit l'épaisseur de la bordure pour le côté bas d'un élément.</p>
+La propriété **`border-bottom-width`** définit l'épaisseur de la bordure pour le côté bas d'un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Une valeur de longueur */
-/* Type &lt;length&gt;          */
+```css
+/* Une valeur de longueur */
+/* Type <length>          */
 border-bottom-width: 10em;
 border-bottom-width: 3vmax;
 border-bottom-width: 6px;
@@ -30,30 +31,30 @@ border-bottom-width: thick;
 border-bottom-width: inherit;
 border-bottom-width: initial;
 border-bottom-width: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;line-width&gt;</code></dt>
- <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le bas de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
-  <ul>
-    <li><code>thin</code> (fin)</li>
-    <li><code>medium</code> (intermédiaire)</li>
-    <li><code>thick</code> (épais)</li>
-  </ul>
- La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd>
-</dl>
+- `<line-width>`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le bas de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+
+    - `thin` (fin)
+    - `medium` (intermédiaire)
+    - `thick` (épais)
+
+    La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée `thin ≤ medium ≤ thick` et que ces valeurs soient constantes pour un même document`.`
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.element1{
+```css
+.element1{
   border-bottom: thick solid red;
 }
 .element2{
@@ -62,78 +63,54 @@ border-bottom-width: unset;
 .element3{
   border-bottom: thin solid green;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="element1"&gt;
+```html
+<p class="element1">
   Une bordure épaisse rouge.
-&lt;/p&gt;
+</p>
 
-&lt;p class="element2"&gt;
+<p class="element2">
   Une bordure moyenne orange.
-&lt;/p&gt;
+</p>
 
-&lt;p class="element3"&gt;
+<p class="element3">
   Et une bordure fine verte.
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-bottom-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres propriétés liées à la largeur de la bordure :
-  <ul>
-   <li>{{cssxref("border-left-width")}},</li>
-   <li>{{cssxref("border-right-width")}},</li>
-   <li>{{cssxref("border-top-width")}},</li>
-   <li>{{cssxref("border-width")}}</li>
-  </ul>
- </li>
- <li>Les autres propriétés CSS liées à la bordure du côté haut :
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-bottom")}},</li>
-   <li>{{cssxref("border-bottom-style")}},</li>
-   <li>{{cssxref("border-bottom-color")}}.</li>
-  </ul>
- </li>
-</ul>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","300")}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                     | Commentaires                       |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification significative. |
+| {{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.               |
+| {{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}                     | {{Spec2('CSS1')}}                 | Définition initiale.               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-bottom-width")}}
+
+## Voir aussi
+
+- Les autres propriétés liées à la largeur de la bordure :
+
+  - {{cssxref("border-left-width")}},
+  - {{cssxref("border-right-width")}},
+  - {{cssxref("border-top-width")}},
+  - {{cssxref("border-width")}}
+
+- Les autres propriétés CSS liées à la bordure du côté haut :
+
+  - {{cssxref("border")}},
+  - {{cssxref("border-bottom")}},
+  - {{cssxref("border-bottom-style")}},
+  - {{cssxref("border-bottom-color")}}.
diff --git a/files/fr/web/css/border-bottom/index.md b/files/fr/web/css/border-bottom/index.md
index 40903908a8..249e2506d1 100644
--- a/files/fr/web/css/border-bottom/index.md
+++ b/files/fr/web/css/border-bottom/index.md
@@ -7,116 +7,95 @@ tags:
   - Reference
 translation_of: Web/CSS/border-bottom
 ---
-<div>{{CSSRef}}</div>
-
-<p>La propriété <strong><code>border-bottom</code></strong> est une propriété raccourcie qui définit la bordure du côté bas d'un élément.</p>
-
-<p>C'est une propriété raccourcie qui synthétise :</p>
-
-<ul>
- <li>{{cssxref("border-bottom-width")}},</li>
- <li>{{cssxref("border-bottom-color")}},</li>
- <li>{{cssxref("border-bottom-style")}}.</li>
-</ul>
-
-<p>Ces propriétés permettent de décrire la bordure du côté bas d'un élément.</p>
-
-<div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div>
-
-<div class="note">
-<p><strong>Note :</strong> Comme pour les autres propriétés raccourcies, <code>border-bottom</code> 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 :</p>
-
-<pre class="brush:css">  border-bottom-style: dotted;
-  border-bottom: thick green;
-</pre>
-
-<p>est équivalent à :</p>
-
-<pre class="brush:css">  border-bottom-style: dotted;
-  border-bottom: none thick green;
-</pre>
-
-<p> et la valeur {{cssxref("border-bottom-style")}} fournie avant <code>border-bottom</code> est ignorée.</p>
-
-<p>La valeur par défaut de {{cssxref("border-bottom-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">border-bottom: 1px;
+{{CSSRef}}
+
+La propriété **`border-bottom`** est une propriété raccourcie qui définit la bordure du côté bas d'un élément.
+
+C'est une propriété raccourcie qui synthétise :
+
+- {{cssxref("border-bottom-width")}},
+- {{cssxref("border-bottom-color")}},
+- {{cssxref("border-bottom-style")}}.
+
+Ces propriétés permettent de décrire la bordure du côté bas d'un élément.
+
+{{EmbedInteractiveExample("pages/css/border-bottom.html")}}
+
+> **Note :** Comme pour les autres propriétés raccourcies, `border-bottom` 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-bottom-style: dotted;
+>   border-bottom: thick green;
+> ```
+>
+> est équivalent à :
+>
+> ```css
+>   border-bottom-style: dotted;
+>   border-bottom: none thick green;
+> ```
+>
+> et la valeur {{cssxref("border-bottom-style")}} fournie avant `border-bottom` est ignorée.
+>
+> La valeur par défaut de {{cssxref("border-bottom-style")}} étant `none`, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.
+
+## Syntaxe
+
+```css
+border-bottom: 1px;
 border-bottom: 2px dotted;
 border-bottom: medium dashed green;
-</pre>
+```
 
-<p>Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
+Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;br-width&gt; </code></dt>
- <dd>Voir {{cssxref("border-bottom-width")}}.</dd>
- <dt><code>&lt;br-style&gt; </code></dt>
- <dd>Voir {{cssxref("border-bottom-style")}}.</dd>
- <dt><code>&lt;color&gt; </code></dt>
- <dd>Voir {{cssxref("border-bottom-color")}}.</dd>
-</dl>
+- `<br-width> `
+  - : Voir {{cssxref("border-bottom-width")}}.
+- `<br-style> `
+  - : Voir {{cssxref("border-bottom-style")}}.
+- `<color> `
+  - : Voir {{cssxref("border-bottom-color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   border-bottom: 3px dotted orange;
-} </pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   En passant elle prit sur un rayon un pot
   de confiture portant cette étiquette,
   « MARMELADE D’ORANGES. »
-&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-bottom-color")}} s'applique.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-bottom")}}</p>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","150")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires                                                                                                                  |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-bottom-color")}} s'applique. |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}} | {{Spec2('CSS2.1')}}                 | Aucune modification significative.                                                                                            |
+| {{SpecName('CSS1', '#border-bottom', 'border-bottom')}}                         | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                          |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-bottom")}}
diff --git a/files/fr/web/css/border-collapse/index.md b/files/fr/web/css/border-collapse/index.md
index 1751aa7ddf..ce3ede58a9 100644
--- a/files/fr/web/css/border-collapse/index.md
+++ b/files/fr/web/css/border-collapse/index.md
@@ -7,19 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/border-collapse
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-collapse</code></strong> détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées.</p>
+La propriété **`border-collapse`** détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées.
 
-<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
 
-<p>Le modèle des <em>bordures séparées</em> est celui qui est traditionnellement utilisé par HTML. Les cellules adjacente ont des bordures distinctes et la distance entre ces bordures est définie par la propriété {{cssxref("border-spacing")}}.</p>
+Le modèle des _bordures séparées_ est celui qui est traditionnellement utilisé par HTML. Les cellules adjacente ont des bordures distinctes et la distance entre ces bordures est définie par la propriété {{cssxref("border-spacing")}}.
 
-<p>Le modèle des <em>bordures fusionnées</em> permet que les cellules adjacentes partagent leurs bordures. Lorsqu'on utilise ce modèle, les valeurs <code>inset</code> et <code>outset</code> de {{cssxref("border-style")}} se comportent respectivement comme <code>groove</code> et <code>ridge</code>.</p>
+Le modèle des _bordures fusionnées_ permet que les cellules adjacentes partagent leurs bordures. Lorsqu'on utilise ce modèle, les valeurs `inset` et `outset` de {{cssxref("border-style")}} se comportent respectivement comme `groove` et `ridge`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 border-collapse: collapse;
 border-collapse: separate;
 
@@ -27,28 +28,27 @@ border-collapse: separate;
 border-collapse: inherit;
 border-collapse: initial;
 border-collapse: unset;
-</pre>
+```
 
-<p>La propriété <code>border-collapse</code> est définie avec un seul mot-clé parmi ceux définis ci-après.</p>
+La propriété `border-collapse` est définie avec un seul mot-clé parmi ceux définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>collapse</code></dt>
- <dd>Un mot-clé qui indique que le modèle des bordures fusionnées doit être utilisé.</dd>
- <dt><code>separate</code></dt>
- <dd>Un mot-clé qui indique que le modèle des bordures séparées doit être utilisé. C'est la valeur par défaut.</dd>
-</dl>
+- `collapse`
+  - : Un mot-clé qui indique que le modèle des bordures fusionnées doit être utilisé.
+- `separate`
+  - : Un mot-clé qui indique que le modèle des bordures séparées doit être utilisé. C'est la valeur par défaut.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.collapse {
+```css
+.collapse {
   border-collapse: collapse;
 }
 .separate {
@@ -71,78 +71,66 @@ table th, table td {
 .wk { border-color: gold blue; }
 .ch { border-color: red yellow green blue; }
 .bk { border-color: navy blue teal aqua; }
-.op { border-color: red; }</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table class="separate"&gt;
-  &lt;caption&gt;&lt;code&gt;border-collapse: separate&lt;/code&gt;&lt;/caption&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;&lt;th&gt;Navigateur&lt;/th&gt; &lt;th&gt;Moteur de rendu&lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="ie"&gt;Internet Explorer&lt;/td&gt; &lt;td class="tr"&gt;Trident&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-&lt;table class="collapse"&gt;
-  &lt;caption&gt;&lt;code&gt;border-collapse: collapse&lt;/code&gt;&lt;/caption&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;&lt;th&gt;Navigateur&lt;/th&gt; &lt;th&gt;Moteur de rendu&lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="ie"&gt;Internet Explorer&lt;/td&gt; &lt;td class="tr"&gt;Trident&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 400, 300)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'tables.html#borders', 'border-collapse')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+.op { border-color: red; }
+```
+
+### HTML
+
+```html
+<table class="separate">
+  <caption><code>border-collapse: separate</code></caption>
+  <tbody>
+    <tr><th>Navigateur</th> <th>Moteur de rendu</th>
+    </tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
+    </tr>
+    <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
+    </tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
+    </tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
+    </tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td>
+    </tr>
+  </tbody>
 </table>
+<table class="collapse">
+  <caption><code>border-collapse: collapse</code></caption>
+  <tbody>
+    <tr><th>Navigateur</th> <th>Moteur de rendu</th>
+    </tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
+    </tr>
+    <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
+    </tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
+    </tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
+    </tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 400, 300)}}
+
+## Spécifications
+
+| Spécification                                                                        | État                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName('CSS2.1', 'tables.html#borders', 'border-collapse')}} | {{Spec2('CSS2.1')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-collapse")}}</p>
+{{Compat("css.properties.border-collapse")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("border-spacing")}}</li>
- <li>{{cssxref("border-style")}}</li>
- <li>L'élément HTML {{HTMLElement("table")}} impacté <code>border-collapse</code>.</li>
-</ul>
+- {{cssxref("border-spacing")}}
+- {{cssxref("border-style")}}
+- L'élément HTML {{HTMLElement("table")}} impacté `border-collapse`.
diff --git a/files/fr/web/css/border-color/index.md b/files/fr/web/css/border-color/index.md
index 34c8a624c4..a36b10ab31 100644
--- a/files/fr/web/css/border-color/index.md
+++ b/files/fr/web/css/border-color/index.md
@@ -8,17 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/border-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>border-color</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir la couleur de la bordure sur les quatre côtés de la boîte de bordure d'un élément.</p>
+La propriété CSS **`border-color`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir la couleur de la bordure sur les quatre côtés de la boîte de bordure d'un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/border-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-color.html")}}
 
-<p>Chaque côté peut être paramétré individuellement grâce aux propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} et {{cssxref("border-left-color")}} ou, si on utilise les propriétés logiques : {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.</p>
+Chaque côté peut être paramétré individuellement grâce aux propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} et {{cssxref("border-left-color")}} ou, si on utilise les propriétés logiques : {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* border-color : Une valeur        */
+```css
+/* border-color : Une valeur        */
 /* Une valeur pour les quatre côtés */
 border-color: red;
 
@@ -42,26 +43,25 @@ border-color: red yellow green blue;
 
 /* Valeurs globales */
 border-color: inherit;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur qu'on souhaite appliquer sur un ou plusieurs côtés de la boîte de bordure.</dd>
- <dt><code>inherit</code></dt>
- <dd>Un mot-clé qui indique que les quatre valeurs sont héritées depuis la valeur calculée de la propriété pour l'élément parent.</dd>
-</dl>
+- `<color>`
+  - : Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur qu'on souhaite appliquer sur un ou plusieurs côtés de la boîte de bordure.
+- `inherit`
+  - : Un mot-clé qui indique que les quatre valeurs sont héritées depuis la valeur calculée de la propriété pour l'élément parent.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#unevaleur {
+```css
+#unevaleur {
   border-color: red;
 }
 
@@ -88,107 +88,80 @@ div {
 ul {
   margin: 0;
   list-style: none;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="unevaleur"&gt;
-  &lt;p&gt;&lt;code&gt;border-color: red;&lt;/code&gt; équivalent à&lt;/p&gt;
-  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-bottom-color: red;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-&lt;div id="horzvert"&gt;
-  &lt;p&gt;&lt;code&gt;border-color: gold red;&lt;/code&gt; équivalent à&lt;/p&gt;
-  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: gold;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-&lt;div id="hauthoribas"&gt;
-  &lt;p&gt;&lt;code&gt;border-color: red cyan gold;&lt;/code&gt; équivalent à&lt;/p&gt;
-  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-left-color: cyan;&lt;/code&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-&lt;div id="hdbg"&gt;
-  &lt;p&gt;&lt;code&gt;border-color: red cyan black gold;&lt;/code&gt; équivalent à&lt;/p&gt;
-  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-bottom-color: black;&lt;/code&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;code&gt;border-left-color: gold;&lt;/code&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 600, 300)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#logical-shorthand-keyword")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Ajout du mot-clé <code>logical</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Le mot-clé <code>transparent</code> a été retiré pour être ajouté au type {{cssxref("&lt;color&gt;")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Cette propriété est désormais une propriété raccourcie.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "#border-color", "border-color")}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés liées à la couleur de la bordure
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-top-color")}},</li>
-   <li>{{cssxref("border-right-color")}},</li>
-   <li>{{cssxref("border-bottom-color")}},</li>
-   <li>{{cssxref("border-left-color")}},</li>
+}
+```
+
+### HTML
+
+```html
+<div id="unevaleur">
+  <p><code>border-color: red;</code> équivalent à</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: red;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="horzvert">
+  <p><code>border-color: gold red;</code> équivalent à</p>
+  <ul><li><code>border-top-color: gold;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="hauthoribas">
+  <p><code>border-color: red cyan gold;</code> équivalent à</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: cyan;</code></li>
   </ul>
- </li>
- <li>Les autres propriétés raccourcies liées à la bordure :
-  <ul>
-   <li>{{cssxref("border-width")}},</li>
-   <li>{{cssxref("border-style")}}.</li>
+</div>
+<div id="hdbg">
+  <p><code>border-color: red cyan black gold;</code> équivalent à</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: black;</code></li>
+    <li><code>border-left-color: gold;</code></li>
   </ul>
- </li>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
- <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
- <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
-</ul>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 600, 300)}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                             | Commentaires                                                                                         |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS Logical Properties", "#logical-shorthand-keyword")}}         | {{Spec2("CSS Logical Properties")}} | Ajout du mot-clé `logical`.                                                                          |
+| {{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}             | {{Spec2('CSS3 Backgrounds')}}         | Le mot-clé `transparent` a été retiré pour être ajouté au type {{cssxref("&lt;color&gt;")}}. |
+| {{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}} | {{Spec2('CSS2.1')}}                         | Cette propriété est désormais une propriété raccourcie.                                              |
+| {{SpecName("CSS1", "#border-color", "border-color")}}                             | {{Spec2('CSS1')}}                         | Définition initiale.                                                                                 |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-color")}}
+
+## Voir aussi
+
+- Les propriétés liées à la couleur de la bordure
+
+  - {{cssxref("border")}},
+  - {{cssxref("border-top-color")}},
+  - {{cssxref("border-right-color")}},
+  - {{cssxref("border-bottom-color")}},
+  - {{cssxref("border-left-color")}},
+
+- Les autres propriétés raccourcies liées à la bordure :
+
+  - {{cssxref("border-width")}},
+  - {{cssxref("border-style")}}.
+
+- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
+- Le type de données {{cssxref("&lt;color&gt;")}}
+- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.
diff --git a/files/fr/web/css/border-end-end-radius/index.md b/files/fr/web/css/border-end-end-radius/index.md
index 6a36727480..55f37d7d98 100644
--- a/files/fr/web/css/border-end-end-radius/index.md
+++ b/files/fr/web/css/border-end-end-radius/index.md
@@ -9,12 +9,13 @@ tags:
   - Reference
 translation_of: Web/CSS/border-end-end-radius
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-end-end-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-end-end-radius`** définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 /* Avec une valeur, le coin sera circulaire */
 border-end-end-radius: 10px;
 border-end-end-radius: 1em;
@@ -26,28 +27,27 @@ border-end-end-radius: 1em 2em;
 border-end-end-radius: inherit;
 border-end-end-radius: initial;
 border-end-end-radius: unset;
-</pre>
+```
 
-<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-right-radius")}}.</p>
+Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-right-radius")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
-</dl>
+- `<length-percentage>`
+  - : Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: rebeccapurple;
   width: 120px;
   height: 120px;
@@ -59,47 +59,34 @@ border-end-end-radius: unset;
   padding: 10px;
   background-color: #fff;
   border-end-end-radius: 10px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="texteExemple">Exemple</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-end-end-radius")}}</p>
+{{Compat("css.properties.border-end-end-radius")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété physique correspondante : {{CSSxRef("border-bottom-right-radius")}}</li>
- <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
-</ul>
+- La propriété physique correspondante : {{CSSxRef("border-bottom-right-radius")}}
+- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
diff --git a/files/fr/web/css/border-end-start-radius/index.md b/files/fr/web/css/border-end-start-radius/index.md
index 23164848c4..3278a15a09 100644
--- a/files/fr/web/css/border-end-start-radius/index.md
+++ b/files/fr/web/css/border-end-start-radius/index.md
@@ -9,12 +9,13 @@ tags:
   - Reference
 translation_of: Web/CSS/border-end-start-radius
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-end-start-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-end-start-radius`** définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 /* Avec une valeur, le coin sera circulaire */
 border-end-start-radius: 10px;
 border-end-start-radius: 1em;
@@ -26,28 +27,27 @@ border-end-start-radius: 1em 2em;
 border-end-start-radius: inherit;
 border-end-start-radius: initial;
 border-end-start-radius: unset;
-</pre>
+```
 
-<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-right-radius")}}.</p>
+Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-right-radius")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
-</dl>
+- `<length-percentage>`
+  - : Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: rebeccapurple;
   width: 120px;
   height: 120px;
@@ -59,47 +59,34 @@ border-end-start-radius: unset;
   padding: 10px;
   background-color: #fff;
   border-end-start-radius: 10px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="texteExemple">Exemple</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-end-start-radius")}}</p>
+{{Compat("css.properties.border-end-start-radius")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété physique correspondante : {{CSSxRef("border-top-right-radius")}}</li>
- <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
-</ul>
+- La propriété physique correspondante : {{CSSxRef("border-top-right-radius")}}
+- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
diff --git a/files/fr/web/css/border-image-outset/index.md b/files/fr/web/css/border-image-outset/index.md
index 72861fff31..bc6809bec1 100644
--- a/files/fr/web/css/border-image-outset/index.md
+++ b/files/fr/web/css/border-image-outset/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/border-image-outset
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-image-outset</code></strong> définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure.</p>
+La propriété **`border-image-outset`** définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure.
 
-<div>{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
 
-<p>Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné.</p>
+Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* border-image-outset :                 */
+```css
+/* border-image-outset :                 */
 /* Une même valeur pour les quatre côtés */
 border-image-outset: 1.5;
 
@@ -43,68 +44,56 @@ border-image-outset: 7px 12px 14px 5px;
 border-image-outset: inherit;
 border-image-outset: initial;
 border-image-outset: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de longueur (cf. type {{cssxref("&lt;length&gt;")}}) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées.</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Une valeur numérique (cf. type {{cssxref("&lt;number&gt;")}}) qui sera multipliée par la valeur calculée de {{cssxref("border-width")}} afin de déterminer la longueur de l'espace duquel dépasser.</dd>
-</dl>
+- `<length>`
+  - : Une valeur de longueur (cf. type {{cssxref("&lt;length&gt;")}}) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées.
+- `<number>`
+  - : Une valeur numérique (cf. type {{cssxref("&lt;number&gt;")}}) qui sera multipliée par la valeur calculée de {{cssxref("border-width")}} afin de déterminer la longueur de l'espace duquel dépasser.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
   border-image-slice: 30;
   border-image-width: 20px;
   border-image-repeat: round;
   border-image-outset: 10px;
   padding: 40px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+```html
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
   no sea takimata sanctus est Lorem ipsum dolor sit amet.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+{{EmbedLiveSample('Exemples', '480', '320')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-image-outset")}}</p>
+{{Compat("css.properties.border-image-outset")}}
diff --git a/files/fr/web/css/border-image-repeat/index.md b/files/fr/web/css/border-image-repeat/index.md
index 73277c07d4..5039e96034 100644
--- a/files/fr/web/css/border-image-repeat/index.md
+++ b/files/fr/web/css/border-image-repeat/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/border-image-repeat
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-image-repeat</code></strong> définit la façon dont les zones de l'image de bordure sont utilisée pour s'étendre sur chacun des côtés de la bordure. Cette propriété est multi-valuée : une valeur indiquera le comportement pour tous les côtés et deux valeurs indiqueront respectivement le comportement pour les côtés horizontaux et verticaux.</p>
+La propriété **`border-image-repeat`** définit la façon dont les zones de l'image de bordure sont utilisée pour s'étendre sur chacun des côtés de la bordure. Cette propriété est multi-valuée : une valeur indiquera le comportement pour tous les côtés et deux valeurs indiqueront respectivement le comportement pour les côtés horizontaux et verticaux.
 
-<div>{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* border-image-repeat                      */
+```css
+/* border-image-repeat                      */
 /* Une valeur : s'applique à tous les côtés */
 border-image-repeat: stretch;
 
@@ -28,77 +29,63 @@ border-image-repeat: round stretch;
 border-image-repeat: inherit;
 border-image-repeat: initial;
 border-image-repeat: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>stretch</code></dt>
- <dd>Un mot-clé qui indique que la zone de l'image doit être étirée pour remplir l'espace entre les deux bordures.</dd>
- <dt><code>repeat</code></dt>
- <dd>Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures.</dd>
- <dt><code>round</code></dt>
- <dd>Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Si on ne peut pas remplir cet espace avec un nombre entier de motifs, ceux-ci seront étirés pour qu'il y ait une répétition entière et que l'espace soit parfaitement rempli.</dd>
- <dt><code>space</code></dt>
- <dd>Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera répartis entre ces motifs.</dd>
-</dl>
+- `stretch`
+  - : Un mot-clé qui indique que la zone de l'image doit être étirée pour remplir l'espace entre les deux bordures.
+- `repeat`
+  - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures.
+- `round`
+  - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Si on ne peut pas remplir cet espace avec un nombre entier de motifs, ceux-ci seront étirés pour qu'il y ait une répétition entière et que l'espace soit parfaitement rempli.
+- `space`
+  - : Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera répartis entre ces motifs.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
  border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
  border-image-slice: 30;
  border-image-width: 20px;
  border-image-repeat: round;
  padding: 40px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+```html
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
   no sea takimata sanctus est Lorem ipsum dolor sit amet.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+{{EmbedLiveSample('Exemples', '480', '320')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-image-repeat")}}</p>
+{{Compat("css.properties.border-image-repeat")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://css-tricks.com/almanac/properties/b/border-image/">L'article de CSS Tricks sur <code>border-image</code> (en anglais)</a></li>
-</ul>
+- [L'article de CSS Tricks sur `border-image` (en anglais)](https://css-tricks.com/almanac/properties/b/border-image/)
diff --git a/files/fr/web/css/border-image-slice/index.md b/files/fr/web/css/border-image-slice/index.md
index ab1572f57c..8f31b33333 100644
--- a/files/fr/web/css/border-image-slice/index.md
+++ b/files/fr/web/css/border-image-slice/index.md
@@ -7,25 +7,26 @@ tags:
   - Reference
 translation_of: Web/CSS/border-image-slice
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-image-slice</code></strong> permet de découper l'image fournie via la propriété {{cssxref("border-image-source")}} en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image.</p>
+La propriété **`border-image-slice`** permet de découper l'image fournie via la propriété {{cssxref("border-image-source")}} en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image.
 
-<div>{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
 
-<p><img alt="Les 9 zones définies par border-image-slice" src="border-image-slice.png"></p>
+![Les 9 zones définies par border-image-slice](border-image-slice.png)
 
-<p>Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe).</p>
+Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe).
 
-<p>La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé <code>fill</code>. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs).</p>
+La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé `fill`. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs).
 
-<p>Les propriétés {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} définissent la façon dont ces images seront utilisées.</p>
+Les propriétés {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} définissent la façon dont ces images seront utilisées.
 
-<p>La propriété raccourcie {{cssxref("border-image")}} peut éventuellement réinitialiser cette propriété avec sa valeur par défaut.</p>
+La propriété raccourcie {{cssxref("border-image")}} peut éventuellement réinitialiser cette propriété avec sa valeur par défaut.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* border-image-slice :                       */
+```css
+/* border-image-slice :                       */
 /* Une valeur qui s'applique aux quatre côtés */
 border-image-slice: 30%;
 
@@ -56,73 +57,59 @@ border-image-slice: 10% fill 7 12;
 border-image-slice: inherit;
 border-image-slice: initial;
 border-image-slice: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>slice</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type {{cssxref("&lt;length&gt;")}} n'est pas autorisée et est donc invalide. Une valeur de type {{cssxref("&lt;number&gt;")}} correspondra à des <em>pixels</em> pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type {{cssxref("&lt;percentage&gt;")}} sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à <code>100%</code>. Il est préférable d'utiliser des pourcentages pour les images vectorielles.</dd>
- <dt><code>fill</code></dt>
- <dd>Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche.</dd>
-</dl>
+- `slice`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type {{cssxref("&lt;length&gt;")}} n'est pas autorisée et est donc invalide. Une valeur de type {{cssxref("&lt;number&gt;")}} correspondra à des _pixels_ pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type {{cssxref("&lt;percentage&gt;")}} sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à `100%`. Il est préférable d'utiliser des pourcentages pour les images vectorielles.
+- `fill`
+  - : Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
  border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
  border-image-slice: 30;
  border-image-width: 20px;
  border-image-repeat: round;
  padding: 40px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+```html
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
   no sea takimata sanctus est Lorem ipsum dolor sit amet.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+{{EmbedLiveSample('Exemples', '480', '320')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-image-slice")}}</p>
+{{Compat("css.properties.border-image-slice")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Shorthand_properties#quelques_cas_aux_limites_%c3%a9pineux">Description illustrée de la syntaxe multi-valuée</a></li>
-</ul>
+- [Description illustrée de la syntaxe multi-valuée](/fr/docs/Web/CSS/Shorthand_properties#quelques_cas_aux_limites_%c3%a9pineux)
diff --git a/files/fr/web/css/border-image-source/index.md b/files/fr/web/css/border-image-source/index.md
index f030f45974..204d2f5242 100644
--- a/files/fr/web/css/border-image-source/index.md
+++ b/files/fr/web/css/border-image-source/index.md
@@ -7,20 +7,21 @@ tags:
   - Reference
 translation_of: Web/CSS/border-image-source
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-image-source</code></strong> définit l'image (type {{cssxref("&lt;image&gt;")}}) qu'on souhaite utiliser pour mettre en forme la bordure. Si la valeur de cette propriété vaut <code>none</code>, ce sera la mise en forme définie par la propriété {{cssxref("border-style")}} qui sera utilisée.</p>
+La propriété **`border-image-source`** définit l'image (type {{cssxref("&lt;image&gt;")}}) qu'on souhaite utiliser pour mettre en forme la bordure. Si la valeur de cette propriété vaut `none`, ce sera la mise en forme définie par la propriété {{cssxref("border-style")}} qui sera utilisée.
 
-<div>{{EmbedInteractiveExample("pages/css/border-image-source.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-image-source.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 /* Ici, pas de border-image, */
 /* on utilise border-style */
 border-image-source: none;
 
-/* Valeur de type &lt;image&gt; */
+/* Valeur de type <image> */
 border-image-source: url(image.jpg);
 border-image-source: linear-gradient(to top, red, yellow);
 
@@ -28,58 +29,41 @@ border-image-source: linear-gradient(to top, red, yellow);
 border-image-source: inherit;
 border-image-source: initial;
 border-image-source: unset;
-</pre>
+```
 
-<p>La propriété {{cssxref("border-image-slice")}} peut être utilisée afin de diviser une image source en régions qui seront insérées dynamiquement pour constituer la bordure imagée finale.</p>
+La propriété {{cssxref("border-image-slice")}} peut être utilisée afin de diviser une image source en régions qui seront insérées dynamiquement pour constituer la bordure imagée finale.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Cette valeur permet d'indiquer qu'aucune image ne doit être utilisée pour la bordure. Ce sera le style défini par la propriété {{cssxref("border-style")}} qui sera utilisé.</dd>
- <dt><code>&lt;image&gt;</code></dt>
- <dd>Une référence vers l'Image qu'on souhaite utiliser pour dessiner la bordure. Voir {{cssxref("&lt;image&gt;")}}.</dd>
-</dl>
+- `none`
+  - : Cette valeur permet d'indiquer qu'aucune image ne doit être utilisée pour la bordure. Ce sera le style défini par la propriété {{cssxref("border-style")}} qui sera utilisé.
+- `<image>`
+  - : Une référence vers l'Image qu'on souhaite utiliser pour dessiner la bordure. Voir {{cssxref("&lt;image&gt;")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voir la page de la propriété raccourcie {{cssxref("border-image")}} et les différents exemples.</p>
+Voir la page de la propriété raccourcie {{cssxref("border-image")}} et les différents exemples.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-image-source")}}</p>
+{{Compat("css.properties.border-image-source")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("border")}}</li>
- <li>{{cssxref("outline")}}</li>
- <li>{{cssxref("box-shadow")}}</li>
- <li>{{cssxref("background-image")}}</li>
- <li>{{cssxref("url()", "url()")}}</li>
-</ul>
+- {{cssxref("border")}}
+- {{cssxref("outline")}}
+- {{cssxref("box-shadow")}}
+- {{cssxref("background-image")}}
+- {{cssxref("url()", "url()")}}
diff --git a/files/fr/web/css/border-image-width/index.md b/files/fr/web/css/border-image-width/index.md
index f334914cde..3854f22b95 100644
--- a/files/fr/web/css/border-image-width/index.md
+++ b/files/fr/web/css/border-image-width/index.md
@@ -7,29 +7,30 @@ tags:
   - Reference
 translation_of: Web/CSS/border-image-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-image-width</code></strong> définit la largeur de la bordure imagée.</p>
+La propriété **`border-image-width`** définit la largeur de la bordure imagée.
 
-<div>{{EmbedInteractiveExample("pages/css/border-image-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-image-width.html")}}
 
-<p>Si <code>border-image-width</code> est supérieur à {{cssxref("border-width")}}, la bordure imagée s'étendra au-delà du <em>padding</em> voire du contenu.</p>
+Si `border-image-width` est supérieur à {{cssxref("border-width")}}, la bordure imagée s'étendra au-delà du _padding_ voire du contenu.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 border-image-width: auto;
 
 /* Longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 border-image-width: 1rem;
 
 /* Valeur proportionnelle */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 border-image-width: 25%;
 
 /* Valeur numérique */
-/* Type &lt;number&gt; */
+/* Type <number> */
 border-image-width: 3;
 
 /* épaisseur verticale | horizontale */
@@ -45,79 +46,65 @@ border-image-width: 5% 2em 10% auto;
 border-image-width: inherit;
 border-image-width: initial;
 border-image-width: unset;
-</pre>
+```
 
-<p>La propriété <code>border-image-width</code> est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit.</p>
+La propriété `border-image-width` est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit.
 
-<ul>
- <li>Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés</li>
- <li>Lorsque deux valeurs sont utilisées, la premières s'applique aux côtés haut et bas et la seconde aux côté gauche et droit</li>
- <li>Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas.</li>
- <li>Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire).</li>
-</ul>
+- Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés
+- Lorsque deux valeurs sont utilisées, la premières s'applique aux côtés haut et bas et la seconde aux côté gauche et droit
+- Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas.
+- Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. <code>px</code>) ou relative (ex. <code>rem</code>). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides<code>.</code></dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Représente un multiple de <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de la propriété {{cssxref("border-width")}} de l'élément. Les valeurs négatives sont considérées invalides.</dd>
- <dt><code>auto</code></dt>
- <dd>L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété {{cssxref("border-image-slice")}} correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de <code>border-width</code> qui sera utilisée à la place.</dd>
- <dt><code>inherit</code></dt>
- <dd>Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent.</dd>
-</dl>
+- `<length-percentage>`
+  - : Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. `px`) ou relative (ex. `rem`). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides`.`
+- `<number>`
+  - : Représente un multiple de [la valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de la propriété {{cssxref("border-width")}} de l'élément. Les valeurs négatives sont considérées invalides.
+- `auto`
+  - : L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété {{cssxref("border-image-slice")}} correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de `border-width` qui sera utilisée à la place.
+- `inherit`
+  - : Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   border: 20px solid;
   border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
   border-image-width: 16px;
   padding: 40px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+```html
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
   no sea takimata sanctus est Lorem ipsum dolor sit amet.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+{{EmbedLiveSample('Exemples', '480', '320')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-image-width")}}</p>
+{{Compat("css.properties.border-image-width")}}
diff --git a/files/fr/web/css/border-image/index.md b/files/fr/web/css/border-image/index.md
index d945857f9f..83424b2d0f 100644
--- a/files/fr/web/css/border-image/index.md
+++ b/files/fr/web/css/border-image/index.md
@@ -8,21 +8,20 @@ tags:
   - Reference
 translation_of: Web/CSS/border-image
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-image</code></strong> dessine une image sur la bordure d'un élément. C'est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir {{cssxref("border-image-source")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-repeat")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-outset")}}.</p>
+La propriété **`border-image`** dessine une image sur la bordure d'un élément. C'est [une propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir {{cssxref("border-image-source")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-repeat")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-outset")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-image.html")}}
 
-<p>Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété <code>border-image</code> sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, <code>border-style</code> <strong>doit</strong> être présente si <code>border-image</code> est utilisée.</p>
+Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété `border-image` sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, `border-style` **doit** être présente si `border-image` est utilisée.
 
-<div class="note">
-<p><strong>Note :</strong> Si <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de {{cssxref("border-image-source")}} vaut <code>none</code> (via <code>border-image-source</code> ou via la propriété raccourcie <code>border-image</code>), ce sera le style indiqué par {{cssxref("border-style")}} qui sera utilisé.</p>
-</div>
+> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de {{cssxref("border-image-source")}} vaut `none` (via `border-image-source` ou via la propriété raccourcie `border-image`), ce sera le style indiqué par {{cssxref("border-style")}} qui sera utilisé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* source | slice */
+```css
+/* source | slice */
 border-image: linear-gradient(red, blue) 27;
 
 /* source | slice | repeat */
@@ -33,130 +32,111 @@ border-image: linear-gradient(red, blue) 27 / 35px;
 
 /* source | slice | width | outset | repeat */
 border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
-</pre>
+```
 
-<p>La propriété <code>border-image</code> peut être définie avec une à cinq valeurs parmi celles définies ci-après.</p>
+La propriété `border-image` peut être définie avec une à cinq valeurs parmi celles définies ci-après.
 
-<div class="note">
-<p><strong>Note :</strong> Si la <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a> de {{cssxref("border-image-source")}} vaut <code>none</code> ou si l'image ne peut pas être affichée, c'est le {{cssxref("border-style")}} correspondant qui sera affiché.</p>
-</div>
+> **Note :** Si la [valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de {{cssxref("border-image-source")}} vaut `none` ou si l'image ne peut pas être affichée, c'est le {{cssxref("border-style")}} correspondant qui sera affiché.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>border-image-source</code></dt>
- <dd>L'image source. Voir {{cssxref("border-image-source")}}.</dd>
- <dt><code>border-image-slice</code></dt>
- <dd>La façon dont l'image est découpée en zones (jusqu'à 4). Voir {{cssxref("border-image-slice")}}.</dd>
- <dt><code>border-image-width</code></dt>
- <dd>La largeur de la bordure avec l'image. Voir {{cssxref("border-image-width")}}.</dd>
- <dt><code>border-image-outset</code></dt>
- <dd>La distance entre la bordure et le bord de l'élément. Voir {{cssxref("border-image-outset")}}.</dd>
- <dt><code>border-image-repeat</code></dt>
- <dd>La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir {{cssxref("border-image-repeat")}}.</dd>
-</dl>
+- `border-image-source`
+  - : L'image source. Voir {{cssxref("border-image-source")}}.
+- `border-image-slice`
+  - : La façon dont l'image est découpée en zones (jusqu'à 4). Voir {{cssxref("border-image-slice")}}.
+- `border-image-width`
+  - : La largeur de la bordure avec l'image. Voir {{cssxref("border-image-width")}}.
+- `border-image-outset`
+  - : La distance entre la bordure et le bord de l'élément. Voir {{cssxref("border-image-outset")}}.
+- `border-image-repeat`
+  - : La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir {{cssxref("border-image-repeat")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utiliser_une_image_matricielle_étirée">Utiliser une image matricielle étirée</h3>
+### Utiliser une image matricielle étirée
 
-<p>On découpe l'image et on la répète pour remplir la zone entre les bordures.</p>
+On découpe l'image et on la répète pour remplir la zone entre les bordures.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush:css">#bitmap {
+```css
+#bitmap {
   border: 30px solid transparent;
   padding: 20px;
   border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div id="bitmap"&gt;
+```html
+<div id="bitmap">
   L'image est étirée pour remplir l'espace.
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utiliser_une_image_matricielle_répétée')}}</p>
+{{EmbedLiveSample('Utiliser_une_image_matricielle_répétée')}}
 
-<h3 id="Utiliser_un_dégradé">Utiliser un dégradé</h3>
+### Utiliser un dégradé
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush:css">#gradient {
+```css
+#gradient {
   border: 30px solid;
   border-image: linear-gradient(red, yellow) 10;
   padding: 20px;
 }
-</pre>
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div id="gradient"&gt;
+```html
+<div id="gradient">
   L'image formée par le gradient est étirée pour remplir la zone.
-&lt;/div&gt;
-</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('Utiliser_un_dégradé')}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document.</p>
-
-<ul>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li>
- <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener"><em>Understanding Success Criterion 1.1.1 - Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-image")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("border")}}</li>
- <li>{{cssxref("outline")}}</li>
- <li>{{cssxref("box-shadow")}}</li>
- <li>{{cssxref("background-image")}}</li>
- <li>{{cssxref("url()", "url()")}}</li>
- <li>Fonctions pour les dégradés
-  <ul>
-   <li>{{CSSxRef("conic-gradient")}}</li>
-   <li>{{CSSxRef("linear-gradient")}}</li>
-   <li>{{CSSxRef("repeating-linear-gradient")}}</li>
-   <li>{{CSSxRef("radial-gradient")}}</li>
-   <li>{{CSSxRef("repeating-radial-gradient")}}</li>
-  </ul>
- </li>
-</ul>
+</div>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Utiliser_un_dégradé')}}
+
+## Accessibilité
+
+Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document.
+
+- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [_Understanding Success Criterion 1.1.1 - Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-image")}}
+
+## Voir aussi
+
+- {{cssxref("border")}}
+- {{cssxref("outline")}}
+- {{cssxref("box-shadow")}}
+- {{cssxref("background-image")}}
+- {{cssxref("url()", "url()")}}
+- Fonctions pour les dégradés
+
+  - {{CSSxRef("conic-gradient")}}
+  - {{CSSxRef("linear-gradient")}}
+  - {{CSSxRef("repeating-linear-gradient")}}
+  - {{CSSxRef("radial-gradient")}}
+  - {{CSSxRef("repeating-radial-gradient")}}
diff --git a/files/fr/web/css/border-inline-color/index.md b/files/fr/web/css/border-inline-color/index.md
index b8cd8d95e2..eb485069d9 100644
--- a/files/fr/web/css/border-inline-color/index.md
+++ b/files/fr/web/css/border-inline-color/index.md
@@ -9,34 +9,34 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-color
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-inline-color</code></strong> définit la couleur de la bordure d'un élément sur les côtés de l'axe en ligne. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-inline-color`** définit la couleur de la bordure d'un élément sur les côtés de l'axe en ligne. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">border-inline-color: yellow;
+```css
+border-inline-color: yellow;
 border-inline-color: #F5F6F7;
-</pre>
+```
 
-<p>Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-block-color")}} qui définit {{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}.</p>
+Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-block-color")}} qui définit {{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'color'&gt;</code></dt>
- <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
-</dl>
+- `<'color'>`
+  - : La couleur de la bordure. Voir {{cssxref("color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -46,55 +46,41 @@ border-inline-color: #F5F6F7;
   writing-mode: vertical-lr;
   border: 10px solid blue;
   border-inline-color: red;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques qui peuvent correspondre à cette propriété :
-  <ul>
-   <li>{{cssxref("border-top-color")}},</li>
-   <li>{{cssxref("border-right-color")}},</li>
-   <li>{{cssxref("border-bottom-color")}},</li>
-   <li>{{cssxref("border-left-color")}}.</li>
-  </ul>
- </li>
- <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
- <li>{{bug("1297097")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline-color")}}
+
+## Voir aussi
+
+- Les propriétés physiques qui peuvent correspondre à cette propriété :
+
+  - {{cssxref("border-top-color")}},
+  - {{cssxref("border-right-color")}},
+  - {{cssxref("border-bottom-color")}},
+  - {{cssxref("border-left-color")}}.
+
+- Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
+- {{bug("1297097")}}
diff --git a/files/fr/web/css/border-inline-end-color/index.md b/files/fr/web/css/border-inline-end-color/index.md
index bc4b34cade..a94c5a31da 100644
--- a/files/fr/web/css/border-inline-end-color/index.md
+++ b/files/fr/web/css/border-inline-end-color/index.md
@@ -8,47 +8,45 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-end-color
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-inline-end-color</code></strong> définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-inline-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}
 
-<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :
 
-<ul>
- <li>{{cssxref("border-block-start-color")}},</li>
- <li>{{cssxref("border-block-end-color")}},</li>
- <li>{{cssxref("border-inline-start-color")}}.</li>
-</ul>
+- {{cssxref("border-block-start-color")}},
+- {{cssxref("border-block-end-color")}},
+- {{cssxref("border-inline-start-color")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">border-inline-end-color: red;
+```css
+border-inline-end-color: red;
 border-inline-end-color: #fffff;
 border-inline-end-color: rgb(200, 0, 0);
 
 border-inline-end-color: unset;
 border-inline-end-color: initial;
 border-inline-end-color: inherit;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-color'&gt;</code></dt>
- <dd>Voir {{cssxref("border-color")}}</dd>
-</dl>
+- `<'border-color'>`
+  - : Voir {{cssxref("border-color")}}
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -58,54 +56,40 @@ border-inline-end-color: inherit;
   writing-mode: vertical-lr;
   border: 10px solid blue;
   border-inline-end-color: red;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline-end-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-color")}},</li>
-   <li>{{cssxref("border-right-color")}},</li>
-   <li>{{cssxref("border-bottom-color")}},</li>
-   <li>{{cssxref("border-left-color")}}.</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline-end-color")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-color")}},
+  - {{cssxref("border-right-color")}},
+  - {{cssxref("border-bottom-color")}},
+  - {{cssxref("border-left-color")}}.
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-inline-end-style/index.md b/files/fr/web/css/border-inline-end-style/index.md
index 7fa9597e99..24047c8bd9 100644
--- a/files/fr/web/css/border-inline-end-style/index.md
+++ b/files/fr/web/css/border-inline-end-style/index.md
@@ -8,42 +8,41 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-end-style
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-inline-end-style</code></strong> définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-inline-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}
 
-<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :
 
-<ul>
- <li>{{cssxref("border-block-start-style")}}</li>
- <li>{{cssxref("border-block-end-style")}}</li>
- <li>{{cssxref("border-inline-start-style")}}.</li>
-</ul>
+- {{cssxref("border-block-start-style")}}
+- {{cssxref("border-block-end-style")}}
+- {{cssxref("border-inline-start-style")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">border-inline-end-style: dashed;
+```css
+border-inline-end-style: dashed;
 border-inline-end-style: dotted;
-border-inline-end-style: groove;</pre>
+border-inline-end-style: groove;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}</dd>
-</dl>
+- `<'border-style'>`
+  - : Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -53,54 +52,40 @@ border-inline-end-style: groove;</pre>
   writing-mode: vertical-lr;
   border: 5px solid blue;
   border-inline-end-style: dashed;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline-end-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-style")}},</li>
-   <li>{{cssxref("border-right-style")}},</li>
-   <li>{{cssxref("border-bottom-style")}},</li>
-   <li>{{cssxref("border-left-style")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline-end-style")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-style")}},
+  - {{cssxref("border-right-style")}},
+  - {{cssxref("border-bottom-style")}},
+  - {{cssxref("border-left-style")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-inline-end-width/index.md b/files/fr/web/css/border-inline-end-width/index.md
index 1c01412029..c348f4e6bc 100644
--- a/files/fr/web/css/border-inline-end-width/index.md
+++ b/files/fr/web/css/border-inline-end-width/index.md
@@ -8,38 +8,38 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-end-width
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-inline-end-width</code></strong> définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-inline-end-width`** définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}
 
-<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-start-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-start-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeur de longueur */
+/* Type <length> */
 border-inline-end-width: 5px;
 border-inline-end-width: thick;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur de la bordure, voir {{cssxref("border-width")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -49,54 +49,40 @@ border-inline-end-width: thick;
   writing-mode: vertical-lr;
   border: 1px solid blue;
   border-inline-end-width: 5px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline-end-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-width")}}</li>
-   <li>{{cssxref("border-right-width")}}</li>
-   <li>{{cssxref("border-bottom-width")}}</li>
-   <li>{{cssxref("border-left-width")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline-end-width")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-width")}}
+  - {{cssxref("border-right-width")}}
+  - {{cssxref("border-bottom-width")}}
+  - {{cssxref("border-left-width")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-inline-end/index.md b/files/fr/web/css/border-inline-end/index.md
index 860957487a..46b6334f11 100644
--- a/files/fr/web/css/border-inline-end/index.md
+++ b/files/fr/web/css/border-inline-end/index.md
@@ -8,51 +8,49 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-end
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-inline-end</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}} et {{cssxref("border-inline-end-color")}}.</p>
+La propriété **`border-inline-end`** est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}} et {{cssxref("border-inline-end-color")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}
 
-<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :
 
-<ul>
- <li>{{cssxref("border-block-start")}},</li>
- <li>{{cssxref("border-block-end")}},</li>
- <li>{{cssxref("border-inline-start")}}.</li>
-</ul>
+- {{cssxref("border-block-start")}},
+- {{cssxref("border-block-end")}},
+- {{cssxref("border-inline-start")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">border-inline-end: 1px;
+```css
+border-inline-end: 1px;
 border-inline-end: 2px dotted;
 border-inline-end: medium dashed green;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur de la bordure pour ce côté, voir {{cssxref("border-width")}}.</dd>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style de la ligne utilisé pour la bordure de ce côté, voir {{cssxref("border-style")}}.</dd>
- <dt><code>&lt;'color'&gt;</code></dt>
- <dd>La couleur de la bordure sur ce côté, voir {{cssxref("color")}}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur de la bordure pour ce côté, voir {{cssxref("border-width")}}.
+- `<'border-style'>`
+  - : Le style de la ligne utilisé pour la bordure de ce côté, voir {{cssxref("border-style")}}.
+- `<'color'>`
+  - : La couleur de la bordure sur ce côté, voir {{cssxref("color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -61,54 +59,40 @@ border-inline-end: medium dashed green;
 .exemple {
   writing-mode: vertical-rl;
   border-inline-end: 5px dashed blue;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline-end")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top")}},</li>
-   <li>{{cssxref("border-right")}},</li>
-   <li>{{cssxref("border-bottom")}},</li>
-   <li>{{cssxref("border-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline-end")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top")}},
+  - {{cssxref("border-right")}},
+  - {{cssxref("border-bottom")}},
+  - {{cssxref("border-left")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-inline-start-color/index.md b/files/fr/web/css/border-inline-start-color/index.md
index f2b6520344..36dd98be35 100644
--- a/files/fr/web/css/border-inline-start-color/index.md
+++ b/files/fr/web/css/border-inline-start-color/index.md
@@ -9,43 +9,41 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-start-color
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-inline-start-color</code></strong> définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-inline-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}
 
-<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :
 
-<ul>
- <li>{{cssxref("border-block-start-color")}},</li>
- <li>{{cssxref("border-block-end-color")}},</li>
- <li>{{cssxref("border-inline-end-color")}}.</li>
-</ul>
+- {{cssxref("border-block-start-color")}},
+- {{cssxref("border-block-end-color")}},
+- {{cssxref("border-inline-end-color")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">border-inline-start-color: red;
+```css
+border-inline-start-color: red;
 border-inline-start-color: #fffff;
 border-inline-start-color: rgb(200, 0, 0);
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-color'&gt;</code></dt>
- <dd>La couleur de la bordure, voir {{cssxref("border-color")}} et {{cssxref("&lt;color&gt;")}}.</dd>
-</dl>
+- `<'border-color'>`
+  - : La couleur de la bordure, voir {{cssxref("border-color")}} et {{cssxref("&lt;color&gt;")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -55,54 +53,40 @@ border-inline-start-color: rgb(200, 0, 0);
   writing-mode: vertical-lr;
   border: 10px solid blue;
   border-inline-start-color: red;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline-start-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-color")}},</li>
-   <li>{{cssxref("border-right-color")}},</li>
-   <li>{{cssxref("border-bottom-color")}},</li>
-   <li>{{cssxref("border-left-color")}}.</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                                | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline-start-color")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-color")}},
+  - {{cssxref("border-right-color")}},
+  - {{cssxref("border-bottom-color")}},
+  - {{cssxref("border-left-color")}}.
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-inline-start-style/index.md b/files/fr/web/css/border-inline-start-style/index.md
index 84313d9460..77aa7d211a 100644
--- a/files/fr/web/css/border-inline-start-style/index.md
+++ b/files/fr/web/css/border-inline-start-style/index.md
@@ -8,44 +8,42 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-start-style
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-inline-start-style</code></strong> définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-inline-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}
 
-<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :
 
-<ul>
- <li>{{cssxref("border-block-start-style")}}</li>
- <li>{{cssxref("border-block-end-style")}}</li>
- <li>{{cssxref("border-inline-end-style")}}.</li>
-</ul>
+- {{cssxref("border-block-start-style")}}
+- {{cssxref("border-block-end-style")}}
+- {{cssxref("border-inline-end-style")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé<em> */</em>
+```css
+/* Valeur avec un mot-clé */
 border-inline-start-style: dashed;
 border-inline-start-style: dotted;
 border-inline-start-style: groove;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style de la ligne utilisé pour la bordure, voir {{cssxref("border-style")}}.</dd>
-</dl>
+- `<'border-style'>`
+  - : Le style de la ligne utilisé pour la bordure, voir {{cssxref("border-style")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -55,54 +53,40 @@ border-inline-start-style: groove;
   writing-mode: vertical-lr;
   border: 5px solid blue;
   border-inline-start-style: dashed;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline-start-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-style")}},</li>
-   <li>{{cssxref("border-right-style")}},</li>
-   <li>{{cssxref("border-bottom-style")}},</li>
-   <li>{{cssxref("border-left-style")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                                | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline-start-style")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-style")}},
+  - {{cssxref("border-right-style")}},
+  - {{cssxref("border-bottom-style")}},
+  - {{cssxref("border-left-style")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-inline-start-width/index.md b/files/fr/web/css/border-inline-start-width/index.md
index a530bc3c6e..abbb5ca252 100644
--- a/files/fr/web/css/border-inline-start-width/index.md
+++ b/files/fr/web/css/border-inline-start-width/index.md
@@ -9,38 +9,38 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-start-width
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-inline-start-width</code></strong> définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-inline-start-width`** définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}
 
-<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt;      */
+```css
+/* Valeur de longueur */
+/* Type <length>      */
 border-inline-start-width: 5px;
 border-inline-start-width: thick;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur de la bordure, voir {{cssxref("border-width")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -50,54 +50,40 @@ border-inline-start-width: thick;
   writing-mode: vertical-lr;
   border: 1px solid blue;
   border-inline-start-width: 5px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline-start-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top-width")}}</li>
-   <li>{{cssxref("border-right-width")}}</li>
-   <li>{{cssxref("border-bottom-width")}}</li>
-   <li>{{cssxref("border-left-width")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                                | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline-start-width")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top-width")}}
+  - {{cssxref("border-right-width")}}
+  - {{cssxref("border-bottom-width")}}
+  - {{cssxref("border-left-width")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-inline-start/index.md b/files/fr/web/css/border-inline-start/index.md
index 1e57c3f268..546d698e4a 100644
--- a/files/fr/web/css/border-inline-start/index.md
+++ b/files/fr/web/css/border-inline-start/index.md
@@ -9,51 +9,49 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-start
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété<strong> <code>border-inline-start</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-start-color")}}.</p>
+La propriété** `border-inline-start`** est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-start-color")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}
 
-<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :
 
-<ul>
- <li>{{cssxref("border-block-start")}},</li>
- <li>{{cssxref("border-block-end")}},</li>
- <li>{{cssxref("border-inline-end")}}.</li>
-</ul>
+- {{cssxref("border-block-start")}},
+- {{cssxref("border-block-end")}},
+- {{cssxref("border-inline-end")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">border-inline-start: 1px;
+```css
+border-inline-start: 1px;
 border-inline-start: 2px dotted;
 border-inline-start: medium dashed green;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}.</dd>
- <dt><code>&lt;'color'&gt;</code></dt>
- <dd>La couleur utilisé pour la bordure sur ce côté, voir {{cssxref("color")}}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur de la bordure, voir {{cssxref("border-width")}}.
+- `<'border-style'>`
+  - : Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}.
+- `<'color'>`
+  - : La couleur utilisé pour la bordure sur ce côté, voir {{cssxref("color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -62,54 +60,40 @@ border-inline-start: medium dashed green;
 .exemple {
   writing-mode: vertical-rl;
   border-inline-start: 5px dashed blue;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline-start")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("border-top")}},</li>
-   <li>{{cssxref("border-right")}},</li>
-   <li>{{cssxref("border-bottom")}},</li>
-   <li>{{cssxref("border-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline-start")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("border-top")}},
+  - {{cssxref("border-right")}},
+  - {{cssxref("border-bottom")}},
+  - {{cssxref("border-left")}}
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-inline-style/index.md b/files/fr/web/css/border-inline-style/index.md
index 76e63f490d..ec602400db 100644
--- a/files/fr/web/css/border-inline-style/index.md
+++ b/files/fr/web/css/border-inline-style/index.md
@@ -9,36 +9,36 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-style
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété<strong> <code>border-inline-style</code></strong> permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe en ligne. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété** `border-inline-style`** permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe en ligne. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-style'&gt; */
+```css
+/* Valeurs de type <'border-style'> */
 border-inline-style: dashed;
 border-inline-style: dotted;
 border-inline-style: groove;
-</pre>
+```
 
-<p>Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-block-style")}} qui définit {{cssxref("border-block-start-style")}} et {{cssxref("border-block-end-style")}}.</p>
+Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-block-style")}} qui définit {{cssxref("border-block-start-style")}} et {{cssxref("border-block-end-style")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<dl>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.</dd>
-</dl>
+- `<'border-style'>`
+  - : Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -48,54 +48,40 @@ border-inline-style: groove;
   writing-mode: vertical-lr;
   border: 5px solid blue;
   border-inline-style: dashed;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques qui correspondent à cette propriété logique :
-  <ul>
-   <li>{{cssxref("border-top-style")}},</li>
-   <li>{{cssxref("border-right-style")}},</li>
-   <li>{{cssxref("border-bottom-style")}},</li>
-   <li>{{cssxref("border-left-style")}}.</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="texteExemple">Texte exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline-style")}}
+
+## Voir aussi
+
+- Les propriétés physiques qui correspondent à cette propriété logique :
+
+  - {{cssxref("border-top-style")}},
+  - {{cssxref("border-right-style")}},
+  - {{cssxref("border-bottom-style")}},
+  - {{cssxref("border-left-style")}}.
+
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-inline-width/index.md b/files/fr/web/css/border-inline-width/index.md
index 36cc04cc58..79285d5a85 100644
--- a/files/fr/web/css/border-inline-width/index.md
+++ b/files/fr/web/css/border-inline-width/index.md
@@ -9,36 +9,36 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline-width
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-inline-width</code></strong> définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe en ligne. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-inline-width`** définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe en ligne. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-width'&gt; */
+```css
+/* Valeurs de type <'border-width'> */
 border-inline-width: 5px 10px;
 border-inline-width: 5px;
 border-inline-width: thick;
-</pre>
+```
 
-<p>The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}.</p>
+The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur de la bordure. Voir {{ cssxref("border-width") }}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur de la bordure. Voir {{ cssxref("border-width") }}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -48,47 +48,34 @@ border-inline-width: thick;
   writing-mode: vertical-lr;
   border: 1px solid blue;
   border-inline-width: 5px 10px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-block-width")}}</p>
+{{Compat("css.properties.border-block-width")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}</li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-inline/index.md b/files/fr/web/css/border-inline/index.md
index fee3624b6f..6ae37ef8b7 100644
--- a/files/fr/web/css/border-inline/index.md
+++ b/files/fr/web/css/border-inline/index.md
@@ -9,45 +9,45 @@ tags:
   - Reference
 translation_of: Web/CSS/border-inline
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-inline</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en ligne.</p>
+La propriété **`border-inline`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en ligne.
 
-<pre class="brush:css no-line-numbers">border-inline: 1px;
+```css
+border-inline: 1px;
 border-inline: 2px dotted;
 border-inline: medium dashed blue;
-</pre>
+```
 
-<p><code>border-inline</code> peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}} et {{cssxref("border-inline-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de en ligne. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+`border-inline` peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}} et {{cssxref("border-inline-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de en ligne. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-block")}}, (qui est la proprété raccourcie pour {{cssxref("border-block-start")}} et {{cssxref("border-block-end")}}).</p>
+Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-block")}}, (qui est la proprété raccourcie pour {{cssxref("border-block-start")}} et {{cssxref("border-block-end")}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>border-inline</code> peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.</p>
+La propriété `border-inline` peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.
 
-<dl>
- <dt><code>&lt;'border-width'&gt;</code></dt>
- <dd>La largeur de la bordure. Voir {{cssxref("border-width")}}.</dd>
- <dt><code>&lt;'border-style'&gt;</code></dt>
- <dd>Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.</dd>
- <dt><code>&lt;'color'&gt;</code></dt>
- <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
-</dl>
+- `<'border-width'>`
+  - : La largeur de la bordure. Voir {{cssxref("border-width")}}.
+- `<'border-style'>`
+  - : Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.
+- `<'color'>`
+  - : La couleur de la bordure. Voir {{cssxref("color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p> </p>
 
-<h3 id="CSS">CSS</h3>
 
-<pre class="brush: css">div {
+### CSS
+
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -56,56 +56,42 @@ border-inline: medium dashed blue;
 .exempleTexte {
   writing-mode: vertical-rl;
   border-inline: 5px dashed blue;
-}</pre>
-
-<p> </p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exempleTexte"&gt;Texte exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-inline")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique :
-  <ul>
-   <li>{{cssxref("border-top")}},</li>
-   <li>{{cssxref("border-right")}},</li>
-   <li>{{cssxref("border-bottom")}},</li>
-   <li>{{cssxref("border-left")}}.</li>
-  </ul>
- </li>
- <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+
+
+### HTML
+
+```html
+<div>
+  <p class="exempleTexte">Texte exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-inline")}}
+
+## Voir aussi
+
+- Les propriétés physiques qui peuvent correspondre à cette propriété logique :
+
+  - {{cssxref("border-top")}},
+  - {{cssxref("border-right")}},
+  - {{cssxref("border-bottom")}},
+  - {{cssxref("border-left")}}.
+
+- Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/border-left-color/index.md b/files/fr/web/css/border-left-color/index.md
index d19f3c7ad2..d909dcdc31 100644
--- a/files/fr/web/css/border-left-color/index.md
+++ b/files/fr/web/css/border-left-color/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/border-left-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-left-color</code></strong> permet de définir la couleur utilisée pour la bordure gauche d'un élément.</p>
+La propriété **`border-left-color`** permet de définir la couleur utilisée pour la bordure gauche d'un élément.
 
-<p>Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-left")}}.</p>
+Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-left")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-left-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-left-color.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+```css
+/* Valeurs de type <color> */
 border-left-color: red;
 border-left-color: rgb(255, 128, 0);
 border-left-color: hsla(100%, 50%, 25%, 0.75);
@@ -29,24 +30,23 @@ border-left-color: transparent;
 border-left-color: inherit;
 border-left-color: initial;
 border-left-color: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>&lt;<code>color&gt;</code></dt>
- <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté gauche.</dd>
-</dl>
+- <`color>`
+  - : Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté gauche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.maboite {
+```css
+.maboite {
   border: solid 0.3em gold;
   border-left-color: red;
   width: auto;
@@ -54,71 +54,51 @@ border-left-color: unset;
 
 .texterouge {
   color: red;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="maboite"&gt;
-  &lt;p&gt;Une boîte avec une bordure autour.
+```html
+<div class="maboite">
+  <p>Une boîte avec une bordure autour.
      Notez le côté de la boîte qui est
-     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-color', 'border-color')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-left-color')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-left-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés raccourcies liées aux bordures
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-left")}},</li>
-   <li>{{cssxref("border-color")}}.</li>
-  </ul>
- </li>
- <li>Les propriétés de couleur pour les autres bordures :
-  <ul>
-   <li>{{cssxref("border-top-color")}},</li>
-   <li>{{cssxref("border-bottom-color")}},</li>
-   <li>{{cssxref("border-right-color")}}.</li>
-  </ul>
- </li>
- <li>Les autres propriétés liées à la bordure gauche :
-  <ul>
-   <li>{{cssxref("border-left-style")}},</li>
-   <li>{{cssxref("border-left-width")}}.</li>
-  </ul>
- </li>
-</ul>
+     <span class="texterouge">rouge</span>.</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                     | Commentaires                                                                                                                                                             |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS3 Backgrounds', '#the-border-color', 'border-color')}}             | {{Spec2('CSS3 Backgrounds')}} | Pas de modification significative, la valeur `transparent` a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu. |
+| {{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-left-color')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                                                                                                                     |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-left-color")}}
+
+## Voir aussi
+
+- Les propriétés raccourcies liées aux bordures
+
+  - {{cssxref("border")}},
+  - {{cssxref("border-left")}},
+  - {{cssxref("border-color")}}.
+
+- Les propriétés de couleur pour les autres bordures :
+
+  - {{cssxref("border-top-color")}},
+  - {{cssxref("border-bottom-color")}},
+  - {{cssxref("border-right-color")}}.
+
+- Les autres propriétés liées à la bordure gauche :
+
+  - {{cssxref("border-left-style")}},
+  - {{cssxref("border-left-width")}}.
diff --git a/files/fr/web/css/border-left-style/index.md b/files/fr/web/css/border-left-style/index.md
index 3bb7d560f3..1f09e7474f 100644
--- a/files/fr/web/css/border-left-style/index.md
+++ b/files/fr/web/css/border-left-style/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/border-left-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>border-left-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte.</p>
+La propriété** `border-left-style`** définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte.
 
-<div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-left-style.html")}}
 
-<div class="note">
-  <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p>
-</div>
+> **Note :** La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 border-left-style: none;
 border-left-style: hidden;
 border-left-style: dotted;
@@ -35,71 +34,121 @@ border-left-style: outset;
 border-left-style: inherit;
 border-left-style: initial;
 border-left-style: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;br-style&gt;</code></dt>
- <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>none</code></td>
-    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
-   </tr>
-   <tr>
-    <td><code>hidden</code></td>
-    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
-   </tr>
-   <tr>
-    <td><code>dotted</code></td>
-    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-left-width")}}.</td>
-   </tr>
-   <tr>
-    <td><code>dashed</code></td>
-    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
-   </tr>
-   <tr>
-    <td><code>solid</code></td>
-    <td>Affiche une ligne droite continue.</td>
-   </tr>
-   <tr>
-    <td><code>double</code></td>
-    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.</td>
-   </tr>
-   <tr>
-    <td><code>groove</code></td>
-    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
-   </tr>
-   <tr>
-    <td><code>ridge</code></td>
-    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
-   </tr>
-   <tr>
-    <td><code>inset</code></td>
-    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
-   </tr>
-   <tr>
-    <td><code>outset</code></td>
-    <td>
-     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
-    </td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<br-style>`
+
+  - : Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>none</code></td>
+          <td>
+            L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure
+            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
+            définie, la valeur calculée de
+            {{cssxref("border-left-width")}} sera <code>0</code>, même
+            si cette dernière indique une autre valeur. Lorsqu'utilisée sur une
+            cellule d'un tableau avec la fusion des bordures, <code>none</code> a la
+            priorité la plus basse donc si une autre bordure est définie et fusionne
+            avec celle-ci, elle sera  affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>hidden</code></td>
+          <td>
+            L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure
+            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
+            définie, la valeur calculée de
+            {{cssxref("border-left-width")}} sera <code>0</code>, même
+            si cette dernière indique une autre valeur. Lorsqu'utilisée sur une
+            cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a
+            la plus haute priorité et donc si une autre bordure est définie et
+            fusionne avec celle-ci, aucune ne sera  affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>dotted</code></td>
+          <td>
+            Affiche une série de points ronds. L'espace entre ces points n'est pas
+            défini par la spécification et est donc laissé à l'implémentation. Le
+            rayon des points correspond à la moitié de
+            {{cssxref("border-left-width")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>dashed</code></td>
+          <td>
+            Affiche une série de tirets. La taille de ces tirets n'est pas définie
+            par la spécification et est laissée à l'implémentation.
+          </td>
+        </tr>
+        <tr>
+          <td><code>solid</code></td>
+          <td>Affiche une ligne droite continue.</td>
+        </tr>
+        <tr>
+          <td><code>double</code></td>
+          <td>
+            Deux lignes droites sont affichées dont la somme des épaisseurs
+            correspond à la valeur fournie par {{cssxref("border-width")}}
+            ou {{cssxref("border-left-width")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>groove</code></td>
+          <td>
+            La bordure crée un effet 3D donnant l'impression qu'elle a été gravée
+            dans le document. On obtient un effet opposé à <code>ridge</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>ridge</code></td>
+          <td>
+            La bordure crée un effet 3D donnant l'impression que la bordure ressort
+            du document. L'effet obtenu est opposé à celui obtenu avec
+            <code>groove</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>inset</code></td>
+          <td>
+            La bordure crée un effet 3D qui donne l'impression que la boîte est
+            renfoncée dans le document (l'effet obtenu est opposé à celui obtenu
+            avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de
+            tableau et que {{cssxref("border-collapse")}} vaut
+            <code>collapsed</code>, cette valeur se comporte comme
+            <code>groove</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>outset</code></td>
+          <td>
+            <p>
+              La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est
+              opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule
+              de tableau avec {{cssxref("border-collapse")}} qui vaut
+              <code>collapsed</code>, cette valeur se comporte comme
+              <code>ridge</code>.
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* On applique un style sur le tableau */
+```css
+/* On applique un style sur le tableau */
 table {
   border-width: 2px;
   background-color: #52E385;
@@ -118,79 +167,60 @@ tr, td {
 .b7 {border-left-style:groove;}
 .b8 {border-left-style:ridge;}
 .b9 {border-left-style:inset;}
-.b10 {border-left-style:outset;}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td class="b1"&gt;none&lt;/td&gt;
-    &lt;td class="b2"&gt;hidden&lt;/td&gt;
-    &lt;td class="b3"&gt;petits points&lt;/td&gt;
-    &lt;td class="b4"&gt;tirets&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td class="b5"&gt;solid&lt;/td&gt;
-    &lt;td class="b6"&gt;double&lt;/td&gt;
-    &lt;td class="b7"&gt;groove&lt;/td&gt;
-    &lt;td class="b8"&gt;ridge&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td class="b9"&gt;inset&lt;/td&gt;
-    &lt;td class="b10"&gt;outset&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
+.b10 {border-left-style:outset;}
+```
+
+### HTML
+
+```html
+<table>
   <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">petits points</td>
+    <td class="b4">tirets</td>
   </tr>
- </thead>
- <tbody>
   <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Aucune modification significative.</td>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
   </tr>
   <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
   </tr>
- </tbody>
 </table>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 300, 200)}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                     | Commentaires                       |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}     | {{Spec2('CSS3 Backgrounds')}} | Aucune modification significative. |
+| {{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-left-style")}}
+
+## Voir aussi
+
+- Les autres propriétés liées au style des bordures :
+
+  - {{cssxref("border-right-style")}}
+  - {{cssxref("border-top-style")}}
+  - {{cssxref("border-bottom-style")}}
+  - {{cssxref("border-style")}}.
+
+- Les autres propriétés liées à la bordure gauche :
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-left-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres propriétés liées au style des bordures :
-  <ul>
-   <li>{{cssxref("border-right-style")}}</li>
-   <li>{{cssxref("border-top-style")}}</li>
-   <li>{{cssxref("border-bottom-style")}}</li>
-   <li>{{cssxref("border-style")}}.</li>
-  </ul>
- </li>
- <li>Les autres propriétés liées à la bordure gauche :
-  <ul>
-   <li>{{cssxref("border-left")}}</li>
-   <li>{{cssxref("border-left-color")}}</li>
-   <li>{{cssxref("border-left-width")}}.</li>
-  </ul>
- </li>
-</ul>
+  - {{cssxref("border-left")}}
+  - {{cssxref("border-left-color")}}
+  - {{cssxref("border-left-width")}}.
diff --git a/files/fr/web/css/border-left-width/index.md b/files/fr/web/css/border-left-width/index.md
index 5c218977d1..adaa6ccbdd 100644
--- a/files/fr/web/css/border-left-width/index.md
+++ b/files/fr/web/css/border-left-width/index.md
@@ -7,16 +7,17 @@ tags:
   - Reference
 translation_of: Web/CSS/border-left-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-left-width</code></strong> définit l'épaisseur de la bordure pour le côté gauche d'un élément.</p>
+La propriété **`border-left-width`** définit l'épaisseur de la bordure pour le côté gauche d'un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/border-left-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-left-width.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Une valeur de longueur */
-/* Type &lt;length&gt;          */
+```css
+/* Une valeur de longueur */
+/* Type <length>          */
 border-left-width: 10em;
 border-left-width: 3vmax;
 border-left-width: 6px;
@@ -30,30 +31,30 @@ border-left-width: thick;
 border-left-width: inherit;
 border-left-width: initial;
 border-left-width: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;br-width&gt;</code></dt>
- <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté gauche de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
-  <ul>
-    <li><code>thin</code> (fin)</li>
-    <li><code>medium</code> (intermédiaire)</li>
-    <li><code>thick</code> (épais)</li>
-  </ul>
- La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd>
-</dl>
+- `<br-width>`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté gauche de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+
+    - `thin` (fin)
+    - `medium` (intermédiaire)
+    - `thick` (épais)
+
+    La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée `thin ≤ medium ≤ thick` et que ces valeurs soient constantes pour un même document`.`
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.element1{
+```css
+.element1{
   border-left-width: thick;
   border-left-style: solid;
   border-left-color: red;
@@ -68,78 +69,54 @@ border-left-width: unset;
   border-left-style: solid;
   border-left-color: green;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="element1"&gt;
+```html
+<p class="element1">
   Une bordure épaisse rouge.
-&lt;/p&gt;
+</p>
 
-&lt;p class="element2"&gt;
+<p class="element2">
   Une bordure moyenne orange.
-&lt;/p&gt;
+</p>
 
-&lt;p class="element3"&gt;
+<p class="element3">
   Et une bordure fine verte.
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Pas de modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-left-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres propriétés liées à la largeur de la bordure :
-  <ul>
-   <li>{{cssxref("border-right-width")}},</li>
-   <li>{{cssxref("border-top-width")}},</li>
-   <li>{{cssxref("border-bottom-width")}},</li>
-   <li>{{cssxref("border-width")}}</li>
-  </ul>
- </li>
- <li>Les autres propriétés CSS liées à la bordure du côté gauche :
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-left")}},</li>
-   <li>{{cssxref("border-left-style")}},</li>
-   <li>{{cssxref("border-left-color")}}.</li>
-  </ul>
- </li>
-</ul>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","300")}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                     | Commentaires                       |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}     | {{Spec2('CSS3 Backgrounds')}} | Pas de modification significative. |
+| {{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}} | {{Spec2('CSS2.1')}}                 | Pas de modification significative. |
+| {{SpecName('CSS1', '#border-left-width', 'border-left-width')}}                     | {{Spec2('CSS1')}}                 | Définition initiale.               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-left-width")}}
+
+## Voir aussi
+
+- Les autres propriétés liées à la largeur de la bordure :
+
+  - {{cssxref("border-right-width")}},
+  - {{cssxref("border-top-width")}},
+  - {{cssxref("border-bottom-width")}},
+  - {{cssxref("border-width")}}
+
+- Les autres propriétés CSS liées à la bordure du côté gauche :
+
+  - {{cssxref("border")}},
+  - {{cssxref("border-left")}},
+  - {{cssxref("border-left-style")}},
+  - {{cssxref("border-left-color")}}.
diff --git a/files/fr/web/css/border-left/index.md b/files/fr/web/css/border-left/index.md
index bd60bc0f95..b87333e02d 100644
--- a/files/fr/web/css/border-left/index.md
+++ b/files/fr/web/css/border-left/index.md
@@ -7,116 +7,95 @@ tags:
   - Reference
 translation_of: Web/CSS/border-left
 ---
-<div>{{CSSRef}}</div>
-
-<p>La propriété <strong><code>border-left</code></strong> est une propriété raccourcie qui permet de définir la bordure gauche d'un élément</p>
-
-<p>Cette propriété raccourcie définit les valeurs des propriétés détaillées suivantes :</p>
-
-<ul>
- <li>{{cssxref("border-left-width")}},</li>
- <li>{{cssxref("border-left-style")}},</li>
- <li>{{cssxref("border-left-color")}}.</li>
-</ul>
-
-<p>Ces propriétés permettent de décrire la bordure du côté gauche d'un élément.</p>
-
-<div>{{EmbedInteractiveExample("pages/css/border-left.html")}}</div>
-
-<div class="note">
-<p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
-
-<p>Comme pour les autres propriétés raccourcies, <code>border-left</code> 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 :</p>
-
-<pre class="brush:css">  border-left-style: dotted;
-  border-left: thick green;
-</pre>
-
-<p>est équivalent à :</p>
-
-<pre class="brush:css">  border-left-style: dotted;
-  border-left: none thick green;
-</pre>
-
-<p> et la valeur {{cssxref("border-left-style")}} fournie avant <code>border-left</code> est ignorée.</p>
-
-<p>La valeur par défaut de {{cssxref("border-left-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">border-left: 1px;
+{{CSSRef}}
+
+La propriété **`border-left`** est une propriété raccourcie qui permet de définir la bordure gauche d'un élément
+
+Cette propriété raccourcie définit les valeurs des propriétés détaillées suivantes :
+
+- {{cssxref("border-left-width")}},
+- {{cssxref("border-left-style")}},
+- {{cssxref("border-left-color")}}.
+
+Ces propriétés permettent de décrire la bordure du côté gauche d'un élément.
+
+{{EmbedInteractiveExample("pages/css/border-left.html")}}
+
+> **Note :** Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.
+>
+> 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;
+> ```
+>
+> est équivalent à :
+>
+> ```css
+>   border-left-style: dotted;
+>   border-left: none thick green;
+> ```
+>
+> et la valeur {{cssxref("border-left-style")}} fournie avant `border-left` est ignorée.
+>
+> La valeur par défaut de {{cssxref("border-left-style")}} étant `none`, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.
+
+## Syntaxe
+
+```css
+border-left: 1px;
 border-left: 2px dotted;
 border-left: medium dashed green;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;br-width&gt; </code></dt>
- <dd>Voir {{cssxref("border-left-width")}}.</dd>
- <dt><code>&lt;br-style&gt; </code></dt>
- <dd>Voir {{cssxref("border-left-style")}}.</dd>
- <dt><code>&lt;color&gt; </code></dt>
- <dd>Voir {{cssxref("border-left-color")}}.</dd>
-</dl>
+- `<br-width> `
+  - : Voir {{cssxref("border-left-width")}}.
+- `<br-style> `
+  - : Voir {{cssxref("border-left-style")}}.
+- `<color> `
+  - : Voir {{cssxref("border-left-color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   border-left: 3px dotted orange;
-} </pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   En passant elle prit sur un rayon un pot
   de confiture portant cette étiquette,
   « MARMELADE D’ORANGES. »
-&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-left', 'border-left')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-left-color")}} s'applique.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border-left', 'border-left')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-left")}}</p>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","150")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                                                                                                                  |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-left', 'border-left')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-left-color")}} s'applique. |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}} | {{Spec2('CSS2.1')}}                 | Aucune modification significative.                                                                                            |
+| {{SpecName('CSS1', '#border-left', 'border-left')}}                         | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                          |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-left")}}
diff --git a/files/fr/web/css/border-radius/index.md b/files/fr/web/css/border-radius/index.md
index 540cf83bc4..564256e0c5 100644
--- a/files/fr/web/css/border-radius/index.md
+++ b/files/fr/web/css/border-radius/index.md
@@ -8,32 +8,29 @@ tags:
   - Web
 translation_of: Web/CSS/border-radius
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-radius</code></strong> permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.</p>
+La propriété **`border-radius`** permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.
 
-<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-radius.html")}}
 
-<p>La courbure s'applique à l'arrière-plan (défini avec la propriété {{cssxref("background")}}) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par {{cssxref("background-clip")}}.</p>
+La courbure s'applique à l'arrière-plan (défini avec la propriété {{cssxref("background")}}) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par {{cssxref("background-clip")}}.
 
-<p>Cette propriété est une <a href="/fr/docs/Web/CSS/Shorthand_properties">propriété raccourcie</a> qui permet de définir :</p>
+Cette propriété est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de définir :
 
-<ul>
- <li>{{cssxref("border-top-left-radius")}},</li>
- <li>{{cssxref("border-top-right-radius")}},</li>
- <li>{{cssxref("border-bottom-right-radius")}},</li>
- <li>{{cssxref("border-bottom-left-radius")}}.</li>
-</ul>
+- {{cssxref("border-top-left-radius")}},
+- {{cssxref("border-top-right-radius")}},
+- {{cssxref("border-bottom-right-radius")}},
+- {{cssxref("border-bottom-left-radius")}}.
 
-<p>La propriété <code>border-radius</code> ne s'applique pas aux tableaux lorsque {{cssxref("border-collapse")}} vaut <code>collapse</code>.</p>
+La propriété `border-radius` ne s'applique pas aux tableaux lorsque {{cssxref("border-collapse")}} vaut `collapse`.
 
-<div class="note">
-  <p><strong>Note :</strong> Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (<code>border-radius:0 0 inherit inherit</code> pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.</p>
-</div>
+> **Note :** Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (`border-radius:0 0 inherit inherit` pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers"><strong>/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */</strong>
+```css
+/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */
 /* On utilise le même rayon pour les quatre angles */
 border-radius: 10px;
 
@@ -52,23 +49,23 @@ border-radius: 2px 4px 2px;
 /* 4. coin en bas à gauche  */
 border-radius: 1px 0 3px 4px;
 
-<strong>/* En utilisant deux rayons, on peut avoir jusqu'à quatre valeurs          */</strong>
-<strong>/* On sépare les rayons horizontaux des verticaux par une barre oblique    */</strong>
-/* rayons horizontaux (cf. ci-avant) <strong>/</strong> rayon vertical pour tous les angles */
+/* En utilisant deux rayons, on peut avoir jusqu'à quatre valeurs          */
+/* On sépare les rayons horizontaux des verticaux par une barre oblique    */
+/* rayons horizontaux (cf. ci-avant) / rayon vertical pour tous les angles */
 border-radius: 10px 5% / 20px;
 
-/* rayons horizontaux puis <strong>/</strong> puis rayons verticaux */
+/* rayons horizontaux puis / puis rayons verticaux */
 /* 1. coin en haut à gauche et en bas à droite      */
 /* 2. puis coin en haut à droite et en bas à gauche */
 border-radius: 10px 5% / 20px 30px;
 
-/* rayons horizontaux puis <strong>/</strong> puis rayons verticaux */
+/* rayons horizontaux puis / puis rayons verticaux */
 /* 1. coin en haut à gauche                        */
 /* 2. coin en haut à droite et en bas à gauche     */
 /* 3. coin en bas à droite                         */
 border-radius: 10px 5px 2em / 20px 25px 30%;
 
-/* rayons horizontaux puis <strong>/</strong> puis rayons verticaux */
+/* rayons horizontaux puis / puis rayons verticaux */
 /* 1. coin en haut à gauche                        */
 /* 2. coin en haut à droite                        */
 /* 3. coin en bas à droite                         */
@@ -79,67 +76,110 @@ border-radius: 10px 5% / 20px 25em 30px 35em;
 border-radius: inherit;
 border-radius: initial;
 border-radius: unset;
-</pre>
+```
 
-<p>La propriété <code>border-radius</code> peut être définie avec :</p>
+La propriété `border-radius` peut être définie avec :
 
-<ul>
- <li>une, deux, trois voire quatre valeurs de longueur (<code><a href="#length">&lt;length&gt;</a></code>) ou de pourcentages (<code><a href="#percentage">&lt;percentage&gt;</a></code>). Ces valeurs sont utilisées pour désigner un rayon de courbure pour chaque angle.</li>
- <li>puis éventuellement une barre oblique (/) suivie d'une, deux, trois ou quatre valeurs de longueur ou de pourcentage qui permettent de définir un rayon de courbure supplémentaire pour créer des coins elliptiques.</li>
-</ul>
+- une, deux, trois voire quatre valeurs de longueur ([`<length>`](#length)) ou de pourcentages ([`<percentage>`](#percentage)). Ces valeurs sont utilisées pour désigner un rayon de courbure pour chaque angle.
+- puis éventuellement une barre oblique (/) suivie d'une, deux, trois ou quatre valeurs de longueur ou de pourcentage qui permettent de définir un rayon de courbure supplémentaire pour créer des coins elliptiques.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
 <table>
- <tbody>
-  <tr>
-   <td style="vertical-align: top;">Une seule valeur</td>
-   <td><img src="all-corner.png"></td>
-   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">Deux valeurs (coin en haut à gauche et en bas à droite)</td>
-   <td><img src="top-left-bottom-right.png"></td>
-   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs)</td>
-   <td><img src="top-right-bottom-left.png"></td>
-   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure lorsqu'on utilise deux ou trois valeurs dans la déclaration.</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">Coin en haut à gauche</td>
-   <td><img src="top-left.png"></td>
-   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">Coin en haut à droite</td>
-   <td style="margin-left: 2px;"><img src="top-right.png"></td>
-   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">Coin en bas à droite</td>
-   <td style="margin-left: 2px;"><img src="bottom-rigth.png"></td>
-   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">Coin en bas à gauche</td>
-   <td><img src="bottom-left.png"></td>
-   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td style="vertical-align: top">Une seule valeur</td>
+      <td><img src="all-corner.png" /></td>
+      <td style="vertical-align: top">
+        Une valeur de longueur (type {{cssxref("&lt;length&gt;")}})
+        ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})
+        qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une
+        seule valeur dans la déclaration.
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">
+        Deux valeurs (coin en haut à gauche et en bas à droite)
+      </td>
+      <td><img src="top-left-bottom-right.png" /></td>
+      <td style="vertical-align: top">
+        Une valeur de longueur (type {{cssxref("&lt;length&gt;")}})
+        ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})
+        qui indique le rayon de courbure à utiliser pour le coin en haut à
+        gauche et le coin en bas à droite de la boîte de bordure lorsqu'on
+        utilise deux valeurs dans la déclaration.
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">
+        Coin en haut à droite et en bas à gauche (syntaxe à deux et trois
+        valeurs)
+      </td>
+      <td><img src="top-right-bottom-left.png" /></td>
+      <td style="vertical-align: top">
+        Une valeur de longueur (type {{cssxref("&lt;length&gt;")}})
+        ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})
+        qui indique le rayon de courbure à utiliser pour le coin en haut à
+        droite et le coin en bas à gauche de la boîte de bordure lorsqu'on
+        utilise deux ou trois valeurs dans la déclaration.
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">Coin en haut à gauche</td>
+      <td><img src="top-left.png" /></td>
+      <td style="vertical-align: top">
+        Une valeur de longueur (type {{cssxref("&lt;length&gt;")}})
+        ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})
+        qui indique le rayon de courbure à utiliser pour le coin en haut à
+        gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la
+        syntaxe avec trois ou quatre valeurs.
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">Coin en haut à droite</td>
+      <td style="margin-left: 2px"><img src="top-right.png" /></td>
+      <td style="vertical-align: top">
+        Une valeur de longueur (type {{cssxref("&lt;length&gt;")}})
+        ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})
+        qui indique le rayon de courbure à utiliser pour le coin en haut à
+        droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la
+        syntaxe avec quatre valeurs.
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">Coin en bas à droite</td>
+      <td style="margin-left: 2px"><img src="bottom-rigth.png" /></td>
+      <td style="vertical-align: top">
+        Une valeur de longueur (type {{cssxref("&lt;length&gt;")}})
+        ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})
+        qui indique le rayon de courbure à utiliser pour le coin en bas à droite
+        de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe
+        avec trois ou quatre valeurs.
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">Coin en bas à gauche</td>
+      <td><img src="bottom-left.png" /></td>
+      <td style="vertical-align: top">
+        Une valeur de longueur (type {{cssxref("&lt;length&gt;")}})
+        ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})
+        qui indique le rayon de courbure à utiliser pour le coin en bas à gauche
+        de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe
+        avec quatre valeurs.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de {{cssxref("&lt;length&gt;")}}. Les valeurs négatives sont considérées comme invalides.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
-</dl>
+- `<length>`
+  - : Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de {{cssxref("&lt;length&gt;")}}. Les valeurs négatives sont considérées comme invalides.
+- `<percentage>`
+  - : Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.
 
-<p>Ainsi :</p>
+Ainsi :
 
-<pre class="brush: css">border-radius: 1em/5em;
+```css
+border-radius: 1em/5em;
 
 /* est équivalent à */
 
@@ -147,9 +187,10 @@ border-top-left-radius:     1em 5em;
 border-top-right-radius:    1em 5em;
 border-bottom-right-radius: 1em 5em;
 border-bottom-left-radius:  1em 5em;
-</pre>
+```
 
-<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px;
+```css
+border-radius: 4px 3px 6px / 2px 4px;
 
 /* est équivalent à : */
 
@@ -157,17 +198,18 @@ border-top-left-radius:     4px 2px;
 border-top-right-radius:    3px 4px;
 border-bottom-right-radius: 6px 2px;
 border-bottom-left-radius:  3px 4px;
-</pre>
+```
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   height: 100px;
   width: 200px;
   border-style: solid;
@@ -199,56 +241,41 @@ border-bottom-left-radius:  3px 4px;
 .slash {
   border-radius: 13em/3em;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="arrondi_droit"&gt;&lt;/div&gt;
+```html
+<div class="arrondi_droit"></div>
 
-&lt;div class="ellipse"&gt;&lt;/div&gt;
+<div class="ellipse"></div>
 
-&lt;div class="tirets"&gt;&lt;/div&gt;
+<div class="tirets"></div>
 
-&lt;div class="pointille"&gt;&lt;/div&gt;</pre>
+<div class="pointille"></div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","400")}}</p>
+{{EmbedLiveSample("Exemples","300","400")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
+
+{{cssinfo}}
 
-<p>{{cssinfo}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.properties.border-radius")}}
 
-<p>{{Compat("css.properties.border-radius")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- Les propriétés liées à la courbure de la bordure
 
-<ul>
- <li>Les propriétés liées à la courbure de la bordure
-  <ul>
-   <li>{{cssxref("border-top-left-radius")}},</li>
-   <li>{{cssxref("border-top-right-radius")}},</li>
-   <li>{{cssxref("border-bottom-right-radius")}},</li>
-   <li>{{cssxref("border-bottom-left-radius")}}.</li>
-  </ul>
- </li>
-</ul>
+  - {{cssxref("border-top-left-radius")}},
+  - {{cssxref("border-top-right-radius")}},
+  - {{cssxref("border-bottom-right-radius")}},
+  - {{cssxref("border-bottom-left-radius")}}.
diff --git a/files/fr/web/css/border-right-color/index.md b/files/fr/web/css/border-right-color/index.md
index 7ec0703a27..e45ff2b8b3 100644
--- a/files/fr/web/css/border-right-color/index.md
+++ b/files/fr/web/css/border-right-color/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/border-right-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-right-color</code></strong> définit la couleur utilisée pour la bordure droite d'un élément. Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-right")}}.</p>
+La propriété **`border-right-color`** définit la couleur utilisée pour la bordure droite d'un élément. Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-right")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-right-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-right-color.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+```css
+/* Valeurs de type <color> */
 border-right-color: red;
 border-right-color: rgb(255, 128, 0);
 border-right-color: hsla(100%, 50%, 25%, 0.75);
@@ -27,24 +28,23 @@ border-right-color: transparent;
 border-right-color: inherit;
 border-right-color: initial;
 border-right-color: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>&lt;<code>color&gt;</code></dt>
- <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté droit.</dd>
-</dl>
+- <`color>`
+  - : Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté droit.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.maboite {
+```css
+.maboite {
   border: solid 0.3em gold;
   border-right-color: red;
   width: auto;
@@ -52,71 +52,51 @@ border-right-color: unset;
 
 .texterouge {
   color: red;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="maboite"&gt;
-  &lt;p&gt;Une boîte avec une bordure autour.
+```html
+<div class="maboite">
+  <p>Une boîte avec une bordure autour.
      Notez le côté de la boîte qui est
-     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-right-color', 'border-right-color')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-right-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés raccourcies liées aux bordures
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-right")}},</li>
-   <li>{{cssxref("border-color")}}.</li>
-  </ul>
- </li>
- <li>Les propriétés de couleur pour les autres bordures :
-  <ul>
-   <li>{{cssxref("border-top-color")}},</li>
-   <li>{{cssxref("border-bottom-color")}},</li>
-   <li>{{cssxref("border-left-color")}}.</li>
-  </ul>
- </li>
- <li>Les autres propriétés liées à la bordure droite :
-  <ul>
-   <li>{{cssxref("border-right-style")}},</li>
-   <li>{{cssxref("border-right-width")}}.</li>
-  </ul>
- </li>
-</ul>
+     <span class="texterouge">rouge</span>.</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                     | Commentaires                                                                                                                                                             |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS3 Backgrounds', '#border-right-color', 'border-right-color')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification significative, la valeur `transparent` a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu. |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                                                                                                                     |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-right-color")}}
+
+## Voir aussi
+
+- Les propriétés raccourcies liées aux bordures
+
+  - {{cssxref("border")}},
+  - {{cssxref("border-right")}},
+  - {{cssxref("border-color")}}.
+
+- Les propriétés de couleur pour les autres bordures :
+
+  - {{cssxref("border-top-color")}},
+  - {{cssxref("border-bottom-color")}},
+  - {{cssxref("border-left-color")}}.
+
+- Les autres propriétés liées à la bordure droite :
+
+  - {{cssxref("border-right-style")}},
+  - {{cssxref("border-right-width")}}.
diff --git a/files/fr/web/css/border-right-style/index.md b/files/fr/web/css/border-right-style/index.md
index 13e84b546f..14e3bb98ac 100644
--- a/files/fr/web/css/border-right-style/index.md
+++ b/files/fr/web/css/border-right-style/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/border-right-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>border-right-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure sur le côté droit d'une boîte.</p>
+La propriété** `border-right-style`** définit le style de ligne utilisé pour mettre en forme la bordure sur le côté droit d'une boîte.
 
-<div>{{EmbedInteractiveExample("pages/css/border-right-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-right-style.html")}}
 
-<div class="note">
-  <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p>
-</div>
+> **Note :** La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 border-right-style: none;
 border-right-style: hidden;
 border-right-style: dotted;
@@ -35,73 +34,124 @@ border-right-style: outset;
 border-right-style: inherit;
 border-right-style: initial;
 border-right-style: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;br-style&gt;</code></dt>
- <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté droit. Il peut prendre l'une des valeurs suivantes :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>none</code></td>
-    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
-   </tr>
-   <tr>
-    <td><code>hidden</code></td>
-    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
-   </tr>
-   <tr>
-    <td><code>dotted</code></td>
-    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-right-width")}}.</td>
-   </tr>
-   <tr>
-    <td><code>dashed</code></td>
-    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
-   </tr>
-   <tr>
-    <td><code>solid</code></td>
-    <td>Affiche une ligne droite continue.</td>
-   </tr>
-   <tr>
-    <td><code>double</code></td>
-    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-right-width")}}.</td>
-   </tr>
-   <tr>
-    <td><code>groove</code></td>
-    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
-   </tr>
-   <tr>
-    <td><code>ridge</code></td>
-    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
-   </tr>
-   <tr>
-    <td><code>inset</code></td>
-    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
-   </tr>
-   <tr>
-    <td><code>outset</code></td>
-    <td>
-     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
-    </td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code>inherit</code></dt>
- <dd>Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<br-style>`
+
+  - : Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté droit. Il peut prendre l'une des valeurs suivantes :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>none</code></td>
+          <td>
+            L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure
+            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
+            définie, la valeur calculée de
+            {{cssxref("border-right-width")}} sera <code>0</code>, même
+            si cette dernière indique une autre valeur. Lorsqu'utilisée sur une
+            cellule d'un tableau avec la fusion des bordures, <code>none</code> a la
+            priorité la plus basse donc si une autre bordure est définie et fusionne
+            avec celle-ci, elle sera  affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>hidden</code></td>
+          <td>
+            L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure
+            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
+            définie, la valeur calculée de
+            {{cssxref("border-right-width")}} sera <code>0</code>, même
+            si cette dernière indique une autre valeur. Lorsqu'utilisée sur une
+            cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a
+            la plus haute priorité et donc si une autre bordure est définie et
+            fusionne avec celle-ci, aucune ne sera  affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>dotted</code></td>
+          <td>
+            Affiche une série de points ronds. L'espace entre ces points n'est pas
+            défini par la spécification et est donc laissé à l'implémentation. Le
+            rayon des points correspond à la moitié de
+            {{cssxref("border-right-width")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>dashed</code></td>
+          <td>
+            Affiche une série de tirets. La taille de ces tirets n'est pas définie
+            par la spécification et est laissée à l'implémentation.
+          </td>
+        </tr>
+        <tr>
+          <td><code>solid</code></td>
+          <td>Affiche une ligne droite continue.</td>
+        </tr>
+        <tr>
+          <td><code>double</code></td>
+          <td>
+            Deux lignes droites sont affichées dont la somme des épaisseurs
+            correspond à la valeur fournie par {{cssxref("border-width")}}
+            ou {{cssxref("border-right-width")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>groove</code></td>
+          <td>
+            La bordure crée un effet 3D donnant l'impression qu'elle a été gravée
+            dans le document. On obtient un effet opposé à <code>ridge</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>ridge</code></td>
+          <td>
+            La bordure crée un effet 3D donnant l'impression que la bordure ressort
+            du document. L'effet obtenu est opposé à celui obtenu avec
+            <code>groove</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>inset</code></td>
+          <td>
+            La bordure crée un effet 3D qui donne l'impression que la boîte est
+            renfoncée dans le document (l'effet obtenu est opposé à celui obtenu
+            avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de
+            tableau et que {{cssxref("border-collapse")}} vaut
+            <code>collapsed</code>, cette valeur se comporte comme
+            <code>groove</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>outset</code></td>
+          <td>
+            <p>
+              La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est
+              opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule
+              de tableau avec {{cssxref("border-collapse")}} qui vaut
+              <code>collapsed</code>, cette valeur se comporte comme
+              <code>ridge</code>.
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+- `inherit`
+  - : Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* On applique un style sur le tableau */
+```css
+/* On applique un style sur le tableau */
 table {
   border-width: 2px;
   background-color: #52E385;
@@ -120,79 +170,60 @@ tr, td {
 .b7 {border-right-style:groove;}
 .b8 {border-right-style:ridge;}
 .b9 {border-right-style:inset;}
-.b10 {border-right-style:outset;}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td class="b1"&gt;none&lt;/td&gt;
-    &lt;td class="b2"&gt;hidden&lt;/td&gt;
-    &lt;td class="b3"&gt;petits points&lt;/td&gt;
-    &lt;td class="b4"&gt;tirets&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td class="b5"&gt;solid&lt;/td&gt;
-    &lt;td class="b6"&gt;double&lt;/td&gt;
-    &lt;td class="b7"&gt;groove&lt;/td&gt;
-    &lt;td class="b8"&gt;ridge&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td class="b9"&gt;inset&lt;/td&gt;
-    &lt;td class="b10"&gt;outset&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
+.b10 {border-right-style:outset;}
+```
+
+### HTML
+
+```html
+<table>
   <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">petits points</td>
+    <td class="b4">tirets</td>
   </tr>
- </thead>
- <tbody>
   <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Aucune modification significative.</td>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
   </tr>
   <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
   </tr>
- </tbody>
 </table>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 300, 200)}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                     | Commentaires                       |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}         | {{Spec2('CSS3 Backgrounds')}} | Aucune modification significative. |
+| {{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-right-style")}}
+
+## Voir aussi
+
+- Les autres propriétés liées au style des bordures :
+
+  - {{cssxref("border-left-style")}}
+  - {{cssxref("border-top-style")}}
+  - {{cssxref("border-bottom-style")}}
+  - {{cssxref("border-style")}}.
+
+- Les autres propriétés liées à la bordure droite :
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-right-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres propriétés liées au style des bordures :
-  <ul>
-   <li>{{cssxref("border-left-style")}}</li>
-   <li>{{cssxref("border-top-style")}}</li>
-   <li>{{cssxref("border-bottom-style")}}</li>
-   <li>{{cssxref("border-style")}}.</li>
-  </ul>
- </li>
- <li>Les autres propriétés liées à la bordure droite :
-  <ul>
-   <li>{{cssxref("border-right")}}</li>
-   <li>{{cssxref("border-right-color")}}</li>
-   <li>{{cssxref("border-right-width")}}.</li>
-  </ul>
- </li>
-</ul>
+  - {{cssxref("border-right")}}
+  - {{cssxref("border-right-color")}}
+  - {{cssxref("border-right-width")}}.
diff --git a/files/fr/web/css/border-right-width/index.md b/files/fr/web/css/border-right-width/index.md
index f2233827aa..c92ef45a1f 100644
--- a/files/fr/web/css/border-right-width/index.md
+++ b/files/fr/web/css/border-right-width/index.md
@@ -7,21 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/border-right-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-right-width</code></strong> définit l'épaisseur de la bordure pour le côté droit d'une boîte.</p>
+La propriété **`border-right-width`** définit l'épaisseur de la bordure pour le côté droit d'une boîte.
 
-<div>{{EmbedInteractiveExample("pages/css/border-right-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-right-width.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 border-right-width: thin;
 border-right-width: medium;
 border-right-width: thick;
 
 /* Valeurs de longueurs */
-/* Type &lt;length&gt; */
+/* Type <length> */
 border-right-width: 10em;
 border-right-width: 3vmax;
 border-right-width: 6px;
@@ -29,30 +30,31 @@ border-right-width: 6px;
 /* Valeurs globales */
 border-right-width: inherit;
 border-right-width: initial;
-border-right-width: unset;</pre>
+border-right-width: unset;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;br-width&gt;</code></dt>
- <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté droit de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
-  <ul>
-    <li><code>thin</code> (fin)</li>
-    <li><code>medium</code> (intermédiaire)</li>
-    <li><code>thick</code> (épais)</li>
-  </ul>
- La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd>
-</dl>
+- `<br-width>`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté droit de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+
+    - `thin` (fin)
+    - `medium` (intermédiaire)
+    - `thick` (épais)
+
+    La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée `thin ≤ medium ≤ thick` et que ces valeurs soient constantes pour un même document.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.element1{
+```css
+.element1{
 	border-right: thick solid red;
 }
 .element2{
@@ -61,78 +63,54 @@ border-right-width: unset;</pre>
 .element3{
 	border-right: thin solid green;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="element1"&gt;
+```html
+<p class="element1">
   Une bordure épaisse rouge.
-&lt;/p&gt;
+</p>
 
-&lt;p class="element2"&gt;
+<p class="element2">
   Une bordure moyenne orange.
-&lt;/p&gt;
+</p>
 
-&lt;p class="element3"&gt;
+<p class="element3">
   Et une bordure fine verte.
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Pas de modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border-right-width', 'border-right-width')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-right-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres propriétés liées à la largeur de la bordure :
-  <ul>
-   <li>{{cssxref("border-left-width")}},</li>
-   <li>{{cssxref("border-top-width")}},</li>
-   <li>{{cssxref("border-bottom-width")}},</li>
-   <li>{{cssxref("border-width")}}</li>
-  </ul>
- </li>
- <li>Les autres propriétés CSS liées à la bordure du côté droit :
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-right")}},</li>
-   <li>{{cssxref("border-right-style")}},</li>
-   <li>{{cssxref("border-right-color")}}.</li>
-  </ul>
- </li>
-</ul>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","300")}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                     | Commentaires                       |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification significative. |
+| {{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}} | {{Spec2('CSS2.1')}}                 | Pas de modification significative. |
+| {{SpecName('CSS1', '#border-right-width', 'border-right-width')}}                     | {{Spec2('CSS1')}}                 | Définition initiale.               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-right-width")}}
+
+## Voir aussi
+
+- Les autres propriétés liées à la largeur de la bordure :
+
+  - {{cssxref("border-left-width")}},
+  - {{cssxref("border-top-width")}},
+  - {{cssxref("border-bottom-width")}},
+  - {{cssxref("border-width")}}
+
+- Les autres propriétés CSS liées à la bordure du côté droit :
+
+  - {{cssxref("border")}},
+  - {{cssxref("border-right")}},
+  - {{cssxref("border-right-style")}},
+  - {{cssxref("border-right-color")}}.
diff --git a/files/fr/web/css/border-right/index.md b/files/fr/web/css/border-right/index.md
index 9c33a5c287..ebd2e09e93 100644
--- a/files/fr/web/css/border-right/index.md
+++ b/files/fr/web/css/border-right/index.md
@@ -7,116 +7,95 @@ tags:
   - Reference
 translation_of: Web/CSS/border-right
 ---
-<div>{{CSSRef}}</div>
-
-<p>La propriété <strong><code>border-right</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de décrire la bordure droite d'un élément.</p>
-
-<p>Elle définit les valeurs des propriétés suivantes :</p>
-
-<ul>
- <li>{{cssxref("border-right-width")}},</li>
- <li>{{cssxref("border-right-style")}},</li>
- <li>{{cssxref("border-right-color")}}.</li>
-</ul>
-
-<div>{{EmbedInteractiveExample("pages/css/border-right.html")}}</div>
-
-<p>Ces propriétés permettent de décrire la bordure du côté droit d'un élément.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
-
-<p>Comme pour les autres propriétés raccourcies, <code>border-right</code> 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 :</p>
-
-<pre class="brush:css">  border-right-style: dotted;
-  border-right: thick green;
-</pre>
-
-<p>est équivalent à :</p>
-
-<pre class="brush:css">  border-right-style: dotted;
-  border-right: none thick green;
-</pre>
-
-<p> et la valeur {{cssxref("border-right-style")}} fournie avant <code>border-right</code> est ignorée.</p>
-
-<p>La valeur par défaut de {{cssxref("border-right-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">border-right: 1px;
+{{CSSRef}}
+
+La propriété **`border-right`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de décrire la bordure droite d'un élément.
+
+Elle définit les valeurs des propriétés suivantes :
+
+- {{cssxref("border-right-width")}},
+- {{cssxref("border-right-style")}},
+- {{cssxref("border-right-color")}}.
+
+{{EmbedInteractiveExample("pages/css/border-right.html")}}
+
+Ces propriétés permettent de décrire la bordure du côté droit d'un élément.
+
+> **Note :** Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.
+>
+> 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;
+> ```
+>
+> est équivalent à :
+>
+> ```css
+>   border-right-style: dotted;
+>   border-right: none thick green;
+> ```
+>
+> et la valeur {{cssxref("border-right-style")}} fournie avant `border-right` est ignorée.
+>
+> La valeur par défaut de {{cssxref("border-right-style")}} étant `none`, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.
+
+## Syntaxe
+
+```css
+border-right: 1px;
 border-right: 2px dotted;
 border-right: medium dashed green;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;br-width&gt; </code></dt>
- <dd>Voir {{cssxref("border-right-width")}}.</dd>
- <dt><code>&lt;br-style&gt; </code></dt>
- <dd>Voir {{cssxref("border-right-style")}}.</dd>
- <dt><code>&lt;color&gt; </code></dt>
- <dd>Voir {{cssxref("border-right-color")}}.</dd>
-</dl>
+- `<br-width> `
+  - : Voir {{cssxref("border-right-width")}}.
+- `<br-style> `
+  - : Voir {{cssxref("border-right-style")}}.
+- `<color> `
+  - : Voir {{cssxref("border-right-color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   border-right: 3px dotted orange;
-} </pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   En passant elle prit sur un rayon un pot
   de confiture portant cette étiquette,
   « MARMELADE D’ORANGES. »
-&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-right-color")}} s'applique.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border-right', 'border-right')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-right")}}</p>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","150")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires                                                                                                                  |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-right-color")}} s'applique. |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}} | {{Spec2('CSS2.1')}}                 | Aucune modification significative.                                                                                            |
+| {{SpecName('CSS1', '#border-right', 'border-right')}}                         | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                          |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-right")}}
diff --git a/files/fr/web/css/border-spacing/index.md b/files/fr/web/css/border-spacing/index.md
index f6e0d18643..20248d7b61 100644
--- a/files/fr/web/css/border-spacing/index.md
+++ b/files/fr/web/css/border-spacing/index.md
@@ -8,58 +8,54 @@ tags:
   - Tableaux CSS
 translation_of: Web/CSS/border-spacing
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-spacing</code></strong> définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque {{cssxref("border-collapse")}} vaut <code>separate</code>). Cette propriété est équivalente à l'attribut HTML déprécié {{htmlattrxref("cellspacing","table")}} mais une deuxième valeur peut être utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.</p>
+La propriété **`border-spacing`** définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque {{cssxref("border-collapse")}} vaut `separate`). Cette propriété est équivalente à l'attribut HTML déprécié {{htmlattrxref("cellspacing","table")}} mais une deuxième valeur peut être utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.
 
-<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
 
-<p>La valeur de <code>border-spacing</code> est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du <code>border-spacing</code> approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left).</p>
+La valeur de `border-spacing` est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du `border-spacing` approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left).
 
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>border-spacing</code> équivaut à l'attribut déprécié <code>cellspacing</code> de l'élément <code>&lt;table&gt;</code>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.</p>
-</div>
+> **Note :** La propriété `border-spacing` équivaut à l'attribut déprécié `cellspacing` de l'élément `<table>`, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css  no-line-numbers">/* Une valeur de longueur */
-/* Type &lt;length&gt;         */
+```css
+/* Une valeur de longueur */
+/* Type <length>         */
 border-spacing: 2px;
 
 /* La première valeur indique */
 /* l'espacement horizontal et */
-/* la seconde le vertical.    <em>*/</em>
+/* la seconde le vertical.    */
 border-spacing: 1cm 2em;
 
 /* Valeurs globales */
 border-spacing: inherit;
 border-spacing: initial;
 border-spacing: unset;
-</pre>
+```
 
-<p>La propriété <code>border-spacing</code> peut être définie avec une ou deux valeurs :</p>
+La propriété `border-spacing` peut être définie avec une ou deux valeurs :
 
-<ul>
- <li>Avec une valeur de type {{cssxref("&lt;length&gt;")}}, la valeur est utilisée pour l'espacement vertical ainsi que pour l'espacement horizontal.</li>
- <li>Avec deux valeurs de type {{cssxref("&lt;length&gt;")}}, la première définit l'espacement horizontal (entre les colonnes) et la seconde définit l'espacement vertical (entre les lignes).</li>
-</ul>
+- Avec une valeur de type {{cssxref("&lt;length&gt;")}}, la valeur est utilisée pour l'espacement vertical ainsi que pour l'espacement horizontal.
+- Avec deux valeurs de type {{cssxref("&lt;length&gt;")}}, la première définit l'espacement horizontal (entre les colonnes) et la seconde définit l'espacement vertical (entre les lignes).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>length</code></dt>
- <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}} qui décrit l'espacement entre les cellules.</dd>
-</dl>
+- `length`
+  - : Une valeur de longueur ({{cssxref("&lt;length&gt;")}} qui décrit l'espacement entre les cellules.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">table {
+```css
+table {
   border-collapse: separate;
   border: 1px solid #000;
 }
@@ -75,59 +71,47 @@ td {
 
 .deuxvaleurs {
   border-spacing: 5px 10px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table class="unevaleur"&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Ces cellules&lt;/td&gt;
-    &lt;td&gt;sont séparées par 5px&lt;/td&gt;
-    &lt;td&gt;tout autour.&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-&lt;br /&gt;
-&lt;table class="deuxvaleurs"&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Ces cellules&lt;/td&gt;
-    &lt;td&gt;sont séparées par 5px d'écart horizontal&lt;/td&gt;
-    &lt;td&gt;et 10px d'écart vertical.&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
+}
+```
+
+### HTML
+
+```html
+<table class="unevaleur">
   <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
+    <td>Ces cellules</td>
+    <td>sont séparées par 5px</td>
+    <td>tout autour.</td>
   </tr>
- </thead>
- <tbody>
+</table>
+<br />
+<table class="deuxvaleurs">
   <tr>
-   <td>{{SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
+    <td>Ces cellules</td>
+    <td>sont séparées par 5px d'écart horizontal</td>
+    <td>et 10px d'écart vertical.</td>
   </tr>
- </tbody>
 </table>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","300","300")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing')}} | {{Spec2('CSS2.1')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-spacing")}}</p>
+{{Compat("css.properties.border-spacing")}}
 
-<h2 id="Voir_auss">Voir auss</h2>
+## Voir auss
 
-<ul>
- <li>{{cssxref("border-collapse")}}</li>
- <li>{{cssxref("border-style")}}</li>
- <li>L'élément HTML {{htmlelement("table")}}</li>
-</ul>
+- {{cssxref("border-collapse")}}
+- {{cssxref("border-style")}}
+- L'élément HTML {{htmlelement("table")}}
diff --git a/files/fr/web/css/border-start-end-radius/index.md b/files/fr/web/css/border-start-end-radius/index.md
index 4c658bcdc7..8be51ce81f 100644
--- a/files/fr/web/css/border-start-end-radius/index.md
+++ b/files/fr/web/css/border-start-end-radius/index.md
@@ -9,12 +9,13 @@ tags:
   - Reference
 translation_of: Web/CSS/border-start-end-radius
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-start-end-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-start-end-radius`** définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 /* Avec une valeur, le coin sera circulaire */
 border-start-end-radius: 10px;
 border-start-end-radius: 1em;
@@ -26,28 +27,27 @@ border-start-end-radius: 1em 2em;
 border-start-end-radius: inherit;
 border-start-end-radius: initial;
 border-start-end-radius: unset;
-</pre>
+```
 
-<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-left-radius")}}.</p>
+Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-left-radius")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
-</dl>
+- `<length-percentage>`
+  - : Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: rebeccapurple;
   width: 120px;
   height: 120px;
@@ -59,47 +59,34 @@ border-start-end-radius: unset;
   padding: 10px;
   background-color: #fff;
   border-start-end-radius: 10px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="texteExemple">Exemple</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-start-end-radius")}}</p>
+{{Compat("css.properties.border-start-end-radius")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété physique correspondante : {{CSSxRef("border-bottom-left-radius")}}</li>
- <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
-</ul>
+- La propriété physique correspondante : {{CSSxRef("border-bottom-left-radius")}}
+- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
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 83c242af2a..6396962872 100644
--- a/files/fr/web/css/border-start-start-radius/index.md
+++ b/files/fr/web/css/border-start-start-radius/index.md
@@ -9,12 +9,13 @@ tags:
   - Reference
 translation_of: Web/CSS/border-start-start-radius
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>border-start-start-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`border-start-start-radius`** définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 /* Avec une valeur, le coin sera circulaire */
 border-start-start-radius: 10px;
 border-start-start-radius: 1em;
@@ -26,28 +27,27 @@ border-start-start-radius: 1em 2em;
 border-start-start-radius: inherit;
 border-start-start-radius: initial;
 border-start-start-radius: unset;
-</pre>
+```
 
-<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-left-radius")}}.</p>
+Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-left-radius")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
-</dl>
+- `<length-percentage>`
+  - : Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
 background-color: rebeccapurple;
 width: 120px;
 height: 120px;
@@ -59,47 +59,34 @@ writing-mode: vertical-rl;
 padding: 10px;
 background-color: #fff;
   border-start-start-radius: 10px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-&lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+<p class="texteExemple">Exemple</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.border-start-start-radius")}}</p>
+{{Compat("css.properties.border-start-start-radius")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété physique correspondante : {{CSSxRef("border-top-left-radius")}}</li>
- <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
-</ul>
+- La propriété physique correspondante : {{CSSxRef("border-top-left-radius")}}
+- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
diff --git a/files/fr/web/css/border-style/index.md b/files/fr/web/css/border-style/index.md
index 1ddbc35fff..49d502d41e 100644
--- a/files/fr/web/css/border-style/index.md
+++ b/files/fr/web/css/border-style/index.md
@@ -7,15 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/border-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>border-style</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément.</p>
+La propriété CSS **`border-style`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div
+{{EmbedInteractiveExample("pages/css/border-style.html")}}Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 border-style: none;
 border-style: hidden;
 border-style: dotted;
@@ -40,89 +39,144 @@ border-style: none solid dotted dashed;
 border-style: inherit;
 border-style: initial;
 border-style: unset;
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> La valeur par défaut de <code>border-style</code> est <code>none</code>. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de <code>none</code> ou de <code>hidden</code>.</p>
-</div>
-
-<p>La propriété <code>border-style</code> peut être définie avec une, deux, trois ou quatre valeurs :</p>
-
-<ul>
- <li><strong>Avec une valeur</strong>, celle-ci s'applique aux quatre côté</li>
- <li><strong>Avec deux valeurs</strong>, la première s'applique aux côté haut et bas et la seconde aux côtés gauche et droit</li>
- <li><strong>Avec trois valeurs</strong>, la première s'applique au côté haut, la deuxième aux côtés gauche et droit puis la troisième au côté bas</li>
- <li><strong>Avec quatre valeurs</strong>, les valeurs s'applique dans le sens des aiguilles d'une montre (la première sur le côté haut, la deuxième sur le côté droit, la troisième sur le côté bas et la quatrième sur le côté gauche).</li>
-</ul>
-
-<p>Chacune des valeurs peut être un des mots-clés parmi la liste suivante.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;line-style&gt;</code></dt>
- <dd>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 :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>none</code></td>
-    <td>
-     <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
-    </td>
-    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
-   </tr>
-   <tr>
-    <td><code>hidden</code></td>
-    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
-   </tr>
-   <tr>
-    <td><code>dotted</code></td>
-    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-width")}}.</td>
-   </tr>
-   <tr>
-    <td><code>dashed</code></td>
-    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
-   </tr>
-   <tr>
-    <td><code>solid</code></td>
-    <td>Affiche une ligne droite continue.</td>
-   </tr>
-   <tr>
-    <td><code>double</code></td>
-    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}}.</td>
-   </tr>
-   <tr>
-    <td><code>groove</code></td>
-    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
-   </tr>
-   <tr>
-    <td><code>ridge</code></td>
-    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
-   </tr>
-   <tr>
-    <td><code>inset</code></td>
-    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
-   </tr>
-   <tr>
-    <td><code>outset</code></td>
-    <td>
-     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
-    </td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+> **Note :** La valeur par défaut de `border-style` est `none`. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de `none` ou de `hidden`.
+
+La propriété `border-style` peut être définie avec une, deux, trois ou quatre valeurs :
+
+- **Avec une valeur**, celle-ci s'applique aux quatre côté
+- **Avec deux valeurs**, la première s'applique aux côté haut et bas et la seconde aux côtés gauche et droit
+- **Avec trois valeurs**, la première s'applique au côté haut, la deuxième aux côtés gauche et droit puis la troisième au côté bas
+- **Avec quatre valeurs**, les valeurs s'applique dans le sens des aiguilles d'une montre (la première sur le côté haut, la deuxième sur le côté droit, la troisième sur le côté bas et la quatrième sur le côté gauche).
+
+Chacune des valeurs peut être un des mots-clés parmi la liste suivante.
+
+### Valeurs
+
+- `<line-style>`
+
+  - : 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 :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>none</code></td>
+          <td>
+            <div
+              style="
+                border-width: 3px;
+                margin: 0.5em;
+                width: 3em;
+                height: 3em;
+                background-color: palegreen;
+              "
+            >
+               
+            </div>
+          </td>
+          <td>
+            L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure
+            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
+            définie, la valeur calculée de {{cssxref("border-width")}} sera
+            <code>0</code>, même si cette dernière indique une autre valeur.
+            Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des
+            bordures, <code>none</code> a la priorité la plus basse donc si une
+            autre bordure est définie et fusionne avec celle-ci, elle sera 
+            affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>hidden</code></td>
+          <td>
+            L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure
+            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
+            définie, la valeur calculée de {{cssxref("border-width")}} sera
+            <code>0</code>, même si cette dernière indique une autre valeur.
+            Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des
+            bordures, <code>hidden</code> a la plus haute priorité et donc si une
+            autre bordure est définie et fusionne avec celle-ci, aucune ne sera 
+            affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>dotted</code></td>
+          <td>
+            Affiche une série de points ronds. L'espace entre ces points n'est pas
+            défini par la spécification et est donc laissé à l'implémentation. Le
+            rayon des points correspond à la moitié de
+            {{cssxref("border-width")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>dashed</code></td>
+          <td>
+            Affiche une série de tirets. La taille de ces tirets n'est pas définie
+            par la spécification et est laissée à l'implémentation.
+          </td>
+        </tr>
+        <tr>
+          <td><code>solid</code></td>
+          <td>Affiche une ligne droite continue.</td>
+        </tr>
+        <tr>
+          <td><code>double</code></td>
+          <td>
+            Deux lignes droites sont affichées dont la somme des épaisseurs
+            correspond à la valeur fournie par {{cssxref("border-width")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>groove</code></td>
+          <td>
+            La bordure crée un effet 3D donnant l'impression qu'elle a été gravée
+            dans le document. On obtient un effet opposé à <code>ridge</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>ridge</code></td>
+          <td>
+            La bordure crée un effet 3D donnant l'impression que la bordure ressort
+            du document. L'effet obtenu est opposé à celui obtenu avec
+            <code>groove</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>inset</code></td>
+          <td>
+            La bordure crée un effet 3D qui donne l'impression que la boîte est
+            renfoncée dans le document (l'effet obtenu est opposé à celui obtenu
+            avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de
+            tableau et que {{cssxref("border-collapse")}} vaut
+            <code>collapsed</code>, cette valeur se comporte comme
+            <code>groove</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>outset</code></td>
+          <td>
+            <p>
+              La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est
+              opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule
+              de tableau avec {{cssxref("border-collapse")}} qui vaut
+              <code>collapsed</code>, cette valeur se comporte comme
+              <code>ridge</code>.
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* On définit la mise en forme */
+```css
+/* On définit la mise en forme */
 /* du tableau.                 */
 table {
     border-width: 3px;
@@ -142,77 +196,55 @@ tr, td {
 .b7 {border-style:groove;}
 .b8 {border-style:ridge;}
 .b9 {border-style:inset;}
-.b10 {border-style:outset;}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
-    &lt;tr&gt;
-        &lt;td class="b1"&gt;none&lt;/td&gt;
-        &lt;td class="b2"&gt;hidden&lt;/td&gt;
-        &lt;td class="b3"&gt;dotted&lt;/td&gt;
-        &lt;td class="b4"&gt;dashed&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-        &lt;td class="b5"&gt;solid&lt;/td&gt;
-        &lt;td class="b6"&gt;double&lt;/td&gt;
-        &lt;td class="b7"&gt;groove&lt;/td&gt;
-        &lt;td class="b8"&gt;ridge&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-        &lt;td class="b9"&gt;inset&lt;/td&gt;
-        &lt;td class="b10"&gt;outset&lt;/td&gt;
-    &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
-
-<h2 id="Spécific​ations">Spécific​ations</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Ajout du mot-clé <code>hidden</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+.b10 {border-style:outset;}
+```
+
+### HTML
+
+```html
+<table>
+    <tr>
+        <td class="b1">none</td>
+        <td class="b2">hidden</td>
+        <td class="b3">dotted</td>
+        <td class="b4">dashed</td>
+    </tr>
+    <tr>
+        <td class="b5">solid</td>
+        <td class="b6">double</td>
+        <td class="b7">groove</td>
+        <td class="b8">ridge</td>
+    </tr>
+    <tr>
+        <td class="b9">inset</td>
+        <td class="b10">outset</td>
+    </tr>
 </table>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 300, 200)}}
+
+## Spécific​ations
+
+| Spécification                                                                                    | État                                     | Commentaires               |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}         | {{Spec2('CSS3 Backgrounds')}} | Aucune modification.       |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}} | {{Spec2('CSS2.1')}}                 | Ajout du mot-clé `hidden`. |
+| {{SpecName('CSS1', '#border-style', 'border-style')}}                         | {{Spec2('CSS1')}}                 | Définition initiale.       |
+
+{{cssinfo}}
 
-<p>{{cssinfo}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.properties.border-style")}}
 
-<p>{{Compat("css.properties.border-style")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- Les autres propriétés raccourcies liées aux bordures :
 
-<ul>
- <li>Les autres propriétés raccourcies liées aux bordures :
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-width")}},</li>
-   <li>{{cssxref("border-color")}},</li>
-   <li>{{cssxref("border-radius")}}.</li>
-  </ul>
- </li>
-</ul>
+  - {{cssxref("border")}},
+  - {{cssxref("border-width")}},
+  - {{cssxref("border-color")}},
+  - {{cssxref("border-radius")}}.
diff --git a/files/fr/web/css/border-top-color/index.md b/files/fr/web/css/border-top-color/index.md
index 4abdfc1493..a465522e3c 100644
--- a/files/fr/web/css/border-top-color/index.md
+++ b/files/fr/web/css/border-top-color/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/border-top-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-top-color</code></strong> définit la couleur utilisée pour la bordure haute d'un élément.</p>
+La propriété **`border-top-color`** définit la couleur utilisée pour la bordure haute d'un élément.
 
-<p>Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-top")}}.</p>
+Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-top")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-top-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-top-color.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+```css
+/* Valeurs de type <color> */
 border-top-color: red;
 border-top-color: #ffbb00;
 border-top-color: rgb(255, 0, 0);
@@ -29,24 +30,23 @@ border-top-color: transparent;
 border-top-color: inherit;
 border-top-color: initial;
 border-top-color: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté haut.</dd>
-</dl>
+- `<color>`
+  - : Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté haut.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.maboite {
+```css
+.maboite {
   border: solid 0.3em gold;
   border-top-color: red;
   width: auto;
@@ -54,71 +54,51 @@ border-top-color: unset;
 
 .texterouge {
   color: red;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="maboite"&gt;
-  &lt;p&gt;Une boîte avec une bordure autour.
+```html
+<div class="maboite">
+  <p>Une boîte avec une bordure autour.
      Notez le côté de la boîte qui est
-     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-top-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés raccourciées liées aux bordures
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-top")}},</li>
-   <li>{{cssxref("border-color")}}.</li>
-  </ul>
- </li>
- <li>Les propriétés de couleur pour les autres bordures :
-  <ul>
-   <li>{{cssxref("border-right-color")}},</li>
-   <li>{{cssxref("border-bottom-color")}},</li>
-   <li>{{cssxref("border-left-color")}}.</li>
-  </ul>
- </li>
- <li>Les autres propriétés liées à la bordure du haut :
-  <ul>
-   <li>{{cssxref("border-top-style")}},</li>
-   <li>{{cssxref("border-top-width")}}.</li>
-  </ul>
- </li>
-</ul>
+     <span class="texterouge">rouge</span>.</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                     | Commentaires                                                                                                                                                             |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification significative, la valeur `transparent` a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu. |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                                                                                                                     |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-top-color")}}
+
+## Voir aussi
+
+- Les propriétés raccourciées liées aux bordures
+
+  - {{cssxref("border")}},
+  - {{cssxref("border-top")}},
+  - {{cssxref("border-color")}}.
+
+- Les propriétés de couleur pour les autres bordures :
+
+  - {{cssxref("border-right-color")}},
+  - {{cssxref("border-bottom-color")}},
+  - {{cssxref("border-left-color")}}.
+
+- Les autres propriétés liées à la bordure du haut :
+
+  - {{cssxref("border-top-style")}},
+  - {{cssxref("border-top-width")}}.
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 0c34d5e94d..c6de181fc3 100644
--- a/files/fr/web/css/border-top-left-radius/index.md
+++ b/files/fr/web/css/border-top-left-radius/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/border-top-left-radius
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-top-left-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en haut à gauche de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut <code>0</code>, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+La propriété **`border-top-left-radius`** définit le rayon de courbure de la bordure pour le coin en haut à gauche de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut `0`, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}
 
-<div class="note">
-  <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p>
-</div>
+> **Note :** Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après `border-top-left-radius`, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de [la propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+```css
+/* Le coin est un quart de cercle         */
 /* La valeur indique le rayon de courbure */
 border-top-left-radius: 3px;
 
@@ -30,36 +29,31 @@ border-top-left-radius: 3px;
 border-top-left-radius: 0.5em 1em;
 
 border-top-left-radius: inherit;
-</pre>
+```
 
-<p>Cette propriété peut prendre deux formes :</p>
+Cette propriété peut prendre deux formes :
 
-<ul>
- <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
- <li>Une seconde avec deux valeurs
-  <ul>
-   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
-   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
-  </ul>
- </li>
-</ul>
+- Une première avec une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure pour ce coin
+- Une seconde avec deux valeurs
 
-<h3 id="Valeurs">Valeurs</h3>
+  - La première est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
+  - La seconde est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.</dd>
-</dl>
+### Valeurs
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- `<length-percentage>`
+  - : La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: lightgreen;
   border: solid 1px black;
   width: 100px;
@@ -84,53 +78,38 @@ border-top-left-radius: inherit;
   background-color: rgb(250,20,70);
   background-clip: content-box; // essayez margin-box...
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
- &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
- &lt;div class="pourcentage"&gt;&lt;/div&gt;
- &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-top-left-radius")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
- <li>Les propriétés pour les autres coins :
-  <ul>
-   <li>{{cssxref("border-top-right-radius")}},</li>
-   <li>{{cssxref("border-bottom-right-radius")}},</li>
-   <li>{{cssxref("border-bottom-left-radius")}}.</li>
-  </ul>
- </li>
-</ul>
+```
+
+### HTML
+
+```html
+ <div class="arc_cercle"></div>
+ <div class="arc_ellipse"></div>
+ <div class="pourcentage"></div>
+ <div class="rognage"></div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","540")}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-top-left-radius")}}
+
+## Voir aussi
+
+- La propriété raccourcie {{cssxref("border-radius")}}
+- Les propriétés pour les autres coins :
+
+  - {{cssxref("border-top-right-radius")}},
+  - {{cssxref("border-bottom-right-radius")}},
+  - {{cssxref("border-bottom-left-radius")}}.
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 51c7324d0f..1032da0ec7 100644
--- a/files/fr/web/css/border-top-right-radius/index.md
+++ b/files/fr/web/css/border-top-right-radius/index.md
@@ -7,21 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/border-top-right-radius
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-top-right-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en haut à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut <code>0</code>, aucun arrondi n'a lieu et le coin est un angle droit.</p>
+La propriété **`border-top-right-radius`** définit le rayon de courbure de la bordure pour le coin en haut à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut `0`, aucun arrondi n'a lieu et le coin est un angle droit.
 
-<div>{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}
 
-<p>Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.
 
-<div class="note">
-  <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-radius-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Shorthand_properties">la propriété raccourcie</a>.</p>
-</div>
+> **Note :** Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après `border-top-radius-radius`, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de [la propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+```css
+/* Le coin est un quart de cercle         */
 /* La valeur indique le rayon de courbure */
 border-top-right-radius: 3px;
 
@@ -32,36 +31,31 @@ border-top-right-radius: 3px;
 border-top-right-radius: 0.5em 1em;
 
 border-top-right-radius: inherit;
-</pre>
+```
 
-<p>Cette propriété peut prendre deux formes :</p>
+Cette propriété peut prendre deux formes :
 
-<ul>
- <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
- <li>Une seconde avec deux valeurs
-  <ul>
-   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
-   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
-  </ul>
- </li>
-</ul>
+- Une première avec une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure pour ce coin
+- Une seconde avec deux valeurs
 
-<h3 id="Valeurs">Valeurs</h3>
+  - La première est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin
+  - La seconde est une longueur (`<length>`) ou un pourcentage (`<percentage>`) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées<code>.</code></dd>
-</dl>
+### Valeurs
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- `<length-percentage>`
+  - : La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées`.`
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: lightgreen;
   border: solid 1px black;
   width: 100px;
@@ -86,53 +80,38 @@ border-top-right-radius: inherit;
   background-color: rgb(250,20,70);
   background-clip: content-box; // essayez margin-box...
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
- &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
- &lt;div class="pourcentage"&gt;&lt;/div&gt;
- &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-top-right-radius")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
- <li>Les propriétés pour les autres coins :
-  <ul>
-   <li>{{cssxref("border-top-left-radius")}},</li>
-   <li>{{cssxref("border-bottom-right-radius")}},</li>
-   <li>{{cssxref("border-bottom-left-radius")}}.</li>
-  </ul>
- </li>
-</ul>
+```
+
+### HTML
+
+```html
+ <div class="arc_cercle"></div>
+ <div class="arc_ellipse"></div>
+ <div class="pourcentage"></div>
+ <div class="rognage"></div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","540")}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-top-right-radius")}}
+
+## Voir aussi
+
+- La propriété raccourcie {{cssxref("border-radius")}}
+- Les propriétés pour les autres coins :
+
+  - {{cssxref("border-top-left-radius")}},
+  - {{cssxref("border-bottom-right-radius")}},
+  - {{cssxref("border-bottom-left-radius")}}.
diff --git a/files/fr/web/css/border-top-style/index.md b/files/fr/web/css/border-top-style/index.md
index aa175464ec..e95aca2f87 100644
--- a/files/fr/web/css/border-top-style/index.md
+++ b/files/fr/web/css/border-top-style/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/border-top-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>border-top-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure en haut d'une boîte.</p>
+La propriété** `border-top-style`** définit le style de ligne utilisé pour mettre en forme la bordure en haut d'une boîte.
 
-<div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-top-style.html")}}
 
-<div class="note">
-  <p><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</p>
-</div>
+> **Note :** La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 border-top-style: none;
 border-top-style: hidden;
 border-top-style: dotted;
@@ -35,73 +34,124 @@ border-top-style: outset;
 border-top-style: inherit;
 border-top-style: inherit;
 border-top-style: inherit;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;br-style&gt;</code></dt>
- <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté haut. Il peut prendre l'une des valeurs suivantes :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>none</code></td>
-    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
-   </tr>
-   <tr>
-    <td><code>hidden</code></td>
-    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
-   </tr>
-   <tr>
-    <td><code>dotted</code></td>
-    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-top-width")}}.</td>
-   </tr>
-   <tr>
-    <td><code>dashed</code></td>
-    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
-   </tr>
-   <tr>
-    <td><code>solid</code></td>
-    <td>Affiche une ligne droite continue.</td>
-   </tr>
-   <tr>
-    <td><code>double</code></td>
-    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-top-width")}}.</td>
-   </tr>
-   <tr>
-    <td><code>groove</code></td>
-    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
-   </tr>
-   <tr>
-    <td><code>ridge</code></td>
-    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
-   </tr>
-   <tr>
-    <td><code>inset</code></td>
-    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
-   </tr>
-   <tr>
-    <td><code>outset</code></td>
-    <td>
-     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
-    </td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code>inherit</code></dt>
- <dd>Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<br-style>`
+
+  - : Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté haut. Il peut prendre l'une des valeurs suivantes :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>none</code></td>
+          <td>
+            L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure
+            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
+            définie, la valeur calculée de {{cssxref("border-top-width")}}
+            sera <code>0</code>, même si cette dernière indique une autre valeur.
+            Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des
+            bordures, <code>none</code> a la priorité la plus basse donc si une
+            autre bordure est définie et fusionne avec celle-ci, elle sera 
+            affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>hidden</code></td>
+          <td>
+            L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure
+            n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est
+            définie, la valeur calculée de {{cssxref("border-top-width")}}
+            sera <code>0</code>, même si cette dernière indique une autre valeur.
+            Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des
+            bordures, <code>hidden</code> a la plus haute priorité et donc si une
+            autre bordure est définie et fusionne avec celle-ci, aucune ne sera 
+            affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>dotted</code></td>
+          <td>
+            Affiche une série de points ronds. L'espace entre ces points n'est pas
+            défini par la spécification et est donc laissé à l'implémentation. Le
+            rayon des points correspond à la moitié de
+            {{cssxref("border-top-width")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>dashed</code></td>
+          <td>
+            Affiche une série de tirets. La taille de ces tirets n'est pas définie
+            par la spécification et est laissée à l'implémentation.
+          </td>
+        </tr>
+        <tr>
+          <td><code>solid</code></td>
+          <td>Affiche une ligne droite continue.</td>
+        </tr>
+        <tr>
+          <td><code>double</code></td>
+          <td>
+            Deux lignes droites sont affichées dont la somme des épaisseurs
+            correspond à la valeur fournie par {{cssxref("border-width")}}
+            ou {{cssxref("border-top-width")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>groove</code></td>
+          <td>
+            La bordure crée un effet 3D donnant l'impression qu'elle a été gravée
+            dans le document. On obtient un effet opposé à <code>ridge</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>ridge</code></td>
+          <td>
+            La bordure crée un effet 3D donnant l'impression que la bordure ressort
+            du document. L'effet obtenu est opposé à celui obtenu avec
+            <code>groove</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>inset</code></td>
+          <td>
+            La bordure crée un effet 3D qui donne l'impression que la boîte est
+            renfoncée dans le document (l'effet obtenu est opposé à celui obtenu
+            avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de
+            tableau et que {{cssxref("border-collapse")}} vaut
+            <code>collapsed</code>, cette valeur se comporte comme
+            <code>groove</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>outset</code></td>
+          <td>
+            <p>
+              La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est
+              opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule
+              de tableau avec {{cssxref("border-collapse")}} qui vaut
+              <code>collapsed</code>, cette valeur se comporte comme
+              <code>ridge</code>.
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+- `inherit`
+  - : Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* On applique un style sur le tableau */
+```css
+/* On applique un style sur le tableau */
 table {
   border-width: 2px;
   background-color: #52E385;
@@ -120,79 +170,60 @@ tr, td {
 .b7 {border-top-style:groove;}
 .b8 {border-top-style:ridge;}
 .b9 {border-top-style:inset;}
-.b10 {border-top-style:outset;}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td class="b1"&gt;none&lt;/td&gt;
-    &lt;td class="b2"&gt;hidden&lt;/td&gt;
-    &lt;td class="b3"&gt;petits points&lt;/td&gt;
-    &lt;td class="b4"&gt;tirets&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td class="b5"&gt;solid&lt;/td&gt;
-    &lt;td class="b6"&gt;double&lt;/td&gt;
-    &lt;td class="b7"&gt;groove&lt;/td&gt;
-    &lt;td class="b8"&gt;ridge&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td class="b9"&gt;inset&lt;/td&gt;
-    &lt;td class="b10"&gt;outset&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
+.b10 {border-top-style:outset;}
+```
+
+### HTML
+
+```html
+<table>
   <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">petits points</td>
+    <td class="b4">tirets</td>
   </tr>
- </thead>
- <tbody>
   <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Aucune modification significative.</td>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
   </tr>
   <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
   </tr>
- </tbody>
 </table>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 300, 200)}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                     | Commentaires                       |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}         | {{Spec2('CSS3 Backgrounds')}} | Aucune modification significative. |
+| {{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-top-style")}}
+
+## Voir aussi
+
+- Les autres propriétés liées au style des bordures :
+
+  - {{cssxref("border-left-style")}}
+  - {{cssxref("border-right-style")}}
+  - {{cssxref("border-bottom-style")}}
+  - {{cssxref("border-style")}}.
+
+- Les autres propriétés liées à la bordure haute :
 
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-top-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres propriétés liées au style des bordures :
-  <ul>
-   <li>{{cssxref("border-left-style")}}</li>
-   <li>{{cssxref("border-right-style")}}</li>
-   <li>{{cssxref("border-bottom-style")}}</li>
-   <li>{{cssxref("border-style")}}.</li>
-  </ul>
- </li>
- <li>Les autres propriétés liées à la bordure haute :
-  <ul>
-   <li>{{cssxref("border-top")}}</li>
-   <li>{{cssxref("border-top-color")}}</li>
-   <li>{{cssxref("border-top-width")}}.</li>
-  </ul>
- </li>
-</ul>
+  - {{cssxref("border-top")}}
+  - {{cssxref("border-top-color")}}
+  - {{cssxref("border-top-width")}}.
diff --git a/files/fr/web/css/border-top-width/index.md b/files/fr/web/css/border-top-width/index.md
index e96b5ef89f..b248ebff5f 100644
--- a/files/fr/web/css/border-top-width/index.md
+++ b/files/fr/web/css/border-top-width/index.md
@@ -7,16 +7,17 @@ tags:
   - Reference
 translation_of: Web/CSS/border-top-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>border-top-width</code></strong> définit l'épaisseur de la bordure pour le côté haut d'une boîte.</p>
+La propriété **`border-top-width`** définit l'épaisseur de la bordure pour le côté haut d'une boîte.
 
-<div>{{EmbedInteractiveExample("pages/css/border-top-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-top-width.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Une valeur de longueur */
-/* Type &lt;length&gt;          */
+```css
+/* Une valeur de longueur */
+/* Type <length>          */
 border-top-width: 10em;
 border-top-width: 3vmax;
 border-top-width: 6px;
@@ -30,30 +31,30 @@ border-top-width: thick;
 border-top-width: inherit;
 border-top-width: initial;
 border-top-width: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;line-width&gt;</code></dt>
- <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le haut de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
-  <ul>
-    <li><code>thin</code> (fin)</li>
-    <li><code>medium</code> (intermédiaire)</li>
-    <li><code>thick</code> (épais)</li>
-  </ul>
- La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd>
-</dl>
+- `<line-width>`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le haut de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+
+    - `thin` (fin)
+    - `medium` (intermédiaire)
+    - `thick` (épais)
+
+    La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée `thin ≤ medium ≤ thick` et que ces valeurs soient constantes pour un même document.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.element1{
+```css
+.element1{
 	border-top: thick solid red;
 }
 .element2{
@@ -62,73 +63,53 @@ border-top-width: unset;
 .element3{
 	border-top: thin solid green;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="element1"&gt;
+```html
+<p class="element1">
   Une bordure épaisse rouge.
-&lt;/p&gt;
+</p>
 
-&lt;p class="element2"&gt;
+<p class="element2">
   Une bordure moyenne orange.
-&lt;/p&gt;
+</p>
 
-&lt;p class="element3"&gt;
+<p class="element3">
   Et une bordure fine verte.
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-top-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres propriétés liées à la largeur de la bordure :
-  <ul>
-   <li>{{cssxref("border-left-width")}},</li>
-   <li>{{cssxref("border-right-width")}},</li>
-   <li>{{cssxref("border-bottom-width")}},</li>
-   <li>{{cssxref("border-width")}}</li>
-  </ul>
- </li>
- <li>Les autres propriétés CSS liées à la bordure du côté haut :
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-top")}},</li>
-   <li>{{cssxref("border-top-style")}},</li>
-   <li>{{cssxref("border-top-color")}}.</li>
-  </ul>
- </li>
-</ul>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","300")}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                     | Commentaires                       |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification significative. |
+| {{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-top-width")}}
+
+## Voir aussi
+
+- Les autres propriétés liées à la largeur de la bordure :
+
+  - {{cssxref("border-left-width")}},
+  - {{cssxref("border-right-width")}},
+  - {{cssxref("border-bottom-width")}},
+  - {{cssxref("border-width")}}
+
+- Les autres propriétés CSS liées à la bordure du côté haut :
+
+  - {{cssxref("border")}},
+  - {{cssxref("border-top")}},
+  - {{cssxref("border-top-style")}},
+  - {{cssxref("border-top-color")}}.
diff --git a/files/fr/web/css/border-top/index.md b/files/fr/web/css/border-top/index.md
index 4b9d59fe82..97a5101d98 100644
--- a/files/fr/web/css/border-top/index.md
+++ b/files/fr/web/css/border-top/index.md
@@ -7,116 +7,95 @@ tags:
   - Reference
 translation_of: Web/CSS/border-top
 ---
-<div>{{CSSRef}}</div>
-
-<p>La propriété CSS <strong><code>border-top</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer la bordure haute d'un élément.</p>
-
-<p>C'est une propriété raccourcie qui permet de définir les valeurs de :</p>
-
-<ul>
- <li>{{cssxref("border-top-width")}},</li>
- <li>{{cssxref("border-top-style")}},</li>
- <li>{{cssxref("border-top-color")}}.</li>
-</ul>
-
-<div>{{EmbedInteractiveExample("pages/css/border-top.html")}}</div>
-
-<div class="note">
-<p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
-
-<p>Comme pour les autres propriétés raccourcies, <code>border-top</code> 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 :</p>
-
-<pre class="brush:css">border-top-style: dotted;
-border-top: thick green;
-</pre>
-
-<p>est équivalent à :</p>
-
-<pre class="brush:css">border-top-style: dotted;
-border-top: none thick green;
-</pre>
-
-<p> et la valeur {{cssxref("border-top-style")}} fournie avant <code>border-top</code> est ignorée.</p>
-
-<p>La valeur par défaut de {{cssxref("border-top-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">border-top: 1px;
+{{CSSRef}}
+
+La propriété CSS **`border-top`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer la bordure haute d'un élément.
+
+C'est une propriété raccourcie qui permet de définir les valeurs de :
+
+- {{cssxref("border-top-width")}},
+- {{cssxref("border-top-style")}},
+- {{cssxref("border-top-color")}}.
+
+{{EmbedInteractiveExample("pages/css/border-top.html")}}
+
+> **Note :** Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.
+>
+> Comme pour les autres propriétés raccourcies, `border-top` 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-top-style: dotted;
+> border-top: thick green;
+> ```
+>
+> est équivalent à :
+>
+> ```css
+> border-top-style: dotted;
+> border-top: none thick green;
+> ```
+>
+> et la valeur {{cssxref("border-top-style")}} fournie avant `border-top` est ignorée.
+>
+> La valeur par défaut de {{cssxref("border-top-style")}} étant `none`, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.
+
+## Syntaxe
+
+```css
+border-top: 1px;
 border-top: 2px dotted;
 border-top: medium dashed green;
-</pre>
+```
 
-<p>Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe quel ordre et une voire deux valeurs peuvent être omises.</p>
+Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe quel ordre et une voire deux valeurs peuvent être omises.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;br-width&gt; </code></dt>
- <dd>Voir {{cssxref("border-top-width")}}.</dd>
- <dt><code>&lt;br-style&gt; </code></dt>
- <dd>Voir {{cssxref("border-top-style")}}.</dd>
- <dt><code>&lt;color&gt; </code></dt>
- <dd>Voir {{cssxref("border-top-color")}}.</dd>
-</dl>
+- `<br-width> `
+  - : Voir {{cssxref("border-top-width")}}.
+- `<br-style> `
+  - : Voir {{cssxref("border-top-style")}}.
+- `<color> `
+  - : Voir {{cssxref("border-top-color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   border-top: 3px dotted orange;
-} </pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   En passant elle prit sur un rayon un pot
   de confiture portant cette étiquette,
   « MARMELADE D’ORANGES. »
-&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-top-color")}} s'applique.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-top")}}</p>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","150")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                                                                                              |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-top-color")}} s'applique. |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}} | {{Spec2('CSS2.1')}}                 | Aucune modification significative.                                                                                        |
+| {{SpecName('CSS1', '#border-top', 'border-top')}}                         | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                      |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-top")}}
diff --git a/files/fr/web/css/border-width/index.md b/files/fr/web/css/border-width/index.md
index f41d3cb8a7..b4a0b769d6 100644
--- a/files/fr/web/css/border-width/index.md
+++ b/files/fr/web/css/border-width/index.md
@@ -7,36 +7,35 @@ tags:
   - Reference
 translation_of: Web/CSS/border-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>border-width</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui définit la largeur de la bordure d'un élément.</p>
+La propriété CSS **`border-width`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui définit la largeur de la bordure d'un élément.
 
-<p>Cette propriété raccourcie définit les propriétés détaillées</p>
+Cette propriété raccourcie définit les propriétés détaillées
 
-<ul>
- <li>{{cssxref("border-top-width")}},</li>
- <li>{{cssxref("border-right-width")}},</li>
- <li>{{cssxref("border-bottom-width")}}</li>
- <li>{{cssxref("border-left-width")}}.</li>
-</ul>
+- {{cssxref("border-top-width")}},
+- {{cssxref("border-right-width")}},
+- {{cssxref("border-bottom-width")}}
+- {{cssxref("border-left-width")}}.
 
-<p>Si on utilise les propriétés logiques, elle définit {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} et {{cssxref("border-inline-end-width")}}.</p>
+Si on utilise les propriétés logiques, elle définit {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} et {{cssxref("border-inline-end-width")}}.
 
-<p>Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie {{cssxref("border")}}.</p>
+Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie {{cssxref("border")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border-width.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 border-width: thin;
 border-width: medium;
 border-width: thick;
 
 /* Une largeur pour chaque côté */
-/* Valeur de type &lt;length&gt; */<em>
-</em>border-width: 5px;<em>
-</em>
+/* Valeur de type <length> */
+border-width: 5px;
+
 /* largeur verticale puis horizontale */
 border-width: 2px 1.5em;
 
@@ -50,63 +49,63 @@ border-width: 1px 2em 0 4rem;
 border-width: inherit;
 border-width: initial;
 border-width: unset;
-</pre>
+```
+
+La propriété `border-width` peut être définie avec une, deux, trois ou quatre valeurs.
+
+- Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés
+- Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite
+- Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse
+- Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).
 
-<p>La propriété <code>border-width</code> peut être définie avec une, deux, trois ou quatre valeurs.</p>
+### Valeurs
 
-<ul>
- <li>Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés</li>
- <li>Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite</li>
- <li>Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse</li>
- <li>Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).</li>
-</ul>
+- `<line-width>`
 
-<h3 id="Valeurs">Valeurs</h3>
+  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}} ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes :
 
-<dl>
- <dt><code>&lt;line-width&gt;</code></dt>
- <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}} ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes :
-  <ul>
-    <li><code>thin</code> (fin)</li>
-    <li><code>medium</code> (intermédiaire)</li>
-    <li><code>thick</code> (épais)</li>
-  </ul>
-  La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante : <code>thin ≤ medium ≤ thick</code> et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.</dd>
-</dl>
+    - `thin` (fin)
+    - `medium` (intermédiaire)
+    - `thick` (épais)
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante : `thin ≤ medium ≤ thick` et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p id="unevaleur"&gt;
+```html
+<p id="unevaleur">
   Une valeur : la bordure fait 6px sur les 4 côtés.
-&lt;/p&gt;
+</p>
 
-&lt;p id="deuxvaleurs"&gt;
+<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.
-&lt;/p&gt;
+</p>
 
-&lt;p id="troisvaleurs"&gt;
+<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.
-&lt;/p&gt;
+</p>
 
-&lt;p id="quatrevaleurs"&gt;
+<p id="quatrevaleurs">
   Quatre valeurs différentes : "thin" pour le haut,
   "medium" pour la droite, "thick" pour le bas
   et 1em pour la gauche.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#unevaleur {
+```css
+#unevaleur {
   border: ridge #ccc;
   border-width: 6px;
 }
@@ -130,63 +129,38 @@ p {
   width: auto;
   margin: 0.25em;
   padding: 0.25em;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 300, 180) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Pas de modification directe. La modification du type de données {{cssxref("&lt;length&gt;")}} impacte cette propriété.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Ajout de la contrainte indiquant que la signification des valeurs doit être constante au sein d'un document.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés raccourcies liées aux bordures
-  <ul>
-   <li>{{cssxref("border")}},</li>
-   <li>{{cssxref("border-style")}}</li>
-   <li>{{cssxref("border-color")}}</li>
-  </ul>
- </li>
- <li>Les propriétés liées à la largeur des bordures
-  <ul>
-   <li>{{cssxref("border-bottom-width")}},</li>
-   <li>{{cssxref("border-left-width")}},</li>
-   <li>{{cssxref("border-right-width")}},</li>
-   <li>{{cssxref("border-top-width")}}</li>
-  </ul>
- </li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 300, 180) }}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                     | Commentaires                                                                                                                      |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}         | {{Spec2('CSS3 Backgrounds')}} | Pas de modification directe. La modification du type de données {{cssxref("&lt;length&gt;")}} impacte cette propriété. |
+| {{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}} | {{Spec2('CSS2.1')}}                 | Ajout de la contrainte indiquant que la signification des valeurs doit être constante au sein d'un document.                      |
+| {{SpecName('CSS1', '#border-width', 'border-width')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                              |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border-width")}}
+
+## Voir aussi
+
+- Les propriétés raccourcies liées aux bordures
+
+  - {{cssxref("border")}},
+  - {{cssxref("border-style")}}
+  - {{cssxref("border-color")}}
+
+- Les propriétés liées à la largeur des bordures
+
+  - {{cssxref("border-bottom-width")}},
+  - {{cssxref("border-left-width")}},
+  - {{cssxref("border-right-width")}},
+  - {{cssxref("border-top-width")}}
diff --git a/files/fr/web/css/border/index.md b/files/fr/web/css/border/index.md
index 1c1edbdede..547f4aad0d 100644
--- a/files/fr/web/css/border/index.md
+++ b/files/fr/web/css/border/index.md
@@ -7,30 +7,27 @@ tags:
   - Reference
 translation_of: Web/CSS/border
 ---
-<div>{{CSSRef("CSS Borders")}}</div>
+{{CSSRef("CSS Borders")}}
 
-<p>La propriété CSS <strong><code>border</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> qui permet de définir les propriétés liées à la bordure. <code>border</code> peut être utilisée pour définir les valeurs de {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}}.</p>
+La propriété CSS **`border`** est [une propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) qui permet de définir les propriétés liées à la bordure. `border` peut être utilisée pour définir les valeurs de {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
+{{EmbedInteractiveExample("pages/css/border.html")}}
 
-<p>Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que {{cssxref("border-image")}} ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est <code>none</code>). Ainsi, <code>border</code> peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.</p>
+Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que {{cssxref("border-image")}} ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est `none`). Ainsi, `border` peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.
 
-<div class="note">
-<p><strong>Note :</strong> Bien que les propriétés raccourcies {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}} acceptent jusqu'à quatre valeurs pour les différents côtés, cette propriété (<code>border</code>) n'accepte qu'une seule valeur pour chaque propriété détaillée. Le résultat obtenu sera donc homogène sur les quatre côtés.</p>
-</div>
+> **Note :** Bien que les propriétés raccourcies {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}} acceptent jusqu'à quatre valeurs pour les différents côtés, cette propriété (`border`) n'accepte qu'une seule valeur pour chaque propriété détaillée. Le résultat obtenu sera donc homogène sur les quatre côtés.
 
-<h3 id="Différences_entre_les_bordures_et_les_contours_(outlines)">Différences entre les bordures et les contours (<em>outlines</em>)</h3>
+### Différences entre les bordures et les contours (_outlines_)
 
-<p>Les bordures et <a href="/fr/docs/Web/CSS/outline">contours</a> sont similaires mais quelques différences les distinguent :</p>
+Les bordures et [contours](/fr/docs/Web/CSS/outline) sont similaires mais quelques différences les distinguent :
 
-<ul>
- <li>Les contours n'occupent pas d'espace sur l'élément : ils sont dessinés en dehors du contenu de l'élément</li>
- <li>Selon la spécification, les contours ne sont pas nécessairement rectangulaires.</li>
-</ul>
+- Les contours n'occupent pas d'espace sur l'élément : ils sont dessinés en dehors du contenu de l'élément
+- Selon la spécification, les contours ne sont pas nécessairement rectangulaires.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* style */
+```css
+/* style */
 border: solid;
 
 /* largeur | style */
@@ -46,99 +43,75 @@ border: medium dashed green;
 border: inherit;
 border: initial;
 border: unset;
-</pre>
+```
 
-<p>La propriété <code>border</code> peut être définie grâce à une ou plusieurs valeurs <code><a href="#br-width">&lt;line-width&gt;</a></code>, <code><a href="#br-style">&lt;line-style&gt;</a></code> ou <code><a href="#color">&lt;color&gt;</a></code>.</p>
+La propriété `border` peut être définie grâce à une ou plusieurs valeurs [`<line-width>`](#br-width), [`<line-style>`](#br-style) ou [`<color>`](#color).
 
-<div class="note">
-<p><strong>Note :</strong> La bordure pourra être invisible si son style n'est pas défini. En effet, sa valeur par défaut est <code>none</code>.</p>
-</div>
+> **Note :** La bordure pourra être invisible si son style n'est pas défini. En effet, sa valeur par défaut est `none`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;line-width&gt;</code></dt>
- <dd>Voir {{cssxref("border-width")}} (la valeur par défaut est <code>medium</code>).</dd>
- <dt><code>&lt;line-style&gt;</code></dt>
- <dd>Voir {{cssxref("border-style")}} (la valeur par défaut est <code>none</code>).</dd>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Voir {{cssxref("border-color")}}. Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriété {{cssxref("color")}} de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).</dd>
-</dl>
+- `<line-width>`
+  - : Voir {{cssxref("border-width")}} (la valeur par défaut est `medium`).
+- `<line-style>`
+  - : Voir {{cssxref("border-style")}} (la valeur par défaut est `none`).
+- `<color>`
+  - : Voir {{cssxref("border-color")}}. Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriété {{cssxref("color")}} de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.brd {
+```css
+.brd {
   border: 1px solid black;
 }
 style {
   border: 1px dashed black;
   display:block;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="brd"&gt;Oh des bordures&lt;/div&gt;
-&lt;p&gt;
+```html
+<div class="brd">Oh des bordures</div>
+<p>
   N'hésitez pas à éditer le CSS qui suit pour voir
   l'effet des valeurs.
-&lt;/p&gt;
-&lt;style contenteditable&gt;
+</p>
+<style contenteditable>
   .brd {
     border: 1px solid black;
   }
-&lt;/style&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>La prise en charge du mot-clé <code>transparent</code> est retirée car celui-ci est désormais intégré au type {{cssxref("&lt;color&gt;")}}. En pratique, cela n'a pas d'impact. Bien que {{cssxref("border-image")}} ne puisse être définie via <code>border</code>, cette dernière la réinitialise quand même avec sa valeur initiale (<code>none</code>).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Le mot-clé <code>inherit</code> peut être utilisé et <code>transparent</code> est considéré comme une couleur valide.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.border")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("border-top-left-radius")}},</li>
- <li>{{cssxref("border-top-right-radius")}},</li>
- <li>{{cssxref("border-bottom-right-radius")}},</li>
- <li>{{cssxref("border-bottom-left-radius")}}</li>
-</ul>
+</style>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires                                                                                                                                                                                                                                                                                                                                |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}     | {{Spec2('CSS3 Backgrounds')}} | La prise en charge du mot-clé `transparent` est retirée car celui-ci est désormais intégré au type {{cssxref("&lt;color&gt;")}}. En pratique, cela n'a pas d'impact. Bien que {{cssxref("border-image")}} ne puisse être définie via `border`, cette dernière la réinitialise quand même avec sa valeur initiale (`none`). |
+| {{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}} | {{Spec2('CSS2.1')}}                 | Le mot-clé `inherit` peut être utilisé et `transparent` est considéré comme une couleur valide.                                                                                                                                                                                                                                             |
+| {{SpecName('CSS1', '#border', 'border')}}                                         | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                                                                                                                                                        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.border")}}
+
+## Voir aussi
+
+- {{cssxref("border-top-left-radius")}},
+- {{cssxref("border-top-right-radius")}},
+- {{cssxref("border-bottom-right-radius")}},
+- {{cssxref("border-bottom-left-radius")}}
diff --git a/files/fr/web/css/bottom/index.md b/files/fr/web/css/bottom/index.md
index b1b5d78f15..ff56016ccf 100644
--- a/files/fr/web/css/bottom/index.md
+++ b/files/fr/web/css/bottom/index.md
@@ -7,30 +7,29 @@ tags:
   - Reference
 translation_of: Web/CSS/bottom
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>bottom</code></strong> contribue à la définition de l'emplacement vertical des <a href="/fr/docs/Web/CSS/position">éléments positionnés</a>. Elle n'a aucun effet pour les éléments non-positionnés.</p>
+La propriété **`bottom`** contribue à la définition de l'emplacement vertical des [éléments positionnés](/fr/docs/Web/CSS/position). Elle n'a aucun effet pour les éléments non-positionnés.
 
-<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div
+{{EmbedInteractiveExample("pages/css/bottom.html")}}Pour les **éléments positionnés de façon absolue**, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut `absolute` ou `fixed`, la propriété `bottom` définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément.
 
-<p>Pour les <strong>éléments positionnés de façon absolue</strong>, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut <code>absolute</code> ou <code>fixed</code>, la propriété <code>bottom</code> définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément.</p>
+Pour les **éléments positionnés de façon relative**, c'est-à-dire ceux dont la valeur de propriété {{cssxref("position")}} est `relative`, la propriété `bottom` définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale.
 
-<p>Pour les <strong>éléments positionnés de façon relative</strong>, c'est-à-dire ceux dont la valeur de propriété {{cssxref("position")}} est <code>relative</code>, la propriété <code>bottom</code> définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale.</p>
+Pour les éléments adhérents, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} est `sticky`
 
-<p>Pour les éléments adhérents, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} est <code>sticky</code></p>
+Lorsque les propriétés {{cssxref("top")}} et `bottom` sont définies et que {{cssxref("height")}} n'est pas définie ou vaut `auto` ou `100%`, les distances indiquées par {{cssxref("top")}} et `bottom` sont respectées. Dans les autres cas, si {{cssxref("height")}} est contrainte, la propriété {{cssxref("top")}} prendra le pas sur la propriété `bottom` qui sera alors ignorée.
 
-<p>Lorsque les propriétés {{cssxref("top")}} et <code>bottom</code> sont définies et que {{cssxref("height")}} n'est pas définie ou vaut <code>auto</code> ou <code>100%</code>, les distances indiquées par {{cssxref("top")}} et <code>bottom</code> sont respectées. Dans les autres cas, si {{cssxref("height")}} est contrainte, la propriété {{cssxref("top")}} prendra le pas sur la propriété <code>bottom</code> qui sera alors ignorée.</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 bottom: 3px;
 bottom: 2.4em;
 
 /* Valeurs proportionnelles à la hauteur */
 /* du bloc englobant                     */
-/* Type &lt;percentages&gt;                    */
+/* Type <percentages>                    */
 bottom: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -40,42 +39,41 @@ bottom: auto;
 bottom: inherit;
 bottom: initial;
 bottom: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une longueur (type {{cssxref("&lt;length&gt;")}} qui représente :
- <ul>
-  <li>La distance depuis le bord bas du bloc englobant pour les éléments positionnés de façon absolue</li>
-  <li>Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour les éléments positionnés de façon relative.</li>
- </ul>
- </dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur de pourcentage (type {{cssxref("&lt;percentage&gt;")}} exprimée par rapport à la hauteur du bloc englobant.</dd>
- <dt><code>auto</code></dt>
- <dd> Indique pour :
- <ul>
-  <li>Les éléments positionnés de façon absolue : la position de l'élément se base sur la propriété {{cssxref("top")}} et <code>height: auto</code> est traitée comme une hauteur basée sur la taille du contenu</li>
-  <li>Les éléments positionnés de façon relative : le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également <code>auto</code>, l'élément n'est pas déplacé verticalement.</li>
- </ul>
- </dd>
- <dt><code>inherit</code></dt>
- <dd>Cette valeur indique que la valeur est la même que la valeur calculée pour l'élément parent (qui peut ne pas être le bloc englobant). Cette valeur calculée est gérée comme si elle était une longueur, un pourcentage ou le mot-clé <code>auto</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+
+  - : Une longueur (type {{cssxref("&lt;length&gt;")}} qui représente :
+
+    - La distance depuis le bord bas du bloc englobant pour les éléments positionnés de façon absolue
+    - Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour les éléments positionnés de façon relative.
+
+- `<percentage>`
+  - : Une valeur de pourcentage (type {{cssxref("&lt;percentage&gt;")}} exprimée par rapport à la hauteur du bloc englobant.
+- `auto`
+
+  - : Indique pour :
+
+    - Les éléments positionnés de façon absolue : la position de l'élément se base sur la propriété {{cssxref("top")}} et `height: auto` est traitée comme une hauteur basée sur la taille du contenu
+    - Les éléments positionnés de façon relative : le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également `auto`, l'élément n'est pas déplacé verticalement.
+
+- `inherit`
+  - : Cette valeur indique que la valeur est la même que la valeur calculée pour l'élément parent (qui peut ne pas être le bloc englobant). Cette valeur calculée est gérée comme si elle était une longueur, un pourcentage ou le mot-clé `auto`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on illustre la différence de comportement de la propriété <code>bottom</code> lorsque {{cssxref("position")}} vaut <code>absolute</code> ou lorsqu'elle vaut <code>fixed</code>. When the regular text becomes taller than the viewable portion of the page (that is, the browser window's viewport), blocks positioned with <code>position:absolute</code> scroll with the page, while blocks positioned with <code>position:fixed</code> don't.</p>
+Dans l'exemple qui suit, on illustre la différence de comportement de la propriété `bottom` lorsque {{cssxref("position")}} vaut `absolute` ou lorsqu'elle vaut `fixed`. When the regular text becomes taller than the viewable portion of the page (that is, the browser window's viewport), blocks positioned with `position:absolute` scroll with the page, while blocks positioned with `position:fixed` don't.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   font-size:30px;
   line-height:3em;
 }
@@ -96,67 +94,47 @@ div#fix {
   position:fixed;
   bottom:0;
   right:0;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;
-  Voici &lt;br&gt;un&lt;br&gt;grand&lt;br&gt;grand,&lt;br&gt;grand,
-  &lt;br&gt;grand,&lt;br&gt;grand,&lt;br&gt;grand&lt;br&gt;contenu.
-&lt;/p&gt;
-
-&lt;div id="fix" class="pos"&gt;
-  &lt;p&gt;Fixe&lt;/p&gt;
-&lt;/div&gt;
-
-&lt;div id="abs" class="pos"&gt;
-  &lt;p&gt;Absolu&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>bottom</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}</td>
-   <td>{{Spec2('CSS3 Positioning')}}</td>
-   <td>Décrit le comportement pour le positionnement adhérent (<em>sticky</em>).</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.bottom")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("position")}},</li>
- <li>{{cssxref("top")}},</li>
- <li>{{cssxref("left")}},</li>
- <li>{{cssxref("right")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<p>
+  Voici <br>un<br>grand<br>grand,<br>grand,
+  <br>grand,<br>grand,<br>grand<br>contenu.
+</p>
+
+<div id="fix" class="pos">
+  <p>Fixe</p>
+</div>
+
+<div id="abs" class="pos">
+  <p>Absolu</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","300","300")}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                     | Commentaires                                                       |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------ |
+| {{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                               |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}}     | {{Spec2('CSS3 Transitions')}} | `bottom` peut désormais être animée.                               |
+| {{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}     | {{Spec2('CSS3 Positioning')}} | Décrit le comportement pour le positionnement adhérent (_sticky_). |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.bottom")}}
+
+## Voir aussi
+
+- {{cssxref("position")}},
+- {{cssxref("top")}},
+- {{cssxref("left")}},
+- {{cssxref("right")}}
diff --git a/files/fr/web/css/box-align/index.md b/files/fr/web/css/box-align/index.md
index 731682f8ba..05cde59401 100644
--- a/files/fr/web/css/box-align/index.md
+++ b/files/fr/web/css/box-align/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/box-align
 ---
-<div>{{CSSRef}}{{Non-standard_header}}{{warning("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.")}}</div>
+{{CSSRef}}{{Non-standard_header}}{{warning("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.")}}
 
-<p>La propriété CSS <strong><code>box-align</code></strong> 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. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS" title="CSS/Flexible_boxes">Flexbox</a> pour plus d'informations.</p>
+La propriété 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. Voir la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS "CSS/Flexible_boxes") pour plus d'informations.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 box-align: start;
 box-align: center;
 box-align: end;
@@ -23,38 +24,37 @@ box-align: stretch;
 box-lines: inherit;
 box-lines: initial;
 box-lines: unset;
-</pre>
+```
 
-<p>La direction de l'élément dépend de son orientation.</p>
+La direction de l'élément dépend de son orientation.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>box-align</code> est paramétrée grâce à l'un des mots-clés suivants.</p>
+La propriété `box-align` est paramétrée grâce à l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>start</code></dt>
- <dd>La boîte aligne son contenu au début (l'espace restant est alors situé à la fin).</dd>
- <dt><code>center</code></dt>
- <dd>La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin).</dd>
- <dt><code>end</code></dt>
- <dd>La boîte aligne son contenu au début (l'espace restant est alors situé au début).</dd>
- <dt><code>baseline</code></dt>
- <dd>La boîte aligne les lignes de base des contenus (le texte sera sur la même ligne). Cela ne s'applique que si l'orientation de la boîte est horizontale.</dd>
- <dt><code>stretch</code></dt>
- <dd>Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte.</dd>
-</dl>
+- `start`
+  - : La boîte aligne son contenu au début (l'espace restant est alors situé à la fin).
+- `center`
+  - : La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin).
+- `end`
+  - : La boîte aligne son contenu au début (l'espace restant est alors situé au début).
+- `baseline`
+  - : La boîte aligne les lignes de base des contenus (le texte sera sur la même ligne). Cela ne s'applique que si l'orientation de la boîte est horizontale.
+- `stretch`
+  - : Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div.exemple {
+```css
+div.exemple {
   display: box;
   display: -moz-box; /* Mozilla */
   display: -webkit-box; /* WebKit */
@@ -86,47 +86,46 @@ box-lines: unset;
   -webkit-box-pack: end; /* WebKit */
 }
 
-div.exemple &gt; p {
+div.exemple > p {
   /* On réduit les éléments fils pour que
      box-align ait un impact. */
   width: 200px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;
-  &lt;p&gt;Je serai deuxième en partant du bas, centré horizontalement.&lt;/p&gt;
-  &lt;p&gt;Je serai en bas de div.exemple, centré horizontalement.&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="exemple">
+  <p>Je serai deuxième en partant du bas, centré horizontalement.</p>
+  <p>Je serai en bas de div.exemple, centré horizontalement.</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","500","500")}}</p>
+{{EmbedLiveSample("Exemples","500","500")}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Le bord de la boîte qui est indiqué par <code>start</code> dépend de l'orientation de la boîte : si celle-ci est orientée horizontalement, ce sera le côté haut, si elle est orientée verticalement, ce sera le côté bas. Le côté désigné par <code>end</code> est le côté opposé à <code>start</code>.</p>
+Le bord de la boîte qui est indiqué par `start` dépend de l'orientation de la boîte : si celle-ci est orientée horizontalement, ce sera le côté haut, si elle est orientée verticalement, ce sera le côté bas. Le côté désigné par `end` est le côté opposé à `start`.
 
-<p>Si l'alignement est défini via l'attribut HTML <code>align</code>, la déclaration sera alors ignorée.</p>
+Si l'alignement est défini via l'attribut HTML `align`, la déclaration sera alors ignorée.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
- <li><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
-</ul>
+- [Brouillon de travail pour le module des boîtes flexibles (W3C)](http://www.w3.org/TR/css3-flexbox/) {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}
+- [Ancienne version de la spécification](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.box-align")}}</p>
+{{Compat("css.properties.box-align")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("align-items")}},</li>
- <li>{{cssxref("box-orient")}},</li>
- <li>{{cssxref("box-direction")}},</li>
- <li>{{cssxref("box-pack")}}.</li>
-</ul>
+- {{cssxref("align-items")}},
+- {{cssxref("box-orient")}},
+- {{cssxref("box-direction")}},
+- {{cssxref("box-pack")}}.
diff --git a/files/fr/web/css/box-decoration-break/index.md b/files/fr/web/css/box-decoration-break/index.md
index cfbe10973c..b241babf5a 100644
--- a/files/fr/web/css/box-decoration-break/index.md
+++ b/files/fr/web/css/box-decoration-break/index.md
@@ -8,15 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/box-decoration-break
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>box-decoration-break</code></strong> définit la façon dont les propriétés {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, {{cssxref("border-image")}}, {{cssxref("box-shadow")}}, {{cssxref("margin")}} et {{cssxref("clip")}} sont appliquées sur un élément lorsque la boîte de celui-ci est fragmentée. La fragmentation apparaît lorsqu'une boîte en ligne s'étend sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne lorsque qu'il est dans conteneur disposé en colonne ou lorsqu'un bloc déclenche un saut de page sur un média imprimé. Chaque « morceau » de l'élément est alors appelé un fragment.</p>
+La propriété **`box-decoration-break`** définit la façon dont les propriétés {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, {{cssxref("border-image")}}, {{cssxref("box-shadow")}}, {{cssxref("margin")}} et {{cssxref("clip")}} sont appliquées sur un élément lorsque la boîte de celui-ci est fragmentée. La fragmentation apparaît lorsqu'une boîte en ligne s'étend sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne lorsque qu'il est dans conteneur disposé en colonne ou lorsqu'un bloc déclenche un saut de page sur un média imprimé. Chaque « morceau » de l'élément est alors appelé un fragment.
 
-<div>{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}</div>
+{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 box-decoration-break: slice;
 box-decoration-break: clone;
 
@@ -24,32 +25,31 @@ box-decoration-break: clone;
 box-decoration-break: initial;
 box-decoration-break: inherit;
 box-decoration-break: unset;
-</pre>
+```
 
-<p>La propriété <code>box-decoration-break</code> est définie avec l'un des mots-clés définis ci-après.</p>
+La propriété `box-decoration-break` est définie avec l'un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>clone</code></dt>
- <dd>Le rendu de chaque fragment de boîte est obtenu indépendamment avec la bordure, le remplissage, la marge indiqués pour chacun des fragments. Les propriétés {{cssxref("border-radius")}}, {{cssxref("border-image")}} et {{cssxref("box-shadow")}} sont appliquées indépendamment à chaque fragment. L'arrière-plan est dessiné indépendamment pour chaque fragment (ainsi, une image d'arrière-plan avec {{cssxref("background-repeat")}}: <code>no-repeat</code> pourra être présente à plusieurs reprises).</dd>
- <dt><code>slice</code></dt>
- <dd>L'élément est initialement affiché comme si la boîte n'était pas fragmentée puis le rendu de cette boîte hypothétique est découpé en fragments pour chaque ligne/colonne/page. On notera que la boîte hypothétique peut être différente pour chaque fragment car elle utilise sa propre hauteur (si la rupture apparaît dans la direction de l'élément) ou sa propre largeur (si la rupture apparaît dans la direction orthogonale). C'est la valeur initiale de la propriété.</dd>
-</dl>
+- `clone`
+  - : Le rendu de chaque fragment de boîte est obtenu indépendamment avec la bordure, le remplissage, la marge indiqués pour chacun des fragments. Les propriétés {{cssxref("border-radius")}}, {{cssxref("border-image")}} et {{cssxref("box-shadow")}} sont appliquées indépendamment à chaque fragment. L'arrière-plan est dessiné indépendamment pour chaque fragment (ainsi, une image d'arrière-plan avec {{cssxref("background-repeat")}}: `no-repeat` pourra être présente à plusieurs reprises).
+- `slice`
+  - : L'élément est initialement affiché comme si la boîte n'était pas fragmentée puis le rendu de cette boîte hypothétique est découpé en fragments pour chaque ligne/colonne/page. On notera que la boîte hypothétique peut être différente pour chaque fragment car elle utilise sa propre hauteur (si la rupture apparaît dans la direction de l'élément) ou sa propre largeur (si la rupture apparaît dans la direction orthogonale). C'est la valeur initiale de la propriété.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Gestion_des_fragments_pour_les_boîtes_en_ligne">Gestion des fragments pour les boîtes en ligne</h3>
+### Gestion des fragments pour les boîtes en ligne
 
-<h4 id="Avec_slice_(valeur_initiale)">Avec <code>slice</code> (valeur initiale)</h4>
+#### Avec `slice` (valeur initiale)
 
-<h5 id="CSS">CSS</h5>
+##### CSS
 
-<pre class="brush: css">.exemple {
+```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;
   padding: 0em 1em;
@@ -58,25 +58,29 @@ box-decoration-break: unset;
   margin-left: 10px;
   font: 24px sans-serif;
   line-height: 2;
-}</pre>
+}
+```
 
-<h5 id="HTML">HTML</h5>
+##### HTML
 
-<pre class="brush: html">&lt;span class="exemple"&gt;The&lt;br&gt;quick&lt;br&gt;orange fox&lt;/span&gt;</pre>
+```html
+<span class="exemple">The<br>quick<br>orange fox</span>
+```
 
-<h5 id="Résultat_live">Résultat <em>live</em></h5>
+##### Résultat _live_
 
-<p>{{EmbedLiveSample("Avec_slice_(valeur_initiale)","200","200")}}</p>
+{{EmbedLiveSample("Avec_slice_(valeur_initiale)","200","200")}}
 
-<h5 id="Image_équivalente">Image équivalente</h5>
+##### Image équivalente
 
-<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="box-decoration-break-inline-slice.png"></p>
+![A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.](box-decoration-break-inline-slice.png)
 
-<h4 id="Avec_clone">Avec <code>clone</code></h4>
+#### Avec `clone`
 
-<h5 id="CSS_2">CSS</h5>
+##### CSS
 
-<pre class="brush: css">.exemple {
+```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;
   padding: 0em 1em;
@@ -89,63 +93,51 @@ box-decoration-break: unset;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
   box-decoration-break: clone;
-}</pre>
+}
+```
 
-<h5 id="HTML_2">HTML</h5>
+##### HTML
 
-<pre class="brush: html">&lt;span class="exemple"&gt;The&lt;br&gt;quick&lt;br&gt;orange fox&lt;/span&gt;</pre>
+```html
+<span class="exemple">The<br>quick<br>orange fox</span>
+```
 
-<h5 id="Résultat_live_2">Résultat <em>live</em></h5>
+##### Résultat _live_
 
-<p>{{EmbedLiveSample("Avec_clone","200","200")}}</p>
+{{EmbedLiveSample("Avec_clone","200","200")}}
 
-<h5 id="Image_équivalente_2">Image équivalente</h5>
+##### Image équivalente
 
-<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="box-decoration-break-inline-clone.png"></p>
+![A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example](box-decoration-break-inline-clone.png)
 
-<h3 id="Gestion_des_fragments_pour_les_boîtes_en_bloc">Gestion des fragments pour les boîtes en bloc</h3>
+### Gestion des fragments pour les boîtes en bloc
 
-<p>Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc sans fragmentation:</p>
+Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc sans fragmentation:
 
-<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="box-decoration-break-block.png"></p>
+![A screenshot of the rendering of the block element used in the examples without any fragmentation.](box-decoration-break-block.png)
 
-<p>En décomposant le bloc sur trois colonnes, normalement (<code>slice</code>), on aura :</p>
+En décomposant le bloc sur trois colonnes, normalement (`slice`), on aura :
 
-<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="box-decoration-break-block-slice.png"></p>
+![A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.](box-decoration-break-block-slice.png)
 
-<p>Si on applique <code>box-decoration-break:clone</code>, voici le résultat :</p>
+Si on applique `box-decoration-break:clone`, voici le résultat :
 
-<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="box-decoration-break-block-clone.png"></p>
+![A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.](box-decoration-break-block-clone.png)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break')}}</td>
-   <td>{{Spec2('CSS3 Fragmentation')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                     | Commentaires        |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- |
+| {{SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break')}} | {{Spec2('CSS3 Fragmentation')}} | Définition initiale |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.box-decoration-break")}}</p>
+{{Compat("css.properties.box-decoration-break")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("break-after")}}</li>
- <li>{{cssxref("break-before")}}</li>
- <li>{{cssxref("break-inside")}}</li>
-</ul>
+- {{cssxref("break-after")}}
+- {{cssxref("break-before")}}
+- {{cssxref("break-inside")}}
diff --git a/files/fr/web/css/box-direction/index.md b/files/fr/web/css/box-direction/index.md
index 9a62ce1e3f..ce992018a2 100644
--- a/files/fr/web/css/box-direction/index.md
+++ b/files/fr/web/css/box-direction/index.md
@@ -8,15 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/box-direction
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version. La propriété <code>-moz-box-direction</code> ne peut être utilisée que dans des composants XUL tandis que la propriété <code>box-direction</code> a été remplacée par la propriété standard <code>flex-direction</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p>
-</div>
+> **Attention :** Cette propriété fait partie de la première version du standard pour les boîtes flexibles (_flexbox_) et sera remplacée dans une prochaine version. La propriété `-moz-box-direction` ne peut être utilisée que dans des composants XUL tandis que la propriété `box-direction` a été remplacée par la propriété standard `flex-direction`. Voir la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) pour plus d'informations sur ce qui doit être utilisé à la place.
 
-<p>La propriété <strong><code>box-direction</code></strong> définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>.</p>
+La propriété **`box-direction`** définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 box-direction: normal;
 box-direction: reverse;
 
@@ -24,55 +23,50 @@ box-direction: reverse;
 box-direction: inherit;
 box-direction: initial;
 box-direction: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>La boîte répartit son contenu à partir du début (le côté gauche si la boîte est orientée horizontalement ou le côté haut si la boîte est orientée verticalement).</dd>
- <dt><code>reverse</code></dt>
- <dd>La boîte répartit son contenu à partir de la fin (le côté droit si la boîte est orientée horizontalement ou le côté bas si la boîte est orienté verticalement).</dd>
-</dl>
+- `normal`
+  - : La boîte répartit son contenu à partir du début (le côté gauche si la boîte est orientée horizontalement ou le côté haut si la boîte est orientée verticalement).
+- `reverse`
+  - : La boîte répartit son contenu à partir de la fin (le côté droit si la boîte est orientée horizontalement ou le côté bas si la boîte est orienté verticalement).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:css">.exemple {
+```css
+.exemple {
   /* du bas vers le haut */
   -moz-box-direction: reverse;      /* Mozilla */
   -webkit-box-direction: reverse;   /* WebKit */
   box-direction: reverse;
 }
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Si la direction de l'élément est définie grâce à l'attribut <code>dir</code>, la déclaration est ignorée.</p>
+Si la direction de l'élément est définie grâce à l'attribut `dir`, la déclaration est ignorée.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{note("L'état de cette spécification ne reflète pas l'implémentation de Mozilla ou Webkit.")}}</li>
- <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{note("Les implémentations de WebKit et Mozilla se basent sur cette version de la spécification")}}</li>
-</ul>
+- [Brouillon de travail pour le module des boîtes flexibles (W3C)](https://www.w3.org/TR/css3-flexbox/) {{note("L'état de cette spécification ne reflète pas l'implémentation de Mozilla ou Webkit.")}}
+- [Ancienne version de la spécification](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) {{note("Les implémentations de WebKit et Mozilla se basent sur cette version de la spécification")}}
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.box-direction")}}</p>
+{{Compat("css.properties.box-direction")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("box-orient")}},</li>
- <li>{{cssxref("box-pack")}},</li>
- <li>{{cssxref("box-align")}},</li>
- <li>{{cssxref("flex-direction")}}.</li>
-</ul>
+- {{cssxref("box-orient")}},
+- {{cssxref("box-pack")}},
+- {{cssxref("box-align")}},
+- {{cssxref("flex-direction")}}.
diff --git a/files/fr/web/css/box-flex-group/index.md b/files/fr/web/css/box-flex-group/index.md
index c04d6907b0..282615eb55 100644
--- a/files/fr/web/css/box-flex-group/index.md
+++ b/files/fr/web/css/box-flex-group/index.md
@@ -8,18 +8,17 @@ tags:
   - Reference
 translation_of: Web/CSS/box-flex-group
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
-</div>
+> **Attention :** Cette propriété fait partie de la première version du standard pour les boîtes flexibles (_flexbox_) et sera remplacée dans une prochaine version.
 
-<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p>
+Voir la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) pour plus d'informations.
 
-<p>La propriété <strong><code>box-flex-group</code></strong> permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+La propriété **`box-flex-group`** permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) qui décrit les différentes propriétés des boîtes flexibles.
 
-<pre class="brush:css no-line-numbers">/* Un entier désignant le groupe */
-/* Type &lt;integer&gt;                */
+```css
+/* Un entier désignant le groupe */
+/* Type <integer>                */
 box-flex-group: 1;
 box-flex-group: 5;
 
@@ -27,37 +26,33 @@ box-flex-group: 5;
 box-flex-group: inherit;
 box-flex-group: initial;
 box-flex-group: unset;
-</pre>
+```
 
-<p>Les éléments flexibles sont affectés à des groupes. Le premier groupe sera désigné par l'indice 1 et les groupes suivants par 2, 3, et ainsi de suite. Lorsque l'espace restant dans la boîte est réparti, le moteur prend d'abord en compte les éléments du premier groupe et répartit l'espace entre les différents éléments de ce groupe selon leurs flexibilités relatives. Une fois l'espace augmenté au maximum, le moteur passe au groupe qui suit en utilisant l'espace restant et ainsi de suite. Si, une fois l'ensemble des groupes traités, il y a encore de l'espace, celui-ci est réparti grâce à la propriété {{cssxref("box-pack")}}.</p>
+Les éléments flexibles sont affectés à des groupes. Le premier groupe sera désigné par l'indice 1 et les groupes suivants par 2, 3, et ainsi de suite. Lorsque l'espace restant dans la boîte est réparti, le moteur prend d'abord en compte les éléments du premier groupe et répartit l'espace entre les différents éléments de ce groupe selon leurs flexibilités relatives. Une fois l'espace augmenté au maximum, le moteur passe au groupe qui suit en utilisant l'espace restant et ainsi de suite. Si, une fois l'ensemble des groupes traités, il y a encore de l'espace, celui-ci est réparti grâce à la propriété {{cssxref("box-pack")}}.
 
-<p>Si la boîte dépasse une fois que l'espace pour l'élément fils a été calculé, l'espace est alors retiré (chaque groupe est examiné dans l'ordre et l'espace est retiré selon la flexibilité de chaque élément). Les éléments ne sont pas réduits en deçà de leurs largeurs minimales.</p>
+Si la boîte dépasse une fois que l'espace pour l'élément fils a été calculé, l'espace est alors retiré (chaque groupe est examiné dans l'ordre et l'espace est retiré selon la flexibilité de chaque élément). Les éléments ne sont pas réduits en deçà de leurs largeurs minimales.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Cette propriété est définie avec un entier positif.</p>
+Cette propriété est définie avec un entier positif.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
- <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
-</ul>
+- [Brouillon de travail pour le module des boîtes flexibles (W3C)](https://www.w3.org/TR/css3-flexbox/) {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}
+- [Ancienne version de la spécification.](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("css.properties.box-flex-group")}}</div>
+{{Compat("css.properties.box-flex-group")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("box-flex")}},</li>
- <li>{{cssxref("box-ordinal-group")}},</li>
- <li>{{cssxref("box-pack")}}.</li>
-</ul>
+- {{cssxref("box-flex")}},
+- {{cssxref("box-ordinal-group")}},
+- {{cssxref("box-pack")}}.
diff --git a/files/fr/web/css/box-flex/index.md b/files/fr/web/css/box-flex/index.md
index 8029705961..92b557cfd0 100644
--- a/files/fr/web/css/box-flex/index.md
+++ b/files/fr/web/css/box-flex/index.md
@@ -8,16 +8,15 @@ tags:
   - Reference
 translation_of: Web/CSS/box-flex
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour <code>box-flex</code> ni au comportement de <code>-webkit-box-flex</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p>
-</div>
+> **Attention :** Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour `box-flex` ni au comportement de `-webkit-box-flex`. Voir la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) pour plus d'informations sur ce qui doit être utilisé à la place.
 
-<p>Les propriétés <strong><code>-moz-box-flex</code></strong> et <strong><code>-webkit-box-flex</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+Les propriétés **`-moz-box-flex`** et **`-webkit-box-flex`** définissent la façon dont une boîte `-moz-box` ou `-webkit-box` s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de la boîte. Pour plus de détails, se référer à la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) qui décrit les différentes propriétés des boîtes flexibles.
 
-<pre class="brush:css no-line-numbers">/* Valeurs numériques */
-/* Type &lt;number&gt;      */
+```css
+/* Valeurs numériques */
+/* Type <number>      */
 -moz-box-flex: 0;
 -moz-box-flex: 2;
 -moz-box-flex: 3.5;
@@ -32,79 +31,78 @@ translation_of: Web/CSS/box-flex
 -webkit-box-flex: inherit;
 -webkit-box-flex: initial;
 -webkit-box-flex: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}}. Si la valeur vaut 0, la boîte ne s'étend pas. Si elle est supérieure à 0, la boîte s'étendra sur l'espace disponible de façon proportionnelle.</dd>
-</dl>
+- `<number>`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}}. Si la valeur vaut 0, la boîte ne s'étend pas. Si elle est supérieure à 0, la boîte s'étendra sur l'espace disponible de façon proportionnelle.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div.exemple {
+```css
+div.exemple {
   display: -moz-box;
   display: -webkit-box;
   border: 1px solid black;
   width: 100%;
 }
 
-div.exemple &gt; p:nth-child(1) {
+div.exemple > p:nth-child(1) {
   -moz-box-flex: 1; /* Mozilla */
   -webkit-box-flex: 1; /* WebKit */
   border: 1px solid black;
 }
 
-div.exemple &gt; p:nth-child(2) {
+div.exemple > p:nth-child(2) {
   -moz-box-flex: 0; /* Mozilla */
   -webkit-box-flex: 0; /* WebKit */
   border: 1px solid black;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;
-  &lt;p&gt;Je m'étends sur l'espace.&lt;/p&gt;
-  &lt;p&gt;Je ne me dilate pas.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="exemple">
+  <p>Je m'étends sur l'espace.</p>
+  <p>Je ne me dilate pas.</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+{{EmbedLiveSample("Exemples","200","200")}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La boîte englobante distribue l'espace supplémentaire en fonction de la valeur de <code>flex</code> de chaque élément. Les éléments pour lesquels ce coefficient est nul ne s'agrandiront pas. Si un seul élément possède un coefficient non nul, celui-ci occupera l'espace supplémentaires.</p>
+La boîte englobante distribue l'espace supplémentaire en fonction de la valeur de `flex` de chaque élément. Les éléments pour lesquels ce coefficient est nul ne s'agrandiront pas. Si un seul élément possède un coefficient non nul, celui-ci occupera l'espace supplémentaires.
 
-<p>Les éléments qui possèdent le même coefficient grandiront de la même façon.</p>
+Les éléments qui possèdent le même coefficient grandiront de la même façon.
 
-<p>Si la valeur de cette propriété est définie via l'attribut XUL <code>flex</code>, la déclaration est ignorée. Afin que les éléments XUL d'une même boîte aient la même taille, on utilisera l'attribut <code>equalsize</code> avec la valeur <code>always</code>. Il n'existe pas de propriété CSS correspondante.</p>
+Si la valeur de cette propriété est définie via l'attribut XUL `flex`, la déclaration est ignorée. Afin que les éléments XUL d'une même boîte aient la même taille, on utilisera l'attribut `equalsize` avec la valeur `always`. Il n'existe pas de propriété CSS correspondante.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété n'est pas une propriété standard. <a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Une ancienne version de la spécification CSS3 pour les boîtes flexibles</a> définissait une propriété <code>box-flex</code> mais ce brouillon a depuis été remplacé.</p>
+Cette propriété n'est pas une propriété standard. [Une ancienne version de la spécification CSS3 pour les boîtes flexibles](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) définissait une propriété `box-flex` mais ce brouillon a depuis été remplacé.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("css.properties.box-flex")}}</div>
+{{Compat("css.properties.box-flex")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("box-orient")}},</li>
- <li>{{cssxref("box-pack")}},</li>
- <li>{{cssxref("box-direction")}},</li>
- <li>{{cssxref("flex")}}.</li>
-</ul>
+- {{cssxref("box-orient")}},
+- {{cssxref("box-pack")}},
+- {{cssxref("box-direction")}},
+- {{cssxref("flex")}}.
diff --git a/files/fr/web/css/box-lines/index.md b/files/fr/web/css/box-lines/index.md
index 9c01911dbc..f8f0dcecad 100644
--- a/files/fr/web/css/box-lines/index.md
+++ b/files/fr/web/css/box-lines/index.md
@@ -8,17 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/box-lines
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
-</div>
+> **Attention :** Cette propriété fait partie de la première version du standard pour les boîtes flexibles (_flexbox_) et sera remplacée dans une prochaine version.
 
-<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p>
+Voir la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) pour plus d'informations.
 
-<p>La propriété <strong><code>box-lines</code></strong> détermine si la boîte se compose d'une ou plusieurs rangées (des lignes pour les boîtes orientées horizontalement et des colonnes pour les boîtes orientées verticalement). Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+La propriété **`box-lines`** détermine si la boîte se compose d'une ou plusieurs rangées (des lignes pour les boîtes orientées horizontalement et des colonnes pour les boîtes orientées verticalement). Pour plus de détails, se référer à la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) qui décrit les différentes propriétés des boîtes flexibles.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 box-lines: single;
 box-lines: multiple;
 
@@ -26,52 +25,46 @@ box-lines: multiple;
 box-lines: inherit;
 box-lines: initial;
 box-lines: unset;
-</pre>
+```
 
-<p>Par défaut, une boîte horizontale organisera ses éléments sur une seule ligne et une boîte verticale les organisera sur une seule colonne. On peut modifier ce comportement en utilisant <strong><code>box-lines</code></strong>. La valeur par défaut est <strong><code>single</code></strong> (ce qui correspond au cas expliqué avant) et les éléments qui ne peuvent être contenus dans cette ligne ou cette colonne dépasseront.</p>
+Par défaut, une boîte horizontale organisera ses éléments sur une seule ligne et une boîte verticale les organisera sur une seule colonne. On peut modifier ce comportement en utilisant **`box-lines`**. La valeur par défaut est **`single`** (ce qui correspond au cas expliqué avant) et les éléments qui ne peuvent être contenus dans cette ligne ou cette colonne dépasseront.
 
-<p>Si, au contraire, on utilise la valeur <strong><code>multiple</code></strong>, la boîte pourra s'étendre sur plusieurs rangées (des lignes ou des colonnes) afin de contenir ses différents éléments fils. La boîte utilisera alors le moins de lignes ou de colonnes possibles et réduira les éléments à leur taille minimale si nécessaire.</p>
+Si, au contraire, on utilise la valeur **`multiple`**, la boîte pourra s'étendre sur plusieurs rangées (des lignes ou des colonnes) afin de contenir ses différents éléments fils. La boîte utilisera alors le moins de lignes ou de colonnes possibles et réduira les éléments à leur taille minimale si nécessaire.
 
-<p>Si les éléments fils d'une boîte horizontale ne rentrent pas dans une ligne après avoir été réduits à leur taille minimale, ils sont déplacés sur une nouvelle ligne jusqu'à ce que rien ne dépasse de la ligne précédente. Le procédé est répété autant de fois que nécessaire. Si une ligne contient un seul élément et que celui-ci est trop grand, ce dernier restera sur cette ligne et dépassera en dehors de la boîte. Les nouvelles lignes sont créées en dessous des premières lorsque la direction de la boîte est <code>normal</code>, dans le sens inverse (<code>reverse</code>) elles seront empilées les unes au dessus des autres. La hauteur d'une ligne sera égale à la plus grande hauteur des éléments portés sur cette ligne. Aucun espace ne sera ajouté entre les lignes en dehors des marges décrites par les plus grands éléments. Lors du calcul de la hauteur, les éléments avec une marge dont la valeur calculée est <code>auto</code> seront traités comme si la marge était nulle (<code>0</code>).</p>
+Si les éléments fils d'une boîte horizontale ne rentrent pas dans une ligne après avoir été réduits à leur taille minimale, ils sont déplacés sur une nouvelle ligne jusqu'à ce que rien ne dépasse de la ligne précédente. Le procédé est répété autant de fois que nécessaire. Si une ligne contient un seul élément et que celui-ci est trop grand, ce dernier restera sur cette ligne et dépassera en dehors de la boîte. Les nouvelles lignes sont créées en dessous des premières lorsque la direction de la boîte est `normal`, dans le sens inverse (`reverse`) elles seront empilées les unes au dessus des autres. La hauteur d'une ligne sera égale à la plus grande hauteur des éléments portés sur cette ligne. Aucun espace ne sera ajouté entre les lignes en dehors des marges décrites par les plus grands éléments. Lors du calcul de la hauteur, les éléments avec une marge dont la valeur calculée est `auto` seront traités comme si la marge était nulle (`0`).
 
-<p>On aura un fonctionnement analogue avec une disposition verticale.</p>
+On aura un fonctionnement analogue avec une disposition verticale.
 
-<p>Une fois que le nombre de rangées a été calculé, les éléments pour lesquels {{cssxref("box-flex")}} a une valeur calculée différentes de <code>0</code> seront étirés afin de remplir les espaces restants sur les lignes. Ces étirements sont calculés de façon indépendante selon chaque ligne (notamment pour {{cssxref("box-flex")}} et {{cssxref("box-flex-group")}}). Il en va de même pour le regroupement des éléments sur une ligne avec la propriété {{cssxref("box-pack")}}.</p>
+Une fois que le nombre de rangées a été calculé, les éléments pour lesquels {{cssxref("box-flex")}} a une valeur calculée différentes de `0` seront étirés afin de remplir les espaces restants sur les lignes. Ces étirements sont calculés de façon indépendante selon chaque ligne (notamment pour {{cssxref("box-flex")}} et {{cssxref("box-flex-group")}}). Il en va de même pour le regroupement des éléments sur une ligne avec la propriété {{cssxref("box-pack")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Cette propriété est définie grâce à l'un des mots-clés suivants.</p>
+Cette propriété est définie grâce à l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>single</code></dt>
- <dd>Les éléments d'une boîte sont disposés sur une seule ligne ou sur une seule colonne.</dd>
- <dt><code>multiple</code></dt>
- <dd>Les éléments de la boîte sont disposés sur plusieurs lignes ou colonnes si nécessaire.</dd>
-</dl>
+- `single`
+  - : Les éléments d'une boîte sont disposés sur une seule ligne ou sur une seule colonne.
+- `multiple`
+  - : Les éléments de la boîte sont disposés sur plusieurs lignes ou colonnes si nécessaire.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
- <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
-</ul>
+- [Brouillon de travail pour le module des boîtes flexibles (W3C)](https://www.w3.org/TR/css3-flexbox/) {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}
+- [Ancienne version de la spécification.](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("css.properties.box-lines")}}</div>
+{{Compat("css.properties.box-lines")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("box-flex")}},</li>
- <li>{{cssxref("box-flex-groups")}},</li>
- <li>{{cssxref("box-pack")}}</li>
-</ul>
+- {{cssxref("box-flex")}},
+- {{cssxref("box-flex-groups")}},
+- {{cssxref("box-pack")}}
diff --git a/files/fr/web/css/box-ordinal-group/index.md b/files/fr/web/css/box-ordinal-group/index.md
index b9d400c5d1..bcf886b07f 100644
--- a/files/fr/web/css/box-ordinal-group/index.md
+++ b/files/fr/web/css/box-ordinal-group/index.md
@@ -8,18 +8,17 @@ tags:
   - Reference
 translation_of: Web/CSS/box-ordinal-group
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
-</div>
+> **Attention :** Cette propriété fait partie de la première version du standard pour les boîtes flexibles (_flexbox_) et sera remplacée dans une prochaine version.
 
-<p>La propriété <strong><code>box-ordinal-group</code></strong> permet d'affecter les éléments fils d'une boîtes flexible à un groupe numéroté. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+La propriété **`box-ordinal-group`** permet d'affecter les éléments fils d'une boîtes flexible à un groupe numéroté. Pour plus de détails, se référer à la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) qui décrit les différentes propriétés des boîtes flexibles.
 
-<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p>
+Voir la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) pour plus d'informations.
 
-<pre class="brush:css">/* Un entier indiquant le groupe */
-/* Type &lt;integer&gt;                */
+```css
+/* Un entier indiquant le groupe */
+/* Type <integer>                */
 box-ordinal-group: 1;
 box-ordinal-group: 5;
 
@@ -27,35 +26,31 @@ box-ordinal-group: 5;
 box-ordinal-group: inherit;
 box-ordinal-group: initial;
 box-ordinal-group: unset;
-</pre>
+```
 
-<p>Les groupes ordinaux peuvent être utilisés avec la propriété {{cssxref("box-direction")}} afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de <strong><code>box-direction</code></strong> est <code>normal</code>, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.</p>
+Les groupes ordinaux peuvent être utilisés avec la propriété {{cssxref("box-direction")}} afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque [la valeur calculée](/fr/docs/Web/CSS/computed_value) de **`box-direction`** est `normal`, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Cette propriété se définit avec un entier positif.</p>
+Cette propriété se définit avec un entier positif.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a>{{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
- <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a>{{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
-</ul>
+- [Brouillon de travail pour le module des boîtes flexibles (W3C)](https://www.w3.org/TR/css3-flexbox/){{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}
+- [Ancienne version de la spécification.](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/){{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.box-ordinal-group")}}</p>
+{{Compat("css.properties.box-ordinal-group")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("box-flex")}},</li>
- <li>{{cssxref("box-flex-group")}},</li>
- <li>{{cssxref("box-pack")}}</li>
-</ul>
+- {{cssxref("box-flex")}},
+- {{cssxref("box-flex-group")}},
+- {{cssxref("box-pack")}}
diff --git a/files/fr/web/css/box-orient/index.md b/files/fr/web/css/box-orient/index.md
index 9c5220bd16..2ca254e1d1 100644
--- a/files/fr/web/css/box-orient/index.md
+++ b/files/fr/web/css/box-orient/index.md
@@ -8,17 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/box-orient
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
-</div>
+> **Attention :** Cette propriété fait partie de la première version du standard pour les boîtes flexibles (_flexbox_) et sera remplacée dans une prochaine version.
 
-<p>La propriété CSS <strong><code>box-orient</code></strong> définit si un élément organise son contenu horizontalement ou verticalement.</p>
+La propriété CSS **`box-orient`** définit si un élément organise son contenu horizontalement ou verticalement.
 
-<p>Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+Pour plus de détails, se référer à la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) qui décrit les différentes propriétés des boîtes flexibles.
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 box-orient: horizontal;
 box-orient: vertical;
 box-orient: inline-axis;
@@ -28,38 +27,37 @@ box-orient: block-axis;
 box-orient: inherit;
 box-orient: initial;
 box-orient: unset;
-</pre>
+```
 
-<p>Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que  {{XULElem("vbox")}} organise son contenu de façon verticale par défaut.</p>
+Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que  {{XULElem("vbox")}} organise son contenu de façon verticale par défaut.
 
-<p>Les éléments HTML disposent leurs contenus selon l'axe <em>inline</em> par défaut. Cette propriété CSS ne s'applique qu'aux éléments HTML pour lesquels la propriété {{cssxref("display")}} vaut {{cssxref("box")}} ou {{cssxref("inline-box")}}.</p>
+Les éléments HTML disposent leurs contenus selon l'axe _inline_ par défaut. Cette propriété CSS ne s'applique qu'aux éléments HTML pour lesquels la propriété {{cssxref("display")}} vaut {{cssxref("box")}} ou {{cssxref("inline-box")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>horizontal</code></dt>
- <dd>La boîte organise son contenu horizontalement.</dd>
- <dt><code>vertical</code></dt>
- <dd>La boîte organise son contenu verticalement.</dd>
- <dt><code>inline-axis</code> (HTML)</dt>
- <dd>La boîte organise son contenu (ses éléments-fils) dans le sens de l'axe de lecture (axe <em>inline</em>).</dd>
- <dt><code>block-axis</code> (HTML)</dt>
- <dd>La boîte organise son contenu (ses éléments-fils) dans le sens perpendiculaire à l'axe de lecteur (axe <em>block</em>).</dd>
-</dl>
+- `horizontal`
+  - : La boîte organise son contenu horizontalement.
+- `vertical`
+  - : La boîte organise son contenu verticalement.
+- `inline-axis` (HTML)
+  - : La boîte organise son contenu (ses éléments-fils) dans le sens de l'axe de lecture (axe _inline_).
+- `block-axis` (HTML)
+  - : La boîte organise son contenu (ses éléments-fils) dans le sens perpendiculaire à l'axe de lecteur (axe _block_).
 
-<p>Les axes <em>inline</em> et <em>block</em> dépendent du mode d'écriture (pour l'anglais, ils correspondront, respectivement, à <code>horizontal</code> et <code>vertical</code>.</p>
+Les axes _inline_ et _block_ dépendent du mode d'écriture (pour l'anglais, ils correspondront, respectivement, à `horizontal` et `vertical`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div.exemple {
+```css
+div.exemple {
   display: -moz-box; /* Mozilla */
   display: -webkit-box; /* WebKit */
   display: box; /* On utilise les boîtes */
@@ -67,43 +65,42 @@ box-orient: unset;
   -moz-box-orient: horizontal; /* Mozilla */
   -webkit-box-orient: horizontal; /* WebKit */
   box-orient: horizontal; /* spécifié */
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;
-  &lt;p&gt;Je serai à gauche de mon voisin.&lt;/p&gt;
-  &lt;p&gt;Et moi à droite de mon voisin.&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="exemple">
+  <p>Je serai à gauche de mon voisin.</p>
+  <p>Et moi à droite de mon voisin.</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>On aura les deux paragraphes situés côte à côte.</p>
+On aura les deux paragraphes situés côte à côte.
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Pour les éléments XUL, si l'orientation est définie avec l'attribut {{XULAttr("orient")}} cette propriété est ignorée.</p>
+Pour les éléments XUL, si l'orientation est définie avec l'attribut {{XULAttr("orient")}} cette propriété est ignorée.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
- <li><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
-</ul>
+- [Brouillon de travail pour le module des boîtes flexibles (W3C)](https://www.w3.org/TR/css3-flexbox/) {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}
+- [Ancienne version de la spécification.](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.box-orient")}}</p>
+{{Compat("css.properties.box-orient")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("box-direction")}},</li>
- <li>{{cssxref("box-pack")}},</li>
- <li>{{cssxref("box-align")}},</li>
- <li>{{cssxref("flex-direction")}}.</li>
-</ul>
+- {{cssxref("box-direction")}},
+- {{cssxref("box-pack")}},
+- {{cssxref("box-align")}},
+- {{cssxref("flex-direction")}}.
diff --git a/files/fr/web/css/box-pack/index.md b/files/fr/web/css/box-pack/index.md
index 45fd486ed7..ac0ce20858 100644
--- a/files/fr/web/css/box-pack/index.md
+++ b/files/fr/web/css/box-pack/index.md
@@ -8,15 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/box-pack
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
-</div>
+> **Attention :** Cette propriété fait partie de la première version du standard pour les boîtes flexibles (_flexbox_) et sera remplacée dans une prochaine version.
 
-<div>Les propriétés CSS <strong><code>-moz-box-pack</code></strong> et <strong><code>-webkit-box-pack</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</div>
+Les propriétés CSS **`-moz-box-pack`** et **`-webkit-box-pack`** définissent la façon dont une boîte `-moz-box` ou `-webkit-box` groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) qui décrit les différentes propriétés des boîtes flexibles.
 
-<pre class="brush:css no-line-numbers">/*  Valeurs avec un mot-clé */
+```css
+/*  Valeurs avec un mot-clé */
 box-pack: start;
 box-pack: center;
 box-pack: end;
@@ -26,38 +25,37 @@ box-pack: justify;
 box-pack: inherit;
 box-pack: initial;
 box-pack: unset;
-</pre>
+```
 
-<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> pour plus d'informations.</p>
+Voir la page [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) pour plus d'informations.
 
-<p>La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.</p>
+La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Cette propriété se définit grâce à l'un des mots-clés définis ci-après.</p>
+Cette propriété se définit grâce à l'un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>start</code></dt>
- <dd>La boîte regroupe son contenu au début. L'espace restant est donc laissé à la fin.</dd>
- <dt><code>center</code></dt>
- <dd>La boîte regroupe son contenu au centre. L'espace restant est divisé de façon égale entre le début et la fin.</dd>
- <dt><code>end</code></dt>
- <dd>La boîte regroupe son contenu à la fin. L'espace restant est donc laissé au début.</dd>
- <dt><code>justify</code></dt>
- <dd>L'espace est réparti entre chacun des éléments fils sans qu'un espace soit placé avant le premier fils ou après le dernier. S'il y a un seul élément fils, la valeur est synonyme de <code>start</code>.</dd>
-</dl>
+- `start`
+  - : La boîte regroupe son contenu au début. L'espace restant est donc laissé à la fin.
+- `center`
+  - : La boîte regroupe son contenu au centre. L'espace restant est divisé de façon égale entre le début et la fin.
+- `end`
+  - : La boîte regroupe son contenu à la fin. L'espace restant est donc laissé au début.
+- `justify`
+  - : L'espace est réparti entre chacun des éléments fils sans qu'un espace soit placé avant le premier fils ou après le dernier. S'il y a un seul élément fils, la valeur est synonyme de `start`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div.exemple {
+```css
+div.exemple {
   border-style: solid;
 
   display: -moz-box; /* Mozilla */
@@ -88,60 +86,59 @@ div.exemple p {
      qu'il y ait de la place pour box-align */
   width: 200px;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;
-  &lt;p&gt;Je serai 2nd en partant du bas de div.exemple, centré horizontalement.&lt;/p&gt;
-  &lt;p&gt;Je serai tout en bas de div.exemple, centré horizontalement.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="exemple">
+  <p>Je serai 2nd en partant du bas de div.exemple, centré horizontalement.</p>
+  <p>Je serai tout en bas de div.exemple, centré horizontalement.</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', 310, 310)}}</p>
+{{EmbedLiveSample('Exemples', 310, 310)}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Le « début » et la « fin » de la boîte dépendent de l'orientation et de la direction de la boîte. Voici le tableau indiquant le début de la boîte en fonction de l'orientation et de la direction :</p>
+Le « début » et la « fin » de la boîte dépendent de l'orientation et de la direction de la boîte. Voici le tableau indiquant le début de la boîte en fonction de l'orientation et de la direction :
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th> </th>
-   <th><strong>Normal</strong></th>
-   <th><strong>Inverse</strong></th>
-  </tr>
-  <tr>
-   <th><strong>Horizontal</strong></th>
-   <td>gauche</td>
-   <td>droit</td>
-  </tr>
-  <tr>
-   <th><strong>Vertical</strong></th>
-   <td>hau</td>
-   <td>bas</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th> </th>
+      <th><strong>Normal</strong></th>
+      <th><strong>Inverse</strong></th>
+    </tr>
+    <tr>
+      <th><strong>Horizontal</strong></th>
+      <td>gauche</td>
+      <td>droit</td>
+    </tr>
+    <tr>
+      <th><strong>Vertical</strong></th>
+      <td>hau</td>
+      <td>bas</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Si le regroupement utilise l'attribut <code>pack</code> de l'élément, le style est ignoré.</p>
+Si le regroupement utilise l'attribut `pack` de l'élément, le style est ignoré.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété n'est pas standard mais une propriété semblable est apparue <a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">avec les brouillons de spécification pour les boîtes flexibles CSS3</a> et a été remplacée dans les versions suivantes de la spécification.</p>
+Cette propriété n'est pas standard mais une propriété semblable est apparue [avec les brouillons de spécification pour les boîtes flexibles CSS3](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) et a été remplacée dans les versions suivantes de la spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("css.properties.box-pack")}}</div>
+{{Compat("css.properties.box-pack")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("box-orient")}},</li>
- <li>{{cssxref("box-direction")}},</li>
- <li>{{cssxref("box-align")}}</li>
-</ul>
+- {{cssxref("box-orient")}},
+- {{cssxref("box-direction")}},
+- {{cssxref("box-align")}}
diff --git a/files/fr/web/css/box-shadow/index.md b/files/fr/web/css/box-shadow/index.md
index a8e3cae319..e78f4edbcc 100644
--- a/files/fr/web/css/box-shadow/index.md
+++ b/files/fr/web/css/box-shadow/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/box-shadow
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>box-shadow</code></strong> ajoute des ombres à la boîte d'un élément via une liste d'ombres séparées par des virgules. Une boîte d'ombre est définie avec des décalages horizontal et vertical par rapport à l'élément, avec des rayons de flou et d'étalement et avec une couleur.</p>
+La propriété CSS **`box-shadow`** ajoute des ombres à la boîte d'un élément via une liste d'ombres séparées par des virgules. Une boîte d'ombre est définie avec des décalages horizontal et vertical par rapport à l'élément, avec des rayons de flou et d'étalement et avec une couleur.
 
-<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div
+{{EmbedInteractiveExample("pages/css/box-shadow.html")}}Elle permet de projeter une ombre depuis un élément. Si une {{cssxref("border-radius")}} est définie sur l'élément avec l'ombre, la boîte de l'ombre prendra les mêmes arrondis. L'ordre des couches (_z order_) pour plusieurs ombres sera le même [que pour les ombres texte](/fr/docs/Web/CSS/text-shadow) (la première ombre est sur le dessus).
 
-<p>Elle permet de projeter une ombre depuis un élément. Si une {{cssxref("border-radius")}} est définie sur l'élément avec l'ombre, la boîte de l'ombre prendra les mêmes arrondis. L'ordre des couches (<em>z order</em>) pour plusieurs ombres sera le même <a href="/fr/docs/Web/CSS/text-shadow">que pour les ombres texte</a> (la première ombre est sur le dessus).</p>
+[Le générateur de `box-shadow`](/fr/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator) est un outil interactif qui permet de générer des valeurs pour `box-shadow`.
 
-<p><a href="/fr/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Le générateur de <code>box-shadow</code></a> est un outil interactif qui permet de générer des valeurs pour <code>box-shadow</code>.</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: css no-line-numbers">/* offset-x | offset-y | color */
+```css
+/* offset-x | offset-y | color */
 box-shadow: 60px -16px teal;
 
 /* offset-x | offset-y | blur-radius | color */
@@ -38,52 +37,48 @@ box-shadow: 3px 3px red, -1em 0 0.4em olive;
 box-shadow: inherit;
 box-shadow: initial;
 box-shadow: unset;
-</pre>
-
-<p>La propriété <code>box-shadow</code> peut être définie grâce :</p>
-
-<ul>
- <li>À deux, trois ou quatre valeurs de longueur ({{cssxref("&lt;length&gt;")}}) :
-  <ul>
-   <li>Avec deux valeurs, celles-ci sont respectivement considérées comme les coordonnées de décalage de l'ombre : <a href="#offset"><code>&lt;offset-x&gt;</code> et <code>&lt;offset-y&gt;</code></a></li>
-   <li>Si une troisième valeur est fournie, celle-ci correspondra au rayon du flou : <code><a href="#blur">&lt;blur-radius&gt;</a></code></li>
-   <li>Si une quatrième valeur est fournie, celle-ci correspondra au rayon d'étalement : <code><a href="#spread">&lt;spread-radius&gt;</a></code>.</li>
-  </ul>
- </li>
- <li>Au mot-clé optionnel <code><a href="#inset">inset</a></code></li>
- <li>À une valeur de couleur (<code><a href="#color">&lt;color&gt;</a></code>) optionnelle.</li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>inset</code></dt>
- <dd>Si la valeur n'est pas définie (le cas par défaut), l'ombre sera une ombre portée (comme si la boîte était élevée au-dessus du contenu).<br>
- La présence du mot-clé <code>inset</code> modifie l'ombre afin qu'elle soit tournée vers l'intérieur du cadre (comme si le contenu était enfoncé dans la boîte). Les ombres tournées vers l'intérieur sont dessinées à l'intérieur de la bordure (même les transparentes), au-dessus de l'arrière-plan mais sous le contenu.</dd>
- <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></dt>
- <dd>Deux valeurs de longueur ({{cssxref("&lt;length&gt;")}} qui permettent de définir le décalage de l'ombre. <code>&lt;offset-x&gt;</code> définit la distance horizontale du décalage et les valeurs négatives placeront l'ombre à gauche de l'élément. <code>&lt;offset-y&gt;</code> définit la distance verticale et les distances négatives placent l'ombre au-dessus de l'élément (cf. {{cssxref("&lt;length&gt;")}} pour les différentes unités possibles).<br>
- Si les deux valeurs sont <code>0</code>, l'ombre est placée derrière l'élément (et peut générer un effet de flou si <code>&lt;blur-radius&gt;</code> et/ou <code>&lt;spread-radius&gt;</code> est utilisé).</dd>
- <dt><code>&lt;blur-radius&gt;</code></dt>
- <dd>Une troisième valeur de longueur ({{cssxref("&lt;length&gt;")}}). Plus cette valeur sera grande, plus le flou de l'ombre sera diffus : l'ombre sera donc plus étalée et plus légère. Les valeurs négatives ne sont pas autorisées. Si la valeur n'est pas définie, sa valeur par défaut est <code>0</code> (le côté de l'ombre est rectiligne).</dd>
- <dt><code>&lt;spread-radius&gt;</code></dt>
- <dd>Une quatrième valeur de longueur ({{cssxref("&lt;length&gt;")}}). Les valeurs positives étaleront l'ombre et les valeurs négatives rétréciront l'ombre. Si elle n'est pas définie, la valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément).</dd>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Une valeur de couleur ({{cssxref("&lt;color&gt;")}}). Si la valeur n'est pas définie, la couleur utilisée dépend du navigateur ce sera généralement la propriété {{cssxref("color")}} mais Safari affiche une ombre transparente.</dd>
-</dl>
-
-<h3 id="Interpolation">Interpolation</h3>
-
-<p>Chaque ombre de la liste (<code>none</code> sera traitée comme une liste de longueur nulle) est interpolée via la couleur, le décalage horizontal et vertical, le rayon de flou et l'étalement (lorsque c'est pertinent). Pour chaque ombre, si les deux ombres sont ou ne sont pas <code>inset</code>, l'ombre interpolée doit respecter cette valeur. Si l'une des ombres a <code>inset</code> et l'autre non, la liste d'ombres ne peut pas être interpolée. Si les listes d'ombres ont des longueurs différentes, la liste la plus courte sera complétée à la fin avec des ombres dont la couleur est <code>transparent</code>, toutes les longueurs valent <code>0</code> et <code>inset</code> pour que la valeur corresponde à la plus longue liste.</p>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `box-shadow` peut être définie grâce :
+
+- À deux, trois ou quatre valeurs de longueur ({{cssxref("&lt;length&gt;")}}) :
+
+  - Avec deux valeurs, celles-ci sont respectivement considérées comme les coordonnées de décalage de l'ombre : [`<offset-x>` et `<offset-y>`](#offset)
+  - Si une troisième valeur est fournie, celle-ci correspondra au rayon du flou : [`<blur-radius>`](#blur)
+  - Si une quatrième valeur est fournie, celle-ci correspondra au rayon d'étalement : [`<spread-radius>`](#spread).
+
+- Au mot-clé optionnel [`inset`](#inset)
+- À une valeur de couleur ([`<color>`](#color)) optionnelle.
+
+### Valeurs
+
+- `inset`
+  - : Si la valeur n'est pas définie (le cas par défaut), l'ombre sera une ombre portée (comme si la boîte était élevée au-dessus du contenu).
+    La présence du mot-clé `inset` modifie l'ombre afin qu'elle soit tournée vers l'intérieur du cadre (comme si le contenu était enfoncé dans la boîte). Les ombres tournées vers l'intérieur sont dessinées à l'intérieur de la bordure (même les transparentes), au-dessus de l'arrière-plan mais sous le contenu.
+- `<offset-x>` `<offset-y>`
+  - : Deux valeurs de longueur ({{cssxref("&lt;length&gt;")}} qui permettent de définir le décalage de l'ombre. `<offset-x>` définit la distance horizontale du décalage et les valeurs négatives placeront l'ombre à gauche de l'élément. `<offset-y>` définit la distance verticale et les distances négatives placent l'ombre au-dessus de l'élément (cf. {{cssxref("&lt;length&gt;")}} pour les différentes unités possibles).
+    Si les deux valeurs sont `0`, l'ombre est placée derrière l'élément (et peut générer un effet de flou si `<blur-radius>` et/ou `<spread-radius>` est utilisé).
+- `<blur-radius>`
+  - : Une troisième valeur de longueur ({{cssxref("&lt;length&gt;")}}). Plus cette valeur sera grande, plus le flou de l'ombre sera diffus : l'ombre sera donc plus étalée et plus légère. Les valeurs négatives ne sont pas autorisées. Si la valeur n'est pas définie, sa valeur par défaut est `0` (le côté de l'ombre est rectiligne).
+- `<spread-radius>`
+  - : Une quatrième valeur de longueur ({{cssxref("&lt;length&gt;")}}). Les valeurs positives étaleront l'ombre et les valeurs négatives rétréciront l'ombre. Si elle n'est pas définie, la valeur par défaut est `0` (l'ombre aura la même taille que l'élément).
+- `<color>`
+  - : Une valeur de couleur ({{cssxref("&lt;color&gt;")}}). Si la valeur n'est pas définie, la couleur utilisée dépend du navigateur ce sera généralement la propriété {{cssxref("color")}} mais Safari affiche une ombre transparente.
+
+### Interpolation
+
+Chaque ombre de la liste (`none` sera traitée comme une liste de longueur nulle) est interpolée via la couleur, le décalage horizontal et vertical, le rayon de flou et l'étalement (lorsque c'est pertinent). Pour chaque ombre, si les deux ombres sont ou ne sont pas `inset`, l'ombre interpolée doit respecter cette valeur. Si l'une des ombres a `inset` et l'autre non, la liste d'ombres ne peut pas être interpolée. Si les listes d'ombres ont des longueurs différentes, la liste la plus courte sera complétée à la fin avec des ombres dont la couleur est `transparent`, toutes les longueurs valent `0` et `inset` pour que la valeur corresponde à la plus longue liste.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   height: 5em;
   width: 300px;
   background-color: rgba(128,128,128,0.1);
@@ -100,53 +95,40 @@ box-shadow: unset;
 .ombres_multiples_diffuses {
   box-shadow: inset 0 0 1em gold, 0 0 2em red;
   /* deux ombres dans la liste et des rayons de flou pour chacune */
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="ombre_droite_haut"&gt;Déportée dans l'autre sens&lt;/p&gt;
+```html
+<p class="ombre_droite_haut">Déportée dans l'autre sens</p>
 
-&lt;p class="ombre_interieure"&gt;L'ombre est dans le contenu !&lt;/p&gt;
+<p class="ombre_interieure">L'ombre est dans le contenu !</p>
 
-&lt;p class="ombres_multiples_diffuses"&gt;Du rouge dehors et du doré dedans&lt;/p&gt;
-</pre>
+<p class="ombres_multiples_diffuses">Du rouge dehors et du doré dedans</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+{{EmbedLiveSample("Exemples","400","300")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.box-shadow")}}</p>
+{{Compat("css.properties.box-shadow")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Quelques tests sur <code>box-shadow</code> (en anglais)</a></li>
- <li><a href="https://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">Tutoriel et box-shadow tutorial and examples</a></li>
- <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Générateur d'ombres CSS</a></li>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
- <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
- <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
-</ul>
+- [Quelques tests sur `box-shadow` (en anglais)](https://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html)
+- [Tutoriel et box-shadow tutorial and examples](https://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/)
+- [Générateur d'ombres CSS](https://cssgenerator.org/box-shadow-css-generator.html)
+- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
+- Le type de données {{cssxref("&lt;color&gt;")}}
+- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.
diff --git a/files/fr/web/css/box-sizing/index.md b/files/fr/web/css/box-sizing/index.md
index 2108d237cb..02c3527212 100644
--- a/files/fr/web/css/box-sizing/index.md
+++ b/files/fr/web/css/box-sizing/index.md
@@ -16,28 +16,25 @@ tags:
   - width
 translation_of: Web/CSS/box-sizing
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>box-sizing</code></strong> définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec <a href="/fr/docs/CSS/Modèle_de_boîte">le modèle de boîte CSS</a>).</p>
+La propriété CSS **`box-sizing`** définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec [le modèle de boîte CSS](/fr/docs/CSS/Modèle_de_boîte)).
 
-<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
+{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
 
-<p>En CSS, la largeur et la hauteur affectées à un élément s'appliquent par défaut à la boîte de contenu (<em>content box</em>) de l'élément. Si l'élément possède une bordure (<em>border</em>) ou du remplissage (<em>padding</em>), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l'écran. Cela signifie qu'il faut ajuster les valeurs de hauteur et de largeur afin qu'elles permettent d'ajouter n'importe quelle bordure ou n'importe quel remplissage qui serait ajouté par la suite.</p>
+En CSS, la largeur et la hauteur affectées à un élément s'appliquent par défaut à la boîte de contenu (_content box_) de l'élément. Si l'élément possède une bordure (_border_) ou du remplissage (_padding_), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l'écran. Cela signifie qu'il faut ajuster les valeurs de hauteur et de largeur afin qu'elles permettent d'ajouter n'importe quelle bordure ou n'importe quel remplissage qui serait ajouté par la suite.
 
-<p>La propriété <code>box-sizing</code> peut être utilisée afin d'ajuster ce comportement :</p>
+La propriété `box-sizing` peut être utilisée afin d'ajuster ce comportement :
 
-<ul>
- <li><code>content-box</code> est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée.</li>
- <li><code>border-box</code> indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.</li>
-</ul>
+- `content-box` est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée.
+- `border-box` indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.
 
-<div class="note">
-<p><strong>Note :</strong> Il est souvent utile de définir <code>box-sizing</code> à <code>border-box</code> aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu.  D'autre part, lors de l'utilisation de la <code>position: relative</code> ou <code>position: absolute</code>, l'utilisation de <code>box-sizing: content-box</code> permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable.</p>
-</div>
+> **Note :** Il est souvent utile de définir `box-sizing` à `border-box` aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu.  D'autre part, lors de l'utilisation de la `position: relative` ou `position: absolute`, l'utilisation de `box-sizing: content-box` permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 box-sizing: content-box;
 box-sizing: border-box;
 
@@ -45,34 +42,32 @@ box-sizing: border-box;
 box-sizing: inherit;
 box-sizing: initial;
 box-sizing: unset;
-</pre>
+```
 
-<p>La propriété <code>box-sizing</code> peut être définie avec l'un des mots-clés suivants.</p>
+La propriété `box-sizing` peut être définie avec l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>content-box</code></dt>
- <dd>C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (<em>padding</em>)). Ainsi, <code>.box {width: 350px; border:10px solid black;}</code> fournira une boîte dont la largeur vaut  <code>370px</code>.</dd>
- <dt><code>border-box</code></dt>
- <dd>Les propriétés {{cssxref("width")}} et {{cssxref("height")}} incluent le contenu, le remplissage (<em>padding</em>), la bordure, mais pas la marge. C'est le <a href="/fr/docs/CSS/Modèle_de_boîte">modèle de boîte</a> utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser <code>border-box</code> pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (<em>padding</em>) et du contenu.<br>
- <br>
- Ici, les dimensions de l'élément sont calculées comme suit : <em>largeur = bordure + marge interne + largeur du contenu</em>, et <em>hauteur = bordure + marge interne + hauteur du contenu</em>.</dd>
-</dl>
+- `content-box`
+  - : C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (_padding_)). Ainsi, `.box {width: 350px; border:10px solid black;}` fournira une boîte dont la largeur vaut  `370px`.
+- `border-box`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : Les propriétés {{cssxref("width")}} et {{cssxref("height")}} incluent le contenu, le remplissage (_padding_), la bordure, mais pas la marge. C'est le [modèle de boîte](/fr/docs/CSS/Modèle_de_boîte) utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser `border-box` pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (_padding_) et du contenu.
+
+    Ici, les dimensions de l'élément sont calculées comme suit : _largeur = bordure + marge interne + largeur du contenu_, et _hauteur = bordure + marge interne + hauteur du contenu_.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<div class="note">
-<p><strong>Note :</strong> La valeur <code>padding-box</code> a été dépréciée.</p>
-</div>
+> **Note :** La valeur `padding-box` a été dépréciée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 160px;
   height: 80px;
   padding: 20px;
@@ -94,45 +89,33 @@ box-sizing: unset;
      Hauteur totale : 80px
      Largeur de la boîte de contenu : 160px - (2 * 20px) - (2 * 8px) = 104px
      Hauteur de la boîte de contenu : 80px - (2 * 20px) - (2 * 8px) = 24px */
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="content-box"&gt;Content box&lt;/div&gt;
-&lt;br&gt;
-&lt;div class="border-box"&gt;Border box&lt;/div&gt;</pre>
+```html
+<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","auto","200")}}</p>
+{{EmbedLiveSample("Exemples","auto","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}} | {{Spec2('CSS3 Basic UI')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.box-sizing")}}</p>
+{{Compat("css.properties.box-sizing")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Apprendre : Le modèle de boîte CSS</a></li>
-</ul>
+- [Apprendre : Le modèle de boîte CSS](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte)
diff --git a/files/fr/web/css/break-after/index.md b/files/fr/web/css/break-after/index.md
index 4ed535eaf6..8b7437aaf6 100644
--- a/files/fr/web/css/break-after/index.md
+++ b/files/fr/web/css/break-after/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/break-after
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>break-after</code></strong> définit la façon dont la page, la colonne ou la région se fragmente après la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
+La propriété CSS **`break-after`** définit la façon dont la page, la colonne ou la région se fragmente après la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.
 
-<pre class="brush:css no-line-numbers">/* Valeurs génériques */
+```css
+/* Valeurs génériques */
 break-after: auto;
 break-after: avoid;
 break-after: always;
@@ -38,102 +39,74 @@ break-after: region;
 break-after: inherit;
 break-after: initial;
 break-after: unset;
-</pre>
-
-<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
-
-<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
-
-<ol>
- <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).</li>
- <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
-</ol>
-
-<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) après la boîte.</dd>
- <dt><code>always</code>{{experimental_inline}}</dt>
- <dd>Force la rupture après la boîte principale. Le type de rupture dépend du contexte de fragmentation. Si on est dans un conteneur multi-colonne, il y aura une rupture de colonne et si on est à l'intérieur d'un média paginé, il y aura une rupture de page.</dd>
- <dt><code>all</code>{{experimental_inline}}</dt>
- <dd>Force la rupture de page après la boîte principale. La rupture a lieu quel que soit le contexte de fragmentation. Ainsi, si on a un élément dans un conteneur multi-colonne lui-même situé dans un média paginé, il y aura une rupture de colonne et une rupture de page.</dd>
- <dt><code>avoid</code></dt>
- <dd>Empêche toute rupture (de page, de colonne ou de région) après la boîte.</dd>
- <dt><code>left</code></dt>
- <dd>Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page gauche.</dd>
- <dt><code>right</code></dt>
- <dd>Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page droite.</dd>
- <dt><code>page</code></dt>
- <dd>Force un saut de page après la boîte de l'élément.</dd>
- <dt><code>column</code></dt>
- <dd>Force une rupture de colonne de page après la boîte de l'élément.</dd>
- <dt><code>region</code> {{experimental_inline}}</dt>
- <dd>Force une rupture de région après la boîte de l'élément.</dd>
- <dt><code>recto</code> {{experimental_inline}}</dt>
- <dd>Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).</dd>
- <dt><code>verso</code> {{experimental_inline}}</dt>
- <dd>Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).</dd>
- <dt><code>avoid-page</code></dt>
- <dd>Empêche toute saut de page après la boîte de l'élément.</dd>
- <dt><code>avoid-column</code></dt>
- <dd>Empêche toute rupture de colonne après la boîte de l'élément.</dd>
- <dt><code>avoid-region </code>{{experimental_inline}}</dt>
- <dd>Empêche toute rupture de région après boîte de l'élément.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de `break-inside` de l'élément englobant.
+
+Pour déterminer si on a une rupture, on applique les règles suivantes :
+
+1.  Si l'une des trois valeurs correspond à une rupture forcée (`always`, `left`, `right`, `page`, `column` ou `region`), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).
+2.  Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (`avoid`, `avoid-page`, `avoid-region`, `avoid-column`), aucune rupture ne sera appliquée à cet endroit.
+
+Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.
+
+## Syntaxe
+
+### Valeurs
+
+- `auto`
+  - : Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) après la boîte.
+- `always`{{experimental_inline}}
+  - : Force la rupture après la boîte principale. Le type de rupture dépend du contexte de fragmentation. Si on est dans un conteneur multi-colonne, il y aura une rupture de colonne et si on est à l'intérieur d'un média paginé, il y aura une rupture de page.
+- `all`{{experimental_inline}}
+  - : Force la rupture de page après la boîte principale. La rupture a lieu quel que soit le contexte de fragmentation. Ainsi, si on a un élément dans un conteneur multi-colonne lui-même situé dans un média paginé, il y aura une rupture de colonne et une rupture de page.
+- `avoid`
+  - : Empêche toute rupture (de page, de colonne ou de région) après la boîte.
+- `left`
+  - : Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page gauche.
+- `right`
+  - : Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page droite.
+- `page`
+  - : Force un saut de page après la boîte de l'élément.
+- `column`
+  - : Force une rupture de colonne de page après la boîte de l'élément.
+- `region` {{experimental_inline}}
+  - : Force une rupture de région après la boîte de l'élément.
+- `recto` {{experimental_inline}}
+  - : Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).
+- `verso` {{experimental_inline}}
+  - : Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).
+- `avoid-page`
+  - : Empêche toute saut de page après la boîte de l'élément.
+- `avoid-column`
+  - : Empêche toute rupture de colonne après la boîte de l'élément.
+- `avoid-region `{{experimental_inline}}
+  - : Empêche toute rupture de région après boîte de l'élément.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Synonymes_pour_page-break-after">Synonymes pour <code>page-break-after</code></h2>
-
-<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-after")}} devrait être traitée par les navigateurs comme un alias de <code>break-after</code>. Cela permet de s'assurer que les sites qui utilisaient <code>page-break-after</code> continuent de fonctionner. Voici un sous-ensemble des valeurs avec leurs alias :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><code>page-break-after</code></th>
-   <th scope="col"><code>break-after</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>auto</code></td>
-   <td><code>auto</code></td>
-  </tr>
-  <tr>
-   <td><code>left</code></td>
-   <td><code>left</code></td>
-  </tr>
-  <tr>
-   <td><code>right</code></td>
-   <td><code>right</code></td>
-  </tr>
-  <tr>
-   <td><code>avoid</code></td>
-   <td><code>avoid</code></td>
-  </tr>
-  <tr>
-   <td><code>always</code></td>
-   <td><code>page</code></td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note :</strong> La valeur <code>always</code> de <code>page-break-*</code> a été implémenté par les navigateurs comme une rupture de page et pas comme une rupture de colonne. C'est pourquoi l'alias correspondant à cette valeur est <code>page</code> et pas <code>always</code>.</p>
-</div>
+## Synonymes pour `page-break-after`
+
+Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-after")}} devrait être traitée par les navigateurs comme un alias de `break-after`. Cela permet de s'assurer que les sites qui utilisaient `page-break-after` continuent de fonctionner. Voici un sous-ensemble des valeurs avec leurs alias :
+
+| `page-break-after` | `break-after` |
+| ------------------ | ------------- |
+| `auto`             | `auto`        |
+| `left`             | `left`        |
+| `right`            | `right`       |
+| `avoid`            | `avoid`       |
+| `always`           | `page`        |
+
+> **Note :** La valeur `always` de `page-break-*` a été implémenté par les navigateurs comme une rupture de page et pas comme une rupture de colonne. C'est pourquoi l'alias correspondant à cette valeur est `page` et pas `always`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
@@ -146,64 +119,45 @@ p {
   /* Pour WebKit : */
   -webkit-column-break-after: avoid;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;
-  &lt;p&gt;« Mais alors, » pensa Alice, « ne serai-je donc
+```html
+<div class="exemple">
+  <p>« Mais alors, » pensa Alice, « ne serai-je donc
   jamais plus vieille que je ne le suis maintenant ?
   D’un côté cela aura ses avantages, ne jamais être
   une vieille femme. Mais alors avoir toujours des
   leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »&lt;/p&gt;
-  &lt;p&gt;« Oh ! Alice, petite folle, » se répondit-elle.
+  tout. »</p>
+  <p>« Oh ! Alice, petite folle, » se répondit-elle.
   « Comment pourriez-vous apprendre des leçons ici ?
   Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}}</td>
-   <td>{{Spec2('CSS3 Fragmentation')}}</td>
-   <td>Ajouts des mots-clés <code>recto</code> et <code>verso</code>. Le type de média pour cette propriété est passé de <code>paged</code> à <code>visual</code>. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}</td>
-   <td>{{Spec2('CSS3 Regions')}}</td>
-   <td>La spécification étend la propriété pour gérer les sauts de région. Les mots-clés <code>avoid-region</code> et <code>region</code> sont ajoutés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale. La spécification étend la propriété {{cssxref("page-break-after")}} de CSS 2.1 afin de gérer les sauts de page ou de colonne.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="Prise_en_charge_pour_une_disposition_multi-colonnes">Prise en charge pour une disposition multi-colonnes</h3>
-
-<p>{{Compat("css.properties.break-after.multicol_context")}}</p>
-
-<h3 id="Prise_en_charge_pour_les_média_paginés">Prise en charge pour les média paginés</h3>
-
-<p>{{Compat("css.properties.break-after.paged_context")}}</p>
+  a pas du tout pour vos livres de leçons. »</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","400","300")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                                                                                                                                                                       |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}} | {{Spec2('CSS3 Fragmentation')}} | Ajouts des mots-clés `recto` et `verso`. Le type de média pour cette propriété est passé de `paged` à `visual`. L'algorithme de rupture est précisé afin de gérer les différents types de rupture. |
+| {{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}} | {{Spec2('CSS3 Regions')}}         | La spécification étend la propriété pour gérer les sauts de région. Les mots-clés `avoid-region` et `region` sont ajoutés.                                                                         |
+| {{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}         | {{Spec2('CSS3 Multicol')}}     | Définition initiale. La spécification étend la propriété {{cssxref("page-break-after")}} de CSS 2.1 afin de gérer les sauts de page ou de colonne.                                        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+### Prise en charge pour une disposition multi-colonnes
+
+{{Compat("css.properties.break-after.multicol_context")}}
+
+### Prise en charge pour les média paginés
+
+{{Compat("css.properties.break-after.paged_context")}}
diff --git a/files/fr/web/css/break-before/index.md b/files/fr/web/css/break-before/index.md
index 7ea0446d08..b757c6a076 100644
--- a/files/fr/web/css/break-before/index.md
+++ b/files/fr/web/css/break-before/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/break-before
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>break-before</code></strong> décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
+La propriété** `break-before`** décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de rupture génériques */
+```css
+/* Valeurs de rupture génériques */
 break-before: auto;
 break-before: avoid;
 break-before: always;
@@ -37,121 +38,87 @@ break-before: region;
 break-before: inherit;
 break-before: initial;
 break-before: unset;
-</pre>
+```
 
-<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
+Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de `break-inside` de l'élément englobant.
 
-<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
+Pour déterminer si on a une rupture, on applique les règles suivantes :
 
-<ol>
- <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).</li>
- <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
-</ol>
+1.  Si l'une des trois valeurs correspond à une rupture forcée (`always`, `left`, `right`, `page`, `column` ou `region`), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).
+2.  Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (`avoid`, `avoid-page`, `avoid-region`, `avoid-column`), aucune rupture ne sera appliquée à cet endroit.
 
-<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
+Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>break-before</code> se paramètre avec un des mots-clés définis ci-après.</p>
+La propriété `break-before` se paramètre avec un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<h4 id="Valeurs_de_rupture_génériques">Valeurs de rupture génériques</h4>
+#### Valeurs de rupture génériques
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte.</dd>
- <dt><code>all</code>{{experimental_inline}}</dt>
- <dd>Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page.</dd>
- <dt><code>always</code>{{experimental_inline}}</dt>
- <dd>Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page.</dd>
- <dt><code>avoid</code></dt>
- <dd>Empêche toute rupture (de page, de colonne ou de région) avant la boîte.</dd>
-</dl>
+- `auto`
+  - : Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte.
+- `all`{{experimental_inline}}
+  - : Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page.
+- `always`{{experimental_inline}}
+  - : Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page.
+- `avoid`
+  - : Empêche toute rupture (de page, de colonne ou de région) avant la boîte.
 
-<h4 id="Valeurs_de_rupture_liées_aux_médias_paginés">Valeurs de rupture liées aux médias paginés</h4>
+#### Valeurs de rupture liées aux médias paginés
 
-<dl>
- <dt><code>avoid-page</code></dt>
- <dd>Empêche toute saut de page avant la boîte de l'élément.</dd>
- <dt><code>page</code></dt>
- <dd>Force un saut de page avant la boîte de l'élément</dd>
- <dt><code>left</code></dt>
- <dd>Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche.</dd>
- <dt><code>recto</code> {{experimental_inline}}</dt>
- <dd>Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).</dd>
- <dt><code>right</code></dt>
- <dd>Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite.</dd>
- <dt><code>verso</code>{{experimental_inline}}</dt>
- <dd>Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).</dd>
-</dl>
+- `avoid-page`
+  - : Empêche toute saut de page avant la boîte de l'élément.
+- `page`
+  - : Force un saut de page avant la boîte de l'élément
+- `left`
+  - : Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche.
+- `recto` {{experimental_inline}}
+  - : Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).
+- `right`
+  - : Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite.
+- `verso`{{experimental_inline}}
+  - : Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).
 
-<h4 id="Valeurs_de_ruptures_relatives_aux_dispositions_en_colonnes">Valeurs de ruptures relatives aux dispositions en colonnes</h4>
+#### Valeurs de ruptures relatives aux dispositions en colonnes
 
-<dl>
- <dt><code>avoid-column</code></dt>
- <dd>Empêche toute rupture de colonne avant la boîte de l'élément.</dd>
- <dt><code>column</code></dt>
- <dd>Force une rupture de colonne de page avant la boîte de l'élément.</dd>
-</dl>
+- `avoid-column`
+  - : Empêche toute rupture de colonne avant la boîte de l'élément.
+- `column`
+  - : Force une rupture de colonne de page avant la boîte de l'élément.
 
-<h4 id="Valeurs_de_ruptures_relatives_aux_régions">Valeurs de ruptures relatives aux régions</h4>
+#### Valeurs de ruptures relatives aux régions
 
-<dl>
- <dt><code>region</code>{{experimental_inline}}</dt>
- <dd>Force une rupture de région avant la boîte de l'élément.</dd>
- <dt><code>avoid-region</code>{{experimental_inline}}</dt>
- <dd>Empêche toute rupture de région avant la boîte de l'élément.</dd>
-</dl>
+- `region`{{experimental_inline}}
+  - : Force une rupture de région avant la boîte de l'élément.
+- `avoid-region`{{experimental_inline}}
+  - : Empêche toute rupture de région avant la boîte de l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Aliassynonymes_pour_les_ruptures_de_page">Alias/synonymes pour les ruptures de page</h2>
-
-<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-before")}} devrait être considérée par les navigateurs comme un synonyme de <code>break-before</code>. Cela permet aux sites utilisant <code>page-break-before</code> de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><code>page-break-before</code></th>
-   <th scope="col"><code>break-before</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>auto</code></td>
-   <td><code>auto</code></td>
-  </tr>
-  <tr>
-   <td><code>left</code></td>
-   <td><code>left</code></td>
-  </tr>
-  <tr>
-   <td><code>right</code></td>
-   <td><code>right</code></td>
-  </tr>
-  <tr>
-   <td><code>avoid</code></td>
-   <td><code>avoid</code></td>
-  </tr>
-  <tr>
-   <td><code>always</code></td>
-   <td><code>page</code></td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note :</strong> La valeur <code>always</code> pour <code>page-break-before</code> a été implémentée par les navigateurs comme une rupture de page et non comme une rupture de colonne. C'est pourquoi l'alias ici utilisé est <code>page</code> et non <code>always</code>.</p>
-</div>
+## Alias/synonymes pour les ruptures de page
+
+Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-before")}} devrait être considérée par les navigateurs comme un synonyme de `break-before`. Cela permet aux sites utilisant `page-break-before` de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias :
+
+| `page-break-before` | `break-before` |
+| ------------------- | -------------- |
+| `auto`              | `auto`         |
+| `left`              | `left`         |
+| `right`             | `right`        |
+| `avoid`             | `avoid`        |
+| `always`            | `page`         |
+
+> **Note :** La valeur `always` pour `page-break-before` a été implémentée par les navigateurs comme une rupture de page et non comme une rupture de colonne. C'est pourquoi l'alias ici utilisé est `page` et non `always`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
@@ -164,64 +131,45 @@ p {
   /* Pour WebKit : */
   -webkit-column-break-before: avoid;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;
-  &lt;p&gt;« Mais alors, » pensa Alice, « ne serai-je donc
+```html
+<div class="exemple">
+  <p>« Mais alors, » pensa Alice, « ne serai-je donc
   jamais plus vieille que je ne le suis maintenant ?
   D’un côté cela aura ses avantages, ne jamais être
   une vieille femme. Mais alors avoir toujours des
   leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »&lt;/p&gt;
-  &lt;p&gt;« Oh ! Alice, petite folle, » se répondit-elle.
+  tout. »</p>
+  <p>« Oh ! Alice, petite folle, » se répondit-elle.
   « Comment pourriez-vous apprendre des leçons ici ?
   Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}</td>
-   <td>{{Spec2('CSS3 Fragmentation')}}</td>
-   <td>Ajouts des mots-clés <code>recto</code> et <code>verso</code>. Le type de média pour cette propriété est passé de <code>paged</code> à <code>visual</code>. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}</td>
-   <td>{{Spec2('CSS3 Regions')}}</td>
-   <td>La spécification étend la propriété pour gérer les sauts de région. Les mots-clés <code>avoid-region</code> et <code>region</code> sont ajoutés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale. La spécification étend la propriété {{cssxref("page-break-before")}} de  CSS 2.1 afin de gérer les sauts de page ou de colonne.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="Prise_en_charge_pour_une_disposition_multi-colonnes">Prise en charge pour une disposition multi-colonnes</h3>
-
-<p>{{Compat("css.properties.break-before.multicol_context")}}</p>
-
-<h3 id="Prise_en_charge_pour_les_média_paginés">Prise en charge pour les média paginés</h3>
-
-<p>{{Compat("css.properties.break-before.paged_context")}}</p>
+  a pas du tout pour vos livres de leçons. »</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","400","300")}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                     | Commentaires                                                                                                                                                                                       |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}                         | {{Spec2('CSS3 Fragmentation')}} | Ajouts des mots-clés `recto` et `verso`. Le type de média pour cette propriété est passé de `paged` à `visual`. L'algorithme de rupture est précisé afin de gérer les différents types de rupture. |
+| {{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}                             | {{Spec2('CSS3 Regions')}}         | La spécification étend la propriété pour gérer les sauts de région. Les mots-clés `avoid-region` et `region` sont ajoutés.                                                                         |
+| {{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}} | {{Spec2('CSS3 Multicol')}}     | Définition initiale. La spécification étend la propriété {{cssxref("page-break-before")}} de  CSS 2.1 afin de gérer les sauts de page ou de colonne.                                   |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+### Prise en charge pour une disposition multi-colonnes
+
+{{Compat("css.properties.break-before.multicol_context")}}
+
+### Prise en charge pour les média paginés
+
+{{Compat("css.properties.break-before.paged_context")}}
diff --git a/files/fr/web/css/break-inside/index.md b/files/fr/web/css/break-inside/index.md
index 4a0ca31b30..37763cf0db 100644
--- a/files/fr/web/css/break-inside/index.md
+++ b/files/fr/web/css/break-inside/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/break-inside
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>break-inside</code></strong> définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
+La propriété CSS **`break-inside`** définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 break-inside: auto;
 break-inside: avoid;
 break-inside: avoid-page;
@@ -22,70 +23,53 @@ break-inside: avoid-region;
 break-inside: inherit;
 break-inside: initial;
 break-inside: unset;
-</pre>
+```
 
-<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
+Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de `break-inside` de l'élément englobant.
 
-<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
+Pour déterminer si on a une rupture, on applique les règles suivantes :
 
-<ol>
- <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur <code>break-inside</code>).</li>
- <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code> ou <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
-</ol>
+1.  Si l'une des trois valeurs correspond à une rupture forcée (`always`, `left`, `right`, `page`, `column` ou `region`), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur `break-inside`).
+2.  Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (`avoid`, `avoid-page`, `avoid-region` ou `avoid-column`), aucune rupture ne sera appliquée à cet endroit.
 
-<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
+Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>break-inside</code> se définit avec un mot-clé parmi ceux de la liste ci-après.</p>
+La propriété `break-inside` se définit avec un mot-clé parmi ceux de la liste ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).</dd>
- <dt><code>avoid</code></dt>
- <dd>Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.</dd>
- <dt><code>avoid-page</code></dt>
- <dd>Cette valeur interdit toute rupture de page au sein de la boîte.</dd>
- <dt><code>avoid-column</code></dt>
- <dd>Cette valeur interdit toute rupture de colonne au sein de la boîte.</dd>
- <dt><code>avoid-region</code> {{experimental_inline}}</dt>
- <dd>Cette valeur interdit toute rupture de région au sein de la boîte.</dd>
-</dl>
+- `auto`
+  - : Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).
+- `avoid`
+  - : Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.
+- `avoid-page`
+  - : Cette valeur interdit toute rupture de page au sein de la boîte.
+- `avoid-column`
+  - : Cette valeur interdit toute rupture de colonne au sein de la boîte.
+- `avoid-region` {{experimental_inline}}
+  - : Cette valeur interdit toute rupture de région au sein de la boîte.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Synonymes_pour_page-break-inside">Synonymes pour <code>page-break-inside</code></h2>
-
-<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-inside")}} devrait être traitée par les navigateurs comme <code>break-inside</code>. De cette façon, cela permet aux sites qui utilisaient <code>page-break-inside</code> de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><code>page-break-inside</code></th>
-   <th scope="col"><code>break-inside</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>auto</code></td>
-   <td><code>auto</code></td>
-  </tr>
-  <tr>
-   <td><code>avoid</code></td>
-   <td><code>avoid</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">.exemple {
+## Synonymes pour `page-break-inside`
+
+Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-inside")}} devrait être traitée par les navigateurs comme `break-inside`. De cette façon, cela permet aux sites qui utilisaient `page-break-inside` de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :
+
+| `page-break-inside` | `break-inside` |
+| ------------------- | -------------- |
+| `auto`              | `auto`         |
+| `avoid`             | `avoid`        |
+
+## Exemples
+
+### CSS
+
+```css
+.exemple {
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
@@ -98,64 +82,45 @@ p {
   /* Pour WebKit : */
   -webkit-column-break-inside: avoid;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;
-  &lt;p&gt;« Mais alors, » pensa Alice, « ne serai-je donc
+```html
+<div class="exemple">
+  <p>« Mais alors, » pensa Alice, « ne serai-je donc
   jamais plus vieille que je ne le suis maintenant ?
   D’un côté cela aura ses avantages, ne jamais être
   une vieille femme. Mais alors avoir toujours des
   leçons à apprendre ! Oh, je n’aimerais pas cela du
-  tout. »&lt;/p&gt;
-  &lt;p&gt;« Oh ! Alice, petite folle, » se répondit-elle.
+  tout. »</p>
+  <p>« Oh ! Alice, petite folle, » se répondit-elle.
   « Comment pourriez-vous apprendre des leçons ici ?
   Il y a à peine de la place pour vous, et il n’y en
-  a pas du tout pour vos livres de leçons. »&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}</td>
-   <td>{{Spec2('CSS3 Fragmentation')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}</td>
-   <td>{{Spec2('CSS3 Regions')}}</td>
-   <td>Ajout de la gestion des ruptures de région.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.break-inside", 4)}}</p>
-
-<h3 id="Notes_relatives_à_la_compatibilité">Notes relatives à la compatibilité</h3>
-
-<p>Avant Firefox 65, l'ancienne propriété {{cssxref("page-break-inside")}} fonctionnait dans Firefox en empêchant les ruptures de colonnes et de pages. On utilisera les deux propriétés afin d'obtenir une rétrocompatibilité avec ces versions.</p>
-
-<p>Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée <code>-webkit-column-break-inside</code> afin de contrôler les ruptures de colonne.</p>
+  a pas du tout pour vos livres de leçons. »</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","400","300")}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                     | Commentaires                                |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------- |
+| {{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}                             | {{Spec2('CSS3 Fragmentation')}} | Aucune modification.                        |
+| {{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}                             | {{Spec2('CSS3 Regions')}}         | Ajout de la gestion des ruptures de région. |
+| {{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}} | {{Spec2('CSS3 Multicol')}}     | Définition initiale.                        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.break-inside", 4)}}
+
+### Notes relatives à la compatibilité
+
+Avant Firefox 65, l'ancienne propriété {{cssxref("page-break-inside")}} fonctionnait dans Firefox en empêchant les ruptures de colonnes et de pages. On utilisera les deux propriétés afin d'obtenir une rétrocompatibilité avec ces versions.
+
+Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée `-webkit-column-break-inside` afin de contrôler les ruptures de colonne.
diff --git a/files/fr/web/css/calc()/index.md b/files/fr/web/css/calc()/index.md
index b3eb962d7b..1131d1c309 100644
--- a/files/fr/web/css/calc()/index.md
+++ b/files/fr/web/css/calc()/index.md
@@ -8,54 +8,52 @@ tags:
   - Web
 translation_of: Web/CSS/calc()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>calc()</code></strong> peut être utilisée à n'importe quel endroit où une {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;number&gt;")}}, {{cssxref("&lt;percentage&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est nécessaire. Grâce à <code>calc()</code>, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.</p>
+La fonction **`calc()`** peut être utilisée à n'importe quel endroit où une {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;number&gt;")}}, {{cssxref("&lt;percentage&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est nécessaire. Grâce à `calc()`, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.
 
-<pre class="brush: css no-line-numbers">/* property: calc(expression) */
+```css
+/* property: calc(expression) */
 width: calc(100% - 80px);
-</pre>
+```
 
-<p>Il est aussi possible d'utiliser <code>calc()</code> dans une autre fonction <code>calc()</code> et ainsi d'imbriquer les fonctions les unes dans les autres.</p>
+Il est aussi possible d'utiliser `calc()` dans une autre fonction `calc()` et ainsi d'imbriquer les fonctions les unes dans les autres.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une fonction qui prend comme seul argument une expression mathématique et dont le résultat est utilisé comme valeur de retour. L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants, en respectant l'ordre de priorité des opérateurs :</p>
+Une fonction qui prend comme seul argument une expression mathématique et dont le résultat est utilisé comme valeur de retour. L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants, en respectant l'ordre de priorité des opérateurs :
 
-<dl>
- <dt><code>+</code></dt>
- <dd>Addition</dd>
- <dt><code>-</code></dt>
- <dd>Soustraction</dd>
- <dt><code>*</code></dt>
- <dd>Multiplication. Au moins un des arguments doit être un {{cssxref("&lt;number&gt;")}}.</dd>
- <dt><code>/</code></dt>
- <dd>Division. Il n'est pas possible de diviser par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante. L'opérande droit doit être une valeur de type {{cssxref("&lt;number&gt;")}}.</dd>
-</dl>
+- `+`
+  - : Addition
+- `-`
+  - : Soustraction
+- `*`
+  - : Multiplication. Au moins un des arguments doit être un {{cssxref("&lt;number&gt;")}}.
+- `/`
+  - : Division. Il n'est pas possible de diviser par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante. L'opérande droit doit être une valeur de type {{cssxref("&lt;number&gt;")}}.
 
-<p>L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations.</p>
+L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations.
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<ul>
- <li>Une division par zéro aboutit à une erreur qui est générée par le parseur HTML.</li>
- <li>Les opérateurs <code>+</code> et <code>-</code> <strong>doivent toujours être entouré d'espaces</strong>. Par exemple l'opérande de <code>calc(50% -8px)</code> sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de <code>calc(50% - 8px)</code> est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, <code>calc(8px + -50%)</code> est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif.</li>
- <li>Les opérateurs <code>*</code> et <code>/</code> ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé.</li>
- <li>Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était <code>auto</code> qui avait été utilisé.</li>
- <li>Il est possible d'imbriquer des fonctions <code>calc()</code>, auquel cas, les appels « internes » sont considérés comme des parenthèses.</li>
-</ul>
+- Une division par zéro aboutit à une erreur qui est générée par le parseur HTML.
+- Les opérateurs `+` et `-` **doivent toujours être entouré d'espaces**. Par exemple l'opérande de `calc(50% -8px)` sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de `calc(50% - 8px)` est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, `calc(8px + -50%)` est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif.
+- Les opérateurs `*` et `/` ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé.
+- Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était `auto` qui avait été utilisé.
+- Il est possible d'imbriquer des fonctions `calc()`, auquel cas, les appels « internes » sont considérés comme des parenthèses.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Positionner_un_objet_sur_l’écran_avec_une_marge">Positionner un objet sur l’écran avec une marge</h3>
+### Positionner un objet sur l’écran avec une marge
 
-<p><code>calc()</code> rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre :</p>
+`calc()` rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre :
 
-<pre class="brush: css">.banniere {
+```css
+.banniere {
   position: absolute;
   left: 40px;
   width: calc(100% - 80px);
@@ -66,19 +64,22 @@ width: calc(100% - 80px);
   text-align: center;
   box-sizing: border-box;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="banniere"&gt;C'est une bannière !&lt;/div&gt;</pre>
+```html
+<div class="banniere">C'est une bannière !</div>
+```
 
-<p>{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}</p>
+{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}
 
-<h3 id="Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur">Dimensionner automatiquement les champs d’un formulaire pour s’ajuster au conteneur</h3>
+### Dimensionner automatiquement les champs d’un formulaire pour s’ajuster au conteneur
 
-<p>Un autre cas d'utilisation de <code>calc()</code> est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée.</p>
+Un autre cas d'utilisation de `calc()` est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée.
 
-<p>Regardons un peu le CSS :</p>
+Regardons un peu le CSS :
 
-<pre class="brush: css">input {
+```css
+input {
   padding: 2px;
   display: block;
   width: calc(100% - 1em);
@@ -89,73 +90,61 @@ width: calc(100% - 80px);
   border: 1px solid black;
   padding: 4px;
 }
-</pre>
+```
 
-<p>Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons <code>calc()</code> pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini :</p>
+Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons `calc()` pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div id="boiteformulaire"&gt;
-  &lt;label&gt;Tapez quelque chose :&lt;/label&gt;
-  &lt;input type="text"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
-</pre>
+```html
+<form>
+  <div id="boiteformulaire">
+  <label>Tapez quelque chose :</label>
+  <input type="text">
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample("Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur", '100%', '80')}}</p>
+{{EmbedLiveSample("Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur", '100%', '80')}}
 
-<h3 id="Imbriquer_plusieurs_calc_grâce_aux_variables_CSS">Imbriquer plusieurs <code>calc()</code> grâce aux variables CSS</h3>
+### Imbriquer plusieurs `calc()` grâce aux variables CSS
 
-<p>Prenons la feuille de style suivante :</p>
+Prenons la feuille de style suivante :
 
-<pre class="brush: css">.toto {
+```css
+.toto {
   --largeurA: 100px;
   --largeurB: calc(var(--largeurA) / 2);
   --largeurC: calc(var(--largeurB) / 2);
   width: var(--largeurC);
-}</pre>
+}
+```
 
-<p>Une fois que toutes les variables sont développées, <code>largeurC</code> aura la valeur <code>calc( calc( 100px / 2) / 2)</code> et sera ensuite affectée à la propriété {{cssxref("width")}} des éléments de la classe <code>toto</code>. Tous les <code>calc()</code> imbriqués, quel que soit leur nombre, seront convertis en parenthèses, la valeur sera donc calculée comme <code>calc( ( 100px / 2) / 2)</code> (soit 25px). En résumé, utiliser des <code>calc()</code> imbriqués revient à utiliser des parenthèses.</p>
+Une fois que toutes les variables sont développées, `largeurC` aura la valeur `calc( calc( 100px / 2) / 2)` et sera ensuite affectée à la propriété {{cssxref("width")}} des éléments de la classe `toto`. Tous les `calc()` imbriqués, quel que soit leur nombre, seront convertis en parenthèses, la valeur sera donc calculée comme `calc( ( 100px / 2) / 2)` (soit 25px). En résumé, utiliser des `calc()` imbriqués revient à utiliser des parenthèses.
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Lorsque vous utilisez <code>calc()</code> pour définir la taille d'un texte, assurez-vous d'inclure <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a>. Par exemple :</p>
+Lorsque vous utilisez `calc()` pour définir la taille d'un texte, assurez-vous d'inclure [une unité de longueur relative](/fr/docs/Web/CSS/length#Unités_de_longueur_relatives). Par exemple :
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   font-size: calc(1.5rem + 3vw);
-}</pre>
-
-<p>De cette façon, la taille du texte s'adaptera si le lecteur zoome/dézoome.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html"><em>Understanding Success Criterion 1.4.4 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.calc")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog">Firefox 4 : CSS3 <code>calc()</code> sur Mozilla Hacks</a></li>
-</ul>
+}
+```
+
+De cette façon, la taille du texte s'adaptera si le lecteur zoome/dézoome.
+
+- [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 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+
+## Spécifications
+
+| Spécification                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}} | {{Spec2('CSS3 Values')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.calc")}}
+
+## Voir aussi
+
+- [Firefox 4 : CSS3 `calc()` sur Mozilla Hacks](https://hacks.mozilla.org/2010/06/css3-calc/ "Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog")
diff --git a/files/fr/web/css/caption-side/index.md b/files/fr/web/css/caption-side/index.md
index 46b1691fd8..1c6448b38c 100644
--- a/files/fr/web/css/caption-side/index.md
+++ b/files/fr/web/css/caption-side/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/caption-side
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>caption-side</code></strong> permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément {{HTMLElement("caption")}} du tableau). Les valeurs sont relatives au mode d'écriture (cf. {{cssxref("writing-mode")}}) du tableau.</p>
+La propriété **`caption-side`** permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément {{HTMLElement("caption")}} du tableau). Les valeurs sont relatives au mode d'écriture (cf. {{cssxref("writing-mode")}}) du tableau.
 
-<div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div>
+{{EmbedInteractiveExample("pages/css/caption-side.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 /* Valeurs directionnelles */
 caption-side: top;
 caption-side: bottom;
@@ -31,82 +32,66 @@ caption-side: bottom-outside;
 caption-side: inherit;
 caption-side: initial;
 caption-side: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>top</code></dt>
- <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.</dd>
- <dt><code>bottom</code></dt>
- <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau.</dd>
- <dt><code>left</code> {{non-standard_inline}}</dt>
- <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée à gauche du tableau.<br>
- {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}</dd>
- <dt><code>right</code> {{non-standard_inline}}</dt>
- <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée à droite du tableau.<br>
- {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}</dd>
- <dt><code>top-outside</code> {{non-standard_inline}}</dt>
- <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.<br>
- {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>top</code>, réintroduit avec cette valeur dans une future spécification.")}}</dd>
- <dt><code>bottom-outside</code> {{non-standard_inline}}</dt>
- <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.<br>
- {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>bottom</code>, réintroduit avec cette valeur dans une future spécification.")}}</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `top`
+  - : Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.
+- `bottom`
+  - : Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau.
+- `left` {{non-standard_inline}}
+  - : Un mot-clé qui indique que la boîte de la légende doit être positionnée à gauche du tableau.
+    {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}
+- `right` {{non-standard_inline}}
+  - : Un mot-clé qui indique que la boîte de la légende doit être positionnée à droite du tableau.
+    {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}
+- `top-outside` {{non-standard_inline}}
+  - : Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.
+    {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>top</code>, réintroduit avec cette valeur dans une future spécification.")}}
+- `bottom-outside` {{non-standard_inline}}
+  - : Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.
+    {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>bottom</code>, réintroduit avec cette valeur dans une future spécification.")}}
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">caption {
+```css
+caption {
   caption-side: bottom;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;table&gt;
-  &lt;caption&gt;Une légende&lt;/caption&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Des données d'un tableau&lt;/td&gt;
-    &lt;td&gt;Pfiou encore des données&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
+```html
+<table>
+  <caption>Une légende</caption>
+  <tr>
+    <td>Des données d'un tableau</td>
+    <td>Pfiou encore des données</td>
+  </tr>
+</table>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+{{EmbedLiveSample("Exemples","300","300")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Logical Properties', '#caption-side', 'caption-side')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>Les valeurs <code>top</code> et <code>bottom</code> sont désormais définies comme relatives à la valeur de <code>writing-mode</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                             | Commentaires                                                                                         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS Logical Properties', '#caption-side', 'caption-side')}} | {{Spec2('CSS Logical Properties')}} | Les valeurs `top` et `bottom` sont désormais définies comme relatives à la valeur de `writing-mode`. |
+| {{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}     | {{Spec2('CSS2.1')}}                         | Définition initiale.                                                                                 |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.caption-side")}}</p>
+{{Compat("css.properties.caption-side")}}
diff --git a/files/fr/web/css/caret-color/index.md b/files/fr/web/css/caret-color/index.md
index ef1f0eb278..daf962cdc6 100644
--- a/files/fr/web/css/caret-color/index.md
+++ b/files/fr/web/css/caret-color/index.md
@@ -8,93 +8,82 @@ tags:
   - Web
 translation_of: Web/CSS/caret-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>caret-color</code></strong> définit la couleur du curseur visible à l'endroit où l'utilisateur peut ajouter du texte ou un autre contenu dans l'élément lorsqu'il saisit au clavier ou qu'il édite les informations.</p>
+La propriété CSS **`caret-color`** définit la couleur du curseur visible à l'endroit où l'utilisateur peut ajouter du texte ou un autre contenu dans l'élément lorsqu'il saisit au clavier ou qu'il édite les informations.
 
-<div>{{EmbedInteractiveExample("pages/css/caret-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/caret-color.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> Les agents utilisateurs peuvent considérer que d'autres objets doivent être impactés par cette propriété : par exemple le curseur de navigation, qui ressemble au curseur de saisie et qui peut être déplacé sur un texte non-éditable. En revanche, bien que l'icône du curseur de la souris puisse ressembler à un curseur de saisie lorsque {{cssxref("cursor")}} vaut <code>auto</code> ou <code>text</code> ou <code>vertical-text</code>, celle-ci n'est pas modifiée par cette propriété. Pour certains navigateurs qui ne prennent pas en charge cette propriété, la couleur du curseur de saisie n'est pas associée à la couleur de la police.</p>
-</div>
+> **Note :** Les agents utilisateurs peuvent considérer que d'autres objets doivent être impactés par cette propriété : par exemple le curseur de navigation, qui ressemble au curseur de saisie et qui peut être déplacé sur un texte non-éditable. En revanche, bien que l'icône du curseur de la souris puisse ressembler à un curseur de saisie lorsque {{cssxref("cursor")}} vaut `auto` ou `text` ou `vertical-text`, celle-ci n'est pas modifiée par cette propriété. Pour certains navigateurs qui ne prennent pas en charge cette propriété, la couleur du curseur de saisie n'est pas associée à la couleur de la police.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 caret-color: auto;
 caret-color: transparent;
 color: currentColor;
 
 /* Valeurs de couleur */
-/* Type &lt;color&gt; */
+/* Type <color> */
 caret-color: red;
 caret-color: #5729e9;
 caret-color: rgb(0, 200, 0);
-caret-color: hsla(228, 4%, 24%, 0.8);</pre>
+caret-color: hsla(228, 4%, 24%, 0.8);
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>L'agent utilisateur doit utiliser <code>currentcolor</code> mais peut ajuster la couleur du curseur afin d'améliorer la visibilité et le contraste avec le contenu environnant (l'arrière-plan, les ombres, etc.).
- <div class="note"><p><strong>Note :</strong> Bien que l'agent utilisateur puisse utiliser <code>currentcolor</code> pour la valeur <code>auto</code>, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur <code>currentcolor</code>).</p></div>
- </dd>
- <dt>&lt;color&gt;</dt>
- <dd>L'agent utilisateur utilise la couleur ({{cssxref("&lt;color&gt;")}}) indiquée comme couleur pour le curseur de saisie.</dd>
-</dl>
+- `auto`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : L'agent utilisateur doit utiliser `currentcolor` mais peut ajuster la couleur du curseur afin d'améliorer la visibilité et le contraste avec le contenu environnant (l'arrière-plan, les ombres, etc.).
+
+    > **Note :** Bien que l'agent utilisateur puisse utiliser `currentcolor` pour la valeur `auto`, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur `currentcolor`).
+
+- \<color>
+  - : L'agent utilisateur utilise la couleur ({{cssxref("&lt;color&gt;")}}) indiquée comme couleur pour le curseur de saisie.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#exemple {
+```css
+#exemple {
   caret-color: red;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input id="exemple" /&gt;</pre>
+```html
+<input id="exemple" />
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}</td>
-   <td>{{Spec2("CSS3 UI")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}} | {{Spec2("CSS3 UI")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.caret-color")}}</p>
+{{Compat("css.properties.caret-color")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("input")}}</li>
- <li>L'attribut HTML {{htmlattrxref("contenteditable")}} qui rend le texte d'un élément éditable</li>
- <li><a href="/fr/docs/Web/Guide/HTML/Editable_content">Rendre du contenu éditable</a></li>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
- <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
- <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
-</ul>
+- {{HTMLElement("input")}}
+- L'attribut HTML {{htmlattrxref("contenteditable")}} qui rend le texte d'un élément éditable
+- [Rendre du contenu éditable](/fr/docs/Web/Guide/HTML/Editable_content)
+- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
+- Le type de données {{cssxref("&lt;color&gt;")}}
+- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.
diff --git a/files/fr/web/css/child_combinator/index.md b/files/fr/web/css/child_combinator/index.md
index e0d64a3f3f..b53d3eda68 100644
--- a/files/fr/web/css/child_combinator/index.md
+++ b/files/fr/web/css/child_combinator/index.md
@@ -9,85 +9,65 @@ tags:
 translation_of: Web/CSS/Child_combinator
 original_slug: Web/CSS/Sélecteurs_enfant
 ---
-<div>{{CSSRef("Selectors")}}</div>
+{{CSSRef("Selectors")}}
 
-<p>Le combinateur <code>&gt;</code> sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants <strong>directs</strong> des éléments ciblés par le premier sélecteur.</p>
+Le combinateur `>` sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants **directs** des éléments ciblés par le premier sélecteur.
 
-<pre class="brush: css no-line-numbers">/* Les éléments &lt;li&gt; qui sont des enfant d'un */
-/* &lt;ul class="mon-truc"&gt; */
-ul.mon-truc&gt;li {
+```css
+/* Les éléments <li> qui sont des enfant d'un */
+/* <ul class="mon-truc"> */
+ul.mon-truc>li {
   margin: 2em;
-}</pre>
+}
+```
 
-<p>En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.</p>
+En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">selecteur1 &gt; selecteur2 { <em>déclarations CSS</em> }
-</pre>
+    selecteur1 > selecteur2 { déclarations CSS }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">span {
+```css
+span {
   background-color: white;
 }
 
-div &gt; span {
+div > span {
   background-color: blue;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;span&gt;Premier span du div.
-    &lt;span&gt;Deuxième span, dans un span dans un div.&lt;/span&gt;
-  &lt;/span&gt;
-&lt;/div&gt;
-&lt;span&gt;Troisième span, en dehors de tout div.&lt;/span&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%", 100)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.child")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Le combinateur de descendant</a></li>
-</ul>
+```
+
+### HTML
+
+```html
+<div>
+  <span>Premier span du div.
+    <span>Deuxième span, dans un span dans un div.</span>
+  </span>
+</div>
+<span>Troisième span, en dehors de tout div.</span>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%", 100)}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}     | {{Spec2('CSS4 Selectors')}} |                      |
+| {{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}     | {{Spec2('CSS3 Selectors')}} | Aucune modification. |
+| {{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}} | {{Spec2('CSS2.1')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.child")}}
+
+## Voir aussi
+
+- [Le combinateur de descendant](/fr/docs/Web/CSS/Sélecteurs_descendant)
diff --git a/files/fr/web/css/clamp()/index.md b/files/fr/web/css/clamp()/index.md
index 242f7aa3f6..bd68e18ed4 100644
--- a/files/fr/web/css/clamp()/index.md
+++ b/files/fr/web/css/clamp()/index.md
@@ -7,112 +7,97 @@ tags:
   - Reference
 translation_of: Web/CSS/clamp()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <code><strong>clamp</strong></code><strong><code>()</code></strong> permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction <code>clamp()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} peut être utilisée.</p>
+La fonction CSS **`clamp`\*\***`()`\*\* permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction `clamp()` peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} peut être utilisée.
 
-<div class="note">
-<p><strong>Note :</strong> l'expression  <code>clamp(MIN, VAL, MAX)</code> sera résolue comme <code>max(MIN, min(VAL, MAX)))</code>.</p>
-</div>
+> **Note :** l'expression  `clamp(MIN, VAL, MAX)` sera résolue comme `max(MIN, min(VAL, MAX)))`.
 
-<pre class="brush: css no-line-numbers">width: clamp(10px, 4em, 80px);
-</pre>
+```css
+width: clamp(10px, 4em, 80px);
+```
 
-<p>Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px.</p>
+Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px.
 
-<p>Prenons comme hypothèse qu'un em mesure 16px de large :</p>
+Prenons comme hypothèse qu'un em mesure 16px de large :
 
-<pre class="brush: css no-line-numbers">width: clamp(10px, 4em, 80px);
+```css
+width: clamp(10px, 4em, 80px);
 /* avec 1em = 16px, on a 4em = 16px * 4 = 64px */
 width: clamp(10px, 64px, 80px);
 /* clamp(MIN, VAL, MAX) est résolue comme max(MIN, min(VAL, MAX))) */
 width: max(10px, min(64px, 80px))
 width: max(10px, 64px);
 width: 64px;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La fonction <code>clamp()</code> utilise trois expressions séparées par des virgules comme paramètres. Ces paramètres sont, dans l'ordre, la valeur minimale, la valeur préférée et la valeur maximale.</p>
+La fonction `clamp()` utilise trois expressions séparées par des virgules comme paramètres. Ces paramètres sont, dans l'ordre, la valeur minimale, la valeur préférée et la valeur maximale.
 
-<p>La valeur minimale est la borne inférieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est inférieure.</p>
+La valeur minimale est la borne inférieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est inférieure.
 
-<p>La valeur préférée correspond à la valeur qui sera utilisée si elle est supérieure à la borne inférieure et inférieure à la borne supérieure.</p>
+La valeur préférée correspond à la valeur qui sera utilisée si elle est supérieure à la borne inférieure et inférieure à la borne supérieure.
 
-<p>La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure.</p>
+La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure.
 
-<p>Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir  {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans <code>calc()</code> et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées.</p>
+Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir  {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans `calc()` et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées.
 
-<p>Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions.</p>
+Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions.
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<ul>
- <li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
- <li>Il est possible d'imbriquer des fonctions <code>max()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
- <li>Attention à bien utiliser un espace de chaque côté des opérateurs + et -.</li>
-</ul>
+- Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme `auto` si le tableau suit une disposition automatique ou fixée.
+- Il est possible d'imbriquer des fonctions `max()` et `min()` dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à `calc()`.
+- Attention à bien utiliser un espace de chaque côté des opérateurs + et -.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Indiquer_une_taille_de_police_minimale_et_maximale">Indiquer une taille de police minimale et maximale</h3>
+### Indiquer une taille de police minimale et maximale
 
-<p>Un autre cas d'utilisation est de permettre à une taille de police de caractères de varier sans être minuscule et illisible et sans non plus être énorme.</p>
+Un autre cas d'utilisation est de permettre à une taille de police de caractères de varier sans être minuscule et illisible et sans non plus être énorme.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   font-size: 2rem;
 }
 h1.responsive {
   font-size: clamp(32px, 2em, 2rem);
 }
-</pre>
+```
 
-<p>Ici on utilise l'unité <code>rem</code> pour fixer un maximum correspondant à deux fois la taille <code>em</code> de la racine.</p>
+Ici on utilise l'unité `rem` pour fixer un maximum correspondant à deux fois la taille `em` de la racine.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h1&gt;Ce texte est toujours lisible mais sa taille ne change pas.&lt;/h1&gt;
-&lt;h1 class="responsive"&gt;Ce texte est toujours lisible et s'adapte dans une certaine mesure.&lt;/h1&gt;
-</pre>
+```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>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Indiquer_une_taille_de_police_minimale_et_maximale", '700', '300')}}</p>
+{{EmbedLiveSample("Indiquer_une_taille_de_police_minimale_et_maximale", '700', '300')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                             | Commentaires |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}} | {{Spec2('CSS4 Values')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.clamp")}}</p>
+{{Compat("css.types.clamp")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{CSSxRef("calc")}}</li>
- <li>{{CSSxRef("max")}}</li>
- <li>{{CSSxRef("min")}}</li>
- <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs CSS</a></li>
-</ul>
+- {{CSSxRef("calc")}}
+- {{CSSxRef("max")}}
+- {{CSSxRef("min")}}
+- [Valeurs CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units)
diff --git a/files/fr/web/css/class_selectors/index.md b/files/fr/web/css/class_selectors/index.md
index 1e65081811..1d44d777df 100644
--- a/files/fr/web/css/class_selectors/index.md
+++ b/files/fr/web/css/class_selectors/index.md
@@ -8,93 +8,72 @@ tags:
 translation_of: Web/CSS/Class_selectors
 original_slug: Web/CSS/Sélecteurs_de_classe
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les <strong>sélecteurs de classe</strong> CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut <code>class</code> de chaque élément.</p>
+Les **sélecteurs de classe** CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut `class` de chaque élément.
 
-<pre class="brush: css no-line-numbers">/* Cible tous les éléments ayant la classe "spacious" */
+```css
+/* Cible tous les éléments ayant la classe "spacious" */
 .spacious {
   margin: 2em;
 }
 
-/* Cible tous les éléments &lt;li&gt; ayant la classe "spacious" */
+/* Cible tous les éléments <li> ayant la classe "spacious" */
 li.spacious {
   margin: 2em;
 }
 
-/* Cible tous les éléments &lt;li&gt; ayant une classe qui */
+/* Cible tous les éléments <li> ayant une classe qui */
 /* contient à la fois "spacious" et "elegant"        */
 li.spacious.elegant {
   margin: 2em;
-}</pre>
+}
+```
 
-<p>L'attribut {{htmlattrxref("class")}} est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.</p>
+L'attribut {{htmlattrxref("class")}} est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">.nomdeclasse { <em>déclarations CSS</em> }</pre>
+    .nomdeclasse { déclarations CSS }
 
-<p>Cela est exactement équivalent à l'utilisation du <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> de la façon suivante :</p>
+Cela est exactement équivalent à l'utilisation du [sélecteur d'attribut](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut) de la façon suivante :
 
-<pre class="syntaxbox">[class~=nomdeclasse] { <em>déclarations CSS</em> }</pre>
+    [class~=nomdeclasse] { déclarations CSS }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.classy {
+```css
+.classy {
   background-color: skyblue;
 }
 .toto {
  font-weight: bold;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div class="classy"&gt;Voici un div avec du texte.&lt;/div&gt;
-&lt;div class="toto classy truc"&gt;Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !&lt;/div&gt;
-&lt;div&gt;En voilà un autre.&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.class")}}</p>
+```
+
+### HTML
+
+```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>En voilà un autre.</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}         | {{Spec2('CSS4 Selectors')}} | Aucune modification. |
+| {{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}         | {{Spec2('CSS3 Selectors')}} |                      |
+| {{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}} | {{Spec2('CSS2.1')}}             |                      |
+| {{SpecName('CSS1', '#class-as-selector', 'child selectors')}}             | {{Spec2('CSS1')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.class")}}
diff --git a/files/fr/web/css/clear/index.md b/files/fr/web/css/clear/index.md
index 541ff870fa..17dbd2c03d 100644
--- a/files/fr/web/css/clear/index.md
+++ b/files/fr/web/css/clear/index.md
@@ -7,32 +7,32 @@ tags:
   - Reference
 translation_of: Web/CSS/clear
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>clear</code></strong> indique si un élément peut être situé à côté d'éléments <a href="/fr/docs/Web/CSS/float">flottants</a> qui le précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété <code>clear</code> s'applique aux éléments flottants comme aux éléments non-flottants.</p>
+La propriété **`clear`** indique si un élément peut être situé à côté d'éléments [flottants](/fr/docs/Web/CSS/float) qui le précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété `clear` s'applique aux éléments flottants comme aux éléments non-flottants.
 
-<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
+{{EmbedInteractiveExample("pages/css/clear.html")}}
 
-<p>Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le bord de la bordure</a> de l'élément sous <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le bord de la marge</a> de tous les éléments flottants concernés. Il y aura<a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"> fusion des marges (<em>margin collapsing</em>)</a> verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.</p>
+Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace [le bord de la bordure](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) de l'élément sous [le bord de la marge](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) de tous les éléments flottants concernés. Il y aura[ fusion des marges (_margin collapsing_)](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.
 
-<p>Lorsqu'elle est appliquée aux éléments flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de tous les éléments flottants concernés. Cela impacte la position des éléments flottants suivants car ceux-ci ne peuvent pas être situés plus haut que les éléments flottants qui les précèdent.</p>
+Lorsqu'elle est appliquée aux éléments flottants, elle déplace [le bord de la marge](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) de l'élément sous [le bord de la marge](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) de tous les éléments flottants concernés. Cela impacte la position des éléments flottants suivants car ceux-ci ne peuvent pas être situés plus haut que les éléments flottants qui les précèdent.
 
-<p>Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">même contexte de formatage</a>.</p>
+Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du [même contexte de formatage](/fr/docs/Web/Guide/CSS/Block_formatting_context).
 
-<div class="note">
-<p><strong>Note :</strong> Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser <code>clear</code> sur un pseudo-élément remplacé {{cssxref("::after")}}.</p>
+> **Note :** Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser `clear` sur un pseudo-élément remplacé {{cssxref("::after")}}.
+>
+> ```css
+> #conteneur::after {
+>    content: "";
+>    display: block;
+>    clear: both;
+> }
+> ```
 
-<pre class="brush: css">#conteneur::after {
-   content: "";
-   display: block;
-   clear: both;
-}
-</pre>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec mot-clé */
+```css
+/* Valeurs avec mot-clé */
 clear: none;
 clear: left;
 clear: right;
@@ -44,45 +44,45 @@ clear: inline-end;
 clear: inherit;
 clear: initial;
 clear: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>Un mot-clé qui indique que l'élément n'est pas déplacé vers le bas pour dégager le flottement.</dd>
- <dt><code>left</code></dt>
- <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche.</dd>
- <dt><code>right</code></dt>
- <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à droite.</dd>
- <dt><code>both</code></dt>
- <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche et à droite.</dd>
- <dt><code>inline-start</code></dt>
- <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu vers le début du bloc englobant. Autrement dit, cela dégage à gauche pour les scripts de gauche à droite (<em>LTR</em> pour <em>left to right</em>) et dégage à droite pour les scripts de droite à gauche (<em>RTL</em> pour <em>droite à gauche</em>).</dd>
- <dt><code>inline-end</code></dt>
- <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu du côté de la fin du bloc englobant. Autrement dit, cela dégage à droite pour les scripts de gauche à droite (<em>LTR</em> pour <em>left to right</em>) et dégage à gauche pour les scripts de droite à gauche (<em>RTL</em> pour <em>droite à gauche</em>).</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `none`
+  - : Un mot-clé qui indique que l'élément n'est pas déplacé vers le bas pour dégager le flottement.
+- `left`
+  - : Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche.
+- `right`
+  - : Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à droite.
+- `both`
+  - : Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche et à droite.
+- `inline-start`
+  - : Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu vers le début du bloc englobant. Autrement dit, cela dégage à gauche pour les scripts de gauche à droite (_LTR_ pour _left to right_) et dégage à droite pour les scripts de droite à gauche (_RTL_ pour _droite à gauche_).
+- `inline-end`
+  - : Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu du côté de la fin du bloc englobant. Autrement dit, cela dégage à droite pour les scripts de gauche à droite (_LTR_ pour _left to right_) et dégage à gauche pour les scripts de droite à gauche (_RTL_ pour _droite à gauche_).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="clear_left"><code>clear: left</code></h3>
+### `clear: left`
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
-  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
-  &lt;p class="left"&gt;Ce paragraphe est dégagé à gauche.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```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="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">Ce paragraphe est dégagé à gauche.</p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.wrapper{
+```css
+.wrapper{
   border:1px solid black;
   padding:10px;
 }
@@ -106,24 +106,26 @@ clear: unset;
 p {
   width: 50%;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('clear_left','100%','250')}}</p>
+{{EmbedLiveSample('clear_left','100%','250')}}
 
-<h3 id="clear_right"><code>clear: right</code></h3>
+### `clear: right`
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
-  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
-  &lt;p class="right"&gt;Ce paragraphe est dégagé à droite.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```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="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">Ce paragraphe est dégagé à droite.</p>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.wrapper{
+```css
+.wrapper{
   border:1px solid black;
   padding:10px;
 }
@@ -146,24 +148,27 @@ p {
 }
 p {
   width: 50%;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample('clear_right','100%','250')}}</p>
+{{EmbedLiveSample('clear_right','100%','250')}}
 
-<h3 id="clear_both"><code>clear: both</code></h3>
+### `clear: both`
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
-  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
-  &lt;p class="both"&gt;Ce paragraphe est dégagé de chaque côté.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```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="both">Ce paragraphe est dégagé de chaque côté.</p>
+</div>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.wrapper{
+```css
+.wrapper{
   border:1px solid black;
   padding:10px;
 }
@@ -186,47 +191,25 @@ p {
 }
 p {
   width: 45%;
-}</pre>
-
-<p>{{EmbedLiveSample('clear_both','100%','300')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>Ajout des valeurs <code>inline-start</code> et <code>inline-end</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Pas de modification significative, clarification de certains détails.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.clear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîtes</a></li>
-</ul>
+}
+```
+
+{{EmbedLiveSample('clear_both','100%','300')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                             | Commentaires                                                          |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------------------ | --------------------------------------------------------------------- |
+| {{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}} | {{Spec2('CSS Logical Properties')}} | Ajout des valeurs `inline-start` et `inline-end`                      |
+| {{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}                 | {{Spec2('CSS2.1')}}                         | Pas de modification significative, clarification de certains détails. |
+| {{SpecName('CSS1', '#clear', 'clear')}}                                             | {{Spec2('CSS1')}}                         | Définition initiale.                                                  |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.clear")}}
+
+## Voir aussi
+
+- [Le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
diff --git a/files/fr/web/css/clip-path/index.md b/files/fr/web/css/clip-path/index.md
index 1888fb3c17..2ff8f69746 100644
--- a/files/fr/web/css/clip-path/index.md
+++ b/files/fr/web/css/clip-path/index.md
@@ -8,23 +8,22 @@ tags:
   - Reference
 translation_of: Web/CSS/clip-path
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>clip-path</strong></code> empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme <code><a href="/fr/docs/Web/SVG/Element/circle">circle()</a></code>.</p>
+La propriété **`clip-path`** empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme [`circle()`](/fr/docs/Web/SVG/Element/circle).
 
-<div>{{EmbedInteractiveExample("pages/css/clip-path.html")}}</div>
+{{EmbedInteractiveExample("pages/css/clip-path.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>clip-path</code> remplace la propriété {{cssxref("clip")}} désormais dépréciée.</p>
-</div>
+> **Note :** La propriété `clip-path` remplace la propriété {{cssxref("clip")}} désormais dépréciée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 clip-path: none;
 
 /* Valeurs pointant vers une image */
-/* Type &lt;clip-source&gt; */
+/* Type <clip-source> */
 clip-path: url(resources.svg#c1);
 
 /* Valeurs de boîte */
@@ -43,351 +42,350 @@ clip-path: circle(50px at 0 100px);
 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
 
-/* Combinaison boîte &amp; géométrie */
+/* Combinaison boîte & géométrie */
 clip-path: padding-box circle(50px at 0 100px);
 
 /* Valeurs globales */
 clip-path: inherit;
 clip-path: initial;
 clip-path: unset;
-</pre>
-
-<p>La propriété <code>clip-path</code> est définie avec une ou plusieurs des valeurs listées ci-après.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>url()</code></dt>
- <dd>Une URL qui fait référence à un élément contenant le chemin de rognage.</dd>
- <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt>
- <dd>Une fonction {{cssxref("&lt;basic-shape&gt;")}}. Une telle forme utilise la valeur <code>&lt;geometry-box&gt;</code> pour déterminer la taille et la position de la forme. Si aucune boîte de géométrie n'est indiquée, c'est la boîte de bordure (<code>border-box</code>) qui sera utilisée comme boîte de réference.</dd>
- <dt><code>&lt;geometry-box&gt;</code></dt>
- <dd>Si cette valeur est combinée avec une valeur <code>&lt;basic-shape&gt;</code>, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec {{cssxref("border-radius")}}) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivante :
- <dl>
-  <dt><code>fill-box</code></dt>
-  <dd>La boîte englobant (<em>bounding box</em>) est utilisée comme boîte de référence.</dd>
-  <dt><code>stroke-box</code></dt>
-  <dd>La boîte de contour de la boîte englobante est utilisée comme boîte de référence.</dd>
-  <dt><code>view-box</code></dt>
-  <dd>La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut {{SVGAttr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par <code>viewBox</code> et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut <code>viewBox</code>.</dd>
-  <dt><code>margin-box</code></dt>
-  <dd>La boîte de marge est utilisée comme boîte de référence</dd>
-  <dt><code>border-box</code></dt>
-  <dd>La boîte de bordure est utilisée comme boîte de référence</dd>
-  <dt><code>padding-box</code></dt>
-  <dd>La boîte de remplissage (<em>padding</em>) est utilisée comme boîte de référence</dd>
-  <dt><code>content-box</code></dt>
-  <dd>La boîte de contenu est utilisée comme boîte de référence.</dd>
- </dl>
- </dd>
- <dt><code>none</code></dt>
- <dd>Aucun chemin de rognage n'est créé.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Si <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> est différente de <code>none</code>, cela entraînera  la création d'un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> (de la même façon qu'{{cssxref("opacity")}} avec des valeurs différentes de 1).</p>
-</div>
+```
+
+La propriété `clip-path` est définie avec une ou plusieurs des valeurs listées ci-après.
+
+### Valeurs
+
+- `url()`
+  - : Une URL qui fait référence à un élément contenant le chemin de rognage.
+- `inset()`, `circle()`, `ellipse()`, `polygon()`
+  - : Une fonction {{cssxref("&lt;basic-shape&gt;")}}. Une telle forme utilise la valeur `<geometry-box>` pour déterminer la taille et la position de la forme. Si aucune boîte de géométrie n'est indiquée, c'est la boîte de bordure (`border-box`) qui sera utilisée comme boîte de réference.
+- `<geometry-box>`
+
+  - : Si cette valeur est combinée avec une valeur `<basic-shape>`, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec {{cssxref("border-radius")}}) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivante :
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    - `fill-box`
+      - : La boîte englobant (_bounding box_) est utilisée comme boîte de référence.
+    - `stroke-box`
+      - : La boîte de contour de la boîte englobante est utilisée comme boîte de référence.
+    - `view-box`
+      - : La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut {{SVGAttr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par `viewBox` et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut `viewBox`.
+    - `margin-box`
+      - : La boîte de marge est utilisée comme boîte de référence
+    - `border-box`
+      - : La boîte de bordure est utilisée comme boîte de référence
+    - `padding-box`
+      - : La boîte de remplissage (_padding_) est utilisée comme boîte de référence
+    - `content-box`
+      - : La boîte de contenu est utilisée comme boîte de référence.
+
+- `none`
+  - : Aucun chemin de rognage n'est créé.
+
+> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/Valeur_calcul%C3%A9e) est différente de `none`, cela entraînera  la création d'un nouveau [contexte d'empilement](/fr/docs/Glossaire/Contexte_d_empilement) (de la même façon qu'{{cssxref("opacity")}} avec des valeurs différentes de 1).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Comparaison_entre_HTML_et_SVG">Comparaison entre HTML et SVG</h3>
-
-<pre class="brush: html hidden">&lt;svg class="defs"&gt;
-  &lt;defs&gt;
-    &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
-      &lt;path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /&gt;
-    &lt;/clipPath&gt;
-  &lt;/defs&gt;
-&lt;/svg&gt;
-
-&lt;div class="grid"&gt;
-  &lt;div class="col"&gt;
-    &lt;div class="note"&gt;clip-path: none&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="none"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="none"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;clip-path: url(#myPath)&lt;br&gt;&lt;br&gt;
+## Exemples
+
+### Comparaison entre HTML et SVG
+
+```html hidden
+<svg class="defs">
+  <defs>
+    <clipPath id="myPath" clipPathUnits="objectBoundingBox">
+      <path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" />
+    </clipPath>
+  </defs>
+</svg>
+
+<div class="grid">
+  <div class="col">
+    <div class="note">clip-path: none</div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="none">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="none">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">clip-path: url(#myPath)<br><br>
       Assuming the following clipPath definition:
-      &lt;pre&gt;
-&amp;lt;svg&amp;gt;
-  &amp;lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&amp;gt;
-    &amp;lt;path d="M0.5,1
+      <pre>
+&lt;svg&gt;
+  &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
+    &lt;path d="M0.5,1
       C 0.5,1,0,0.7,0,0.3
       A 0.25,0.25,1,1,1,0.5,0.3
       A 0.25,0.25,1,1,1,1,0.3
-      C 1,0.7,0.5,1,0.5,1 Z" /&amp;gt;
-  &amp;lt;/clipPath&amp;gt;
-&amp;lt;/svg&amp;gt;&lt;/pre&gt;
-    &lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="svg"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="svg"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
-    &lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="svg2"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="svg2"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-
-
-    &lt;div class="note"&gt;clip-path: circle(25%)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="shape1"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="shape1"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;clip-path: circle(25% at 25% 25%)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="shape2"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="shape2"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;clip-path: fill-box circle(25% at 25% 25%)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="shape3"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="shape3"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;clip-path: stroke-box circle(25% at 25% 25%)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="shape4"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="shape4"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;clip-path: view-box circle(25% at 25% 25%)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="shape5"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="shape5"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;clip-path: margin-box circle(25% at 25% 25%)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="shape6"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="shape6"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;clip-path: border-box circle(25% at 25% 25%)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="shape7"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="shape7"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;clip-path: padding-box circle(25% at 25% 25%)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="shape8"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="shape8"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;clip-path: content-box circle(25% at 25% 25%)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
-        &lt;div class="container"&gt;
-          &lt;p class="shape9"&gt;
-            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
-          &lt;/p&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
-        &lt;div class="container viewbox"&gt;
-          &lt;svg viewBox="0 0 192 192"&gt;
-            &lt;g class="shape9"&gt;
-              &lt;rect x="24" y="24" width="144" height="144" /&gt;
-              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
-              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
-            &lt;/g&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css">html,body {
+      C 1,0.7,0.5,1,0.5,1 Z" /&gt;
+  &lt;/clipPath&gt;
+&lt;/svg&gt;</pre>
+    </div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="svg">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="svg">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
+    </div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="svg2">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="svg2">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+
+
+    <div class="note">clip-path: circle(25%)</div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="shape1">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="shape1">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">clip-path: circle(25% at 25% 25%)</div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="shape2">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="shape2">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="shape3">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="shape3">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="shape4">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="shape4">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="shape5">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="shape5">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="shape6">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="shape6">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="shape7">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="shape7">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="shape8">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="shape8">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
+    <div class="row">
+      <div class="cell"> <span>HTML</span>
+        <div class="container">
+          <p class="shape9">
+            I LOVE<br><em>clipping</em>
+          </p>
+        </div>
+      </div>
+      <div class="cell"> <span>SVG</span>
+        <div class="container viewbox">
+          <svg viewBox="0 0 192 192">
+            <g class="shape9">
+              <rect x="24" y="24" width="144" height="144" />
+              <text x="96" y="91">I LOVE</text>
+              <text x="96" y="109" class="em">clipping</text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```css
+html,body {
   height: 100%;
   box-sizing: border-box;
   background: #EEE;
@@ -514,91 +512,76 @@ svg text {
 
 svg text.em {
   font-style: italic;
-}</pre>
-
-<p>{{EmbedLiveSample("Comparaison_entre_HTML_et_SVG", "100%", 800, "", "", "example-outcome-frame")}}</p>
-
-<h3 id="Exemple_complet">Exemple complet</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
-    alt="MDN logo"&gt;
-&lt;svg height="0" width="0"&gt;
-  &lt;defs&gt;
-    &lt;clipPath id="cross"&gt;
-      &lt;rect y="110" x="137" width="90" height="90"/&gt;
-      &lt;rect x="0" y="110" width="90" height="90"/&gt;
-      &lt;rect x="137" y="0" width="90" height="90"/&gt;
-      &lt;rect x="0" y="0" width="90" height="90"/&gt;
-    &lt;/clipPath&gt;
-  &lt;/defs&gt;
-&lt;/svg&gt;
-
-&lt;select id="clipPath"&gt;
-  &lt;option value="none"&gt;none&lt;/option&gt;
-  &lt;option value="circle(100px at 110px 100px)"&gt;circle&lt;/option&gt;
-  &lt;option value="url(#cross)" selected&gt;cross&lt;/option&gt;
-  &lt;option value="inset(20px round 20px)"&gt;inset&lt;/option&gt;
-  &lt;option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')"&gt;path&lt;/option&gt;
-&lt;/select&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">#clipped {
+}
+```
+
+{{EmbedLiveSample("Comparaison_entre_HTML_et_SVG", "100%", 800, "", "", "example-outcome-frame")}}
+
+### Exemple complet
+
+#### HTML
+
+```html
+<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo">
+<svg height="0" width="0">
+  <defs>
+    <clipPath id="cross">
+      <rect y="110" x="137" width="90" height="90"/>
+      <rect x="0" y="110" width="90" height="90"/>
+      <rect x="137" y="0" width="90" height="90"/>
+      <rect x="0" y="0" width="90" height="90"/>
+    </clipPath>
+  </defs>
+</svg>
+
+<select id="clipPath">
+  <option value="none">none</option>
+  <option value="circle(100px at 110px 100px)">circle</option>
+  <option value="url(#cross)" selected>cross</option>
+  <option value="inset(20px round 20px)">inset</option>
+  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
+</select>
+```
+
+#### CSS
+
+```css
+#clipped {
   margin-bottom: 20px;
   clip-path: url(#cross);
 }
-</pre>
+```
 
-<pre class="brush: js hidden">var clipPathSelect = document.getElementById("clipPath");
+```js hidden
+var clipPathSelect = document.getElementById("clipPath");
 clipPathSelect.addEventListener("change", function (evt) {
   document.getElementById("clipped").style.clipPath = evt.target.value;
 });
-</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Exemple_complet", 230, 250)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
-   <td>{{Spec2('CSS Masks')}}</td>
-   <td>Extension aux élément HTML. <code>clip-path</code> remplace la propriété {{cssxref("clip")}} désormais dépréciée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td>Définition initiale (s'applique uniquement aux éléments SVG)</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.clip-path")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("mask")}}</li>
- <li>{{cssxref("filter")}}</li>
- <li><a href="/fr/docs/Applying_SVG_effects_to_HTML_content">Appliquer des effets SVG sur du contenu HTML</a></li>
- <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">Les formes CSS, le <em>clipping</em> et le <em>masking</em> : comment les utiliser (article en anglais)</a></li>
- <li>L'attribut SVG {{SVGAttr("clip-path")}}</li>
- <li>L'attribut SVG {{SVGAttr("clip-rule")}}</li>
-</ul>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Exemple_complet", 230, 250)}}
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires                                                                                                |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}                 | {{Spec2('CSS Masks')}} | Extension aux élément HTML. `clip-path` remplace la propriété {{cssxref("clip")}} désormais dépréciée. |
+| {{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}} | {{Spec2('SVG1.1')}}     | Définition initiale (s'applique uniquement aux éléments SVG)                                                |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.clip-path")}}
+
+## Voir aussi
+
+- {{cssxref("mask")}}
+- {{cssxref("filter")}}
+- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Applying_SVG_effects_to_HTML_content)
+- [Les formes CSS, le _clipping_ et le _masking_ : comment les utiliser (article en anglais)](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
+- L'attribut SVG {{SVGAttr("clip-path")}}
+- L'attribut SVG {{SVGAttr("clip-rule")}}
diff --git a/files/fr/web/css/clip/index.md b/files/fr/web/css/clip/index.md
index a7cf1ead61..4c83372b40 100644
--- a/files/fr/web/css/clip/index.md
+++ b/files/fr/web/css/clip/index.md
@@ -8,15 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/clip
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p>La propriété <strong><code>clip</code></strong> permet de définir la zone d'un élément qui est visible. La propriété <code>clip</code> s'applique uniquement aux éléments positionnés de façon absolue (autrement dit, ceux avec {{cssxref("position","position:absolute")}} ou {{cssxref("position","position:fixed")}}).</p>
+La propriété **`clip`** permet de définir la zone d'un élément qui est visible. La propriété `clip` s'applique uniquement aux éléments positionnés de façon absolue (autrement dit, ceux avec {{cssxref("position","position:absolute")}} ou {{cssxref("position","position:fixed")}}).
 
-<pre class="brush: css  no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 clip: auto;
 
 /* Valeurs de forme */
-/* Type &lt;shape&gt;     */
+/* Type <shape>     */
 clip: rect(1px 10em 3rem 2ch);
 clip: rect(1px, 10em, 3rem, 2ch);
 
@@ -24,34 +25,31 @@ clip: rect(1px, 10em, 3rem, 2ch);
 clip: inherit;
 clip: initial;
 clip: unset;
-</pre>
+```
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.</p>
-</div>
+> **Attention :** Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;shape&gt;</code></dt>
- <dd>Une forme rectangulaire indiquée avec <code>rect(&lt;haut&gt;, &lt;droite&gt;, &lt;bas&gt;, &lt;gauche&gt;)</code> ou avec <code>rect(&lt;haut&gt; &lt;droite&gt; &lt;bas&gt; &lt;gauche&gt;)</code>. <code>&lt;haut&gt;</code> et <code>&lt;bas&gt;</code> indiquent les décalages à partir du haut de la boîte de bordure, <code>&lt;gauche&gt;</code> et <code>&lt;droite&gt;</code> indiquent les décalages à partir du bord gauche de la boîte de bordure.<code>&lt;haut&gt;</code>, <code>&lt;droite&gt;</code>, <code>&lt;bas&gt;</code> et <code>&lt;gauche&gt;</code> peuvent avoir une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou<code> auto</code>. Si un des côtés vaut <code>auto</code>, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.</dd>
- <dt><code>auto</code></dt>
- <dd>L'élément n'est pas rogné (la valeur par défaut). Attention, l'effet obtenu n'est pas le même que <code>rect(auto, auto, auto, auto)</code>.</dd>
-</dl>
+- `<shape>`
+  - : Une forme rectangulaire indiquée avec `rect(<haut>, <droite>, <bas>, <gauche>)` ou avec `rect(<haut> <droite> <bas> <gauche>)`. `<haut>` et `<bas>` indiquent les décalages à partir du haut de la boîte de bordure, `<gauche>` et `<droite>` indiquent les décalages à partir du bord gauche de la boîte de bordure.`<haut>`, `<droite>`, `<bas>` et `<gauche>` peuvent avoir une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou` auto`. Si un des côtés vaut `auto`, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.
+- `auto`
+  - : L'élément n'est pas rogné (la valeur par défaut). Attention, l'effet obtenu n'est pas le même que `rect(auto, auto, auto, auto)`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.dotted-border {
+```css
+.dotted-border {
   border: dotted;
   position: relative;
   width: 536px;
@@ -79,63 +77,43 @@ clip: unset;
   left: 200px;
   clip: rect(235px 335px 345px 160px);
   /* non-standard syntax, but supported by all major browsers*/
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush:html">&lt;p class="dotted-border"&gt;
-  &lt;img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic"&gt;
-  &lt;img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"&gt;
-  &lt;img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"&gt;
-  &lt;img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"&gt;
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '689px', '410px')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td>
-   <td>{{Spec2('CSS Masks')}}</td>
-   <td>Dépréciation de la propriété <code>clip</code> et proposition de  {{cssxref("clip-path")}} comme remplacement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>clip</code> peut être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.clip")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété {{cssxref("clip-path")}} qui doit être utilisée à la place</li>
- <li>{{cssxref("text-overflow")}}</li>
- <li>{{cssxref("white-space")}}</li>
- <li>{{cssxref("overflow-x")}}</li>
- <li>{{cssxref("overflow-y")}}</li>
- <li>{{cssxref("overflow")}}</li>
- <li>{{cssxref("display")}}</li>
- <li>{{cssxref("position")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<p class="dotted-border">
+  <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
+  <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
+  <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
+  <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '689px', '410px')}}
+
+## Spécifications
+
+| Spécification                                                                    | État                                     | Commentaires                                                                                                |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS Masks', '#clip-property', 'clip')}}             | {{Spec2('CSS Masks')}}             | Dépréciation de la propriété `clip` et proposition de  {{cssxref("clip-path")}} comme remplacement. |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}} | {{Spec2('CSS3 Transitions')}} | `clip` peut être animée.                                                                                    |
+| {{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}         | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.clip")}}
+
+## Voir aussi
+
+- La propriété {{cssxref("clip-path")}} qui doit être utilisée à la place
+- {{cssxref("text-overflow")}}
+- {{cssxref("white-space")}}
+- {{cssxref("overflow-x")}}
+- {{cssxref("overflow-y")}}
+- {{cssxref("overflow")}}
+- {{cssxref("display")}}
+- {{cssxref("position")}}
diff --git a/files/fr/web/css/color-adjust/index.md b/files/fr/web/css/color-adjust/index.md
index 53e02b582a..919a592fad 100644
--- a/files/fr/web/css/color-adjust/index.md
+++ b/files/fr/web/css/color-adjust/index.md
@@ -9,53 +9,50 @@ tags:
   - color-adjust
 translation_of: Web/CSS/color-adjust
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>color-adjust</code></strong> contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé.</p>
+La propriété CSS **`color-adjust`** contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé.
 
-<div>{{EmbedInteractiveExample("pages/css/color-adjust.html")}}</div>
+{{EmbedInteractiveExample("pages/css/color-adjust.html")}}
 
-<p>Dans l'exemple précédent, le texte utilise la couleur ({{cssxref("color")}}), <code>#411</code> qui est très sombre et qui peut donc être difficile à lire avec l'arrière-plan noir (<code>black</code> pour la propriété {{cssxref("background-color")}}). Selon le navigateur, sa configuration et l'appareil utilisé, le navigateur peut choisir de retirer l'arrière-plan noir ou de modifier la couleur du texte afin d'améliorer le contraste et la lisibilité.</p>
+Dans l'exemple précédent, le texte utilise la couleur ({{cssxref("color")}}), `#411` qui est très sombre et qui peut donc être difficile à lire avec l'arrière-plan noir (`black` pour la propriété {{cssxref("background-color")}}). Selon le navigateur, sa configuration et l'appareil utilisé, le navigateur peut choisir de retirer l'arrière-plan noir ou de modifier la couleur du texte afin d'améliorer le contraste et la lisibilité.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">color-adjust: economy;
-color-adjust: exact;</pre>
+    color-adjust: economy;
+    color-adjust: exact;
 
-<p>La valeur de la propriété <code>color-adjust</code> peut être un de ces deux mots-clés.</p>
+La valeur de la propriété `color-adjust` peut être un de ces deux mots-clés.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>economy</code></dt>
- <dd>L'agent utilisateur est autorisé à appliquer les ajustements estimés nécessaires afin d'optimiser l'affichage du document sur l'appareil. Par exemple, un navigateur pourra, lors d'une impression, supprimer les images d'arrière-plan et ajuster les couleurs du texte afin de s'assurer que le contraste obtenu sur le papier sera suffisant. Cette valeur est la valeur par défaut.</dd>
- <dt><code><strong>exact</strong></code></dt>
- <dd>Le contenu de l'élément a spécifiquement été conçu afin d'utiliser des couleurs, des images et des styles de façon importante et toute modification opérée par le navigateur détériorerait le document. L'apparence du contenu ne devrait pas être modifiée sauf si l'utilisateur le demande. Ainsi, si une page contient un tableau dont les lignes sont alternées en gris et blanc, il ne faudrait pas retirer cette alternance au risque de perdre en lisibilité.</dd>
-</dl>
+- `economy`
+  - : L'agent utilisateur est autorisé à appliquer les ajustements estimés nécessaires afin d'optimiser l'affichage du document sur l'appareil. Par exemple, un navigateur pourra, lors d'une impression, supprimer les images d'arrière-plan et ajuster les couleurs du texte afin de s'assurer que le contraste obtenu sur le papier sera suffisant. Cette valeur est la valeur par défaut.
+- **`exact`**
+  - : Le contenu de l'élément a spécifiquement été conçu afin d'utiliser des couleurs, des images et des styles de façon importante et toute modification opérée par le navigateur détériorerait le document. L'apparence du contenu ne devrait pas être modifiée sauf si l'utilisateur le demande. Ainsi, si une page contient un tableau dont les lignes sont alternées en gris et blanc, il ne faudrait pas retirer cette alternance au risque de perdre en lisibilité.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Plusieurs raisons peuvent entraîner un agent utilisateur à modifier l'apparence finale par rapport à l'apparence indiquée via CSS :</p>
+Plusieurs raisons peuvent entraîner un agent utilisateur à modifier l'apparence finale par rapport à l'apparence indiquée via CSS :
 
-<ul>
- <li>Le contenu utilise des couleurs trop proches pour le texte et l'arrière-plan pour que le résultat soit lisible sur l'appareil ciblé (écran ou papier par exemple)..</li>
- <li>Si l'appareil d'affichage est une imprimante, afin d'économiser de l'encre, le navigateur peut choisir de retirer les images d'arrière-plan sombres ou trop denses.</li>
- <li>Lors de l'impression, l'agent utilisateur peut choisir de remplacer du texte clair sur un fond sombre par du texte sombre sur un fond blanc.</li>
-</ul>
+- Le contenu utilise des couleurs trop proches pour le texte et l'arrière-plan pour que le résultat soit lisible sur l'appareil ciblé (écran ou papier par exemple)..
+- Si l'appareil d'affichage est une imprimante, afin d'économiser de l'encre, le navigateur peut choisir de retirer les images d'arrière-plan sombres ou trop denses.
+- Lors de l'impression, l'agent utilisateur peut choisir de remplacer du texte clair sur un fond sombre par du texte sombre sur un fond blanc.
 
-<p>Si l'agent utilisateur propose des options à l'utilisateur quant à l'affichage des couleurs et des images, celles-ci seront prioritaires sur <code>color-adjust</code>. Autrement dit, il n'est pas absolument certain que <code>color-adjust</code> ait un quelconque effet. Tout d'abord parce que l'utilisateur peut choisir d'outrepasser ces règles mais aussi parce qu'il revient à l'agent utilisateur de choisir comment gérer <code>color-adjust</code> dans chaque situation.</p>
+Si l'agent utilisateur propose des options à l'utilisateur quant à l'affichage des couleurs et des images, celles-ci seront prioritaires sur `color-adjust`. Autrement dit, il n'est pas absolument certain que `color-adjust` ait un quelconque effet. Tout d'abord parce que l'utilisateur peut choisir d'outrepasser ces règles mais aussi parce qu'il revient à l'agent utilisateur de choisir comment gérer `color-adjust` dans chaque situation.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, une boîte utilise une image d'arrière-plan ({{cssxref("background-image")}}) ainsi qu'un dégradé linéaire ({{cssxref("linear-gradient()")}}) sur un arrière-plan noir afin d'avoir un dégradé bleu foncé derrière un texte rouge. Pour une raison quelconque, c'est l'apparence souhaitée quel que soit l'environnement (y compris du papier) et c'est donc <code>color-adjust: exact</code> qui est utilisé afin d'interdire au navigateur d'ajuster quoi que ce soit.</p>
+Dans cet exemple, une boîte utilise une image d'arrière-plan ({{cssxref("background-image")}}) ainsi qu'un dégradé linéaire ({{cssxref("linear-gradient()")}}) sur un arrière-plan noir afin d'avoir un dégradé bleu foncé derrière un texte rouge. Pour une raison quelconque, c'est l'apparence souhaitée quel que soit l'environnement (y compris du papier) et c'est donc `color-adjust: exact` qui est utilisé afin d'interdire au navigateur d'ajuster quoi que ce soit.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.ma-boite {
+```css
+.ma-boite {
   background-color: black;
   background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
   color: #900;
@@ -68,47 +65,34 @@ color-adjust: exact;</pre>
   justify-content: center;
   color-adjust: exact;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="ma-boite"&gt;
-  &lt;p&gt;Il nous faut plus de contraste !&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="ma-boite">
+  <p>Il nous faut plus de contraste !</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 640, 120)}}</p>
+{{EmbedLiveSample("Exemples", 640, 120)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}</td>
-   <td>{{Spec2('CSS Color Adjust')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}} | {{Spec2('CSS Color Adjust')}} | Définition initiale. |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.color-adjust")}}</p>
+{{Compat("css.properties.color-adjust")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
- <li>Les autres propriétés CSS relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
- <li>{{cssxref("background-image")}}</li>
-</ul>
+- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Appliquer_des_couleurs)
+- Les autres propriétés CSS relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}
+- {{cssxref("background-image")}}
diff --git a/files/fr/web/css/color-scheme/index.md b/files/fr/web/css/color-scheme/index.md
index f46bc5b275..0f4b726826 100644
--- a/files/fr/web/css/color-scheme/index.md
+++ b/files/fr/web/css/color-scheme/index.md
@@ -1,17 +1,19 @@
 ---
 title: color-scheme
 slug: Web/CSS/color-scheme
-browser-compat: css.properties.color-scheme
 translation_of: Web/CSS/color-scheme
+browser-compat: css.properties.color-scheme
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
+
+La propriété CSS **`color-scheme`** permet d'indiquer les jeux de couleurs dans lesquels un élément peut être rendu sans risque.
 
-<p>La propriété CSS <strong><code>color-scheme</code></strong> permet d'indiquer les jeux de couleurs dans lesquels un élément peut être rendu sans risque.</p>
-<p>Les jeux de couleurs communément utilisés par les systèmes d'exploitation sont <i>light</i> (clair) et <i>dark</i> (sombre), ou <i>day mode</i> (mode jour) et <i>night mode</i> (mode nuit). Lorsqu'un utilisateur sélectionne un de ces jeux de couleurs, le système d'exploitation fait des ajustements à l'interface utilisateur. Cela comprend les contrôles de formulaires, les barres de défilement et les valeurs utilisées par le système de couleurs CSS.</p>
+Les jeux de couleurs communément utilisés par les systèmes d'exploitation sont _light_ (clair) et _dark_ (sombre), ou _day mode_ (mode jour) et _night mode_ (mode nuit). Lorsqu'un utilisateur sélectionne un de ces jeux de couleurs, le système d'exploitation fait des ajustements à l'interface utilisateur. Cela comprend les contrôles de formulaires, les barres de défilement et les valeurs utilisées par le système de couleurs CSS.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">color-scheme: normal;
+```css
+color-scheme: normal;
 color-scheme: light;
 color-scheme: dark;
 color-scheme: light dark;
@@ -20,53 +22,51 @@ color-scheme: light dark;
 color-scheme: inherit;
 color-scheme: initial;
 color-scheme: revert;
-color-scheme: unset;</pre>
+color-scheme: unset;
+```
 
-<p>La valeur de la propriété <code>color-scheme</code> doit être un des mots-clés suivants.</p>
+La valeur de la propriété `color-scheme` doit être un des mots-clés suivants.
 
-<h3 id="Values">Valeurs</h3>
+### Valeurs
 
-<dl>
-  <dt><code>normal</code></dt>
-  <dd>Indique que l'élément ne tient pas compte d'un éventuel jeu de couleurs et qu'il devrait être rendu à l'aide du jeu de couleurs par défaut du navigateur.</dd>
-  <dt><code>light</code></dt>
-  <dd>Indique que l'élément peut être rendu en utilisant le jeu de couleurs claires du système d'exploitation.</dd>
-  <dt><code>dark</code></dt>
-  <dd>Indique que l'élément peut être rendu en utilisant le jeu de couleurs sombres du système d'exploitation.</dd>
-</dl>
+- `normal`
+  - : Indique que l'élément ne tient pas compte d'un éventuel jeu de couleurs et qu'il devrait être rendu à l'aide du jeu de couleurs par défaut du navigateur.
+- `light`
+  - : Indique que l'élément peut être rendu en utilisant le jeu de couleurs claires du système d'exploitation.
+- `dark`
+  - : Indique que l'élément peut être rendu en utilisant le jeu de couleurs sombres du système d'exploitation.
 
-<h2 id="Formal_definition">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax">Syntaxe formelle</h2>
+## Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<h3 id="Adapting_to_color_schemes">Adaptation aux jeux de couleurs</h3>
+### Adaptation aux jeux de couleurs
 
-<p>Pour activer la préférence de jeu de couleurs de l'utilisateur sur l'ensemble de la page, <code>color-scheme</code> peut être déclaré sur l'élément {{cssxref(":root")}}.</p>
+Pour activer la préférence de jeu de couleurs de l'utilisateur sur l'ensemble de la page, `color-scheme` peut être déclaré sur l'élément {{cssxref(":root")}}.
 
-<pre class="brush: css">:root {
+```css
+:root {
   color-scheme: light dark;
 }
-</pre>
+```
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML grâce à CSS</a></li>
-  <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
-  <li>{{cssxref("background-image")}}</li>
-  <li>{{cssxref("-webkit-print-color-adjust")}}</li>
-</ul>
+- [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
+- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}
+- {{cssxref("background-image")}}
+- {{cssxref("-webkit-print-color-adjust")}}
diff --git a/files/fr/web/css/color/index.md b/files/fr/web/css/color/index.md
index 2b31fd1dae..79b08cb308 100644
--- a/files/fr/web/css/color/index.md
+++ b/files/fr/web/css/color/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>color</code></strong> définit la couleur de premier plan d'un élément texte et de ses éventuelles <a href="/fr/docs/Web/CSS/text-decoration">décorations</a>. Elle définit également la valeur de {{cssxref("currentColor")}} qui peut être utilisée pour d'autres propriétés (par exemple comme valeur par défaut pour {{cssxref("border-color")}}).</p>
+La propriété **`color`** définit la couleur de premier plan d'un élément texte et de ses éventuelles [décorations](/fr/docs/Web/CSS/text-decoration). Elle définit également la valeur de {{cssxref("currentColor")}} qui peut être utilisée pour d'autres propriétés (par exemple comme valeur par défaut pour {{cssxref("border-color")}}).
 
-<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/color.html")}}
 
-<p>La valeur de cette propriété doit être une couleur uniforme. Celle-ci peut contenir des informations de transparences à partir de CSS3 mais ce ne doit pas être un dégradé ({{cssxref("&lt;gradient&gt;")}}) car en CSS un dégradé est considéré comme une image (type {{cssxref("&lt;image&gt;")}}) et pas comme une couleur.</p>
+La valeur de cette propriété doit être une couleur uniforme. Celle-ci peut contenir des informations de transparences à partir de CSS3 mais ce ne doit pas être un dégradé ({{cssxref("&lt;gradient&gt;")}}) car en CSS un dégradé est considéré comme une image (type {{cssxref("&lt;image&gt;")}}) et pas comme une couleur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 color: currentcolor;
 
 /* Valeurs avec un mot-clé pour une couleur nommée */
@@ -26,13 +27,13 @@ color: orange;
 color: tan;
 color: rebeccapurple;
 
-/* Valeurs hexadécimales &lt;hex-color&gt; */
+/* Valeurs hexadécimales <hex-color> */
 color: #090;
 color: #009900;
 color: #090a;
 color: #009900aa;
 
-/* Valeurs utilisant la fonction &lt;rgb()&gt; */
+/* Valeurs utilisant la fonction <rgb()> */
 color: rgb(34, 12, 64, 0.6);
 color: rgba(34, 12, 64, 0.6);
 color: rgb(34 12 64 / 0.6);
@@ -40,7 +41,7 @@ color: rgba(34 12 64 / 0.3);
 color: rgb(34.0 12 64 / 60%);
 color: rgba(34.6 12 64 / 30%);
 
-/* Valeurs &lt;hsl()&gt; */
+/* Valeurs <hsl()> */
 color: hsl(30, 100%, 50%, 0.6);
 color: hsla(30, 100%, 50%, 0.6);
 color: hsl(30 100% 50% / 0.6);
@@ -53,26 +54,25 @@ color: hsla(30.2 100% 50% / 60%);
 color: inherit;
 color: initial;
 color: unset;
-</pre>
+```
 
-<p>La propriété <code>color</code> est définie grâce à une valeur de type {{cssxref("&lt;color&gt;")}}.</p>
+La propriété `color` est définie grâce à une valeur de type {{cssxref("&lt;color&gt;")}}.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;color&gt;")}} qui fournit la couleur pour les éléments textuels de l'élément.</dd>
-</dl>
+- `<color>`
+  - : Une valeur de type {{cssxref("&lt;color&gt;")}} qui fournit la couleur pour les éléments textuels de l'élément.
 
-<h3 id="Formal_syntax">Formal syntax</h3>
+### Formal syntax
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   color: rgb(0, 0, 255);
   /* équivalent à
   color: blue;
@@ -86,90 +86,57 @@ color: unset;
   /* on pourrait aussi utiliser
   color: rgb(255, 128, 0); */
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   En passant elle prit sur un rayon un pot de
   confiture portant cette étiquette,
-  &lt;span class="confiture"&gt;
+  <span class="confiture">
     « MARMELADE D’ORANGES. »
-  &lt;/span&gt;
+  </span>
   Mais, à son grand regret, le pot était vide :
   elle n’osait le laisser tomber dans la crainte
   de tuer quelqu’un ; aussi s’arrangea-t-elle de
   manière à le déposer en passant dans une
   des armoires.
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Il est important de vérifier le contraste entre la couleur utilisée pour le texte et celle utilisée pour l'arrière-plan afin que les personnes ayant une vision faible ou lisant le document dans de mauvaises conditions puissent correctement lire le document.</p>
-
-<p>Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Afin de respecter <a href="https://www.w3.org/WAI/intro/wcag">les règles d'accessibilité (WCAG)</a>, on doit avoir un ratio de 4.5:1 pour les textes « normaux » et un ratio de 3:1 pour les textes plus grands comme les titres (un texte est considéré comme « grand » s'il est en gras et qu'une lettre mesure plus de 18.66 px ou bien si une lettre mesure plus de 24 pixels).</p>
-
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/">Contrôleur de contraste WebAIM</a></li>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0 </a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">(en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}</td>
-   <td>{{Spec2('CSS4 Colors')}}</td>
-   <td>Ajout de la syntaxe sans virgule pour les fonctions <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code> Une valeur alpha peut être utilisée dans <code>rgb()</code> et <code>hsl()</code>, <code>rgba()</code> et <code>hsla()</code> sont donc des synonymes (dépréciés) de ces fonctions. Ajout de la couleur <code>rebeccapurple</code>.<br>
-    Ajout des valeurs hexadécimales sur 4 et 8 chiffres où le dernier chiffre indique la composante alpha.<br>
-    Ajout des fonctions <code>hwb()</code>, <code>device-cmyk()</code> et <code>color()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>color</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
-   <td>{{Spec2('CSS3 Colors')}}</td>
-   <td>Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Ajout de la couleur <code>orange</code> et des couleurs système.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Le type de donnée {{cssxref("&lt;color&gt;")}}</li>
- <li>Les autres propriétés relatives aux couleurs : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} et {{cssxref("color-adjust")}}</li>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML grâce à CSS</a></li>
-</ul>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Accessibilité
+
+Il est important de vérifier le contraste entre la couleur utilisée pour le texte et celle utilisée pour l'arrière-plan afin que les personnes ayant une vision faible ou lisant le document dans de mauvaises conditions puissent correctement lire le document.
+
+Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Afin de respecter [les règles d'accessibilité (WCAG)](https://www.w3.org/WAI/intro/wcag), on doit avoir un ratio de 4.5:1 pour les textes « normaux » et un ratio de 3:1 pour les textes plus grands comme les titres (un texte est considéré comme « grand » s'il est en gras et qu'une lettre mesure plus de 18.66 px ou bien si une lettre mesure plus de 24 pixels).
+
+- [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 ](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)_[(en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+
+## Spécifications
+
+| Spécification                                                                    | État                                     | Commentaires                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Colors', '#the-color-property', 'color')}} | {{Spec2('CSS4 Colors')}}         | Ajout de la syntaxe sans virgule pour les fonctions `rgb()`, `rgba()`, `hsl()` et `hsla()` Une valeur alpha peut être utilisée dans `rgb()` et `hsl()`, `rgba()` et `hsla()` sont donc des synonymes (dépréciés) de ces fonctions. Ajout de la couleur `rebeccapurple`. Ajout des valeurs hexadécimales sur 4 et 8 chiffres où le dernier chiffre indique la composante alpha. Ajout des fonctions `hwb()`, `device-cmyk()` et `color()`. |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'color')}} | {{Spec2('CSS3 Transitions')}} | `color` peut désormais être animée.                                                                                                                                                                                                                                                                                                                                                                                                       |
+| {{SpecName('CSS3 Colors', '#color', 'color')}}                     | {{Spec2('CSS3 Colors')}}         | Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions `rgba()`, `hsl()` et `hsla()`.                                                                                                                                                                                                                                                                                                                             |
+| {{SpecName('CSS2.1', 'colors.html#colors', 'color')}}         | {{Spec2('CSS2.1')}}                 | Ajout de la couleur `orange` et des couleurs système.                                                                                                                                                                                                                                                                                                                                                                                     |
+| {{SpecName('CSS1', '#color', 'color')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.color")}}
+
+## Voir aussi
+
+- Le type de donnée {{cssxref("&lt;color&gt;")}}
+- Les autres propriétés relatives aux couleurs : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} et {{cssxref("color-adjust")}}
+- [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
diff --git a/files/fr/web/css/color_value/index.md b/files/fr/web/css/color_value/index.md
index e35eb28083..d658dfd023 100644
--- a/files/fr/web/css/color_value/index.md
+++ b/files/fr/web/css/color_value/index.md
@@ -8,1045 +8,1033 @@ tags:
 translation_of: Web/CSS/color_value
 original_slug: Web/CSS/Type_color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de données CSS <strong><code>&lt;color&gt;</code></strong> permet de représenter des couleurs dans <a href="https://fr.wikipedia.org/wiki/SRGB">l'espace de couleurs sRGB</a>. Une couleur pourra être décrite de trois façons :</p>
+Le type de données CSS **`<color>`** permet de représenter des couleurs dans [l'espace de couleurs sRGB](https://fr.wikipedia.org/wiki/SRGB). Une couleur pourra être décrite de trois façons :
 
-<ul>
- <li>grâce à un mot-clé (comme <code>blue</code> ou  <code>transparent</code> par exemple)</li>
- <li>en utilisant <a href="https://fr.wikipedia.org/wiki/Couleur_du_Web#Triplet_hexad.C3.A9cimal">le système de coordonnées cubiques RGB</a> (grâce à la notation #-hexadecimal ou aux notations fonctionnelles <code>rgb()</code> et <code>rgba()</code>)</li>
- <li>en utilisant <a href="https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re">le système de coordonnées cylindriques HSL</a> (grâce aux notations fonctionnelles <code>hsl()</code> et <code>hsla()</code>)</li>
-</ul>
+- grâce à un mot-clé (comme `blue` ou  `transparent` par exemple)
+- en utilisant [le système de coordonnées cubiques RGB](https://fr.wikipedia.org/wiki/Couleur_du_Web#Triplet_hexad.C3.A9cimal) (grâce à la notation #-hexadecimal ou aux notations fonctionnelles `rgb()` et `rgba()`)
+- en utilisant [le système de coordonnées cylindriques HSL](https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re) (grâce aux notations fonctionnelles `hsl()` et `hsla()`)
 
-<p>En plus de la couleur exprimée dans l'espace RGB, une valeur <code>&lt;color&gt;</code> contient également un <a href="https://fr.wikipedia.org/wiki/Alpha_blending">canal alpha</a> qui décrit la transparence de l'image et donc la façon dont cette image se <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">compose</a> avec son arrière-plan.</p>
+En plus de la couleur exprimée dans l'espace RGB, une valeur `<color>` contient également un [canal alpha](https://fr.wikipedia.org/wiki/Alpha_blending) qui décrit la transparence de l'image et donc la façon dont cette image se [compose](https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending) avec son arrière-plan.
 
-<div class="note">
-<p><strong>Note :</strong> Cet article décrit le type de donnée CSS <code>&lt;color&gt;</code> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire <a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs à des éléments HTML grâce à CSS</a>.</p>
-</div>
+> **Note :** Cet article décrit le type de donnée CSS `<color>` en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire [Appliquer des couleurs à des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<div class="note">
-<p><strong>Note :</strong> Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge <a href="https://fr.wikipedia.org/wiki/Profil_ICC">le profil de couleurs</a> de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.</p>
-</div>
+> **Note :** Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge [le profil de couleurs](https://fr.wikipedia.org/wiki/Profil_ICC) de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.
+
+Il existe plusieurs méthodes pour décrire une valeur `<color>`.
+
+### Les mots-clés
+
+Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, `blue` le bleu, `brown` le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :
+
+- La spécification CSS de niveau 1 n'acceptait que 16 couleurs basiques, construites à partir des couleurs [VGA](https://fr.wikipedia.org/wiki/Video_Graphics_Array) disponibles sur les cartes graphiques.
+- La spécification CSS de niveau 2 a ajouté le mot-clé `orange`.
+- Depuis le début des couleurs CSS, les navigateurs ont pris en charge d'autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (_extended colors_), couleurs X11 ou couleurs SVG.
+- La spécification CSS de niveau a ajouté la couleur `rebeccapurple` [en l'honneur d'Eric Meyer](https://codepen.io/trezy/post/honoring-a-great-man).
+
+Voici quelques inconvénients liés aux mots-clés :
+
+- En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d'autres couleurs à l'arrivée. Ces mots-clés ne doivent être utilisés qu'avec SVG ou CSS.
+- Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).
+- Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.
+- Certains mots-clés désignent la même couleur :
+
+  - `aqua` / `cyan`
+  - `fuchsia` / `magenta`
+  - `darkgray` / `darkgrey`
+  - `darkslategray` / `darkslategrey`
+  - `dimgray` / `dimgrey`
+  - `lightgray` / `lightgrey`
+  - `lightslategray` / `lightslategrey`
+  - `gray` / `grey`
+  - `slategray` / `slategrey`
 
-<p>Il existe plusieurs méthodes pour décrire une valeur <code>&lt;color&gt;</code>.</p>
-
-<h3 id="Les_mots-clés">Les mots-clés</h3>
-
-<p>Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, <code>blue</code> le bleu, <code>brown</code> le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :</p>
-
-<ul>
- <li>La spécification CSS de niveau 1 n'acceptait que 16 couleurs basiques, construites à partir des couleurs <a href="https://fr.wikipedia.org/wiki/Video_Graphics_Array">VGA</a> disponibles sur les cartes graphiques.</li>
- <li>La spécification CSS de niveau 2 a ajouté le mot-clé <code>orange</code>.</li>
- <li>Depuis le début des couleurs CSS, les navigateurs ont pris en charge d'autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (<em>extended colors</em>), couleurs X11 ou couleurs SVG.</li>
- <li>La spécification CSS de niveau a ajouté la couleur <code>rebeccapurple</code> <a href="https://codepen.io/trezy/post/honoring-a-great-man">en l'honneur d'Eric Meyer</a>.</li>
-</ul>
-
-<p>Voici quelques inconvénients liés aux mots-clés :</p>
-
-<ul>
- <li>En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d'autres couleurs à l'arrivée. Ces mots-clés ne doivent être utilisés qu'avec SVG ou CSS.</li>
- <li>Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).</li>
- <li>Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.</li>
- <li>Certains mots-clés désignent la même couleur :
-  <ul>
-   <li><code>aqua</code> / <code>cyan</code></li>
-   <li><code>fuchsia</code> / <code>magenta</code></li>
-   <li><code>darkgray</code> / <code>darkgrey</code></li>
-   <li><code>darkslategray</code> / <code>darkslategrey</code></li>
-   <li><code>dimgray</code> / <code>dimgrey</code></li>
-   <li><code>lightgray</code> / <code>lightgrey</code></li>
-   <li><code>lightslategray</code> / <code>lightslategrey</code></li>
-   <li><code>gray</code> / <code>grey</code></li>
-   <li><code>slategray</code> / <code>slategrey</code></li>
-  </ul>
- </li>
- <li>Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.</li>
-</ul>
+- Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.
 
 <table>
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Couleur</th>
-   <th scope="col">Mot-clé</th>
-   <th scope="col">Valeurs exprimées en hexadécimal RGB</th>
-   <th scope="col">Exemple «<em> live</em> » dans le navigateur</th>
-  </tr>
- </thead>
- <tbody>
-  <tr style="position: relative;">
-   <td rowspan="16">{{SpecName("CSS1")}}</td>
-   <td style="background: #000;"></td>
-   <td style="text-align: center;"><code>black</code></td>
-   <td><code>#000000</code></td>
-   <td style="background: black;"></td>
-  </tr>
-  <tr>
-   <td style="background: #C0C0C0;"></td>
-   <td style="text-align: center;"><code>silver</code></td>
-   <td><code>#c0c0c0</code></td>
-   <td style="background: silver;"></td>
-  </tr>
-  <tr>
-   <td style="background: #808080;"></td>
-   <td style="text-align: center;"><code>gray</code></td>
-   <td><code>#808080</code></td>
-   <td style="background: gray;"></td>
-  </tr>
-  <tr>
-   <td style="background: #FFF;"></td>
-   <td style="text-align: center;"><code>white</code></td>
-   <td><code>#ffffff</code></td>
-   <td style="background: white;"></td>
-  </tr>
-  <tr>
-   <td style="background: #800000;"></td>
-   <td style="text-align: center;"><code>maroon</code></td>
-   <td><code>#800000</code></td>
-   <td style="background: maroon;"></td>
-  </tr>
-  <tr>
-   <td style="background: #F00;"></td>
-   <td style="text-align: center;"><code>red</code></td>
-   <td><code>#ff0000</code></td>
-   <td style="background: red;"></td>
-  </tr>
-  <tr>
-   <td style="background: #800080;"></td>
-   <td style="text-align: center;"><code>purple</code></td>
-   <td><code>#800080</code></td>
-   <td style="background: purple;"></td>
-  </tr>
-  <tr>
-   <td style="background: #F0F;"></td>
-   <td style="text-align: center;"><code>fuchsia</code></td>
-   <td><code>#ff00ff</code></td>
-   <td style="background: fuchsia;"></td>
-  </tr>
-  <tr>
-   <td style="background: #008000;"></td>
-   <td style="text-align: center;"><code>green</code></td>
-   <td><code>#008000</code></td>
-   <td style="background: green;"></td>
-  </tr>
-  <tr>
-   <td style="background: #0F0;"></td>
-   <td style="text-align: center;"><code>lime</code></td>
-   <td><code>#00ff00</code></td>
-   <td style="background: lime;"></td>
-  </tr>
-  <tr>
-   <td style="background: #808000;"></td>
-   <td style="text-align: center;"><code>olive</code></td>
-   <td><code>#808000</code></td>
-   <td style="background: olive;"></td>
-  </tr>
-  <tr>
-   <td style="background: #FF0;"></td>
-   <td style="text-align: center;"><code>yellow</code></td>
-   <td><code>#ffff00</code></td>
-   <td style="background: yellow;"></td>
-  </tr>
-  <tr>
-   <td style="background: #000080;"></td>
-   <td style="text-align: center;"><code>navy</code></td>
-   <td><code>#000080</code></td>
-   <td style="background: navy;"></td>
-  </tr>
-  <tr>
-   <td style="background: #00F;"></td>
-   <td style="text-align: center;"><code>blue</code></td>
-   <td><code>#0000ff</code></td>
-   <td style="background: blue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #008080;"></td>
-   <td style="text-align: center;"><code>teal</code></td>
-   <td><code>#008080</code></td>
-   <td style="background: teal;"></td>
-  </tr>
-  <tr>
-   <td style="background: #0FF;"></td>
-   <td style="text-align: center;"><code>aqua</code></td>
-   <td><code>#00ffff</code></td>
-   <td style="background: aqua;"></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1")}}</td>
-   <td style="background: #FFA500;"></td>
-   <td style="text-align: center;"><code>orange</code></td>
-   <td><code>#ffa500</code></td>
-   <td style="background: orange;"></td>
-  </tr>
-  <tr>
-   <td rowspan="130">{{SpecName("CSS3 Colors")}}</td>
-   <td style="background: #f0f8ff;"></td>
-   <td style="text-align: center;"><code>aliceblue</code></td>
-   <td><code>#f0f8ff</code></td>
-   <td style="background: aliceblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #faebd7;"></td>
-   <td style="text-align: center;"><code>antiquewhite</code></td>
-   <td><code>#faebd7</code></td>
-   <td style="background: antiquewhite;"></td>
-  </tr>
-  <tr>
-   <td style="background: #7fffd4;"></td>
-   <td style="text-align: center;"><code>aquamarine</code></td>
-   <td><code>#7fffd4</code></td>
-   <td style="background: aquamarine;"></td>
-  </tr>
-  <tr>
-   <td style="background: #f0ffff;"></td>
-   <td style="text-align: center;"><code>azure</code></td>
-   <td><code>#f0ffff</code></td>
-   <td style="background: azure;"></td>
-  </tr>
-  <tr>
-   <td style="background: #f5f5dc;"></td>
-   <td style="text-align: center;"><code>beige</code></td>
-   <td><code>#f5f5dc</code></td>
-   <td style="background: beige;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffe4c4;"></td>
-   <td style="text-align: center;"><code>bisque</code></td>
-   <td><code>#ffe4c4</code></td>
-   <td style="background: bisque;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffebcd;"></td>
-   <td style="text-align: center;"><code>blanchedalmond</code></td>
-   <td><code>#ffebcd</code></td>
-   <td style="background: blanchedalmond;"></td>
-  </tr>
-  <tr>
-   <td style="background: #8a2be2;"></td>
-   <td style="text-align: center;"><code>blueviolet</code></td>
-   <td><code>#8a2be2</code></td>
-   <td style="background: blueviolet;"></td>
-  </tr>
-  <tr>
-   <td style="background: #a52a2a;"></td>
-   <td style="text-align: center;"><code>brown</code></td>
-   <td><code>#a52a2a</code></td>
-   <td style="background: brown;"></td>
-  </tr>
-  <tr>
-   <td style="background: #deb887;"></td>
-   <td style="text-align: center;"><code>burlywood</code></td>
-   <td><code>#deb887</code></td>
-   <td style="background: burlywood;"></td>
-  </tr>
-  <tr>
-   <td style="background: #5f9ea0;"></td>
-   <td style="text-align: center;"><code>cadetblue</code></td>
-   <td><code>#5f9ea0</code></td>
-   <td style="background: cadetblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #7fff00;"></td>
-   <td style="text-align: center;"><code>chartreuse</code></td>
-   <td><code>#7fff00</code></td>
-   <td style="background: chartreuse;"></td>
-  </tr>
-  <tr>
-   <td style="background: #d2691e;"></td>
-   <td style="text-align: center;"><code>chocolate</code></td>
-   <td><code>#d2691e</code></td>
-   <td style="background: chocolate;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ff7f50;"></td>
-   <td style="text-align: center;"><code>coral</code></td>
-   <td><code>#ff7f50</code></td>
-   <td style="background: coral;"></td>
-  </tr>
-  <tr>
-   <td style="background: #6495ed;"></td>
-   <td style="text-align: center;"><code>cornflowerblue</code></td>
-   <td><code>#6495ed</code></td>
-   <td style="background: cornflowerblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #fff8dc;"></td>
-   <td style="text-align: center;"><code>cornsilk</code></td>
-   <td><code>#fff8dc</code></td>
-   <td style="background: cornsilk;"></td>
-  </tr>
-  <tr>
-   <td style="background: #dc143c;"></td>
-   <td style="text-align: center;"><code>crimson</code></td>
-   <td><code>#dc143c</code></td>
-   <td style="background: crimson;"></td>
-  </tr>
-  <tr>
-   <td style="background: #0ff;"></td>
-   <td style="text-align: center;"><code>cyan</code> (synonyme de <code>aqua</code>)</td>
-   <td><code>#00ffff</code></td>
-   <td style="background: cyan;"></td>
-  </tr>
-  <tr>
-   <td style="background: #00008b;"></td>
-   <td style="text-align: center;"><code>darkblue</code></td>
-   <td><code>#00008b</code></td>
-   <td style="background: darkblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #008b8b;"></td>
-   <td style="text-align: center;"><code>darkcyan</code></td>
-   <td><code>#008b8b</code></td>
-   <td style="background: darkcyan;"></td>
-  </tr>
-  <tr>
-   <td style="background: #b8860b;"></td>
-   <td style="text-align: center;"><code>darkgoldenrod</code></td>
-   <td><code>#b8860b</code></td>
-   <td style="background: darkgoldenrod;"></td>
-  </tr>
-  <tr>
-   <td style="background: #a9a9a9;"></td>
-   <td style="text-align: center;"><code>darkgray</code></td>
-   <td><code>#a9a9a9</code></td>
-   <td style="background: darkgray;"></td>
-  </tr>
-  <tr>
-   <td style="background: #006400;"></td>
-   <td style="text-align: center;"><code>darkgreen</code></td>
-   <td><code>#006400</code></td>
-   <td style="background: darkgreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #a9a9a9;"></td>
-   <td style="text-align: center;"><code>darkgrey</code></td>
-   <td><code>#a9a9a9</code></td>
-   <td style="background: darkgrey;"></td>
-  </tr>
-  <tr>
-   <td style="background: #bdb76b;"></td>
-   <td style="text-align: center;"><code>darkkhaki</code></td>
-   <td><code>#bdb76b</code></td>
-   <td style="background: darkkhaki;"></td>
-  </tr>
-  <tr>
-   <td style="background: #8b008b;"></td>
-   <td style="text-align: center;"><code>darkmagenta</code></td>
-   <td><code>#8b008b</code></td>
-   <td style="background: darkmagenta;"></td>
-  </tr>
-  <tr>
-   <td style="background: #556b2f;"></td>
-   <td style="text-align: center;"><code>darkolivegreen</code></td>
-   <td><code>#556b2f</code></td>
-   <td style="background: darkolivegreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ff8c00;"></td>
-   <td style="text-align: center;"><code>darkorange</code></td>
-   <td><code>#ff8c00</code></td>
-   <td style="background: darkorange;"></td>
-  </tr>
-  <tr>
-   <td style="background: #9932cc;"></td>
-   <td style="text-align: center;"><code>darkorchid</code></td>
-   <td><code>#9932cc</code></td>
-   <td style="background: darkorchid;"></td>
-  </tr>
-  <tr>
-   <td style="background: #8b0000;"></td>
-   <td style="text-align: center;"><code>darkred</code></td>
-   <td><code>#8b0000</code></td>
-   <td style="background: darkred;"></td>
-  </tr>
-  <tr>
-   <td style="background: #e9967a;"></td>
-   <td style="text-align: center;"><code>darksalmon</code></td>
-   <td><code>#e9967a</code></td>
-   <td style="background: darksalmon;"></td>
-  </tr>
-  <tr>
-   <td style="background: #8fbc8f;"></td>
-   <td style="text-align: center;"><code>darkseagreen</code></td>
-   <td><code>#8fbc8f</code></td>
-   <td style="background: darkseagreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #483d8b;"></td>
-   <td style="text-align: center;"><code>darkslateblue</code></td>
-   <td><code>#483d8b</code></td>
-   <td style="background: darkslateblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #2f4f4f;"></td>
-   <td style="text-align: center;"><code>darkslategray</code></td>
-   <td><code>#2f4f4f</code></td>
-   <td style="background: darkslategray;"></td>
-  </tr>
-  <tr>
-   <td style="background: #2f4f4f;"></td>
-   <td style="text-align: center;"><code>darkslategrey</code></td>
-   <td><code>#2f4f4f</code></td>
-   <td style="background: darkslategrey;"></td>
-  </tr>
-  <tr>
-   <td style="background: #00ced1;"></td>
-   <td style="text-align: center;"><code>darkturquoise</code></td>
-   <td><code>#00ced1</code></td>
-   <td style="background: darkturquoise;"></td>
-  </tr>
-  <tr>
-   <td style="background: #9400d3;"></td>
-   <td style="text-align: center;"><code>darkviolet</code></td>
-   <td><code>#9400d3</code></td>
-   <td style="background: darkviolet;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ff1493;"></td>
-   <td style="text-align: center;"><code>deeppink</code></td>
-   <td><code>#ff1493</code></td>
-   <td style="background: deeppink;"></td>
-  </tr>
-  <tr>
-   <td style="background: #00bfff;"></td>
-   <td style="text-align: center;"><code>deepskyblue</code></td>
-   <td><code>#00bfff</code></td>
-   <td style="background: deepskyblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #696969;"></td>
-   <td style="text-align: center;"><code>dimgray</code></td>
-   <td><code>#696969</code></td>
-   <td style="background: dimgray;"></td>
-  </tr>
-  <tr>
-   <td style="background: #696969;"></td>
-   <td style="text-align: center;"><code>dimgrey</code></td>
-   <td><code>#696969</code></td>
-   <td style="background: dimgrey;"></td>
-  </tr>
-  <tr>
-   <td style="background: #1e90ff;"></td>
-   <td style="text-align: center;"><code>dodgerblue</code></td>
-   <td><code>#1e90ff</code></td>
-   <td style="background: dodgerblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #b22222;"></td>
-   <td style="text-align: center;"><code>firebrick</code></td>
-   <td><code>#b22222</code></td>
-   <td style="background: firebrick;"></td>
-  </tr>
-  <tr>
-   <td style="background: #fffaf0;"></td>
-   <td style="text-align: center;"><code>floralwhite</code></td>
-   <td><code>#fffaf0</code></td>
-   <td style="background: floralwhite;"></td>
-  </tr>
-  <tr>
-   <td style="background: #228b22;"></td>
-   <td style="text-align: center;"><code>forestgreen</code></td>
-   <td><code>#228b22</code></td>
-   <td style="background: forestgreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #dcdcdc;"></td>
-   <td style="text-align: center;"><code>gainsboro</code></td>
-   <td><code>#dcdcdc</code></td>
-   <td style="background: gainsboro;"></td>
-  </tr>
-  <tr>
-   <td style="background: #f8f8ff;"></td>
-   <td style="text-align: center;"><code>ghostwhite</code></td>
-   <td><code>#f8f8ff</code></td>
-   <td style="background: ghostwhite;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffd700;"></td>
-   <td style="text-align: center;"><code>gold</code></td>
-   <td><code>#ffd700</code></td>
-   <td style="background: gold;"></td>
-  </tr>
-  <tr>
-   <td style="background: #daa520;"></td>
-   <td style="text-align: center;"><code>goldenrod</code></td>
-   <td><code>#daa520</code></td>
-   <td style="background: goldenrod;"></td>
-  </tr>
-  <tr>
-   <td style="background: #adff2f;"></td>
-   <td style="text-align: center;"><code>greenyellow</code></td>
-   <td><code>#adff2f</code></td>
-   <td style="background: greenyellow ;"></td>
-  </tr>
-  <tr>
-   <td style="background: #808080;"></td>
-   <td style="text-align: center;"><code>grey</code></td>
-   <td><code>#808080</code></td>
-   <td style="background: grey;"></td>
-  </tr>
-  <tr>
-   <td style="background: #f0fff0;"></td>
-   <td style="text-align: center;"><code>honeydew</code></td>
-   <td><code>#f0fff0</code></td>
-   <td style="background: honeydew;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ff69b4;"></td>
-   <td style="text-align: center;"><code>hotpink</code></td>
-   <td><code>#ff69b4</code></td>
-   <td style="background: hotpink;"></td>
-  </tr>
-  <tr>
-   <td style="background: #cd5c5c;"></td>
-   <td style="text-align: center;"><code>indianred</code></td>
-   <td><code>#cd5c5c</code></td>
-   <td style="background: indianred;"></td>
-  </tr>
-  <tr>
-   <td style="background: #4b0082;"></td>
-   <td style="text-align: center;"><code>indigo</code></td>
-   <td><code>#4b0082</code></td>
-   <td style="background: indigo;"></td>
-  </tr>
-  <tr>
-   <td style="background: #fffff0;"></td>
-   <td style="text-align: center;"><code>ivory</code></td>
-   <td><code>#fffff0</code></td>
-   <td style="background: ivory;"></td>
-  </tr>
-  <tr>
-   <td style="background: #f0e68c;"></td>
-   <td style="text-align: center;"><code>khaki</code></td>
-   <td><code>#f0e68c</code></td>
-   <td style="background: khaki;"></td>
-  </tr>
-  <tr>
-   <td style="background: #e6e6fa;"></td>
-   <td style="text-align: center;"><code>lavender</code></td>
-   <td><code>#e6e6fa</code></td>
-   <td style="background: lavender;"></td>
-  </tr>
-  <tr>
-   <td style="background: #fff0f5;"></td>
-   <td style="text-align: center;"><code>lavenderblush</code></td>
-   <td><code>#fff0f5</code></td>
-   <td style="background: lavenderblush ;"></td>
-  </tr>
-  <tr>
-   <td style="background: #7cfc00;"></td>
-   <td style="text-align: center;"><code>lawngreen</code></td>
-   <td><code>#7cfc00</code></td>
-   <td style="background: lawngreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #fffacd;"></td>
-   <td style="text-align: center;"><code>lemonchiffon</code></td>
-   <td><code>#fffacd</code></td>
-   <td style="background: lemonchiffon;"></td>
-  </tr>
-  <tr>
-   <td style="background: #add8e6;"></td>
-   <td style="text-align: center;"><code>lightblue</code></td>
-   <td><code>#add8e6</code></td>
-   <td style="background: lightblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #f08080;"></td>
-   <td style="text-align: center;"><code>lightcoral</code></td>
-   <td><code>#f08080</code></td>
-   <td style="background: lightcoral;"></td>
-  </tr>
-  <tr>
-   <td style="background: #e0ffff;"></td>
-   <td style="text-align: center;"><code>lightcyan</code></td>
-   <td><code>#e0ffff</code></td>
-   <td style="background: lightcyan;"></td>
-  </tr>
-  <tr>
-   <td style="background: #fafad2;"></td>
-   <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
-   <td><code>#fafad2</code></td>
-   <td style="background: lightgoldenrodyellow ;"></td>
-  </tr>
-  <tr>
-   <td style="background: #d3d3d3;"></td>
-   <td style="text-align: center;"><code>lightgray</code></td>
-   <td><code>#d3d3d3</code></td>
-   <td style="background: lightgray;"></td>
-  </tr>
-  <tr>
-   <td style="background: #90ee90;"></td>
-   <td style="text-align: center;"><code>lightgreen</code></td>
-   <td><code>#90ee90</code></td>
-   <td style="background: lightgreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #d3d3d3;"></td>
-   <td style="text-align: center;"><code>lightgrey</code></td>
-   <td><code>#d3d3d3</code></td>
-   <td style="background: lightgrey;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffb6c1;"></td>
-   <td style="text-align: center;"><code>lightpink</code></td>
-   <td><code>#ffb6c1</code></td>
-   <td style="background: lightpink;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffa07a;"></td>
-   <td style="text-align: center;"><code>lightsalmon</code></td>
-   <td><code>#ffa07a</code></td>
-   <td style="background: lightsalmon;"></td>
-  </tr>
-  <tr>
-   <td style="background: #20b2aa;"></td>
-   <td style="text-align: center;"><code>lightseagreen</code></td>
-   <td><code>#20b2aa</code></td>
-   <td style="background: lightseagreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #87cefa;"></td>
-   <td style="text-align: center;"><code>lightskyblue</code></td>
-   <td><code>#87cefa</code></td>
-   <td style="background: lightskyblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #778899;"></td>
-   <td style="text-align: center;"><code>lightslategray</code></td>
-   <td><code>#778899</code></td>
-   <td style="background: lightslategray;"></td>
-  </tr>
-  <tr>
-   <td style="background: #778899;"></td>
-   <td style="text-align: center;"><code>lightslategrey</code></td>
-   <td><code>#778899</code></td>
-   <td style="background: lightslategrey;"></td>
-  </tr>
-  <tr>
-   <td style="background: #b0c4de;"></td>
-   <td style="text-align: center;"><code>lightsteelblue</code></td>
-   <td><code>#b0c4de</code></td>
-   <td style="background: lightsteelblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffffe0;"></td>
-   <td style="text-align: center;"><code>lightyellow</code></td>
-   <td><code>#ffffe0</code></td>
-   <td style="background: lightyellow;"></td>
-  </tr>
-  <tr>
-   <td style="background: #32cd32;"></td>
-   <td style="text-align: center;"><code>limegreen</code></td>
-   <td><code>#32cd32</code></td>
-   <td style="background: limegreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #faf0e6;"></td>
-   <td style="text-align: center;"><code>linen</code></td>
-   <td><code>#faf0e6</code></td>
-   <td style="background: linen;"></td>
-  </tr>
-  <tr>
-   <td style="background: rgb(255, 0, 255) none repeat scroll 0% 0%;"></td>
-   <td style="text-align: center;"><code>magenta</code> (synonyme de <code>fuchsia</code>)</td>
-   <td><code>#ff00ff</code></td>
-   <td style="background: magenta none repeat scroll 0% 0%;"></td>
-  </tr>
-  <tr>
-   <td style="background: #66cdaa;"></td>
-   <td style="text-align: center;"><code>mediumaquamarine</code></td>
-   <td><code>#66cdaa</code></td>
-   <td style="background: mediumaquamarine;"></td>
-  </tr>
-  <tr>
-   <td style="background: #0000cd;"></td>
-   <td style="text-align: center;"><code>mediumblue</code></td>
-   <td><code>#0000cd</code></td>
-   <td style="background: mediumblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ba55d3;"></td>
-   <td style="text-align: center;"><code>mediumorchid</code></td>
-   <td><code>#ba55d3</code></td>
-   <td style="background: mediumorchid;"></td>
-  </tr>
-  <tr>
-   <td style="background: #9370db;"></td>
-   <td style="text-align: center;"><code>mediumpurple</code></td>
-   <td><code>#9370db</code></td>
-   <td style="background: mediumpurple;"></td>
-  </tr>
-  <tr>
-   <td style="background: #3cb371;"></td>
-   <td style="text-align: center;"><code>mediumseagreen</code></td>
-   <td><code>#3cb371</code></td>
-   <td style="background: mediumseagreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #7b68ee;"></td>
-   <td style="text-align: center;"><code>mediumslateblue</code></td>
-   <td><code>#7b68ee</code></td>
-   <td style="background: mediumslateblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #00fa9a;"></td>
-   <td style="text-align: center;"><code>mediumspringgreen</code></td>
-   <td><code>#00fa9a</code></td>
-   <td style="background: mediumspringgreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #48d1cc;"></td>
-   <td style="text-align: center;"><code>mediumturquoise</code></td>
-   <td><code>#48d1cc</code></td>
-   <td style="background: mediumturquoise;"></td>
-  </tr>
-  <tr>
-   <td style="background: #c71585;"></td>
-   <td style="text-align: center;"><code>mediumvioletred</code></td>
-   <td><code>#c71585</code></td>
-   <td style="background: mediumvioletred;"></td>
-  </tr>
-  <tr>
-   <td style="background: #191970;"></td>
-   <td style="text-align: center;"><code>midnightblue</code></td>
-   <td><code>#191970</code></td>
-   <td style="background: midnightblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #f5fffa;"></td>
-   <td style="text-align: center;"><code>mintcream</code></td>
-   <td><code>#f5fffa</code></td>
-   <td style="background: mintcream;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffe4e1;"></td>
-   <td style="text-align: center;"><code>mistyrose</code></td>
-   <td><code>#ffe4e1</code></td>
-   <td style="background: mistyrose;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffe4b5;"></td>
-   <td style="text-align: center;"><code>moccasin</code></td>
-   <td><code>#ffe4b5</code></td>
-   <td style="background: moccasin;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffdead;"></td>
-   <td style="text-align: center;"><code>navajowhite</code></td>
-   <td><code>#ffdead</code></td>
-   <td style="background: navajowhite;"></td>
-  </tr>
-  <tr>
-   <td style="background: #fdf5e6;"></td>
-   <td style="text-align: center;"><code>oldlace</code></td>
-   <td><code>#fdf5e6</code></td>
-   <td style="background: oldlace;"></td>
-  </tr>
-  <tr>
-   <td style="background: #6b8e23;"></td>
-   <td style="text-align: center;"><code>olivedrab</code></td>
-   <td><code>#6b8e23</code></td>
-   <td style="background: olivedrab;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ff4500;"></td>
-   <td style="text-align: center;"><code>orangered</code></td>
-   <td><code>#ff4500</code></td>
-   <td style="background: orangered;"></td>
-  </tr>
-  <tr>
-   <td style="background: #da70d6;"></td>
-   <td style="text-align: center;"><code>orchid</code></td>
-   <td><code>#da70d6</code></td>
-   <td style="background: orchid;"></td>
-  </tr>
-  <tr>
-   <td style="background: #eee8aa;"></td>
-   <td style="text-align: center;"><code>palegoldenrod</code></td>
-   <td><code>#eee8aa</code></td>
-   <td style="background: palegoldenrod;"></td>
-  </tr>
-  <tr>
-   <td style="background: #98fb98;"></td>
-   <td style="text-align: center;"><code>palegreen</code></td>
-   <td><code>#98fb98</code></td>
-   <td style="background: palegreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #afeeee;"></td>
-   <td style="text-align: center;"><code>paleturquoise</code></td>
-   <td><code>#afeeee</code></td>
-   <td style="background: paleturquoise;"></td>
-  </tr>
-  <tr>
-   <td style="background: #db7093;"></td>
-   <td style="text-align: center;"><code>palevioletred</code></td>
-   <td><code>#db7093</code></td>
-   <td style="background: palevioletred;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffefd5;"></td>
-   <td style="text-align: center;"><code>papayawhip</code></td>
-   <td><code>#ffefd5</code></td>
-   <td style="background: papayawhip;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffdab9;"></td>
-   <td style="text-align: center;"><code>peachpuff</code></td>
-   <td><code>#ffdab9</code></td>
-   <td style="background: peachpuff;"></td>
-  </tr>
-  <tr>
-   <td style="background: #cd853f;"></td>
-   <td style="text-align: center;"><code>peru</code></td>
-   <td><code>#cd853f</code></td>
-   <td style="background: peru;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ffc0cb;"></td>
-   <td style="text-align: center;"><code>pink</code></td>
-   <td><code>#ffc0cb</code></td>
-   <td style="background: pink;"></td>
-  </tr>
-  <tr>
-   <td style="background: #dda0dd;"></td>
-   <td style="text-align: center;"><code>plum</code></td>
-   <td><code>#dda0dd</code></td>
-   <td style="background: plum;"></td>
-  </tr>
-  <tr>
-   <td style="background: #b0e0e6;"></td>
-   <td style="text-align: center;"><code>powderblue</code></td>
-   <td><code>#b0e0e6</code></td>
-   <td style="background: powderblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #bc8f8f;"></td>
-   <td style="text-align: center;"><code>rosybrown</code></td>
-   <td><code>#bc8f8f</code></td>
-   <td style="background: rosybrown;"></td>
-  </tr>
-  <tr>
-   <td style="background: #4169e1;"></td>
-   <td style="text-align: center;"><code>royalblue</code></td>
-   <td><code>#4169e1</code></td>
-   <td style="background: royalblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #8b4513;"></td>
-   <td style="text-align: center;"><code>saddlebrown</code></td>
-   <td><code>#8b4513</code></td>
-   <td style="background: saddlebrown;"></td>
-  </tr>
-  <tr>
-   <td style="background: #fa8072;"></td>
-   <td style="text-align: center;"><code>salmon</code></td>
-   <td><code>#fa8072</code></td>
-   <td style="background: salmon;"></td>
-  </tr>
-  <tr>
-   <td style="background: #f4a460;"></td>
-   <td style="text-align: center;"><code>sandybrown</code></td>
-   <td><code>#f4a460</code></td>
-   <td style="background: sandybrown;"></td>
-  </tr>
-  <tr>
-   <td style="background: #2e8b57;"></td>
-   <td style="text-align: center;"><code>seagreen</code></td>
-   <td><code>#2e8b57</code></td>
-   <td style="background: seagreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #fff5ee;"></td>
-   <td style="text-align: center;"><code>seashell</code></td>
-   <td><code>#fff5ee</code></td>
-   <td style="background: seashell;"></td>
-  </tr>
-  <tr>
-   <td style="background: #a0522d;"></td>
-   <td style="text-align: center;"><code>sienna</code></td>
-   <td><code>#a0522d</code></td>
-   <td style="background: sienna;"></td>
-  </tr>
-  <tr>
-   <td style="background: #87ceeb;"></td>
-   <td style="text-align: center;"><code>skyblue</code></td>
-   <td><code>#87ceeb</code></td>
-   <td style="background: skyblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #6a5acd;"></td>
-   <td style="text-align: center;"><code>slateblue</code></td>
-   <td><code>#6a5acd</code></td>
-   <td style="background: slateblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #708090;"></td>
-   <td style="text-align: center;"><code>slategray</code></td>
-   <td><code>#708090</code></td>
-   <td style="background: slategray;"></td>
-  </tr>
-  <tr>
-   <td style="background: #708090;"></td>
-   <td style="text-align: center;"><code>slategrey</code></td>
-   <td><code>#708090</code></td>
-   <td style="background: slategrey;"></td>
-  </tr>
-  <tr>
-   <td style="background: #fffafa;"></td>
-   <td style="text-align: center;"><code>snow</code></td>
-   <td><code>#fffafa</code></td>
-   <td style="background: snow;"></td>
-  </tr>
-  <tr>
-   <td style="background: #00ff7f;"></td>
-   <td style="text-align: center;"><code>springgreen</code></td>
-   <td><code>#00ff7f</code></td>
-   <td style="background: springgreen;"></td>
-  </tr>
-  <tr>
-   <td style="background: #4682b4;"></td>
-   <td style="text-align: center;"><code>steelblue</code></td>
-   <td><code>#4682b4</code></td>
-   <td style="background: steelblue;"></td>
-  </tr>
-  <tr>
-   <td style="background: #d2b48c;"></td>
-   <td style="text-align: center;"><code>tan</code></td>
-   <td><code>#d2b48c</code></td>
-   <td style="background: tan;"></td>
-  </tr>
-  <tr>
-   <td style="background: #d8bfd8;"></td>
-   <td style="text-align: center;"><code>thistle</code></td>
-   <td><code>#d8bfd8</code></td>
-   <td style="background: thistle;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ff6347;"></td>
-   <td style="text-align: center;"><code>tomato</code></td>
-   <td><code>#ff6347</code></td>
-   <td style="background: tomato;"></td>
-  </tr>
-  <tr>
-   <td style="background: #40e0d0;"></td>
-   <td style="text-align: center;"><code>turquoise</code></td>
-   <td><code>#40e0d0</code></td>
-   <td style="background: turquoise;"></td>
-  </tr>
-  <tr>
-   <td style="background: #ee82ee;"></td>
-   <td style="text-align: center;"><code>violet</code></td>
-   <td><code>#ee82ee</code></td>
-   <td style="background: violet;"></td>
-  </tr>
-  <tr>
-   <td style="background: #f5deb3;"></td>
-   <td style="text-align: center;"><code>wheat</code></td>
-   <td><code>#f5deb3</code></td>
-   <td style="background: wheat;"></td>
-  </tr>
-  <tr>
-   <td style="background: #f5f5f5;"></td>
-   <td style="text-align: center;"><code>whitesmoke</code></td>
-   <td><code>#f5f5f5</code></td>
-   <td style="background: whitesmoke;"></td>
-  </tr>
-  <tr>
-   <td style="background: #9acd32;"></td>
-   <td style="text-align: center;"><code>yellowgreen</code></td>
-   <td><code>#9acd32</code></td>
-   <td style="background: yellowgreen;"></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS4 Colors")}}</td>
-   <td style="background: #639;"></td>
-   <td style="text-align: center;"><code>rebeccapurple</code></td>
-   <td><code>#663399</code></td>
-   <td style="background: rebeccapurple;"></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Couleur</th>
+      <th scope="col">Mot-clé</th>
+      <th scope="col">Valeurs exprimées en hexadécimal RGB</th>
+      <th scope="col">Exemple «<em> live</em> » dans le navigateur</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr style="position: relative">
+      <td rowspan="16">{{SpecName("CSS1")}}</td>
+      <td style="background: #000"></td>
+      <td style="text-align: center"><code>black</code></td>
+      <td><code>#000000</code></td>
+      <td style="background: black"></td>
+    </tr>
+    <tr>
+      <td style="background: #c0c0c0"></td>
+      <td style="text-align: center"><code>silver</code></td>
+      <td><code>#c0c0c0</code></td>
+      <td style="background: silver"></td>
+    </tr>
+    <tr>
+      <td style="background: #808080"></td>
+      <td style="text-align: center"><code>gray</code></td>
+      <td><code>#808080</code></td>
+      <td style="background: gray"></td>
+    </tr>
+    <tr>
+      <td style="background: #fff"></td>
+      <td style="text-align: center"><code>white</code></td>
+      <td><code>#ffffff</code></td>
+      <td style="background: white"></td>
+    </tr>
+    <tr>
+      <td style="background: #800000"></td>
+      <td style="text-align: center"><code>maroon</code></td>
+      <td><code>#800000</code></td>
+      <td style="background: maroon"></td>
+    </tr>
+    <tr>
+      <td style="background: #f00"></td>
+      <td style="text-align: center"><code>red</code></td>
+      <td><code>#ff0000</code></td>
+      <td style="background: red"></td>
+    </tr>
+    <tr>
+      <td style="background: #800080"></td>
+      <td style="text-align: center"><code>purple</code></td>
+      <td><code>#800080</code></td>
+      <td style="background: purple"></td>
+    </tr>
+    <tr>
+      <td style="background: #f0f"></td>
+      <td style="text-align: center"><code>fuchsia</code></td>
+      <td><code>#ff00ff</code></td>
+      <td style="background: fuchsia"></td>
+    </tr>
+    <tr>
+      <td style="background: #008000"></td>
+      <td style="text-align: center"><code>green</code></td>
+      <td><code>#008000</code></td>
+      <td style="background: green"></td>
+    </tr>
+    <tr>
+      <td style="background: #0f0"></td>
+      <td style="text-align: center"><code>lime</code></td>
+      <td><code>#00ff00</code></td>
+      <td style="background: lime"></td>
+    </tr>
+    <tr>
+      <td style="background: #808000"></td>
+      <td style="text-align: center"><code>olive</code></td>
+      <td><code>#808000</code></td>
+      <td style="background: olive"></td>
+    </tr>
+    <tr>
+      <td style="background: #ff0"></td>
+      <td style="text-align: center"><code>yellow</code></td>
+      <td><code>#ffff00</code></td>
+      <td style="background: yellow"></td>
+    </tr>
+    <tr>
+      <td style="background: #000080"></td>
+      <td style="text-align: center"><code>navy</code></td>
+      <td><code>#000080</code></td>
+      <td style="background: navy"></td>
+    </tr>
+    <tr>
+      <td style="background: #00f"></td>
+      <td style="text-align: center"><code>blue</code></td>
+      <td><code>#0000ff</code></td>
+      <td style="background: blue"></td>
+    </tr>
+    <tr>
+      <td style="background: #008080"></td>
+      <td style="text-align: center"><code>teal</code></td>
+      <td><code>#008080</code></td>
+      <td style="background: teal"></td>
+    </tr>
+    <tr>
+      <td style="background: #0ff"></td>
+      <td style="text-align: center"><code>aqua</code></td>
+      <td><code>#00ffff</code></td>
+      <td style="background: aqua"></td>
+    </tr>
+    <tr>
+      <td>{{SpecName("CSS2.1")}}</td>
+      <td style="background: #ffa500"></td>
+      <td style="text-align: center"><code>orange</code></td>
+      <td><code>#ffa500</code></td>
+      <td style="background: orange"></td>
+    </tr>
+    <tr>
+      <td rowspan="130">{{SpecName("CSS3 Colors")}}</td>
+      <td style="background: #f0f8ff"></td>
+      <td style="text-align: center"><code>aliceblue</code></td>
+      <td><code>#f0f8ff</code></td>
+      <td style="background: aliceblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #faebd7"></td>
+      <td style="text-align: center"><code>antiquewhite</code></td>
+      <td><code>#faebd7</code></td>
+      <td style="background: antiquewhite"></td>
+    </tr>
+    <tr>
+      <td style="background: #7fffd4"></td>
+      <td style="text-align: center"><code>aquamarine</code></td>
+      <td><code>#7fffd4</code></td>
+      <td style="background: aquamarine"></td>
+    </tr>
+    <tr>
+      <td style="background: #f0ffff"></td>
+      <td style="text-align: center"><code>azure</code></td>
+      <td><code>#f0ffff</code></td>
+      <td style="background: azure"></td>
+    </tr>
+    <tr>
+      <td style="background: #f5f5dc"></td>
+      <td style="text-align: center"><code>beige</code></td>
+      <td><code>#f5f5dc</code></td>
+      <td style="background: beige"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffe4c4"></td>
+      <td style="text-align: center"><code>bisque</code></td>
+      <td><code>#ffe4c4</code></td>
+      <td style="background: bisque"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffebcd"></td>
+      <td style="text-align: center"><code>blanchedalmond</code></td>
+      <td><code>#ffebcd</code></td>
+      <td style="background: blanchedalmond"></td>
+    </tr>
+    <tr>
+      <td style="background: #8a2be2"></td>
+      <td style="text-align: center"><code>blueviolet</code></td>
+      <td><code>#8a2be2</code></td>
+      <td style="background: blueviolet"></td>
+    </tr>
+    <tr>
+      <td style="background: #a52a2a"></td>
+      <td style="text-align: center"><code>brown</code></td>
+      <td><code>#a52a2a</code></td>
+      <td style="background: brown"></td>
+    </tr>
+    <tr>
+      <td style="background: #deb887"></td>
+      <td style="text-align: center"><code>burlywood</code></td>
+      <td><code>#deb887</code></td>
+      <td style="background: burlywood"></td>
+    </tr>
+    <tr>
+      <td style="background: #5f9ea0"></td>
+      <td style="text-align: center"><code>cadetblue</code></td>
+      <td><code>#5f9ea0</code></td>
+      <td style="background: cadetblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #7fff00"></td>
+      <td style="text-align: center"><code>chartreuse</code></td>
+      <td><code>#7fff00</code></td>
+      <td style="background: chartreuse"></td>
+    </tr>
+    <tr>
+      <td style="background: #d2691e"></td>
+      <td style="text-align: center"><code>chocolate</code></td>
+      <td><code>#d2691e</code></td>
+      <td style="background: chocolate"></td>
+    </tr>
+    <tr>
+      <td style="background: #ff7f50"></td>
+      <td style="text-align: center"><code>coral</code></td>
+      <td><code>#ff7f50</code></td>
+      <td style="background: coral"></td>
+    </tr>
+    <tr>
+      <td style="background: #6495ed"></td>
+      <td style="text-align: center"><code>cornflowerblue</code></td>
+      <td><code>#6495ed</code></td>
+      <td style="background: cornflowerblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #fff8dc"></td>
+      <td style="text-align: center"><code>cornsilk</code></td>
+      <td><code>#fff8dc</code></td>
+      <td style="background: cornsilk"></td>
+    </tr>
+    <tr>
+      <td style="background: #dc143c"></td>
+      <td style="text-align: center"><code>crimson</code></td>
+      <td><code>#dc143c</code></td>
+      <td style="background: crimson"></td>
+    </tr>
+    <tr>
+      <td style="background: #0ff"></td>
+      <td style="text-align: center">
+        <code>cyan</code> (synonyme de <code>aqua</code>)
+      </td>
+      <td><code>#00ffff</code></td>
+      <td style="background: cyan"></td>
+    </tr>
+    <tr>
+      <td style="background: #00008b"></td>
+      <td style="text-align: center"><code>darkblue</code></td>
+      <td><code>#00008b</code></td>
+      <td style="background: darkblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #008b8b"></td>
+      <td style="text-align: center"><code>darkcyan</code></td>
+      <td><code>#008b8b</code></td>
+      <td style="background: darkcyan"></td>
+    </tr>
+    <tr>
+      <td style="background: #b8860b"></td>
+      <td style="text-align: center"><code>darkgoldenrod</code></td>
+      <td><code>#b8860b</code></td>
+      <td style="background: darkgoldenrod"></td>
+    </tr>
+    <tr>
+      <td style="background: #a9a9a9"></td>
+      <td style="text-align: center"><code>darkgray</code></td>
+      <td><code>#a9a9a9</code></td>
+      <td style="background: darkgray"></td>
+    </tr>
+    <tr>
+      <td style="background: #006400"></td>
+      <td style="text-align: center"><code>darkgreen</code></td>
+      <td><code>#006400</code></td>
+      <td style="background: darkgreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #a9a9a9"></td>
+      <td style="text-align: center"><code>darkgrey</code></td>
+      <td><code>#a9a9a9</code></td>
+      <td style="background: darkgrey"></td>
+    </tr>
+    <tr>
+      <td style="background: #bdb76b"></td>
+      <td style="text-align: center"><code>darkkhaki</code></td>
+      <td><code>#bdb76b</code></td>
+      <td style="background: darkkhaki"></td>
+    </tr>
+    <tr>
+      <td style="background: #8b008b"></td>
+      <td style="text-align: center"><code>darkmagenta</code></td>
+      <td><code>#8b008b</code></td>
+      <td style="background: darkmagenta"></td>
+    </tr>
+    <tr>
+      <td style="background: #556b2f"></td>
+      <td style="text-align: center"><code>darkolivegreen</code></td>
+      <td><code>#556b2f</code></td>
+      <td style="background: darkolivegreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #ff8c00"></td>
+      <td style="text-align: center"><code>darkorange</code></td>
+      <td><code>#ff8c00</code></td>
+      <td style="background: darkorange"></td>
+    </tr>
+    <tr>
+      <td style="background: #9932cc"></td>
+      <td style="text-align: center"><code>darkorchid</code></td>
+      <td><code>#9932cc</code></td>
+      <td style="background: darkorchid"></td>
+    </tr>
+    <tr>
+      <td style="background: #8b0000"></td>
+      <td style="text-align: center"><code>darkred</code></td>
+      <td><code>#8b0000</code></td>
+      <td style="background: darkred"></td>
+    </tr>
+    <tr>
+      <td style="background: #e9967a"></td>
+      <td style="text-align: center"><code>darksalmon</code></td>
+      <td><code>#e9967a</code></td>
+      <td style="background: darksalmon"></td>
+    </tr>
+    <tr>
+      <td style="background: #8fbc8f"></td>
+      <td style="text-align: center"><code>darkseagreen</code></td>
+      <td><code>#8fbc8f</code></td>
+      <td style="background: darkseagreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #483d8b"></td>
+      <td style="text-align: center"><code>darkslateblue</code></td>
+      <td><code>#483d8b</code></td>
+      <td style="background: darkslateblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #2f4f4f"></td>
+      <td style="text-align: center"><code>darkslategray</code></td>
+      <td><code>#2f4f4f</code></td>
+      <td style="background: darkslategray"></td>
+    </tr>
+    <tr>
+      <td style="background: #2f4f4f"></td>
+      <td style="text-align: center"><code>darkslategrey</code></td>
+      <td><code>#2f4f4f</code></td>
+      <td style="background: darkslategrey"></td>
+    </tr>
+    <tr>
+      <td style="background: #00ced1"></td>
+      <td style="text-align: center"><code>darkturquoise</code></td>
+      <td><code>#00ced1</code></td>
+      <td style="background: darkturquoise"></td>
+    </tr>
+    <tr>
+      <td style="background: #9400d3"></td>
+      <td style="text-align: center"><code>darkviolet</code></td>
+      <td><code>#9400d3</code></td>
+      <td style="background: darkviolet"></td>
+    </tr>
+    <tr>
+      <td style="background: #ff1493"></td>
+      <td style="text-align: center"><code>deeppink</code></td>
+      <td><code>#ff1493</code></td>
+      <td style="background: deeppink"></td>
+    </tr>
+    <tr>
+      <td style="background: #00bfff"></td>
+      <td style="text-align: center"><code>deepskyblue</code></td>
+      <td><code>#00bfff</code></td>
+      <td style="background: deepskyblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #696969"></td>
+      <td style="text-align: center"><code>dimgray</code></td>
+      <td><code>#696969</code></td>
+      <td style="background: dimgray"></td>
+    </tr>
+    <tr>
+      <td style="background: #696969"></td>
+      <td style="text-align: center"><code>dimgrey</code></td>
+      <td><code>#696969</code></td>
+      <td style="background: dimgrey"></td>
+    </tr>
+    <tr>
+      <td style="background: #1e90ff"></td>
+      <td style="text-align: center"><code>dodgerblue</code></td>
+      <td><code>#1e90ff</code></td>
+      <td style="background: dodgerblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #b22222"></td>
+      <td style="text-align: center"><code>firebrick</code></td>
+      <td><code>#b22222</code></td>
+      <td style="background: firebrick"></td>
+    </tr>
+    <tr>
+      <td style="background: #fffaf0"></td>
+      <td style="text-align: center"><code>floralwhite</code></td>
+      <td><code>#fffaf0</code></td>
+      <td style="background: floralwhite"></td>
+    </tr>
+    <tr>
+      <td style="background: #228b22"></td>
+      <td style="text-align: center"><code>forestgreen</code></td>
+      <td><code>#228b22</code></td>
+      <td style="background: forestgreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #dcdcdc"></td>
+      <td style="text-align: center"><code>gainsboro</code></td>
+      <td><code>#dcdcdc</code></td>
+      <td style="background: gainsboro"></td>
+    </tr>
+    <tr>
+      <td style="background: #f8f8ff"></td>
+      <td style="text-align: center"><code>ghostwhite</code></td>
+      <td><code>#f8f8ff</code></td>
+      <td style="background: ghostwhite"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffd700"></td>
+      <td style="text-align: center"><code>gold</code></td>
+      <td><code>#ffd700</code></td>
+      <td style="background: gold"></td>
+    </tr>
+    <tr>
+      <td style="background: #daa520"></td>
+      <td style="text-align: center"><code>goldenrod</code></td>
+      <td><code>#daa520</code></td>
+      <td style="background: goldenrod"></td>
+    </tr>
+    <tr>
+      <td style="background: #adff2f"></td>
+      <td style="text-align: center"><code>greenyellow</code></td>
+      <td><code>#adff2f</code></td>
+      <td style="background: greenyellow"></td>
+    </tr>
+    <tr>
+      <td style="background: #808080"></td>
+      <td style="text-align: center"><code>grey</code></td>
+      <td><code>#808080</code></td>
+      <td style="background: grey"></td>
+    </tr>
+    <tr>
+      <td style="background: #f0fff0"></td>
+      <td style="text-align: center"><code>honeydew</code></td>
+      <td><code>#f0fff0</code></td>
+      <td style="background: honeydew"></td>
+    </tr>
+    <tr>
+      <td style="background: #ff69b4"></td>
+      <td style="text-align: center"><code>hotpink</code></td>
+      <td><code>#ff69b4</code></td>
+      <td style="background: hotpink"></td>
+    </tr>
+    <tr>
+      <td style="background: #cd5c5c"></td>
+      <td style="text-align: center"><code>indianred</code></td>
+      <td><code>#cd5c5c</code></td>
+      <td style="background: indianred"></td>
+    </tr>
+    <tr>
+      <td style="background: #4b0082"></td>
+      <td style="text-align: center"><code>indigo</code></td>
+      <td><code>#4b0082</code></td>
+      <td style="background: indigo"></td>
+    </tr>
+    <tr>
+      <td style="background: #fffff0"></td>
+      <td style="text-align: center"><code>ivory</code></td>
+      <td><code>#fffff0</code></td>
+      <td style="background: ivory"></td>
+    </tr>
+    <tr>
+      <td style="background: #f0e68c"></td>
+      <td style="text-align: center"><code>khaki</code></td>
+      <td><code>#f0e68c</code></td>
+      <td style="background: khaki"></td>
+    </tr>
+    <tr>
+      <td style="background: #e6e6fa"></td>
+      <td style="text-align: center"><code>lavender</code></td>
+      <td><code>#e6e6fa</code></td>
+      <td style="background: lavender"></td>
+    </tr>
+    <tr>
+      <td style="background: #fff0f5"></td>
+      <td style="text-align: center"><code>lavenderblush</code></td>
+      <td><code>#fff0f5</code></td>
+      <td style="background: lavenderblush"></td>
+    </tr>
+    <tr>
+      <td style="background: #7cfc00"></td>
+      <td style="text-align: center"><code>lawngreen</code></td>
+      <td><code>#7cfc00</code></td>
+      <td style="background: lawngreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #fffacd"></td>
+      <td style="text-align: center"><code>lemonchiffon</code></td>
+      <td><code>#fffacd</code></td>
+      <td style="background: lemonchiffon"></td>
+    </tr>
+    <tr>
+      <td style="background: #add8e6"></td>
+      <td style="text-align: center"><code>lightblue</code></td>
+      <td><code>#add8e6</code></td>
+      <td style="background: lightblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #f08080"></td>
+      <td style="text-align: center"><code>lightcoral</code></td>
+      <td><code>#f08080</code></td>
+      <td style="background: lightcoral"></td>
+    </tr>
+    <tr>
+      <td style="background: #e0ffff"></td>
+      <td style="text-align: center"><code>lightcyan</code></td>
+      <td><code>#e0ffff</code></td>
+      <td style="background: lightcyan"></td>
+    </tr>
+    <tr>
+      <td style="background: #fafad2"></td>
+      <td style="text-align: center"><code>lightgoldenrodyellow</code></td>
+      <td><code>#fafad2</code></td>
+      <td style="background: lightgoldenrodyellow"></td>
+    </tr>
+    <tr>
+      <td style="background: #d3d3d3"></td>
+      <td style="text-align: center"><code>lightgray</code></td>
+      <td><code>#d3d3d3</code></td>
+      <td style="background: lightgray"></td>
+    </tr>
+    <tr>
+      <td style="background: #90ee90"></td>
+      <td style="text-align: center"><code>lightgreen</code></td>
+      <td><code>#90ee90</code></td>
+      <td style="background: lightgreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #d3d3d3"></td>
+      <td style="text-align: center"><code>lightgrey</code></td>
+      <td><code>#d3d3d3</code></td>
+      <td style="background: lightgrey"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffb6c1"></td>
+      <td style="text-align: center"><code>lightpink</code></td>
+      <td><code>#ffb6c1</code></td>
+      <td style="background: lightpink"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffa07a"></td>
+      <td style="text-align: center"><code>lightsalmon</code></td>
+      <td><code>#ffa07a</code></td>
+      <td style="background: lightsalmon"></td>
+    </tr>
+    <tr>
+      <td style="background: #20b2aa"></td>
+      <td style="text-align: center"><code>lightseagreen</code></td>
+      <td><code>#20b2aa</code></td>
+      <td style="background: lightseagreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #87cefa"></td>
+      <td style="text-align: center"><code>lightskyblue</code></td>
+      <td><code>#87cefa</code></td>
+      <td style="background: lightskyblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #778899"></td>
+      <td style="text-align: center"><code>lightslategray</code></td>
+      <td><code>#778899</code></td>
+      <td style="background: lightslategray"></td>
+    </tr>
+    <tr>
+      <td style="background: #778899"></td>
+      <td style="text-align: center"><code>lightslategrey</code></td>
+      <td><code>#778899</code></td>
+      <td style="background: lightslategrey"></td>
+    </tr>
+    <tr>
+      <td style="background: #b0c4de"></td>
+      <td style="text-align: center"><code>lightsteelblue</code></td>
+      <td><code>#b0c4de</code></td>
+      <td style="background: lightsteelblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffffe0"></td>
+      <td style="text-align: center"><code>lightyellow</code></td>
+      <td><code>#ffffe0</code></td>
+      <td style="background: lightyellow"></td>
+    </tr>
+    <tr>
+      <td style="background: #32cd32"></td>
+      <td style="text-align: center"><code>limegreen</code></td>
+      <td><code>#32cd32</code></td>
+      <td style="background: limegreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #faf0e6"></td>
+      <td style="text-align: center"><code>linen</code></td>
+      <td><code>#faf0e6</code></td>
+      <td style="background: linen"></td>
+    </tr>
+    <tr>
+      <td style="background: rgb(255, 0, 255) none repeat scroll 0% 0%"></td>
+      <td style="text-align: center">
+        <code>magenta</code> (synonyme de <code>fuchsia</code>)
+      </td>
+      <td><code>#ff00ff</code></td>
+      <td style="background: magenta none repeat scroll 0% 0%"></td>
+    </tr>
+    <tr>
+      <td style="background: #66cdaa"></td>
+      <td style="text-align: center"><code>mediumaquamarine</code></td>
+      <td><code>#66cdaa</code></td>
+      <td style="background: mediumaquamarine"></td>
+    </tr>
+    <tr>
+      <td style="background: #0000cd"></td>
+      <td style="text-align: center"><code>mediumblue</code></td>
+      <td><code>#0000cd</code></td>
+      <td style="background: mediumblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #ba55d3"></td>
+      <td style="text-align: center"><code>mediumorchid</code></td>
+      <td><code>#ba55d3</code></td>
+      <td style="background: mediumorchid"></td>
+    </tr>
+    <tr>
+      <td style="background: #9370db"></td>
+      <td style="text-align: center"><code>mediumpurple</code></td>
+      <td><code>#9370db</code></td>
+      <td style="background: mediumpurple"></td>
+    </tr>
+    <tr>
+      <td style="background: #3cb371"></td>
+      <td style="text-align: center"><code>mediumseagreen</code></td>
+      <td><code>#3cb371</code></td>
+      <td style="background: mediumseagreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #7b68ee"></td>
+      <td style="text-align: center"><code>mediumslateblue</code></td>
+      <td><code>#7b68ee</code></td>
+      <td style="background: mediumslateblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #00fa9a"></td>
+      <td style="text-align: center"><code>mediumspringgreen</code></td>
+      <td><code>#00fa9a</code></td>
+      <td style="background: mediumspringgreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #48d1cc"></td>
+      <td style="text-align: center"><code>mediumturquoise</code></td>
+      <td><code>#48d1cc</code></td>
+      <td style="background: mediumturquoise"></td>
+    </tr>
+    <tr>
+      <td style="background: #c71585"></td>
+      <td style="text-align: center"><code>mediumvioletred</code></td>
+      <td><code>#c71585</code></td>
+      <td style="background: mediumvioletred"></td>
+    </tr>
+    <tr>
+      <td style="background: #191970"></td>
+      <td style="text-align: center"><code>midnightblue</code></td>
+      <td><code>#191970</code></td>
+      <td style="background: midnightblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #f5fffa"></td>
+      <td style="text-align: center"><code>mintcream</code></td>
+      <td><code>#f5fffa</code></td>
+      <td style="background: mintcream"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffe4e1"></td>
+      <td style="text-align: center"><code>mistyrose</code></td>
+      <td><code>#ffe4e1</code></td>
+      <td style="background: mistyrose"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffe4b5"></td>
+      <td style="text-align: center"><code>moccasin</code></td>
+      <td><code>#ffe4b5</code></td>
+      <td style="background: moccasin"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffdead"></td>
+      <td style="text-align: center"><code>navajowhite</code></td>
+      <td><code>#ffdead</code></td>
+      <td style="background: navajowhite"></td>
+    </tr>
+    <tr>
+      <td style="background: #fdf5e6"></td>
+      <td style="text-align: center"><code>oldlace</code></td>
+      <td><code>#fdf5e6</code></td>
+      <td style="background: oldlace"></td>
+    </tr>
+    <tr>
+      <td style="background: #6b8e23"></td>
+      <td style="text-align: center"><code>olivedrab</code></td>
+      <td><code>#6b8e23</code></td>
+      <td style="background: olivedrab"></td>
+    </tr>
+    <tr>
+      <td style="background: #ff4500"></td>
+      <td style="text-align: center"><code>orangered</code></td>
+      <td><code>#ff4500</code></td>
+      <td style="background: orangered"></td>
+    </tr>
+    <tr>
+      <td style="background: #da70d6"></td>
+      <td style="text-align: center"><code>orchid</code></td>
+      <td><code>#da70d6</code></td>
+      <td style="background: orchid"></td>
+    </tr>
+    <tr>
+      <td style="background: #eee8aa"></td>
+      <td style="text-align: center"><code>palegoldenrod</code></td>
+      <td><code>#eee8aa</code></td>
+      <td style="background: palegoldenrod"></td>
+    </tr>
+    <tr>
+      <td style="background: #98fb98"></td>
+      <td style="text-align: center"><code>palegreen</code></td>
+      <td><code>#98fb98</code></td>
+      <td style="background: palegreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #afeeee"></td>
+      <td style="text-align: center"><code>paleturquoise</code></td>
+      <td><code>#afeeee</code></td>
+      <td style="background: paleturquoise"></td>
+    </tr>
+    <tr>
+      <td style="background: #db7093"></td>
+      <td style="text-align: center"><code>palevioletred</code></td>
+      <td><code>#db7093</code></td>
+      <td style="background: palevioletred"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffefd5"></td>
+      <td style="text-align: center"><code>papayawhip</code></td>
+      <td><code>#ffefd5</code></td>
+      <td style="background: papayawhip"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffdab9"></td>
+      <td style="text-align: center"><code>peachpuff</code></td>
+      <td><code>#ffdab9</code></td>
+      <td style="background: peachpuff"></td>
+    </tr>
+    <tr>
+      <td style="background: #cd853f"></td>
+      <td style="text-align: center"><code>peru</code></td>
+      <td><code>#cd853f</code></td>
+      <td style="background: peru"></td>
+    </tr>
+    <tr>
+      <td style="background: #ffc0cb"></td>
+      <td style="text-align: center"><code>pink</code></td>
+      <td><code>#ffc0cb</code></td>
+      <td style="background: pink"></td>
+    </tr>
+    <tr>
+      <td style="background: #dda0dd"></td>
+      <td style="text-align: center"><code>plum</code></td>
+      <td><code>#dda0dd</code></td>
+      <td style="background: plum"></td>
+    </tr>
+    <tr>
+      <td style="background: #b0e0e6"></td>
+      <td style="text-align: center"><code>powderblue</code></td>
+      <td><code>#b0e0e6</code></td>
+      <td style="background: powderblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #bc8f8f"></td>
+      <td style="text-align: center"><code>rosybrown</code></td>
+      <td><code>#bc8f8f</code></td>
+      <td style="background: rosybrown"></td>
+    </tr>
+    <tr>
+      <td style="background: #4169e1"></td>
+      <td style="text-align: center"><code>royalblue</code></td>
+      <td><code>#4169e1</code></td>
+      <td style="background: royalblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #8b4513"></td>
+      <td style="text-align: center"><code>saddlebrown</code></td>
+      <td><code>#8b4513</code></td>
+      <td style="background: saddlebrown"></td>
+    </tr>
+    <tr>
+      <td style="background: #fa8072"></td>
+      <td style="text-align: center"><code>salmon</code></td>
+      <td><code>#fa8072</code></td>
+      <td style="background: salmon"></td>
+    </tr>
+    <tr>
+      <td style="background: #f4a460"></td>
+      <td style="text-align: center"><code>sandybrown</code></td>
+      <td><code>#f4a460</code></td>
+      <td style="background: sandybrown"></td>
+    </tr>
+    <tr>
+      <td style="background: #2e8b57"></td>
+      <td style="text-align: center"><code>seagreen</code></td>
+      <td><code>#2e8b57</code></td>
+      <td style="background: seagreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #fff5ee"></td>
+      <td style="text-align: center"><code>seashell</code></td>
+      <td><code>#fff5ee</code></td>
+      <td style="background: seashell"></td>
+    </tr>
+    <tr>
+      <td style="background: #a0522d"></td>
+      <td style="text-align: center"><code>sienna</code></td>
+      <td><code>#a0522d</code></td>
+      <td style="background: sienna"></td>
+    </tr>
+    <tr>
+      <td style="background: #87ceeb"></td>
+      <td style="text-align: center"><code>skyblue</code></td>
+      <td><code>#87ceeb</code></td>
+      <td style="background: skyblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #6a5acd"></td>
+      <td style="text-align: center"><code>slateblue</code></td>
+      <td><code>#6a5acd</code></td>
+      <td style="background: slateblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #708090"></td>
+      <td style="text-align: center"><code>slategray</code></td>
+      <td><code>#708090</code></td>
+      <td style="background: slategray"></td>
+    </tr>
+    <tr>
+      <td style="background: #708090"></td>
+      <td style="text-align: center"><code>slategrey</code></td>
+      <td><code>#708090</code></td>
+      <td style="background: slategrey"></td>
+    </tr>
+    <tr>
+      <td style="background: #fffafa"></td>
+      <td style="text-align: center"><code>snow</code></td>
+      <td><code>#fffafa</code></td>
+      <td style="background: snow"></td>
+    </tr>
+    <tr>
+      <td style="background: #00ff7f"></td>
+      <td style="text-align: center"><code>springgreen</code></td>
+      <td><code>#00ff7f</code></td>
+      <td style="background: springgreen"></td>
+    </tr>
+    <tr>
+      <td style="background: #4682b4"></td>
+      <td style="text-align: center"><code>steelblue</code></td>
+      <td><code>#4682b4</code></td>
+      <td style="background: steelblue"></td>
+    </tr>
+    <tr>
+      <td style="background: #d2b48c"></td>
+      <td style="text-align: center"><code>tan</code></td>
+      <td><code>#d2b48c</code></td>
+      <td style="background: tan"></td>
+    </tr>
+    <tr>
+      <td style="background: #d8bfd8"></td>
+      <td style="text-align: center"><code>thistle</code></td>
+      <td><code>#d8bfd8</code></td>
+      <td style="background: thistle"></td>
+    </tr>
+    <tr>
+      <td style="background: #ff6347"></td>
+      <td style="text-align: center"><code>tomato</code></td>
+      <td><code>#ff6347</code></td>
+      <td style="background: tomato"></td>
+    </tr>
+    <tr>
+      <td style="background: #40e0d0"></td>
+      <td style="text-align: center"><code>turquoise</code></td>
+      <td><code>#40e0d0</code></td>
+      <td style="background: turquoise"></td>
+    </tr>
+    <tr>
+      <td style="background: #ee82ee"></td>
+      <td style="text-align: center"><code>violet</code></td>
+      <td><code>#ee82ee</code></td>
+      <td style="background: violet"></td>
+    </tr>
+    <tr>
+      <td style="background: #f5deb3"></td>
+      <td style="text-align: center"><code>wheat</code></td>
+      <td><code>#f5deb3</code></td>
+      <td style="background: wheat"></td>
+    </tr>
+    <tr>
+      <td style="background: #f5f5f5"></td>
+      <td style="text-align: center"><code>whitesmoke</code></td>
+      <td><code>#f5f5f5</code></td>
+      <td style="background: whitesmoke"></td>
+    </tr>
+    <tr>
+      <td style="background: #9acd32"></td>
+      <td style="text-align: center"><code>yellowgreen</code></td>
+      <td><code>#9acd32</code></td>
+      <td style="background: yellowgreen"></td>
+    </tr>
+    <tr>
+      <td>{{SpecName("CSS4 Colors")}}</td>
+      <td style="background: #639"></td>
+      <td style="text-align: center"><code>rebeccapurple</code></td>
+      <td><code>#663399</code></td>
+      <td style="background: rebeccapurple"></td>
+    </tr>
+  </tbody>
 </table>
 
-<p>La couleur <code>rebeccapurple</code> est équivalente à la couleur <code>#639</code>. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « <a href="https://codepen.io/trezy/blog/honoring-a-great-man">Honorer un grand homme</a> » (en anglais).</p>
+La couleur `rebeccapurple` est équivalente à la couleur `#639`. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « [Honorer un grand homme](https://codepen.io/trezy/blog/honoring-a-great-man) » (en anglais).
 
-<h3 id="Le_mot-clé_transparent">Le mot-clé <code>transparent</code></h3>
+### Le mot-clé `transparent`
 
-<p><code>transparent</code> est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : <code>rgba(0,0,0,0)</code>.</p>
+`transparent` est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : `rgba(0,0,0,0)`.
 
-<div class="note">
-<p><strong>Note :</strong> Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">la spécification W3C indique que <code>transparent</code> devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha</a>. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur <code>alpha</code> de 0.</p>
-</div>
+> **Note :** Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, [la spécification W3C indique que `transparent` devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha](https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax). Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur `alpha` de 0.
 
-<div class="note">
-  <p><strong>Note :</strong> Historiquement, le mot-clé <code>transparent</code> n'était pas une valeur de type <code>&lt;color&gt;</code> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via <a href="https://fr.wikipedia.org/wiki/Alpha_blending">les canaux alpha</a>, <code>transparent</code> a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <code>&lt;color&gt;</code> est nécessaire (la propriété {{cssxref("color")}} par exemple).</p></div>
+> **Note :** Historiquement, le mot-clé `transparent` n'était pas une valeur de type `<color>` pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via [les canaux alpha](https://fr.wikipedia.org/wiki/Alpha_blending), `transparent` a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur `<color>` est nécessaire (la propriété {{cssxref("color")}} par exemple).
 
-<h3 id="Le_mot-clé_currentColor">Le mot-clé <code>currentColor</code></h3>
+### Le mot-clé `currentColor`
 
-<p>Le mot-clé <code>currentColor</code> représente <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> de la propriété {{cssxref("color")}} pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.</p>
+Le mot-clé `currentColor` représente [la valeur calculée](/fr/docs/Web/CSS/Valeur_calcul%C3%A9e) de la propriété {{cssxref("color")}} pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.
 
-<p>Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété {{cssxref("color")}} de l'élément. Cela sera alors équivalent au mot-clé {{cssxref("inherit")}}.</p>
+Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété {{cssxref("color")}} de l'élément. Cela sera alors équivalent au mot-clé {{cssxref("inherit")}}.
 
-<p>Si <code>currentColor</code> est utilisée comme valeur pour la propriété <code>color</code>, sa valeur est déterminée à partir de la valeur héritée pour la propriété <code>color</code>.</p>
+Si `currentColor` est utilisée comme valeur pour la propriété `color`, sa valeur est déterminée à partir de la valeur héritée pour la propriété `color`.
 
-<h4 id="Exemples">Exemples</h4>
+#### Exemples
 
-<p>La couleur de la ligne prend la couleur héritée depuis son élément parent.</p>
+La couleur de la ligne prend la couleur héritée depuis son élément parent.
 
-<div>
-<h5 id="Exemple_live_n°1">Exemple <em>live</em> n°1</h5>
+##### Exemple _live_ n°1
 
-<pre class="brush: html">&lt;div style="color:darkred"&gt;
+```html
+<div style="color:darkred">
  La couleur de ce texte est bleu.
-  &lt;div style="background:currentColor; height:1px"&gt;&lt;/div&gt;
+  <div style="background:currentColor; height:1px"></div>
  Un peu de texte.
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<p>{{EmbedLiveSample('Exemple_live_n°1')}}</p>
+{{EmbedLiveSample('Exemple_live_n°1')}}
 
-<h5 id="Exemple_live_n°2">Exemple <em>live</em> n°2</h5>
+##### Exemple _live_ n°2
 
-<pre class="brush: html">&lt;div style="color:blue; border-bottom: 1px dashed currentColor;"&gt;
+```html
+<div style="color:blue; border-bottom: 1px dashed currentColor;">
  La couleur de ce texte est bleu :
-  &lt;div style="background:currentColor; height:1px"&gt;&lt;/div&gt;
+  <div style="background:currentColor; height:1px"></div>
  Un peu de texte.
-&lt;/div&gt; </pre>
-
-<p>{{EmbedLiveSample('Exemple_live_n°2')}}</p>
 </div>
+```
 
-<h3 id="Les_couleurs_RGB">Les couleurs RGB</h3>
+{{EmbedLiveSample('Exemple_live_n°2')}}
 
-<p>Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.</p>
+### Les couleurs RGB
 
-<h4 id="Syntaxe_2">Syntaxe</h4>
+Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.
 
-<p>Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec <code>#</code>) ou avec des notations fonctionnelles (<code>rgb()</code> ou <code>rgba()</code>).</p>
+#### Syntaxe
 
-<div class="note">
-<p><strong>Note :</strong> Dans la spécification du module CSS Color de niveau 4, <code>rgba()</code> a été définie comme une fonction historique dont la grammaire et le comportement est le même que <code>rgb()</code>. C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.</p>
-</div>
+Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec `#`) ou avec des notations fonctionnelles (`rgb()` ou `rgba()`).
 
-<dl>
- <dt>Notation hexadécimale : <code>#RRGGBB[AA]</code></dt>
- <dd>Le signe « <code>#</code> » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.</dd>
- <dt>Notation hexadécimale : <code>#RGB[A]</code></dt>
- <dd>le signe « <code>#</code> » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.</dd>
- <dt>Notation fonctionnelle avec des virgules : <code>rgb(R, G, B[, A])</code> ou <code>rgba(R, G, B, A)</code></dt>
- <dd>Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction <code>rgb()</code>). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres ({{cssxref("&lt;number&gt;")}}) ou des pourcentages ({{cssxref("&lt;percentage&gt;")}}) (ex. <code>rgb(1e2, .5e1, .5e0, +.25e2%)</code>).</dd>
- <dt>Notation fonctionnelle : <code>rgb(R G B[ / A])</code> ou <code>rgba(R G B / A)</code></dt>
- <dd>Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification <em>CSS Colors Level 4</em>.</dd>
-</dl>
+> **Note :** Dans la spécification du module CSS Color de niveau 4, `rgba()` a été définie comme une fonction historique dont la grammaire et le comportement est le même que `rgb()`. C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.
 
-<h4 id="Exemples_2">Exemples</h4>
+- Notation hexadécimale : `#RRGGBB[AA]`
+  - : Le signe « `#` » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.
+- Notation hexadécimale : `#RGB[A]`
+  - : le signe « `#` » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.
+- Notation fonctionnelle avec des virgules : `rgb(R, G, B[, A])` ou `rgba(R, G, B, A)`
+  - : Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction `rgb()`). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres ({{cssxref("&lt;number&gt;")}}) ou des pourcentages ({{cssxref("&lt;percentage&gt;")}}) (ex. `rgb(1e2, .5e1, .5e0, +.25e2%)`).
+- Notation fonctionnelle : `rgb(R G B[ / A])` ou `rgba(R G B / A)`
+  - : Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification _CSS Colors Level 4_.
 
-<h5 id="Les_différentes_variantes_pour_la_syntaxe_RGB">Les différentes variantes pour la syntaxe RGB</h5>
+#### Exemples
 
-<pre class="plain">/* Ces exemples définissent tous la même couleur */
+##### Les différentes variantes pour la syntaxe RGB
+
+```plain
+/* Ces exemples définissent tous la même couleur */
 #f03
 #F03
 #ff0033
@@ -1056,12 +1044,13 @@ rgb(255, 0, 51)
 rgb(255, 0, 51.0)
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
-<s>rgb(100%, 0, 20%)</s> /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */
-</pre>
+rgb(100%, 0, 20%) /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */
+```
 
-<h5 id="RGBa">RGBa</h5>
+##### RGBa
 
-<pre class="brush: css">/* Notation hexadécimale */
+```css
+/* Notation hexadécimale */
 #f030               /*   0% opacité - rouge */
 #F03F               /* 100% opacité - rouge */
 #ff003300           /*   0% opacité - rouge */
@@ -1079,42 +1068,38 @@ rgba(1e2, .5e1, .5e0, +.25e2%)
 
 /* Notation avec un espace */
 rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
-rgba(255 0 0 / 40%) /* 40% opacité - rouge */</pre>
+rgba(255 0 0 / 40%) /* 40% opacité - rouge */
+```
 
-<h3 id="Les_couleurs_HSL">Les couleurs HSL</h3>
+### Les couleurs HSL
 
-<p>Les couleurs peuvent également être définies selon le modèle HSL (pour <em>Hue-Saturation-Lightness</em> qui signifie teinte-saturation-clarté).</p>
+Les couleurs peuvent également être définies selon le modèle HSL (pour _Hue-Saturation-Lightness_ qui signifie teinte-saturation-clarté).
 
-<p>HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).</p>
+HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).
 
-<h4 id="Syntaxe_3">Syntaxe</h4>
+#### Syntaxe
 
-<p>Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles <code>hsl()</code> ou <code>hsla()</code>.</p>
+Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles `hsl()` ou `hsla()`.
 
-<div class="note">
-<p><strong>Note :</strong> Dans la spécification du module CSS Color de niveau 4, <code>hsla()</code> a été définie comme une fonction historique dont la grammaire et le comportement est le même que <code>hsl()</code>. C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.</p>
-</div>
+> **Note :** Dans la spécification du module CSS Color de niveau 4, `hsla()` a été définie comme une fonction historique dont la grammaire et le comportement est le même que `hsl()`. C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.
+
+- Notation fonctionnelle : `hsl(H, S, L,[, A])` ou `hsla(H, S, L, A)`
+
+  - : **La valeur H correspond à la teinte (_hue_)** et est représentée comme un angle {{cssxref("&lt;angle&gt;")}} sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, **le rouge correspond à 0 et 360** et les autres couleurs évoluent sur le cercle. **Vert correspond à 120 et bleu à 240**. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).
 
-<dl>
- <dt>Notation fonctionnelle : <code>hsl(H, S, L,[, A])</code> ou <code>hsla(H, S, L, A)</code></dt>
- <dd>
- <p><strong>La valeur H correspond à la teinte (<em>hue</em>) </strong>et est représentée comme un angle {{cssxref("&lt;angle&gt;")}} sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, <strong>le rouge correspond à 0 et 360</strong> et les autres couleurs évoluent sur le cercle. <strong>Vert correspond à 120 et bleu à 240</strong>. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).</p>
+    **La valeur S correspond à la saturation** (_saturation_) et **la valeur L correspond à la clarté (_lightness_)**, ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec `100%` l'image sera complètement saturée et avec `0%`, l'image sera en nuances de gris. Pour la clarté, `100%` correspondra à du blanc et `0%` à du noir. `50%` agira comme une clarté « normale ».
 
- <p><strong>La valeur S correspond à la saturation</strong> (<em>saturation</em>) et <strong>la valeur L correspond à la clarté (<em>lightness</em>)</strong>, ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec <code>100%</code> l'image sera complètement saturée et avec <code>0%</code>, l'image sera en nuances de gris. Pour la clarté, <code>100%</code> correspondra à du blanc et <code>0%</code> à du noir. <code>50%</code> agira comme une clarté « normale ».</p>
+    **La valeur A** (canal alpha) peut être un nombre (type {{cssxref("&lt;number&gt;")}} entre 0 et 1 ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}} (la valeur `100%` correspond alors à la valeur numérique 1 : opacité complète).
 
- <p><strong>La valeur A</strong> (canal alpha) peut être un nombre (type {{cssxref("&lt;number&gt;")}} entre 0 et 1 ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}} (la valeur <code>100%</code> correspond alors à la valeur numérique 1 : opacité complète).</p>
- </dd>
- <dt>Notation fonctionnelle : <code>hsl(H S L[ / A])</code> ou <code>hsla(H S L / A)</code></dt>
- <dd>
- <p>Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.</p>
- </dd>
-</dl>
+- Notation fonctionnelle : `hsl(H S L[ / A])` ou `hsla(H S L / A)`
+  - : Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.
 
-<h4 id="Exemples_3">Exemples</h4>
+#### Exemples
 
-<h5 id="HSL">HSL</h5>
+##### HSL
 
-<pre class="brush: css">hsl(0,  100%,50%)   /* red */
+```css
+hsl(0,  100%,50%)   /* red */
 hsl(30, 100%,50%)
 hsl(60, 100%,50%)
 hsl(90, 100%,50%)
@@ -1152,11 +1137,12 @@ hsl(240,100%,50%,0.05)   /* 5% opaque blue */
 hsl(240,100%,50%,5%)     /* 5% opaque blue with percentage value for alpha */
 hsl(240 100% 50% / 0.05) /* 5% opaque blue */
 hsl(240 100% 50% / 5%)   /* 5% opaque blue with percentage value for alpha */
-</pre>
+```
 
-<h5 id="HSLa">HSLa</h5>
+##### HSLa
 
-<pre class="brush: css">hsla(240,100%,50%,0.05)  /* 5% opaque blue */
+```css
+hsla(240,100%,50%,0.05)  /* 5% opaque blue */
 hsla(240,100%,50%, 0.4)  /* 40% opaque blue */
 hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
 hsla(240,100%,50%,   1)  /* full opaque blue */
@@ -1171,198 +1157,217 @@ hsla(240 100% 50% / 5%)/* 5% opaque blue */
 /* les unités rad, grad et turn*/
 /* sont également acceptées */
 hsla(240deg 100% 50% / 5%)/* 5% opaque blue */
-hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre>
-
-<h3 id="Couleurs_système">Couleurs système</h3>
-
-<p>Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).</p>
-
-<dl>
- <dt>ActiveBorder</dt>
- <dd>La bordure de la fenêtre active.</dd>
- <dt>ActiveCaption</dt>
- <dd>La légende de la fenêtre active. Devrait être utilisé avec <code>CaptionText</code> comme couleur de premier-plan.</dd>
- <dt>AppWorkspace</dt>
- <dd>La couleur d'arrière-plan d'une interface avec plusieurs documents.</dd>
- <dt>Background</dt>
- <dd>L'arrière-plan du bureau.</dd>
- <dt>ButtonFace</dt>
- <dd>La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec <code>ButtonText</code> comme couleur de premier-plan.</dd>
- <dt>ButtonHighlight</dt>
- <dd>La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.</dd>
- <dt>ButtonShadow</dt>
- <dd>La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..</dd>
- <dt>ButtonText</dt>
- <dd>La couleur du texte sur les bouttons. Devrait être utilisée avec <code>ButtonFace</code> ou <code>ThreeDFace</code> comme couleur d'arrière-plan.</dd>
- <dt>CaptionText</dt>
- <dd>La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec <code>ActiveCaption</code> comme couleur d'arrière-plan.</dd>
- <dt>GrayText</dt>
- <dd>Texte (désactivé) en gris.</dd>
- <dt>Highlight</dt>
- <dd>La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec <code>HighlightText</code> comme couleur de premier-plan.</dd>
- <dt>HighlightText</dt>
- <dd>La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec <code>Highlight</code> comme couleur d'arrière-plan.</dd>
- <dt>InactiveBorder</dt>
- <dd>La couleur de la bordure d'une fenêtre inactive.</dd>
- <dt>InactiveCaption</dt>
- <dd>La couleur de la légende de fenêtre inactive. Devrait être utilisée avec <code>InactiveCaptionText</code> comme couleur de premier-plan.</dd>
- <dt>InactiveCaptionText</dt>
- <dd>La couleur du texte pour une légende inactive. Devrait être utilisée avec <code>InactiveCaption</code> comme couleur d'arrière-plan.</dd>
- <dt>InfoBackground</dt>
- <dd>La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec <code>InfoText</code> comme couleur de premier-plan.</dd>
- <dt>InfoText</dt>
- <dd>La couleur du texte pour les bulles d'informations. Devrait être utilisée avec <code>InfoBackground</code> comme couleur d'arrière-plan.</dd>
- <dt>Menu</dt>
- <dd>La couleur d'arrière-plan du menu. Devrait être utilisée avec <code>MenuText</code> ou <code>-moz-MenuBarText</code> comme couleur de premier-plan.</dd>
- <dt>MenuText</dt>
- <dd>La couleur du texte dans les menus. Devrait être utilisée avec <code>Menu</code> comme couleur d'arrière-plan.</dd>
- <dt>Scrollbar</dt>
- <dd>La couleur d'arrière-plan de la barre de défilement (ascenseur).</dd>
- <dt>ThreeDDarkShadow</dt>
- <dd>La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
- <dt>ThreeDFace</dt>
- <dd>La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec <code>ButtonText</code> comme couleur de premier-plan.</dd>
- <dt>ThreeDHighlight</dt>
- <dd>La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
- <dt>ThreeDLightShadow</dt>
- <dd>La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
- <dt>ThreeDShadow</dt>
- <dd>La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
- <dt>Window</dt>
- <dd>La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur <code>WindowText</code> en premier plan.</dd>
- <dt>WindowFrame</dt>
- <dd>La couleur du cadre de la fenêtre.</dd>
- <dt>WindowText</dt>
- <dd>La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur <code>Window</code> en arrière-plan.</dd>
-</dl>
-
-<h3 id="Ajouts_propres_à_Mozilla_pour_les_couleurs_système">Ajouts propres à Mozilla pour les couleurs système</h3>
-
-<dl>
- <dt>-moz-ButtonDefault</dt>
- <dd>La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.</dd>
- <dt>-moz-ButtonHoverFace</dt>
- <dd>La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait <code>ThreeDFace</code> ou <code>ButtonFace</code> lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec <code>-moz-ButtonHoverText</code> comme couleur de premier-plan.</dd>
- <dt>-moz-ButtonHoverText</dt>
- <dd>La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec<code>-moz-ButtonHoverFace</code> comme couleur d'arrière-plan.</dd>
- <dt>-moz-CellHighlight</dt>
- <dd>La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec <code>-moz-CellHighlightText</code> comme couleur de premier-plan. Voir aussi <code>-moz-html-CellHighlight</code>.</dd>
- <dt>-moz-CellHighlightText</dt>
- <dd>La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec <code>-moz-CellHighlight</code> comme couleur d'arrière-plan. Voir aussi <code>-moz-html-CellHighlightText</code>.</dd>
- <dt>-moz-Combobox</dt>
- <dd> La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec <code>-moz-ComboboxText</code> comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-Field</code> à la place.</dd>
- <dt>-moz-ComboboxText</dt>
- <dd> La couleur du texte pour les listes déroulantes. Devrait être utilisée avec <code>-moz-Combobox</code> comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-FieldText</code> à la place.</dd>
- <dt>-moz-Dialog</dt>
- <dd>La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec <code>-moz-DialogText</code> comme couleur de premier-plan.</dd>
- <dt>-moz-DialogText</dt>
- <dd>La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec <code>-moz-Dialog</code> comme couleur d'arrière-plan.</dd>
- <dt>-moz-dragtargetzone</dt>
- <dt>-moz-EvenTreeRow</dt>
- <dd> La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-OddTreeRow</code>.</dd>
- <dt>-moz-Field</dt>
- <dd>La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec <code>-moz-FieldText</code> comme couleur de premier-plan.</dd>
- <dt>-moz-FieldText</dt>
- <dd>La couleur du texte pour les champs texte. Devrait être utilisée avec <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, ou <code>-moz-OddTreeRow</code> comme couleur d'arrière-plan.</dd>
- <dt>-moz-html-CellHighlight</dt>
- <dd> La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlightText</code> comme couleur de premier-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlight</code>.</dd>
- <dt>-moz-html-CellHighlightText</dt>
- <dd> La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlight</code> comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlightText</code>.</dd>
- <dt>-moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow</dt>
- <dd><p>Couleurs d'accentuation.</p></dd>
- <dt>-moz-mac-chrome-active, -moz-mac-chrome-inactive</dt>
- <dd>Couleurs pour les éléments de chrome actifs/inactifs</dd>
- <dt>-moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover</dt>
- <dd>La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à <code>Highlight</code>. Devrait être utilisée avec <code>-moz-MenuHoverText</code> ou <code>-moz-MenuBarHoverText</code> comme couleur de premier-plan.</dd>
- <dt>-moz-MenuHoverText</dt>
- <dd>La couleur du texte pour les éléments de menu survolés. Généralement similaire à <code>HighlightText</code>. Devrait être utilisée avec <code>-moz-MenuHover</code> comme couleur d'arrière-plan.</dd>
- <dt>-moz-MenuBarText</dt>
- <dd> La couleur du texte dans les barres de menu. Généralement similaire à <code>MenuText</code>. Devrait être utilisée avec <code>Menu</code> comme couleur d'arrière-plan.</dd>
- <dt>-moz-MenuBarHoverText</dt>
- <dd>La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à <code>-moz-MenuHoverText</code>. Devrait être utilisée avec <code>-moz-MenuHover</code> comme couleur d'arrière-plan.</dd>
- <dt>-moz-nativehyperlinktext</dt>
- <dd> La couleur par défaut de la plate-forme pour les hyperliens.</dd>
- <dt>-moz-OddTreeRow</dt>
- <dd> La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-EvenTreeRow</code>.</dd>
- <dt>-moz-win-accentcolor</dt>
- <dd> Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.</dd>
- <dt>-moz-win-accentcolortext</dt>
- <dd> Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.</dd>
- <dt>-moz-win-communicationstext</dt>
- <dd> Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("appearance")}}: -moz-win-communications-toolbox;</code>.</dd>
- <dt>-moz-win-mediatext</dt>
- <dd> Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("appearance")}}: -moz-win-media-toolbox</code>.</dd>
-</dl>
-
-<h3 id="Ajout_de_Mozilla_pour_les_couleurs_liées_aux_préférences">Ajout de Mozilla pour les couleurs liées aux préférences</h3>
-
-<dl>
- <dt>-moz-activehyperlinktext</dt>
- <dd>La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd>
- <dt>-moz-default-background-color</dt>
- <dd> La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.</dd>
- <dt>-moz-default-color</dt>
- <dd> La couleur choisie par l'utilisateur pour la couleur du texte.</dd>
- <dt>-moz-hyperlinktext</dt>
- <dd>La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd>
- <dt>-moz-visitedhyperlinktext</dt>
- <dd>La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd>
-</dl>
-
-<h2 id="Interpolation">Interpolation</h2>
-
-<p>Les valeurs de type <code>&lt;color&gt;</code> peuvent être interpolées afin de créer des animations ou des dégradés (type <code>&lt;gradient&gt;</code>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">l'espace de couleurs alpha sRGBA prémultiplié</a> afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon <a href="/fr/docs/Web/CSS/easing-function">la fonction de temporisation</a> associée à l'animation.</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>La recommandation du W3C : <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast">Ies couleurs et le contraste</a> pour plus d'informations).</p>
-
-<h2 id="Spécifications">Spécifications</h2>
+hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
+```
+
+### Couleurs système
+
+Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).
+
+- ActiveBorder
+  - : La bordure de la fenêtre active.
+- ActiveCaption
+  - : La légende de la fenêtre active. Devrait être utilisé avec `CaptionText` comme couleur de premier-plan.
+- AppWorkspace
+  - : La couleur d'arrière-plan d'une interface avec plusieurs documents.
+- Background
+  - : L'arrière-plan du bureau.
+- ButtonFace
+  - : La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec `ButtonText` comme couleur de premier-plan.
+- ButtonHighlight
+  - : La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.
+- ButtonShadow
+  - : La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..
+- ButtonText
+  - : La couleur du texte sur les bouttons. Devrait être utilisée avec `ButtonFace` ou `ThreeDFace` comme couleur d'arrière-plan.
+- CaptionText
+  - : La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec `ActiveCaption` comme couleur d'arrière-plan.
+- GrayText
+  - : Texte (désactivé) en gris.
+- Highlight
+  - : La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec `HighlightText` comme couleur de premier-plan.
+- HighlightText
+  - : La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec `Highlight` comme couleur d'arrière-plan.
+- InactiveBorder
+  - : La couleur de la bordure d'une fenêtre inactive.
+- InactiveCaption
+  - : La couleur de la légende de fenêtre inactive. Devrait être utilisée avec `InactiveCaptionText` comme couleur de premier-plan.
+- InactiveCaptionText
+  - : La couleur du texte pour une légende inactive. Devrait être utilisée avec `InactiveCaption` comme couleur d'arrière-plan.
+- InfoBackground
+  - : La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec `InfoText` comme couleur de premier-plan.
+- InfoText
+  - : La couleur du texte pour les bulles d'informations. Devrait être utilisée avec `InfoBackground` comme couleur d'arrière-plan.
+- Menu
+  - : La couleur d'arrière-plan du menu. Devrait être utilisée avec `MenuText` ou `-moz-MenuBarText` comme couleur de premier-plan.
+- MenuText
+  - : La couleur du texte dans les menus. Devrait être utilisée avec `Menu` comme couleur d'arrière-plan.
+- Scrollbar
+  - : La couleur d'arrière-plan de la barre de défilement (ascenseur).
+- ThreeDDarkShadow
+  - : La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+- ThreeDFace
+  - : La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec `ButtonText` comme couleur de premier-plan.
+- ThreeDHighlight
+  - : La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+- ThreeDLightShadow
+  - : La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+- ThreeDShadow
+  - : La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+- Window
+  - : La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur `WindowText` en premier plan.
+- WindowFrame
+  - : La couleur du cadre de la fenêtre.
+- WindowText
+  - : La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur `Window` en arrière-plan.
+
+### Ajouts propres à Mozilla pour les couleurs système
+
+- \-moz-ButtonDefault
+  - : La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.
+- \-moz-ButtonHoverFace
+  - : La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait `ThreeDFace` ou `ButtonFace` lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec `-moz-ButtonHoverText` comme couleur de premier-plan.
+- \-moz-ButtonHoverText
+  - : La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec`-moz-ButtonHoverFace` comme couleur d'arrière-plan.
+- \-moz-CellHighlight
+  - : La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec `-moz-CellHighlightText` comme couleur de premier-plan. Voir aussi `-moz-html-CellHighlight`.
+- \-moz-CellHighlightText
+  - : La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec `-moz-CellHighlight` comme couleur d'arrière-plan. Voir aussi `-moz-html-CellHighlightText`.
+- \-moz-Combobox
+  - : La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec `-moz-ComboboxText` comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera `-moz-Field` à la place.
+- \-moz-ComboboxText
+  - : La couleur du texte pour les listes déroulantes. Devrait être utilisée avec `-moz-Combobox` comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera `-moz-FieldText` à la place.
+- \-moz-Dialog
+  - : La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec `-moz-DialogText` comme couleur de premier-plan.
+- \-moz-DialogText
+  - : La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec `-moz-Dialog` comme couleur d'arrière-plan.
+- \-moz-dragtargetzone
+
+  \-moz-EvenTreeRow
+
+  - : La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec`-moz-FieldText` comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera `-moz-Field`. Voir aussi `-moz-OddTreeRow`.
+
+- \-moz-Field
+  - : La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec `-moz-FieldText` comme couleur de premier-plan.
+- \-moz-FieldText
+  - : La couleur du texte pour les champs texte. Devrait être utilisée avec `-moz-Field`, `-moz-EvenTreeRow`, ou `-moz-OddTreeRow` comme couleur d'arrière-plan.
+- \-moz-html-CellHighlight
+  - : La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec `-moz-html-CellHighlightText` comme couleur de premier-plan. Avant Gecko 1.9, on utilisera `-moz-CellHighlight`.
+- \-moz-html-CellHighlightText
+  - : La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec `-moz-html-CellHighlight` comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera `-moz-CellHighlightText`.
+- \-moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow
+  - : Couleurs d'accentuation.
+- \-moz-mac-chrome-active, -moz-mac-chrome-inactive
+  - : Couleurs pour les éléments de chrome actifs/inactifs
+- \-moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover
+  - : La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à `Highlight`. Devrait être utilisée avec `-moz-MenuHoverText` ou `-moz-MenuBarHoverText` comme couleur de premier-plan.
+- \-moz-MenuHoverText
+  - : La couleur du texte pour les éléments de menu survolés. Généralement similaire à `HighlightText`. Devrait être utilisée avec `-moz-MenuHover` comme couleur d'arrière-plan.
+- \-moz-MenuBarText
+  - : La couleur du texte dans les barres de menu. Généralement similaire à `MenuText`. Devrait être utilisée avec `Menu` comme couleur d'arrière-plan.
+- \-moz-MenuBarHoverText
+  - : La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à `-moz-MenuHoverText`. Devrait être utilisée avec `-moz-MenuHover` comme couleur d'arrière-plan.
+- \-moz-nativehyperlinktext
+  - : La couleur par défaut de la plate-forme pour les hyperliens.
+- \-moz-OddTreeRow
+  - : La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec`-moz-FieldText` comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera `-moz-Field`. Voir aussi `-moz-EvenTreeRow`.
+- \-moz-win-accentcolor
+  - : Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.
+- \-moz-win-accentcolortext
+  - : Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.
+- \-moz-win-communicationstext
+  - : Devrait être utilisée comme couleur pour les textes des objets pour lesquels `{{cssxref("appearance")}}: -moz-win-communications-toolbox;`.
+- \-moz-win-mediatext
+  - : Devrait être utilisée comme couleur pour les textes des objets pour lesquels `{{cssxref("appearance")}}: -moz-win-media-toolbox`.
+
+### Ajout de Mozilla pour les couleurs liées aux préférences
+
+- \-moz-activehyperlinktext
+  - : La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
+- \-moz-default-background-color
+  - : La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
+- \-moz-default-color
+  - : La couleur choisie par l'utilisateur pour la couleur du texte.
+- \-moz-hyperlinktext
+  - : La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
+- \-moz-visitedhyperlinktext
+  - : La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
+
+## Interpolation
+
+Les valeurs de type `<color>` peuvent être interpolées afin de créer des animations ou des dégradés (type `<gradient>`). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans [l'espace de couleurs alpha sRGBA prémultiplié](https://www.gimp.org/docs/plug-in/appendix-alpha.html) afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon [la fonction de temporisation](/fr/docs/Web/CSS/easing-function) associée à l'animation.
+
+## Accessibilité
+
+La recommandation du W3C : [WCAG 2.0](https://www.w3.org/TR/WCAG/#visual-audio-contrast) conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur [Ies couleurs et le contraste](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast) pour plus d'informations).
+
+## Spécifications
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Colors', '#colorunits', '&lt;color&gt;')}}</td>
-   <td>{{Spec2('CSS4 Colors')}}</td>
-   <td>Ajout de la couleur <code>rebeccapurple</code>, de la notation hexadécimale sur quatre chiffres (<code>#RGBA</code>) et sur huit chiffres (<code>#RRGGBBAA</code>). <code>rgba()</code> et <code>hsla()</code> sont désormais synonymes de <code>rgb()</code> et <code>hsl()</code>, les paramètres des fonctions peuvent être séparés par des espaces plutôt que ds virgules, les valeurs de transparence (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte avec un angle.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}</td>
-   <td>{{Spec2('CSS3 Colors')}}</td>
-   <td>Les couleurs système sont désormais dépréciée. Les couleurs SVG sont ajoutées ainsi que les notations fonctionnelles <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>.</td>
-  </tr>
-  <tr style="vertical-align: top;">
-   <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}</td>
-   <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td>
-   <td style="vertical-align: top;">Ajout de la couleur <code>orange</code> et des couleurs système.</td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}</td>
-   <td style="vertical-align: top;">{{Spec2('CSS1')}}</td>
-   <td style="vertical-align: top;">Définition initiale.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{SpecName('CSS4 Colors', '#colorunits', '&lt;color&gt;')}}
+      </td>
+      <td>{{Spec2('CSS4 Colors')}}</td>
+      <td>
+        Ajout de la couleur <code>rebeccapurple</code>, de la notation
+        hexadécimale sur quatre chiffres (<code>#RGBA</code>) et sur huit
+        chiffres (<code>#RRGGBBAA</code>). <code>rgba()</code> et
+        <code>hsla()</code> sont désormais synonymes de <code>rgb()</code> et
+        <code>hsl()</code>, les paramètres des fonctions peuvent être séparés
+        par des espaces plutôt que ds virgules, les valeurs de transparence
+        (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte
+        avec un angle.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}
+      </td>
+      <td>{{Spec2('CSS3 Colors')}}</td>
+      <td>
+        Les couleurs système sont désormais dépréciée. Les couleurs SVG sont
+        ajoutées ainsi que les notations fonctionnelles <code>rgba()</code>,
+        <code>hsl()</code>, <code>hsla()</code>.
+      </td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td style="vertical-align: top">
+        {{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}
+      </td>
+      <td style="vertical-align: top">{{Spec2('CSS2.1')}}</td>
+      <td style="vertical-align: top">
+        Ajout de la couleur <code>orange</code> et des couleurs système.
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">
+        {{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}
+      </td>
+      <td style="vertical-align: top">{{Spec2('CSS1')}}</td>
+      <td style="vertical-align: top">Définition initiale.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.color")}}</p>
+{{Compat("css.properties.color")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("opacity")}}</li>
- <li>{{cssxref("color")}}</li>
- <li>{{cssxref("background-color")}}</li>
- <li>{{cssxref("border-color")}}</li>
- <li>{{cssxref("outline-color")}}</li>
- <li>{{cssxref("text-shadow")}}</li>
- <li>{{cssxref("box-shadow")}}</li>
-</ul>
+- {{cssxref("opacity")}}
+- {{cssxref("color")}}
+- {{cssxref("background-color")}}
+- {{cssxref("border-color")}}
+- {{cssxref("outline-color")}}
+- {{cssxref("text-shadow")}}
+- {{cssxref("box-shadow")}}
diff --git a/files/fr/web/css/column-count/index.md b/files/fr/web/css/column-count/index.md
index 372e04db1d..20b4a2c367 100644
--- a/files/fr/web/css/column-count/index.md
+++ b/files/fr/web/css/column-count/index.md
@@ -7,52 +7,54 @@ tags:
   - Reference
 translation_of: Web/CSS/column-count
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>column-count</code></strong> décrit le nombre de colonnes d'un élément lorsqu'on utilise une disposition en colonnes.</p>
+La propriété **`column-count`** décrit le nombre de colonnes d'un élément lorsqu'on utilise une disposition en colonnes.
 
-<div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div>
+{{EmbedInteractiveExample("pages/css/column-count.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 column-count: auto;
 
 /* Valeurs numériques */
-/* Type &lt;number&gt; */
+/* Type <number> */
 column-count: 3;
 
 /* Valeurs globales */
 column-count: inherit;
 column-count: initial;
 column-count: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique que le nombre de colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de {{cssxref("column-width")}}).</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Un nombre (type {{cssxref("&lt;integer&gt;")}}) strictement positif qui décrit le nombre idéal de colonnes avec lequel répartir le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas <code>auto</code>, cette propriété indique simplement le nombre maximal de colonnes autorisé.</dd>
-</dl>
+- `auto`
+  - : Un mot-clé qui indique que le nombre de colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de {{cssxref("column-width")}}).
+- `<number>`
+  - : Un nombre (type {{cssxref("&lt;integer&gt;")}}) strictement positif qui décrit le nombre idéal de colonnes avec lequel répartir le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas `auto`, cette propriété indique simplement le nombre maximal de colonnes autorisé.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.exemple {
+```css
+.exemple {
   border: 10px solid #000000;
   column-count:3;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```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
@@ -63,40 +65,26 @@ column-count: unset;
   « Comment pourriez-vous apprendre des leçons ici ?
   Il y a à peine de la place pour vous, et il n’y en
   a pas du tout pour vos livres de leçons. »
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","800","300")}}</p>
+{{EmbedLiveSample("Exemples","800","300")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#cc', 'column-count')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                        | État                                 | Commentaires         |
+| -------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Multicol', '#cc', 'column-count')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.column-count")}}</p>
+{{Compat("css.properties.column-count")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Apprendre - la disposition multi-colonnes</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">Les concepts de bases pour la disposition multi-colonnes</a></li>
-</ul>
+- [Apprendre - la disposition multi-colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Les concepts de bases pour la disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol)
diff --git a/files/fr/web/css/column-fill/index.md b/files/fr/web/css/column-fill/index.md
index 9d27ef3d0e..a07c3c8b24 100644
--- a/files/fr/web/css/column-fill/index.md
+++ b/files/fr/web/css/column-fill/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/column-fill
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>column-fill</code></strong> permet de contrôler la façon dont le contenu est réparti entre les colonnes. Le contenu peut être équilibré (afin de prendre la même hauteur sur toutes les colonnes) ou être réparti de façon automatique (avec <code>auto</code>) et remplir l'espace nécessaire.</p>
+La propriété **`column-fill`** permet de contrôler la façon dont le contenu est réparti entre les colonnes. Le contenu peut être équilibré (afin de prendre la même hauteur sur toutes les colonnes) ou être réparti de façon automatique (avec `auto`) et remplir l'espace nécessaire.
 
-<div>{{EmbedInteractiveExample("pages/css/column-fill.html")}}</div>
+{{EmbedInteractiveExample("pages/css/column-fill.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 column-fill: auto;
 column-fill: balance;
 column-fill: balance-all;
@@ -24,38 +25,39 @@ column-fill: balance-all;
 column-fill: inherit;
 column-fill: initial;
 column-fill: unset;
-</pre>
+```
 
-<p>Cette propriété est définie grâce à l'un des mots-clés définis ci-après.</p>
+Cette propriété est définie grâce à l'un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé indiquant que les colonnes sont remplies dans l'ordre.</dd>
- <dt><code>balance</code></dt>
- <dd>Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les médias paginés, seule la dernière page est équilibrée.</dd>
- <dt><code>balance-all</code></dt>
- <dd>Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les média paginés, toutes les pages sont équilibrées.</dd>
-</dl>
+- `auto`
+  - : Un mot-clé indiquant que les colonnes sont remplies dans l'ordre.
+- `balance`
+  - : Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les médias paginés, seule la dernière page est équilibrée.
+- `balance-all`
+  - : Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les média paginés, toutes les pages sont équilibrées.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.exemple {
+```css
+.exemple {
   border: 10px solid #000000;
   column-count:3;
   column-fill: balance;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```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
@@ -66,33 +68,21 @@ column-fill: unset;
   « Comment pourriez-vous apprendre des leçons ici ?
   Il y a à peine de la place pour vous, et il n’y en
   a pas du tout pour vos livres de leçons. »
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","800","300")}}</p>
+{{EmbedLiveSample("Exemples","800","300")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#cf', 'column-fill')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                        | État                                 | Commentaires         |
+| -------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Multicol', '#cf', 'column-fill')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.column-fill")}}</p>
+{{Compat("css.properties.column-fill")}}
diff --git a/files/fr/web/css/column-gap/index.md b/files/fr/web/css/column-gap/index.md
index d59b181788..d420492323 100644
--- a/files/fr/web/css/column-gap/index.md
+++ b/files/fr/web/css/column-gap/index.md
@@ -7,123 +7,127 @@ tags:
   - Reference
 translation_of: Web/CSS/column-gap
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>column-gap</code></strong> permet de définir l'espace entre les colonnes d'un élément.</p>
+La propriété **`column-gap`** permet de définir l'espace entre les colonnes d'un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/column-gap.html")}}</div>
+{{EmbedInteractiveExample("pages/css/column-gap.html")}}{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}
 
-<div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div>
+La propriété `column-gap` était initialement définie dans le module de spécification [_Multi-column Layout_ (disposition en colonnes)](/fr/docs/Web/CSS/Colonnes_CSS). Cette définition a depuis été élargie afin de pouvoir être utilisée dans les différents modes de disposition et fait désormais partie du module de spécification _[Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)_. Cette propriété peut être utilisée pour les dispositions en colonnes, les dispositions flexibles ou les disposition en grille.
 
-<p>La propriété <code>column-gap</code> était initialement définie dans le module de spécification <a href="/fr/docs/Web/CSS/Colonnes_CSS"><em>Multi-column Layout</em> (disposition en colonnes)</a>. Cette définition a depuis été élargie afin de pouvoir être utilisée dans les différents modes de disposition et fait désormais partie du module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em>. Cette propriété peut être utilisée pour les dispositions en colonnes, les dispositions flexibles ou les disposition en grille.</p>
+> **Note :** Le module de spécification _[CSS Grid Layout](/fr/docs/Web/CSS/CSS_Grid_Layout)_ définissait initialement la propriété `grid-column-gap`. Cette version préfixée a été remplacée par `column-gap`. Toutefois, à des fins de compatibilité envers les navigateurs qui ne prendraient pas en charge cette évolution, mieux vaut utiliser les deux versions (voir l'exemple interactif ci-avant).
 
-<div class="note">
-<p><strong>Note :</strong> Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></em> définissait initialement la propriété <code>grid-column-gap</code>. Cette version préfixée a été remplacée par <code>column-gap</code>. Toutefois, à des fins de compatibilité envers les navigateurs qui ne prendraient pas en charge cette évolution, mieux vaut utiliser les deux versions (voir l'exemple interactif ci-avant).</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 column-gap: normal;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 column-gap: 3px;
 column-gap: 2.5em;
 
 /* Valeurs de pourcentage */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 column-gap: 3%;
 
 /* Valeurs globales */
 column-gap: inherit;
 column-gap: initial;
 column-gap: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Un mot-clé qui indique qu'on souhaite utiliser l'espacement par défaut créé par le navigateur. Pour les dispositions en colonnes, cette valeur correspond à <code>1em</code>, sinon elle correspond à <code>0</code>.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur de pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.</dd>
-</dl>
+- `normal`
+  - : Un mot-clé qui indique qu'on souhaite utiliser l'espacement par défaut créé par le navigateur. Pour les dispositions en colonnes, cette valeur correspond à `1em`, sinon elle correspond à `0`.
+- `<length>`
+  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
+- `<percentage>`
+  - : Une valeur de pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Disposition_flexible">Disposition flexible</h3>
+### Disposition flexible
 
-<p>{{SeeCompatTable}}</p>
+{{SeeCompatTable}}
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div id="flexbox"&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#flexbox {
+```css
+#flexbox {
   display: flex;
   height: 100px;
   column-gap: 20px;
 }
 
-#flexbox &gt; div {
+#flexbox > div {
   border: 1opx solid green;
   background-color: lime;
   flex: auto;
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Disposition_flexible","auto","120px")}}</p>
+{{EmbedLiveSample("Disposition_flexible","auto","120px")}}
 
-<h3 id="Disposition_en_colonnes">Disposition en colonnes</h3>
+### Disposition en colonnes
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="content-box"&gt;
+```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 ?
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush:css">.content-box {
+```css
+.content-box {
   column-count: 3;
   column-gap: 40px;
 }
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Disposition_en_colonnes", "auto", "120px")}}</p>
+{{EmbedLiveSample("Disposition_en_colonnes", "auto", "120px")}}
 
-<h3 id="Disposition_en_grille">Disposition en grille</h3>
+### Disposition en grille
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div id="grid"&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#grid {
+```css
+#grid {
   display: grid;
   height: 100px;
   grid-template-columns: repeat(3, 1fr);
@@ -131,70 +135,49 @@ column-gap: unset;
   column-gap: 20px;
 }
 
-#grid &gt; div {
+#grid > div {
   background-color: lime;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">#grid {
+```css hidden
+#grid {
   grid-column-gap: 20px;
-}</pre>
-
-<h4 id="Résultat_3">Résultat</h4>
-
-<p>{{EmbedLiveSample("Disposition_en_grille", "auto", "120px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td>Applique cette propriété aux grilles et aux boîtes flexibles (<em>flexbox</em>).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition de l'impact de cette propriété sur les dispositions en grille.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}</td>
-   <td>{{Spec2("CSS3 Multicol")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
-
-<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_en_grille">Prise en charge pour les dispositions en grille</h3>
-
-<p>{{Compat("css.properties.column-gap.grid_context")}}</p>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_en_colonnes">Prise en charge pour les dispositions en colonnes</h3>
-
-<p>{{Compat("css.properties.column-gap.multicol_context")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base des flexbox</a></em></li>
- <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Concepts de base des grilles : les gouttières</a></em></li>
- <li>Guide sur la disposition multi-colonnes : <em><a href="/fr/docs/Web/CSS/CSS_Columns/Styling_Columns">Mettre en forme les colonnes</a></em></li>
-</ul>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Disposition_en_grille", "auto", "120px")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                                              |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------- |
+| {{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}} | {{Spec2("CSS3 Box Alignment")}} | Applique cette propriété aux grilles et aux boîtes flexibles (_flexbox_). |
+| {{SpecName("CSS3 Grid", "#gutters", "column-gap")}}                     | {{Spec2("CSS3 Grid")}}             | Définition de l'impact de cette propriété sur les dispositions en grille. |
+| {{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}             | {{Spec2("CSS3 Multicol")}}     | Définition initiale.                                                      |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+### Prise en charge pour les dispositions flexibles
+
+{{Compat("css.properties.column-gap.flex_context")}}
+
+### Prise en charge pour les dispositions en grille
+
+{{Compat("css.properties.column-gap.grid_context")}}
+
+### Prise en charge pour les dispositions en colonnes
+
+{{Compat("css.properties.column-gap.multicol_context")}}
+
+## Voir aussi
+
+- {{cssxref("row-gap")}}
+- {{cssxref("gap")}}
+- Guide sur les boîtes flexibles : _[Concepts de base des flexbox](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_
+- Guide sur les grilles : _[Concepts de base des grilles : les gouttières](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières)_
+- Guide sur la disposition multi-colonnes : _[Mettre en forme les colonnes](/fr/docs/Web/CSS/CSS_Columns/Styling_Columns)_
diff --git a/files/fr/web/css/column-rule-color/index.md b/files/fr/web/css/column-rule-color/index.md
index c3d4c6938b..72f051608e 100644
--- a/files/fr/web/css/column-rule-color/index.md
+++ b/files/fr/web/css/column-rule-color/index.md
@@ -7,16 +7,17 @@ tags:
   - Reference
 translation_of: Web/CSS/column-rule-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>column-rule-color</code></strong> permet de définir la couleur de la ligne tracée entre les colonnes lorsqu'on utilise une disposition en colonnes.</p>
+La propriété** `column-rule-color`** permet de définir la couleur de la ligne tracée entre les colonnes lorsqu'on utilise une disposition en colonnes.
 
-<div>{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de couleur */
-/* Type &lt;color&gt; */
+```css
+/* Valeurs de couleur */
+/* Type <color> */
 column-rule-color: red;
 column-rule-color: rgb(192, 56, 78);
 column-rule-color: transparent;
@@ -26,35 +27,36 @@ column-rule-color: hsla(0, 100%, 50%, 0.6);
 column-rule-color: inherit;
 column-rule-color: initial;
 column-rule-color: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui indique la couleur du trait entre les colonnes.</dd>
-</dl>
+- `<color>`
+  - : Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui indique la couleur du trait entre les colonnes.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.exemple {
+```css
+.exemple {
   border: 10px solid #000000;
 
   columns:3;
   column-rule-width: thick;
   column-rule-color: blue;
   column-rule-style: solid;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class=exemple&gt;
+```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
@@ -65,41 +67,27 @@ column-rule-color: unset;
   « Comment pourriez-vous apprendre des leçons ici ?
   Il y a à peine de la place pour vous, et il n’y en
   a pas du tout pour vos livres de leçons. »
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                                 | Commentaires |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| {{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}} | {{Spec2('CSS3 Multicol')}} |              |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.column-rule-color")}}</p>
+{{Compat("css.properties.column-rule-color")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Le type de donnée {{cssxref("&lt;color&gt;")}}</li>
- <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}} et {{cssxref("caret-color")}}</li>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML grâce à CSS</a></li>
-</ul>
+- Le type de donnée {{cssxref("&lt;color&gt;")}}
+- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}} et {{cssxref("caret-color")}}
+- [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
diff --git a/files/fr/web/css/column-rule-style/index.md b/files/fr/web/css/column-rule-style/index.md
index 70bab31e69..39342417ce 100644
--- a/files/fr/web/css/column-rule-style/index.md
+++ b/files/fr/web/css/column-rule-style/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/column-rule-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>column-rule-style</code></strong> permet de définir le style de la ligne tracée entre plusieurs colonnes lorsqu'on utilise une disposition en colonnes.</p>
+La propriété **`column-rule-style`** permet de définir le style de la ligne tracée entre plusieurs colonnes lorsqu'on utilise une disposition en colonnes.
 
-<div>{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 column-rule-style: none;
 column-rule-style: hidden;
 column-rule-style: dotted;
@@ -31,37 +32,38 @@ column-rule-style: outset;
 column-rule-style: inherit;
 column-rule-style: initial;
 column-rule-style: unset;
-</pre>
+```
 
-<p>La propriété <code>column-rule-style</code> avec une valeur unique de type <code>&lt;br-style&gt;</code>.</p>
+La propriété `column-rule-style` avec une valeur unique de type `<br-style>`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;br-style&gt; </code></dt>
- <dd>Un mot-clé (défini comme pour {{cssxref("border-style")}}) qui permet de définir le style appliqué au trait. Les épaisseurs résultantes sont calculées avec la même méthode que pour les bordures (cf. <em><a href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders">collapsing border model</a></em>).</dd>
-</dl>
+- `<br-style> `
+  - : Un mot-clé (défini comme pour {{cssxref("border-style")}}) qui permet de définir le style appliqué au trait. Les épaisseurs résultantes sont calculées avec la même méthode que pour les bordures (cf. _[collapsing border model](https://www.w3.org/TR/CSS2/tables.html#collapsing-borders)_).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.exemple {
+```css
+.exemple {
   border: 10px solid #000000;
 
   columns:3;
   column-rule-width: thick;
   column-rule-color: blue;
   column-rule-style: dashed;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class=exemple&gt;
+```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
@@ -72,33 +74,21 @@ column-rule-style: unset;
   « Comment pourriez-vous apprendre des leçons ici ?
   Il y a à peine de la place pour vous, et il n’y en
   a pas du tout pour vos livres de leçons. »
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#crs', 'column-rule-style')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Multicol', '#crs', 'column-rule-style')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.column-rule-style")}}</p>
+{{Compat("css.properties.column-rule-style")}}
diff --git a/files/fr/web/css/column-rule-width/index.md b/files/fr/web/css/column-rule-width/index.md
index 27b3b4397a..fbf11d57f4 100644
--- a/files/fr/web/css/column-rule-width/index.md
+++ b/files/fr/web/css/column-rule-width/index.md
@@ -7,21 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/column-rule-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>column-rule-width</code></strong> permet de définir la largeur du trait tracé entre les colonnes lorsqu'on utilise une disposition en colonnes.</p>
+La propriété **`column-rule-width`** permet de définir la largeur du trait tracé entre les colonnes lorsqu'on utilise une disposition en colonnes.
 
-<div>{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 column-rule-width: thin;
 column-rule-width: medium;
 column-rule-width: thick;
 
 /* Valeurs de longueurs */
-/* Type &lt;length&gt;        */
+/* Type <length>        */
 column-rule-width: 1px;
 column-rule-width: 2.5em;
 
@@ -29,36 +30,37 @@ column-rule-width: 2.5em;
 column-rule-width: inherit;
 column-rule-width: initial;
 column-rule-width: unset;
-</pre>
+```
 
-<p>La propriété <code>column-rule-width</code> est définie grâce à une valeur de type <code>&lt;br-width&gt;</code>.</p>
+La propriété `column-rule-width` est définie grâce à une valeur de type `<br-width>`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;br-width&gt;</code></dt>
- <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un mot-clé parmi <code>thin</code>, <code>medium</code> ou <code>thick</code> qui décrit l'épaisseur du trait séparant deux colonnes. C'est le type de valeur qui sera également utilisé pour la propriété {{cssxref("border-width")}}.</dd>
-</dl>
+- `<br-width>`
+  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un mot-clé parmi `thin`, `medium` ou `thick` qui décrit l'épaisseur du trait séparant deux colonnes. C'est le type de valeur qui sera également utilisé pour la propriété {{cssxref("border-width")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.exemple {
+```css
+.exemple {
   border: 10px solid #000000;
   columns:3;
   column-rule-width: thick;
   column-rule-color: blue;
   column-rule-style: dashed;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class=exemple&gt;
+```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
@@ -69,33 +71,21 @@ column-rule-width: unset;
   « Comment pourriez-vous apprendre des leçons ici ?
   Il y a à peine de la place pour vous, et il n’y en
   a pas du tout pour vos livres de leçons. »
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#crw', 'column-rule-width')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Multicol', '#crw', 'column-rule-width')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.column-rule-width")}}</p>
+{{Compat("css.properties.column-rule-width")}}
diff --git a/files/fr/web/css/column-rule/index.md b/files/fr/web/css/column-rule/index.md
index 9ac19f4c6f..ae0b1dbfd3 100644
--- a/files/fr/web/css/column-rule/index.md
+++ b/files/fr/web/css/column-rule/index.md
@@ -7,21 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/column-rule
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Lorsqu'on utilise une disposition sur plusieurs colonnes, la <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> <strong><code>column-rule</code></strong> permet de définir l'affichage d'une ligne droite (aussi appelée « règle ») entre chaque colonne.</p>
+Lorsqu'on utilise une disposition sur plusieurs colonnes, la [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) **`column-rule`** permet de définir l'affichage d'une ligne droite (aussi appelée « règle ») entre chaque colonne.
 
-<div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div>
+{{EmbedInteractiveExample("pages/css/column-rule.html")}}
 
-<p>Cette propriété est une propriété raccourcie qui permet de définir {{cssxref("column-rule-width")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-color")}} (plutôt que d'avoir à les définir une par une, ce qui est plus laborieux).</p>
+Cette propriété est une propriété raccourcie qui permet de définir {{cssxref("column-rule-width")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-color")}} (plutôt que d'avoir à les définir une par une, ce qui est plus laborieux).
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété étant une propriété raccourcie, elle surcharge toutes les déclarations avec les propriétés individuelles écrites avant au sein d'une même règle.</p>
-</div>
+> **Note :** Cette propriété étant une propriété raccourcie, elle surcharge toutes les déclarations avec les propriétés individuelles écrites avant au sein d'une même règle.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Syntaxe avec des mots-clés */
+```css
+/* Syntaxe avec des mots-clés */
 column-rule: dotted;
 column-rule: solid blue;
 column-rule: solid 8px;
@@ -31,72 +30,59 @@ column-rule: thick inset blue;
 column-rule: inherit;
 column-rule: initial;
 column-rule: unset;
-</pre>
+```
 
-<p>Cette propriété peut être définie avec une, deux ou trois valeurs telles que définies ci-après, dans n'importe quel ordre.</p>
+Cette propriété peut être définie avec une, deux ou trois valeurs telles que définies ci-après, dans n'importe quel ordre.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'column-rule-width'&gt;</code></dt>
- <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou l'un des mots-clés <code>thin</code>, <code>medium</code> ou <code>thick</code>. Pour plus de détails, voir {{cssxref("border-width")}}.</dd>
- <dt><code>&lt;'column-rule-style'&gt;</code></dt>
- <dd>Voir {{cssxref("border-style")}} pour les différentes valeurs possibles.</dd>
- <dt><code>&lt;'column-rule-color'&gt;</code></dt>
- <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}).</dd>
-</dl>
+- `<'column-rule-width'>`
+  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou l'un des mots-clés `thin`, `medium` ou `thick`. Pour plus de détails, voir {{cssxref("border-width")}}.
+- `<'column-rule-style'>`
+  - : Voir {{cssxref("border-style")}} pour les différentes valeurs possibles.
+- `<'column-rule-color'>`
+  - : Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="col_rul"&gt;
-  &lt;p&gt; column one &lt;/p&gt;
-  &lt;p&gt; column two &lt;/p&gt;
-  &lt;p&gt; column three &lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div id="col_rul">
+  <p> column one </p>
+  <p> column two </p>
+  <p> column three </p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#col_rul{
+```css
+#col_rul{
   padding: 0.3em;
   background: gold;
   border: groove 2px gold;
   column-rule: inset 2px gold;
   column-count: 3;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.column-rule")}}</p>
+{{Compat("css.properties.column-rule")}}
diff --git a/files/fr/web/css/column-span/index.md b/files/fr/web/css/column-span/index.md
index ab7508ea5b..9b48fd309c 100644
--- a/files/fr/web/css/column-span/index.md
+++ b/files/fr/web/css/column-span/index.md
@@ -7,13 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/column-span
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>column-span</code></strong> permet à un élément de s'étendre sur toutes les colonnes lorsque la valeur de cette propriété est <code>all</code>. Un élément qui s'étend sur plus d'une colonne est appelé un élément étendu (<em>spanning element</em>).</p>
+La propriété **`column-span`** permet à un élément de s'étendre sur toutes les colonnes lorsque la valeur de cette propriété est `all`. Un élément qui s'étend sur plus d'une colonne est appelé un élément étendu (_spanning element_).
 
-<div>{{EmbedInteractiveExample("pages/css/column-span.html")}}</div>
+{{EmbedInteractiveExample("pages/css/column-span.html")}}
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 column-span: none;
 column-span: all;
 
@@ -21,77 +22,66 @@ column-span: all;
 column-span: inherit;
 column-span: initial;
 column-span: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>L'élément ne s'étend pas sur plusieurs colonnes.</dd>
- <dt><code>all</code></dt>
- <dd>L'élément s'étend sur l'ensemble des colonnes. Le contenu du flux normal apparaissant avant l'élément est équilibré entre toutes les colonnes de façon automatique. L'élément établit un nouveau bloc de contexte de formatage.</dd>
-</dl>
+- `none`
+  - : L'élément ne s'étend pas sur plusieurs colonnes.
+- `all`
+  - : L'élément s'étend sur l'ensemble des colonnes. Le contenu du flux normal apparaissant avant l'élément est équilibré entre toutes les colonnes de façon automatique. L'élément établit un nouveau bloc de contexte de formatage.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   border: 10px solid #000000;
   columns:3;
 }
 
 h2 {
   column-span: all;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class=exemple&gt;
+```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. »
-  &lt;h2&gt; La suite&lt;/h2&gt;
+  <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. »
-&lt;/div&gt;</pre>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","auto",120)}}</p>
+{{EmbedLiveSample("Exemples","auto",120)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Multicol', '#column-span', 'column-span')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.column-span")}}</p>
+{{Compat("css.properties.column-span")}}
diff --git a/files/fr/web/css/column-width/index.md b/files/fr/web/css/column-width/index.md
index ebc538bee6..105b09823b 100644
--- a/files/fr/web/css/column-width/index.md
+++ b/files/fr/web/css/column-width/index.md
@@ -7,21 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/column-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>column-width</code></strong> définit une largeur de colonne idéale lorsqu'on utilise une disposition en colonnes. Aussi, on aura le plus de colonnes possible et pour lesquelles aucune n'est moins large que <code>column-width</code>. La colonne réelle peut être plus petite que cette taille si son conteneur est moins large que cette valeur.</p>
+La propriété **`column-width`** définit une largeur de colonne idéale lorsqu'on utilise une disposition en colonnes. Aussi, on aura le plus de colonnes possible et pour lesquelles aucune n'est moins large que `column-width`. La colonne réelle peut être plus petite que cette taille si son conteneur est moins large que cette valeur.
 
-<div>{{EmbedInteractiveExample("pages/css/column-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/column-width.html")}}
 
-<p>Ainsi, si on a une colonne large de 300px avec un écart de 0px, on pourrait placer une seule colonne sur 599px mais avoir deux colonnes avec 600px. Ce réglage permet donc d'obtenir des effets qui s'adaptent aux différentes tailles d'écrans. Manipulée avec la propriété {{cssxref("column-count")}} qui a la précédence, il est nécessaire de définir toutes les valeurs de longueur pour avoir une largeur de colonne CSS exacte. Pour du texte horizontal, ces propriétés sont {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} et {{cssxref('column-rule-width')}}.</p>
+Ainsi, si on a une colonne large de 300px avec un écart de 0px, on pourrait placer une seule colonne sur 599px mais avoir deux colonnes avec 600px. Ce réglage permet donc d'obtenir des effets qui s'adaptent aux différentes tailles d'écrans. Manipulée avec la propriété {{cssxref("column-count")}} qui a la précédence, il est nécessaire de définir toutes les valeurs de longueur pour avoir une largeur de colonne CSS exacte. Pour du texte horizontal, ces propriétés sont {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} et {{cssxref('column-rule-width')}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 column-width: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 column-width: 60px;
 column-width: 15.5em;
 column-width: 3.3vw;
@@ -30,80 +31,63 @@ column-width: 3.3vw;
 column-width: inherit;
 column-width: initial;
 column-width: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui fournit une indication sur la largeur optimale d'une colonne. La colonne réelle peut être plus large que cette longueur (pour remplir l'espace disponible) ou plus étroite (uniquement si l'espace disponible est inférieur à la largeur indiquée). La longueur exprimée doit être strictement positive sinon la déclaration est considérée invalide. Les valeurs exprimées en pourcentages sont invalides.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé indiquant que la largeur de la colonne doit être déterminée grâce aux autres propriétés CSS comme {{cssxref("column-count")}}.</dd>
-</dl>
+- `<length>`
+  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui fournit une indication sur la largeur optimale d'une colonne. La colonne réelle peut être plus large que cette longueur (pour remplir l'espace disponible) ou plus étroite (uniquement si l'espace disponible est inférieur à la largeur indiquée). La longueur exprimée doit être strictement positive sinon la déclaration est considérée invalide. Les valeurs exprimées en pourcentages sont invalides.
+- `auto`
+  - : Un mot-clé indiquant que la largeur de la colonne doit être déterminée grâce aux autres propriétés CSS comme {{cssxref("column-count")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.content-box {
+```css
+.content-box {
   border: 10px solid #0ff;
 
   -webkit-column-width: 100px;
   -moz-column-width: 100px;
   column-width: 100px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="content-box"&gt;
+```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
   nisl ut aliquip ex ea commodo consequat.
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '300px', '200px')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Writing Modes', '#auto-multicol', 'column-width')}}</td>
-   <td>{{Spec2('CSS4 Writing Modes')}}</td>
-   <td>Ajoutes des tailles intrinsèques grâce aux mots-clés <code>min-content</code>, <code>max-content</code>, <code>fill-available</code> et <code>fit-content</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.column-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Apprendre - La disposition multi-colonnes</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">Les concepts de base pour la disposition multi-colonnes</a></li>
-</ul>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '300px', '200px')}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                                                                                                          |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Writing Modes', '#auto-multicol', 'column-width')}} | {{Spec2('CSS4 Writing Modes')}} | Ajoutes des tailles intrinsèques grâce aux mots-clés `min-content`, `max-content`, `fill-available` et `fit-content`. |
+| {{SpecName('CSS3 Multicol', '#cw', 'column-width')}}                         | {{Spec2('CSS3 Multicol')}}     | Définition initiale.                                                                                                  |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.column-width")}}
+
+## Voir aussi
+
+- [Apprendre - La disposition multi-colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Les concepts de base pour la disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol)
diff --git a/files/fr/web/css/column_combinator/index.md b/files/fr/web/css/column_combinator/index.md
index 869a1e10dc..fb9fd15cd3 100644
--- a/files/fr/web/css/column_combinator/index.md
+++ b/files/fr/web/css/column_combinator/index.md
@@ -8,89 +8,78 @@ tags:
 translation_of: Web/CSS/Column_combinator
 original_slug: Web/CSS/Combinateur_colonne
 ---
-<div>{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}</div>
+{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
 
-<p>Le <strong>combinateur de colonne</strong> (<code>||</code>) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.</p>
+Le **combinateur de colonne** (`||`) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.
 
-<pre class="brush: css no-line-numbers">/* Les cellules de tableaux qui appartiennent */
+```css
+/* Les cellules de tableaux qui appartiennent */
 /* à la colonne "selected" */
 col.selected || td {
   background: gray;
 }
-</pre>
+```
+
+## Syntaxe
+
+    column-selector || cell-selector {
+      /* propriétés pour le style */
+    }
+
+## Exemples
+
+### HTML
+
+```html
+<table border="1">
+  <colgroup>
+    <col span="2"/>
+    <col class="selected"/>
+  </colgroup>
+  <tbody>
+    <tr>
+      <td>A
+      <td>B
+      <td>C
+    </tr>
+    <tr>
+      <td colspan="2">D</td>
+      <td>E</td>
+    </tr>
+    <tr>
+      <td>F</td>
+      <td colspan="2">G</td>
+    </tr>
+  </tbody>
+</table>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+### CSS
 
-<pre class="syntaxbox"><var>column-selector</var> || <var>cell-selector</var> {
-  <var>/* propriétés pour le style */</var>
-}
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table border="1"&gt;
-  &lt;colgroup&gt;
-    &lt;col span="2"/&gt;
-    &lt;col class="selected"/&gt;
-  &lt;/colgroup&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;A
-      &lt;td&gt;B
-      &lt;td&gt;C
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td colspan="2"&gt;D&lt;/td&gt;
-      &lt;td&gt;E&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;F&lt;/td&gt;
-      &lt;td colspan="2"&gt;G&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">col.selected || td {
+```css
+col.selected || td {
   background: gray;
   color: white;
   font-weight: bold;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%")}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}} | {{Spec2("CSS4 Selectors")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+{{Compat("javascript.builtins.Array.sort")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("col")}}</li>
- <li>{{HTMLElement("colgroup")}}</li>
- <li>{{CSSxRef("grid")}}</li>
-</ul>
+- {{HTMLElement("col")}}
+- {{HTMLElement("colgroup")}}
+- {{CSSxRef("grid")}}
diff --git a/files/fr/web/css/columns/index.md b/files/fr/web/css/columns/index.md
index f13537bfe4..71a22e246c 100644
--- a/files/fr/web/css/columns/index.md
+++ b/files/fr/web/css/columns/index.md
@@ -8,17 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/columns
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>columns</code></strong> est une propriété raccourcie permettant de définir les deux propriétés {{cssxref('column-width')}} (qui définit la largeur des colonnes) et {{cssxref("column-count")}} (qui définit le nombre de colonnes) en même temps.</p>
+La propriété **`columns`** est une propriété raccourcie permettant de définir les deux propriétés {{cssxref('column-width')}} (qui définit la largeur des colonnes) et {{cssxref("column-count")}} (qui définit le nombre de colonnes) en même temps.
 
-<div>{{EmbedInteractiveExample("pages/css/columns.html")}}</div>
+{{EmbedInteractiveExample("pages/css/columns.html")}}
 
-<p>Comme pour toute propriété raccourcie, toute propriété détaillée qui n'est pas définie se voit réinitialisée à sa valeur par défaut (surchargeant ainsi les éventuelles règles déclarées avant).</p>
+Comme pour toute propriété raccourcie, toute propriété détaillée qui n'est pas définie se voit réinitialisée à sa valeur par défaut (surchargeant ainsi les éventuelles règles déclarées avant).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Largeur */
+```css
+/* Largeur */
 columns: 18em;
 
 /* Nombre de colonnes */
@@ -35,37 +36,38 @@ columns: auto auto;
 columns: inherit;
 columns: initial;
 columns: unset;
-</pre>
+```
 
-<p>La propriété <code>columns</code> se définit avec un ou deux valeurs parmi celles décrites ci-après. L'ordre de ces valeurs n'a pas d'importance.</p>
+La propriété `columns` se définit avec un ou deux valeurs parmi celles décrites ci-après. L'ordre de ces valeurs n'a pas d'importance.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'column-width'&gt;</code></dt>
- <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) fournissant une indication quant à la largeur optimale de la colonne ou le mot-clé auto. La colonne réelle peut être plus large (pour remplir l'espace disponible) ou plus étroite (s'il n'y a pas suffisamment d'espace disponible). La longueur exprimée doit être strictement positive, dans le cas contraire, la déclaration sera invalide.</dd>
- <dt><code>&lt;'column-count'&gt;</code></dt>
- <dd>Une quantité (type {{cssxref("&lt;integer&gt;")}}) strictement positive qui décrit le nombre idéal de colonnes parmi lesquelles disposer le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas une valeur automatique, cette valeur indique simplement le nombre maximal de colonnes.</dd>
-</dl>
+- `<'column-width'>`
+  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) fournissant une indication quant à la largeur optimale de la colonne ou le mot-clé auto. La colonne réelle peut être plus large (pour remplir l'espace disponible) ou plus étroite (s'il n'y a pas suffisamment d'espace disponible). La longueur exprimée doit être strictement positive, dans le cas contraire, la déclaration sera invalide.
+- `<'column-count'>`
+  - : Une quantité (type {{cssxref("&lt;integer&gt;")}}) strictement positive qui décrit le nombre idéal de colonnes parmi lesquelles disposer le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas une valeur automatique, cette valeur indique simplement le nombre maximal de colonnes.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.exemple {
+```css
+.exemple {
   margin: 0;
   height: 90px;
   border: 3px solid black;
   columns: 3;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class=exemple&gt;
+```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
@@ -76,33 +78,21 @@ columns: unset;
   « Comment pourriez-vous apprendre des leçons ici ?
   Il y a à peine de la place pour vous, et il n’y en
   a pas du tout pour vos livres de leçons. »
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples",300,120)}}</p>
+{{EmbedLiveSample("Exemples",300,120)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#columns', 'columns')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                        | État                                 | Commentaires         |
+| -------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Multicol', '#columns', 'columns')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.columns")}}</p>
+{{Compat("css.properties.columns")}}
diff --git a/files/fr/web/css/comments/index.md b/files/fr/web/css/comments/index.md
index 1176e56c99..98d7bb28de 100644
--- a/files/fr/web/css/comments/index.md
+++ b/files/fr/web/css/comments/index.md
@@ -7,20 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/Comments
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les commentaires sont utilisés afin d'ajouter des notes explicatives ou pour empêcher le navigateur d'interpréter certaines parties de la feuille de style. Les commentaires n'ont donc aucun impact sur la disposition d'un document.</p>
+Les commentaires sont utilisés afin d'ajouter des notes explicatives ou pour empêcher le navigateur d'interpréter certaines parties de la feuille de style. Les commentaires n'ont donc aucun impact sur la disposition d'un document.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>On peut utiliser des commentaires à chaque endroit où un blanc est autorisé.</p>
+On peut utiliser des commentaires à chaque endroit où un blanc est autorisé.
 
-<pre class="syntaxbox">/* Commentaire */
-</pre>
+    /* Commentaire */
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">/* Commentaire sur une ligne */
+```css
+/* Commentaire sur une ligne */
 
 /*
 Commentaire
@@ -37,18 +37,14 @@ span {
   font-size: 1.5em;
 }
 */
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La syntaxe des commentaires avec <code>/* */</code> est utilisée pour étaler un commentaire sur une ou plusieurs lignes. On ne peut pas utiliser d'autres moyens pour les commentaires dans une feuille de style externe. Lorsqu'on utilise l'élément {{HTMLElement("style")}}, on peut utiliser les commentaires HTML <code>&lt;!-- --&gt;</code> pour masquer du CSS sur des navigateurs plus anciens mais cela n'est pas une méthode recommandée.</p>
+La syntaxe des commentaires avec `/* */` est utilisée pour étaler un commentaire sur une ou plusieurs lignes. On ne peut pas utiliser d'autres moyens pour les commentaires dans une feuille de style externe. Lorsqu'on utilise l'élément {{HTMLElement("style")}}, on peut utiliser les commentaires HTML `<!-- -->` pour masquer du CSS sur des navigateurs plus anciens mais cela n'est pas une méthode recommandée.
 
-<p>À l'instar des autres langages de programmation programmation qui utilisent <code>/* */</code> pour les commentaires, il est impossible de les imbriquer. Autrement dit, la première apparition de <code>*/</code> suivant un <code>/*</code>, ferme le commentaire.</p>
+À l'instar des autres langages de programmation programmation qui utilisent `/* */` pour les commentaires, il est impossible de les imbriquer. Autrement dit, la première apparition de `*/` suivant un `/*`, ferme le commentaire.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li>
-  <div><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></div>
- </li>
-</ul>
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
diff --git a/files/fr/web/css/compositing_and_blending/index.md b/files/fr/web/css/compositing_and_blending/index.md
index 721ca17ac9..d3178d3aba 100644
--- a/files/fr/web/css/compositing_and_blending/index.md
+++ b/files/fr/web/css/compositing_and_blending/index.md
@@ -9,55 +9,38 @@ tags:
   - Reference
 translation_of: Web/CSS/Compositing_and_Blending
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>Compositing and Blending</strong></em> (Composition et fusion) est un module de la spécification CSS qui définit la façon dont les formes de différents éléments sont combinés afin de former une seule image.</p>
+**_Compositing and Blending_** (Composition et fusion) est un module de la spécification CSS qui définit la façon dont les formes de différents éléments sont combinés afin de former une seule image.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("background-blend-mode")}}</li>
- <li>{{cssxref("isolation")}}</li>
- <li>{{cssxref("mix-blend-mode")}}</li>
-</ul>
+- {{cssxref("background-blend-mode")}}
+- {{cssxref("isolation")}}
+- {{cssxref("mix-blend-mode")}}
 
-<h3 id="Types_de_donnée">Types de donnée</h3>
+### Types de donnée
 
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;blend-mode&gt;")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Compositing")}}</td>
-   <td>{{Spec2("Compositing")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | État                             | Commentaires         |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("Compositing")}} | {{Spec2("Compositing")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="background-blend-mode"><code>background-blend-mode</code></h3>
+### `background-blend-mode`
 
-<p>{{Compat("css.properties.background-blend-mode")}}</p>
+{{Compat("css.properties.background-blend-mode")}}
 
-<h3 id="isolation"><code>isolation</code></h3>
+### `isolation`
 
-<p>{{Compat("css.properties.isolation")}}</p>
+{{Compat("css.properties.isolation")}}
 
-<h3 id="mix-blend-mode"><code>mix-blend-mode</code></h3>
+### `mix-blend-mode`
 
-<p>{{Compat("css.properties.mix-blend-mode")}}</p>
+{{Compat("css.properties.mix-blend-mode")}}
diff --git a/files/fr/web/css/computed_value/index.md b/files/fr/web/css/computed_value/index.md
index 606b16f92c..b836a1ae2a 100644
--- a/files/fr/web/css/computed_value/index.md
+++ b/files/fr/web/css/computed_value/index.md
@@ -7,62 +7,39 @@ tags:
 translation_of: Web/CSS/computed_value
 original_slug: Web/CSS/Valeur_calculée
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <strong>valeur calculée</strong> d'une propriété CSS est calculée à partir de <a href="/fr/docs/Web/CSS/Valeur_spécifiée">la valeur définie</a> :</p>
+La **valeur calculée** d'une propriété CSS est calculée à partir de [la valeur définie](/fr/docs/Web/CSS/Valeur_spécifiée) :
 
-<ol>
- <li>En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.</li>
- <li>En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.</li>
-</ol>
+1.  En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.
+2.  En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.
 
-<p>Les calculs utilisés pour obtenir la <strong>valeur calculée</strong> correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme <code>em</code> ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes <code>font-size: 16px</code> et <code>padding-top: 2em</code>. La valeur calculée de la propriété <code>padding-top</code> sera <code>32px</code> (on double la taille de la police).</p>
+Les calculs utilisés pour obtenir la **valeur calculée** correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme `em` ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes `font-size: 16px` et `padding-top: 2em`. La valeur calculée de la propriété `padding-top` sera `32px` (on double la taille de la police).
 
-<p>Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme <code>width</code>, <code>margin-right</code>, <code>text-indent</code>, et <code>top</code>), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété <code>line-height</code> sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine <a href="/fr/docs/Web/CSS/Valeur_utilisée">les valeurs utilisées</a>.</p>
+Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme `width`, `margin-right`, `text-indent`, et `top`), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété `line-height` sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine [les valeurs utilisées](/fr/docs/Web/CSS/Valeur_utilisée).
 
-<p>Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de <a href="/fr/docs/Web/CSS/Valeur_spécifiée">la valeur spécifiée</a> à <a href="/fr/docs/Web/CSS/Valeur_utilisée">la valeur utilisée</a>) est <a href="/fr/docs/Web/CSS/Héritage">l'héritage</a>, notamment grâce au mot-clé {{cssxref("inherit")}}.</p>
+Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de [la valeur spécifiée](/fr/docs/Web/CSS/Valeur_spécifiée) à [la valeur utilisée](/fr/docs/Web/CSS/Valeur_utilisée)) est [l'héritage](/fr/docs/Web/CSS/Héritage), notamment grâce au mot-clé {{cssxref("inherit")}}.
 
-<div class="note">
-<p><strong>Note :</strong> La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie <a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">la valeur résolue</a> qui correspond à la valeur calculée ou à <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">la valeur utilisée</a> selon la propriété.</p>
-</div>
+> **Note :** La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie [la valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue) qui correspond à la valeur calculée ou à [la valeur utilisée](/fr/docs/Web/CSS/Valeur_utilis%C3%A9e) selon la propriété.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}</td>
-   <td>{{Spec2("CSS2.2")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}} | {{Spec2("CSS2.2")}} |                      |
+| {{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}} | {{Spec2("CSS2.1")}} | Définition initiale. |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">La notion de valeur définie</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">La notion de valeur utilisée</a></li>
- <li><a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">La notion de valeur résolue</a></li>
- <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
- <li>{{cssxref("inherit")}}</li>
- <li>{{cssxref("initial")}}</li>
- <li>{{cssxref("unset")}}</li>
- <li>{{cssxref("revert")}}</li>
- <li>{{domxref("window.getComputedStyle")}}</li>
-</ul>
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
+- [La notion de valeur initiale](/fr/docs/Web/CSS/Valeur_initiale)
+- [La notion de valeur définie](/fr/docs/Web/CSS/Valeur_spécifiée)
+- [La notion de valeur calculée](/fr/docs/Web/CSS/Valeur_calculée)
+- [La notion de valeur utilisée](/fr/docs/Web/CSS/Valeur_utilisée)
+- [La notion de valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)
+- [La notion de valeur réelle](/fr/docs/Web/CSS/valeur_reelle)
+- {{cssxref("inherit")}}
+- {{cssxref("initial")}}
+- {{cssxref("unset")}}
+- {{cssxref("revert")}}
+- {{domxref("window.getComputedStyle")}}
diff --git a/files/fr/web/css/contain/index.md b/files/fr/web/css/contain/index.md
index e08a63ec08..dd2b464a31 100644
--- a/files/fr/web/css/contain/index.md
+++ b/files/fr/web/css/contain/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/contain
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété CSS <strong><code>contain</code></strong> permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les <em>peintures</em> ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète.</p>
+La propriété CSS **`contain`** permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les _peintures_ ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète.
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 contain: none;
 contain: strict;
 contain: content;
@@ -25,72 +26,51 @@ contain: paint;
 contain: inherit;
 contain: initial;
 contain: unset;
-</pre>
-
-<p>Cette propriété s'avère utile pour les pages qui contiennent de nombreux composants indépendants et permet de limiter la portée des règles sur le reste de la page.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'elle est appliquée avec une valeur <code>paint</code>, <code>strict</code> ou <code>content</code>, cette propriété crée :</p>
-
-<ul>
- <li>un nouveau <a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">bloc englobant</a> (le bloc servant de référence pour les éléments fils dont la position sera absolue ou <code>fixed</code>)</li>
- <li>un nouveau <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">contexte d'empilement</a></li>
- <li>un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a>.</li>
-</ul>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>L'élément est affiché normalement, aucun confinement n'est appliqué.</dd>
- <dt><code>strict</code></dt>
- <dd>Toutes les règles possibles de confinement à l'exception de <code>style</code> sont appliquées. Cela correspond à <code>contain: size layout paint</code>.</dd>
- <dt><code>content</code></dt>
- <dd>Toutes les règles de confinement, à l'exception de celles pour <code>size</code> et <code>style</code>, sont appliquées à l'élément. Cela est équivalent à <code>contain: layout paint</code>.</dd>
- <dt><code>size</code></dt>
- <dd>Cette valeur indique que l'élément peut être dimensionné sans avoir à examiner les éléments descendants pour les modifications de la taille.</dd>
- <dt><code>layout</code></dt>
- <dd>Cette valeur indique qu'aucun élément en dehors de l'élément, ne peut impacter sa disposition interne et réciproquement.</dd>
- <dt><code>style</code></dt>
- <dd>Cette valeur indique que les propriétés ayant un effet sur un un élément et ses descendants voire plus sont bien limitées à l'élément englobant.</dd>
- <dt><code>paint</code></dt>
- <dd>Cette valeur indique que les éléments descendants de l'élément ne sont pas affichés en dehors de ses limites. Si un élément est en dehors de l'écran ou n'est pas visible, cette valeur assure que les éléments descendants ne sont pas visibles non plus.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Cette propriété s'avère utile pour les pages qui contiennent de nombreux composants indépendants et permet de limiter la portée des règles sur le reste de la page.
+
+> **Note :** Lorsqu'elle est appliquée avec une valeur `paint`, `strict` ou `content`, cette propriété crée :
+>
+> - un nouveau [bloc englobant](/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur) (le bloc servant de référence pour les éléments fils dont la position sera absolue ou `fixed`)
+> - un nouveau [contexte d'empilement](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches)
+> - un nouveau [contexte de formatage de bloc](/fr/docs/Web/CSS/Block_formatting_context).
+
+## Syntaxe
+
+### Valeurs
+
+- `none`
+  - : L'élément est affiché normalement, aucun confinement n'est appliqué.
+- `strict`
+  - : Toutes les règles possibles de confinement à l'exception de `style` sont appliquées. Cela correspond à `contain: size layout paint`.
+- `content`
+  - : Toutes les règles de confinement, à l'exception de celles pour `size` et `style`, sont appliquées à l'élément. Cela est équivalent à `contain: layout paint`.
+- `size`
+  - : Cette valeur indique que l'élément peut être dimensionné sans avoir à examiner les éléments descendants pour les modifications de la taille.
+- `layout`
+  - : Cette valeur indique qu'aucun élément en dehors de l'élément, ne peut impacter sa disposition interne et réciproquement.
+- `style`
+  - : Cette valeur indique que les propriétés ayant un effet sur un un élément et ses descendants voire plus sont bien limitées à l'élément englobant.
+- `paint`
+  - : Cette valeur indique que les éléments descendants de l'élément ne sont pas affichés en dehors de ses limites. Si un élément est en dehors de l'écran ou n'est pas visible, cette valeur assure que les éléments descendants ne sont pas visibles non plus.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Containment')}}</td>
-   <td>{{Spec2('CSS Containment')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | État                                 | Commentaires         |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS Containment')}} | {{Spec2('CSS Containment')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.contain")}}</p>
+{{Compat("css.properties.contain")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété CSS {{cssxref("position")}}</li>
-</ul>
+- La propriété CSS {{cssxref("position")}}
diff --git a/files/fr/web/css/containing_block/index.md b/files/fr/web/css/containing_block/index.md
index 8e3bff8fb9..8e7730a57b 100644
--- a/files/fr/web/css/containing_block/index.md
+++ b/files/fr/web/css/containing_block/index.md
@@ -8,87 +8,78 @@ tags:
 translation_of: Web/CSS/Containing_block
 original_slug: Web/CSS/A_Propos_Du_Bloc_Conteneur
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le <strong>bloc englobant (<em>containing block</em>)</strong> affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#les_propri%c3%a9t%c3%a9s_des_bo%c3%aetes">zone de contenu</a> de l'ancêtre de <a href="/fr/docs/Web/HTML/Block-level_elements">bloc</a> le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.</p>
+Le **bloc englobant (_containing block_)** affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la [zone de contenu](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#les_propri%c3%a9t%c3%a9s_des_bo%c3%aetes) de l'ancêtre de [bloc](/fr/docs/Web/HTML/Block-level_elements) le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.
 
-<p>Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :</p>
+Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :
 
-<ol>
- <li>La zone de contenu (<em>content area</em>)</li>
- <li>La zone de remplissage (<em>padding area</em>)</li>
- <li>La zone de bordure (<em>border area</em>)</li>
- <li>La zone de marge (<em>margin area</em>)</li>
-</ol>
+1.  La zone de contenu (_content area_)
+2.  La zone de remplissage (_padding area_)
+3.  La zone de bordure (_border area_)
+4.  La zone de marge (_margin area_)
 
-<p><img alt="Diagram of the box model" src="box-model.png"></p>
+![Diagram of the box model](box-model.png)
 
-<div class="note">
-<p><strong>Note :</strong> Voir <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">cet article pour découvrir le modèle de boîtes</a> en CSS.</p>
-</div>
+> **Note :** Voir [cet article pour découvrir le modèle de boîtes](/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte) en CSS.
 
-<p>On pourrait penser que le bloc englobant d'un élément est toujours la zone de contenu de son élément parent. Toutefois, ce n'est pas toujours le cas. Voyons donc les facteurs qui déterminent ce bloc englobant.</p>
+On pourrait penser que le bloc englobant d'un élément est toujours la zone de contenu de son élément parent. Toutefois, ce n'est pas toujours le cas. Voyons donc les facteurs qui déterminent ce bloc englobant.
 
-<h2 id="Les_effets_du_bloc_englobant">Les effets du bloc englobant</h2>
+## Les effets du bloc englobant
 
-<p>Avant d'aller plus loin, voyons l'impact du bloc englobant sur un élément.</p>
+Avant d'aller plus loin, voyons l'impact du bloc englobant sur un élément.
 
-<p>Les dimensions et la position d'un élément sont souvent dépendants du bloc englobant. Les valeurs en pourcentages appliquées à des propriétés comme {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} sont calculées relativement à la taille du bloc englobant. Il en va de même pour les propriétés de décalage des éléments positionnés de façon absolue (c'est-à-dire avec {{cssxref("position")}} qui vaut <code>absolute</code> ou <code>fixed</code>).</p>
+Les dimensions et la position d'un élément sont souvent dépendants du bloc englobant. Les valeurs en pourcentages appliquées à des propriétés comme {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} sont calculées relativement à la taille du bloc englobant. Il en va de même pour les propriétés de décalage des éléments positionnés de façon absolue (c'est-à-dire avec {{cssxref("position")}} qui vaut `absolute` ou `fixed`).
 
-<h2 id="Identifier_le_bloc_englobant">Identifier le bloc englobant</h2>
+## Identifier le bloc englobant
 
-<p>Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément :</p>
+Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément :
 
-<ul>
- <li>Si la propriété <code>position</code><strong> </strong>vaut <code><strong>static</strong></code>, <code><strong>relative</strong></code> ou <code><strong>sticky</strong></code>, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec <code>display</code> qui vaut <code>inline-block</code>, <code>block</code> ou <code>list-item</code>) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même).</li>
- <li>Si la propriété <code>position</code> vaut <code><strong>absolute</strong></code>, le bloc englobant est constitué par le bord de la boîte de remplissage (<em>padding</em>) de l'ancêtre le plus proche dont la valeur de <code>position</code> est différente de <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code> ou <code>sticky</code>).</li>
- <li>Si la propriété <code>position</code> vaut <code><strong>fixed</strong></code>, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés).</li>
- <li>Si la propriété <code>position</code><strong> </strong>vaut <code><strong>absolute</strong></code> ou <code><strong>fixed</strong></code>, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a :
-  <ol>
-   <li>Une propriété {{cssxref("transform")}} ou {{cssxref("perspective")}} avec une valeur différente de <code>none</code></li>
-   <li>Une propriété {{cssxref("will-change")}} qui vaut <code>transform</code> ou <code>perspective</code></li>
-   <li>Une propriété {{cssxref("filter")}} différente de <code>none</code> ou une propriété <code>will-change</code> différente of <code>filter</code> (ne fonctionne que pour Firefox).</li>
-   <li>Une propriété {{cssxref("contain")}} qui vaut <code>paint</code>.</li>
-  </ol>
- </li>
-</ul>
+- Si la propriété `position`\*\* **vaut **`static`**, **`relative`** ou **`sticky`\*\*, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec `display` qui vaut `inline-block`, `block` ou `list-item`) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même).
+- Si la propriété `position` vaut **`absolute`**, le bloc englobant est constitué par le bord de la boîte de remplissage (_padding_) de l'ancêtre le plus proche dont la valeur de `position` est différente de `static` (`fixed`, `absolute`, `relative` ou `sticky`).
+- Si la propriété `position` vaut **`fixed`**, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés).
+- Si la propriété `position`\*\* **vaut **`absolute`** ou **`fixed`\*\*, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a :
 
-<div class="note">
-<p><strong>Note :</strong> Le bloc englobant contenant l'élément racine ({{HTMLElement("html")}}) est situé dans un rectangle appelé <strong>bloc englobant initial</strong>. Ce dernier a les dimensions de la zone d'affichage (<em>viewport</em>) ou de la page (pour les média paginés).</p>
-</div>
+  1.  Une propriété {{cssxref("transform")}} ou {{cssxref("perspective")}} avec une valeur différente de `none`
+  2.  Une propriété {{cssxref("will-change")}} qui vaut `transform` ou `perspective`
+  3.  Une propriété {{cssxref("filter")}} différente de `none` ou une propriété `will-change` différente of `filter` (ne fonctionne que pour Firefox).
+  4.  Une propriété {{cssxref("contain")}} qui vaut `paint`.
 
-<h2 id="Calcul_des_pourcentages_à_partir_du_bloc_englobant">Calcul des pourcentages à partir du bloc englobant</h2>
+> **Note :** Le bloc englobant contenant l'élément racine ({{HTMLElement("html")}}) est situé dans un rectangle appelé **bloc englobant initial**. Ce dernier a les dimensions de la zone d'affichage (_viewport_) ou de la page (pour les média paginés).
 
-<p>Comme mentionné ci-avant, lorsque certaines propriétés ont une valeur en pourcentage, la valeur calculée dépend du bloc contenant l'élément. Les propriétés qui fonctionnent de cette manière sont les propriétés <em><strong>box model</strong></em> et <em><strong>offset</strong></em> :</p>
+## Calcul des pourcentages à partir du bloc englobant
 
-<ol>
- <li>Les valeurs calculées des propriétés {{cssxref("height")}}, {{cssxref("top")}} et {{cssxref("bottom")}} sont construites à partir de la hauteur du bloc englobant.</li>
- <li>Les valeurs calculées des propriétés {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}} et {{cssxref("margin")}} sont calculées à partir de la largeur (<code>width</code>) du bloc englobant.</li>
-</ol>
+Comme mentionné ci-avant, lorsque certaines propriétés ont une valeur en pourcentage, la valeur calculée dépend du bloc contenant l'élément. Les propriétés qui fonctionnent de cette manière sont les propriétés **_box model_** et **_offset_** :
 
-<h2 id="Quelques_exemples">Quelques exemples</h2>
+1.  Les valeurs calculées des propriétés {{cssxref("height")}}, {{cssxref("top")}} et {{cssxref("bottom")}} sont construites à partir de la hauteur du bloc englobant.
+2.  Les valeurs calculées des propriétés {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}} et {{cssxref("margin")}} sont calculées à partir de la largeur (`width`) du bloc englobant.
 
-<p>Le code HTML utilisé pour les exemples suivants sera :</p>
+## Quelques exemples
 
-<pre class="brush: html">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
+Le code HTML utilisé pour les exemples suivants sera :
 
-<h3 id="Premier_exemple">Premier exemple</h3>
+```html
+<body>
+  <section>
+    <p>Et voici un paragraphe !</p>
+  </section>
+</body>
+```
 
-<p>Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.</p>
+### Premier exemple
 
-<pre class="brush: html hidden">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
+Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.
 
-<pre class="brush: css">body {
+```html hidden
+<body>
+  <section>
+    <p>Et voici un paragraphe !</p>
+  </section>
+</body>
+```
+
+```css
+body {
   background: beige;
 }
 
@@ -106,22 +97,24 @@ p {
   padding: 5%;  /* == 400px * .05 = 20px */
   background: cyan;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Premier_exemple','100%','300')}}</p>
+{{EmbedLiveSample('Premier_exemple','100%','300')}}
 
-<h3 id="Deuxième_exemple">Deuxième exemple</h3>
+### Deuxième exemple
 
-<p>Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}}<strong> </strong>car <code>&lt;section&gt;</code> n'est pas un conteneur de bloc en raison de <code>display: inline</code> et il ne crée pas de contexte de formatage.</p>
+Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}}\*\* \*\*car `<section>` n'est pas un conteneur de bloc en raison de `display: inline` et il ne crée pas de contexte de formatage.
 
-<pre class="brush: html">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
+```html
+<body>
+  <section>
+    <p>Et voici un paragraphe !</p>
+  </section>
+</body>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   background: beige;
 }
 
@@ -135,22 +128,24 @@ p {
   height: 200px;  /* Note: a percentage would be 0 */
   background: cyan;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Deuxième_exemple','100%','300')}}</p>
+{{EmbedLiveSample('Deuxième_exemple','100%','300')}}
 
-<h3 id="Troisième_exemple">Troisième exemple</h3>
+### Troisième exemple
 
-<p>Ici, le bloc englobant du paragraphe est <code>&lt;section&gt;</code> car la propriété <code>position</code> de ce dernier vaut <code>absolute</code>. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait <code>border-box</code>).</p>
+Ici, le bloc englobant du paragraphe est `<section>` car la propriété `position` de ce dernier vaut `absolute`. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait `border-box`).
 
-<pre class="brush: html hidden">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
+```html hidden
+<body>
+  <section>
+    <p>Et voici un paragraphe !</p>
+  </section>
+</body>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   background: beige;
 }
 
@@ -172,22 +167,24 @@ p {
   padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
   background: cyan;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Troisième_exemple','100%','300')}}</p>
+{{EmbedLiveSample('Troisième_exemple','100%','300')}}
 
-<h3 id="Quatrième_exemple">Quatrième exemple</h3>
+### Quatrième exemple
 
-<p>Dans cet exemple, la propriété <code>position</code> du paragraphe vaut <code>fixed</code>. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le <em>viewport</em> pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.</p>
+Dans cet exemple, la propriété `position` du paragraphe vaut `fixed`. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le _viewport_ pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.
 
-<pre class="brush: html hidden">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
+```html hidden
+<body>
+  <section>
+    <p>Et voici un paragraphe !</p>
+  </section>
+</body>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   background: beige;
 }
 
@@ -207,22 +204,24 @@ p {
   padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
   background: cyan;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Quatrième_exemple','100%','300')}}</p>
+{{EmbedLiveSample('Quatrième_exemple','100%','300')}}
 
-<h3 id="Cinquième_exemple">Cinquième exemple</h3>
+### Cinquième exemple
 
-<p>Dans cet exemple, la propriété <code>position</code> du paragraphe vaut <code>absolute</code>. Son bloc englobant est donc <code>&lt;section&gt;</code> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas <code>none</code>.</p>
+Dans cet exemple, la propriété `position` du paragraphe vaut `absolute`. Son bloc englobant est donc `<section>` car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas `none`.
 
-<pre class="brush: html hidden">&lt;body&gt;
-  &lt;section&gt;
-    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
-  &lt;/section&gt;
-&lt;/body&gt;
-</pre>
+```html hidden
+<body>
+  <section>
+    <p>Et voici un paragraphe !</p>
+  </section>
+</body>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   background: beige;
 }
 
@@ -243,12 +242,10 @@ p {
   padding: 5%;  /* == 20px */
   background: cyan;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Cinquième_exemple','100%','300')}}</p>
+{{EmbedLiveSample('Cinquième_exemple','100%','300')}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des déclarations CSS dans un certain état.</li>
-</ul>
+- La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des déclarations CSS dans un certain état.
diff --git a/files/fr/web/css/content-visibility/index.md b/files/fr/web/css/content-visibility/index.md
index 91d03762bf..77aa2ea185 100644
--- a/files/fr/web/css/content-visibility/index.md
+++ b/files/fr/web/css/content-visibility/index.md
@@ -1,16 +1,17 @@
 ---
 title: content-visibility
 slug: Web/CSS/content-visibility
-browser-compat: css.properties.content-visibility
 translation_of: Web/CSS/content-visibility
+browser-compat: css.properties.content-visibility
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>content-visibility</code></strong> détermine si un élément affiche son contenu ou non, tout en forçant un solide jeu de restrictions permettant aux agents utilisateurs de potentiellement omettre de larges pans de la mise en page et du travail de rendu jusqu'au moment où le contenu doit être affiché. Fondamentalement, cela permet à l'agent utilisateur d'éviter le travail de rendu d'un élément (comprenant sa mise en page et sa peinture) tant qu'il n'y en a pas besoin — ce qui accélère la vitesse de chargement de la page initiale.</p>
+La propriété [CSS](/fr/docs/Web/CSS) **`content-visibility`** détermine si un élément affiche son contenu ou non, tout en forçant un solide jeu de restrictions permettant aux agents utilisateurs de potentiellement omettre de larges pans de la mise en page et du travail de rendu jusqu'au moment où le contenu doit être affiché. Fondamentalement, cela permet à l'agent utilisateur d'éviter le travail de rendu d'un élément (comprenant sa mise en page et sa peinture) tant qu'il n'y en a pas besoin — ce qui accélère la vitesse de chargement de la page initiale.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 content-visibility: visible;
 content-visibility: hidden;
 content-visibility: auto;
@@ -20,53 +21,53 @@ content-visibility: inherit;
 content-visibility: initial;
 content-visibility: revert;
 content-visibility: unset;
-</pre>
+```
 
-<h3 id="values">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>visible</code></dt>
- <dd>Aucun effet. Les contenus de l'élément sont disposés et rendus normalement.</dd>
- <dt><code>hidden</code></dt>
- <dd>L'élément n'affiche pas son contenu. Les contenus de l'élément ne doivent pas être accessibles aux fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il n'est pas possible de les sélectionner ou d'y placer le focus. Cela est similaire à l'utilisation de <code>display: none</code> sur ces contenus.</dd>
- <dt><code>auto</code></dt>
- <dd>L'élément suit les restrictions de mise en page, de style et de peinture. Si l'élément n'est pas pertinent pour l'utilisateur, cela évite également son contenu. Contrairement à la valeur <code>hidden</code>, le contenu évité doit toujours être disponible normalement pour les fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il est possible de les sélectionner ou d'y placer le focus.</dd>
-</dl>
+- `visible`
+  - : Aucun effet. Les contenus de l'élément sont disposés et rendus normalement.
+- `hidden`
+  - : L'élément n'affiche pas son contenu. Les contenus de l'élément ne doivent pas être accessibles aux fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il n'est pas possible de les sélectionner ou d'y placer le focus. Cela est similaire à l'utilisation de `display: none` sur ces contenus.
+- `auto`
+  - : L'élément suit les restrictions de mise en page, de style et de peinture. Si l'élément n'est pas pertinent pour l'utilisateur, cela évite également son contenu. Contrairement à la valeur `hidden`, le contenu évité doit toujours être disponible normalement pour les fonctionnalités de l'agent utilisateur telles que la recherche au sein de la page, la navigation par ordre de tabulation, etc., et il est possible de les sélectionner ou d'y placer le focus.
 
-<h2 id="formal_definition">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Les titres et les autres contenus seront supprimés par <code>content-visibility</code> s'ils sont considérés comme s'affichant en dehors de l'écran. Cela signifie que les utilisateurs de lecteurs d'écrans pourraient perdre le bénéfice d'avoir une page complète disponible à des fins de vocalisation.</p>
+Les titres et les autres contenus seront supprimés par `content-visibility` s'ils sont considérés comme s'affichant en dehors de l'écran. Cela signifie que les utilisateurs de lecteurs d'écrans pourraient perdre le bénéfice d'avoir une page complète disponible à des fins de vocalisation.
 
-<p>Pour plus d'informations, consultez l'article <a href="https://marcysutton.com/content-visibility-accessible-semantics">Content-visibility and Accessible Semantics</a> <small>(en anglais)</small>.</p>
+Pour plus d'informations, consultez l'article [Content-visibility and Accessible Semantics](https://marcysutton.com/content-visibility-accessible-semantics) (en anglais).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="using_auto_to_reduce_rendering_cost_of_long_pages">Utilisation de la valeur auto pour réduire les coûts de rendu des pages longues</h3>
+### Utilisation de la valeur auto pour réduire les coûts de rendu des pages longues
 
-<p>L'exemple suivant montre l'utilisation de la valeur <code>auto</code> pour éviter la peinture et le rendu des sections situées en dehors de l'écran. Cela aide à la fois le chargement et les interactions sur la page, car le contenu situé en dehors de la fenêtre d'affichage n'est pas rendu.</p>
+L'exemple suivant montre l'utilisation de la valeur `auto` pour éviter la peinture et le rendu des sections situées en dehors de l'écran. Cela aide à la fois le chargement et les interactions sur la page, car le contenu situé en dehors de la fenêtre d'affichage n'est pas rendu.
 
-<pre class="brush: html">&lt;style&gt;
+```html
+<style>
 section {
   content-visibility: auto;
   contain-intrinsic-size: 0 500px;
 }
 
-&lt;section&gt;...
-&lt;section&gt;...
-&lt;section&gt;...
-&lt;section&gt;...
+<section>...
+<section>...
+<section>...
+<section>...
 ...
-</pre>
+```
 
-<h3 id="using_hidden_to_manually_manage_visibility">Utilisation de la valeur hidden pour gérer la visibilité manuellement</h3>
+### Utilisation de la valeur hidden pour gérer la visibilité manuellement
 
-<p>L'exemple suivant montre qu'il est possible de gérer la visibilité à l'aide d'un script. La valeur ajoutée de l'utilisation de <code>content-visibility: hidden</code> par exemple à la place de <code>display: none</code> est que le contenu rendu masqué avec <code>content-visibility</code> préservera l'état de son rendu. Cela signifie que si le contenu est à nouveau affiché, il sera rendu plus rapidement qu'en modifiant la propriété <code>display</code>.</p>
+L'exemple suivant montre qu'il est possible de gérer la visibilité à l'aide d'un script. La valeur ajoutée de l'utilisation de `content-visibility: hidden` par exemple à la place de `display: none` est que le contenu rendu masqué avec `content-visibility` préservera l'état de son rendu. Cela signifie que si le contenu est à nouveau affiché, il sera rendu plus rapidement qu'en modifiant la propriété `display`.
 
-<pre class="brush: html">&lt;style&gt;
+```html
+<style>
 .hidden {
   content-visibility: hidden;
   /* lorsqu'il est masqué, nous voulons que la taille de l'élément soit la même que si celui-ci avait un élément enfant de 0x500 pixels */
@@ -78,22 +79,20 @@ section {
   contain: style layout paint;
 }
 
-&lt;div class=hidden&gt;...
-&lt;div class=visible&gt;...
-&lt;div class=hidden&gt;...
-&lt;div class=hidden&gt;...
-</pre>
+<div class=hidden>...
+<div class=visible>...
+<div class=hidden>...
+<div class=hidden>...
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://web.dev/content-visibility/">content-visibility : la nouvelle propriété CSS qui améliore vos performances de rendu</a> <small>(en anglais)</small> (web.dev)</li>
-</ul>
+- [content-visibility : la nouvelle propriété CSS qui améliore vos performances de rendu](https://web.dev/content-visibility/) (en anglais) (web.dev)
diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md
index cd5ad04b5f..67c293ba5a 100644
--- a/files/fr/web/css/content/index.md
+++ b/files/fr/web/css/content/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/content
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>content</code></strong> est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété <code>content</code> sont des <em><a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés anonymes</a>.</em></p>
+La propriété **`content`** est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété `content` sont des _[éléments remplacés anonymes](/fr/docs/Web/CSS/Replaced_element)._
 
-<pre class="brush: css no-line-numbers">/* Des mots-clés qui ne peuvent pas être mélangés
+```css
+/* Des mots-clés qui ne peuvent pas être mélangés
   avec d'autres valeurs */
 content: normal;
 content: none;
@@ -20,8 +21,8 @@ content: none;
 content: url("http://www.example.com/test.png");
 content: linear-gradient(#e66465, #9198e5);
 
-/* Une valeur &lt;string&gt;, les caractères non-latin */
-/* doivent être échappées par ex. \000A9 for &amp;copy; */
+/* Une valeur <string>, les caractères non-latin */
+/* doivent être échappées par ex. \000A9 for &copy; */
 content: 'prefix';
 
 /* Valeurs utilisant un compteur */
@@ -46,56 +47,57 @@ content: open-quote chapter_counter;
 content: inherit;
 content: initial;
 content: unset;
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>Le pseudo-élément n'est pas généré.</dd>
- <dt><code>normal</code></dt>
- <dd>Résulte en <code>none</code> pour les pseudo-éléments <code>:before</code> et <code>:after</code>.</dd>
- <dt>{{cssxref("&lt;string&gt;")}}</dt>
- <dd>Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (<code>\000A9</code> représentera par exemple le symbole ©).</dd>
- <dt>{{cssxref("&lt;image&gt;")}}</dt>
- <dd>Une image (valeur de type {{cssxref("&lt;image&gt;")}}) de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;gradient&gt;")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher.</dd>
- <dt><code>counter()</code> ou <code>counters()</code> (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}})</dt>
- <dd>Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (<code>decimal</code> par défaut). La seconde a également deux formes : <code>counters(<var>name</var>, <var>string</var>)</code> ou <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code>. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (<code>decimal</code> par défaut). Voir <a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">la section sur les compteurs automatiques</a> et sur la numérotation pour plus d'informations.</dd>
- <dt><code>attr(X)</code></dt>
- <dd>Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.</dd>
- <dt><code>open-quote</code> | <code>close-quote</code></dt>
- <dd>Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.</dd>
- <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
- <dd>N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Syntaxe
+
+### Valeurs
+
+- `none`
+  - : Le pseudo-élément n'est pas généré.
+- `normal`
+  - : Résulte en `none` pour les pseudo-éléments `:before` et `:after`.
+- {{cssxref("&lt;string&gt;")}}
+  - : Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©).
+- {{cssxref("&lt;image&gt;")}}
+  - : Une image (valeur de type {{cssxref("&lt;image&gt;")}}) de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;gradient&gt;")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher.
+- `counter()` ou `counters()` (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}})
+  - : Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : '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 ; il est formaté selon le style indiqué (`decimal` par défaut). La seconde a également deux formes : `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (`decimal` par défaut). Voir [la section sur les compteurs automatiques](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) et sur la numérotation pour plus d'informations.
+- `attr(X)`
+  - : Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.
+- `open-quote` | `close-quote`
+  - : Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.
+- `no-open-quote` | `no-close-quote`
+  - : N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Titres_et_citations">Titres et citations</h3>
+### Titres et citations
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
-&lt;p&gt; Commençons par une citation de Sir Tim Berners-Lee,
-    &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;
-        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.&lt;/q&gt;  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
-&lt;/p&gt;
+```html
+<h1>5</h1>
+<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.
+</p>
 
-&lt;h1&gt;6&lt;/h1&gt;
-&lt;p&gt; Citons le manifeste Mozilla
-    &lt;q cite="http://www.mozilla.org/about/manifesto/"&gt;
+<h1>6</h1>
+<p> Citons le manifeste Mozilla
+    <q cite="http://www.mozilla.org/about/manifesto/">
         Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">q {
+```css
+q {
     color: #00008B;
     font-style: italic;
 }
@@ -103,67 +105,79 @@ content: unset;
 q::before   { content: open-quote }
 q::after    { content: close-quote }
 
-h1::before  { content: "Chapitre "; }</pre>
+h1::before  { content: "Chapitre "; }
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Titres_et_citations', 460, 100)}}</p>
+{{EmbedLiveSample('Titres_et_citations', 460, 100)}}
 
-<h3 id="Ajouter_une_icône_avant_un_lien">Ajouter une icône avant un lien</h3>
+### Ajouter une icône avant un lien
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;a href="http://www.mozilla.org/fr/"&gt;Accueil&lt;/a&gt;</pre>
+```html
+<a href="http://www.mozilla.org/fr/">Accueil</a>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">a::before{
+```css
+a::before{
     content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: ";
     font:    x-small Arial,freeSans,sans-serif;
     color:   gray;
-}</pre>
+}
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}</p>
+{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}
 
-<h3 id="Utiliser_les_classes">Utiliser les classes</h3>
+### Utiliser les classes
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h2&gt;Top des ventes&lt;/h2&gt;
-&lt;ol&gt;
-    &lt;li&gt;Thriller politique&lt;/li&gt;
-    &lt;li class="nouveaute"&gt;Histoires effrayantes&lt;/li&gt;
-    &lt;li&gt;Ma biographie&lt;/li&gt;
-    &lt;li class="nouveaute"&gt;Bit-lit&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<h2>Top des ventes</h2>
+<ol>
+    <li>Thriller politique</li>
+    <li class="nouveaute">Histoires effrayantes</li>
+    <li>Ma biographie</li>
+    <li class="nouveaute">Bit-lit</li>
+</ol>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.nouveaute::after {
+```css
+.nouveaute::after {
     content: " Nouveau !";
     color: red;
-}</pre>
+}
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}</p>
+{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}
 
-<h3 id="Utiliser_les_attributs_d’image_et_d’élément">Utiliser les attributs d’image et d’élément</h3>
+### Utiliser les attributs d’image et d’élément
 
-<p>Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.</p>
+Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.
 
-<h4 id="HTML_4">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;a id="moz" href="https://www.mozilla.org/"&gt;Page d'accueil Mozilla&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li><a id="moz" href="https://www.mozilla.org/">Page d'accueil Mozilla</a></li>
+  <li><a id="mdn" href="https://developer.mozilla.org/">Mozilla Developer Network</a></li>
+</ul>
+```
 
-<h4 id="CSS_4">CSS</h4>
+#### CSS
 
-<pre class="brush: css">a {
+```css
+a {
   text-decoration: none;
   border-bottom: 3px dotted navy;
 }
@@ -182,82 +196,65 @@ a::after {
 
 li {
   margin: 1em;
-}</pre>
+}
+```
 
-<h4 id="Résultat_4">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}</p>
+{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}
 
-<h3 id="Remplacer_un_élément">Remplacer un élément</h3>
+### Remplacer un élément
 
-<p>Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;image&gt;")}} . Le contenu ajouté avec <code>::before</code> ou avec <code>::after</code> ne sera plus généré car l'élément sera devenu un élément remplacé.</p>
+Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;image&gt;")}} . Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé.
 
-<h4 id="HTML_5">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div id="replaced"&gt;Mozilla&lt;/div&gt;
-</pre>
+```html
+<div id="replaced">Mozilla</div>
+```
 
-<h4 id="CSS_5">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#replaced {
+```css
+#replaced {
   content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
 }
 
 #replaced::after { /* Ceci ne sera pas affiché, */
                    /* l'élément sera un élément remplacé */
   content: " (" attr(id) ")";
-}</pre>
+}
+```
 
-<h4 id="Résultat_5">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}</p>
+{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Le contenu généré par CSS n'est pas inclus dans le <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Pour cette raison, il ne fait pas partie de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">arbre d'accessibilité</a> et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.</p>
+Le contenu généré par CSS n'est pas inclus dans le [DOM](/fr/docs/Web/API/Document_Object_Model/Introduction). Pour cette raison, il ne fait pas partie de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.
 
-<ul>
- <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)](https://tink.uk/accessibility-support-for-css-generated-content/)
+- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- [_Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Content", "#content-property", "content")}}</td>
-   <td>{{Spec2("CSS3 Content")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#content', 'content')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.content")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Spécifications
 
-<ul>
- <li>{{cssxref("::after")}}</li>
- <li>{{cssxref("::before")}}</li>
- <li>{{cssxref("quotes")}}</li>
- <li>{{Cssxref("::marker")}}</li>
- <li>{{cssxref("url()", "url()")}}</li>
-</ul>
+| Spécification                                                                    | État                             | Commentaires         |
+| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("CSS3 Content", "#content-property", "content")}} | {{Spec2("CSS3 Content")}} |                      |
+| {{SpecName('CSS2.1', 'generate.html#content', 'content')}}     | {{Spec2('CSS2.1')}}         | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.content")}}
+
+## Voir aussi
+
+- {{cssxref("::after")}}
+- {{cssxref("::before")}}
+- {{cssxref("quotes")}}
+- {{Cssxref("::marker")}}
+- {{cssxref("url()", "url()")}}
diff --git a/files/fr/web/css/counter()/index.md b/files/fr/web/css/counter()/index.md
index 073e209928..d211d5092a 100644
--- a/files/fr/web/css/counter()/index.md
+++ b/files/fr/web/css/counter()/index.md
@@ -8,56 +8,55 @@ tags:
   - Reference
 translation_of: Web/CSS/counter()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <code><strong>counter</strong></code><strong><code>()</code></strong> renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("&lt;string&gt;")}} est attendue.</p>
+La fonction CSS **`counter`\*\***`()`\*\* renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("&lt;string&gt;")}} est attendue.
 
-<pre class="notranslate">/* Usage simple */
-counter(nomcompteur);
+    /* Usage simple */
+    counter(nomcompteur);
 
-/* Modifier le type d'affichage du compteur */
-counter(nomcompteur, upper-roman)</pre>
+    /* Modifier le type d'affichage du compteur */
+    counter(nomcompteur, upper-roman)
 
-<p>Un <a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">compteur</a> CSS n'a aucun effet visible en lui-même. C'est la fonction <code>counter()</code> (ainsi que <code>counters()</code>) qui permet d'utiliser la chaîne de caractère ou l'image résultante.</p>
+Un [compteur](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) CSS n'a aucun effet visible en lui-même. C'est la fonction `counter()` (ainsi que `counters()`) qui permet d'utiliser la chaîne de caractère ou l'image résultante.
 
-<div class="note">
-<p><strong>Note :</strong> La fonction <code>counter()</code> peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.</p>
+> **Note :** La fonction `counter()` peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.
+>
+> Veillez à consulter [le tableau de compatibilité des navigateurs](#browser_compatibility) avant d'utiliser ces fonctionnalités en production.
 
-<p>Veillez à consulter <a href="#browser_compatibility">le tableau de compatibilité des navigateurs</a> avant d'utiliser ces fonctionnalités en production.</p>
-</div>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+### Valeurs
 
-<h3 id="Valeurs">Valeurs</h3>
+- {{cssxref("&lt;custom-ident&gt;")}}
+  - : Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et  {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés `none`, `unset`, `initial` ou `inherit`.
+- `<counter-style>`
+  - : Un nom de style de compteur ou une fonction [`symbols()`](</fr/docs/Web/CSS/symbols()>). Le nom d'un style de compteur peut indiquer un compteur [alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien](/fr/docs/Web/CSS/list-style-type#valeurs) ou un autre [style de compteur prédéfini](/fr/docs/Web/CSS/CSS_Counter_Styles). Si cette valeur n'est pas fournie, le style par défaut est décimal.
+- `none`
+  - : Représente la chaîne de caractère vide.
 
-<dl>
- <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
- <dd>Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et  {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd>
- <dt><code>&lt;counter-style&gt;</code></dt>
- <dd>Un nom de style de compteur ou une fonction <a href="/fr/docs/Web/CSS/symbols()"><code>symbols()</code></a>. Le nom d'un style de compteur peut indiquer un compteur <a href="/fr/docs/Web/CSS/list-style-type#valeurs">alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien</a> ou un autre <a href="/fr/docs/Web/CSS/CSS_Counter_Styles">style de compteur prédéfini</a>. Si cette valeur n'est pas fournie, le style par défaut est décimal.</dd>
- <dt><code>none</code></dt>
- <dd>Représente la chaîne de caractère vide.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules">Comparaison entre compteur par défaut et chiffres romains majuscules</h3>
+### Comparaison entre compteur par défaut et chiffres romains majuscules
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html;">&lt;ol&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">ol {
+```css
+ol {
   counter-reset: listCounter;
 }
 li {
@@ -66,25 +65,29 @@ li {
 li::after {
   content: "[" counter(listCounter) "] == ["
                counter(listCounter, upper-roman) "]";
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules", "100%", 150)}}</p>
+{{EmbedLiveSample("Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules", "100%", 150)}}
 
-<h3 id="Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule">Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule</h3>
+### Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">ol {
+```css
+ol {
   counter-reset: count;
 }
 
@@ -95,46 +98,28 @@ li {
 li::after {
   content: "[" counter(count, decimal-leading-zero) "] == ["
                counter(count, lower-alpha) "]";
-}</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule", "100%", 150)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
-   <td>{{Spec2("CSS3 Lists")}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.counter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Utiliser les compteurs CSS</a></li>
- <li>{{cssxref("counter-reset")}}</li>
- <li>{{cssxref("counter-increment")}}</li>
- <li>{{cssxref("@counter-style")}}</li>
- <li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counters()">counters()</a></code></li>
-</ul>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule", "100%", 150)}}
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}} | {{Spec2("CSS3 Lists")}} | Aucune modification. |
+| {{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}} | {{Spec2("CSS2.1")}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.counter")}}
+
+## Voir aussi
+
+- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+- {{cssxref("counter-reset")}}
+- {{cssxref("counter-increment")}}
+- {{cssxref("@counter-style")}}
+- La fonction CSS [`counters()`](</fr/docs/Web/CSS/counters()>)
diff --git a/files/fr/web/css/counter-increment/index.md b/files/fr/web/css/counter-increment/index.md
index d9e0aa20db..b42659b395 100644
--- a/files/fr/web/css/counter-increment/index.md
+++ b/files/fr/web/css/counter-increment/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/counter-increment
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>counter-increment</code></strong> est utilisée afin d'augmenter la valeur d'un <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteur CSS</a> d'une valeur donnée.</p>
+La propriété **`counter-increment`** est utilisée afin d'augmenter la valeur d'un [compteur CSS](/fr/docs/Web/CSS/Compteurs_CSS) d'une valeur donnée.
 
-<div>{{EmbedInteractiveExample("pages/css/counter-increment.html")}}</div>
+{{EmbedInteractiveExample("pages/css/counter-increment.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> La valeur du compteur peut être réinitialisée avec une valeur arbitraire grâce à la propriété {{cssxref("counter-reset")}}.</p>
-</div>
+> **Note :** La valeur du compteur peut être réinitialisée avec une valeur arbitraire grâce à la propriété {{cssxref("counter-reset")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* On incrémente 'mon-compteur' de 1 */
+```css
+/* On incrémente 'mon-compteur' de 1 */
 counter-increment: mon-compteur;
 
 /* On réduit 'mon-compteur' de 1 */
@@ -36,35 +35,32 @@ counter-increment: none;
 counter-increment: inherit;
 counter-increment: initial;
 counter-increment: unset;
-</pre>
+```
 
-<p>La propriété <code>counter-increment</code> peut être définie de deux façons :</p>
+La propriété `counter-increment` peut être définie de deux façons :
 
-<ul>
- <li>Avec le mot-clé <code>none</code></li>
- <li>Avec un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) qui identifie le compteur et qui est éventuellement suivi par un entier ({{cssxref("&lt;integer&gt;")}}). On peut définir autant de compteurs qu'on veut, chacun étant séparé par un espace.</li>
-</ul>
+- Avec le mot-clé `none`
+- Avec un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) qui identifie le compteur et qui est éventuellement suivi par un entier ({{cssxref("&lt;integer&gt;")}}). On peut définir autant de compteurs qu'on veut, chacun étant séparé par un espace.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
- <dd>Le nom du compteur qu'on souhaite incrémenter.L'identifiant peut se composer d'une combinaison de lettres entre <code>a</code> et <code>z</code> (sensible à la casse), de nombres compris entre <code>0</code> et <code>9</code>, de tirets bas (<code>_</code> ou <em>underscores</em>) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code> quelque soit la combinaison de la casse.</dd>
- <dt>{{cssxref("&lt;integer&gt;")}}</dt>
- <dd>La valeur qu'on souhaite ajouter au compteur. La valeur par défaut est 1 (le compteur est alors incrémenté de 1).</dd>
- <dt><code>none</code></dt>
- <dd>Aucun compteur n'est incrémenté. Cette valeur est utilisée comme valeur par défaut et permet également d'annuler des incréments décrits par des règles moins spécifiques.</dd>
-</dl>
+- {{cssxref("&lt;custom-ident&gt;")}}
+  - : Le nom du compteur qu'on souhaite incrémenter.L'identifiant peut se composer d'une combinaison de lettres entre `a` et `z` (sensible à la casse), de nombres compris entre `0` et `9`, de tirets bas (`_` ou _underscores_) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être `none`, `unset`, `initial` ou `inherit` quelque soit la combinaison de la casse.
+- {{cssxref("&lt;integer&gt;")}}
+  - : La valeur qu'on souhaite ajouter au compteur. La valeur par défaut est 1 (le compteur est alors incrémenté de 1).
+- `none`
+  - : Aucun compteur n'est incrémenté. Cette valeur est utilisée comme valeur par défaut et permet également d'annuler des incréments décrits par des règles moins spécifiques.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">ol {
+```css
+ol {
   list-style-type: none;
   counter-reset: compteListe;
 }
@@ -73,57 +69,39 @@ li::before {
   counter-increment: compteListe 2;
   content: counter(compteListe) " ";
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;Et de deux&lt;/li&gt;
-  &lt;li&gt;Et de quatre&lt;/li&gt;
-  &lt;li&gt;Et de six&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Lists", "#propdef-counter-increment", "counter-increment")}}</td>
-   <td>{{Spec2("CSS3 Lists")}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.counter-increment")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
- <li>{{cssxref("counter-reset")}}</li>
- <li>{{cssxref("counter-set")}}</li>
- <li>{{cssxref("@counter-style")}}</li>
- <li>Les fonctions CSS {{cssxref("counter")}} et {{cssxref("counters")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<ol>
+  <li>Et de deux</li>
+  <li>Et de quatre</li>
+  <li>Et de six</li>
+</ol>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("CSS3 Lists", "#propdef-counter-increment", "counter-increment")}}             | {{Spec2("CSS3 Lists")}} | Aucune modification. |
+| {{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}} | {{Spec2("CSS2.1")}}         | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.counter-increment")}}
+
+## Voir aussi
+
+- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/Compteurs_CSS)
+- {{cssxref("counter-reset")}}
+- {{cssxref("counter-set")}}
+- {{cssxref("@counter-style")}}
+- Les fonctions CSS {{cssxref("counter")}} et {{cssxref("counters")}}
diff --git a/files/fr/web/css/counter-reset/index.md b/files/fr/web/css/counter-reset/index.md
index 1b46b41b63..d70d6715e1 100644
--- a/files/fr/web/css/counter-reset/index.md
+++ b/files/fr/web/css/counter-reset/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/counter-reset
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>counter-reset</code></strong> permet de réinitialiser un <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteur CSS</a> avec une valeur donnée.</p>
+La propriété **`counter-reset`** permet de réinitialiser un [compteur CSS](/fr/docs/Web/CSS/Compteurs_CSS) avec une valeur donnée.
 
-<div>{{EmbedInteractiveExample("pages/css/counter-reset.html")}}</div>
+{{EmbedInteractiveExample("pages/css/counter-reset.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> Pour incrémenter ou décrémenter le compteur, on pourra utiliser la propriété CSS {{cssxref("counter-increment")}}.</p>
-</div>
+> **Note :** Pour incrémenter ou décrémenter le compteur, on pourra utiliser la propriété CSS {{cssxref("counter-increment")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* On réinitialise nom-compteur à 0 */
+```css
+/* On réinitialise nom-compteur à 0 */
 counter-reset: nom-compteur;
 
 /* On réinitialise nom-compteur à -1 */
@@ -37,35 +36,32 @@ counter-reset: none;
 counter-reset: inherit;
 counter-reset: initial;
 counter-reset: unset;
-</pre>
+```
 
-<p>Cette propriété se définit grâce à :</p>
+Cette propriété se définit grâce à :
 
-<ul>
- <li>un identifiant (<code>&lt;custom-ident&gt;</code>) qui représente le compteur, éventuellement suivi par un entier (<code>&lt;integer&gt;</code>). Cela peut être répété plusieurs fois avec un espace en tant que séparateur.</li>
- <li>ou grâce au mot-clé <code>none</code>.</li>
-</ul>
+- un identifiant (`<custom-ident>`) qui représente le compteur, éventuellement suivi par un entier (`<integer>`). Cela peut être répété plusieurs fois avec un espace en tant que séparateur.
+- ou grâce au mot-clé `none`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
- <dd>Le nom du compteur qu'on souhaite incrémenter. L'identifiant peut se composer d'une combinaison de lettres entre <code>a</code> et <code>z</code> (sensible à la casse), de nombres compris entre <code>0</code> et <code>9</code>, de tirets bas (<code>_</code> ou <em>underscores</em>) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code> quelque soit la combinaison de la casse.</dd>
- <dt>{{cssxref("&lt;integer&gt;")}}</dt>
- <dd>La valeur avec laquelle on souhaite réinitialiser le compteur pour chaque occurrence de l'élément. La valeur par défaut est <code>0</code>.</dd>
- <dt><code>none</code></dt>
- <dd>Un mot-clé indiquant qu'il ne faut pas réinitialiser le compteur. Cette valeur peut être utilisée pour masquer des réinitialisations provenant de règles moins spécifiques.</dd>
-</dl>
+- {{cssxref("custom-ident", "&lt;custom-ident&gt;")}}
+  - : Le nom du compteur qu'on souhaite incrémenter. L'identifiant peut se composer d'une combinaison de lettres entre `a` et `z` (sensible à la casse), de nombres compris entre `0` et `9`, de tirets bas (`_` ou _underscores_) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être `none`, `unset`, `initial` ou `inherit` quelque soit la combinaison de la casse.
+- {{cssxref("&lt;integer&gt;")}}
+  - : La valeur avec laquelle on souhaite réinitialiser le compteur pour chaque occurrence de l'élément. La valeur par défaut est `0`.
+- `none`
+  - : Un mot-clé indiquant qu'il ne faut pas réinitialiser le compteur. Cette valeur peut être utilisée pour masquer des réinitialisations provenant de règles moins spécifiques.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">ol {
+```css
+ol {
   list-style-type: none;
   counter-reset: compteListe;
 }
@@ -78,60 +74,42 @@ li::before {
 .reinit {
   counter-reset: compteListe;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;Et de un&lt;/li&gt;
-  &lt;li&gt;Et de deux&lt;/li&gt;
-  &lt;li&gt;Et de trois&lt;/li&gt;
-  &lt;li class="reinit"&gt;Et ça repart&lt;/li&gt;
-  &lt;li&gt;Et de deux&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.counter-reset")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a></li>
- <li>{{cssxref("counter-increment")}}</li>
- <li>{{cssxref("@counter-style")}}</li>
- <li>{{cssxref("counter-set")}}</li>
- <li>{{cssxref("counter")}} et {{cssxref("counters")}}</li>
- <li>{{cssxref("content")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<ol>
+  <li>Et de un</li>
+  <li>Et de deux</li>
+  <li>Et de trois</li>
+  <li class="reinit">Et ça repart</li>
+  <li>Et de deux</li>
+</ol>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}                         | {{Spec2('CSS3 Lists')}} | Aucune modification. |
+| {{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}} | {{Spec2('CSS2.1')}}         | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.counter-reset")}}
+
+## Voir aussi
+
+- [Les compteurs CSS](/fr/docs/Web/CSS/Compteurs_CSS)
+- {{cssxref("counter-increment")}}
+- {{cssxref("@counter-style")}}
+- {{cssxref("counter-set")}}
+- {{cssxref("counter")}} et {{cssxref("counters")}}
+- {{cssxref("content")}}
diff --git a/files/fr/web/css/counter-set/index.md b/files/fr/web/css/counter-set/index.md
index 2059dc4ad1..a2c2cbe72b 100644
--- a/files/fr/web/css/counter-set/index.md
+++ b/files/fr/web/css/counter-set/index.md
@@ -7,17 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/counter-set
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>counter-set</code></strong> définit un <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteur CSS</a> avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément.</p>
+La propriété CSS **`counter-set`** définit un [compteur CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS) avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément.
 
-<div class="note">
-<p><strong>Note :</strong> La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}.</p>
-</div>
+> **Note :** La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Définir "mon-compteur" avec la valeur 0 */
+```css
+/* Définir "mon-compteur" avec la valeur 0 */
 counter-set: mon-compteur;
 
 /* Définir "mon-compteur" avec la valeur -1 */
@@ -34,72 +33,54 @@ counter-set: none;
 counter-set: inherit;
 counter-set: initial;
 counter-set: unset;
-</pre>
+```
 
-<p>La propriété <code>counter-set</code> est définit avec l'une de ces deux valeurs :</p>
+La propriété `counter-set` est définit avec l'une de ces deux valeurs :
 
-<ul>
- <li>Une valeur de type <code>&lt;custom-ident&gt;</code> qui fournit le nom du compteur, éventuellement suivie d'un entier (<code>&lt;integer&gt;</code>). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace.</li>
- <li>Le mot-clé <code>none</code>.</li>
-</ul>
+- Une valeur de type `<custom-ident>` qui fournit le nom du compteur, éventuellement suivie d'un entier (`<integer>`). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace.
+- Le mot-clé `none`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
- <dd>Le nom du compteur à définir ou à modifier.</dd>
- <dt>{{cssxref("&lt;integer&gt;")}}</dt>
- <dd>La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera <code>0</code>. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur.</dd>
- <dt><code>none</code></dt>
- <dd>Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration <code>counter-set</code> d'une règle moins spécifique.</dd>
-</dl>
+- {{cssxref("custom-ident", "&lt;custom-ident&gt;")}}
+  - : Le nom du compteur à définir ou à modifier.
+- {{cssxref("&lt;integer&gt;")}}
+  - : La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera `0`. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur.
+- `none`
+  - : Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration `counter-set` d'une règle moins spécifique.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:css">h1 {
+```css
+h1 {
   counter-set: chapitre section 1 page;
   /* Les compteurs "chapitre" et "page" sont
      définis à 0, et le compteur "section"
      est défini à 1. */
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#counter-set', 'counter-set')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.counter-set")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
- <li>{{cssxref("counter-increment")}}</li>
- <li>{{cssxref("counter-reset")}}</li>
- <li>{{cssxref("@counter-style")}}</li>
- <li>Les fonctions {{cssxref("counter")}} et {{cssxref("counters")}}</li>
- <li>{{cssxref("content")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                | État                             | Commentaires         |
+| ---------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Lists', '#counter-set', 'counter-set')}} | {{Spec2('CSS3 Lists')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.counter-set")}}
+
+## Voir aussi
+
+- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS)
+- {{cssxref("counter-increment")}}
+- {{cssxref("counter-reset")}}
+- {{cssxref("@counter-style")}}
+- Les fonctions {{cssxref("counter")}} et {{cssxref("counters")}}
+- {{cssxref("content")}}
diff --git a/files/fr/web/css/counters()/index.md b/files/fr/web/css/counters()/index.md
index 6f78f5f900..96ed5b7e88 100644
--- a/files/fr/web/css/counters()/index.md
+++ b/files/fr/web/css/counters()/index.md
@@ -7,83 +7,80 @@ tags:
   - Reference
 translation_of: Web/CSS/counters()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <code><strong>counters()</strong></code> permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction <code>counters()</code> peut s'utiliser sous deux formes :</p>
+La fonction CSS **`counters()`** permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction `counters()` peut s'utiliser sous deux formes :
 
-<ul>
- <li><code>counters(<var>name</var>, <var>string</var>)</code></li>
- <li><code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code></li>
-</ul>
+- `counters(name, string)`
+- `counters(name, string, style)`
 
-<p>Cette fonction est généralement utilisée sur des <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> mais peut théoriquement être utilisée à tout endroit où une valeur <code><a href="/fr/docs/Web/CSS/string">&lt;string&gt;</a></code> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera <code>decimal</code>).</p>
+Cette fonction est généralement utilisée sur des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) mais peut théoriquement être utilisée à tout endroit où une valeur [`<string>`](/fr/docs/Web/CSS/string) est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera `decimal`).
 
-<pre class="notranslate">/* Utilisation simple - style decimal par défaut */
-counters(countername, '-');
+    /* Utilisation simple - style decimal par défaut */
+    counters(countername, '-');
 
-/* Changement du style d'affichage */
-counters(countername, '.', upper-roman)</pre>
+    /* Changement du style d'affichage */
+    counters(countername, '.', upper-roman)
 
-<p>Un compteur n'est pas visible en tant que tel. Les fonctions <code>counters()</code> et <code><a href="/fr/docs/Web/CSS/counter_function">counter()</a></code> doivent être utilisées pour créer du contenu.</p>
+Un compteur n'est pas visible en tant que tel. Les fonctions `counters()` et [`counter()`](/fr/docs/Web/CSS/counter_function) doivent être utilisées pour créer du contenu.
 
-<div class="note">
-<p><strong>Note :</strong> Bien que la fonction <code>counters()</code> puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que {{CSSxRef("content")}} reste experimentale.</p>
+> **Note :** Bien que la fonction `counters()` puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que {{CSSxRef("content")}} reste experimentale.
+>
+> Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.
 
-<p>Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.</p>
-</div>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+### Valeurs
 
-<h3 id="Valeurs">Valeurs</h3>
+- {{cssxref("&lt;custom-ident&gt;")}}
+  - : Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer par deux tirets et ne peut pas être `none`, `unset`, `initial` ou `inherit`.
+- `<counter-style>`
+  - : Un style de compteur (cf. [les valeurs décrites pour `list-style-type`](/fr/docs/Web/CSS/list-style-type#valeurs)) ou une fonction [`symbols()`](</fr/docs/Web/CSS/symbols()>). En absence de valeur, le style utilisé sera `decimal`.
+- {{cssxref("&lt;string&gt;")}}
+  - : Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. `\000A9` représentera par exemple le symbole copyright (©).
+- `none`
+  - : Représente la chaîne vide.
 
-<dl>
- <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
- <dd>Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer par deux tirets et ne peut pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd>
- <dt><code>&lt;counter-style&gt;</code></dt>
- <dd>Un style de compteur (cf. <a href="/fr/docs/Web/CSS/list-style-type#valeurs">les valeurs décrites pour <code>list-style-type</code></a>) ou une fonction <a href="/fr/docs/Web/CSS/symbols()"><code>symbols()</code></a>. En absence de valeur, le style utilisé sera <code>decimal</code>.</dd>
- <dt>{{cssxref("&lt;string&gt;")}}</dt>
- <dd>Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. <code>\000A9</code> représentera par exemple le symbole copyright (©).</dd>
- <dt><code>none</code></dt>
- <dd>Représente la chaîne vide.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Style_par_défaut_et_chiffres_romains">Style par défaut et chiffres romains</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html;">&lt;ol&gt;
-  &lt;li&gt;
-     &lt;ol&gt;
-        &lt;li&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;/li&gt;
-      &lt;/ol&gt;
-  &lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;
-     &lt;ol&gt;
-        &lt;li&gt;&lt;/li&gt;
-        &lt;li&gt;
-           &lt;ol&gt;
-              &lt;li&gt;&lt;/li&gt;
-              &lt;li&gt;&lt;/li&gt;
-              &lt;li&gt;&lt;/li&gt;
-           &lt;/ol&gt;
-        &lt;/li&gt;
-      &lt;/ol&gt;
-  &lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">ol {
+## Exemples
+
+### Style par défaut et chiffres romains
+
+#### HTML
+
+```html
+<ol>
+  <li>
+     <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>
+  </li>
+</ol>
+```
+
+#### CSS
+
+```css
+ol {
   counter-reset: listCounter;
 }
 li {
@@ -94,43 +91,47 @@ li::marker {
 }
 li::before {
   content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
-}</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Style_par_défaut_et_chiffres_romains", "100%", 150)}}</p>
-
-<h3 id="Numérotation_décimale_avec_zéro_et_indices_alphabétiques"><dfn>Numérotation décimale (avec zéro) et indices alphabétiques</dfn></h3>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html;">&lt;ol&gt;
-  &lt;li&gt;
-     &lt;ol&gt;
-        &lt;li&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;/li&gt;
-      &lt;/ol&gt;
-  &lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;/li&gt;
-  &lt;li&gt;
-     &lt;ol&gt;
-        &lt;li&gt;&lt;/li&gt;
-        &lt;li&gt;
-           &lt;ol&gt;
-              &lt;li&gt;&lt;/li&gt;
-              &lt;li&gt;&lt;/li&gt;
-              &lt;li&gt;&lt;/li&gt;
-           &lt;/ol&gt;
-        &lt;/li&gt;
-      &lt;/ol&gt;
-  &lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css">ol {
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Style_par_défaut_et_chiffres_romains", "100%", 150)}}
+
+### _Numérotation décimale (avec zéro) et indices alphabétiques_
+
+#### HTML
+
+```html
+<ol>
+  <li>
+     <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>
+  </li>
+</ol>
+```
+
+#### CSS
+
+```css
+ol {
   counter-reset: count;
 }
 li {
@@ -140,48 +141,30 @@ li::marker {
    content: counters(count, '.', upper-alpha) ') ';
 }
 li::before {
-  content: counters(count, ".", <dfn>decimal-leading-zero</dfn>) " == " counters(count, ".", lower-alpha);
-}</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Numérotation_décimale_(avec_zéro)_et_indices_alphabétiques", "100%", 150)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
-   <td>{{Spec2("CSS3 Lists")}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.counters")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Utiliser les compteurs CSS</a></li>
- <li>{{cssxref("counter-reset")}}</li>
- <li>{{cssxref("counter-increment")}}</li>
- <li>{{cssxref("@counter-style")}}</li>
- <li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counter_function">counter()</a></code></li>
- <li>{{cssxref("::marker")}}</li>
-</ul>
+  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Numérotation_décimale_(avec_zéro)_et_indices_alphabétiques", "100%", 150)}}
+
+## Spécifications
+
+| Spécification                                                                                | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}         | {{Spec2("CSS3 Lists")}} | Aucune modification. |
+| {{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}} | {{Spec2("CSS2.1")}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.counters")}}
+
+## Voir aussi
+
+- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+- {{cssxref("counter-reset")}}
+- {{cssxref("counter-increment")}}
+- {{cssxref("@counter-style")}}
+- La fonction CSS [`counter()`](/fr/docs/Web/CSS/counter_function)
+- {{cssxref("::marker")}}
diff --git a/files/fr/web/css/cross-fade()/index.md b/files/fr/web/css/cross-fade()/index.md
index 452ff95ab5..c211fd76ee 100644
--- a/files/fr/web/css/cross-fade()/index.md
+++ b/files/fr/web/css/cross-fade()/index.md
@@ -8,92 +8,98 @@ tags:
   - Reference
 translation_of: Web/CSS/cross-fade()
 ---
-<div>{{draft}}{{CSSRef}}</div>
+{{draft}}{{CSSRef}}
 
-<p>La fonction CSS <strong><code>cross-fade()</code></strong> peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.</p>
+La fonction CSS **`cross-fade()`** peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.
 
-<div class="warning">
-<p><strong>Attention :</strong> À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.</p>
-</div>
+> **Attention :** À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.
 
-<h2 id="Syntaxe_spécification">Syntaxe (spécification)</h2>
+## Syntaxe (spécification)
 
-<p>La fonction <code>cross-fade()</code> prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%.</p>
+La fonction `cross-fade()` prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%.
 
-<p>Cette fonction pourra être utilisée à tout endroit où une image (cf. {{cssxref("&lt;image&gt;")}}) CSS peut être utilisée.</p>
+Cette fonction pourra être utilisée à tout endroit où une image (cf. {{cssxref("&lt;image&gt;")}}) CSS peut être utilisée.
 
-<h3 id="Utilisation_des_pourcentages">Utilisation des pourcentages</h3>
+### Utilisation des pourcentages
 
-<p>Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.</p>
+Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.
 
-<pre class="brush: css">cross-fade(url(white.png)   0%, url(black.png) 100%); /* complètement noire */
+```css
+cross-fade(url(white.png)   0%, url(black.png) 100%); /* complètement noire */
 cross-fade(url(white.png)  25%, url(black.png)  75%); /* 25% blanche, 75% noire*/
 cross-fade(url(white.png)  50%, url(black.png)  50%); /* 50% blanche, 50% noire */
 cross-fade(url(white.png)  75%, url(black.png)  25%); /* 75% blanche, 25% noire */
 cross-fade(url(white.png) 100%, url(black.png)   0%); /* complètement blanche */
 cross-fade(url(green.png)  75%, url(red.png)    75%); /* image avec du rouge et vert à 75% */
-</pre>
+```
 
-<p>Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%.</p>
+Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%.
 
-<p>Les lignes précédentes peuvent ainsi s'écrire également :</p>
+Les lignes précédentes peuvent ainsi s'écrire également :
 
-<pre class="brush: css">cross-fade(url(white.png)   0%, url(black.png)); /* complètement noire */
+```css
+cross-fade(url(white.png)   0%, url(black.png)); /* complètement noire */
 cross-fade(url(white.png)  25%, url(black.png)); /* 25% blanche, 75% noire*/
 cross-fade(url(white.png), url(black.png)); /* 50% blanche, 50% noire */
 cross-fade(url(white.png)  75%, url(black.png)); /* 75% blanche, 25% noire */
 cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */
 cross-fade(url(green.png)  75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */
-</pre>
+```
 
-<p>Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%).</p>
+Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+```html
+<div id="div"></div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#div {
+```css
+#div {
     width: 300px;
     height: 300px;
     background-image: cross-fade(
         75% url('https://mdn.mozillademos.org/files/8543/br.png'),
         url('https://mdn.mozillademos.org/files/8545/tr.png'));
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "330", "330")}}</p>
+{{EmbedLiveSample("Exemples", "330", "330")}}
 
-<h2 id="Ancienne_syntaxe_implémentations">Ancienne syntaxe (implémentations)</h2>
+## Ancienne syntaxe (implémentations)
 
-<pre class="syntaxbox">cross-fade( &lt;image, &lt;image&gt;, &lt;percentage&gt; )</pre>
+    cross-fade( <image, <image>, <percentage> )
 
-<p>La spécification de la fonction <code>cross-fade()</code> permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et <a href="#syntaxe">la syntaxe originale</a>, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec <code>-webkit-</code> pour Chrome, Opera et les autres navigateurs basés sur Blink.</p>
+La spécification de la fonction `cross-fade()` permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et [la syntaxe originale](#syntaxe), implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec `-webkit-` pour Chrome, Opera et les autres navigateurs basés sur Blink.
 
-<pre class="brush: css">cross-fade(url(white.png), url(black.png), 0%);   /* complètement noire */
+```css
+cross-fade(url(white.png), url(black.png), 0%);   /* complètement noire */
 cross-fade(url(white.png), url(black.png), 25%);  /* 25% blanche, 75% noire */
 cross-fade(url(white.png), url(black.png), 50%);  /* 50% blanche, 50% noire */
 cross-fade(url(white.png), url(black.png), 75%);  /* 75% blanche, 25% noire */
 cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
-</pre>
+```
 
-<p>Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément.</p>
+Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément.
 
-<p>Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe.</p>
+Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe.
 
-<h3 id="Exemples_2">Exemples</h3>
+### Exemples
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.crossfade {
+```css
+.crossfade {
     width: 300px;
     height: 300px;
     background-image: -webkit-cross-fade(
@@ -104,56 +110,42 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
         url('https://mdn.mozillademos.org/files/8543/br.png'),
         url('https://mdn.mozillademos.org/files/8545/tr.png'),
         75%);
-}</pre>
+}
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="crossfade"&gt;&lt;/div&gt;</pre>
+```html
+<div class="crossfade"></div>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Ancienne_syntaxe_(implémentations)", "330", "330")}}</p>
+{{EmbedLiveSample("Ancienne_syntaxe_(implémentations)", "330", "330")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par dessus.</p>
+Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par dessus.
 
-<ul>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1.</a></li>
- <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1  pour WCAG 2.0</a></li>
-</ul>
+- [Comprendre les règles WCAG 1.1.](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [Comprendre les critères de succès 1.1.1  pour WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}} | {{Spec2('CSS4 Images')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("css.types.image.cross-fade")}}</div>
+{{Compat("css.types.image.cross-fade")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("image")}}</li>
- <li>{{cssxref("url")}}</li>
- <li>{{cssxref("_image", "image()")}}</li>
- <li>{{cssxref("image-set")}}</li>
- <li>{{cssxref("element()")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients" title="Using gradients">Utiliser les dégradés CSS</a></li>
- <li>Fonctions de création de dégradés : {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},</li>
-</ul>
+- {{cssxref("image")}}
+- {{cssxref("url")}}
+- {{cssxref("_image", "image()")}}
+- {{cssxref("image-set")}}
+- {{cssxref("element()")}}
+- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients "Using gradients")
+- Fonctions de création de dégradés : {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},
diff --git a/files/fr/web/css/css_animated_properties/index.md b/files/fr/web/css/css_animated_properties/index.md
index 463b7f9669..e18755b57c 100644
--- a/files/fr/web/css/css_animated_properties/index.md
+++ b/files/fr/web/css/css_animated_properties/index.md
@@ -9,10 +9,10 @@ tags:
 translation_of: Web/CSS/CSS_animated_properties
 original_slug: Web/CSS/Liste_propriétés_CSS_animées
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Certaines propriétés CSS peuvent être animées. Cela signifie que leur valeur change de façon graduelle grâce aux <a href="/fr/docs/Web/CSS/CSS_Animations">animations CSS</a> ou aux <a href="/fr/docs/Web/CSS/CSS_Transitions">transitions CSS</a>.</p>
+Certaines propriétés CSS peuvent être animées. Cela signifie que leur valeur change de façon graduelle grâce aux [animations CSS](/fr/docs/Web/CSS/CSS_Animations) ou aux [transitions CSS](/fr/docs/Web/CSS/CSS_Transitions).
 
-<p>Voici la liste des propriétés qui peuvent être animées :</p>
+Voici la liste des propriétés qui peuvent être animées :
 
-<p>{{CSSAnimatedProperties}}</p>
+{{CSSAnimatedProperties}}
diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.md b/files/fr/web/css/css_animations/detecting_css_animation_support/index.md
index 7f33e6daf9..de84d1848a 100644
--- a/files/fr/web/css/css_animations/detecting_css_animation_support/index.md
+++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.md
@@ -8,19 +8,18 @@ tags:
 translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
 original_slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS
 ---
-<div>{{CSSRef}}{{obsolete_header}}</div>
+{{CSSRef}}{{obsolete_header}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.</p>
-</div>
+> **Attention :** Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.
 
-<p>Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, <a href="https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">basé sur ce billet de Christian Heilmann</a>, illustre une technique pour détecter la prise en charge des animations CSS.</p>
+Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, [basé sur ce billet de Christian Heilmann](https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/), illustre une technique pour détecter la prise en charge des animations CSS.
 
-<h2 id="Détecter_la_prise_en_charge_des_animations_CSS">Détecter la prise en charge des animations CSS</h2>
+## Détecter la prise en charge des animations CSS
 
-<p>Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :</p>
+Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :
 
-<pre class="brush: js">var animation = false,
+```js
+var animation = false,
   animationstring = 'animation',
   keyframeprefix = '',
   domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
@@ -30,7 +29,7 @@ original_slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animation
 if( elem.style.animationName !== undefined ) { animation = true; }
 
 if( animation === false ) {
-  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
     if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
       pfx = domPrefixes[ i ];
       animationstring = pfx + 'Animation';
@@ -40,21 +39,22 @@ if( animation === false ) {
     }
   }
 }
-</pre>
+```
 
-<p>Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant <code>animation</code> avec <code>false</code>. On utilise la chaîne de caractères <code>animationstring</code> avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable <code>pfx</code> qu'on définit pour le moment avec la chaîne vide.</p>
+Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant `animation` avec `false`. On utilise la chaîne de caractères `animationstring` avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable `pfx` qu'on définit pour le moment avec la chaîne vide.
 
-<p>Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable <code>elem</code>. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.</p>
+Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable `elem`. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.
 
-<p>Si le navigateur ne prend pas en charge la version sans préfixe et que <code>animation</code> vaut toujours <code>false</code>, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de <code>AnimationName</code> de la même façon.</p>
+Si le navigateur ne prend pas en charge la version sans préfixe et que `animation` vaut toujours `false`, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de `AnimationName` de la même façon.
 
-<p>Une fois que ce code a fini son exécution, la valeur de <code>animation</code> sera <code>false</code> si les animations ne sont pas prises en charge ou <code>true</code> si <code>animation</code> est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le <em>camelCase</em> (ex. <code>MozAnimation</code>) et les tirets (<code>-moz-x</code>).</p>
+Une fois que ce code a fini son exécution, la valeur de `animation` sera `false` si les animations ne sont pas prises en charge ou `true` si `animation` est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le _camelCase_ (ex. `MozAnimation`) et les tirets (`-moz-x`).
 
-<h2 id="Appliquer_des_animations_avec_la_bonne_syntaxe_selon_le_navigateur">Appliquer des animations avec la bonne syntaxe selon le navigateur</h2>
+## Appliquer des animations avec la bonne syntaxe selon le navigateur
 
-<p>Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :</p>
+Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :
 
-<pre class="brush: js">if( animation === false ) {
+```js
+if( animation === false ) {
 
   // on utilise JavaScript en fallback
 
@@ -66,7 +66,7 @@ if( animation === false ) {
                     'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
                   '}';
 
-  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+  if( document.styleSheets && document.styleSheets.length ) {
 
       document.styleSheets[0].insertRule( keyframes, 0 );
 
@@ -79,22 +79,20 @@ if( animation === false ) {
   }
 
 }
-</pre>
+```
 
-<p>Ce code utilise la valeur d'<code>animation</code> : si c'est <code>false</code>, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.</p>
+Ce code utilise la valeur d'`animation` : si c'est `false`, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.
 
-<p>Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/<em>keyframes</em> car elles n'utilisent pas la syntaxe CSS traditionnelle.</p>
+Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/_keyframes_ car elles n'utilisent pas la syntaxe CSS traditionnelle.
 
-<p>Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable <code>keyframes</code> qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.</p>
+Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable `keyframes` qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.
 
-<p>Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).</p>
+Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).
 
-<p>S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.</p>
+S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.
 
-<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">Voir dans JSFiddle</a></p>
+[Voir dans JSFiddle](https://jsfiddle.net/codepo8/ATS2S/8/embedded/result)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Les animations CSS</a></li>
-</ul>
+- [Les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
diff --git a/files/fr/web/css/css_animations/index.md b/files/fr/web/css/css_animations/index.md
index a0db694124..e4aa4c4df1 100644
--- a/files/fr/web/css/css_animations/index.md
+++ b/files/fr/web/css/css_animations/index.md
@@ -7,70 +7,49 @@ tags:
 translation_of: Web/CSS/CSS_Animations
 original_slug: Web/CSS/Animations_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les <strong>animations CSS</strong> sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (<em>keyframes</em> en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.</p>
+Les **animations CSS** sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (_keyframes_ en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+### Propriétés CSS
 
-<ul>
- <li>{{cssxref("animation")}}</li>
- <li>{{cssxref("animation-delay")}}</li>
- <li>{{cssxref("animation-direction")}}</li>
- <li>{{cssxref("animation-duration")}}</li>
- <li>{{cssxref("animation-fill-mode")}}</li>
- <li>{{cssxref("animation-iteration-count")}}</li>
- <li>{{cssxref("animation-name")}}</li>
- <li>{{cssxref("animation-play-state")}}</li>
- <li>{{cssxref("animation-timing-function")}}</li>
-</ul>
+- {{cssxref("animation")}}
+- {{cssxref("animation-delay")}}
+- {{cssxref("animation-direction")}}
+- {{cssxref("animation-duration")}}
+- {{cssxref("animation-fill-mode")}}
+- {{cssxref("animation-iteration-count")}}
+- {{cssxref("animation-name")}}
+- {{cssxref("animation-play-state")}}
+- {{cssxref("animation-timing-function")}}
 
-<h3 id="Règles_CSS">Règles @ CSS</h3>
+### Règles @ CSS
 
-<ul>
- <li>{{cssxref("@keyframes")}}</li>
-</ul>
+- {{cssxref("@keyframes")}}
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Détecter la prise en charge des animations CSS</a></dt>
- <dd>Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></dt>
- <dd>Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.</dd>
- <dt><a href="/fr/docs/Web/CSS/Animations_CSS/Conseils">Conseils pour les animations CSS</a></dt>
- <dd>Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.</dd>
-</dl>
+- [Détecter la prise en charge des animations CSS](/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support)
+  - : Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
+  - : Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.
+- [Conseils pour les animations CSS](/fr/docs/Web/CSS/Animations_CSS/Conseils)
+  - : Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | État                                 | Commentaires         |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Propriété_animation">Propriété <code>animation</code></h3>
+### Propriété `animation`
 
-<p>{{Compat("css.properties.animation")}}</p>
+{{Compat("css.properties.animation")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transitions">Les transitions CSS</a> qui permettent de déclencher des animations suite à des actions utilisateur.</li>
-</ul>
+- [Les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions) qui permettent de déclencher des animations suite à des actions utilisateur.
diff --git a/files/fr/web/css/css_animations/tips/index.md b/files/fr/web/css/css_animations/tips/index.md
index 011e1c6e3a..2f3ea5c601 100644
--- a/files/fr/web/css/css_animations/tips/index.md
+++ b/files/fr/web/css/css_animations/tips/index.md
@@ -10,19 +10,20 @@ tags:
 translation_of: Web/CSS/CSS_Animations/Tips
 original_slug: Web/CSS/Animations_CSS/Conseils
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.</p>
+Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.
 
-<h2 id="Relancer_une_animation">Relancer une animation</h2>
+## Relancer une animation
 
-<p>La spécifications des <a href="/en-US/docs/Web/CSS/CSS_Animations">animations CSS</a> ne permet pas de relancer une animation. Il n'existe pas de méthode <code>resetAnimation()</code> qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur <code>"running"</code>. Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.</p>
+La spécifications des [animations CSS](/en-US/docs/Web/CSS/CSS_Animations) ne permet pas de relancer une animation. Il n'existe pas de méthode `resetAnimation()` qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur `"running"`. Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).</p>
+Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).
 
-<pre class="brush: css hidden">.runButton {
+```css hidden
+.runButton {
   cursor: pointer;
   width: 300px;
   border: 1px solid black;
@@ -34,9 +35,11 @@ original_slug: Web/CSS/Animations_CSS/Conseils
   color: white;
   background-color: darkgreen;
   font: 14px "Open Sans", "Arial", sans-serif;
-}</pre>
+}
+```
 
-<pre class="brush: css">@keyframes colorchange {
+```css
+@keyframes colorchange {
   0% { background: yellow }
   100% { background: blue }
 }
@@ -49,66 +52,70 @@ original_slug: Web/CSS/Animations_CSS/Conseils
 
 .changing {
   animation: colorchange 2s;
-}</pre>
+}
+```
 
-<p>On a deux classes qui sont définies. La classe <code>box</code> qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe <code>changing</code> qui indique que les {{cssxref("@keyframes")}} intitulées <code>colorchange</code> doivent être utilisées sur une période de deux secondes afin d'animer la boîte.</p>
+On a deux classes qui sont définies. La classe `box` qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe `changing` qui indique que les {{cssxref("@keyframes")}} intitulées `colorchange` doivent être utilisées sur une période de deux secondes afin d'animer la boîte.
 
-<p>Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.</p>
+Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>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.</p>
+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.
 
-<pre class="brush: html">&lt;div class="box"&gt;
-&lt;/div&gt;
+```html
+<div class="box">
+</div>
 
-&lt;div class="runButton" onclick="play()"&gt;Cliquer pour lancer l'animation&lt;/div&gt;</pre>
+<div class="runButton" onclick="play()">Cliquer pour lancer l'animation</div>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<p>Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction <code>play()</code> qui est appelée lorsque l'utilisateur clique sur le bouton.</p>
+Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction `play()` qui est appelée lorsque l'utilisateur clique sur le bouton.
 
-<pre class="brush: js">function play() {
+```js
+function play() {
   document.querySelector(".box").className = "box";
   window.requestAnimationFrame(function(time) {
     window.requestAnimationFrame(function(time) {
       document.querySelector(".box").className = "box changing";
     });
   });
-}</pre>
+}
+```
 
-<p>Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.</p>
+Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.
 
-<p>Voici ce qui se produit lorsque la fonction <code>play()</code> est appelée :</p>
+Voici ce qui se produit lorsque la fonction `play()` est appelée :
 
-<ol>
- <li>On réinitialise la liste des classes CSS de la boîte avec uniquement <code>box</code>. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe <code>changing</code> en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.</li>
- <li>Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (<em>callback</em>). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…</li>
- <li>Notre fonction de rappel invoque à nouveau <code>requestAnimationFrame()</code> ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe <code>changing</code> à la boîte afin que l'animation soit lancée lors du rafraîchissement.</li>
-</ol>
+1.  On réinitialise la liste des classes CSS de la boîte avec uniquement `box`. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe `changing` en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.
+2.  Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (_callback_). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…
+3.  Notre fonction de rappel invoque à nouveau `requestAnimationFrame()` ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe `changing` à la boîte afin que l'animation soit lancée lors du rafraîchissement.
 
-<p>Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :</p>
+Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :
 
-<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+```js
+document.querySelector(".runButton").addEventListener("click", play, false);
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}</p>
+{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}
 
-<h2 id="Arrêter_une_animation">Arrêter une animation</h2>
+## Arrêter une animation
 
-<p>Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :</p>
+Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :
 
-<ol>
- <li>L'animation doit être la plus isolée possible et on ne doit pas reposer sur  <code>animation-direction: alternate</code>. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.</li>
- <li>Utiliser JavaScript pour retirer l'animation lorsque l'évènement <code>animationiteration</code> se déclenche.</li>
-</ol>
+1.  L'animation doit être la plus isolée possible et on ne doit pas reposer sur  `animation-direction: alternate`. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.
+2.  Utiliser JavaScript pour retirer l'animation lorsque l'évènement `animationiteration` se déclenche.
 
-<p>Ces pistes sont utilisées dans la démonstration suivante :</p>
+Ces pistes sont utilisées dans la démonstration suivante :
 
-<h3 id="CSS_2">CSS</h3>
+### CSS
 
-<pre class="brush: css">.slidein {
+```css
+.slidein {
   animation-duration: 5s;
   animation-name: slidein;
   animation-iteration-count: infinite;
@@ -129,36 +136,36 @@ original_slug: Web/CSS/Animations_CSS/Conseils
     margin-left: 0%;
   }
 }
-</pre>
+```
 
-<h3 id="HTML_2">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;h1 id="watchme"&gt;Cliquer pour arrêter&lt;/h1&gt;
-</pre>
+```html
+<h1 id="watchme">Cliquer pour arrêter</h1>
+```
 
-<h3 id="JavaScript_2">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">let watchme = document.getElementById('watchme')
+```js
+let watchme = document.getElementById('watchme')
 
 watchme.className = 'slidein'
-const listener = (e) =&gt; {
+const listener = (e) => {
   watchme.className = 'slidein stopped'
 }
-watchme.addEventListener('click', () =&gt;
+watchme.addEventListener('click', () =>
   watchme.addEventListener('animationiteration', listener, false)
 )
-</pre>
+```
 
-<h3 id="Résultat_2">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Arrêter_une_animation")}}</p>
+{{EmbedLiveSample("Arrêter_une_animation")}}
 
-<p><a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">Voir cette démo</a></p>
+[Voir cette démo](https://jsfiddle.net/morenoh149/5ty5a4oy/)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a></li>
- <li>{{domxref("Window.requestAnimationFrame()")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS)
+- [Les animations CSS](/fr/docs/Web/CSS/Animations_CSS)
+- {{domxref("Window.requestAnimationFrame()")}}
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 2c0364c3f4..d2a8d98d17 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
@@ -9,64 +9,59 @@ tags:
 translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
 original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les <strong>animations CSS</strong> permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (<em>keyframes</em>) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.</p>
+Les **animations CSS** permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (_keyframes_) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.
 
-<p>Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :</p>
+Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :
 
-<ol>
- <li>On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.</li>
- <li>Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le <em>frame-skipping</em>) afin que le résultat obtenu soit aussi fluide que possible.</li>
- <li>En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.</li>
-</ol>
+1.  On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.
+2.  Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le _frame-skipping_) afin que le résultat obtenu soit aussi fluide que possible.
+3.  En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.
 
-<h2 id="Paramétrer_l'animation">Paramétrer l'animation</h2>
+## Paramétrer l'animation
 
-<p>Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. <strong>Attention, cela ne détermine pas l'apparence visuelle de l'animation.</strong> Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.</p>
+Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. **Attention, cela ne détermine pas l'apparence visuelle de l'animation.** Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.
 
-<p>Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :</p>
+Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :
 
-<dl>
- <dt>{{cssxref("animation-delay")}}</dt>
- <dd>Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.</dd>
- <dt>{{cssxref("animation-direction")}}</dt>
- <dd>Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.</dd>
- <dt>{{cssxref("animation-duration")}}</dt>
- <dd>Cette propriété définit la durée d'un cycle de l'animation.</dd>
- <dt>{{cssxref("animation-fill-mode")}}</dt>
- <dd>Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.</dd>
- <dt>{{cssxref("animation-iteration-count")}}</dt>
- <dd>Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé <code>infinite</code> afin de répéter une animation infiniment.</dd>
- <dt>{{cssxref("animation-name")}}</dt>
- <dd>Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.</dd>
- <dt>{{cssxref("animation-play-state")}}</dt>
- <dd>Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.</dd>
- <dt>{{cssxref("animation-timing-function")}}</dt>
- <dd>Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.</dd>
-</dl>
+- {{cssxref("animation-delay")}}
+  - : Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.
+- {{cssxref("animation-direction")}}
+  - : Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.
+- {{cssxref("animation-duration")}}
+  - : Cette propriété définit la durée d'un cycle de l'animation.
+- {{cssxref("animation-fill-mode")}}
+  - : Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.
+- {{cssxref("animation-iteration-count")}}
+  - : Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé `infinite` afin de répéter une animation infiniment.
+- {{cssxref("animation-name")}}
+  - : Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.
+- {{cssxref("animation-play-state")}}
+  - : Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.
+- {{cssxref("animation-timing-function")}}
+  - : Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.
 
-<h2 id="Définir_les_étapes_composant_une_animation_(keyframes)">Définir les étapes composant une animation (<code>@keyframes</code>)</h2>
+## Définir les étapes composant une animation (`@keyframes`)
 
-<p>Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.</p>
+Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.
 
-<p>La durée de l'animation est définie avant et la règle <code>@keyframes</code> utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : <code>from</code> et <code>to</code>. Ces états sont optionnels et si <code>from</code>/<code>0%</code> ou <code>to</code>/<code>100%</code> ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.</p>
+La durée de l'animation est définie avant et la règle `@keyframes` utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : `from` et `to`. Ces états sont optionnels et si `from`/`0%` ou `to`/`100%` ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.
 
-<p>Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.</p>
+Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<div class="note">
-  <p><strong>Note :</strong> Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « <em>live</em> » ne fonctionnera pas.</p>
-</div>
+> **Note :** Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « _live_ » ne fonctionnera pas.
 
-<h3 id="Utiliser_une_animation_pour_que_le_texte_traverse_la_fenêtre_du_navigateur">Utiliser une animation pour que le texte traverse la fenêtre du navigateur</h3>
+### Utiliser une animation pour que le texte traverse la fenêtre du navigateur
 
-<p>Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran</p>
+Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran
 
-<p>On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}<code>:hidden</code> sur ce conteneur.</p>
+On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}`:hidden` sur ce conteneur.
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 3s;
   animation-name: slidein;
 }
@@ -82,39 +77,40 @@ original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS
     width: 100%;
   }
 }
-</pre>
+```
 
-<p>Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera <code>slidein</code>.</p>
+Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera `slidein`.
 
-<p>Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.</p>
+Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.
 
-<p>Les étapes (<em>keyframes</em>) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias <code>from</code>). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.</p>
+Les étapes (_keyframes_) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias `from`). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.
 
-<p>La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias <code>to</code>). 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.</p>
+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.
 
-<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+```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.&lt;/p&gt;
-</pre>
+her in a languid, sleepy voice.</p>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.</p>
-</div>
+> **Note :** Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.
 
-<p>{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}</p>
+{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}
 
-<h3 id="Ajouter_une_autre_étape">Ajouter une autre étape</h3>
+### Ajouter une autre étape
 
-<p>Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ <code>@keyframes</code> :</p>
+Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ `@keyframes` :
 
-<pre class="brush: css">75% {
+```css
+75% {
   font-size: 300%;
   margin-left: 25%;
   width: 150%;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">p {
+```css hidden
+p {
   animation-duration: 3s;
   animation-name: slidein;
 }
@@ -136,33 +132,34 @@ her in a languid, sleepy voice.&lt;/p&gt;
     width: 100%;
   }
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+```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.&lt;/p&gt;
-</pre>
+her in a languid, sleepy voice.</p>
+```
 
-<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.</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.
 
-<div class="note">
-<p><strong>Note :</strong> Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.</p>
-</div>
+> **Note :** Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.
 
-<p>{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}</p>
+{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}
 
-<h3 id="Répéter_une_animation">Répéter une animation</h3>
+### Répéter une animation
 
-<p>Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur <code>infinite</code> pour que l'animation se répète à l'infini :</p>
+Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur `infinite` pour que l'animation se répète à l'infini :
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 3s;
   animation-name: slidein;
   animation-iteration-count: infinite;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">@keyframes slidein {
+```css hidden
+@keyframes slidein {
   from {
     margin-left: 100%;
     width: 300%;
@@ -173,28 +170,31 @@ her in a languid, sleepy voice.&lt;/p&gt;
     width: 100%;
   }
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+```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.&lt;/p&gt;
-</pre>
+her in a languid, sleepy voice.</p>
+```
 
-<p>{{EmbedLiveSample("Répéter_une_animation","100%","250")}}</p>
+{{EmbedLiveSample("Répéter_une_animation","100%","250")}}
 
-<h3 id="Obtenir_un_effet_aller-retour">Obtenir un effet aller-retour</h3>
+### Obtenir un effet aller-retour
 
-<p>On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur <code>alternate</code> :</p>
+On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur `alternate` :
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 3s;
   animation-name: slidein;
   animation-iteration-count: infinite;
   animation-direction: alternate;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">@keyframes slidein {
+```css hidden
+@keyframes slidein {
   from {
     margin-left: 100%;
     width: 300%;
@@ -205,70 +205,79 @@ her in a languid, sleepy voice.&lt;/p&gt;
     width: 100%;
   }
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+```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.&lt;/p&gt;
-</pre>
+her in a languid, sleepy voice.</p>
+```
 
-<p>{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}</p>
+{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}
 
-<h3 id="Utiliser_la_propriété_raccourcie_animation">Utiliser la propriété raccourcie <code>animation</code></h3>
+### Utiliser la propriété raccourcie `animation`
 
-<p>La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :</p>
+La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 3s;
   animation-name: slidein;
   animation-iteration-count: infinite;
   animation-direction: alternate;
 }
-</pre>
+```
 
-<p>On peut la réécrire de façon plus concise :</p>
+On peut la réécrire de façon plus concise :
 
-<pre class="brush: css">p {
+```css
+p {
   animation: 3s infinite alternate slidein;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.</p>
-</div>
+> **Note :** Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.
 
-<h3 id="Utiliser_plusieurs_valeurs_pour_différentes_animations">Utiliser plusieurs valeurs pour différentes animations</h3>
+### Utiliser plusieurs valeurs pour différentes animations
 
-<p>Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.</p>
+Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.
 
-<p>Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :</p>
+Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :
 
-<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+```css
+animation-name: fadeInOut, moveLeft300px, bounce;
 animation-duration: 3s;
-animation-iteration-count: 1;</pre>
+animation-iteration-count: 1;
+```
 
-<p>Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple <code>fadeInOut</code> a une durée de 2.5s et 2 itérations.</p>
+Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple `fadeInOut` a une durée de 2.5s et 2 itérations.
 
-<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+```css
+animation-name: fadeInOut, moveLeft300px, bounce;
 animation-duration: 2.5s, 5s, 1s;
-animation-iteration-count: 2, 1, 5;</pre>
+animation-iteration-count: 2, 1, 5;
+```
 
-<p>Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, <code>fadeInOut</code> durera <code>2.5s</code>, <code>moveLeft300px</code> durera <code>5s</code>. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : <code>bounce</code> aura donc une durée de <code>2.5s</code>. Le nombre d'itérations sera affecté de la même façon.</p>
+Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, `fadeInOut` durera `2.5s`, `moveLeft300px` durera `5s`. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : `bounce` aura donc une durée de `2.5s`. Le nombre d'itérations sera affecté de la même façon.
 
-<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+```css
+animation-name: fadeInOut, moveLeft300px, bounce;
 animation-duration: 2.5s, 5s;
-animation-iteration-count: 2, 1;</pre>
+animation-iteration-count: 2, 1;
+```
 
-<h3 id="Utiliser_les_événements_liés_aux_animations">Utiliser les événements liés aux animations</h3>
+### Utiliser les événements liés aux animations
 
-<p>Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.</p>
+Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.
 
-<p>Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.</p>
+Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.
 
-<h4 id="La_feuille_de_style_CSS">La feuille de style CSS</h4>
+#### La feuille de style CSS
 
-<p>On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée <code>slidein</code>, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.</p>
+On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée `slidein`, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.
 
-<pre class="brush: css">.slidein {
+```css
+.slidein {
   animation-duration: 3s;
   animation-name: slidein;
   animation-iteration-count: 3;
@@ -285,29 +294,32 @@ animation-iteration-count: 2, 1;</pre>
     margin-left:0%;
     width:100%;
   }
-}</pre>
+}
+```
 
-<h4 id="Les_gestionnaires_d'événements">Les gestionnaires d'événements</h4>
+#### Les gestionnaires d'événements
 
-<p>On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).</p>
+On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).
 
-<pre class="brush: js">var element = document.getElementById("watchme");
+```js
+var element = document.getElementById("watchme");
 element.addEventListener("animationstart", listener, false);
 element.addEventListener("animationend", listener, false);
 element.addEventListener("animationiteration", listener, false);
 
 element.className = "slidein";
-</pre>
+```
 
-<p>Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur <code>slidein</code> sur l'élément.</p>
+Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur `slidein` sur l'élément.
 
-<p>Quel est l'intérêt ? En fait, l'événement <code>animationstart</code> est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.</p>
+Quel est l'intérêt ? En fait, l'événement `animationstart` est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.
 
-<h4 id="Écouter_les_événements">Écouter les événements</h4>
+#### Écouter les événements
 
-<p>Les événements sont transmis à la fonction <code>listener()</code> décrite ici :</p>
+Les événements sont transmis à la fonction `listener()` décrite ici :
 
-<pre class="brush: js">function listener(event) {
+```js
+function listener(event) {
   var l = document.createElement("li");
   switch(event.type) {
     case "animationstart":
@@ -322,45 +334,42 @@ element.className = "slidein";
   }
   document.getElementById("output").appendChild(l);
 }
-</pre>
+```
 
-<p>Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.</p>
+Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.
 
-<p>Le résultat obtenu devrait ressembler à quelque chose comme :</p>
+Le résultat obtenu devrait ressembler à quelque chose comme :
 
-<ul>
- <li>Début : durée écoulée : 0</li>
- <li>Nouvelle boucle démarrée à : 3.01200008392334</li>
- <li>Nouvelle boucle démarrée à : 6.00600004196167</li>
- <li>Fin : durée écoulée : 9.234000205993652</li>
-</ul>
+- Début : durée écoulée : 0
+- Nouvelle boucle démarrée à : 3.01200008392334
+- Nouvelle boucle démarrée à : 6.00600004196167
+- Fin : durée écoulée : 9.234000205993652
 
-<p>On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement <code>animationiteration</code> n'est pas envoyé, seul <code>animationend</code> est déclenché.</p>
+On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement `animationiteration` n'est pas envoyé, seul `animationend` est déclenché.
 
-<h4 id="Le_document_HTML">Le document HTML</h4>
+#### Le document HTML
 
-<p>Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :</p>
+Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :
 
-<pre class="brush: html">&lt;h1 id="watchme"&gt;Regardez-moi bouger&lt;/h1&gt;
-&lt;p&gt;
+```html
+<h1 id="watchme">Regardez-moi bouger</h1>
+<p>
   Un exemple d'animation CSS pour déplacer
-  un élément &lt;code&gt;H1&lt;/code&gt; sur une page.
-&lt;/p&gt;
-&lt;p&gt;
+  un élément <code>H1</code> sur une page.
+</p>
+<p>
   Voici les événements relatifs aux animations :
-&lt;/p&gt;
-&lt;ul id="output"&gt;
-&lt;/ul&gt;
-&lt;/body&gt;
-</pre>
+</p>
+<ul id="output">
+</ul>
+</body>
+```
 
-<p>{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}</p>
+{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("AnimationEvent")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Détecter la prise en charge des animations CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Manipuler les transitions CSS</a></li>
- <li><a href="https://www.cssdebutant.com">CSS</a></li>
-</ul>
+- {{domxref("AnimationEvent")}}
+- [Détecter la prise en charge des animations CSS](/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support)
+- [Manipuler les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
+- [CSS](https://www.cssdebutant.com)
diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md
index c598a24870..44864170d2 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md
+++ b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md
@@ -7,147 +7,150 @@ tags:
 translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 ---
-<p>Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.</p>
-
-<pre class="brush: html hidden">    &lt;div id="container"&gt;
-
-        &lt;div id="gallery"&gt;
-            &lt;div id="image-gallery"&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="load-actions" class="group section"&gt;
-            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
-            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
-            &lt;input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/&gt;
-            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="general-controls" class="group section"&gt;
-            &lt;div class="name"&gt; Options &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;Échelle&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;Déplaçable&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="property right"&gt;
-                &lt;div class="name"&gt;Hauteur de la section&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_section" class="group section"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="preview"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;!-- controls --&gt;
-        &lt;div id="controls" class="group section"&gt;
-
-            &lt;!-- border-image-slice --&gt;
-            &lt;div id="border-slice-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt;fill&lt;/div&gt;
-                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-width --&gt;
-            &lt;div id="border-width-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-outset --&gt;
-            &lt;div id="border-outset-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- other-settings --&gt;
-            &lt;div id="aditional-properties" class="category"&gt;
-                &lt;div class="title"&gt; Autres propriétés &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
-                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="0"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
-                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="1"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div class="title"&gt; Code CSS &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
-                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
-                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
-                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
-                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
-                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-        &lt;/div&gt;
-    &lt;/div&gt;</pre>
-
-<pre class="brush: css hidden">/*  GRID OF TWELVE
+Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.
+
+```html hidden
+    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Options </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">Échelle</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">Déplaçable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">Hauteur de la section</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> Autres propriétés </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> Code CSS </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+```
+
+```css hidden
+/*  GRID OF TWELVE
  * ========================================================================== */
 
 .span_12 {
@@ -259,7 +262,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 
 /* Input Slider */
 
-.ui-input-slider &gt; input {
+.ui-input-slider > input {
 	margin: 0;
 	padding: 0;
 	width: 50px;
@@ -403,7 +406,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 	top: 0;
 }
 
-.ui-dropdown-list &gt; div {
+.ui-dropdown-list > div {
 	width: 100%;
 	height: 1.6em;
 	margin: 0.3em 0;
@@ -415,7 +418,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 	box-sizing: border-box;
 }
 
-.ui-dropdown-list &gt; div:hover {
+.ui-dropdown-list > div:hover {
 	background: #3490D2;
 	color:#FFF;
 	border-radius: 2px;
@@ -445,11 +448,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 	user-select: none;
 }
 
-.ui-checkbox &gt; input {
+.ui-checkbox > input {
  	display: none;
 }
 
-.ui-checkbox &gt; label {
+.ui-checkbox > label {
 	font-size: 12px;
 	padding: 0.333em 1.666em 0.5em;
 	height: 1em;
@@ -477,11 +480,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 	background-position: center right 10px;
 }
 
-.ui-checkbox &gt; label:hover {
+.ui-checkbox > label:hover {
 	cursor: pointer;
 }
 
-.ui-checkbox &gt; input:checked + label {
+.ui-checkbox > input:checked + label {
 	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
 	background-color: #379B4A;
 }
@@ -533,7 +536,7 @@ body[data-move='Y'] {
 	cursor: move;
 }
 
-[data-draggable='true']:hover &gt; * {
+[data-draggable='true']:hover > * {
 	cursor: default;
 }
 
@@ -754,7 +757,7 @@ body[data-move='Y'] {
 	color: #555;
 }
 
-#subject [data-active] &gt; * {
+#subject [data-active] > * {
 	opacity: 1;
 }
 
@@ -931,7 +934,7 @@ body[data-move='Y'] {
 	color: #777;
 }
 
-#controls .category &gt; .group {
+#controls .category > .group {
 	border: 1px solid #CCC;
 	border-radius: 2px;
 }
@@ -1068,7 +1071,7 @@ body[data-move='Y'] {
 	width: 200px;
 }
 
-#aditional-properties .ui-input-slider &gt; input {
+#aditional-properties .ui-input-slider > input {
 	width: 80px !important;
 }
 
@@ -1207,10 +1210,10 @@ body[data-move='Y'] {
 	word-break: break-all;
 	float: left;
 }
+```
 
-</pre>
-
-<pre class="brush: js hidden">'use strict';
+```js hidden
+'use strict';
 
 /**
  * UI-SlidersManager
@@ -1290,12 +1293,12 @@ var InputSliderManager = (function InputSliderManager() {
 
 		this.min = isNaN(min) ? 0 : min;
 		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
 		this.topic = topic;
 		this.node = node;
 		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
 		value = isNaN(value) ? this.min : value;
 
 		var input = new InputComponent(this);
@@ -1332,8 +1335,8 @@ var InputSliderManager = (function InputSliderManager() {
 
 		value = parseFloat(value.toFixed(slider.precision));
 
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
 
 		slider.value = value;
 		slider.node.setAttribute('data-value', value);
@@ -1404,7 +1407,7 @@ var InputSliderManager = (function InputSliderManager() {
 
 		value = value | 0;
 
-		slider.sensivity = value &gt; 0 ? value : 5;
+		slider.sensivity = value > 0 ? value : 5;
 	};
 
 	var getNode =  function getNode(topic) {
@@ -1433,7 +1436,7 @@ var InputSliderManager = (function InputSliderManager() {
 	var notify = function notify() {
 		if (subscribers[this.topic] === undefined)
 			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+		for (var i = 0; i < subscribers[this.topic].length; i++)
 			subscribers[this.topic][i](this.value);
 	};
 
@@ -1452,7 +1455,7 @@ var InputSliderManager = (function InputSliderManager() {
 	var init = function init() {
 		var elem = document.querySelectorAll('.ui-input-slider');
 		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			new InputSlider(elem[i]);
 	};
 
@@ -1568,7 +1571,7 @@ var DropDownManager = (function DropdownManager() {
 
 	DropDown.prototype.updateValue = function updateValue(e) {
 
-		if (Date.now() - this.time &lt; 500)
+		if (Date.now() - this.time < 500)
 			return;
 
 		if (e.target.className !== "ui-dropdown-list") {
@@ -1609,7 +1612,7 @@ var DropDownManager = (function DropdownManager() {
 
 	var setValue = function setValue(topic, index) {
 		if (dropdowns[topic] === undefined ||
-			index &gt;= dropdowns[topic].dropmenu.children.length)
+			index >= dropdowns[topic].dropmenu.children.length)
 			return;
 
 		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
@@ -1640,7 +1643,7 @@ var DropDownManager = (function DropdownManager() {
 
 		elem = document.querySelectorAll('.ui-dropdown');
 		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			new DropDown(elem[i]);
 
 	};
@@ -1731,14 +1734,14 @@ var ButtonManager = (function CheckBoxManager() {
 	var notify = function notify() {
 		if (subscribers[this.topic] === undefined)
 			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+		for (var i = 0; i < subscribers[this.topic].length; i++)
 			subscribers[this.topic][i](this.checkbox.checked);
 	};
 
 	var init = function init() {
 		var elem = document.querySelectorAll('.ui-checkbox');
 		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			new CheckBox(elem[i]);
 	};
 
@@ -2026,7 +2029,7 @@ var BorderImage = (function BorderImage() {
 			var value_array;
 
 			for (var i in topics) {
-				for (var j=0; j&lt;4; j++) {
+				for (var j=0; j<4; j++) {
 					topic = topics[i] + '-' + positions[j];
 					unit_array = topics[i] + '_units';
 					value_array = topics[i] + '_values';
@@ -2067,7 +2070,7 @@ var BorderImage = (function BorderImage() {
 			subject.style.width = w + 'px';
 			subject.style.height = h + 'px';
 
-			for (var i = 0; i &lt; positions.length; i++)
+			for (var i = 0; i < positions.length; i++)
 				guidelines['slice-' + positions[i]].updateGuidelinePos();
 		};
 
@@ -2474,7 +2477,7 @@ var BorderImage = (function BorderImage() {
 				});
 			};
 
-			for (var i = 0; i &lt; positions.length; i++) {
+			for (var i = 0; i < positions.length; i++) {
 				var topic = 'slice-' + positions[i];
 				var property = createProperty(topic, i, 0);
 				listenForChanges(topic, i);
@@ -2508,7 +2511,7 @@ var BorderImage = (function BorderImage() {
 				});
 			};
 
-			for (var i = 0; i &lt; positions.length; i++) {
+			for (var i = 0; i < positions.length; i++) {
 				var topic = 'width-' + positions[i];
 				var property = createProperty(topic, i, 1);
 				InputSliderManager.setMax(topic, 1000);
@@ -2536,7 +2539,7 @@ var BorderImage = (function BorderImage() {
 				});
 			};
 
-			for (var i = 0; i &lt; positions.length; i++) {
+			for (var i = 0; i < positions.length; i++) {
 				var topic = 'outset-' + positions[i];
 				var property = createProperty(topic, i, 2);
 				InputSliderManager.setMax(topic, 1000);
@@ -2566,7 +2569,7 @@ var BorderImage = (function BorderImage() {
 
 			var elem = document.querySelectorAll('.guideline');
 			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
+			for (var i = 0; i < size; i++)
 				new GuideLine(elem[i]);
 
 			PreviewControl.init();
@@ -2611,7 +2614,6 @@ var BorderImage = (function BorderImage() {
 	};
 
 })();
+```
 
-</pre>
-
-<p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p>
+{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}
diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
index 0cb8e25181..b284c2f329 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
+++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
@@ -7,100 +7,102 @@ tags:
 translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 ---
-<p>Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.</p>
-
-<h2>border-radius-generator</h2>
-
-<pre class="brush: html hidden">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="preview" class="col span_12"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom"&gt;
-                &lt;/div&gt;
-
-                &lt;div id="radius-ui-sliders"&gt;
-                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div id="controls" class="group section"&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="dimensions"&gt;
-                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
-
-                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="radius-lock"&gt;
-                &lt;div class="info"&gt; Coins arrondis &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="unit-selection"&gt;
-                &lt;div class="info"&gt; Unités pour la bordure &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css hidden">/*  GRID OF TEN
+Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.
+
+## border-radius-generator
+
+```html hidden
+<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> Coins arrondis </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> Unités pour la bordure </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+```
+
+```css hidden
+/*  GRID OF TEN
  * ========================================================================== */
 
 .span_12 {
@@ -214,7 +216,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 
 /* Input Slider */
 
-.ui-input-slider &gt; input {
+.ui-input-slider > input {
 	margin: 0;
 	padding: 0;
 	width: 50px;
@@ -283,11 +285,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 	user-select: none;
 }
 
-.ui-checkbox &gt; input {
+.ui-checkbox > input {
  	display: none;
 }
 
-.ui-checkbox &gt; label {
+.ui-checkbox > label {
 	font-size: 12px;
 	padding: 0.333em 1.666em 0.5em;
 	height: 1em;
@@ -315,11 +317,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 	background-position: center right 10px;
 }
 
-.ui-checkbox &gt; label:hover {
+.ui-checkbox > label:hover {
 	cursor: pointer;
 }
 
-.ui-checkbox &gt; input:checked + label {
+.ui-checkbox > input:checked + label {
 	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
 	background-color: #379B4A;
 }
@@ -741,7 +743,7 @@ body {
 	position: absolute;
 }
 
-#radius-lock .ui-checkbox &gt; label {
+#radius-lock .ui-checkbox > label {
 	height: 20px;
 	width: 34px;
 	padding: 0;
@@ -809,11 +811,10 @@ body {
 
 	float: right;
 }
+```
 
-
-</pre>
-
-<pre class="brush: js hidden"><code class="language-js">'use strict';
+```js hidden
+'use strict';
 
 
 /**
@@ -892,12 +893,12 @@ var InputSliderManager = (function InputSliderManager() {
 		var sensivity = node.getAttribute('data-sensivity') | 0;
 
 		this.min = min;
-		this.max = max &gt; 0 ? max : 100;
+		this.max = max > 0 ? max : 100;
 		this.step = step === 0 ? 1 : step;
 		this.topic = topic;
 		this.node = node;
 		this.unit = unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
 
 		var input = new InputComponent(this);
 		var slider_left  = new SliderComponent(this, -1);
@@ -928,13 +929,13 @@ var InputSliderManager = (function InputSliderManager() {
 		if (slider === undefined)
 			return;
 
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
 
 		slider.value = value;
 		slider.node.setAttribute('data-value', value);
 
-		if (send_notify !== undefined &amp;&amp; send_notify === false) {
+		if (send_notify !== undefined && send_notify === false) {
 			slider.input.value = value + slider.unit;
 			return;
 		}
@@ -993,7 +994,7 @@ var InputSliderManager = (function InputSliderManager() {
 	var init = function init() {
 		var elem = document.querySelectorAll('.ui-input-slider');
 		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			new InputSlider(elem[i]);
 	}
 
@@ -1083,14 +1084,14 @@ var ButtonManager = (function CheckBoxManager() {
 	}
 
 	var notify = function notify() {
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+		for (var i = 0; i < subscribers[this.topic].length; i++)
 			subscribers[this.topic][i](this.checkbox.checked);
 	}
 
 	var init = function init() {
 		var elem = document.querySelectorAll('.ui-checkbox');
 		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			new CheckBox(elem[i]);
 	}
 
@@ -1269,10 +1270,10 @@ var BorderRadius = (function BorderRadius() {
 			this.setUnitR(e.target.value | 0);
 		}.bind(this));
 
-		if (x === 'left' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' &amp;&amp; y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
 
 		handle.addEventListener("mousedown", function(e) {
 			active = true;
@@ -1419,7 +1420,7 @@ var BorderRadius = (function BorderRadius() {
 		var valueX = Math.round(this.width / 2);
 		var valueY = Math.round(this.height / 2);
 
-		if (valueX === valueY &amp;&amp; this.unitX === this.unitY)
+		if (valueX === valueY && this.unitX === this.unitY)
 			return valueX + unitX;
 
 		return valueX + unitX + ' ' + valueY + unitY;
@@ -1456,8 +1457,8 @@ var BorderRadius = (function BorderRadius() {
 
 		if (this.rounded === true) {
 			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
-			if (this.size &lt; 0)	this.size = 0;
-			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
 			this.updateRadius();
 			this.updateBorderRadius();
 			return;
@@ -1465,15 +1466,15 @@ var BorderRadius = (function BorderRadius() {
 
 		if (deltaX) {
 			this.width += this.resizeX * deltaX;
-			if (this.width &lt; 0)	this.width = 0;
-			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
 			this.updateWidth();
 		}
 
 		if (deltaY) {
 			this.height += this.resizeY * deltaY;
-			if (this.height &lt; 0) this.height = 0;
-			if (this.height &gt; this.maxH)	this.height = this.maxH;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
 			this.updateHeight();
 		}
 
@@ -1498,7 +1499,7 @@ var BorderRadius = (function BorderRadius() {
 			var left = (pwidth - value) / 2;
 			subject.style.width = value + "px";
 
-			for (var i = 0; i &lt; 4; i++)
+			for (var i = 0; i < 4; i++)
 				radius_containers[i].updateUnits(0);
 		}
 
@@ -1508,7 +1509,7 @@ var BorderRadius = (function BorderRadius() {
 			subject.style.height = value + "px";
 			subject.style.top = top - border_width + "px";
 
-			for (var i = 0; i &lt; 4; i++)
+			for (var i = 0; i < 4; i++)
 				radius_containers[i].updateUnits(1);
 		}
 
@@ -1554,7 +1555,7 @@ var BorderRadius = (function BorderRadius() {
 
 			var elem = document.querySelectorAll('.radius-container');
 			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
+			for (var i = 0; i < size; i++)
 				radius_containers[i] = new RadiusContainer(elem[i]);
 
 			InputSliderManager.subscribe("width", updateUIWidth);
@@ -1586,8 +1587,6 @@ var BorderRadius = (function BorderRadius() {
 	}
 
 })();
+```
 
-
-</code></pre>
-
-<p>{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}</p>
+{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}
diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md
index bc0470ae50..5fb89998da 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md
+++ b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md
@@ -7,208 +7,210 @@ tags:
 translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
 original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
 ---
-<p>Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.</p>
-
-<pre class="brush: html hidden">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="layer_manager"&gt;
-            &lt;div class="group section"&gt;
-                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="stack_container"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_zone"&gt;
-            &lt;div id="layer_menu" class="col span_12"&gt;
-                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
-                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.
+
+```html hidden
+<div id="container">
+    <div class="group section">
+        <div id="layer_manager">
+            <div class="group section">
+                <div class="button" data-type="add"> </div>
+                <div class="button" data-type="move-up"> </div>
+                <div class="button" data-type="move-down"> </div>
+            </div>
+            <div id="stack_container"></div>
+        </div>
+
+        <div id="preview_zone">
+            <div id="layer_menu" class="col span_12">
+                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
+                <div class="button" id="before" data-type="subject" data-title=":before">
                     :before
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="button" id="after" data-type="subject" data-title=":after">
                     :after
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="preview"&gt;
-                &lt;div id="obj-element"&gt;
-                    &lt;div class="content"&gt; &lt;/div&gt;
-                    &lt;div id="obj-before"&gt; &lt;/div&gt;
-                    &lt;div id="obj-after"&gt; &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div id="controls" class="group section"&gt;
-        &lt;div class="wrap-left"&gt;
-            &lt;div class="colorpicker category"&gt;
-                &lt;div class="title"&gt; &lt;/div&gt;
-                &lt;div id="colorpicker" class="group"&gt;
-                    &lt;div id="gradient" class="gradient"&gt;
-                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
-                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="alpha"&gt;
-                        &lt;div id="alpha" data-topic="alpha"&gt;
-                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
-                        &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="preview block"&gt;
-                        &lt;div id="output_color"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="block info"&gt;
-                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="wrap-right"&gt;
-
-            &lt;div id="shadow_properties" class="category"&gt;
-                &lt;div class="title"&gt; Propriétés d'ombre &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posX"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posY"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="blur"
-                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="spread"
-                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="element_properties" class="category"&gt;
-                &lt;div class="title"&gt; Propriétés d'ombre &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="z-index" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="z-index"
-                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="top"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="left"
-                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="transform_rotate" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="rotate"
-                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="width"
-                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="height"
-                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
-                &lt;div class="title"&gt;    Code CSS &lt;/div&gt;
-                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
-                    &lt;div class="output" data-topic="element" data-name="element"
-                        data-prop="width height background-color position=[relative] box-shadow"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="before" data-name="element:before"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="after" data-name="element:after"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css hidden">/*  GRID OF TWELVE
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
+                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
+            </div>
+
+            <div id="preview">
+                <div id="obj-element">
+                    <div class="content"> </div>
+                    <div id="obj-before"> </div>
+                    <div id="obj-after"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="controls" class="group section">
+        <div class="wrap-left">
+            <div class="colorpicker category">
+                <div class="title"> </div>
+                <div id="colorpicker" class="group">
+                    <div id="gradient" class="gradient">
+                        <div id="gradient_picker"> </div>
+                    </div>
+                    <div id="hue" data-topic="hue" class="hue">
+                        <div id="hue_selector"> </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
+                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
+                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
+                    </div>
+                    <div class="alpha">
+                        <div id="alpha" data-topic="alpha">
+                            <div id="alpha_selector"> </div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
+                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
+                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
+                    </div>
+                    <div class="preview block">
+                        <div id="output_color"> </div>
+                    </div>
+                    <div class="block info">
+                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
+                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wrap-right">
+
+            <div id="shadow_properties" class="category">
+                <div class="title"> Propriétés d'ombre </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> inset </div>
+                        <div class="ui-checkbox" data-topic='inset'></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position x </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position y </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Blur </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Spread </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="element_properties" class="category">
+                <div class="title"> Propriétés d'ombre </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> border </div>
+                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
+                    </div>
+                    <div id="z-index" class="slidergroup">
+                        <div class="ui-slider-name"> z-index </div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"></div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="z-index"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> top </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> left </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
+                    </div>
+                    <div id="transform_rotate" class="slidergroup">
+                        <div class="ui-slider-name"> Rotate </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Width </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Height </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="output" class="category">
+                <div id="menu" class="menu"></div>
+                <div class="title">    Code CSS </div>
+                <div class="group" style="border-top-left-radius: 0;">
+                    <div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow">
+                    </div>
+                    <div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                    <div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+```css hidden
+/*  GRID OF TWELVE
  * ========================================================================== */
 
 .span_12 {
@@ -365,7 +367,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
 	cursor: pointer;
 }
 
-.ui-slider-input &gt; input {
+.ui-slider-input > input {
 	margin: 0 10px;
 	padding: 0;
 	width: 50px;
@@ -395,11 +397,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
 	user-select: none;
 }
 
-.ui-checkbox &gt; input {
+.ui-checkbox > input {
  	display: none;
 }
 
-.ui-checkbox &gt; label {
+.ui-checkbox > label {
 	font-size: 12px;
 	padding: 0.333em 1.666em 0.5em;
 	height: 1em;
@@ -427,11 +429,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
 	background-position: center right 10px;
 }
 
-.ui-checkbox &gt; label:hover {
+.ui-checkbox > label:hover {
 	cursor: pointer;
 }
 
-.ui-checkbox &gt; input:checked + label {
+.ui-checkbox > input:checked + label {
 	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
 	background-color: #379B4A;
 }
@@ -721,7 +723,7 @@ body {
 
 /* Checkbox */
 
-#layer_menu .ui-checkbox &gt; label {
+#layer_menu .ui-checkbox > label {
 	height: 15px;
 	line-height: 17px;
 	font-weight: normal;
@@ -729,7 +731,7 @@ body {
 	margin: 0 5px 0 0;
 }
 
-#layer_menu .ui-checkbox &gt; input:checked + label {
+#layer_menu .ui-checkbox > input:checked + label {
 	display: none;
 }
 
@@ -816,11 +818,11 @@ body {
 	overflow: hidden;
 }
 
-.wrap-left &gt; * {
+.wrap-left > * {
 	float: left;
 }
 
-.wrap-right &gt; * {
+.wrap-right > * {
 	float: right;
 }
 
@@ -869,7 +871,7 @@ body {
 	text-align: right;
 }
 
-#controls .category &gt; .group {
+#controls .category > .group {
 	border: 1px solid #CCC;
 	border-radius: 3px;
 }
@@ -1018,7 +1020,7 @@ body {
 	z-index: 1;
 }
 
-#colorpicker .preview &gt; * {
+#colorpicker .preview > * {
 	width: 50%;
 	height: 100%;
 }
@@ -1034,7 +1036,7 @@ body {
 	float: right;
 }
 
-#colorpicker [data-topic="a"] &gt; span {
+#colorpicker [data-topic="a"] > span {
 	width: 50px;
 }
 
@@ -1043,11 +1045,11 @@ body {
 	margin: 10px 0 0 0;
 }
 
-#colorpicker [data-topic="hexa"] &gt; span {
+#colorpicker [data-topic="hexa"] > span {
 	display: none;
 }
 
-#colorpicker [data-topic="hexa"] &gt; input {
+#colorpicker [data-topic="hexa"] > input {
 	width: 85px;
 	padding: 2px 0;
 	-moz-box-sizing: border-box;
@@ -1165,10 +1167,10 @@ body {
 	width: 65%;
 	float: left;
 }
+```
 
-</pre>
+```js hidden
 
-<pre class="brush: js hidden"><code class="language-js">
 
 'use strict';
 
@@ -1190,9 +1192,9 @@ var SliderManager = (function SliderManager() {
 		var topic = node.getAttribute('data-topic');
 
 		this.min = min;
-		this.max = max &gt; 0 ? max : 100;
+		this.max = max > 0 ? max : 100;
 		this.step = step === 0 ? 1 : step;
-		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
 		this.snap = snap === "true" ? true : false;
 		this.topic = topic;
 		this.node = node;
@@ -1255,7 +1257,7 @@ var SliderManager = (function SliderManager() {
 		if (slider === null || slider === undefined)
 			return;
 
-		if (slider.value + slider.step &lt;= slider.max) {
+		if (slider.value + slider.step <= slider.max) {
 			slider.value += slider.step;
 			setValue(slider.topic, slider.value)
 			notify.call(slider);
@@ -1267,7 +1269,7 @@ var SliderManager = (function SliderManager() {
 		if (slider === null || slider === undefined)
 			return;
 
-		if (slider.value - slider.step &gt;= slider.min) {
+		if (slider.value - slider.step >= slider.min) {
 			slider.value -= slider.step;
 			setValue(topic, slider.value)
 			notify.call(slider);
@@ -1282,13 +1284,13 @@ var SliderManager = (function SliderManager() {
 		var delta = this.max - this.min;
 		var offset = this.pointer.clientWidth + 4; // border width * 2
 
-		if (pos &lt; 0) pos = 0;
-		if (pos &gt; width) pos = width;
+		if (pos < 0) pos = 0;
+		if (pos > width) pos = width;
 
 		var value = pos * delta / width | 0;
 		var precision = value % this.step;
 		value = value - precision + this.min;
-		if (precision &gt; this.step / 2)
+		if (precision > this.step / 2)
 			value = value + this.step;
 
 		if (this.snap)
@@ -1303,7 +1305,7 @@ var SliderManager = (function SliderManager() {
 	var setValue = function setValue(topic, value) {
 		var slider = sliders[topic];
 
-		if (value &gt; slider.max || value &lt; slider.min)
+		if (value > slider.max || value < slider.min)
 			return;
 
 		var delta = slider.max - slider.min;
@@ -1352,17 +1354,17 @@ var SliderManager = (function SliderManager() {
 
 		elem = document.querySelectorAll('.ui-slider-btn-set');
 		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			setButtonComponent(elem[i]);
 
 		elem = document.querySelectorAll('.ui-slider-input');
 		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			setInputComponent(elem[i]);
 
 		elem = document.querySelectorAll('.ui-slider');
 		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			new Slider(elem[i]);
 	}
 
@@ -1451,14 +1453,14 @@ var ButtonManager = (function CheckBoxManager() {
 	var notify = function notify() {
 		if (subscribers[this.topic] === undefined)
 			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+		for (var i = 0; i < subscribers[this.topic].length; i++)
 			subscribers[this.topic][i](this.checkbox.checked);
 	}
 
 	var init = function init() {
 		var elem = document.querySelectorAll('.ui-checkbox');
 		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			new CheckBox(elem[i]);
 	}
 
@@ -1548,12 +1550,12 @@ var BoxShadow = (function BoxShadow() {
 		X = (X + m) * precision;
 		m = m * precision;
 
-		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
-		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
-		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
-		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
-		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
-		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
 	}
 
 	Color.prototype.updateHSV = function updateHSV() {
@@ -1575,7 +1577,7 @@ var BoxShadow = (function BoxShadow() {
 		}
 
 		this.hue = 60 * hue | 0;
-		if (this.hue &lt; 0) this.hue += 360;
+		if (this.hue < 0) this.hue += 360;
 		this.saturation = (saturation * 100) | 0;
 		this.value = (cmax * 100) | 0;
 	}
@@ -1602,9 +1604,9 @@ var BoxShadow = (function BoxShadow() {
 		var r = this.r.toString(16);
 		var g = this.g.toString(16);
 		var b = this.b.toString(16);
-		if (this.r &lt; 16) r = '0' + r;
-		if (this.g &lt; 16) g = '0' + g;
-		if (this.b &lt; 16) b = '0' + b;
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
 		var value = '#' + r + g + b;
 		return value.toUpperCase();
 	}
@@ -1707,13 +1709,13 @@ var BoxShadow = (function BoxShadow() {
 			// width and height should be the same
 			var size = gradient_area.clientWidth;
 
-			if (x &gt; size)
+			if (x > size)
 				x = size;
-			if (y &gt; size)
+			if (y > size)
 				y = size;
 
-			if (x &lt; 0) x = 0;
-			if (y &lt; 0) y = 0;
+			if (x < 0) x = 0;
+			if (y < 0) y = 0;
 
 			var value = 100 - (y * 100 / size) | 0;
 			var saturation = x * 100 / size | 0;
@@ -1729,8 +1731,8 @@ var BoxShadow = (function BoxShadow() {
 			var x = e.pageX - hue_area.offsetLeft;
 			var width = hue_area.clientWidth;
 
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
+			if (x < 0) x = 0;
+			if (x > width) x = width;
 
 			var hue = ((360 * x) / width) | 0;
 			if (hue === 360) hue = 359;
@@ -1749,8 +1751,8 @@ var BoxShadow = (function BoxShadow() {
 			var x = e.pageX - alpha_area.offsetLeft;
 			var width = alpha_area.clientWidth;
 
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
+			if (x < 0) x = 0;
+			if (x > width) x = width;
 
 			color.a = (x / width).toFixed(2);
 
@@ -1874,8 +1876,8 @@ var BoxShadow = (function BoxShadow() {
 			var node = document.querySelector("#colorpicker " + selector);
 			var value = parseInt(node.value);
 
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt; 360)
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value < 360)
 				color[topic] = value;
 
 			color.updateRGB();
@@ -1887,8 +1889,8 @@ var BoxShadow = (function BoxShadow() {
 			var node = document.querySelector("#colorpicker " + selector);
 			var value = parseInt(node.value);
 
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 255)
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 255)
 				color[topic] = value;
 
 			color.updateHSV();
@@ -1900,8 +1902,8 @@ var BoxShadow = (function BoxShadow() {
 			var node = document.querySelector("#colorpicker " + selector);
 			var value = parseFloat(node.value);
 
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 1)
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 1)
 				color.a = value.toFixed(2);
 
 			updateUI();
@@ -1969,7 +1971,7 @@ var BoxShadow = (function BoxShadow() {
 
 			var elem = document.querySelectorAll('#colorpicker .input');
 			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
+			for (var i = 0; i < size; i++)
 				setInputComponent(elem[i]);
 
 			setMouseTracking(gradient_area, updateColor);
@@ -2507,7 +2509,7 @@ var BoxShadow = (function BoxShadow() {
 			var uid = this.getUID();
 			var layer = this.createLayer(uid);
 
-			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+			if (this.layer === null && this.stack.children.length >= 1)
 				this.layer = this.stack.children[0];
 
 			this.stack.insertBefore(layer, this.layer);
@@ -2538,11 +2540,11 @@ var BoxShadow = (function BoxShadow() {
 
 		// SOLVE IE BUG
 		Stack.prototype.moveLayer = function moveLayer(direction) {
-			if (this.count &lt;= 1 || this.layer === null)
+			if (this.count <= 1 || this.layer === null)
 				return;
-			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+			if (direction === -1 && this.layerID === (this.count - 1) )
 				return;
-			if (direction === 1 &amp;&amp; this.layerID === 0 )
+			if (direction === 1 && this.layerID === 0 )
 				return;
 
 			if (direction === -1) {
@@ -2582,11 +2584,11 @@ var BoxShadow = (function BoxShadow() {
 
 			Tool.deleteShadow(index);
 
-			if (index &gt; this.layerID)
+			if (index > this.layerID)
 				return;
 
 			if (index == this.layerID) {
-				if (this.count &gt;= 1) {
+				if (this.count >= 1) {
 					this.layerID = 0;
 					this.setActiveLayer(this.stack.children[0], true);
 				}
@@ -2596,7 +2598,7 @@ var BoxShadow = (function BoxShadow() {
 				}
 			}
 
-			if (index &lt; this.layerID) {
+			if (index < this.layerID) {
 				this.layerID--;
 				Tool.setActiveShadow(this.layerID, true);
 			}
@@ -2669,7 +2671,7 @@ var BoxShadow = (function BoxShadow() {
 			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
 			size = elem.length;
 
-			for (var i = 0; i &lt; size; i++) {
+			for (var i = 0; i < size; i++) {
 				var S = new Stack(elem[i]);
 				stacks[elem[i].id] = S;
 				container.appendChild(S.container);
@@ -2683,16 +2685,16 @@ var BoxShadow = (function BoxShadow() {
 			layerMenu.addEventListener("click", mouseEvents);
 
 			ButtonManager.subscribe("before", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['before'])
+				if (value === false && active.stack === stacks['before'])
 					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['before'])
+				if (value === true && active.stack !== stacks['before'])
 					setActiveStack(stacks['before'])
 			});
 
 			ButtonManager.subscribe("after", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['after'])
+				if (value === false && active.stack === stacks['after'])
 					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['after'])
+				if (value === true && active.stack !== stacks['after'])
 					setActiveStack(stacks['after'])
 			});
 		}
@@ -2823,7 +2825,7 @@ var BoxShadow = (function BoxShadow() {
 
 			var elem = document.querySelectorAll('#output .output');
 			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
+			for (var i = 0; i < size; i++)
 				OutputClass(elem[i]);
 
 			active = classes['element'];
@@ -2865,14 +2867,10 @@ var BoxShadow = (function BoxShadow() {
 	}
 
 })();
+```
 
+{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
 
-</code></pre>
+## Voir aussi
 
-<div>{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Le générateur d'ombres CSS</a></li>
-</ul>
+- [Le générateur d'ombres CSS](https://cssgenerator.org/box-shadow-css-generator.html)
diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.md b/files/fr/web/css/css_backgrounds_and_borders/index.md
index bac2b33946..cfcdb58e26 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/index.md
+++ b/files/fr/web/css/css_backgrounds_and_borders/index.md
@@ -8,108 +8,81 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Backgrounds_and_Borders
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Backgrounds and Borders</strong></em> est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.</p>
+**_CSS Backgrounds and Borders_** est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+### Propriétés CSS
 
-<ul>
- <li>{{cssxref("background")}}</li>
- <li>{{cssxref("background-attachment")}}</li>
- <li>{{cssxref("background-clip")}}</li>
- <li>{{cssxref("background-color")}}</li>
- <li>{{cssxref("background-image")}}</li>
- <li>{{cssxref("background-origin")}}</li>
- <li>{{cssxref("background-position")}}</li>
- <li>{{cssxref("background-position-x")}}</li>
- <li>{{cssxref("background-position-y")}}</li>
- <li>{{cssxref("background-repeat")}}</li>
- <li>{{cssxref("background-size")}}</li>
- <li>{{cssxref("border")}}</li>
- <li>{{cssxref("border-bottom")}}</li>
- <li>{{cssxref("border-bottom-color")}}</li>
- <li>{{cssxref("border-bottom-left-radius")}}</li>
- <li>{{cssxref("border-bottom-right-radius")}}</li>
- <li>{{cssxref("border-bottom-style")}}</li>
- <li>{{cssxref("border-bottom-width")}}</li>
- <li>{{cssxref("border-collapse")}}</li>
- <li>{{cssxref("border-color")}}</li>
- <li>{{cssxref("border-image")}}</li>
- <li>{{cssxref("border-image-outset")}}</li>
- <li>{{cssxref("border-image-repeat")}}</li>
- <li>{{cssxref("border-image-slice")}}</li>
- <li>{{cssxref("border-image-source")}}</li>
- <li>{{cssxref("border-image-width")}}</li>
- <li>{{cssxref("border-left")}}</li>
- <li>{{cssxref("border-left-color")}}</li>
- <li>{{cssxref("border-left-style")}}</li>
- <li>{{cssxref("border-left-width")}}</li>
- <li>{{cssxref("border-radius")}}</li>
- <li>{{cssxref("border-right")}}</li>
- <li>{{cssxref("border-right-color")}}</li>
- <li>{{cssxref("border-right-style")}}</li>
- <li>{{cssxref("border-right-width")}}</li>
- <li>{{cssxref("border-style")}}</li>
- <li>{{cssxref("border-top")}}</li>
- <li>{{cssxref("border-top-color")}}</li>
- <li>{{cssxref("border-top-left-radius")}}</li>
- <li>{{cssxref("border-top-right-radius")}}</li>
- <li>{{cssxref("border-top-style")}}</li>
- <li>{{cssxref("border-top-width")}}</li>
- <li>{{cssxref("border-width")}}</li>
- <li>{{cssxref("box-shadow")}}</li>
-</ul>
+- {{cssxref("background")}}
+- {{cssxref("background-attachment")}}
+- {{cssxref("background-clip")}}
+- {{cssxref("background-color")}}
+- {{cssxref("background-image")}}
+- {{cssxref("background-origin")}}
+- {{cssxref("background-position")}}
+- {{cssxref("background-position-x")}}
+- {{cssxref("background-position-y")}}
+- {{cssxref("background-repeat")}}
+- {{cssxref("background-size")}}
+- {{cssxref("border")}}
+- {{cssxref("border-bottom")}}
+- {{cssxref("border-bottom-color")}}
+- {{cssxref("border-bottom-left-radius")}}
+- {{cssxref("border-bottom-right-radius")}}
+- {{cssxref("border-bottom-style")}}
+- {{cssxref("border-bottom-width")}}
+- {{cssxref("border-collapse")}}
+- {{cssxref("border-color")}}
+- {{cssxref("border-image")}}
+- {{cssxref("border-image-outset")}}
+- {{cssxref("border-image-repeat")}}
+- {{cssxref("border-image-slice")}}
+- {{cssxref("border-image-source")}}
+- {{cssxref("border-image-width")}}
+- {{cssxref("border-left")}}
+- {{cssxref("border-left-color")}}
+- {{cssxref("border-left-style")}}
+- {{cssxref("border-left-width")}}
+- {{cssxref("border-radius")}}
+- {{cssxref("border-right")}}
+- {{cssxref("border-right-color")}}
+- {{cssxref("border-right-style")}}
+- {{cssxref("border-right-width")}}
+- {{cssxref("border-style")}}
+- {{cssxref("border-top")}}
+- {{cssxref("border-top-color")}}
+- {{cssxref("border-top-left-radius")}}
+- {{cssxref("border-top-right-radius")}}
+- {{cssxref("border-top-style")}}
+- {{cssxref("border-top-width")}}
+- {{cssxref("border-width")}}
+- {{cssxref("box-shadow")}}
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></dt>
- <dd>Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Mettre à l'échelle les images utilisées pour un arrière-plan</a></dt>
- <dd>Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.</dd>
- <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt>
- <dd>Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.</dd>
-</dl>
+- [Manipuler plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
+  - : Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.
+- [Mettre à l'échelle les images utilisées pour un arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images)
+  - : Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.
+- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
+  - : Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.
 
-<h2 id="Outils">Outils</h2>
+## Outils
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur pour <code>border-image</code></a></dt>
- <dd>Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).</dd>
- <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur pour <code>border-radius</code></a></dt>
- <dd>Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).</dd>
- <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur pour <code>box-shadow</code></a></dt>
- <dd>Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).</dd>
-</dl>
+- [Générateur pour `border-image`](/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image)
+  - : Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).
+- [Générateur pour `border-radius`](/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius)
+  - : Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).
+- [Générateur pour `box-shadow`](/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow)
+  - : Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | État                                     | Commentaires |
+| -------------------------------------------- | ---------------------------------------- | ------------ |
+| {{SpecName('CSS3 Backgrounds')}} | {{Spec2('CSS3 Backgrounds')}} |              |
+| {{SpecName('CSS2.1', 'box.html')}} | {{Spec2('CSS2.1')}}                 |              |
+| {{SpecName('CSS1', '#border')}}     | {{Spec2('CSS1')}}                 |              |
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 6a92d4d7e5..6688539186 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
@@ -9,19 +9,20 @@ tags:
 translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
 original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.</p>
+La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.
 
-<h2 id="Carreler_une_image_de_grande_taille">Carreler une image de grande taille</h2>
+## Carreler une image de grande taille
 
-<p>Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.</p>
+Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.
 
-<p><img alt="" src="logo-quantum.9c5e96634f92.png"></p>
+![](logo-quantum.9c5e96634f92.png)
 
-<p>On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :</p>
+On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :
 
-<pre class="brush: css">.square {
+```css
+.square {
   width: 300px;
   height: 300px;
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
@@ -30,28 +31,30 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
   font-size: 16px;
   background-size: 150px;
 }
-</pre>
+```
 
-<p>On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à <code>auto</code>.</p>
+On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à `auto`.
 
-<h2 id="Étirer_une_image">Étirer une image</h2>
+## Étirer une image
 
-<p>Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.</p>
+Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.
 
-<pre class="brush:css">background-size: 300px 150px;
-</pre>
+```css
+background-size: 300px 150px;
+```
 
-<p>L'image suivante montre le résultat obtenu.</p>
+L'image suivante montre le résultat obtenu.
 
-<p><img alt="Logo de Firefox étité" src="s.codepen.io_richienb_debug_lonxgp_pnkvygvggyxa.png"></p>
+![Logo de Firefox étité](s.codepen.io_richienb_debug_lonxgp_pnkvygvggyxa.png)
 
-<h2 id="Agrandir_une_image">Agrandir une image</h2>
+## Agrandir une image
 
-<p>On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.</p>
+On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.
 
-<p><img alt="Logo MDN à l'échelle" src="favicon57.de33179910ae.1.1.png"></p>
+![Logo MDN à l'échelle](favicon57.de33179910ae.1.1.png)
 
-<pre class="brush: css">.square2 {
+```css
+.square2 {
   width: 300px;
   height: 300px;
   background-image: url(favicon.png);
@@ -60,57 +63,62 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
   text-shadow: white 0px 0px 2px;
   font-size: 16px;
 }
-</pre>
+```
 
-<p>On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.</p>
+On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.
 
-<h2 id="Valeurs_spéciales_contain_et_cover">Valeurs spéciales : <code>contain</code> et <code>cover</code></h2>
+## Valeurs spéciales : `contain` et `cover`
 
-<p>En plus de {{cssxref("&lt;length&gt;")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : <code>contain</code> et <code>cover</code>. </p>
+En plus de {{cssxref("&lt;length&gt;")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : `contain` et `cover`.
 
-<h3 id="contain"><code>contain</code></h3>
+### `contain`
 
-<p>La valeur <code>contain</code> spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.</p>
+La valeur `contain` spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.
 
-<p>Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur <code>contain</code> en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).</p>
+Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur `contain` en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).
 
-<p>{{EmbedLiveSample("contain", "100%", "220")}}</p>
+{{EmbedLiveSample("contain", "100%", "220")}}
 
-<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
-  &lt;p&gt;Redimensionnez la fenêtre de votre navigateur.&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="bgSizeContain">
+  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+</div>
+```
 
-<pre class="brush:css">.bgSizeContain {
+```css
+.bgSizeContain {
   height: 200px;
   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;
-}</pre>
+}
+```
 
-<h3 id="cover"><code>cover</code></h3>
+### `cover`
 
-<p>La valeur <code>cover</code> assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.</p>
+La valeur `cover` assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.
 
-<p>{{EmbedLiveSample("cover", "100%", "220")}}</p>
+{{EmbedLiveSample("cover", "100%", "220")}}
 
-<p>Cet exemple utilise le document HTML et la feuille de style suivants :</p>
+Cet exemple utilise le document HTML et la feuille de style suivants :
 
-<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
-  &lt;p&gt;Redimensionnez la fenêtre de votre navigateur.&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="bgSizeCover">
+  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+</div>
+```
 
-<pre class="brush:css">.bgSizeCover {
+```css
+.bgSizeCover {
   height: 200px;
   background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
   background-size: cover;
   border: 2px solid darkgray;
   color: #000; text-shadow: 1px 1px 0 #fff;
-</pre>
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("background-size")}}</li>
- <li>{{cssxref("background")}}</li>
-</ul>
+- {{cssxref("background-size")}}
+- {{cssxref("background")}}
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 04ac4ad67d..af2dc6baba 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
@@ -8,49 +8,50 @@ tags:
 translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
 original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Avec <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.</p>
+Avec [CSS3](/fr/docs/Web/CSS/CSS3), on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.
 
-<p>Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :</p>
+Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :
 
-<pre class="brush: css">.maClasse {
+```css
+.maClasse {
   background: background1, background 2, ..., backgroundN;
 }
-</pre>
+```
 
-<p>Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}},<code> </code>{{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.</p>
+Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}},` `{{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.</p>
+Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple_multi_ar {
+```css
+.exemple_multi_ar {
   width: 100%;
   height: 400px;
   background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/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;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple_multi_ar"&gt;&lt;/div&gt;</pre>
+```html
+<div class="exemple_multi_ar"></div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemple','100%','400')}}</p>
+{{EmbedLiveSample('Exemple','100%','400')}}
 
-<p>Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).</p>
+Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).
 
-<div class="note">
-<p><strong>Note :</strong> Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton <em>Tidy</em> de la section CSS.</p>
-</div>
+> **Note :** Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton _Tidy_ de la section CSS.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a></li>
-</ul>
+- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS)
diff --git a/files/fr/web/css/css_basic_user_interface/index.md b/files/fr/web/css/css_basic_user_interface/index.md
index b8e3ba66e4..f546d114f6 100644
--- a/files/fr/web/css/css_basic_user_interface/index.md
+++ b/files/fr/web/css/css_basic_user_interface/index.md
@@ -9,65 +9,40 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Basic_User_Interface
 ---
-<p>{{CSSRef}}</p>
-
-<p><em><strong>CSS Basic User Interface</strong></em> est un module de la spécification CSS qui décrit les fonctionnalités et le rendu associés aux fonctionnalités de l'interface utilisateur.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<ul>
- <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("box-sizing")}}</li>
- <li>{{CSSxRef("cursor")}}</li>
- <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li>
- <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("outline")}}</li>
- <li>{{CSSxRef("outline-width")}}</li>
- <li>{{CSSxRef("outline-style")}}</li>
- <li>{{CSSxRef("outline-color")}}</li>
- <li>{{CSSxRef("outline-offset")}}</li>
- <li>{{CSSxRef("resize")}}</li>
- <li>{{CSSxRef("text-overflow")}}</li>
- <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor">Utiliser des URL pour la propriété <code>cursor</code></a></dt>
- <dd>Ce guide décrit comment utiliser des URL avec la propriété {{CSSxRef("cursor")}} afin de créer des curseurs personnalisés.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Basic UI")}}</td>
-   <td>{{Spec2("CSS4 Basic UI")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Basic UI")}}</td>
-   <td>{{Spec2("CSS3 Basic UI")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "ui.html")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+{{CSSRef}}
+
+**_CSS Basic User Interface_** est un module de la spécification CSS qui décrit les fonctionnalités et le rendu associés aux fonctionnalités de l'interface utilisateur.
+
+## Référence
+
+### Propriétés
+
+- {{CSSxRef("appearance")}} {{Experimental_Inline}}
+- {{CSSxRef("box-sizing")}}
+- {{CSSxRef("cursor")}}
+- {{CSSxRef("ime-mode")}} {{Deprecated_Inline}}
+- {{CSSxRef("nav-down")}} {{Experimental_Inline}}
+- {{CSSxRef("nav-left")}} {{Experimental_Inline}}
+- {{CSSxRef("nav-right")}} {{Experimental_Inline}}
+- {{CSSxRef("nav-up")}} {{Experimental_Inline}}
+- {{CSSxRef("outline")}}
+- {{CSSxRef("outline-width")}}
+- {{CSSxRef("outline-style")}}
+- {{CSSxRef("outline-color")}}
+- {{CSSxRef("outline-offset")}}
+- {{CSSxRef("resize")}}
+- {{CSSxRef("text-overflow")}}
+- {{CSSxRef("user-select")}} {{Experimental_Inline}}
+
+## Guides
+
+- [Utiliser des URL pour la propriété `cursor`](/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor)
+  - : Ce guide décrit comment utiliser des URL avec la propriété {{CSSxRef("cursor")}} afin de créer des curseurs personnalisés.
+
+## Spécifications
+
+| Spécification                                | État                                 | Commentaires         |
+| -------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Basic UI")}}     | {{Spec2("CSS4 Basic UI")}} |                      |
+| {{SpecName("CSS3 Basic UI")}}     | {{Spec2("CSS3 Basic UI")}} |                      |
+| {{SpecName("CSS2.1", "ui.html")}} | {{Spec2("CSS2.1")}}             | Définition initiale. |
diff --git a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md
index d9cfe6891d..bd1938e714 100644
--- a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md
+++ b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md
@@ -8,98 +8,95 @@ tags:
 translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
 original_slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.</p>
+Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La syntaxe de base (CSS 2.1) pour cette propriété est :</p>
+La syntaxe de base (CSS 2.1) pour cette propriété est :
 
-<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> {{CSSxRef("&lt;url&gt;")}} , <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">*</a> {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Valeurs")}}</pre>
+    {{CSSxRef("cursor")}}: [ {{CSSxRef("&lt;url&gt;")}} , ]* {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Valeurs")}}
 
-<p>Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme <code>auto</code> ou <code>pointer</code>.</p>
+Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme `auto` ou `pointer`.
 
-<p>On pourra ainsi utiliser :</p>
+On pourra ainsi utiliser :
 
-<pre class="brush: css">cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto;
-</pre>
+```css
+cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto;
+```
 
-<p>En utilisant cette règle, le moteur essaiera d'abord de charger <code>toto.cur</code>. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de <code>truc.gif</code> qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur <code>auto</code> sera utilisé.</p>
+En utilisant cette règle, le moteur essaiera d'abord de charger `toto.cur`. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de `truc.gif` qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur `auto` sera utilisé.
 
-<p>Le support de la <a href="https://www.w3.org/TR/css3-ui/#cursor">syntaxe</a> CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.</p>
+Le support de la [syntaxe](https://www.w3.org/TR/css3-ui/#cursor) CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.
 
-<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> {{CSSxRef("&lt;uri&gt;")}} <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets">[</a> &lt;x&gt; &lt;y&gt; <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">?</a> , <a href="/fr/docs/Web/CSS/Value_definition_syntax">]</a><a href="/fr/docs/Web/CSS/Value_definition_syntax">*</a> {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Valeurs")}}
-</pre>
+    {{CSSxRef("cursor")}}: [ {{CSSxRef("&lt;uri&gt;")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Valeurs")}}
 
-<p>Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:</p>
+Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:
 
-<pre class="eval">cursor: url(toto.png) 4 12, auto;
-</pre>
+    cursor: url(toto.png) 4 12, auto;
 
-<p>Le premier nombre est la coordonnée <var>x</var>, le second numéro est la coordonnée <var>y</var>. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.</p>
+Le premier nombre est la coordonnée _x_, le second numéro est la coordonnée _y_. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.
 
-<h2 id="Limitations">Limitations</h2>
+## Limitations
 
-<p>Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.</p>
+Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.
 
-<div class="note">
-<p><strong>Note :</strong> À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.</p>
-</div>
+> **Note :** À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.
 
-<p>Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.</p>
+Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.
 
-<p>Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.</p>
+Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété <code>cursor</code>. Toutefois :</p>
+Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété `cursor`. Toutefois :
 
-<ul>
- <li>IE ne prend en charge que les formats CUR et ANI</li>
- <li>IE ne prend pas en charge la syntaxe CSS3 avec les coordonnées x et y. L'image du curseur et le reste de la propriété sont alors ignorés.</li>
-</ul>
+- IE ne prend en charge que les formats CUR et ANI
+- IE ne prend pas en charge la syntaxe CSS3 avec les coordonnées x et y. L'image du curseur et le reste de la propriété sont alors ignorés.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th>Navigateur</th>
-   <th>Version minimum</th>
-   <th>Formats</th>
-   <th>Coordonnées x-y</th>
-  </tr>
-  <tr>
-   <td>Internet Explorer</td>
-   <td><strong>6.0</strong></td>
-   <td><code>.cur | .ani</code></td>
-   <td>---</td>
-  </tr>
-  <tr>
-   <td>Firefox (Gecko), Windows et Linux</td>
-   <td><strong>1.5</strong> (1.8)</td>
-   <td><code>.cur | .png | .gif | .jpg</code></td>
-   <td>1.5 (1.8)</td>
-  </tr>
-  <tr>
-   <td>Firefox (Gecko)</td>
-   <td><strong>4.0</strong> (2.0)</td>
-   <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
-   <td>(Gecko 2.0)</td>
-  </tr>
-  <tr>
-   <td>Opera</td>
-   <td>---</td>
-   <td>---</td>
-   <td>---</td>
-  </tr>
-  <tr>
-   <td rowspan="2">Safari (Webkit)</td>
-   <td><strong>3.0</strong> (522-523)</td>
-   <td><code>.cur | .png | .gif | .jpg</code></td>
-   <td rowspan="2">3.0 (522-523)</td>
-  </tr>
-  <tr>
-   <td colspan="2">OS X 10.5 pour la prise en charge des fichiers <code>.cur</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Navigateur</th>
+      <th>Version minimum</th>
+      <th>Formats</th>
+      <th>Coordonnées x-y</th>
+    </tr>
+    <tr>
+      <td>Internet Explorer</td>
+      <td><strong>6.0</strong></td>
+      <td><code>.cur | .ani</code></td>
+      <td>---</td>
+    </tr>
+    <tr>
+      <td>Firefox (Gecko), Windows et Linux</td>
+      <td><strong>1.5</strong> (1.8)</td>
+      <td><code>.cur | .png | .gif | .jpg</code></td>
+      <td>1.5 (1.8)</td>
+    </tr>
+    <tr>
+      <td>Firefox (Gecko)</td>
+      <td><strong>4.0</strong> (2.0)</td>
+      <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
+      <td>(Gecko 2.0)</td>
+    </tr>
+    <tr>
+      <td>Opera</td>
+      <td>---</td>
+      <td>---</td>
+      <td>---</td>
+    </tr>
+    <tr>
+      <td rowspan="2">Safari (Webkit)</td>
+      <td><strong>3.0</strong> (522-523)</td>
+      <td><code>.cur | .png | .gif | .jpg</code></td>
+      <td rowspan="2">3.0 (522-523)</td>
+    </tr>
+    <tr>
+      <td colspan="2">
+        OS X 10.5 pour la prise en charge des fichiers <code>.cur</code>
+      </td>
+    </tr>
+  </tbody>
 </table>
diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
index f7fc54380d..54bb94fdb9 100644
--- a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
+++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md
@@ -7,72 +7,67 @@ tags:
 translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
 original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+Le module de spécification _[Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)_ détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir [la page principale sur cette spécification](/fr/docs/Web/CSS/CSS_Box_Alignment).
 
-<div class="note">
-<p><strong>Note :</strong> À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.</p>
-</div>
+> **Note :** À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.
 
-<h2 id="align-content_et_justify-content"><code>align-content</code> et <code>justify-content</code></h2>
+## `align-content` et `justify-content`
 
-<p>La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.</p>
+La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.
 
-<p>La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que <code>space-between</code>, <code>space-around</code> ou <code>space-evenly</code> est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme <a href="/fr/docs/Web/CSS/CSS_Box_Alignment#Le_sujet_de_l'alignement_(alignment_subject)">un seul sujet d'alignement</a>.</p>
+La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que `space-between`, `space-around` ou `space-evenly` est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme [un seul sujet d'alignement](</fr/docs/Web/CSS/CSS_Box_Alignment#Le_sujet_de_l'alignement_(alignment_subject)>).
 
-<h2 id="justify-self"><code>justify-self</code></h2>
+## `justify-self`
 
-<p>La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.</p>
+La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.
 
-<p>Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.</p>
+Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.
 
-<h3 id="Éléments_positionnés_de_façon_absolue">Éléments positionnés de façon absolue</h3>
+### Éléments positionnés de façon absolue
 
-<p>Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage <code>top</code>, <code>left</code>, <code>bottom</code> et <code>right</code>. Le mot-clé <code>normal</code> est considéré équivalent à <code>stretch</code> sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à <code>start</code>.</p>
+Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage `top`, `left`, `bottom` et `right`. Le mot-clé `normal` est considéré équivalent à `stretch` sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à `start`.
 
-<h2 id="align-self"><code>align-self</code></h2>
+## `align-self`
 
-<p>La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.</p>
+La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.
 
-<h3 id="Éléments_positionnés_de_façon_absolue_2">Éléments positionnés de façon absolue</h3>
+### Éléments positionnés de façon absolue
 
-<p>Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage <code>top</code>, <code>left</code>, <code>bottom</code> et <code>right</code>. Le mot-clé <code>normal</code> est considéré équivalent à <code>stretch</code> sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à <code>start</code>.</p>
+Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage `top`, `left`, `bottom` et `right`. Le mot-clé `normal` est considéré équivalent à `stretch` sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à `start`.
 
-<h2 id="Utilisation_actuelle_de_l'alignement_pour_ces_dispositions">Utilisation actuelle de l'alignement pour ces dispositions</h2>
+## Utilisation actuelle de l'alignement pour ces dispositions
 
-<p>À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.</p>
+À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.
 
-<p>Avant l'apparition des boîtes flexibles (<em>flexbox</em>), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec <code>auto</code> absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :</p>
+Avant l'apparition des boîtes flexibles (_flexbox_), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec `auto` absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :
 
-<pre class="brush: css">.container {
+```css
+.container {
   width: 20em;
   margin-left: auto;
   margin-right: auto;
 }
-</pre>
+```
 
-<p>Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.</p>
+Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.
 
-<p>Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.</p>
+Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+### Propriétés CSS
 
-<ul>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("justify-self")}}</li>
- <li>{{cssxref("align-self")}}</li>
-</ul>
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("align-self")}}
 
-<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+### Termes du glossaire
 
-<ul>
- <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li>
- <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li>
- <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li>
-</ul>
+- [Sujet d'alignement](/fr/docs/Glossary/Alignment_Subject)
+- [Conteneur d'alignement](/fr/docs/Glossary/Alignment_Container)
+- [Alignement de recours](/fr/docs/Glossary/Fallback_Alignment)
diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
index 2eb9626f5a..6be38dc6e2 100644
--- a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
+++ b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
@@ -8,109 +8,91 @@ tags:
 translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
 original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (<em>flexbox</em>). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+Le module de spécification _[Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)_ détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (_flexbox_). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir [la page principale sur cette spécification](/fr/docs/Web/CSS/CSS_Box_Alignment).
 
-<h2 id="Exemple_simple">Exemple simple</h2>
+## Exemple simple
 
-<p>Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par <code>align-items</code>en utilisant <code>center</code> comme valeur pour la propriété {{cssxref("align-self")}}.</p>
+Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par `align-items`en utilisant `center` comme valeur pour la propriété {{cssxref("align-self")}}.
 
-<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}
 
-<h2 id="Liens_entre_les_axes_et_flex-direction">Liens entre les axes et <code>flex-direction</code></h2>
+## Liens entre les axes et `flex-direction`
 
-<p>Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec <code>flex-end</code>, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur <code>row</code>, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).</p>
+Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec `flex-end`, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur `row`, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).
 
-<p>Toutefois, <em>Flexbox</em> permet de modifier l'axe principal en utilisant <code>flex-direction</code> avec la valeur <code>column</code>. Dans ce cas, <code>justify-content</code> alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (<em>main axis</em>) et d'axe secondaire (<em>cross axis</em>) lorsqu'on travaille sur des boîtes flexibles :</p>
+Toutefois, _Flexbox_ permet de modifier l'axe principal en utilisant `flex-direction` avec la valeur `column`. Dans ce cas, `justify-content` alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (_main axis_) et d'axe secondaire (_cross axis_) lorsqu'on travaille sur des boîtes flexibles :
 
-<ul>
- <li>L'axe principal correspond à la direction fournie par <code>flex-direction</code> et l'alignement sur cet axe s'effectue avec <code>justify-content</code></li>
- <li>L'axe secondaire est orthogonal à l'axe principal et l'alignement s'effectue avec <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li>
-</ul>
+- L'axe principal correspond à la direction fournie par `flex-direction` et l'alignement sur cet axe s'effectue avec `justify-content`
+- L'axe secondaire est orthogonal à l'axe principal et l'alignement s'effectue avec `align-content`, `align-self`/`align-items`
 
-<h3 id="Alignement_sur_l'axe_principal">Alignement sur l'axe principal</h3>
+### Alignement sur l'axe principal
 
-<ul>
- <li>{{cssxref("justify-content")}}</li>
-</ul>
+- {{cssxref("justify-content")}}
 
-<h3 id="Alignement_sur_l'axe_secondaire">Alignement sur l'axe secondaire</h3>
+### Alignement sur l'axe secondaire
 
-<ul>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("align-content")}}</li>
-</ul>
+- {{cssxref("align-self")}}
+- {{cssxref("align-items")}}
+- {{cssxref("align-content")}}
 
-<h3 id="Absence_de_justify-self_pour_Flexbox">Absence de <code>justify-self</code> pour <em>Flexbox</em></h3>
+### Absence de `justify-self` pour _Flexbox_
 
-<p>Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété <code>justify-content</code> contrôle la répartition de cet espace. Avec <code>justify-content: flex-end</code>, l'espace supplémentaire sera ajouté avant les éléments et avec <code>justify-content: space-around</code>, il sera placé de chaque côté.</p>
+Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété `justify-content` contrôle la répartition de cet espace. Avec `justify-content: flex-end`, l'espace supplémentaire sera ajouté avant les éléments et avec `justify-content: space-around`, il sera placé de chaque côté.
 
-<p>Autrement dit, <code>justify-self</code> n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.</p>
+Autrement dit, `justify-self` n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.
 
-<p>Pour l'axe secondaire, <code>align-self</code> peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.</p>
+Pour l'axe secondaire, `align-self` peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.
 
-<h2 id="Alignement_et_marges_automatiques">Alignement et marges automatiques</h2>
+## Alignement et marges automatiques
 
-<p><code>justify-self</code> pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec <code>auto</code>. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec <code>auto</code>, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.</p>
+`justify-self` pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec `auto`. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec `auto`, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.
 
-<p>En utilisant {{cssxref("margin")}} avec <code>auto</code> sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.</p>
+En utilisant {{cssxref("margin")}} avec `auto` sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.
 
-<p>{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}
 
-<h2 id="Les_propriétés_gap">Les propriétés <code>gap</code></h2>
+## Les propriétés `gap`
 
-<ul>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
 
-<h3 id="Créer_des_gouttières_fixes_entre_chaque_objet">Créer des gouttières fixes entre chaque objet</h3>
+### Créer des gouttières fixes entre chaque objet
 
-<p>Sur l'axe principal, la propriété <code>column-gap</code> permettra de créer des gouttières de taille fixe de chaque côté de l'objet.</p>
+Sur l'axe principal, la propriété `column-gap` permettra de créer des gouttières de taille fixe de chaque côté de l'objet.
 
-<p>Sur l'axe secondaire, <code>row-gap</code> permettra d'espace les lignes adjacentes. Aussi, il faut que <code>flex-wrap</code> vaille <code>wrap</code> afin que <code>row-gap</code> ait un effet.</p>
+Sur l'axe secondaire, `row-gap` permettra d'espace les lignes adjacentes. Aussi, il faut que `flex-wrap` vaille `wrap` afin que `row-gap` ait un effet.
 
-<div class="note">
-<p><strong>Note :</strong> À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés <code>gap</code> pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.</p>
-</div>
+> **Note :** À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés `gap` pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+### Propriétés CSS
 
-<ul>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("place-content")}}t</li>
- <li>{{cssxref("justify-items")}}</li>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("place-items")}}</li>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("place-content")}}t
+- {{cssxref("justify-items")}}
+- {{cssxref("align-items")}}
+- {{cssxref("place-items")}}
+- {{cssxref("align-self")}}
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
 
-<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+### Termes du glossaire
 
-<ul>
- <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li>
- <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li>
-</ul>
+- [Axe secondaire](/fr/docs/Glossaire/Axe_transversal)
+- [Axe principal](/fr/docs/Glossaire/Axe_principal)
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">L'alignement avec <em>Flexbox</em></a></li>
-</ul>
+- [L'alignement avec _Flexbox_](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible)
 
-<h2 id="Ressources_externes">Ressources externes</h2>
+## Ressources externes
 
-<ul>
- <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Anti-sèche pour l'alignement des boîtes (en anglais)</a></li>
- <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)</a></li>
- <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Quelques pensées sur les implémentations partielles de <em>Box Alignment</em> (en anglais)</a></li>
-</ul>
+- [Anti-sèche pour l'alignement des boîtes (en anglais)](https://rachelandrew.co.uk/css/cheatsheets/box-alignment)
+- [Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
+- [Quelques pensées sur les implémentations partielles de _Box Alignment_ (en anglais)](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)
diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
index 8e6f9623b5..5a60205e83 100644
--- a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
+++ b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.md
@@ -9,108 +9,94 @@ tags:
 translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout
 original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+Le module de spécification _[Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)_ détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec [les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir [la page principale sur cette spécification](/fr/docs/Web/CSS/CSS_Box_Alignment).
 
-<h2 id="Exemple_simple">Exemple simple</h2>
+## Exemple simple
 
-<p>Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété <code>justify-content</code>. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété <code>align-items</code>. Le premier objet surcharge la valeur fournie par <code>align-items</code> en utilisant <code>align-self</code> avec la valeur <code>center</code>.</p>
+Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété `justify-content`. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété `align-items`. Le premier objet surcharge la valeur fournie par `align-items` en utilisant `align-self` avec la valeur `center`.
 
-<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}
 
-<h2 id="Axes_de_la_grille">Axes de la grille</h2>
+## Axes de la grille
 
-<p>La grille est une méthode de disposition sur deux dimensions.</p>
+La grille est une méthode de disposition sur deux dimensions.
 
-<p>L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.</p>
+L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.
 
-<p><img alt="" src="inline_axis.png"></p>
+![](inline_axis.png)
 
-<p>Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par <code>justify-</code> : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.</p>
+Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par `justify-` : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.
 
-<p>L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).</p>
+L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).
 
-<p>Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par <code>align-</code> : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.</p>
+Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par `align-` : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.
 
-<p><img alt="" src="block_axis.png"></p>
+![](block_axis.png)
 
-<h2 id="Alignement_individuel">Alignement individuel</h2>
+## Alignement individuel
 
-<ul>
- <li>{{cssxref("justify-self")}}</li>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("place-self")}}</li>
- <li>{{cssxref("justify-items")}}</li>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("place-items")}}</li>
-</ul>
+- {{cssxref("justify-self")}}
+- {{cssxref("align-self")}}
+- {{cssxref("place-self")}}
+- {{cssxref("justify-items")}}
+- {{cssxref("align-items")}}
+- {{cssxref("place-items")}}
 
-<p>Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés <code>align-items</code> et <code>justify-items</code> sont appliquées au conteneur de grille et définissent <code>align-self</code> et <code>justify-self</code> pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant <code>align-self</code> ou <code>justify-self</code> sur les éléments souhaités.</p>
+Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés `align-items` et `justify-items` sont appliquées au conteneur de grille et définissent `align-self` et `justify-self` pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant `align-self` ou `justify-self` sur les éléments souhaités.
 
-<p>Les valeurs initiales pour <code>align-self</code> et <code>justify-self</code> sont <code>stretch</code>. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec <code>start</code>sur les deux axes et l'élément n'est pas déformé.</p>
+Les valeurs initiales pour `align-self` et `justify-self` sont `stretch`. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec `start`sur les deux axes et l'élément n'est pas déformé.
 
-<h2 id="Alignement_du_contenu">Alignement du contenu</h2>
+## Alignement du contenu
 
-<ul>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("place-content")}}</li>
-</ul>
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("place-content")}}
 
-<p>Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.</p>
+Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.
 
-<h2 id="Gouttières_et_versions_préfixées_des_propriétés">Gouttières et versions préfixées des propriétés</h2>
+## Gouttières et versions préfixées des propriétés
 
-<ul>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("grid-column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+- {{cssxref("row-gap")}}
+- {{cssxref("grid-column-gap")}}
+- {{cssxref("gap")}}
 
-<p>La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification <em>Box Alignment</em> et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.</p>
+La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification _Box Alignment_ et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.
 
-<p>À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe <code>grid-</code>) afin d'assurer une meilleure compatibilité.</p>
+À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe `grid-`) afin d'assurer une meilleure compatibilité.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+### Propriétés CSS
 
-<ul>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("place-content")}}t</li>
- <li>{{cssxref("justify-items")}}</li>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("place-items")}}</li>
- <li>{{cssxref("justify-self")}}</li>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("place-self")}}</li>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("place-content")}}t
+- {{cssxref("justify-items")}}
+- {{cssxref("align-items")}}
+- {{cssxref("place-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("align-self")}}
+- {{cssxref("place-self")}}
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
 
-<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+### Termes du glossaire
 
-<ul>
- <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li>
- <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li>
-</ul>
+- [Axe secondaire](/fr/docs/Glossary/Cross_Axis)
+- [Axe principal](/fr/docs/Glossary/Main_Axis)
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner les boîtes dans une disposition en grille</a></li>
-</ul>
+- [Aligner les boîtes dans une disposition en grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
 
-<h2 id="Ressources_externes">Ressources externes</h2>
+## Ressources externes
 
-<ul>
- <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Anti-sèche pour l'alignement des boîtes (en anglais)</a></li>
- <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)</a></li>
- <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Quelques pensées sur les implémentations partielles de <em>Box Alignment</em> (en anglais)</a></li>
-</ul>
+- [Anti-sèche pour l'alignement des boîtes (en anglais)](https://rachelandrew.co.uk/css/cheatsheets/box-alignment)
+- [Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
+- [Quelques pensées sur les implémentations partielles de _Box Alignment_ (en anglais)](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)
diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
index f6195db8dc..f1077f64a5 100644
--- a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
+++ b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md
@@ -7,42 +7,36 @@ tags:
 translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
 original_slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module <em>Multi-Column Layout</em>. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+Le module de spécification _[Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)_ détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec [une disposition multi-colonnes](/fr/docs/Web/CSS/Colonnes_CSS). Cette page détaille les aspects spécifiques relatifs à l'alignement et au module _Multi-Column Layout_. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir [la page principale sur cette spécification](/fr/docs/Web/CSS/CSS_Box_Alignment).
 
-<p>Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.</p>
+Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.
 
-<div class="note">
-<p><strong>Note :</strong> Le module de spécification de la disposition en colonnes (<em>Multi-Column Layout</em>) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.</p>
-</div>
+> **Note :** Le module de spécification de la disposition en colonnes (_Multi-Column Layout_) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.
 
-<h2 id="align-content_et_justify-content"><code>align-content</code> et <code>justify-content</code></h2>
+## `align-content` et `justify-content`
 
-<p>La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.</p>
+La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.
 
-<p>Utiliser <code>justify-content</code> avec une valeur différente de <code>normal</code> ou <code>stretch</code> entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de <code>justify-content</code>.</p>
+Utiliser `justify-content` avec une valeur différente de `normal` ou `stretch` entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de `justify-content`.
 
-<h2 id="column-gap"><code>column-gap</code></h2>
+## `column-gap`
 
-<p>La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.</p>
+La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.
 
-<p>On notera que, si les autres modes de disposition utilisent une valeur initiale de <code>0</code> pour <code>column-gap</code>, la disposition multi-colonne utilise une valeur initiale de <code>1em</code>.</p>
+On notera que, si les autres modes de disposition utilisent une valeur initiale de `0` pour `column-gap`, la disposition multi-colonne utilise une valeur initiale de `1em`.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+### Propriétés CSS
 
-<ul>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("column-gap")}}</li>
-</ul>
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("column-gap")}}
 
-<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+### Termes du glossaire
 
-<ul>
- <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li>
- <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li>
- <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li>
-</ul>
+- [Sujet d'alignement](/fr/docs/Glossary/Alignment_Subject)
+- [Conteneur d'alignement](/fr/docs/Glossary/Alignment_Container)
+- [Alignement de recours](/fr/docs/Glossary/Fallback_Alignment)
diff --git a/files/fr/web/css/css_box_alignment/index.md b/files/fr/web/css/css_box_alignment/index.md
index 18feaec140..bdfb4d227a 100644
--- a/files/fr/web/css/css_box_alignment/index.md
+++ b/files/fr/web/css/css_box_alignment/index.md
@@ -7,239 +7,211 @@ tags:
   - Guide
 translation_of: Web/CSS/CSS_Box_Alignment
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le module de spécification <em>CSS Box Alignment</em> (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.</p>
+Le module de spécification _CSS Box Alignment_ (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.
 
-<div class="note">
-<p><strong>Note :</strong> La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.</p>
-</div>
+> **Note :** La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.
 
-<h2 id="Anciennes_méthodes_d'alignement">Anciennes méthodes d'alignement</h2>
+## Anciennes méthodes d'alignement
 
-<p>Par le passé, CSS disposait de peu d'outils pour l'alignement. Le texte pouvait être aligné grâce à {{cssxref("text-align")}}, les blocs pouvaient être centrés avec des marges ({{cssxref("margin")}}) automatique et les tableaux ou éléments en affichage <em>inline-block</em> pouvaient tirer parti de {{cssxref("vertical-align")}}. Désormais, l'alignement du texte est couvert par les modules <a href="https://www.w3.org/TR/css-inline-3/">Inline Layout</a> et <a href="https://www.w3.org/TR/css-text-3/">CSS Text</a> et, pour la première fois, avec le module <em>Box Alignment</em>, on dispose d'outils complets pour l'alignement vertical et horizontal.</p>
+Par le passé, CSS disposait de peu d'outils pour l'alignement. Le texte pouvait être aligné grâce à {{cssxref("text-align")}}, les blocs pouvaient être centrés avec des marges ({{cssxref("margin")}}) automatique et les tableaux ou éléments en affichage _inline-block_ pouvaient tirer parti de {{cssxref("vertical-align")}}. Désormais, l'alignement du texte est couvert par les modules [Inline Layout](https://www.w3.org/TR/css-inline-3/) et [CSS Text](https://www.w3.org/TR/css-text-3/) et, pour la première fois, avec le module _Box Alignment_, on dispose d'outils complets pour l'alignement vertical et horizontal.
 
-<p>Si vous connaissez déjà <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles (<em>flexbox</em>)</a>, vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification <em>Box Alignment</em> est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.</p>
+Si vous connaissez déjà [les boîtes flexibles (_flexbox_)](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification _Box Alignment_ est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.
 
-<h2 id="Exemples_simples">Exemples simples</h2>
+## Exemples simples
 
-<p>Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">en grille</a> ou utilisant <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a>.</p>
+Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions [en grille](/fr/docs/Web/CSS/CSS_Grid_Layout) ou utilisant [les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout).
 
-<h3 id="Alignement_pour_une_disposition_en_grille">Alignement pour une disposition en grille</h3>
+### Alignement pour une disposition en grille
 
-<p>Dans cet exemple avec une grille, on dispose d'un espace restant dans le conteneur après avoir placé les pistes de largeur fixe le long de l'axe en ligne (l'axe principal). L'espace est réparti grâce à la propriété {{cssxref("justify-content")}}. Sur l'axe de bloc (l'axe secondaire), l'alignement des éléments sur la grille est dicté par {{cssxref("align-items")}}. Le premier objet surcharge la règle fournie par <code>align-items</code> en utilisant {{cssxref("align-self")}} avec la valeur <code>center</code>.</p>
+Dans cet exemple avec une grille, on dispose d'un espace restant dans le conteneur après avoir placé les pistes de largeur fixe le long de l'axe en ligne (l'axe principal). L'espace est réparti grâce à la propriété {{cssxref("justify-content")}}. Sur l'axe de bloc (l'axe secondaire), l'alignement des éléments sur la grille est dicté par {{cssxref("align-items")}}. Le premier objet surcharge la règle fournie par `align-items` en utilisant {{cssxref("align-self")}} avec la valeur `center`.
 
-<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}
 
-<h3 id="Alignement_pour_une_disposition_flexible_(flexbox)">Alignement pour une disposition flexible (<em>flexbox</em>)</h3>
+### Alignement pour une disposition flexible (_flexbox_)
 
-<p>Dans cet exemple, trois objets flexibles sont alignés le long de l'axe principal avec <code>justify-content</code> et selon l'axe secondaire avec <code>align-items</code>. Le premier objet surcharge la règle indiquée avec <code>align-items</code> grâce à la propriété <code>align-self</code> qui vaut ici <code>center</code>.</p>
+Dans cet exemple, trois objets flexibles sont alignés le long de l'axe principal avec `justify-content` et selon l'axe secondaire avec `align-items`. Le premier objet surcharge la règle indiquée avec `align-items` grâce à la propriété `align-self` qui vaut ici `center`.
 
-<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}
 
-<h2 id="Concepts_majeurs_et_terminologie">Concepts majeurs et terminologie</h2>
+## Concepts majeurs et terminologie
 
-<p>Ce module de spécification définit des termes relatifs à l'alignement afin de pouvoir se référer à ces concepts sans qu'ils soient particulièrement liés à l'implémentation particulière d'un mode de disposition. Ces concepts sont communs à l'ensemble des méthodes de disposition.</p>
+Ce module de spécification définit des termes relatifs à l'alignement afin de pouvoir se référer à ces concepts sans qu'ils soient particulièrement liés à l'implémentation particulière d'un mode de disposition. Ces concepts sont communs à l'ensemble des méthodes de disposition.
 
-<h3 id="Liens_avec_les_modes_d'écriture">Liens avec les modes d'écriture</h3>
+### Liens avec les modes d'écriture
 
-<p>L'alignement est lié aux modes d'écriture et, lorsqu'on aligne un élément, on ne l'aligne pas selon des axes « physiques » (haut, droit, bas, gauche) mais selon le début ou la fin des dimensions utilisées par ce mode d'écriture. Cela permet de s'assurer que l'alignement fonctionne de la même façon, quel que soit le mode d'écriture utilisé par le document.</p>
+L'alignement est lié aux modes d'écriture et, lorsqu'on aligne un élément, on ne l'aligne pas selon des axes « physiques » (haut, droit, bas, gauche) mais selon le début ou la fin des dimensions utilisées par ce mode d'écriture. Cela permet de s'assurer que l'alignement fonctionne de la même façon, quel que soit le mode d'écriture utilisé par le document.
 
-<h3 id="Deux_dimensions_pour_l'alignement">Deux dimensions pour l'alignement</h3>
+### Deux dimensions pour l'alignement
 
-<p>Lorsqu'on utilise les propriétés d'alignement, on aligne le contenu selon deux axes : l'axe en ligne (<em>inline axis</em>) et l'axe de bloc (<em>block axis</em>). L'axe en ligne correspond à l'axe selon lequel les mots sont écrits pour ce mode d'écriture. En français, par exemple, l'axe en ligne est un axe horizontal dirigé de la gauche vers la droite. L'axe de bloc est orthogonal à l'axe en ligne et suit la direction selon laquelle les blocs de texte sont disposés les uns à la suite des autres.</p>
+Lorsqu'on utilise les propriétés d'alignement, on aligne le contenu selon deux axes : l'axe en ligne (_inline axis_) et l'axe de bloc (_block axis_). L'axe en ligne correspond à l'axe selon lequel les mots sont écrits pour ce mode d'écriture. En français, par exemple, l'axe en ligne est un axe horizontal dirigé de la gauche vers la droite. L'axe de bloc est orthogonal à l'axe en ligne et suit la direction selon laquelle les blocs de texte sont disposés les uns à la suite des autres.
 
-<p><img alt="" src="two-axes.png"></p>
+![](two-axes.png)
 
-<p>Lorsqu'on aligne des objets le long de l'axe en ligne, on utilisera les propriétés qui commencent par <code>justify-</code>:</p>
+Lorsqu'on aligne des objets le long de l'axe en ligne, on utilisera les propriétés qui commencent par `justify-`:
 
-<ul>
- <li>{{cssxref("justify-items")}}</li>
- <li>{{cssxref("justify-self")}}</li>
- <li>{{cssxref("justify-content")}}</li>
-</ul>
+- {{cssxref("justify-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("justify-content")}}
 
-<p>Lorsqu'on aligne des objets le long de l'axe de bloc, on utilisera les propriétés qui commencent par <code>align-</code>:</p>
+Lorsqu'on aligne des objets le long de l'axe de bloc, on utilisera les propriétés qui commencent par `align-`:
 
-<ul>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("align-content")}}</li>
-</ul>
+- {{cssxref("align-items")}}
+- {{cssxref("align-self")}}
+- {{cssxref("align-content")}}
 
-<p>Flexbox ajoute un niveau de complexité car si {{cssxref("flex-direction")}} vaut <code>row</code>, ces règles sont vraies mais si <code>flex-direction</code> vaut <code>column</code>, elles sont inversées. Toutefois, lorsqu'on travaille avec les boîtes flexibles, il est préférable de penser en termes d'axe principal et d'axe secondaire plutôt qu'en termes d'axe en ligne et d'axe de bloc. Les propriétés <code>justify-</code> permettent toujours d'aligner selon l'axe principal et les propriétés <code>align-</code> d'aligner selon l'axe secondaire.</p>
+Flexbox ajoute un niveau de complexité car si {{cssxref("flex-direction")}} vaut `row`, ces règles sont vraies mais si `flex-direction` vaut `column`, elles sont inversées. Toutefois, lorsqu'on travaille avec les boîtes flexibles, il est préférable de penser en termes d'axe principal et d'axe secondaire plutôt qu'en termes d'axe en ligne et d'axe de bloc. Les propriétés `justify-` permettent toujours d'aligner selon l'axe principal et les propriétés `align-` d'aligner selon l'axe secondaire.
 
-<h3 id="Le_sujet_de_l'alignement_(alignment_subject)">Le sujet de l'alignement (<em>alignment subject</em>)</h3>
+### Le sujet de l'alignement (_alignment subject_)
 
-<p>Le <strong>sujet de l'alignement</strong> est l'objet qu'on aligne. Pour <code>justify-self</code> ou <code>align-self</code>, ou lorsqu'on paramètre ces valeurs pour un group avec <code>justify-items</code> ou <code>align-items</code>, cela correspondra à la boîte de marge de l'élément sur lequel la propriété est appliqué. Les propriétés <code>justify-content</code> et <code>align-content</code> varient selon la méthode de disposition utilisée.</p>
+Le **sujet de l'alignement** est l'objet qu'on aligne. Pour `justify-self` ou `align-self`, ou lorsqu'on paramètre ces valeurs pour un group avec `justify-items` ou `align-items`, cela correspondra à la boîte de marge de l'élément sur lequel la propriété est appliqué. Les propriétés `justify-content` et `align-content` varient selon la méthode de disposition utilisée.
 
-<h3 id="Le_conteneur_d'alignement_(alignment_container)">Le conteneur d'alignement (<em>alignment container</em>)</h3>
+### Le conteneur d'alignement (_alignment container_)
 
-<p>Le <strong>conteneur d'alignement</strong> est la boîte au sein de laquelle le sujet est aligné. Il s'agit généralement du bloc englobant du sujet de l'alignement. Un conteneur d'alignement peut contenir un ou plusieurs sujets.</p>
+Le **conteneur d'alignement** est la boîte au sein de laquelle le sujet est aligné. Il s'agit généralement du bloc englobant du sujet de l'alignement. Un conteneur d'alignement peut contenir un ou plusieurs sujets.
 
-<p>Dans l'image qui suit, on voit un conteneur d'alignement qui contient deux sujets.</p>
+Dans l'image qui suit, on voit un conteneur d'alignement qui contient deux sujets.
 
-<p><img alt="" src="align-container-subjects.png"></p>
+![](align-container-subjects.png)
 
-<h3 id="L'alignement_de_recours_(fallback)">L'alignement de recours (<em>fallback</em>)</h3>
+### L'alignement de recours (_fallback_)
 
-<p>Si l'alignement défini ne peut pas être respecté, on utilisera un alignement de recours (<em>fallback alignment</em>) qui déterminera comment gérer l'espace disponible. L'alignement de recours est défini spécifiquement pour chaque méthode de disposition.</p>
+Si l'alignement défini ne peut pas être respecté, on utilisera un alignement de recours (_fallback alignment_) qui déterminera comment gérer l'espace disponible. L'alignement de recours est défini spécifiquement pour chaque méthode de disposition.
 
-<h2 id="Types_d'alignement">Types d'alignement</h2>
+## Types d'alignement
 
-<p>Il existe trois types d'alignement définis par la spécification et qui fonctionnent avec des mots-clés.</p>
+Il existe trois types d'alignement définis par la spécification et qui fonctionnent avec des mots-clés.
 
-<ul>
- <li><strong>Alignement en position </strong>: la position du sujet est définie relativement à celle du conteneur.</li>
- <li><strong>Alignement selon la ligne de base </strong>: ces mots-clés définissent l'alignement comme une relation entre les lignes de base des sujets au sein d'un contexte d'alignement.</li>
- <li><strong>Alignement distribué </strong>: ces mots-clés définissent l'alignement comme une distribution de l'espace entre les sujets.</li>
-</ul>
+- **Alignement en position** : la position du sujet est définie relativement à celle du conteneur.
+- **Alignement selon la ligne de base** : ces mots-clés définissent l'alignement comme une relation entre les lignes de base des sujets au sein d'un contexte d'alignement.
+- **Alignement distribué** : ces mots-clés définissent l'alignement comme une distribution de l'espace entre les sujets.
 
-<h3 id="Alignement_en_position_avec_des_mots-clés">Alignement en position avec des mots-clés</h3>
+### Alignement en position avec des mots-clés
 
-<p>Les valeurs suivantes permettent de réaliser un alignement en position et peuvent être utilisées comme valeurs pour <code>justify-content</code>, <code>align-content</code> ainsi que pour <code>justify-self</code> et <code>align-self</code>.</p>
+Les valeurs suivantes permettent de réaliser un alignement en position et peuvent être utilisées comme valeurs pour `justify-content`, `align-content` ainsi que pour `justify-self` et `align-self`.
 
-<ul>
- <li><code>center</code></li>
- <li><code>start</code></li>
- <li><code>end</code></li>
- <li><code>self-start</code></li>
- <li><code>self-end</code></li>
- <li><code>flex-start</code> (uniquement pour les boîtes flexibles)</li>
- <li><code>flex-end</code> (uniquement pour les boîtes flexibles)</li>
- <li><code>left</code></li>
- <li><code>right</code></li>
-</ul>
+- `center`
+- `start`
+- `end`
+- `self-start`
+- `self-end`
+- `flex-start` (uniquement pour les boîtes flexibles)
+- `flex-end` (uniquement pour les boîtes flexibles)
+- `left`
+- `right`
 
-<p>En dehors des valeurs <em>physiques</em> <code>left</code> et <code>right</code> qui sont relatives à la disposition physique de l'écran, les autres valeurs sont des valeurs <em>logiques</em> qui font référence au mode d'écriture du contenu.</p>
+En dehors des valeurs _physiques_ `left` et `right` qui sont relatives à la disposition physique de l'écran, les autres valeurs sont des valeurs _logiques_ qui font référence au mode d'écriture du contenu.
 
-<p>Si on prendre l'exemple d'une disposition en grille : en français, utiliser <code>justify-content</code> avec <code>start</code> déplacera les éléments sur l'axe en ligne au début, ce qui correspondra, dans ce cas, à la gauche. Si on utilise cette même règle avec un document écrit en arabe, qui s'écrit de droite à gauche, la valeur <code>start</code> regroupera les éléments sur le côté droit de la page.</p>
+Si on prendre l'exemple d'une disposition en grille : en français, utiliser `justify-content` avec `start` déplacera les éléments sur l'axe en ligne au début, ce qui correspondra, dans ce cas, à la gauche. Si on utilise cette même règle avec un document écrit en arabe, qui s'écrit de droite à gauche, la valeur `start` regroupera les éléments sur le côté droit de la page.
 
-<p>On voit ici que ces deux exemples utilisent <code>justify-content: start</code> mais que l'emplacement des sujets varie selon le mode d'écriture.</p>
+On voit ici que ces deux exemples utilisent `justify-content: start` mais que l'emplacement des sujets varie selon le mode d'écriture.
 
-<p><img alt="" src="writing-mode-start.png"></p>
+![](writing-mode-start.png)
 
-<h3 id="Alignement_selon_la_ligne_de_base">Alignement selon la ligne de base</h3>
+### Alignement selon la ligne de base
 
-<p>Les mots-clés pour l'alignement sur les lignes de bases permettent d'aligner les lignes de bases des boîtes parmi un groupe de sujets. Ces valeurs peuvent être utilisées avec <code>justify-content</code>, <code>align-content</code> ou avec <code>justify-self</code> et <code>align-self</code>.</p>
+Les mots-clés pour l'alignement sur les lignes de bases permettent d'aligner les lignes de bases des boîtes parmi un groupe de sujets. Ces valeurs peuvent être utilisées avec `justify-content`, `align-content` ou avec `justify-self` et `align-self`.
 
-<ul>
- <li><code>baseline</code></li>
- <li><code>first baseline</code></li>
- <li><code>last baseline</code></li>
-</ul>
+- `baseline`
+- `first baseline`
+- `last baseline`
 
-<p>L'alignement du contenu selon la ligne de base (c'est-à-dire avec <code>justify-content</code> ou <code>align-content</code>) fonctionne pour les méthodes de disposition qui organisent les objets en lignes. Les sujets sont alignés sur une ligne de base commune en ajoutant du remplissage (<em>padding</em>) à l'intérieur de chaque boîte si nécessaire.</p>
+L'alignement du contenu selon la ligne de base (c'est-à-dire avec `justify-content` ou `align-content`) fonctionne pour les méthodes de disposition qui organisent les objets en lignes. Les sujets sont alignés sur une ligne de base commune en ajoutant du remplissage (_padding_) à l'intérieur de chaque boîte si nécessaire.
 
-<p>L'alignement des éléments (<em>self alignment</em>) (c'est-à-dire avec <code>justify-self</code> ou <code>align-self</code> pour des sujets distincts ou avec <code>justify-items</code> et <code>align-items</code> pour des groupes) décale les boîtes afin de les aligner sur une ligne de base en ajoutant une marge à l'extérieur des boîtes.</p>
+L'alignement des éléments (_self alignment_) (c'est-à-dire avec `justify-self` ou `align-self` pour des sujets distincts ou avec `justify-items` et `align-items` pour des groupes) décale les boîtes afin de les aligner sur une ligne de base en ajoutant une marge à l'extérieur des boîtes.
 
-<h3 id="Alignement_distribué">Alignement distribué</h3>
+### Alignement distribué
 
-<p>Les mots-clés permettant de décrire un <strong>alignement distribué</strong> sont utilisés avec les propriétés <code>align-content</code> et <code>justify-content</code>. Ces mots-clés définissent ce qui se produit lorsqu'il reste de l'espace après que les sujets aient été affichés. Les valeurs correspondantes sont :</p>
+Les mots-clés permettant de décrire un **alignement distribué** sont utilisés avec les propriétés `align-content` et `justify-content`. Ces mots-clés définissent ce qui se produit lorsqu'il reste de l'espace après que les sujets aient été affichés. Les valeurs correspondantes sont :
 
-<ul>
- <li><code>stretch</code></li>
- <li><code>space-between</code></li>
- <li><code>space-around</code></li>
- <li><code>space-evenly</code></li>
-</ul>
+- `stretch`
+- `space-between`
+- `space-around`
+- `space-evenly`
 
-<p>Ainsi, si des objets flexibles sont alignés avec <code>flex-start</code> et qu'on travaille dans un mode d'écriture horizontal de gauche à droite et de haut en bas (comme le français) avec <code>flex-direction</code> qui vaut <code>row</code>, les sujets commenceront à gauche et l'espace disponible sera affiché à droite après que les sujets aient été placés.</p>
+Ainsi, si des objets flexibles sont alignés avec `flex-start` et qu'on travaille dans un mode d'écriture horizontal de gauche à droite et de haut en bas (comme le français) avec `flex-direction` qui vaut `row`, les sujets commenceront à gauche et l'espace disponible sera affiché à droite après que les sujets aient été placés.
 
-<p><img alt="" src="justify-content-start.png"></p>
+![](justify-content-start.png)
 
-<p>Si on utilise <code>justify-content: space-between</code> sur le conteneur flexible, l'espace disponible sera alors réparti entre les objets.</p>
+Si on utilise `justify-content: space-between` sur le conteneur flexible, l'espace disponible sera alors réparti entre les objets.
 
-<p><img alt="" src="justify-content-space-between.png"></p>
+![](justify-content-space-between.png)
 
-<p>Pour que ces mots-clés aient un effet, il est nécessaire qu'il reste de l'espace supplémentaire. S'il n'y a plus d'espace, aucune distribution ne pourra être effectuée.</p>
+Pour que ces mots-clés aient un effet, il est nécessaire qu'il reste de l'espace supplémentaire. S'il n'y a plus d'espace, aucune distribution ne pourra être effectuée.
 
-<h2 id="Gestion_du_dépassement">Gestion du dépassement</h2>
+## Gestion du dépassement
 
-<p>Les mots-clés <code>safe</code> et <code>unsafe</code> permettent de définir le comportement obtenu lorsque le sujet d'alignement est plus grand que le conteneur. Le mot-clé <code>safe</code> alignera selon <code>start</code> si l'alignement indiqué provoque un dépassement, afin de réduire la « perte de données » visible en dehors du conteneur et sur laquelle l'utilisateur ne pourra pas avoir accès.</p>
+Les mots-clés `safe` et `unsafe` permettent de définir le comportement obtenu lorsque le sujet d'alignement est plus grand que le conteneur. Le mot-clé `safe` alignera selon `start` si l'alignement indiqué provoque un dépassement, afin de réduire la « perte de données » visible en dehors du conteneur et sur laquelle l'utilisateur ne pourra pas avoir accès.
 
-<p>La valeur <code>unsafe</code> permet de respecter l'alignement indiqué, même si celui-ci provoque un dépassement entraînant une telle perte de données.</p>
+La valeur `unsafe` permet de respecter l'alignement indiqué, même si celui-ci provoque un dépassement entraînant une telle perte de données.
 
-<h2 id="Espaces_entre_les_boîtes">Espaces entre les boîtes</h2>
+## Espaces entre les boîtes
 
-<p>La spécification pour l'alignement des boîtes inclut également les propriétés <code>gap</code>, <code>row-gap</code> et <code>column-gap</code>. Ces propriétés permettent d'obtenir un espacement cohérents entre les objets d'une ligne ou d'une colonne pour tout mode de disposition organisant les objets de cette façon.</p>
+La spécification pour l'alignement des boîtes inclut également les propriétés `gap`, `row-gap` et `column-gap`. Ces propriétés permettent d'obtenir un espacement cohérents entre les objets d'une ligne ou d'une colonne pour tout mode de disposition organisant les objets de cette façon.
 
-<p>La propriété <code>gap</code> est une propriété raccourcie pour <code>row-gap</code> et <code>column-gap</code> et qui permet de définir ces deux propriétés en une seule règle.</p>
+La propriété `gap` est une propriété raccourcie pour `row-gap` et `column-gap` et qui permet de définir ces deux propriétés en une seule règle.
 
-<ul>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
 
-<p>Dans l'exemple suivant, on a une disposition en grille et on utilise la propriété raccourcie <code>gap</code> afin de définir un espace de <code>10px</code> entre chaque piste de ligne et un espace de <code>2em</code> entre chaque piste de colonne.</p>
+Dans l'exemple suivant, on a une disposition en grille et on utilise la propriété raccourcie `gap` afin de définir un espace de `10px` entre chaque piste de ligne et un espace de `2em` entre chaque piste de colonne.
 
-<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}
 
-<p>Dans cet exemple, on utilise la propriété {{cssxref("gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par <code>grid-</code> et certains navigateurs ne prennent encore en charge que ces versions préfixées :</p>
+Dans cet exemple, on utilise la propriété {{cssxref("gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par `grid-` et certains navigateurs ne prennent encore en charge que ces versions préfixées :
 
-<ul>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("grid-column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
+- {{cssxref("row-gap")}}
+- {{cssxref("grid-column-gap")}}
+- {{cssxref("gap")}}
 
-<p>Ces versions préfixées seront maintenues comme des alias des propriétés non-préfixées. Toutefois, il est toujours possible de les dédoubler comme on le fait avec les propriétés préfixées des différents éditeurs : déclarer la propriété <code>grid-gap</code> puis <code>gap</code> avec la même valeur.</p>
+Ces versions préfixées seront maintenues comme des alias des propriétés non-préfixées. Toutefois, il est toujours possible de les dédoubler comme on le fait avec les propriétés préfixées des différents éditeurs : déclarer la propriété `grid-gap` puis `gap` avec la même valeur.
 
-<p>Attention, d'autres éléments peuvent rentrer en jeu et ajouter de l'espace (les mots-clés de distribution ou les marges sur les éléments par exemple).</p>
+Attention, d'autres éléments peuvent rentrer en jeu et ajouter de l'espace (les mots-clés de distribution ou les marges sur les éléments par exemple).
 
-<h2 id="Pages_associées_à_chaque_propriété_d'alignement">Pages associées à chaque propriété d'alignement</h2>
+## Pages associées à chaque propriété d'alignement
 
-<p>Les propriétés d'alignement des boîtes CSS sont implémentées différemment selon le mode de disposition utilisé. Vous pouvez vous référer aux pages suivantes afin de connaître les détails de ces différences :</p>
+Les propriétés d'alignement des boîtes CSS sont implémentées différemment selon le mode de disposition utilisé. Vous pouvez vous référer aux pages suivantes afin de connaître les détails de ces différences :
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">L'alignement des boîtes avec les grilles CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">L'alignement des boîtes avec une disposition en colonne</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">L'alignement des boîtes pour les dispositions en bloc, les dispositions absolues et en tableau</a></li>
-</ul>
+- [L'alignement des boîtes avec Flexbox](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)
+- [L'alignement des boîtes avec les grilles CSS](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout)
+- [L'alignement des boîtes avec une disposition en colonne](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout)
+- [L'alignement des boîtes pour les dispositions en bloc, les dispositions absolues et en tableau](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables)
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+### Propriétés CSS
 
-<ul>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("place-content")}}</li>
- <li>{{cssxref("justify-items")}}</li>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("place-items")}}</li>
- <li>{{cssxref("justify-self")}}</li>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("place-self")}}</li>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
+- {{cssxref("justify-content")}}
+- {{cssxref("align-content")}}
+- {{cssxref("place-content")}}
+- {{cssxref("justify-items")}}
+- {{cssxref("align-items")}}
+- {{cssxref("place-items")}}
+- {{cssxref("justify-self")}}
+- {{cssxref("align-self")}}
+- {{cssxref("place-self")}}
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
 
-<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+### Termes du glossaire
 
-<ul>
- <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li>
- <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li>
- <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li>
- <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li>
- <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li>
-</ul>
+- [Axe secondaire](/fr/docs/Glossary/Cross_Axis)
+- [Axe principal](/fr/docs/Glossary/Main_Axis)
+- [Conteneur d'alignement](/fr/docs/Glossary/Alignment_Container)
+- [Sujet d'alignement](/fr/docs/Glossary/Alignment_Subject)
+- [Alignement de recours](/fr/docs/Glossary/Fallback_Alignment)
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<ul>
- <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de base de Flexbox</a></em></li>
- <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner les éléments d'un conteneur flexible</a></em></li>
- <li>Guide CSS sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner les boîtes dans une disposition en grille</a></em></li>
-</ul>
+- Guide CSS sur Flexbox : _[Les concepts de base de Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- Guide CSS sur Flexbox : _[Aligner les éléments d'un conteneur flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_
+- Guide CSS sur les grilles : _[Aligner les boîtes dans une disposition en grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_
 
-<h2 id="Ressources_externes">Ressources externes</h2>
+## Ressources externes
 
-<ul>
- <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Anti-sèche pour l'alignement des boîtes (en anglais)</a></li>
- <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)</a></li>
- <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Quelques pensées sur les implémentations partielles de <em>Box Alignment</em> (en anglais)</a></li>
-</ul>
+- [Anti-sèche pour l'alignement des boîtes (en anglais)](https://rachelandrew.co.uk/css/cheatsheets/box-alignment)
+- [Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
+- [Quelques pensées sur les implémentations partielles de _Box Alignment_ (en anglais)](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)
diff --git a/files/fr/web/css/css_box_model/index.md b/files/fr/web/css/css_box_model/index.md
index 61ad9dfd61..7dbf6c1104 100644
--- a/files/fr/web/css/css_box_model/index.md
+++ b/files/fr/web/css/css_box_model/index.md
@@ -10,97 +10,64 @@ tags:
 translation_of: Web/CSS/CSS_Box_Model
 original_slug: Web/CSS/Modèle_de_boîte_CSS
 ---
-<div>{{CSSRef}}</div>
-
-<p><strong>Le modèle de boîte CSS</strong> (<em>Basic Box Model</em> en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (<em>padding</em>) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<h4 id="Les_propriétés_qui_définissent_le_flux_du_contenu_dans_une_boîte">Les propriétés qui définissent le flux du contenu dans une boîte</h4>
-
-<ul>
- <li>{{cssxref("overflow")}}</li>
- <li>{{cssxref("overflow-x")}}</li>
- <li>{{cssxref("overflow-y")}}</li>
-</ul>
-
-<h4 id="Les_propriétés_qui_définissent_la_taille_d'une_boîte">Les propriétés qui définissent la taille d'une boîte</h4>
-
-<ul>
- <li>{{cssxref("height")}}</li>
- <li>{{cssxref("width")}}</li>
- <li>{{cssxref("max-height")}}</li>
- <li>{{cssxref("max-width")}}</li>
- <li>{{cssxref("min-height")}}</li>
- <li>{{cssxref("min-width")}}</li>
-</ul>
-
-<h4 id="Les_propriétés_qui_définissent_les_marges_d'une_boîte">Les propriétés qui définissent les marges d'une boîte</h4>
-
-<ul>
- <li>{{cssxref("margin")}}</li>
- <li>{{cssxref("margin-bottom")}}</li>
- <li>{{cssxref("margin-left")}}</li>
- <li>{{cssxref("margin-right")}}</li>
- <li>{{cssxref("margin-top")}}</li>
- <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h4 id="Les_propriétés_qui_définissent_le_remplissage_(padding)_d'une_boîte">Les propriétés qui définissent le remplissage (<em>padding</em>) d'une boîte</h4>
-
-<ul>
- <li>{{cssxref("padding")}}</li>
- <li>{{cssxref("padding-bottom")}}</li>
- <li>{{cssxref("padding-left")}}</li>
- <li>{{cssxref("padding-right")}}</li>
- <li>{{cssxref("padding-top")}}</li>
-</ul>
-
-<h4 id="Les_autres_propriétés">Les autres propriétés</h4>
-
-<ul>
- <li>{{cssxref("box-shadow")}}</li>
- <li>{{cssxref("visibility")}}</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Une introduction au modèle de boîte CSS</a></dt>
- <dd>Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (<em>padding</em>) ainsi que les différentes zones qui forment une boîte.</dd>
- <dt><a href="/fr/docs/Web/CSS/Fusion_des_marges">Maîtriser la fusion des marges</a></dt>
- <dd>Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.</dd>
- <dt><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Le modèle de mise en forme visuel</a></dt>
- <dd>Cet article explique le modèle de mise en forme visuel.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box")}}</td>
-   <td>{{Spec2("CSS3 Box")}}</td>
-   <td>Added <code>margin-trim</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "box.html")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+{{CSSRef}}
+
+**Le modèle de boîte CSS** (_Basic Box Model_ en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (_padding_) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.
+
+## Référence
+
+### Propriétés
+
+#### Les propriétés qui définissent le flux du contenu dans une boîte
+
+- {{cssxref("overflow")}}
+- {{cssxref("overflow-x")}}
+- {{cssxref("overflow-y")}}
+
+#### Les propriétés qui définissent la taille d'une boîte
+
+- {{cssxref("height")}}
+- {{cssxref("width")}}
+- {{cssxref("max-height")}}
+- {{cssxref("max-width")}}
+- {{cssxref("min-height")}}
+- {{cssxref("min-width")}}
+
+#### Les propriétés qui définissent les marges d'une boîte
+
+- {{cssxref("margin")}}
+- {{cssxref("margin-bottom")}}
+- {{cssxref("margin-left")}}
+- {{cssxref("margin-right")}}
+- {{cssxref("margin-top")}}
+- {{CSSxRef("margin-trim")}} {{Experimental_Inline}}
+
+#### Les propriétés qui définissent le remplissage (_padding_) d'une boîte
+
+- {{cssxref("padding")}}
+- {{cssxref("padding-bottom")}}
+- {{cssxref("padding-left")}}
+- {{cssxref("padding-right")}}
+- {{cssxref("padding-top")}}
+
+#### Les autres propriétés
+
+- {{cssxref("box-shadow")}}
+- {{cssxref("visibility")}}
+
+## Guides
+
+- [Une introduction au modèle de boîte CSS](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte)
+  - : Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (_padding_) ainsi que les différentes zones qui forment une boîte.
+- [Maîtriser la fusion des marges](/fr/docs/Web/CSS/Fusion_des_marges)
+  - : Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.
+- [Le modèle de mise en forme visuel](/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle)
+  - : Cet article explique le modèle de mise en forme visuel.
+
+## Spécifications
+
+| Spécification                                | État                         | Commentaires         |
+| -------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Box")}}             | {{Spec2("CSS3 Box")}} | Added `margin-trim`  |
+| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}}     |                      |
+| {{SpecName("CSS1")}}                 | {{Spec2("CSS1")}}     | Définition initiale. |
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 ec87b13973..7b43810ae6 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
@@ -7,53 +7,55 @@ tags:
 translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
 original_slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}Les marges [haute](/fr/docs/Web/CSS/margin-top) et [basse](/fr/docs/Web/CSS/margin-bottom) des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle **la fusion des marges**.
 
-<div>Les marges <a href="/fr/docs/Web/CSS/margin-top">haute</a> et <a href="/fr/docs/Web/CSS/margin-bottom">basse</a> des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle <strong>la fusion des marges</strong>.</div>
+La fusion des marges se produit si on a l'un de ces trois cas :
 
-<p>La fusion des marges se produit si on a l'un de ces trois cas :</p>
+- Des éléments voisins adjacents
 
-<dl>
- <dt>Des éléments voisins adjacents</dt>
- <dd>Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour <a href="/fr/docs/Web/CSS/clear">dégager</a> les flottements). Ainsi :
- <pre class="brush: html"> &lt;p&gt;La marge basse de ce paragraphe est fusionnée…&lt;/p&gt;
- &lt;p&gt;… avec la marge haute de celui-ci.&lt;/p&gt;
-</pre>
- </dd>
- <dt>Aucun contenu séparant le parent et ses descendants</dt>
- <dd>S'il n'y a aucune bordure, remplissage, contenu en ligne (<em>inline</em>), lorsqu' un <a href="/fr/docs/Web/CSS/Block_formatting_context"> contexte de formatage de blocs </a> est créé ou <em><a href="/fr/docs/Web/CSS/clear">dégagement</a></em> pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.</dd>
- <dt>Des blocs vides</dt>
- <dd>S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.</dd>
-</dl>
+  - : 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 :
 
-<p>On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.</p>
+    ```html
+     <p>La marge basse de ce paragraphe est fusionnée…</p>
+     <p>… avec la marge haute de celui-ci.</p>
+    ```
 
-<p>Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).</p>
+- Aucun contenu séparant le parent et ses descendants
+  - : S'il n'y a aucune bordure, remplissage, contenu en ligne (_inline_), lorsqu' un [contexte de formatage de blocs ](/fr/docs/Web/CSS/Block_formatting_context)est créé ou _[dégagement](/fr/docs/Web/CSS/clear)_ pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.
+- Des blocs vides
+  - : S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.
 
-<p>Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).</p>
+On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.
 
-<p>Les marges des éléments <a href="/fr/docs/Web/CSS/float">flottants</a> et <a href="/fr/docs/Web/CSS/position">positionnés de façon absolue</a> ne sont jamais fusionnées.</p>
+Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).
 
-<h2 id="Exemples">Exemples</h2>
+Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).
 
-<h3 id="HTML">HTML</h3>
+Les marges des éléments [flottants](/fr/docs/Web/CSS/float) et [positionnés de façon absolue](/fr/docs/Web/CSS/position) ne sont jamais fusionnées.
 
-<pre class="brush: html">&lt;p&gt;La marge basse de ce paragraphe est fusionnée…&lt;/p&gt;
-&lt;p&gt;… avec la marge haute de ce paragraphe. On a donc une marge
-   de &lt;code&gt;1.2rem&lt;/code&gt; entre les deux.&lt;/p&gt;
+## Exemples
 
-&lt;div&gt;Cet élément contient deux paragraphes !
-  &lt;p&gt;Celui-ci a une marge de &lt;code&gt;.4rem&lt;/code&gt; par rapport au texte ci-dessus.&lt;/p&gt;
-  &lt;p&gt;La marge basse de cet élément fusionne avec la marge basse
-     de l'élément parent. On a donc &lt;code&gt;2rem&lt;/code&gt; de marge.
-&lt;/p&gt;
-&lt;/div&gt;
+### HTML
 
-&lt;p&gt;Bip bap bop.&lt;/p&gt;</pre>
+```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>
 
-<h3 id="CSS">CSS</h3>
+<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>
 
-<pre class="brush: css">div {
+<p>Bip bap bop.</p>
+```
+
+### CSS
+
+```css
+div {
   margin: 2rem 0;
   background: lavender;
 }
@@ -61,33 +63,19 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges
 p {
   margin: .4rem 0 1.2rem 0;
   background: yellow;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples','100%',250)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples','100%',250)}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ------------------------ | -------------------- |
+| {{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}} | {{Spec2("CSS2.1")}} | Définition initiale. |
+
+## Voir aussi
+
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
diff --git a/files/fr/web/css/css_charsets/index.md b/files/fr/web/css/css_charsets/index.md
index 07d2f1c593..b54e65d659 100644
--- a/files/fr/web/css/css_charsets/index.md
+++ b/files/fr/web/css/css_charsets/index.md
@@ -9,39 +9,24 @@ tags:
 translation_of: Web/CSS/CSS_Charsets
 original_slug: Web/CSS/Jeux_de_caractères_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong>Les jeux de caractères pour CSS</strong> est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.</p>
+**Les jeux de caractères pour CSS** est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Règles">Règles @</h3>
+### Règles @
 
-<ul>
- <li>{{cssxref("@charset")}}</li>
-</ul>
+- {{cssxref("@charset")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | État                     | Commentaires        |
+| ------------------------------------------------------------------------ | ------------------------ | ------------------- |
+| {{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}} | {{Spec2('CSS2.1')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Règle-_charset">Règle-@ <code>@charset</code></h3>
+### Règle-@ `@charset`
 
-<p>{{Compat("css.at-rules.charset")}}</p>
+{{Compat("css.at-rules.charset")}}
diff --git a/files/fr/web/css/css_color/index.md b/files/fr/web/css/css_color/index.md
index f07f716fe6..2ebf2f0b60 100644
--- a/files/fr/web/css/css_color/index.md
+++ b/files/fr/web/css/css_color/index.md
@@ -10,102 +10,66 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Color
 ---
-<div>{{CSSRef}}</div>
-
-<p><em><strong>CSS Color</strong></em> est un module des spécifications CSS qui décrit la gestion des couleurs, les types de donnée associés, la fusion des couleurs et la gestion de l'opacitié. Ce module ne contient pas l'ensemble des propriétés CSS qui prennent une valeur de type {{cssxref("&lt;color&gt;")}}, toutefois, ces propriétés dépendent des notions et règles définies dans cette spécification.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<ul>
- <li>{{cssxref("color")}}</li>
- <li>{{cssxref("opacity")}}</li>
- <li>{{cssxref("color-adjust")}}</li>
-</ul>
-
-<h3 id="Types_de_données">Types de données</h3>
-
-<ul>
- <li>{{cssxref("&lt;color&gt;")}}</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer des couleurs à des éléments HTML grâce à CSS</a></dt>
- <dd>Un guide décrivant comment utiliser CSS pour colorer différents types de contenu. Cet article couvre l'ensemble des propriétés CSS ayant trait aux couleurs.</dd>
-</dl>
-
-<h2 id="Outils">Outils</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Sélecteur de couleurs</a></dt>
- <dd>Cet outil permet de créer, ajuster et tester des couleurs sur mesure.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Colors')}}</td>
-   <td>{{Spec2('CSS4 Colors')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Colors')}}</td>
-   <td>{{Spec2('CSS3 Colors')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="color_property"><code>color</code> property</h3>
-
-<p>{{Compat("css.properties.color")}}</p>
-
-<h3 id="color-adjust_property"><code>color-adjust</code> property</h3>
-
-<p>{{Compat("css.properties.color-adjust")}}</p>
-
-<h3 id="opacity_property"><code>opacity</code> property</h3>
-
-<p>{{Compat("css.properties.opacity")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Des propriétés liées aux couleurs mais qui font partie d'autres spécifications :
-  <ul>
-   <li>{{cssxref("background-color")}},</li>
-   <li>{{cssxref("border-color")}},</li>
-   <li>{{cssxref("outline-color")}},</li>
-   <li>{{cssxref("text-decoration-color")}},</li>
-   <li>{{cssxref("text-emphasis-color")}},</li>
-   <li>{{cssxref("text-shadow")}},</li>
-   <li>{{cssxref("caret-color")}},</li>
-   <li>{{cssxref("column-rule-color")}}</li>
-  </ul>
- </li>
- <li>En CSS, les dégradés ne sont pas des couleurs mais des <a href="/fr/docs/Web/CSS/CSS_Images">images</a>.</li>
-</ul>
+{{CSSRef}}
+
+**_CSS Color_** est un module des spécifications CSS qui décrit la gestion des couleurs, les types de donnée associés, la fusion des couleurs et la gestion de l'opacitié. Ce module ne contient pas l'ensemble des propriétés CSS qui prennent une valeur de type {{cssxref("&lt;color&gt;")}}, toutefois, ces propriétés dépendent des notions et règles définies dans cette spécification.
+
+## Référence
+
+### Propriétés
+
+- {{cssxref("color")}}
+- {{cssxref("opacity")}}
+- {{cssxref("color-adjust")}}
+
+### Types de données
+
+- {{cssxref("&lt;color&gt;")}}
+
+## Guides
+
+- [Appliquer des couleurs à des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Appliquer_des_couleurs)
+  - : Un guide décrivant comment utiliser CSS pour colorer différents types de contenu. Cet article couvre l'ensemble des propriétés CSS ayant trait aux couleurs.
+
+## Outils
+
+- [Sélecteur de couleurs](/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs)
+  - : Cet outil permet de créer, ajuster et tester des couleurs sur mesure.
+
+## Spécifications
+
+| Spécification                                    | État                             | Commentaires         |
+| ------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Colors')}}             | {{Spec2('CSS4 Colors')}} |                      |
+| {{SpecName('CSS3 Colors')}}             | {{Spec2('CSS3 Colors')}} |                      |
+| {{SpecName('CSS2.1', 'colors.html')}} | {{Spec2('CSS2.1')}}         |                      |
+| {{SpecName('CSS1')}}                     | {{Spec2('CSS1')}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+### `color` property
+
+{{Compat("css.properties.color")}}
+
+### `color-adjust` property
+
+{{Compat("css.properties.color-adjust")}}
+
+### `opacity` property
+
+{{Compat("css.properties.opacity")}}
+
+## Voir aussi
+
+- Des propriétés liées aux couleurs mais qui font partie d'autres spécifications :
+
+  - {{cssxref("background-color")}},
+  - {{cssxref("border-color")}},
+  - {{cssxref("outline-color")}},
+  - {{cssxref("text-decoration-color")}},
+  - {{cssxref("text-emphasis-color")}},
+  - {{cssxref("text-shadow")}},
+  - {{cssxref("caret-color")}},
+  - {{cssxref("column-rule-color")}}
+
+- En CSS, les dégradés ne sont pas des couleurs mais des [images](/fr/docs/Web/CSS/CSS_Images).
diff --git a/files/fr/web/css/css_colors/color_picker_tool/index.md b/files/fr/web/css/css_colors/color_picker_tool/index.md
index 0715ba2707..73a7886456 100644
--- a/files/fr/web/css/css_colors/color_picker_tool/index.md
+++ b/files/fr/web/css/css_colors/color_picker_tool/index.md
@@ -7,32 +7,33 @@ tags:
 translation_of: Web/CSS/CSS_Colors/Color_picker_tool
 original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs
 ---
-<pre class="brush: html hidden"> &lt;div id="container"&gt;
-  &lt;div id="palette" class="block"&gt;
-   &lt;div id="color-palette"&gt;&lt;/div&gt;
-   &lt;div id="color-info"&gt;
-    &lt;div class="title"&gt;Couleurs CSS &lt;/div&gt;
-   &lt;/div&gt;
-  &lt;/div&gt;
-
-  &lt;div id="picker" class="block"&gt;
-   &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
-   &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
-   &lt;div id="controls"&gt;
-    &lt;div id="delete"&gt;
-     &lt;div id="trash-can"&gt;&lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
-   &lt;/div&gt;
-  &lt;/div&gt;
-
-  &lt;div id="canvas" data-tutorial="drop"&gt;
-   &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
-    data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
-  &lt;/div&gt;
- &lt;/div&gt;
-
-<pre class="brush: css hidden">/*
+```html hidden
+ <div id="container">
+  <div id="palette" class="block">
+   <div id="color-palette"></div>
+   <div id="color-info">
+    <div class="title">Couleurs CSS </div>
+   </div>
+  </div>
+
+  <div id="picker" class="block">
+   <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+   <div id="picker-samples" sample-id="master"></div>
+   <div id="controls">
+    <div id="delete">
+     <div id="trash-can"></div>
+    </div>
+    <div id="void-sample" class="icon"></div>
+   </div>
+  </div>
+
+  <div id="canvas" data-tutorial="drop">
+   <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+    data-max="20" data-sensivity="10"></div>
+  </div>
+ </div>
+
+/*
  * COLOR PICKER TOOL
  */
 
@@ -214,11 +215,11 @@ original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs
 	width: 93px;
 }
 
-.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+.ui-color-picker .input[data-topic="alpha"] > .name {
 	width: 60px;
 }
 
-.ui-color-picker .input[data-topic="alpha"] &gt; input {
+.ui-color-picker .input[data-topic="alpha"] > input {
 	float: right;
 }
 
@@ -228,11 +229,11 @@ original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs
 	margin: 6px 8px 0 0;
 }
 
-.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+.ui-color-picker .input[data-topic="hexa"] > .name {
 	display: none;
 }
 
-.ui-color-picker .input[data-topic="hexa"] &gt; input {
+.ui-color-picker .input[data-topic="hexa"] > input {
 	width: 90px;
 	height: 24px;
 	padding: 2px 0;
@@ -309,7 +310,7 @@ original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs
 
 /* Input Slider */
 
-.ui-input-slider &gt; input {
+.ui-input-slider > input {
 	margin: 0;
 	padding: 0;
 	width: 50px;
@@ -603,7 +604,7 @@ body {
 	cursor: pointer;
 }
 
-#controls .switch &gt; * {
+#controls .switch > * {
 	width: 50%;
 	padding: 2px 0;
 	background-color: #EEE;
@@ -704,7 +705,7 @@ body {
 	line-height: 30px;
 }
 
-#color-info .property &gt; * {
+#color-info .property > * {
 	float: left;
 }
 
@@ -786,7 +787,7 @@ body {
 	transition: all 0.5s;
 }
 
-#color-palette .container &gt; * {
+#color-palette .container > * {
 	float: left;
 }
 
@@ -826,11 +827,11 @@ body {
 #color-palette .controls {
 }
 
-#color-palette .controls &gt; * {
+#color-palette .controls > * {
 	float: left;
 }
 
-#color-palette .controls &gt; *:hover {
+#color-palette .controls > *:hover {
 	cursor: pointer;
 }
 
@@ -946,7 +947,7 @@ body {
 	z-index: 2;
 }
 
-#canvas .sample:hover &gt; * {
+#canvas .sample:hover > * {
 	cursor: pointer;
 	display: block !important;
 }
@@ -1032,11 +1033,11 @@ body {
 	opacity: 1;
 }
 
-</pre>
 
-<h3 id="JavaScript_Content">JavaScript Content</h3>
 
-<pre class="brush: js">'use strict';
+JavaScript Content
+
+'use strict';
 
 var UIColorPicker = (function UIColorPicker() {
 
@@ -1140,8 +1141,8 @@ var UIColorPicker = (function UIColorPicker() {
 	/*========== Methods to set Color Properties ==========*/
 
 	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-			value &gt;= 0 &amp;&amp; value &lt;= 255);
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
 	};
 
 	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
@@ -1184,7 +1185,7 @@ var UIColorPicker = (function UIColorPicker() {
 
 	Color.prototype.setHue = function setHue(value) {
 		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value &lt; 0 || value &gt; 359)
+			value < 0 || value > 359)
 			return;
 		this.hue = value;
 		this.updateRGB();
@@ -1192,7 +1193,7 @@ var UIColorPicker = (function UIColorPicker() {
 
 	Color.prototype.setSaturation = function setSaturation(value) {
 		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value &lt; 0 || value &gt; 100)
+			value < 0 || value > 100)
 			return;
 		this.saturation = value;
 		this.updateRGB();
@@ -1200,7 +1201,7 @@ var UIColorPicker = (function UIColorPicker() {
 
 	Color.prototype.setValue = function setValue(value) {
 		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value &lt; 0 || value &gt; 100)
+			value < 0 || value > 100)
 			return;
 		this.value = value;
 		this.HSVtoRGB();
@@ -1208,7 +1209,7 @@ var UIColorPicker = (function UIColorPicker() {
 
 	Color.prototype.setLightness = function setLightness(value) {
 		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value &lt; 0 || value &gt; 100)
+			value < 0 || value > 100)
 			return;
 		this.lightness = value;
 		this.HSLtoRGB();
@@ -1291,12 +1292,12 @@ var UIColorPicker = (function UIColorPicker() {
 		X = (X + m) * precision | 0;
 		m = m * precision | 0;
 
-		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
-		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
-		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
-		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
-		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
-		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
 	};
 
 	Color.prototype.HSLtoRGB = function HSLtoRGB() {
@@ -1312,12 +1313,12 @@ var UIColorPicker = (function UIColorPicker() {
 		X = (X + m) * precision | 0;
 		m = m * precision | 0;
 
-		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
-		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
-		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
-		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
-		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
-		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
 	};
 
 	Color.prototype.RGBtoHSV = function RGBtoHSV() {
@@ -1339,7 +1340,7 @@ var UIColorPicker = (function UIColorPicker() {
 		}
 
 		this.hue = 60 * hue | 0;
-		if (this.hue &lt; 0) this.hue += 360;
+		if (this.hue < 0) this.hue += 360;
 		this.saturation = (saturation * 100) | 0;
 		this.value = (cmax * 100) | 0;
 	};
@@ -1365,7 +1366,7 @@ var UIColorPicker = (function UIColorPicker() {
 		}
 
 		this.hue = 60 * hue | 0;
-		if (this.hue &lt; 0) this.hue += 360;
+		if (this.hue < 0) this.hue += 360;
 		this.saturation = (saturation * 100) | 0;
 		this.lightness = (lightness * 100) | 0;
 	};
@@ -1376,9 +1377,9 @@ var UIColorPicker = (function UIColorPicker() {
 		var r = this.r.toString(16);
 		var g = this.g.toString(16);
 		var b = this.b.toString(16);
-		if (this.r &lt; 16) r = '0' + r;
-		if (this.g &lt; 16) g = '0' + g;
-		if (this.b &lt; 16) b = '0' + b;
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
 		var value = '#' + r + g + b;
 		return value.toUpperCase();
 	};
@@ -1599,10 +1600,10 @@ var UIColorPicker = (function UIColorPicker() {
 		// width and height should be the same
 		var size = this.picking_area.clientWidth;
 
-		if (x &gt; size) x = size;
-		if (y &gt; size) y = size;
-		if (x &lt; 0) x = 0;
-		if (y &lt; 0) y = 0;
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
 
 		var value = 100 - (y * 100 / size) | 0;
 		var saturation = x * 100 / size | 0;
@@ -1634,10 +1635,10 @@ var UIColorPicker = (function UIColorPicker() {
 		var x = e.pageX - this.hue_area.offsetLeft;
 		var width = this.hue_area.clientWidth;
 
-		if (x &lt; 0) x = 0;
-		if (x &gt; width) x = width;
+		if (x < 0) x = 0;
+		if (x > width) x = width;
 
-		// TODO 360 =&gt; 359
+		// TODO 360 => 359
 		var hue = ((359 * x) / width) | 0;
 		// if (hue === 360) hue = 359;
 
@@ -1649,8 +1650,8 @@ var UIColorPicker = (function UIColorPicker() {
 		var x = e.pageX - this.alpha_area.offsetLeft;
 		var width = this.alpha_area.clientWidth;
 
-		if (x &lt; 0) x = 0;
-		if (x &gt; width) x = width;
+		if (x < 0) x = 0;
+		if (x > width) x = width;
 
 		this.color.a = (x / width).toFixed(2);
 
@@ -1803,8 +1804,8 @@ var UIColorPicker = (function UIColorPicker() {
 	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
 		var value = parseFloat(e.target.value);
 
-		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-			value &gt;= 0 &amp;&amp; value &lt;= 1)
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
 			this.color.a = value.toFixed(2);
 
 		e.target.value = this.color.a;
@@ -1868,7 +1869,7 @@ var UIColorPicker = (function UIColorPicker() {
 	};
 
 	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+		if (mode !== 'HSV' && mode !== 'HSL')
 			return;
 
 		this.picker_mode = mode;
@@ -1919,7 +1920,7 @@ var UIColorPicker = (function UIColorPicker() {
 	var init = function init() {
 		var elem = document.querySelectorAll('.ui-color-picker');
 		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			new ColorPicker(elem[i]);
 	};
 
@@ -2021,12 +2022,12 @@ var InputSliderManager = (function InputSliderManager() {
 
 		this.min = isNaN(min) ? 0 : min;
 		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
 		this.topic = topic;
 		this.node = node;
 		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
 		value = isNaN(value) ? this.min : value;
 
 		var input = new InputComponent(this);
@@ -2063,8 +2064,8 @@ var InputSliderManager = (function InputSliderManager() {
 
 		value = parseFloat(value.toFixed(slider.precision));
 
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
 
 		slider.value = value;
 		slider.node.setAttribute('data-value', value);
@@ -2135,7 +2136,7 @@ var InputSliderManager = (function InputSliderManager() {
 
 		value = value | 0;
 
-		slider.sensivity = value &gt; 0 ? value : 5;
+		slider.sensivity = value > 0 ? value : 5;
 	};
 
 	var getNode =  function getNode(topic) {
@@ -2164,7 +2165,7 @@ var InputSliderManager = (function InputSliderManager() {
 	var notify = function notify() {
 		if (subscribers[this.topic] === undefined)
 			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+		for (var i = 0; i < subscribers[this.topic].length; i++)
 			subscribers[this.topic][i](this.value);
 	};
 
@@ -2183,7 +2184,7 @@ var InputSliderManager = (function InputSliderManager() {
 	var init = function init() {
 		var elem = document.querySelectorAll('.ui-input-slider');
 		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
+		for (var i = 0; i < size; i++)
 			new InputSlider(elem[i]);
 	};
 
@@ -2249,9 +2250,9 @@ var ColorPickerTool = (function ColorPickerTool() {
 			};
 
 			var mouseMove = function mouseMove(e) {
-				if (action &gt;= 0)
+				if (action >= 0)
 					elem.style.width = e.clientX - valueX + 'px';
-				if (action &lt;= 0)
+				if (action <= 0)
 					elem.style.height = e.clientY - valueY + 'px';
 			};
 
@@ -2370,14 +2371,14 @@ var ColorPickerTool = (function ColorPickerTool() {
 		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
 			this.color.copy(color);
 			var hue = (steps * degree + this.color.hue) % 360;
-			if (hue &lt; 0) hue += 360;
+			if (hue < 0) hue += 360;
 			this.color.setHue(hue);
 			this.updateBgColor();
 		};
 
 		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
 			var saturation = color.saturation + value * steps;
-			if (saturation &lt;= 0) {
+			if (saturation <= 0) {
 				this.node.setAttribute('data-hidden', 'true');
 				return;
 			}
@@ -2390,7 +2391,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 
 		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
 			var lightness = color.lightness + value * steps;
-			if (lightness &lt;= 0) {
+			if (lightness <= 0) {
 				this.node.setAttribute('data-hidden', 'true');
 				return;
 			}
@@ -2402,7 +2403,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 
 		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
 			var brightness = color.value + value * steps;
-			if (brightness &lt;= 0) {
+			if (brightness <= 0) {
 				this.node.setAttribute('data-hidden', 'true');
 				return;
 			}
@@ -2414,7 +2415,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 
 		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
 			var alpha = parseFloat(color.a) + value * steps;
-			if (alpha &lt;= 0) {
+			if (alpha <= 0) {
 				this.node.setAttribute('data-hidden', 'true');
 				return;
 			}
@@ -2460,7 +2461,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 				lock.setAttribute('locked-state', this.locked);
 			}.bind(this));
 
-			for(var i = 0; i &lt; size; i++) {
+			for(var i = 0; i < size; i++) {
 				var sample = new ColorSample();
 				this.samples.push(sample);
 				palette.appendChild(sample.node);
@@ -2477,7 +2478,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 				if (palette.locked === true)
 					return;
 
-				for(var i = 0; i &lt; 12; i++) {
+				for(var i = 0; i < 12; i++) {
 					palette.samples[i].updateHue(color, 30, i);
 				}
 			});
@@ -2492,7 +2493,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 				if (palette.locked === true)
 					return;
 
-				for(var i = 0; i &lt; 11; i++) {
+				for(var i = 0; i < 11; i++) {
 					palette.samples[i].updateSaturation(color, -10, i);
 				}
 			});
@@ -2510,12 +2511,12 @@ var ColorPickerTool = (function ColorPickerTool() {
 
 				if(color.format === 'HSL') {
 					palette.title.textContent = 'Luminosité';
-					for(var i = 0; i &lt; 11; i++)
+					for(var i = 0; i < 11; i++)
 						palette.samples[i].updateLightness(color, -10, i);
 				}
 				else {
 					palette.title.textContent = 'Valeur';
-					for(var i = 0; i &lt; 11; i++)
+					for(var i = 0; i < 11; i++)
 						palette.samples[i].updateBrightness(color, -10, i);
 				}
 			});
@@ -2540,7 +2541,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 				if (palette.locked === true)
 					return;
 
-				for(var i = 0; i &lt; 10; i++) {
+				for(var i = 0; i < 10; i++) {
 					palette.samples[i].updateAlpha(color, -0.1, i);
 				}
 			});
@@ -2549,7 +2550,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 		};
 
 		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+			if (samples[id] !== undefined && samples[id]!== null)
 				return new Color(samples[id].color);
 		};
 
@@ -2728,7 +2729,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 
 			var index = 0;
 			var nr = samples.length;
-			for (var i=0; i &lt; nr; i++)
+			for (var i=0; i < nr; i++)
 				if (samples[i] !== null) {
 					samples[i].updatePosition(index);
 					index++;
@@ -2776,7 +2777,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 		};
 
 		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+			if (samples[id] !== undefined && samples[id]!== null)
 				return new Color(samples[id].color);
 		};
 
@@ -2833,7 +2834,7 @@ var ColorPickerTool = (function ColorPickerTool() {
 
 			AddSampleButton.init();
 
-			for (var i=0; i&lt;16; i++) {
+			for (var i=0; i<16; i++) {
 				var sample = new ColorSample();
 				container.appendChild(sample.node);
 			}
@@ -3198,29 +3199,55 @@ var ColorPickerTool = (function ColorPickerTool() {
 
 })();
 
-</pre>
-</div>
 
-<div>{{CSSRef}}</div>
 
-<p>Cet outil vous permet de définir des couleurs web personnalisées.</p>
 
-<p>L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé <em>RGB</em> en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé <em>HSL</em> en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla).</p>
 
-<p>Chaque couleur est prédéfinie dans les 3 formats standard CSS.</p>
+{{CSSRef}}
+
+
+
+
+Cet outil vous permet de définir des couleurs web personnalisées.
+
+
+
+
+
+L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé RGB en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé HSL en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla).
+
+
+
+
+
+Chaque couleur est prédéfinie dans les 3 formats standard CSS.
+
+
+
+
+
+En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha).
+
+
+
+
+
+Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation).
+
+
+
+
+
+{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}}
 
-<p>En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha).</p>
 
-<p>Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation).</p>
 
-<p>{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}}</p>
+Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML avec CSS</a></li>
- <li><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals">La mise en forme du texte et les polices</a></li>
- <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">Mettre en forme des bordures avec CSS</a></li>
- <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Modifier l'arrière-plan avec CSS</a></li>
- <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Les couleurs et le contraste</a></li>
-</ul>
+ Appliquer des couleurs sur des éléments HTML avec CSS
+ La mise en forme du texte et les polices
+ Mettre en forme des bordures avec CSS
+ Modifier l'arrière-plan avec CSS
+ Les couleurs et le contraste
+```
diff --git a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md
index 344caf8221..74f2583388 100644
--- a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md
+++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md
@@ -7,87 +7,85 @@ tags:
 translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
 original_slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La disposition sur plusieurs colonnes (« <em>Multiple-column Layout</em> » ou « <em>multicol</em> » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.</p>
+La disposition sur plusieurs colonnes (« _Multiple-column Layout_ » ou « _multicol_ » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.
 
-<h2 id="Concepts_et_terminologie">Concepts et terminologie</h2>
+## Concepts et terminologie
 
-<p>La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification <a href="/fr/docs/Web/CSS/CSS_Pages">CSS Paged Media</a>.</p>
+La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification [CSS Paged Media](/fr/docs/Web/CSS/CSS_Pages).
 
-<p>Les propriétés définies dans cette spécification sont :</p>
+Les propriétés définies dans cette spécification sont :
 
-<ul>
- <li>{{cssxref("column-width")}}</li>
- <li>{{cssxref("column-count")}}</li>
- <li>{{cssxref("columns")}}</li>
- <li>{{cssxref("column-rule-color")}}</li>
- <li>{{cssxref("column-rule-style")}}</li>
- <li>{{cssxref("column-rule-width")}}</li>
- <li>{{cssxref("column-rule")}}</li>
- <li>{{cssxref("column-span")}}</li>
- <li>{{cssxref("column-fill")}}</li>
- <li>{{cssxref("column-gap")}}</li>
-</ul>
+- {{cssxref("column-width")}}
+- {{cssxref("column-count")}}
+- {{cssxref("columns")}}
+- {{cssxref("column-rule-color")}}
+- {{cssxref("column-rule-style")}}
+- {{cssxref("column-rule-width")}}
+- {{cssxref("column-rule")}}
+- {{cssxref("column-span")}}
+- {{cssxref("column-fill")}}
+- {{cssxref("column-gap")}}
 
-<p>En ajoutant <code>column-count</code> ou <code>column-width</code> à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.</p>
+En ajoutant `column-count` ou `column-width` à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.
 
-<h2 id="Definir_des_colonnes">Definir des colonnes</h2>
+## Definir des colonnes
 
-<p>Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété <code>column-*</code> (<code>column-count</code> ou <code>column-width</code>).</p>
+Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété `column-*` (`column-count` ou `column-width`).
 
-<h3 id="La_propriété_column-count">La propriété <code>column-count</code></h3>
+### La propriété `column-count`
 
-<p>La propriété <code>column-count</code> définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.</p>
+La propriété `column-count` définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.
 
-<p>Dans l'exemple qui suit, on utilise la propriété <code>column-count</code> afin de créer trois colonnes au sein de l'élément <code>.container</code>. Le contenu, y compris l'élément fils de <code>.container</code> est alors divisé en trois colonnes.</p>
+Dans l'exemple qui suit, on utilise la propriété `column-count` afin de créer trois colonnes au sein de l'élément `.container`. Le contenu, y compris l'élément fils de `.container` est alors divisé en trois colonnes.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}
 
-<p>Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">fusionnent</a> pas avec les marges du conteneur.</p>
+Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne [fusionnent](/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges) pas avec les marges du conteneur.
 
-<h3 id="La_propriété_column-width">La propriété <code>column-width</code></h3>
+### La propriété `column-width`
 
-<p>La propriété <code>column-width</code> est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour <code>column-width</code>, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir <code>column-width</code> comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.</p>
+La propriété `column-width` est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour `column-width`, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir `column-width` comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.
 
-<p>Il existe un seul cas où la boîte de colonne peut être plus petite que <code>column-width</code> : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à <code>column-width</code>.</p>
+Il existe un seul cas où la boîte de colonne peut être plus petite que `column-width` : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à `column-width`.
 
-<p>Dans l'exemple qui suit, on utilise la propriété <code>column-width</code> avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.</p>
+Dans l'exemple qui suit, on utilise la propriété `column-width` avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}
 
-<h3 id="Utiliser_column-count_et_column-width">Utiliser <code>column-count</code> et <code>column-width</code></h3>
+### Utiliser `column-count` et `column-width`
 
-<p>Si on définit les deux propriétés pour un conteneur multi-colonnes, <code>column-count</code> agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour <code>column-width</code> aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par <code>column-count</code> soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur <code>column-width</code>).</p>
+Si on définit les deux propriétés pour un conteneur multi-colonnes, `column-count` agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour `column-width` aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par `column-count` soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur `column-width`).
 
-<p>Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec <code>column-count</code>.</p>
+Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec `column-count`.
 
-<p>Dans l'exemple suivant, on utilise <code>column-width</code> avec une valeur de 200px et <code>column-count</code> avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.</p>
+Dans l'exemple suivant, on utilise `column-width` avec une valeur de 200px et `column-count` avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}
 
-<h3 id="La_propriété_raccourcie_columns">La propriété raccourcie <code>columns</code></h3>
+### La propriété raccourcie `columns`
 
-<p>La <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> <code>columns</code> peut être utilisée afin de définir à la fois <code>column-count</code> et <code>column-width</code>. Si on utilise une unité de longueur, la valeur sera utilisée pour <code>column-width</code>, si on utilise un entier, la valeur sera utilisée pour <code>column-count</code>. Les deux peuvent être définies simultanément en étant séparées d'un espace.</p>
+La [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) `columns` peut être utilisée afin de définir à la fois `column-count` et `column-width`. Si on utilise une unité de longueur, la valeur sera utilisée pour `column-width`, si on utilise un entier, la valeur sera utilisée pour `column-count`. Les deux peuvent être définies simultanément en étant séparées d'un espace.
 
-<p>Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où <code>column-count</code> vaut 3.</p>
+Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où `column-count` vaut 3.
 
-<pre>.container {
-  columns: 3;
-}</pre>
+    .container {
+      columns: 3;
+    }
 
-<p>Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où <code>column-width</code> vaut <code>200px</code>.</p>
+Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où `column-width` vaut `200px`.
 
-<pre>.container {
-  columns: 200px;
-}</pre>
+    .container {
+      columns: 200px;
+    }
 
-<p>Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés <code>column-count</code> et <code>column-width</code> sont définies.</p>
+Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés `column-count` et `column-width` sont définies.
 
-<pre>.container {
-  columns: 2 200px;
-}</pre>
+    .container {
+      columns: 2 200px;
+    }
 
-<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+## Prochaines étapes
 
-<p>Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/CSS_Columns/Styling_Columns">comment mettre en forme chacune des colonnes</a>.</p>
+Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons [comment mettre en forme chacune des colonnes](/fr/docs/Web/CSS/CSS_Columns/Styling_Columns).
diff --git a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md
index fd6bd631ba..9bc898e4b8 100644
--- a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md
+++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md
@@ -7,67 +7,61 @@ tags:
 translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol
 original_slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification <em>CSS Fragmentation</em>. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.</p>
+Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification _CSS Fragmentation_. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.
 
-<h2 id="Quelques_notions_de_bases_sur_la_fragmentation">Quelques notions de bases sur la fragmentation</h2>
+## Quelques notions de bases sur la fragmentation
 
-<p><a href="https://www.w3.org/TR/css-break-3/">Le module de spécification CSS Fragmentation </a>détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.</p>
+[Le module de spécification CSS Fragmentation ](https://www.w3.org/TR/css-break-3/)détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.
 
-<p>Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.</p>
+Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.
 
-<p>Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :</p>
+Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :
 
-<ul>
- <li>Les ruptures à l'intérieur des boîtes, par exemple à l'intérieur d'un élément <code>&lt;figure&gt;</code></li>
- <li>Les ruptures avant et après les boîtes</li>
- <li>Les ruptures entre les lignes</li>
-</ul>
+- Les ruptures à l'intérieur des boîtes, par exemple à l'intérieur d'un élément `<figure>`
+- Les ruptures avant et après les boîtes
+- Les ruptures entre les lignes
 
-<h2 id="Les_ruptures_à_l'intérieur_des_boîtes">Les ruptures à l'intérieur des boîtes</h2>
+## Les ruptures à l'intérieur des boîtes
 
-<p>Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :</p>
+Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :
 
-<ul>
- <li><code>auto</code></li>
- <li><code>avoid</code></li>
- <li><code>avoid-page</code></li>
- <li><code>avoid-column</code></li>
- <li><code>avoid-region</code></li>
-</ul>
+- `auto`
+- `avoid`
+- `avoid-page`
+- `avoid-column`
+- `avoid-region`
 
-<p>Dans l'exemple qui suit, on a appliqué <code>break-inside</code> sur l'élément <code>figure</code> afin d'éviter que la légende soit séparée de l'image.</p>
+Dans l'exemple qui suit, on a appliqué `break-inside` sur l'élément `figure` afin d'éviter que la légende soit séparée de l'image.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}
 
-<h2 id="Les_ruptures_avant_et_après_les_boîtes">Les ruptures avant et après les boîtes</h2>
+## Les ruptures avant et après les boîtes
 
-<p>Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :</p>
+Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :
 
-<ul>
- <li><code>auto</code></li>
- <li><code>avoid</code></li>
- <li><code>avoid-column</code></li>
- <li><code>column</code></li>
-</ul>
+- `auto`
+- `avoid`
+- `avoid-column`
+- `column`
 
-<p>Avec l'exemple suivant, on force une rupture avant chaque élément de titre <code>h2</code>.</p>
+Avec l'exemple suivant, on force une rupture avant chaque élément de titre `h2`.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}
 
-<h2 id="Les_ruptures_entre_les_lignes">Les ruptures entre les lignes</h2>
+## Les ruptures entre les lignes
 
-<p>On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  <code>orphans</code> contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété <code>widows</code> contrôle le nombre de lignes qui restent au début d'un fragment.</p>
+On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  `orphans` contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété `widows` contrôle le nombre de lignes qui restent au début d'un fragment.
 
-<p>Les propriétés <code>orphans</code> et <code>widows</code> prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.</p>
+Les propriétés `orphans` et `widows` prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.
 
-<p>Dans l'exemple ci-après, on utilise la propriété <code>orphans</code> pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.</p>
+Dans l'exemple ci-après, on utilise la propriété `orphans` pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}
 
-<h2 id="Résultat_non_garanti">Résultat non garanti</h2>
+## Résultat non garanti
 
-<p>Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.</p>
+Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.
 
-<p>De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.</p>
+De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.
diff --git a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md
index e37d560b61..ccd8a2d25b 100644
--- a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md
+++ b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md
@@ -7,44 +7,42 @@ tags:
 translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
 original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.</p>
+Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.
 
-<h2 id="Le_dépassement_dans_les_boîtes_des_colonnes">Le dépassement dans les boîtes des colonnes</h2>
+## Le dépassement dans les boîtes des colonnes
 
-<p>On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de <code>column-width</code> ou à la largeur des colonnes selon le nombre indiqué avec <code>column-count</code>.</p>
+On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de `column-width` ou à la largeur des colonnes selon le nombre indiqué avec `column-count`.
 
-<p>Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).</p>
+Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}
 
-<p><img alt="" src="image-overflow-multicol.png"></p>
+![](image-overflow-multicol.png)
 
-<p>Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et <code>max-width: 100%</code> pour y parvenir.</p>
+Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et `max-width: 100%` pour y parvenir.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}
 
-<h2 id="Plus_de_colonnes_que_d'espace_disponible">Plus de colonnes que d'espace disponible</h2>
+## Plus de colonnes que d'espace disponible
 
-<p>La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?</p>
+La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?
 
-<p>Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.</p>
+Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.
 
-<p>Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.</p>
+Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}
 
-<div class="note">
-<p><strong>Note :</strong> On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).</p>
-</div>
+> **Note :** On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).
 
-<h2 id="Utiliser_les_requêtes_média_verticales">Utiliser les requêtes média verticales</h2>
+## Utiliser les requêtes média verticales
 
-<p>Lorsque les colonnes sont plus hautes que la zone d'affichage (<em>viewport</em>), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.</p>
+Lorsque les colonnes sont plus hautes que la zone d'affichage (_viewport_), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.
 
-<p>Dans l'exemple qui suit, on utilise par exemple une requête média avec <code>min-height</code> pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.</p>
+Dans l'exemple qui suit, on utilise par exemple une requête média avec `min-height` pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}
 
-<p>Dans le dernier guide de cette série, nous verrons <a href="/fr/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation</a> et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.</p>
+Dans le dernier guide de cette série, nous verrons [comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation](/fr/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol) et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.
diff --git a/files/fr/web/css/css_columns/index.md b/files/fr/web/css/css_columns/index.md
index 80a7ed7f0a..e5d4cc5ffa 100644
--- a/files/fr/web/css/css_columns/index.md
+++ b/files/fr/web/css/css_columns/index.md
@@ -8,86 +8,65 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Columns
 ---
-<div>{{CSSRef}}</div>
-
-<p><strong>Les colonnes CSS</strong> (<em>CSS Multi-column Layout</em> en anglais) forment un module CSS qui définit le comportement d'une disposition en colonnes, qui permet de décrire comment le contenu doit être réparti entre les colonnes et qui détaille comment sont gérées les espaces et les règles entre les colonnes.</p>
-
-<h2 id="Exemple_simple">Exemple simple</h2>
-
-<p>Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}}  sur l'élément qui possède la classe <code>container</code>. La valeur de la propriété <code>column-count</code> est <code>3</code>, et le contenu est donc arrangé entre trois colonnes de tailles égales.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
-
-<h2 id="Liens_avec_le_module_de_spécification_CSS_Fragmentation">Liens avec le module de spécification CSS Fragmentation</h2>
-
-<p>La disposition en colonnes est fortement liée aux <a href="/fr/docs/Web/CSS/CSS_Pages">média paginés</a> pour lesquels chaque colonne devient un fragment (de la même façon qu'une page imprimée devient un fragment d'un document). Aussi, les propriétés désormais définies dans le module de spécification <a href="/fr/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> sont nécessaires afin de contrôler la façon dont le contenu est scindé entre les colonnes.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés_relatives_à_la_disposition_en_colonnes">Propriétés relatives à la disposition en colonnes</h3>
-
-<ul>
- <li>{{cssxref("column-count")}}</li>
- <li>{{cssxref("column-fill")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("column-rule")}}</li>
- <li>{{cssxref("column-rule-color")}}</li>
- <li>{{cssxref("column-rule-style")}}</li>
- <li>{{cssxref("column-rule-width")}}</li>
- <li>{{cssxref("column-span")}}</li>
- <li>{{cssxref("column-width")}}</li>
- <li>{{cssxref("columns")}}</li>
-</ul>
-
-<h3 id="Propriétés_relatives_à_la_fragmentation">Propriétés relatives à la fragmentation</h3>
-
-<ul>
- <li>{{cssxref("break-after")}}</li>
- <li>{{cssxref("break-before")}}</li>
- <li>{{cssxref("break-inside")}}</li>
- <li>{{cssxref("orphans")}}</li>
- <li>{{cssxref("widows")}}</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes">Concepts de base relatifs à la disposition en colonnes</a></dt>
- <dd>Un aperçu du module de spécification CSS pour la disposition avec plusieurs colonnes.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes">Mettre en forme les colonnes</a></dt>
- <dd>Comment utiliser les règles liées aux colonnes et gérer l'espace entre les colonnes.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Répartir_entre_les_colonnes">Équilibrer le remplissement des colonnes</a></dt>
- <dd>Comment répartir un élément sur plusieurs colonnes et comment contrôler la façon dont les colonnes sont remplies.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes">Gérer le dépassement</a></dt>
- <dd>Comprendre ce qui se produit quand un élément dépasse de la colonne à laquelle il appartient et ce qui se produit lorsqu'il y a trop de contenu pour un conteneur en colonnes.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes">Gérer la fragmentation du contenu en multi-colonnes</a></dt>
- <dd>Une introduction au module de spécification CSS Fragmentation et à la façon dont le contenu est coupé entre les colonnes.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>Les autres modules liées aux dispositions possibles en CSS :</p>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">Les boîtes flexibles (<em>flexbox</em>)</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS (<em>CSS Grid</em>)</a></li>
-</ul>
+{{CSSRef}}
+
+**Les colonnes CSS** (_CSS Multi-column Layout_ en anglais) forment un module CSS qui définit le comportement d'une disposition en colonnes, qui permet de décrire comment le contenu doit être réparti entre les colonnes et qui détaille comment sont gérées les espaces et les règles entre les colonnes.
+
+## Exemple simple
+
+Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}}  sur l'élément qui possède la classe `container`. La valeur de la propriété `column-count` est `3`, et le contenu est donc arrangé entre trois colonnes de tailles égales.
+
+{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}
+
+## Liens avec le module de spécification CSS Fragmentation
+
+La disposition en colonnes est fortement liée aux [média paginés](/fr/docs/Web/CSS/CSS_Pages) pour lesquels chaque colonne devient un fragment (de la même façon qu'une page imprimée devient un fragment d'un document). Aussi, les propriétés désormais définies dans le module de spécification [CSS Fragmentation](/fr/docs/Web/CSS/CSS_Fragmentation) sont nécessaires afin de contrôler la façon dont le contenu est scindé entre les colonnes.
+
+## Référence
+
+### Propriétés relatives à la disposition en colonnes
+
+- {{cssxref("column-count")}}
+- {{cssxref("column-fill")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("column-rule")}}
+- {{cssxref("column-rule-color")}}
+- {{cssxref("column-rule-style")}}
+- {{cssxref("column-rule-width")}}
+- {{cssxref("column-span")}}
+- {{cssxref("column-width")}}
+- {{cssxref("columns")}}
+
+### Propriétés relatives à la fragmentation
+
+- {{cssxref("break-after")}}
+- {{cssxref("break-before")}}
+- {{cssxref("break-inside")}}
+- {{cssxref("orphans")}}
+- {{cssxref("widows")}}
+
+## Guides
+
+- [Concepts de base relatifs à la disposition en colonnes](/fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes)
+  - : Un aperçu du module de spécification CSS pour la disposition avec plusieurs colonnes.
+- [Mettre en forme les colonnes](/fr/docs/Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes)
+  - : Comment utiliser les règles liées aux colonnes et gérer l'espace entre les colonnes.
+- [Équilibrer le remplissement des colonnes](/fr/docs/Web/CSS/CSS_Columns/Répartir_entre_les_colonnes)
+  - : Comment répartir un élément sur plusieurs colonnes et comment contrôler la façon dont les colonnes sont remplies.
+- [Gérer le dépassement](/fr/docs/Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes)
+  - : Comprendre ce qui se produit quand un élément dépasse de la colonne à laquelle il appartient et ce qui se produit lorsqu'il y a trop de contenu pour un conteneur en colonnes.
+- [Gérer la fragmentation du contenu en multi-colonnes](/fr/docs/Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes)
+  - : Une introduction au module de spécification CSS Fragmentation et à la façon dont le contenu est coupé entre les colonnes.
+
+## Spécifications
+
+| Spécification                            | État                                 | Commentaires         |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Multicol')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. |
+
+## Voir aussi
+
+Les autres modules liées aux dispositions possibles en CSS :
+
+- [Les boîtes flexibles (_flexbox_)](/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS)
+- [Les grilles CSS (_CSS Grid_)](/fr/docs/Web/CSS/CSS_Grid_Layout)
diff --git a/files/fr/web/css/css_columns/spanning_columns/index.md b/files/fr/web/css/css_columns/spanning_columns/index.md
index 9aa5652293..4725775476 100644
--- a/files/fr/web/css/css_columns/spanning_columns/index.md
+++ b/files/fr/web/css/css_columns/spanning_columns/index.md
@@ -7,58 +7,56 @@ tags:
 translation_of: Web/CSS/CSS_Columns/Spanning_Columns
 original_slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.</p>
+Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.
 
-<div class="note">
-<p><strong>Note :</strong> Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.</p>
-</div>
+> **Note :** Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.
 
-<h2 id="Étendre_sur_plusieurs_colonnes">Étendre sur plusieurs colonnes</h2>
+## Étendre sur plusieurs colonnes
 
-<p>Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur <code>all</code>. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.</p>
+Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur `all`. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.
 
-<p>N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.</p>
+N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.
 
-<p>Dans l'exemple qui suit, on a <code>column-span: all</code> appliqué sur l'élément <code>h2</code> qui s'étend ainsi sur toutes les colonnes.</p>
+Dans l'exemple qui suit, on a `column-span: all` appliqué sur l'élément `h2` qui s'étend ainsi sur toutes les colonnes.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}
 
-<p>Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.</p>
+Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}
 
-<p>Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.</p>
+Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.
 
-<h3 id="Les_limites_de_column-span">Les limites de <code>column-span</code></h3>
+### Les limites de `column-span`
 
-<p>Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour <code>column-span</code> : <code>none</code> qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et <code>all</code> qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.</p>
+Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour `column-span` : `none` qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et `all` qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.
 
-<h3 id="Quelques_points_d'attention">Quelques points d'attention</h3>
+### Quelques points d'attention
 
-<p>Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.</p>
+Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}
 
-<p>De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser <code>column-span</code> avec précaution pour éviter ces effets indésirables.</p>
+De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser `column-span` avec précaution pour éviter ces effets indésirables.
 
-<h2 id="Équilibrer_et_remplir_les_colonnes">Équilibrer et remplir les colonnes</h2>
+## Équilibrer et remplir les colonnes
 
-<p>Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.</p>
+Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.
 
-<p>La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est <code>balance</code>. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que <a href="/fr/docs/Web/CSS/CSS_Pages">les médias paginés</a>, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.</p>
+La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est `balance`. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que [les médias paginés](/fr/docs/Web/CSS/CSS_Pages), seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.
 
-<p>La valeur <code>balance-all</code> permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).</p>
+La valeur `balance-all` permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).
 
-<p>Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.</p>
+Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}
 
-<p><code>auto</code> est une autre valeur qui peut être utilisée avec <code>column-fill</code>. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié <code>column-fill</code> pour utiliser <code>auto</code> et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.</p>
+`auto` est une autre valeur qui peut être utilisée avec `column-fill`. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié `column-fill` pour utiliser `auto` et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}
 
-<p>On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.</p>
+On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.
 
-<p>Dans le prochain guide, nous verrons <a href="/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">comment gérer le dépassement au sein d'un conteneur multi-colonnes</a>, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.</p>
+Dans le prochain guide, nous verrons [comment gérer le dépassement au sein d'un conteneur multi-colonnes](/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol), à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.
diff --git a/files/fr/web/css/css_columns/styling_columns/index.md b/files/fr/web/css/css_columns/styling_columns/index.md
index 58cf3879e6..c9c25dc039 100644
--- a/files/fr/web/css/css_columns/styling_columns/index.md
+++ b/files/fr/web/css/css_columns/styling_columns/index.md
@@ -8,42 +8,42 @@ tags:
 translation_of: Web/CSS/CSS_Columns/Styling_Columns
 original_slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.</p>
+Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.
 
-<h2 id="Peut-on_mettre_en_forme_les_boîtes_des_colonnes">Peut-on mettre en forme les boîtes des colonnes ?</h2>
+## Peut-on mettre en forme les boîtes des colonnes ?
 
-<p>Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.</p>
+Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.
 
-<h2 id="L'espaceement_la_propriété_column-gap">L'espaceement : la propriété <code>column-gap</code></h2>
+## L'espaceement : la propriété `column-gap`
 
-<p>L'espacement entre les colonnes est contrôlé par la propriété <code>column-gap</code>. Cette propriété était initialement définie dans le module de spécification <em>Multi-column Layout</em> mais est désormais définie dans le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">les grilles CSS</a>).</p>
+L'espacement entre les colonnes est contrôlé par la propriété `column-gap`. Cette propriété était initialement définie dans le module de spécification _Multi-column Layout_ mais est désormais définie dans le module de spécification _[Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)_ (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que [les grilles CSS](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)).
 
-<p>Dans une disposition multi-colonne, la valeur initiale de la propriété <code>column-gap</code> est <code>1em</code>. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de <code>column-gap</code> est 0. Le mot-clé <code>normal</code> est une valeur qui permet d'obtenir un écart de 1em.</p>
+Dans une disposition multi-colonne, la valeur initiale de la propriété `column-gap` est `1em`. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de `column-gap` est 0. Le mot-clé `normal` est une valeur qui permet d'obtenir un écart de 1em.
 
-<p>Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour <code>column-gap</code>. Dans l'exemple qui suit, on a ainsi paramétré <code>column-gap</code> avec la valeur 40px.</p>
+Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour `column-gap`. Dans l'exemple qui suit, on a ainsi paramétré `column-gap` avec la valeur 40px.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}
 
-<p>Les valeurs autorisées pour <code>column-gap</code> sont de type <code>&lt;length-percentage&gt;</code>, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.</p>
+Les valeurs autorisées pour `column-gap` sont de type `<length-percentage>`, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.
 
-<h2 id="Créer_un_délimiteur_entre_les_colonnes_column-rule">Créer un délimiteur entre les colonnes : <code>column-rule</code></h2>
+## Créer un délimiteur entre les colonnes : `column-rule`
 
-<p>La spécification définit les propriétés <code>column-rule-width</code>, <code>column-rule-style</code> and <code>column-rule-color</code> et fournit une propriété raccourcie <code>column-rule</code>. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour <code>border-style</code> pourra être utilisée pour <code>column-rule-style</code>.</p>
+La spécification définit les propriétés `column-rule-width`, `column-rule-style` and `column-rule-color` et fournit une propriété raccourcie `column-rule`. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour `border-style` pourra être utilisée pour `column-rule-style`.
 
-<p>Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.</p>
+Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.
 
-<p>Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est <code>rebeccapurple</code>, sans utiliser la propriété raccourcie.</p>
+Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est `rebeccapurple`, sans utiliser la propriété raccourcie.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}
 
-<p>On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.</p>
+On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.
 
-<p>Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.</p>
+Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.
 
-<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment <a href="/fr/docs/Web/CSS/CSS_Columns/Spanning_Columns">propager les éléments du conteneur sur l'ensemble des colonnes</a>.</p>
+Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment [propager les éléments du conteneur sur l'ensemble des colonnes](/fr/docs/Web/CSS/CSS_Columns/Spanning_Columns).
diff --git a/files/fr/web/css/css_columns/using_multi-column_layouts/index.md b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md
index 4dd83dfefd..faf44e11f3 100644
--- a/files/fr/web/css/css_columns/using_multi-column_layouts/index.md
+++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md
@@ -8,71 +8,74 @@ tags:
 translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
 original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <strong>disposition multi-colonnes</strong> étend <em>le mode de disposition en bloc</em> et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.</p>
+La **disposition multi-colonnes** étend _le mode de disposition en bloc_ et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.
 
-<h2 id="Utiliser_les_colonnes_CSS">Utiliser les colonnes CSS</h2>
+## Utiliser les colonnes CSS
 
-<h3 id="Le_nombre_de_colonnes_et_leur_largeur">Le nombre de colonnes et leur largeur</h3>
+### Le nombre de colonnes et leur largeur
 
-<p>Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.</p>
+Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.
 
-<p>On utilisera la propriété <code>column-count</code> pour définir le nombre de colonnes qu'on souhaite avoir.</p>
+On utilisera la propriété `column-count` pour définir le nombre de colonnes qu'on souhaite avoir.
 
-<h4 id="Utilisation_de_column-count">Utilisation de <code>column-count</code></h4>
+#### Utilisation de `column-count`
 
-<h5 id="CSS">CSS</h5>
+##### CSS
 
-<pre class="brush: css">#col {
+```css
+#col {
   column-count: 2;
 }
-</pre>
+```
 
-<h5 id="HTML">HTML</h5>
+##### HTML
 
-<pre class="brush: html">&lt;div id="col"&gt;
-  &lt;p&gt;
+```html
+<div id="col">
+  <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna
     aliqua.
-  &lt;/p&gt;
-  &lt;p&gt;
+  </p>
+  <p>
     Ut enim ad minim veniam, quis nostrud exercitation ullamco
     laboris nisi ut aliquip ex ea commodo consequat.
-  &lt;/p&gt;
-  &lt;p&gt;
+  </p>
+  <p>
     Duis aute irure dolor in reprehenderit in voluptate velit
     esse cillum dolore eu fugiat nulla pariatur.
-  &lt;/p&gt;
-  &lt;p&gt;
+  </p>
+  <p>
     Excepteur sint occaecat cupidatat non proident, sunt in
     culpa qui officia deserunt mollit anim id est laborum.
-  &lt;/p&gt;
-&lt;/div&gt;
-</pre>
+  </p>
+</div>
+```
 
-<h5 id="Résultat">Résultat</h5>
+##### Résultat
 
-<p>{{EmbedLiveSample('Utilisation_de_column-count','100%')}}</p>
+{{EmbedLiveSample('Utilisation_de_column-count','100%')}}
 
-<p>Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.</p>
+Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.
 
-<p>La propriété <code>column-width</code> permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété <code>column-count</code> n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.</p>
+La propriété `column-width` permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété `column-count` n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.
 
-<h4 id="Utilisation_de_column-width">Utilisation de <code>column-width</code></h4>
+#### Utilisation de `column-width`
 
-<h5 id="CSS_2">CSS</h5>
+##### CSS
 
-<pre class="brush: css">#wid {
+```css
+#wid {
   column-width: 100px;
 }
-</pre>
+```
 
+##### HTML
 
-<h5 id="HTML_2">HTML</h5>
-
-<pre class="brush: html">&lt;div id="wid"&gt;
+```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
@@ -81,31 +84,33 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
   occaecat cupidatat non proident, sunt in culpa qui officia
   deserunt mollit anim id est laborum
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<h5 id="Résultat_2">Résultat</h5>
+##### Résultat
 
-<p>{{EmbedLiveSample('Utilisation_de_column-width','100%')}}</p>
+{{EmbedLiveSample('Utilisation_de_column-width','100%')}}
 
-<p>En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.</p>
+En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.
 
-<h4 id="La_propriété_raccourcie_columns">La propriété raccourcie <code>columns</code></h4>
+#### La propriété raccourcie `columns`
 
-<p>La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.</p>
+La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.
 
-<p>Ainsi, la déclaration <code>column-width:12em</code> pourra être remplacée de la façon suivante :</p>
+Ainsi, la déclaration `column-width:12em` pourra être remplacée de la façon suivante :
 
-<h5 id="CSS_3">CSS</h5>
+##### CSS
 
-<pre class="brush: css">#col_short {
+```css
+#col_short {
   columns: 12em;
 }
-</pre>
+```
 
-<h5 id="HTML_3">HTML</h5>
+##### HTML
 
-<pre class="brush: html">&lt;div id="col_short"&gt;
+```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
@@ -114,49 +119,54 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
   occaecat cupidatat non proident, sunt in culpa qui officia
   deserunt mollit anim id est laborum
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<h5 id="Résultat_3">Résultat</h5>
+##### Résultat
 
-<p>{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}</p>
+{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}
 
-<p>De même, on pourra remplacer la déclaration <code>column-count: 4</code> avec ce bloc :</p>
+De même, on pourra remplacer la déclaration `column-count: 4` avec ce bloc :
 
-<pre class="brush: css">#columns_4{
+```css
+#columns_4{
   columns: 4;
 }
-</pre>
+```
 
-<p>Enfin, pour synthétiser les instructions <code>column-width:8em</code> et <code>column-count:12</code>, on pourra utiliser les instructions suivantes :</p>
+Enfin, pour synthétiser les instructions `column-width:8em` et `column-count:12`, on pourra utiliser les instructions suivantes :
 
-<pre class="brush: css">#columns_12 {
+```css
+#columns_12 {
   columns: 12 8em;
 }
-</pre>
+```
 
-<h3 id="Équilibrage_de_la_hauteur">Équilibrage de la hauteur</h3>
+### Équilibrage de la hauteur
 
-<p>La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.</p>
+La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.
 
-<p>Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.</p>
+Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.
 
-<h3 id="L'espacement_entre_les_colonnes">L'espacement entre les colonnes</h3>
+### L'espacement entre les colonnes
 
-<p>Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est <code>1em</code>. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.</p>
+Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est `1em`. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.
 
-<h4 id="Utilisation_de_column-gap">Utilisation de <code>column-gap</code></h4>
+#### Utilisation de `column-gap`
 
-<h5 id="CSS_4">CSS</h5>
+##### CSS
 
-<pre class="brush: css">#column_gap {
+```css
+#column_gap {
   column-count: 5;
   column-gap: 2em;
-}</pre>
+}
+```
 
-<h5 id="HTML_4">HTML</h5>
+##### HTML
 
-<pre class="brush: html">&lt;div id="column_gap"&gt;
+```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
@@ -165,23 +175,21 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
   occaecat cupidatat non proident, sunt in culpa qui officia
   deserunt mollit anim id est laborum
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<h5 id="Résultat_4">Résultat</h5>
+##### Résultat
 
-<p>{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}</p>
+{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}
 
-<h2 id="Amélioration_progressive">Amélioration progressive</h2>
+## Amélioration progressive
 
-<p>Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.</p>
+Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.</p>
+Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html">https://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
-</ul>
+- [https://weblogs.mozillazine.org/roc/a...18_for_we.html](https://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html)
diff --git a/files/fr/web/css/css_conditional_rules/index.md b/files/fr/web/css/css_conditional_rules/index.md
index 70fad97d1c..2756919f14 100644
--- a/files/fr/web/css/css_conditional_rules/index.md
+++ b/files/fr/web/css/css_conditional_rules/index.md
@@ -8,54 +8,39 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Conditional_Rules
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Conditional Rules</strong></em> (ou règles conditionnelles CSS) est un module CSS qui permet de définir un ensemble de règles qui ne s'appliqueront qu'en fonction des capacités du processeur ou du document auquel la feuille de styles est appliquée.</p>
+**_CSS Conditional Rules_** (ou règles conditionnelles CSS) est un module CSS qui permet de définir un ensemble de règles qui ne s'appliqueront qu'en fonction des capacités du processeur ou du document auquel la feuille de styles est appliquée.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Règles">Règles @</h3>
+### Règles @
 
-<ul>
- <li>{{cssxref("@document")}}</li>
- <li>{{cssxref("@media")}}</li>
- <li>{{cssxref("@supports")}}</li>
- <li>{{cssxref("@import")}}</li>
-</ul>
+- {{cssxref("@document")}}
+- {{cssxref("@media")}}
+- {{cssxref("@supports")}}
+- {{cssxref("@import")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Conditional')}}</td>
-   <td>{{Spec2('CSS3 Conditional')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | État                                     | Commentaires         |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="document"><code>@document</code></h3>
+### `@document`
 
-<p>{{Compat("css.at-rules.document")}}</p>
+{{Compat("css.at-rules.document")}}
 
-<h3 id="import"><code>@import</code></h3>
+### `@import`
 
-<p>{{Compat("css.at-rules.import")}}</p>
+{{Compat("css.at-rules.import")}}
 
-<h3 id="media"><code>@media</code></h3>
+### `@media`
 
-<p>{{Compat("css.at-rules.media")}}</p>
+{{Compat("css.at-rules.media")}}
 
-<h3 id="supports"><code>@supports</code></h3>
+### `@supports`
 
-<p>{{Compat("css.at-rules.supports")}}</p>
+{{Compat("css.at-rules.supports")}}
diff --git a/files/fr/web/css/css_conditional_rules/using_feature_queries/index.md b/files/fr/web/css/css_conditional_rules/using_feature_queries/index.md
index 7adcf5b391..09e657e86d 100644
--- a/files/fr/web/css/css_conditional_rules/using_feature_queries/index.md
+++ b/files/fr/web/css/css_conditional_rules/using_feature_queries/index.md
@@ -9,105 +9,111 @@ translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries
 original_slug: >-
   Web/CSS/CSS_Conditional_Rules/Utiliser_requêtes_fonctionnalité_(feature_queries)
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong>Les requêtes de fonctionnalité (ou <em>feature queries</em>)</strong> sont créées à l'aide de la règle <code><a href="/fr/docs/Web/CSS/@supports">@supports</a></code> et permettent aux développeurs web de tester la prise en charge d'une fonctionnalité donnée par le navigateur puis de fournir le code CSS qui sera appliqué selon le résultat de ce test. Dans ce guide, nous verrons comment gérer l'amélioration progressive grâce à l'aide des requêtes de fonctionnalité.</p>
+**Les requêtes de fonctionnalité (ou _feature queries_)** sont créées à l'aide de la règle [`@supports`](/fr/docs/Web/CSS/@supports) et permettent aux développeurs web de tester la prise en charge d'une fonctionnalité donnée par le navigateur puis de fournir le code CSS qui sera appliqué selon le résultat de ce test. Dans ce guide, nous verrons comment gérer l'amélioration progressive grâce à l'aide des requêtes de fonctionnalité.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Les requêtes de fonctionnalité CSS s'inscrivent dans <a href="https://drafts.csswg.org/css-conditional-3/">le module de spécification CSS Conditional Rules</a> qui décrit également le fonctionnement de la règle <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>. Vous pourrez ici voir que les requêtes de fonctionnalité fonctionnent de façon semblable aux requêtes de média. Pour les requêtes de média, on teste une caractéristique de l'environnement dans lequel la page web est affichée/exécutée tandis que pour les requêtes de fonctionnalité, on teste la prise en charge d'une fonctionnalité CSS dans le navigateur.</p>
+Les requêtes de fonctionnalité CSS s'inscrivent dans [le module de spécification CSS Conditional Rules](https://drafts.csswg.org/css-conditional-3/) qui décrit également le fonctionnement de la règle [`@media`](/fr/docs/Web/CSS/@media). Vous pourrez ici voir que les requêtes de fonctionnalité fonctionnent de façon semblable aux requêtes de média. Pour les requêtes de média, on teste une caractéristique de l'environnement dans lequel la page web est affichée/exécutée tandis que pour les requêtes de fonctionnalité, on teste la prise en charge d'une fonctionnalité CSS dans le navigateur.
 
-<p>Une requête de fonctionnalité commence par une règle <code>@supports</code>, suivi du nom de la propriété et de la valeur qu'on souhaite tester. Il n'est pas possible de tester une propriété seule (ex. <code>display</code>) mais uniquement un couple nom/valeur :</p>
+Une requête de fonctionnalité commence par une règle `@supports`, suivi du nom de la propriété et de la valeur qu'on souhaite tester. Il n'est pas possible de tester une propriété seule (ex. `display`) mais uniquement un couple nom/valeur :
 
-<pre class="brush: css">@supports (<em>propriété</em>: <em>valeur</em>) {
-  <em>Règles CSS à appliquer</em>
-}</pre>
+```css
+@supports (propriété: valeur) {
+  Règles CSS à appliquer
+}
+```
 
-<p>Si, par exemple, on souhaite vérifier qu'un navigateur prend en charge la propriété <code>row-gap</code>, on écrira la requête suivant. Dans la plupart des cas, peu importe la valeur utilisée avec cette propriété, on souhaite simplement la prise en charge de cette propriété et on peut donc utiliser n'importe quelle valeur valide pour ça.</p>
+Si, par exemple, on souhaite vérifier qu'un navigateur prend en charge la propriété `row-gap`, on écrira la requête suivant. Dans la plupart des cas, peu importe la valeur utilisée avec cette propriété, on souhaite simplement la prise en charge de cette propriété et on peut donc utiliser n'importe quelle valeur valide pour ça.
 
-<p>{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}
 
-<p>La partie dédiée à la valeur de la propriété permet de tester les cas où une nouvelle valeur est spécifiée pour une propriété donnée. Le cas de <code>display</code> est particulièrement intéressant. Tous les navigateurs prennent en charge <code>display</code> (<code>display: block</code> faisait partie de CSS1) mais les valeurs <code>display: flex</code> et <code>display: grid</code> ont été ajoutées plus récemment. Les propriétés CSS peuvent parfois se voir doter de nouvelles valeurs et on peut alors tester leur prise en charge avec <code>@supports</code>.</p>
+La partie dédiée à la valeur de la propriété permet de tester les cas où une nouvelle valeur est spécifiée pour une propriété donnée. Le cas de `display` est particulièrement intéressant. Tous les navigateurs prennent en charge `display` (`display: block` faisait partie de CSS1) mais les valeurs `display: flex` et `display: grid` ont été ajoutées plus récemment. Les propriétés CSS peuvent parfois se voir doter de nouvelles valeurs et on peut alors tester leur prise en charge avec `@supports`.
 
-<h2 id="Tester_labsence_de_prise_en_charge_dune_fonctionnalité">Tester l'absence de prise en charge d'une fonctionnalité</h2>
+## Tester l'absence de prise en charge d'une fonctionnalité
 
-<p>Il est aussi possible de tester l'absence de prise en charge d'une fonctionnalité en ajoutant le mot-clé <code>not</code> :</p>
+Il est aussi possible de tester l'absence de prise en charge d'une fonctionnalité en ajoutant le mot-clé `not` :
 
-<pre class="brush: css">@supports not (<em>propriété</em>: <em>valeur</em>) {
-  <em>Règles CSS à appliquer</em>
-}</pre>
+```css
+@supports not (propriété: valeur) {
+  Règles CSS à appliquer
+}
+```
 
-<p>Les règles CSS contenues dans la requête suivante seront uniquement appliquées lorsque le navigateur ne prend pas en charge <code>row-gap</code>.</p>
+Les règles CSS contenues dans la requête suivante seront uniquement appliquées lorsque le navigateur ne prend pas en charge `row-gap`.
 
-<p>{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}
 
-<h2 id="Tester_la_prise_en_charge_de_plusieurs_fonctionnalités">Tester la prise en charge de plusieurs fonctionnalités</h2>
+## Tester la prise en charge de plusieurs fonctionnalités
 
-<p>Si on souhaite tester la prise en charge de plusieurs fonctionnalités en même temps, on pourra les combiner avec le mot-clé <code>and</code> :</p>
+Si on souhaite tester la prise en charge de plusieurs fonctionnalités en même temps, on pourra les combiner avec le mot-clé `and` :
 
-<pre class="brush: css">@supports (<em>property1</em>: <em>value</em>) and (<em>property</em>2: <em>value</em>) {
-<em>  CSS rules to apply</em>
-}</pre>
+```css
+@supports (property1: value) and (property2: value) {
+  CSS rules to apply
+}
+```
 
-<p>On peut, par exemple, vérifier que le navigateur prend en charge les formes (<em>shapes</em>) et grilles CSS grâce à une règle qui teste cette conjonction. La règle suivante renverra <code>true</code> uniquement si <code>shape-outside: circle()</code> et <code>display: grid</code> sont pris en charge par le navigateur.</p>
+On peut, par exemple, vérifier que le navigateur prend en charge les formes (_shapes_) et grilles CSS grâce à une règle qui teste cette conjonction. La règle suivante renverra `true` uniquement si `shape-outside: circle()` et `display: grid` sont pris en charge par le navigateur.
 
-<p>{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}
 
-<p>De la même façon, on peut utiliser le mot-clé <code>or</code> si on souhaite tester la prise en charge d'au moins une fonctionnalité :</p>
+De la même façon, on peut utiliser le mot-clé `or` si on souhaite tester la prise en charge d'au moins une fonctionnalité :
 
-<pre class="brush: css">@supports (<em>property1</em>: <em>value</em>) or (<em>property</em>2: <em>value</em>) {<em>
-  CSS rules to apply</em>
-}</pre>
+```css
+@supports (property1: value) or (property2: value) {
+  CSS rules to apply
+}
+```
 
-<p>Cela peut s'avérer particulièrement utile lorsqu'un préfixe est présent dans le nom d'une propriété (on peut alors tester la prise en charge de la propriété standard et des versions préfixées).</p>
+Cela peut s'avérer particulièrement utile lorsqu'un préfixe est présent dans le nom d'une propriété (on peut alors tester la prise en charge de la propriété standard et des versions préfixées).
 
-<p>{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}
 
-<h2 id="Limites_des_requêtes_de_fonctionnalité">Limites des requêtes de fonctionnalité</h2>
+## Limites des requêtes de fonctionnalité
 
-<p>Une règle <code>@supports</code> ne permet de vérifier qu'un navigateur peut interpréter une ou plusieurs paires de propriétés/valeurs. Si cette paire est comprise par le navigateur, celui-ci renverra une réponse positive. Une telle requête ne permet pas d'indiquer que la fonctionnalité est complètement prise en charge, sans bug…</p>
+Une règle `@supports` ne permet de vérifier qu'un navigateur peut interpréter une ou plusieurs paires de propriétés/valeurs. Si cette paire est comprise par le navigateur, celui-ci renverra une réponse positive. Une telle requête ne permet pas d'indiquer que la fonctionnalité est complètement prise en charge, sans bug…
 
-<p>De plus, de telles requêtes ne permettent pas de tester une <em>implémentation partielle</em>. Prenons l'exemple de la propriété <code>gap</code>, à l'heure actuelle (novembre 2019) : tous les navigateurs prennent en charge <code>gap</code> avec les grilles CSS et seul Firefox prend en charge <code>gap</code> avec les boîtes flexibles (<em>flexbox</em>). Si on teste la propriété <code>gap</code> car on souhaite l'utiliser avec les boîtes flexibles, on recevra une réponse positive bien que ce ne soit pas implémenté.</p>
+De plus, de telles requêtes ne permettent pas de tester une _implémentation partielle_. Prenons l'exemple de la propriété `gap`, à l'heure actuelle (novembre 2019) : tous les navigateurs prennent en charge `gap` avec les grilles CSS et seul Firefox prend en charge `gap` avec les boîtes flexibles (_flexbox_). Si on teste la propriété `gap` car on souhaite l'utiliser avec les boîtes flexibles, on recevra une réponse positive bien que ce ne soit pas implémenté.
 
-<h2 id="Comment_utiliser_supports_pour_lamélioration_progressive">Comment utiliser <code>@supports</code> pour l'amélioration progressive ?</h2>
+## Comment utiliser `@supports` pour l'amélioration progressive ?
 
-<p>Les requêtes de fonctionnalité sont un outil précieux pour améliorer un site de façon progressive. Elles permettent de fournir une solution fonctionnelle pour tous les navigateurs et d'améliorer le résultat pour les navigateurs qui prennent en charge de nouvelles fonctionnalités.</p>
+Les requêtes de fonctionnalité sont un outil précieux pour améliorer un site de façon progressive. Elles permettent de fournir une solution fonctionnelle pour tous les navigateurs et d'améliorer le résultat pour les navigateurs qui prennent en charge de nouvelles fonctionnalités.
 
-<p>Toutefois, il existe des navigateurs pour lesquels même les requêtes de fonctionnalité/<code>@supports</code> ne sont pas pris en charge. Ainsi, si on souhaite utiliser les grilles CSS (qui ne sont pas prises en charge par IE11), on ne peut pas tester leur prise en charge dans IE11 car ce dernier ne permet pas d'utiliser <code>@supports</code>. En pratique, cela ne devrait pas poser de problème : le code CSS principal est destiné aux navigateurs les plus anciens et on ajoute le CSS plus récent dans les requêtes de fonctionnalité.</p>
+Toutefois, il existe des navigateurs pour lesquels même les requêtes de fonctionnalité/`@supports` ne sont pas pris en charge. Ainsi, si on souhaite utiliser les grilles CSS (qui ne sont pas prises en charge par IE11), on ne peut pas tester leur prise en charge dans IE11 car ce dernier ne permet pas d'utiliser `@supports`. En pratique, cela ne devrait pas poser de problème : le code CSS principal est destiné aux navigateurs les plus anciens et on ajoute le CSS plus récent dans les requêtes de fonctionnalité.
 
-<p>Prenons un exemple plus construit.</p>
+Prenons un exemple plus construit.
 
-<p>Imaginons qu'on veuille créer une disposition avec trois boîtes qui se suivent sur une ligne. Idéalement, on voudrait utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>. Toutefois, on voudrait aussi une disposition qui fonctionne pour les navigateurs plus anciens avec des éléments flottants. Pour commencer, on crée la disposition flottante avec le code suivante (on a alors trois colonnes).</p>
+Imaginons qu'on veuille créer une disposition avec trois boîtes qui se suivent sur une ligne. Idéalement, on voudrait utiliser [les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). Toutefois, on voudrait aussi une disposition qui fonctionne pour les navigateurs plus anciens avec des éléments flottants. Pour commencer, on crée la disposition flottante avec le code suivante (on a alors trois colonnes).
 
-<p>{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}</p>
+{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}
 
-<p>Lorsque les navigateurs ne comprennent pas une propriété ou une valeur CSS, ils l'ignorent. On peut donc améliorer progressivement notre disposition avec les grilles CSS. Les navigateurs qui ne prennent pas en charge les grilles ignoreront la valeur <code>grid</code> pour la propriété <code>display</code>. Une fois qu'un objet flottant devient un élément de grille, son caractère flottant est retiré (voir <a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prendre en charge les navigateurs plus anciens</a>) et la grille écrase alors la version flottante.</p>
+Lorsque les navigateurs ne comprennent pas une propriété ou une valeur CSS, ils l'ignorent. On peut donc améliorer progressivement notre disposition avec les grilles CSS. Les navigateurs qui ne prennent pas en charge les grilles ignoreront la valeur `grid` pour la propriété `display`. Une fois qu'un objet flottant devient un élément de grille, son caractère flottant est retiré (voir [Prendre en charge les navigateurs plus anciens](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)) et la grille écrase alors la version flottante.
 
-<p>Un problème persiste cependant. La propriété <code>width</code>, utilisée par les objets flottants pour afficher trois colonnes, est désormais interprétée par la grille comme étant la largeur de la piste pour la colonne (et pas la largeur du conteneur comme c'était le cas pour la disposition flottante).</p>
+Un problème persiste cependant. La propriété `width`, utilisée par les objets flottants pour afficher trois colonnes, est désormais interprétée par la grille comme étant la largeur de la piste pour la colonne (et pas la largeur du conteneur comme c'était le cas pour la disposition flottante).
 
-<p>{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}</p>
+{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}
 
-<p>Il faut une façon de retirer la largeur si <code>display: grid</code> est pris en charge. C'est là que les requêtes de fonctionnalité montrent leur force. On peut réinitialiser <code>width</code> avec la valeur <code>auto</code> si les grilles sont prises en charge.</p>
+Il faut une façon de retirer la largeur si `display: grid` est pris en charge. C'est là que les requêtes de fonctionnalité montrent leur force. On peut réinitialiser `width` avec la valeur `auto` si les grilles sont prises en charge.
 
-<p>{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}</p>
+{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}
 
-<p>Dans le scénario précédent, peu importe que IE11 ne prenne pas en charge les requêtes de fonctionnalité ou les grilles CSS : c'est la version flottante qui sera utilisée dans tous les cas où le navigateur ne prend pas en charge les grilles.</p>
+Dans le scénario précédent, peu importe que IE11 ne prenne pas en charge les requêtes de fonctionnalité ou les grilles CSS : c'est la version flottante qui sera utilisée dans tous les cas où le navigateur ne prend pas en charge les grilles.
 
-<p>Une autre façon d'écrire cette solution consiste à grouper le code utilisant la grille dans une même requête de fonctionnalité.</p>
+Une autre façon d'écrire cette solution consiste à grouper le code utilisant la grille dans une même requête de fonctionnalité.
 
-<p>{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}</p>
+{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}
 
-<p>De cette façon, on a un peu plus de code mais on peut alors tester le fonctionnement par défaut en changeant simplement le nom de la valeur. Dans l'exemple qui suit, vous pouvez ainsi alterner entre les deux solutions en changeant <code>display: grid</code> en <code>display: grip</code> (une valeur invalide et donc non prise en charge).</p>
+De cette façon, on a un peu plus de code mais on peut alors tester le fonctionnement par défaut en changeant simplement le nom de la valeur. Dans l'exemple qui suit, vous pouvez ainsi alterner entre les deux solutions en changeant `display: grid` en `display: grip` (une valeur invalide et donc non prise en charge).
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Les requêtes de fonctionnalité permettent d'utiliser des fonctionnalités récentes dans l'amélioration progressive de sites fonctionnels avec les anciens navigateurs. En destinant le code CSS aux navigateurs qui le prennent en charge, on ne risque pas d'interférences avec la disposition de base (comme nous avons pu le voir avec l'exemple précédent sur les grilles CSS).</p>
+Les requêtes de fonctionnalité permettent d'utiliser des fonctionnalités récentes dans l'amélioration progressive de sites fonctionnels avec les anciens navigateurs. En destinant le code CSS aux navigateurs qui le prennent en charge, on ne risque pas d'interférences avec la disposition de base (comme nous avons pu le voir avec l'exemple précédent sur les grilles CSS).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La règle <a href="/fr/docs/Web/CSS/@supports">@supports</a></li>
- <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Apprendre les dispositions en CSS et la prise en charge des anciens navigateurs</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">Les grilles CSS et l'amélioration progressive</a></li>
- <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Utiliser les requêtes de fonctionnalités en CSS (billet du blog Hacks en anglais)</a></li>
-</ul>
+- La règle [@supports](/fr/docs/Web/CSS/@supports)
+- [Apprendre les dispositions en CSS et la prise en charge des anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [Les grilles CSS et l'amélioration progressive](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive)
+- [Utiliser les requêtes de fonctionnalités en CSS (billet du blog Hacks en anglais)](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/)
diff --git a/files/fr/web/css/css_containment/index.md b/files/fr/web/css/css_containment/index.md
index a6869b2050..d504d38fd8 100644
--- a/files/fr/web/css/css_containment/index.md
+++ b/files/fr/web/css/css_containment/index.md
@@ -7,118 +7,122 @@ tags:
 translation_of: Web/CSS/CSS_Containment
 original_slug: Web/CSS/Compartimentation_CSS
 ---
-<p>{{CSSRef}}<br>
- L'objectif du module de spécification <em>CSS Containment</em> (pour Compartimentation CSS) consiste à améliorer les performances des pages web en permettant aux développeurs d'isoler un sous-ensemble de la page. Si le navigateur sait que cette partie est indépendante, le rendu peut être optimisé et les performances améliorées. Ce module de spécification définit une seule propriété CSS : {{cssxref("contain")}}. Dans cet article, nous verrons les objectifs principaux de cette spécification.</p>
+{{CSSRef}}
+L'objectif du module de spécification _CSS Containment_ (pour Compartimentation CSS) consiste à améliorer les performances des pages web en permettant aux développeurs d'isoler un sous-ensemble de la page. Si le navigateur sait que cette partie est indépendante, le rendu peut être optimisé et les performances améliorées. Ce module de spécification définit une seule propriété CSS : {{cssxref("contain")}}. Dans cet article, nous verrons les objectifs principaux de cette spécification.
 
-<h2 id="Exemple_simple">Exemple simple</h2>
+## Exemple simple
 
-<p>De nombreuses pages web disposent de plusieurs sections qui sont indépendantes les unes des autres. Voici une liste d'articles avec leurs titres et leurs contenus.</p>
+De nombreuses pages web disposent de plusieurs sections qui sont indépendantes les unes des autres. Voici une liste d'articles avec leurs titres et leurs contenus.
 
-<pre class="brush: html">&lt;h1&gt;Mon blog&lt;/h1&gt;
-&lt;article&gt;
-  &lt;h2&gt;Titre d'un article sympa&lt;/h2&gt;
-  &lt;p&gt;Un peu de contenu.&lt;/p&gt;
-&lt;/article&gt;
-&lt;article&gt;
-  &lt;h2&gt;Un autre titre pour un autre article&lt;/h2&gt;
-  &lt;p&gt;Un peu plus de contenu ici.&lt;/p&gt;
-&lt;/article&gt;</pre>
+```html
+<h1>Mon blog</h1>
+<article>
+  <h2>Titre d'un article sympa</h2>
+  <p>Un peu de contenu.</p>
+</article>
+<article>
+  <h2>Un autre titre pour un autre article</h2>
+  <p>Un peu plus de contenu ici.</p>
+</article>
+```
 
-<p>Pour chaque article, on applique la propriété {{cssxref("contain")}} avec la valeur <code>content</code>.</p>
+Pour chaque article, on applique la propriété {{cssxref("contain")}} avec la valeur `content`.
 
-<pre class="brush: css">article {
+```css
+article {
   contain: content;
-}</pre>
+}
+```
 
-<p>Chaque article est indépendant des autres articles de la page et on fournit <code>contain: content</code> afin d'indiquer cette indépendance au navigateur. Ce dernier peut alors prendre des décisions quant au rendu du contenu (par exemple, ne pas travailler sur le rendu d'articles qui ne sont pas sur la zone visible).</p>
+Chaque article est indépendant des autres articles de la page et on fournit `contain: content` afin d'indiquer cette indépendance au navigateur. Ce dernier peut alors prendre des décisions quant au rendu du contenu (par exemple, ne pas travailler sur le rendu d'articles qui ne sont pas sur la zone visible).
 
-<p>Si on fournit <code>contain: content</code> pour chaque <code>&lt;article&gt;</code>, lorsque de nouveaux éléments sont insérés, le navigateur comprendra qu'il n'est pas nécessaire de tout repeindre/redisposer à l'intérieur de l'arbre de l'élément. Toutefois, si <code>&lt;article&gt;</code> est mis en forme de telle façon que sa forme dépend de son contenu (ex. <code>height: auto</code>), le navigateur devra prendre en compte le redimensionnement.</p>
+Si on fournit `contain: content` pour chaque `<article>`, lorsque de nouveaux éléments sont insérés, le navigateur comprendra qu'il n'est pas nécessaire de tout repeindre/redisposer à l'intérieur de l'arbre de l'élément. Toutefois, si `<article>` est mis en forme de telle façon que sa forme dépend de son contenu (ex. `height: auto`), le navigateur devra prendre en compte le redimensionnement.
 
-<p>La valeur <code>content</code> est une valeur synthétique pour <code>contain: layout paint</code>. Elle indique au navigateur que la disposition de l'élément est complètement séparée de celle du reste de la page et que tout ce qui concerne l'élément est peint à l'intérieur de son cadre et que rien ne peut dépasser.</p>
+La valeur `content` est une valeur synthétique pour `contain: layout paint`. Elle indique au navigateur que la disposition de l'élément est complètement séparée de celle du reste de la page et que tout ce qui concerne l'élément est peint à l'intérieur de son cadre et que rien ne peut dépasser.
 
-<p>Cette information est parfois connue voire évidente pour la ou les personnes qui construisent la page. Toutefois, les navigateurs ne peuvent pas simplement deviner cette intention et partir du principe que chaque article ne débordera pas. Cette propriété permet ainsi d'expliquer la situation au navigateur afin que celui-ci puisse en tirer parti et optimiser ce qu'il peut grâce à cette hypothèse.</p>
+Cette information est parfois connue voire évidente pour la ou les personnes qui construisent la page. Toutefois, les navigateurs ne peuvent pas simplement deviner cette intention et partir du principe que chaque article ne débordera pas. Cette propriété permet ainsi d'expliquer la situation au navigateur afin que celui-ci puisse en tirer parti et optimiser ce qu'il peut grâce à cette hypothèse.
 
-<h2 id="Concepts_et_terminologie">Concepts et terminologie</h2>
+## Concepts et terminologie
 
-<p>Cette spécification ne définit qu'une seule propriété : {{cssxref("contain")}}. Les valeurs fournies à cette propriété indiquent le type de compartimentation qu'on souhaite appliquer à l'élément.</p>
+Cette spécification ne définit qu'une seule propriété : {{cssxref("contain")}}. Les valeurs fournies à cette propriété indiquent le type de compartimentation qu'on souhaite appliquer à l'élément.
 
-<h3 id="Compartimentation_de_la_disposition">Compartimentation de la disposition</h3>
+### Compartimentation de la disposition
 
-<pre class="brush: css">article {
+```css
+article {
   contain: layout;
-}</pre>
+}
+```
 
-<p>La disposition porte normalement sur l'intégralité d'un document et si on déplace un élément, c'est tout le document qui doit être reconsidéré car tout peut avoir bougé. Avec <code>contain: layout</code>, on indique au navigateur qu'il est uniquement nécessaire de vérifier cet élément et son contenu : tout ce qu'il contient n'affecte pas le reste de la page et la boîte englobante crée un contexte de formatage indépendant.</p>
+La disposition porte normalement sur l'intégralité d'un document et si on déplace un élément, c'est tout le document qui doit être reconsidéré car tout peut avoir bougé. Avec `contain: layout`, on indique au navigateur qu'il est uniquement nécessaire de vérifier cet élément et son contenu : tout ce qu'il contient n'affecte pas le reste de la page et la boîte englobante crée un contexte de formatage indépendant.
 
-<p>De plus :</p>
+De plus :
 
-<ul>
- <li>Les dispositions flottantes (avec <code>display:</code><code>float</code>) seront traitées indépendamment.</li>
- <li>Les marges ne fusionneront pas en dehors des limites du bloc englobant ainsi compartimenté</li>
- <li>Le conteneur de la disposition sera un bloc englobant pour les éléments descendants avec des positions <code>absolute</code>/<code>fixed</code>.</li>
- <li>La boîte englobante crée un contexte d'empilement et on peut donc utiliser {{cssxref("z-index")}}.</li>
-</ul>
+- Les dispositions flottantes (avec ` display:``float `) seront traitées indépendamment.
+- Les marges ne fusionneront pas en dehors des limites du bloc englobant ainsi compartimenté
+- Le conteneur de la disposition sera un bloc englobant pour les éléments descendants avec des positions `absolute`/`fixed`.
+- La boîte englobante crée un contexte d'empilement et on peut donc utiliser {{cssxref("z-index")}}.
 
-<h3 id="Compartimentation_pour_la_peinture">Compartimentation pour la peinture</h3>
+### Compartimentation pour la peinture
 
-<pre class="brush: css">article {
+```css
+article {
   contain: paint;
-}</pre>
+}
+```
 
-<p>La compartimentation avec <code>paint</code> limite/rogne la boîte jusqu'à la limite de la zone de remplissage (<em>padding</em>) de la boîte principale. Autrement dit, il ne peut pas y avoir de chevauchement visible. On a également les mêmes règles qu'avec <code>layout</code> (voir ci-avant).</p>
+La compartimentation avec `paint` limite/rogne la boîte jusqu'à la limite de la zone de remplissage (_padding_) de la boîte principale. Autrement dit, il ne peut pas y avoir de chevauchement visible. On a également les mêmes règles qu'avec `layout` (voir ci-avant).
 
-<p>De plus, lorsque la boîte englobante est hors de l'écran, le navigateur n'a pas besoin de peindre ses éléments (car ceux-ci sont contenus dans cette boîte au sens géométrique).</p>
+De plus, lorsque la boîte englobante est hors de l'écran, le navigateur n'a pas besoin de peindre ses éléments (car ceux-ci sont contenus dans cette boîte au sens géométrique).
 
-<h3 id="Compartimentation_pour_le_dimensionnement">Compartimentation pour le dimensionnement</h3>
+### Compartimentation pour le dimensionnement
 
-<pre class="brush: css">article {
+```css
+article {
   contain: size;
-}</pre>
+}
+```
 
-<p>La compartimentation du dimensionnement, utilisée seule, n'offre pas un grand intérêt quant aux performances. Cette valeur signifie que la taille des éléments fils ne doit pas affecter la taille de l'élément ciblé — sa taille est calculée comme si l'élément n'avait pas de fils.</p>
+La compartimentation du dimensionnement, utilisée seule, n'offre pas un grand intérêt quant aux performances. Cette valeur signifie que la taille des éléments fils ne doit pas affecter la taille de l'élément ciblé — sa taille est calculée comme si l'élément n'avait pas de fils.
 
-<p>Si on active <code>contain: size</code>, il faut alors définir la taille de l'élément sur lequel on l'applique. Sinon, dans la plupart des cas, l'élément aura des dimensions nulles.</p>
+Si on active `contain: size`, il faut alors définir la taille de l'élément sur lequel on l'applique. Sinon, dans la plupart des cas, l'élément aura des dimensions nulles.
 
-<h3 id="Compartimentation_pour_le_style">Compartimentation pour le style</h3>
+### Compartimentation pour le style
 
-<pre class="brush: css">article {
+```css
+article {
   contain: style;
-}</pre>
+}
+```
 
-<p>Malgré son nom, cette valeur ne fournit pas un style compartimenté comme on pourrait l'avoir avec un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM"><em>Shadow</em> DOM</a>. Cette valeur sert principlament pour les <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteurs CSS</a> qui pourraient changer sur un élément et affecter le reste de l'arborescence.</p>
+Malgré son nom, cette valeur ne fournit pas un style compartimenté comme on pourrait l'avoir avec un [_Shadow_ DOM](/fr/docs/Web/Web_Components/Using_shadow_DOM). Cette valeur sert principlament pour les [compteurs CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS) qui pourraient changer sur un élément et affecter le reste de l'arborescence.
 
-<p>En utilisant <code>contain: style</code>, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.</p>
+En utilisant `contain: style`, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.
 
-<div class="note">
-<p><strong>Note :</strong> La valeur <code>style</code> est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).</p>
-</div>
+> **Note :** La valeur `style` est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).
 
-<h3 id="Valeurs_spéciales">Valeurs spéciales</h3>
+### Valeurs spéciales
 
-<p>La propriété <code>contain</code> possède deux valeurs spéciales :</p>
+La propriété `contain` possède deux valeurs spéciales :
 
-<ul>
- <li><code>content</code></li>
- <li><code>strict</code></li>
-</ul>
+- `content`
+- `strict`
 
-<p>La première (vue dans le premier exemple) est un synonyme pour la conjonction de <code>layout</code> et <code>paint</code>. La spécification décrit cette valeur comme pouvant « raisonnablement être appliquée largement de façon saine ». Elle n'applique pas la compartimentation pour le dimensionnement (<code>size</code>) donc on ne risque pas d'avoir une boîte avec une taille nulle en raison de la taille de ses enfants.</p>
+La première (vue dans le premier exemple) est un synonyme pour la conjonction de `layout` et `paint`. La spécification décrit cette valeur comme pouvant « raisonnablement être appliquée largement de façon saine ». Elle n'applique pas la compartimentation pour le dimensionnement (`size`) donc on ne risque pas d'avoir une boîte avec une taille nulle en raison de la taille de ses enfants.
 
-<p>Pour obtenir la compartimentation la plus forte, on utilisera <code>contain: strict</code> qui est synonyme de <code>contain: size layout paint</code> voire on ajoutera ensuite la compartimentation du style pour les navigateurs qui la prennent en charge :</p>
+Pour obtenir la compartimentation la plus forte, on utilisera `contain: strict` qui est synonyme de `contain: size layout paint` voire on ajoutera ensuite la compartimentation du style pour les navigateurs qui la prennent en charge :
 
-<pre class="brush: css">contain: strict;
-contain: strict style;</pre>
+```css
+contain: strict;
+contain: strict style;
+```
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+### Propriétés CSS
 
-<ul>
- <li>{{cssxref("contain")}}</li>
-</ul>
+- {{cssxref("contain")}}
 
-<h2 id="Ressources_externes">Ressources externes</h2>
+## Ressources externes
 
-<ul>
- <li><a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">Une introduction à la compartimentation CSS</a></li>
-</ul>
+- [Une introduction à la compartimentation CSS](https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/)
diff --git a/files/fr/web/css/css_counter_styles/index.md b/files/fr/web/css/css_counter_styles/index.md
index c09546d721..89522fbb3a 100644
--- a/files/fr/web/css/css_counter_styles/index.md
+++ b/files/fr/web/css/css_counter_styles/index.md
@@ -8,73 +8,52 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Counter_Styles
 ---
-<div>{{cssref}}</div>
+{{cssref}}
 
-<p><em><strong>CSS Counter Styles</strong></em> est un module CSS qui permet de définir ses propres styles pour les compteurs utilisés dans les listes numérotées.</p>
+**_CSS Counter Styles_** est un module CSS qui permet de définir ses propres styles pour les compteurs utilisés dans les listes numérotées.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("counter-increment")}}</li>
- <li>{{cssxref("counter-reset")}}</li>
-</ul>
+- {{cssxref("counter-increment")}}
+- {{cssxref("counter-reset")}}
 
-<h3 id="Règles">Règles @</h3>
+### Règles @
 
-<ul>
-  <li>{{cssxref("@counter-style")}}
-  <ul>
-   <li>{{cssxref("@counter-style/system","system")}}</li>
-   <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li>
-   <li>{{cssxref("@counter-style/negative", "negative")}}</li>
-   <li>{{cssxref("@counter-style/prefix", "prefix")}}</li>
-   <li>{{cssxref("@counter-style/suffix", "suffix")}}</li>
-   <li>{{cssxref("@counter-style/range", "range")}}</li>
-   <li>{{cssxref("@counter-style/pad", "pad")}}</li>
-   <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li>
-   <li>{{cssxref("@counter-style/fallback", "fallback")}}</li>
-  </ul>
-  </li>
-</ul>
+- {{cssxref("@counter-style")}}
 
-<h2 id="Guides">Guides</h2>
+  - {{cssxref("@counter-style/system","system")}}
+  - {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
+  - {{cssxref("@counter-style/negative", "negative")}}
+  - {{cssxref("@counter-style/prefix", "prefix")}}
+  - {{cssxref("@counter-style/suffix", "suffix")}}
+  - {{cssxref("@counter-style/range", "range")}}
+  - {{cssxref("@counter-style/pad", "pad")}}
+  - {{cssxref("@counter-style/speak-as", "speak-as")}}
+  - {{cssxref("@counter-style/fallback", "fallback")}}
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Manipuler les compteurs CSS</a></dt>
- <dd>Cet article décrit comment utiliser les compteurs CSS afin de numéroter des éléments HTML et de réaliser des comptages complexes.</dd>
-</dl>
+## Guides
 
-<h2 id="Spécifications">Spécifications</h2>
+- [Manipuler les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+  - : Cet article décrit comment utiliser les compteurs CSS afin de numéroter des éléments HTML et de réaliser des comptages complexes.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
 
-<h3 id="counter-style"><code>@counter-style</code></h3>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.at-rules.counter-style")}}</p>
+### `@counter-style`
 
-<h3 id="counter-increment"><code>counter-increment</code></h3>
+{{Compat("css.at-rules.counter-style")}}
 
-<p>{{Compat("css.properties.counter-increment")}}</p>
+### `counter-increment`
 
-<h3 id="counter-reset"><code>counter-reset</code></h3>
+{{Compat("css.properties.counter-increment")}}
 
-<p>{{Compat("css.properties.counter-reset")}}</p>
+### `counter-reset`
+
+{{Compat("css.properties.counter-reset")}}
diff --git a/files/fr/web/css/css_device_adaptation/index.md b/files/fr/web/css/css_device_adaptation/index.md
index 7044575f90..b89683a1f9 100644
--- a/files/fr/web/css/css_device_adaptation/index.md
+++ b/files/fr/web/css/css_device_adaptation/index.md
@@ -6,39 +6,24 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Device_Adaptation
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong>CSS Device Adapation</strong> est un module CSS qui permet de définir les dimensions, le facteur d'agrandissement et l'orientation de la zone d'affichage (<em>viewport</em>).</p>
+**CSS Device Adapation** est un module CSS qui permet de définir les dimensions, le facteur d'agrandissement et l'orientation de la zone d'affichage (_viewport_).
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Règles">Règles @</h3>
+### Règles @
 
-<ul>
- <li>{{cssxref("@viewport")}}</li>
-</ul>
+- {{cssxref("@viewport")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Device")}}</td>
-   <td>{{Spec2("CSS3 Device")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | État                             | Commentaires         |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("CSS3 Device")}} | {{Spec2("CSS3 Device")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="viewport"><code>@viewport</code></h3>
+### `@viewport`
 
-<p>{{Compat("css.at-rules.viewport")}}</p>
+{{Compat("css.at-rules.viewport")}}
diff --git a/files/fr/web/css/css_display/index.md b/files/fr/web/css/css_display/index.md
index 18278b09b9..de550226e9 100644
--- a/files/fr/web/css/css_display/index.md
+++ b/files/fr/web/css/css_display/index.md
@@ -8,102 +8,71 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Display
 ---
-<div>{{CSSRef}}</div>
-
-<p><strong>L'affichage CSS</strong> (<em>CSS Display) </em>est un module CSS qui définit la façon dont l'arbre des boîtes pour la mise en forme est généré à partir de l'arbre des éléments du document et qui définit les propriétés qui le contrôlent.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
-
-<ul>
- <li>{{cssxref("display")}}</li>
-</ul>
-
-<h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3>
-
-<ul>
- <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
- <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
- <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
- <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
- <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
- <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<h3 id="Disposition_en_flux_(display_block_display_inline)">Disposition en flux (<code>display: block</code>, <code>display: inline</code>)</h3>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Les dispositions de bloc et en ligne dans le flux normal</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">La disposition en flux et les dépassements</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">La disposition en flux et les modes d'écriture</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Explications sur les contextes de formatage</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">Être ou non dans le flux</a></li>
-</ul>
-
-<h3 id="Les_boîtes_flexibles_(display_flex)">Les boîtes flexibles (<code>display: flex</code>)</h3>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox">Concepts de base des boîtes flexibles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des objets flexibles le long de l'axe principal</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins"><em>Mixins</em> Flexbox pour les différents navigateurs</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles">Maîtriser le passage à la ligne des objets flexibles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles">Ordonner les objets flexibles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions">Les relations entre les boîtes flexibles et les autres méthodes de disposition</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox">La rétrocompatiblité des boîtes flexibles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox">Les cas d'usage type pour les boîtes flexibles</a></li>
-</ul>
-
-<h3 id="Les_grilles_CSS_(display_grid)">Les grilles CSS (<code>display: grid</code>)</h3>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Concepts de base des grilles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">Les relations entre les grilles et les autres méthodes de disposition</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Le placement sur les lignes</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Les modèles de zone de grilles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille">Les dispositions utilisant les lignes nommées</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">Le placement automatique dans les grilles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes dans les grilles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles, les valeurs logiques et les modes d'écriture</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">Les grilles et l'accessibilité</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">Les grilles et l'amélioration progressive</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS">Réaliser des dispositions courantes à l'aide de grilles</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td>
-   <td>{{Spec2('CSS3 Display')}}</td>
-   <td>Ajout des valeurs <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code> et de la syntaxe avec plusieurs mots-clés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Ajout des valeurs pour les tableaux et ajout de <code>inline-block</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Spécification initiale. Valeurs de base : <code>none</code>, <code>block</code>, <code>inline</code> et <code>list-item</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>En plus du module de spécification <em>CSS Display</em> de niveau 3, d'autres modules de spécifications définissent le comportement à avoir selon les différentes valeurs de <code>display</code>.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.display", 10)}}</p>
+{{CSSRef}}
+
+**L'affichage CSS** (_CSS Display)_ est un module CSS qui définit la façon dont l'arbre des boîtes pour la mise en forme est généré à partir de l'arbre des éléments du document et qui définit les propriétés qui le contrôlent.
+
+## Référence
+
+### Propriétés CSS
+
+- {{cssxref("display")}}
+
+### Types de donnée CSS
+
+- {{CSSxRef("&lt;display-outside&gt;")}}
+- {{CSSxRef("&lt;display-inside&gt;")}}
+- {{CSSxRef("&lt;display-listitem&gt;")}}
+- {{CSSxRef("&lt;display-box&gt;")}}
+- {{CSSxRef("&lt;display-internal&gt;")}}
+- {{CSSxRef("&lt;display-legacy&gt;")}}
+
+## Guides
+
+### Disposition en flux (`display: block`, `display: inline`)
+
+- [Les dispositions de bloc et en ligne dans le flux normal](/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)
+- [La disposition en flux et les dépassements](/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow)
+- [La disposition en flux et les modes d'écriture](/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes)
+- [Explications sur les contextes de formatage](/fr/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained)
+- [Être ou non dans le flux](/fr/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow)
+
+### Les boîtes flexibles (`display: flex`)
+
+- [Concepts de base des boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox)
+- [Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible)
+- [Contrôler les proportions des objets flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal)
+- [_Mixins_ Flexbox pour les différents navigateurs](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins)
+- [Maîtriser le passage à la ligne des objets flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles)
+- [Ordonner les objets flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles)
+- [Les relations entre les boîtes flexibles et les autres méthodes de disposition](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions)
+- [La rétrocompatiblité des boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox)
+- [Les cas d'usage type pour les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox)
+
+### Les grilles CSS (`display: grid`)
+
+- [Concepts de base des grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base)
+- [Les relations entre les grilles et les autres méthodes de disposition](/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition)
+- [Le placement sur les lignes](/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS)
+- [Les modèles de zone de grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille)
+- [Les dispositions utilisant les lignes nommées](/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille)
+- [Le placement automatique dans les grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS)
+- [L'alignement des boîtes dans les grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)
+- [Les grilles, les valeurs logiques et les modes d'écriture](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture)
+- [Les grilles et l'accessibilité](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité)
+- [Les grilles et l'amélioration progressive](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive)
+- [Réaliser des dispositions courantes à l'aide de grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS)
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires                                                                                           |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS3 Display', '#the-display-properties', 'display')}} | {{Spec2('CSS3 Display')}} | Ajout des valeurs `run-in`, `flow`, `flow-root`, `contents` et de la syntaxe avec plusieurs mots-clés. |
+| {{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}     | {{Spec2('CSS2.1')}}         | Ajout des valeurs pour les tableaux et ajout de `inline-block`.                                        |
+| {{SpecName('CSS1', '#display', 'display')}}                                 | {{Spec2('CSS1')}}         | Spécification initiale. Valeurs de base : `none`, `block`, `inline` et `list-item`.                    |
+
+En plus du module de spécification _CSS Display_ de niveau 3, d'autres modules de spécifications définissent le comportement à avoir selon les différentes valeurs de `display`.
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.display", 10)}}
diff --git a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
index 228aad4a9b..b8eaaeb065 100644
--- a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
+++ b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
@@ -11,209 +11,195 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Contain
 original_slug: >-
   Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.</p>
+Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.
 
-<p>Afin de centrer notre boîte, nous allons utiliser la propriété <code>align-items</code> afin d'aligner l'objet sur l'axe secondaire (<em>cross axis</em> en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété <code>justify-content</code> est quant à elle utilisée pour aligner l'objet sur l'axe principal (<em>main axis</em> en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).</p>
+Afin de centrer notre boîte, nous allons utiliser la propriété `align-items` afin d'aligner l'objet sur l'axe secondaire (_cross axis_ en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété `justify-content` est quant à elle utilisée pour aligner l'objet sur l'axe principal (_main axis_ en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).
 
-<p><img alt="Un élément contenant une autre boîte centrée à l'intérieur" src="align1.png"></p>
+![Un élément contenant une autre boîte centrée à l'intérieur](align1.png)
 
-<p> </p>
 
-<p>Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.
 
-<h2 id="Les_propriétés_responsables_de_l'alignement">Les propriétés responsables de l'alignement</h2>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}
 
-<p>Voici les propriétés que nous étudierons dans ce guide :</p>
+## Les propriétés responsables de l'alignement
 
-<ul>
- <li>{{cssxref("justify-content")}} — contrôle l'alignement de tous les objets sur l'axe principal.</li>
- <li>{{cssxref("align-items")}} — contrôle l'alignement de tous les objets sur l'axe secondaire.</li>
- <li>{{cssxref("align-self")}} — contrôle l'alignement d'un objet flexible donné le long de l'axe secondaire.</li>
- <li>{{cssxref("align-content")}} — contrôle l'espace entre les lignes flexibles sur l'axe secondaire.</li>
-</ul>
+Voici les propriétés que nous étudierons dans ce guide :
 
-<p>Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.</p>
+- {{cssxref("justify-content")}} — contrôle l'alignement de tous les objets sur l'axe principal.
+- {{cssxref("align-items")}} — contrôle l'alignement de tous les objets sur l'axe secondaire.
+- {{cssxref("align-self")}} — contrôle l'alignement d'un objet flexible donné le long de l'axe secondaire.
+- {{cssxref("align-content")}} — contrôle l'espace entre les lignes flexibles sur l'axe secondaire.
 
-<div class="note">
-<p><strong>Note :</strong> Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.</p>
-</div>
+Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.
 
-<h2 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h2>
+> **Note :** Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/). Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.
 
-<p>Les propriétés <code>align-items</code> et <code>align-self</code> permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.</p>
+## L'axe secondaire (_cross axis_)
 
-<p>Prenons un exemple simple : nous ajoutons <code>display: flex</code> à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.</p>
+Les propriétés `align-items` et `align-self` permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.
 
-<p><img alt="Trois objets dont un avec un texte plus long qui le rend plus grand que les autres" src="align2.png"></p>
+Prenons un exemple simple : nous ajoutons `display: flex` à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.
 
-<p><img alt="Trois objets étirés pour mesurer 200 pixels de haut" src="align3.png"></p>
+![Trois objets dont un avec un texte plus long qui le rend plus grand que les autres](align2.png)
 
-<p>Les éléments obtiennent la même hauteur à cause de la valeur initiale de <code>align-items</code> qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est <code>stretch</code> (qui indique que les objets du conteneur doivent être étirés sur l'axe).</p>
+![Trois objets étirés pour mesurer 200 pixels de haut](align3.png)
 
-<p>Voici les valeurs disponibles pour aligner les objets :</p>
+Les éléments obtiennent la même hauteur à cause de la valeur initiale de `align-items` qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est `stretch` (qui indique que les objets du conteneur doivent être étirés sur l'axe).
 
-<ul>
- <li><code>align-items: flex-start</code></li>
- <li><code>align-items: flex-end</code></li>
- <li><code>align-items: center</code></li>
- <li><code>align-items: stretch</code></li>
- <li><code>align-items: baseline</code></li>
-</ul>
+Voici les valeurs disponibles pour aligner les objets :
 
-<p>Dans l'exemple qui suit, la valeur d'<code>align-items</code> est <code>stretch</code>. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.</p>
+- `align-items: flex-start`
+- `align-items: flex-end`
+- `align-items: center`
+- `align-items: stretch`
+- `align-items: baseline`
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+Dans l'exemple qui suit, la valeur d'`align-items` est `stretch`. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.
 
-<h3 id="Aligner_un_objet_avec_align-self">Aligner un objet avec <code>align-self</code></h3>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}}
 
-<p>La propriété <code>align-items</code> définit la valeur de la propriété <code>align-self</code> pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété <code>align-self</code> de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété <code>align-self</code> prend en charge les mêmes valeurs que <code>align-items</code> ainsi qu'un mot-clé <code>auto</code> qui reprendra la valeur définie sur le conteneur flexible.</p>
+### Aligner un objet avec `align-self`
 
-<p>Dans le prochain exemple, le conteneur flexible a <code>align-items: flex-start</code>, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur <code>first-child</code> afin de cibler le premier élément fils pour lequel on indique <code>align-self: stretch</code> ; un autre élément a été sélectionné via la classe <code>selected</code> et est paramétré avec <code>align-self: </code><code>center</code>. Vous pouvez modifier la valeur de <code>align-items</code> ou changer les valeurs d'<code>align-self</code> sur les éléments afin d'observer le fonctionnement.</p>
+La propriété `align-items` définit la valeur de la propriété `align-self` pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété `align-self` de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété `align-self` prend en charge les mêmes valeurs que `align-items` ainsi qu'un mot-clé `auto` qui reprendra la valeur définie sur le conteneur flexible.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p>
+Dans le prochain exemple, le conteneur flexible a `align-items: flex-start`, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur `first-child` afin de cibler le premier élément fils pour lequel on indique `align-self: stretch` ; un autre élément a été sélectionné via la classe `selected` et est paramétré avec ` align-self: ``center`. Vous pouvez modifier la valeur de `align-items` ou changer les valeurs d'`align-self` sur les éléments afin d'observer le fonctionnement.
 
-<h3 id="Changer_d'axe_principal">Changer d'axe principal</h3>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}
 
-<p>Jusqu'à présent, les exemples fonctionnaient avec <code>flex-direction</code> valant <code>row</code> et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.</p>
+### Changer d'axe principal
 
-<p><img alt="Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical.." src="align4.png"></p>
+Jusqu'à présent, les exemples fonctionnaient avec `flex-direction` valant `row` et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.
 
-<p>Si on passe <code>flex-direction</code> à <code>column</code>, <code>align-items</code> et <code>align-self</code> aligneront les éléments à gauche et à droite.</p>
+![Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical..](align4.png)
 
-<p><img alt="Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal." src="align5.png"></p>
+Si on passe `flex-direction` à `column`, `align-items` et `align-self` aligneront les éléments à gauche et à droite.
 
-<p>Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que <code>flex-direction</code> vaut ici <code>column</code>.</p>
+![Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal.](align5.png)
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}</p>
+Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que `flex-direction` vaut ici `column`.
 
-<h2 id="Aligner_le_contenu_sur_l'axe_secondaire_align-content">Aligner le contenu sur l'axe secondaire : <code>align-content</code></h2>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}
 
-<p>Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété <code>align-content</code> afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">le groupement des lignes flexibles</a>.</p>
+## Aligner le contenu sur l'axe secondaire : `align-content`
 
-<p>Afin qu'<code>align-content</code> puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.</p>
+Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété `align-content` afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme [le groupement des lignes flexibles](https://drafts.csswg.org/css-flexbox/#align-content-property).
 
-<p>La propriété <code>align-content</code> prend les valeurs suivantes :</p>
+Afin qu'`align-content` puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.
 
-<ul>
- <li><code>align-content: flex-start</code></li>
- <li><code>align-content: flex-end</code></li>
- <li><code>align-content: center</code></li>
- <li><code>align-content: space-between</code></li>
- <li><code>align-content: space-around</code></li>
- <li><code>align-content: stretch</code></li>
- <li><code>align-content: space-evenly</code> (cette valeur n'est pas définie dans le module de spécification Flexbox)</li>
-</ul>
+La propriété `align-content` prend les valeurs suivantes :
 
-<p>Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. <code>align-content</code> vaut <code>space-between</code> ce qui signifie que l'espace disponible sera réparti <em>entre</em> les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.</p>
+- `align-content: flex-start`
+- `align-content: flex-end`
+- `align-content: center`
+- `align-content: space-between`
+- `align-content: space-around`
+- `align-content: stretch`
+- `align-content: space-evenly` (cette valeur n'est pas définie dans le module de spécification Flexbox)
 
-<p>Vous pouvez modifier la valeur de <code>align-content</code> afin d'observer comment cette propriété fonctionne.</p>
+Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. `align-content` vaut `space-between` ce qui signifie que l'espace disponible sera réparti _entre_ les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+Vous pouvez modifier la valeur de `align-content` afin d'observer comment cette propriété fonctionne.
 
-<p>Là encore, on peut passer avec <code>flex-direction: column</code> afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.</p>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}}
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+Là encore, on peut passer avec `flex-direction: column` afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.
 
-<div class="note">
-<p><strong>Note :</strong> La valeur <code>space-evenly</code> n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.</p>
-</div>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}
 
-<p>Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.</p>
+> **Note :** La valeur `space-evenly` n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.
 
-<h2 id="Aligner_le_contenu_sur_l'axe_principal">Aligner le contenu sur l'axe principal</h2>
+Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.
 
-<p>Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : <code>justify-content</code>. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, <code>justify-content</code> on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.</p>
+## Aligner le contenu sur l'axe principal
 
-<p>Dans l'exemple initial avec <code>display: flex</code> appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de <code>justify-content</code> qui est <code>flex-start</code>. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.</p>
+Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : `justify-content`. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, `justify-content` on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.
 
-<p><img alt="Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments." src="align6.png"></p>
+Dans l'exemple initial avec `display: flex` appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de `justify-content` qui est `flex-start`. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.
 
-<p>La propriété <code>justify-content</code> prend en charge les mêmes valeurs que <code>align-content</code>.</p>
+![Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments.](align6.png)
 
-<ul>
- <li><code>justify-content: flex-start</code></li>
- <li><code>justify-content: flex-end</code></li>
- <li><code>justify-content: center</code></li>
- <li><code>justify-content: space-between</code></li>
- <li><code>justify-content: space-around</code></li>
- <li><code>justify-content: stretch</code></li>
- <li><code>justify-content: space-evenly</code> (ce mot-clé n'est pas défini dans la spécification CSS sur les boîtes flexibles)</li>
-</ul>
+La propriété `justify-content` prend en charge les mêmes valeurs que `align-content`.
 
-<p>Dans le prochain exemple, <code>justify-content</code> vaut <code>space-between</code>. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.</p>
+- `justify-content: flex-start`
+- `justify-content: flex-end`
+- `justify-content: center`
+- `justify-content: space-between`
+- `justify-content: space-around`
+- `justify-content: stretch`
+- `justify-content: space-evenly` (ce mot-clé n'est pas défini dans la spécification CSS sur les boîtes flexibles)
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p>
+Dans le prochain exemple, `justify-content` vaut `space-between`. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.
 
-<p>Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car <code>flex-direction</code> est paramétré avec la valeur <code>column</code>, <code>justify-content</code> distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.</p>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}</p>
+Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car `flex-direction` est paramétré avec la valeur `column`, `justify-content` distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.
 
-<h3 id="L'alignement_et_les_modes_d'écriture">L'alignement et les modes d'écriture</h3>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}
 
-<p>Rappelons ici qu'avec ces méthodes d'alignement, <code>flex-start</code> et <code>flex-end</code> respectent le mode d'écriture utilisé. Si on utilise <code>justify-content</code> avec la valeur <code>start</code> pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.</p>
+### L'alignement et les modes d'écriture
 
-<p><img alt="Trois éléments alignés sur la gauche" src="basics5.png"></p>
+Rappelons ici qu'avec ces méthodes d'alignement, `flex-start` et `flex-end` respectent le mode d'écriture utilisé. Si on utilise `justify-content` avec la valeur `start` pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.
 
-<p>Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.</p>
+![Trois éléments alignés sur la gauche](basics5.png)
 
-<p><img alt="Trois éléments alignés sur la droite" src="basics6.png"></p>
+Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.
 
-<p>Dans l'exemple qui suit, on indique explicitement la valeur <code>rtl</code> pour la propriété <code>display</code> afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de <code>justify-content</code> afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.</p>
+![Trois éléments alignés sur la droite](basics6.png)
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+Dans l'exemple qui suit, on indique explicitement la valeur `rtl` pour la propriété `display` afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de `justify-content` afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.
 
-<h2 id="L'alignement_et_la_propriété_flex-direction">L'alignement et la propriété <code>flex-direction</code></h2>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}}
 
-<p>La ligne de début sera également modifiée si on change la valeur de la propriété <code>flex-direction</code>, par exemple en utilisant <code>row-reverse</code> à la place de <code>row</code>.</p>
+## L'alignement et la propriété `flex-direction`
 
-<p>Dans le prochain exemple, on utilise <code>flex-direction: row-reverse</code> et <code>justify-content: flex-end</code>. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de <code>flex-direction: row-reverse</code> à <code>flex-direction: row</code>. Vous verrez que les éléments sont désormais groupés à droite.</p>
+La ligne de début sera également modifiée si on change la valeur de la propriété `flex-direction`, par exemple en utilisant `row-reverse` à la place de `row`.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+Dans le prochain exemple, on utilise `flex-direction: row-reverse` et `justify-content: flex-end`. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de `flex-direction: row-reverse` à `flex-direction: row`. Vous verrez que les éléments sont désormais groupés à droite.
 
-<p>Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. <code>flex-start</code> correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.</p>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}}
 
-<p><img alt="Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite" src="align8.png"></p>
+Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. `flex-start` correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.
 
-<p>On peut changer l'axe avec <code>flex-direction: column</code>. Dans ce cas, <code>flex-start</code> correspondra à l'emplacement du début du premier paragraphe d'un texte.</p>
+![Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite](align8.png)
 
-<p><img alt="Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas" src="align10.png"></p>
+On peut changer l'axe avec `flex-direction: column`. Dans ce cas, `flex-start` correspondra à l'emplacement du début du premier paragraphe d'un texte.
 
-<p>Si on utilise <code>flex-direction</code> avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). <code>flex-start</code> correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.</p>
+![Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas](align10.png)
 
-<p><img alt="Un diagramme illustrant la ligne de début à droite et celle de fin à gauche" src="align9.png"></p>
+Si on utilise `flex-direction` avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). `flex-start` correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.
 
-<p><img alt="Un diagramme illustrant la ligne de début en bas et celle de fin en haut" src="align11.png"></p>
+![Un diagramme illustrant la ligne de début à droite et celle de fin à gauche](align9.png)
 
-<h2 id="Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour aligner sur l'axe principal</h2>
+![Un diagramme illustrant la ligne de début en bas et celle de fin en haut](align11.png)
 
-<p>Il n'existe pas de propriété <code>justify-items</code> ou <code>justify-self</code> qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.</p>
+## Utiliser les marges automatiques pour aligner sur l'axe principal
 
-<p>Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme <code>justify-self</code>… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier <code>justify-self</code> sur l'élément <em>d</em>, cela changerait également l'alignement de l'élément <em>e</em> qui suit, ce qui pourrait ou non être voulu.</p>
+Il n'existe pas de propriété `justify-items` ou `justify-self` qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.
 
-<p><img alt="Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite." src="align7.png"></p>
+Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme `justify-self`… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier `justify-self` sur l'élément _d_, cela changerait également l'alignement de l'élément _e_ qui suit, ce qui pourrait ou non être voulu.
 
-<p>Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant <code>margin-left: auto</code>. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.</p>
+![Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite.](align7.png)
 
-<p>Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe <code>push</code> possède la déclaration <code>margin-left: auto</code>. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.</p>
+Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant `margin-left: auto`. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe `push` possède la déclaration `margin-left: auto`. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.
 
-<h2 id="Les_prochaines_fonctionnalités_pour_l'alignement_et_les_boîtes_flexibles">Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles</h2>
+{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}}
 
-<p>Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur <code>space-evenly</code> pour les propriétés <code>align-content</code> et <code>justify-content</code>.</p>
+## Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles
 
-<p>Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés <code>column-gap</code> et <code>row-gap</code> décrites dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">le module de grille CSS (<em>CSS Grid</em>)</a>. L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés <code>gap</code> pour les dispositions flexibles.</p>
+Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur `space-evenly` pour les propriétés `align-content` et `justify-content`.
 
-<p>Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (<em>CSS Grid Layout</em>). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">grâce à cet article</a>. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : <em><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a></em>.</p>
+Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés `column-gap` et `row-gap` décrites dans [le module de grille CSS (_CSS Grid_)](/fr/docs/Web/CSS/CSS_Grid_Layout). L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés `gap` pour les dispositions flexibles.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (_CSS Grid Layout_). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille [grâce à cet article](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout). Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : _[Box Alignment Cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment)_.
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module<em>CSS Box Alignment</em></a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">L'alignement des boîtes avec une grille CSS</a></li>
-</ul>
+## Voir aussi
+
+- [Le module*CSS Box Alignment*](/fr/docs/Web/CSS/CSS_Box_Alignment)
+- [L'alignement des boîtes avec Flexbox](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)
+- [L'alignement des boîtes avec une grille CSS](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout)
diff --git a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md
index 4583fc1934..62be3b5fb5 100644
--- a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md
+++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md
@@ -8,44 +8,37 @@ tags:
 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins
 original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Voici un ensemble de <em>mixins</em> pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.</p>
+Voici un ensemble de _mixins_ pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.
 
-<p>Dans ces <em>mixins</em>, on utilisera :</p>
+Dans ces _mixins_, on utilisera :
 
-<ul>
- <li>Des <em>fallbacks</em> avec l'ancienne syntaxe 'box' (Firefox et les anciens WebKit) et les syntaxes préfixées (IE10, les navigateurs WebKit sans ajout de <code>flex</code>)</li>
- <li>La syntaxe finale standard (Firefox, Safari, Chrome, IE11, Opera)</li>
-</ul>
+- Des _fallbacks_ avec l'ancienne syntaxe 'box' (Firefox et les anciens WebKit) et les syntaxes préfixées (IE10, les navigateurs WebKit sans ajout de `flex`)
+- La syntaxe finale standard (Firefox, Safari, Chrome, IE11, Opera)
 
-<p>Ces <em>mixins</em> ont été inspirés par : <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></p>
+Ces _mixins_ ont été inspirés par : [https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/](https://dev.opera.com/articles/advanced-cross-browser-flexbox/)
 
-<p>Et les articles suivants ont été d'une aide précieuse :</p>
+Et les articles suivants ont été d'une aide précieuse :
 
-<ul>
- <li><a href="https://w3.org/tr/css3-flexbox/">https://w3.org/tr/css3-flexbox/</a></li>
- <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li>
- <li><a href="https://css-tricks.com/using-flexbox/">https://css-tricks.com/using-flexbox/</a></li>
- <li><a href="https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li>
- <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Un guide complet sur Flexbox | CSS-Tricks</a></li>
- <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Un guide visuel pour les flexbox CSS3 : Flexbox Playground</a></li>
-</ul>
+- <https://w3.org/tr/css3-flexbox/>
+- <https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx>
+- <https://css-tricks.com/using-flexbox/>
+- <https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/>
+- [Un guide complet sur Flexbox | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [Un guide visuel pour les flexbox CSS3 : Flexbox Playground](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)
 
-<div class="note">
-<p><strong>Note :</strong> Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.</p>
-</div>
+> **Note :** Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.
 
-<h3 id="Les_conteneurs_flexibles">Les conteneurs flexibles</h3>
+### Les conteneurs flexibles
 
-<p>En utilisant la valeur <code>flex</code> pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur <code>inline-flex</code> permet quant à elle de générer un conteneur flexible en ligne (<em>inline</em>).</p>
+En utilisant la valeur `flex` pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur `inline-flex` permet quant à elle de générer un conteneur flexible en ligne (_inline_).
 
-<ul>
- <li>Valeurs : <code>flex</code> | <code>inline-flex</code></li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#flex-containers">Spécifications</a></li>
-</ul>
+- Valeurs : `flex` | `inline-flex`
+- [Spécifications](https://drafts.csswg.org/css-flexbox/#flex-containers)
 
-<pre class="brush: css">@mixin flexbox {
+```css
+@mixin flexbox {
   display: -webkit-box;
   display: -moz-box;
   display: -webkit-flex;
@@ -54,9 +47,11 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
 }
 
 // Exemple d'utilisation
-%flexbox { @include flexbox; }</pre>
+%flexbox { @include flexbox; }
+```
 
-<pre class="brush: css">@mixin inline-flex {
+```css
+@mixin inline-flex {
   display: -webkit-inline-box;
   display: -moz-inline-box;
   display: -webkit-inline-flex;
@@ -64,18 +59,18 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
   display: inline-flex;
 }
 
-%inline-flex { @include inline-flex; }</pre>
+%inline-flex { @include inline-flex; }
+```
 
-<h3 id="Direction_des_boîtes_flexibles">Direction des boîtes flexibles</h3>
+### Direction des boîtes flexibles
 
-<p>La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.</p>
+La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.
 
-<ul>
- <li>Valeurs possibles : <code>row</code> (la valeur par défaut)| <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">Spécification</a></li>
-</ul>
+- Valeurs possibles : `row` (la valeur par défaut)| `row-reverse` | `column` | `column-reverse`
+- [Spécification](https://drafts.csswg.org/css-flexbox/#flex-direction-property)
 
-<pre class="brush: css">@mixin flex-direction($value: row) {
+```css
+@mixin flex-direction($value: row) {
   @if $value == row-reverse {
     -webkit-box-direction: reverse;
     -webkit-box-orient: horizontal;
@@ -103,18 +98,18 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
 }
 
 // Version plus courte :
-@mixin flex-dir($args...) { @include flex-direction($args...); }</pre>
+@mixin flex-dir($args...) { @include flex-direction($args...); }
+```
 
-<h3 id="flex-wrap"><code>flex-wrap</code></h3>
+### `flex-wrap`
 
-<p>La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).</p>
+La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).
 
-<ul>
- <li>Valeurs possibles : <code>nowrap</code> (la valeur par défaut)| <code>wrap</code> | <code>wrap-reverse</code></li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">Spécification</a></li>
-</ul>
+- Valeurs possibles : `nowrap` (la valeur par défaut)| `wrap` | `wrap-reverse`
+- [Spécification](https://drafts.csswg.org/css-flexbox/#flex-wrap-property)
 
-<pre class="brush: css">@mixin flex-wrap($value: nowrap) {
+```css
+@mixin flex-wrap($value: nowrap) {
   // No Webkit/FF Box fallback.
   -webkit-flex-wrap: $value;
   @if $value == nowrap {
@@ -123,98 +118,98 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
     -ms-flex-wrap: $value;
   }
   flex-wrap: $value;
-}</pre>
+}
+```
 
-<h3 id="flex-flow"><code>flex-flow</code></h3>
+### `flex-flow`
 
-<p>La propriété {{cssxref("flex-flow")}} est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> pour définir <code>flex-direction</code> et <code>flex-wrap</code> qui permettent respectivement de définir l'axe principal et l'axe secondaire.</p>
+La propriété {{cssxref("flex-flow")}} est [une propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) pour définir `flex-direction` et `flex-wrap` qui permettent respectivement de définir l'axe principal et l'axe secondaire.
 
-<ul>
- <li>Valeur par défaut : <code>row</code> (la valeur par défaut)| <code>nowrap</code></li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">Spécification</a></li>
-</ul>
+- Valeur par défaut : `row` (la valeur par défaut)| `nowrap`
+- [Spécification](https://drafts.csswg.org/css-flexbox/#flex-flow-property)
 
-<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) {
+```css
+@mixin flex-flow($values: (row nowrap)) {
   // No Webkit/FF Box fallback.
   -webkit-flex-flow: $values;
   -ms-flex-flow: $values;
   flex-flow: $values;
-}</pre>
+}
+```
 
-<h3 id="order"><code>order</code></h3>
+### `order`
 
-<p>La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.</p>
+La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.
 
-<ul>
- <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (0 est la valeur par défaut)</li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#order-property">Spécification</a></li>
-</ul>
+- Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (0 est la valeur par défaut)
+- [Spécification](https://drafts.csswg.org/css-flexbox/#order-property)
 
-<pre class="brush: css">@mixin order($int: 0) {
+```css
+@mixin order($int: 0) {
   -webkit-box-ordinal-group: $int + 1;
   -moz-box-ordinal-group: $int + 1;
   -webkit-order: $int;
   -ms-flex-order: $int;
   order: $int;
-}</pre>
+}
+```
 
-<h3 id="flex-grow"><code>flex-grow</code></h3>
+### `flex-grow`
 
-<p>La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.</p>
+La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.
 
-<ul>
- <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (1 est la valeur par défaut)</li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">Spécification</a></li>
-</ul>
+- Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (1 est la valeur par défaut)
+- [Spécification](https://drafts.csswg.org/css-flexbox/#flex-grow-property)
 
-<pre class="brush: css">@mixin flex-grow($int: 1) {
+```css
+@mixin flex-grow($int: 1) {
   -webkit-box-flex: $int;
   -moz-box-flex: $int;
   -webkit-flex-grow: $int;
   -ms-flex: $int;
   flex-grow: $int;
-}</pre>
+}
+```
 
-<h3 id="flex-shrink"><code>flex-shrink</code></h3>
+### `flex-shrink`
 
-<p>La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.</p>
+La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.
 
-<ul>
- <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (1 est la valeur par défaut)</li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">Spécification</a></li>
-</ul>
+- Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (1 est la valeur par défaut)
+- [Spécification](https://drafts.csswg.org/css-flexbox/#flex-shrink-property)
 
-<pre class="brush: css">@mixin flex-shrink($int: 0) {
+```css
+@mixin flex-shrink($int: 0) {
   -webkit-flex-shrink: $int;
   -moz-flex-shrink: $int;
   -ms-flex: $int;
   flex-shrink: $int;
-}</pre>
+}
+```
 
-<h3 id="flex-basis"><code>flex-basis</code></h3>
+### `flex-basis`
 
-<p>La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.</p>
+La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.
 
-<ul>
- <li>Valeurs : voir la page {{cssxref("flex-basis")}}, la valeur par défaut est <code>auto</code>.</li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">Spécification</a></li>
-</ul>
+- Valeurs : voir la page {{cssxref("flex-basis")}}, la valeur par défaut est `auto`.
+- [Spécification](https://drafts.csswg.org/css-flexbox/#flex-basis-property)
 
-<pre class="brush: css">@mixin flex-basis($value: auto) {
+```css
+@mixin flex-basis($value: auto) {
   -webkit-flex-basis: $value;
   flex-basis: $value;
-}</pre>
+}
+```
 
-<h3 id="flex"><code>flex</code></h3>
+### `flex`
 
-<p>La <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (<code>flex-grow</code>), le facteur de réduction (<code>flex-shrink</code>) et la longueur de base (<code>flex-basis</code>). Lorsqu'un élément est un élément flexible, c'est <code>flex</code> qui sera utilisée (plutôt que <code>width</code> ou <code>height</code>) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, <code>flex</code> n'aura aucun effet.</p>
+La [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (`flex-grow`), le facteur de réduction (`flex-shrink`) et la longueur de base (`flex-basis`). Lorsqu'un élément est un élément flexible, c'est `flex` qui sera utilisée (plutôt que `width` ou `height`) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, `flex` n'aura aucun effet.
 
-<ul>
- <li>Valeur : voir la page {{cssxref("flex")}} pour les valeurs possibles et la valeur par défaut</li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#flex-property">Spécification</a></li>
-</ul>
+- Valeur : voir la page {{cssxref("flex")}} pour les valeurs possibles et la valeur par défaut
+- [Spécification](https://drafts.csswg.org/css-flexbox/#flex-property)
 
-<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+```css
+@mixin flex($fg: 1, $fs: 0, $fb: auto) {
 
   // Définir une variable pour l'utiliser
   // avec les propriétés box-flex
@@ -231,22 +226,20 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
   -webkit-flex: $fg $fs $fb;
   -ms-flex: $fg $fs $fb;
   flex: $fg $fs $fb;
-}</pre>
+}
+```
 
-<h3 id="justify-content"><code>justify-content</code></h3>
+### `justify-content`
 
-<p>La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.</p>
+La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.
 
-<div class="note">
-<p><strong>Note :</strong> Les valeurs de la forme <code>space-*</code> ne sont pas prises en charge avec les anciennes syntaxes.</p>
-</div>
+> **Note :** Les valeurs de la forme `space-*` ne sont pas prises en charge avec les anciennes syntaxes.
 
-<ul>
- <li>Valeurs : <code>flex-start</code> (la valeur par défaut)| <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">Spécification</a></li>
-</ul>
+- Valeurs : `flex-start` (la valeur par défaut)| `flex-end` | `center` | `space-between` | `space-around`
+- [Spécification](https://drafts.csswg.org/css-flexbox/#justify-content-property)
 
-<pre class="brush: css">@mixin justify-content($value: flex-start) {
+```css
+@mixin justify-content($value: flex-start) {
   @if $value == flex-start {
     -webkit-box-pack: start;
     -moz-box-pack: start;
@@ -270,18 +263,18 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
   justify-content: $value;
 }
   // Version plus courte :
-  @mixin flex-just($args...) { @include justify-content($args...); }</pre>
+  @mixin flex-just($args...) { @include justify-content($args...); }
+```
 
-<h3 id="align-items"><code>align-items</code></h3>
+### `align-items`
 
-<p>Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour <code>justify-content</code> mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. <code>align-self</code> permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, <code>align-self</code> correspondra toujours à <code>align-items</code>).</p>
+Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour `justify-content` mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. `align-self` permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, `align-self` correspondra toujours à `align-items`).
 
-<ul>
- <li>Valeurs : <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (la valeur par défaut)</li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li>
-</ul>
+- Valeurs : `flex-start` | `flex-end` | `center` | `baseline` | `stretch` (la valeur par défaut)
+- [Spécification](https://drafts.csswg.org/css-flexbox/#align-items-property)
 
-<pre class="brush: css">@mixin align-items($value: stretch) {
+```css
+@mixin align-items($value: stretch) {
   @if $value == flex-start {
     -webkit-box-align: start;
     -moz-box-align: start;
@@ -297,16 +290,16 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
   }
   -webkit-align-items: $value;
   align-items: $value;
-}</pre>
+}
+```
 
-<h3 id="align-self"><code>align-self</code></h3>
+### `align-self`
 
-<ul>
- <li>Valeurs : <code>auto</code> (la valeur par défaut)| <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li>
-</ul>
+- Valeurs : `auto` (la valeur par défaut)| `flex-start` | `flex-end` | `center` | `baseline` | `stretch`
+- [Spécification](https://drafts.csswg.org/css-flexbox/#align-items-property)
 
-<pre class="brush: css">@mixin align-self($value: auto) {
+```css
+@mixin align-self($value: auto) {
   // No Webkit Box Fallback.
   -webkit-align-self: $value;
   @if $value == flex-start {
@@ -317,18 +310,18 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
     -ms-flex-item-align: $value;
   }
   align-self: $value;
-}</pre>
+}
+```
 
-<h3 id="align-content"><code>align-content</code></h3>
+### `align-content`
 
-<p>La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.</p>
+La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.
 
-<ul>
- <li>Valeurs : <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (la valeur par défaut)</li>
- <li><a href="https://drafts.csswg.org/css-flexbox/#align-content-property">Spécification</a></li>
-</ul>
+- Valeurs : `flex-start` | `flex-end` | `center` | `space-between` | `space-around` | `stretch` (la valeur par défaut)
+- [Spécification](https://drafts.csswg.org/css-flexbox/#align-content-property)
 
-<pre class="brush: css">@mixin align-content($value: stretch) {
+```css
+@mixin align-content($value: stretch) {
   // No Webkit Box Fallback.
   -webkit-align-content: $value;
   @if $value == flex-start {
@@ -339,4 +332,5 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
     -ms-flex-line-pack: $value;
   }
   align-content: $value;
-}</pre>
\ No newline at end of file
+}
+```
diff --git a/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
index 5aac168f3d..803aeaadd8 100644
--- a/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
+++ b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
@@ -10,227 +10,213 @@ tags:
 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
 original_slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le module des boîtes flexibles, aussi appelé « <em>flexbox</em> », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des <em>flexbox</em> que nous approfondirons ensuite dans d'autres articles.</p>
+Le module des boîtes flexibles, aussi appelé « _flexbox_ », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des _flexbox_ que nous approfondirons ensuite dans d'autres articles.
 
-<p>Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les <em>flexbox</em> gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">la disposition en grille (CSS Grid)</a> qui contrôle à la fois les colonnes et les lignes.</p>
+Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les _flexbox_ gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de [la disposition en grille (CSS Grid)](/en-US/docs/Web/CSS/CSS_Grid_Layout) qui contrôle à la fois les colonnes et les lignes.
 
-<h2 id="Les_deux_axes_des_boîtes_flexibles">Les deux axes des boîtes flexibles</h2>
+## Les deux axes des boîtes flexibles
 
-<p>Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (<em>main axis</em> en anglais) et l'axe secondaire (<em>cross axis</em> en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.</p>
+Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (_main axis_ en anglais) et l'axe secondaire (_cross axis_ en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.
 
-<h3 id="L'axe_principal">L'axe principal</h3>
+### L'axe principal
 
-<p>L'axe principal est défini par la propriété <code>flex-direction</code> qui peut prendre quatre valeurs :</p>
+L'axe principal est défini par la propriété `flex-direction` qui peut prendre quatre valeurs :
 
-<ul>
- <li><code>row</code></li>
- <li><code>row-reverse</code></li>
- <li><code>column</code></li>
- <li><code>column-reverse</code></li>
-</ul>
+- `row`
+- `row-reverse`
+- `column`
+- `column-reverse`
 
-<p>Si on choisit la valeur <code>row</code> ou <code>row-reverse</code>, l'axe principal sera aligné avec la direction « en ligne » (<em>inline</em> direction) (c'est la direction logique qui suit le sens d'écriture du document).</p>
+Si on choisit la valeur `row` ou `row-reverse`, l'axe principal sera aligné avec la direction « en ligne » (_inline_ direction) (c'est la direction logique qui suit le sens d'écriture du document).
 
-<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="basics1.png"></p>
+![If flex-direction is set to row the main axis runs along the row in the inline direction.](basics1.png)
 
-<p>Si on choisit la valeur <code>column</code> ou <code>column-reverse</code>, l'axe principal suivra la direction de bloc (<em>block direction</em>) et progressera le long de l'axe perpendiculaire au sens d'écriture.</p>
+Si on choisit la valeur `column` ou `column-reverse`, l'axe principal suivra la direction de bloc (_block direction_) et progressera le long de l'axe perpendiculaire au sens d'écriture.
 
-<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="basics2.png"></p>
+![If flex-direction is set to column the main axis runs in the block direction.](basics2.png)
 
-<h3 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h3>
+### L'axe secondaire (_cross axis_)
 
-<p>L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si <code>flex-direction</code> vaut <code>row</code> ou <code>row-reverse</code>, l'axe secondaire suivra l'axe des colonnes.</p>
+L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si `flex-direction` vaut `row` ou `row-reverse`, l'axe secondaire suivra l'axe des colonnes.
 
-<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="basics3.png"></p>
+![If flex-direction is set to row then the cross axis runs in the block direction.](basics3.png)
 
-<p>Si l'axe principale est <code>column</code> ou <code>column-reverse</code>, l'axe secondaire suivra celui des lignes (horizontales).</p>
+Si l'axe principale est `column` ou `column-reverse`, l'axe secondaire suivra celui des lignes (horizontales).
 
-<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="basics4.png"></p>
+![If flex-direction is set to column then the cross axis runs in the inline direction.](basics4.png)
 
-<p>Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.</p>
+Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.
 
-<h2 id="Les_lignes_de_début_et_de_fin">Les lignes de début et de fin</h2>
+## Les lignes de début et de fin
 
-<p>Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.</p>
+Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.
 
-<p>Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.</p>
+Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.
 
-<p>Si <code>flex-direction</code> vaut <code>row</code> et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.</p>
+Si `flex-direction` vaut `row` et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.
 
-<p><img alt="Working in English the start edge is on the left." src="basics5.png"></p>
+![Working in English the start edge is on the left.](basics5.png)
 
-<p>Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.</p>
+Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.
 
-<p><img alt="The start edge in a RTL language is on the right." src="basics6.png"></p>
+![The start edge in a RTL language is on the right.](basics6.png)
 
-<p>Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.</p>
+Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.
 
-<p>Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.</p>
+Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.
 
-<h2 id="Le_conteneur_flexible">Le conteneur flexible</h2>
+## Le conteneur flexible
 
-<p>La zone d'un document sujette au modèle de disposition <em>flexbox</em> est appelée un <strong>conteneur flexible</strong>. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit <code>flex</code> ou <code>inline-flex</code>. Dès que c'est le cas, les éléments « enfants » directs deviennent des <strong>éléments flexibles (<em>flex items</em>)</strong>. Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :</p>
+La zone d'un document sujette au modèle de disposition _flexbox_ est appelée un **conteneur flexible**. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit `flex` ou `inline-flex`. Dès que c'est le cas, les éléments « enfants » directs deviennent des **éléments flexibles (_flex items_)**. Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :
 
-<ul>
- <li>Les éléments s'afficheront en lignes horizontales (la valeur par défaut de la propriété <code>flex-direction</code> est <code>row</code>).</li>
- <li>Les éléments seront placés à partir de la ligne de début de l'axe principal.</li>
- <li>Les éléments ne s'étireront pas le long de l'axe principal mais pourront se rétrécir si nécessaire.</li>
- <li>Les éléments seront étirés le long de l'axe secondaire afin d'occuper l'espace sur cet axe.</li>
- <li>La propriété {{cssxref("flex-basis")}} vaut <code>auto</code>.</li>
- <li>La propriété {{cssxref("flex-wrap")}} vaut <code>nowrap</code>.</li>
-</ul>
+- Les éléments s'afficheront en lignes horizontales (la valeur par défaut de la propriété `flex-direction` est `row`).
+- Les éléments seront placés à partir de la ligne de début de l'axe principal.
+- Les éléments ne s'étireront pas le long de l'axe principal mais pourront se rétrécir si nécessaire.
+- Les éléments seront étirés le long de l'axe secondaire afin d'occuper l'espace sur cet axe.
+- La propriété {{cssxref("flex-basis")}} vaut `auto`.
+- La propriété {{cssxref("flex-wrap")}} vaut `nowrap`.
 
-<p>Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.</p>
+Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.
 
-<p>Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.</p>
+Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} </p>
+{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}}
 
-<h3 id="Modifier_flex-direction">Modifier <code>flex-direction</code></h3>
+### Modifier `flex-direction`
 
-<p>En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant <code>flex-direction: row-reverse</code>, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.</p>
+En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant `flex-direction: row-reverse`, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.
 
-<p>Si on utilise <code>column</code> comme valeur de <code>flex-direction</code>, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise <code>column-reverse</code>, les lignes de début et de fin seront également inversées.</p>
+Si on utilise `column` comme valeur de `flex-direction`, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise `column-reverse`, les lignes de début et de fin seront également inversées.
 
-<p>Dans l'exemple suivant, on utilise <code>flex-direction</code> avec la valeur <code>row-reverse</code>. Vous pouvez utiliser d'autres valeurs — <code>row</code>, <code>column</code> et <code>column-reverse</code> — afin de voir le résultat produit.</p>
+Dans l'exemple suivant, on utilise `flex-direction` avec la valeur `row-reverse`. Vous pouvez utiliser d'autres valeurs — `row`, `column` et `column-reverse` — afin de voir le résultat produit.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}
 
-<h2 id="Créer_un_conteneur_flexible_sur_plusieurs_lignes_avec_flex-wrap">Créer un conteneur flexible sur plusieurs lignes avec <code>flex-wrap</code></h2>
+## Créer un conteneur flexible sur plusieurs lignes avec `flex-wrap`
 
-<p>Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.</p>
+Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.
 
-<p>Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur <code>wrap</code>. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec <code>flex-wrap</code> qui vaut <code>wrap</code>, les éléments passent à la ligne. Si on modifie la valeur avec <code>nowrap</code> (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise <code>nowrap</code> et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.</p>
+Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur `wrap`. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec `flex-wrap` qui vaut `wrap`, les éléments passent à la ligne. Si on modifie la valeur avec `nowrap` (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise `nowrap` et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}
 
-<p>Pour approfondir ces notions, vous pouvez consulter l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles">Maîtriser le passage à la ligne des éléments flexibles</a>.</p>
+Pour approfondir ces notions, vous pouvez consulter l'article [Maîtriser le passage à la ligne des éléments flexibles](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles).
 
-<h2 id="La_propriété_raccourcie_flex-flow">La propriété raccourcie <code>flex-flow</code></h2>
+## La propriété raccourcie `flex-flow`
 
-<p>Il est possible de synthétiser les propriétés <code>flex-direction</code> et <code>flex-wrap</code> avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour <code>flex-direction</code> et la seconde pour <code>flex-wrap</code>.</p>
+Il est possible de synthétiser les propriétés `flex-direction` et `flex-wrap` avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour `flex-direction` et la seconde pour `flex-wrap`.
 
-<p>Dans l'exemple qui suit, vous pouvez changer les valeurs de <code>flex-direction</code> en utilisant <code>row</code>, <code>row-reverse</code>, <code>column</code> ou <code>column-reverse</code> pour la première et <code>wrap</code> ou <code>nowrap</code> pour la seconde.</p>
+Dans l'exemple qui suit, vous pouvez changer les valeurs de `flex-direction` en utilisant `row`, `row-reverse`, `column` ou `column-reverse` pour la première et `wrap` ou `nowrap` pour la seconde.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}
 
-<h2 id="Les_propriétés_appliquées_aux_éléments_flexibles">Les propriétés appliquées aux éléments flexibles</h2>
+## Les propriétés appliquées aux éléments flexibles
 
-<p>Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :</p>
+Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :
 
-<ul>
- <li>{{cssxref("flex-grow")}}</li>
- <li>{{cssxref("flex-shrink")}}</li>
- <li>{{cssxref("flex-basis")}}</li>
-</ul>
+- {{cssxref("flex-grow")}}
+- {{cssxref("flex-shrink")}}
+- {{cssxref("flex-basis")}}
 
-<p>Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contr%C3%B4ler_les_proportions_des_bo%C3%AEtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contr%C3%B4ler_les_proportions_des_bo%C3%AEtes_flexibles_le_long_de_l_axe_principal).
 
-<p>Avant de revenir à ces propriétés, il nous faut définir le concept d'<strong>espace disponible</strong>. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.</p>
+Avant de revenir à ces propriétés, il nous faut définir le concept d'**espace disponible**. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.
 
-<p>Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.</p>
+Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.
 
-<p><img alt="This flex container has available space after laying out the items." src="basics7.png"></p>
+![This flex container has available space after laying out the items.](basics7.png)
 
-<p>Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés <code>flex-</code> qui s'appliquent aux éléments.</p>
+Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés `flex-` qui s'appliquent aux éléments.
 
-<h3 id="La_propriété_flex-basis">La propriété <code>flex-basis</code></h3>
+### La propriété `flex-basis`
 
-<p>La propriété <code>flex-basis</code> définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est <code>auto</code> — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour <code>flex-basis</code>.</p>
+La propriété `flex-basis` définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est `auto` — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour `flex-basis`.
 
-<p>Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré <code>display: flex</code> sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).</p>
+Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré `display: flex` sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).
 
-<h3 id="La_propriété_flex-grow">La propriété <code>flex-grow</code></h3>
+### La propriété `flex-grow`
 
-<p>La propriété <code>flex-grow</code> est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de <code>flex-basis</code>. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.</p>
+La propriété `flex-grow` est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de `flex-basis`. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.
 
-<p>Si on utilise<code>flex-grow: 1</code> pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.</p>
+Si on utilise`flex-grow: 1` pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.
 
-<p>La propriété <code>flex-grow</code> permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique <code>flex-grow</code> avec une valeur de 2 et, pour les autres éléments, <code>flex-grow</code> avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).</p>
+La propriété `flex-grow` permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique `flex-grow` avec une valeur de 2 et, pour les autres éléments, `flex-grow` avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).
 
-<h3 id="La_propriété_flex-shrink">La propriété <code>flex-shrink</code></h3>
+### La propriété `flex-shrink`
 
-<p>La propriété <code>flex-grow</code> permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété <code>flex-shrink</code> permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que <code>flex-shrink</code> est un entier positif, l'élément peut alors devenir plus petit que la taille définie par <code>flex-basis</code>. De façon analogue à <code>flex-grow</code>, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de <code>flex-shrink</code> sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de <code>flex-shrink</code> plus faibles).</p>
+La propriété `flex-grow` permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété `flex-shrink` permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que `flex-shrink` est un entier positif, l'élément peut alors devenir plus petit que la taille définie par `flex-basis`. De façon analogue à `flex-grow`, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de `flex-shrink` sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de `flex-shrink` plus faibles).
 
-<p>La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que <code>flex-shrink</code> peut être moins cohérent que <code>flex-grow</code> selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.</p>
+La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que `flex-shrink` peut être moins cohérent que `flex-grow` selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.
 
-<div class="note">
-<p><strong>Note :</strong> Les valeurs de <code>flex-grow</code> et <code>flex-shrink</code> sont des proportions. Autrement dit, si tous les éléments ont <code>flex: 1 1 200px</code> et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait <code>flex: 2 1 200px</code> pour cet élément. Mais avoir <code>flex: 10 1 200px</code> d'une part et <code>flex: 20 1 200px</code> d'autre part fonctionnerait exactement de la même façon.</p>
-</div>
+> **Note :** Les valeurs de `flex-grow` et `flex-shrink` sont des proportions. Autrement dit, si tous les éléments ont `flex: 1 1 200px` et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait `flex: 2 1 200px` pour cet élément. Mais avoir `flex: 10 1 200px` d'une part et `flex: 20 1 200px` d'autre part fonctionnerait exactement de la même façon.
 
-<h3 id="La_propriété_raccourcie_flex_et_les_valeurs_synthétiques">La propriété raccourcie <code>flex</code> et les valeurs synthétiques</h3>
+### La propriété raccourcie `flex` et les valeurs synthétiques
 
-<p>On voit rarement <code>flex-grow</code>, <code>flex-shrink</code> et <code>flex-basis</code> utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie <code>flex</code> permet de définir les valeurs de cette propriété dans cet ordre : <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+On voit rarement `flex-grow`, `flex-shrink` et `flex-basis` utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie `flex` permet de définir les valeurs de cette propriété dans cet ordre : `flex-grow`, `flex-shrink`, `flex-basis`.
 
-<p>L'exemple suit vous permet de tester différentes valeurs pour <code>flex</code>. La première valeur est <code>flex-grow</code> et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est <code>flex-shrink</code> et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à <code>flex-basis</code> qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.</p>
+L'exemple suit vous permet de tester différentes valeurs pour `flex`. La première valeur est `flex-grow` et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est `flex-shrink` et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à `flex-basis` qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}
 
-<p>Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :</p>
+Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :
 
-<ul>
- <li><code>flex: initial</code></li>
- <li><code>flex: auto</code></li>
- <li><code>flex: none</code></li>
- <li><code>flex: &lt;nombre-positif&gt;</code></li>
-</ul>
+- `flex: initial`
+- `flex: auto`
+- `flex: none`
+- `flex: <nombre-positif>`
 
-<p>Avec <code>flex: initial</code>, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que <code>flex: 0 1 auto</code>. Ici, <code>flex-grow</code> vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille <code>flex-basis</code>. <code>flex-shrink</code> vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. <code>flex-basis</code> vaut <code>auto</code> et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.</p>
+Avec `flex: initial`, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que `flex: 0 1 auto`. Ici, `flex-grow` vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille `flex-basis`. `flex-shrink` vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. `flex-basis` vaut `auto` et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.
 
-<p>Avec <code>flex: auto</code>, on obtient le même comportement que <code>flex: 1 1 auto</code>, la seule différence avec <code>flex:initial</code> est que les éléments peuvent s'étirer si besoin.</p>
+Avec `flex: auto`, on obtient le même comportement que `flex: 1 1 auto`, la seule différence avec `flex:initial` est que les éléments peuvent s'étirer si besoin.
 
-<p>Avec <code>flex: none</code>, les éléments ne seront pas flexibles. Cette valeur est synonyme de <code>flex: 0 0 auto</code>. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec <code>flex-basis: auto</code>.</p>
+Avec `flex: none`, les éléments ne seront pas flexibles. Cette valeur est synonyme de `flex: 0 0 auto`. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec `flex-basis: auto`.
 
-<p>On voit aussi souvent des valeurs comme <code>flex: 1</code> ou <code>flex: 2</code>, etc. Cela correspond à <code>flex: 1 1 0</code>. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.</p>
+On voit aussi souvent des valeurs comme `flex: 1` ou `flex: 2`, etc. Cela correspond à `flex: 1 1 0`. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.
 
-<p>Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :</p>
+Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}
 
-<h2 id="Alignement_justification_et_distribution_de_l'espace_disponible_entre_les_éléments">Alignement, justification et distribution de l'espace disponible entre les éléments</h2>
+## Alignement, justification et distribution de l'espace disponible entre les éléments
 
-<p>Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.</p>
+Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.
 
-<h3 id="align-items"><code>align-items</code></h3>
+### `align-items`
 
-<p>La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.</p>
+La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.
 
-<p>La valeur initiale de cette propriété est <code>stretch</code>, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).</p>
+La valeur initiale de cette propriété est `stretch`, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).
 
-<p>On peut également utiliser la valeur <code>flex-start</code> afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur <code>flex-end</code> afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien <code>center</code> pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :</p>
+On peut également utiliser la valeur `flex-start` afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur `flex-end` afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien `center` pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :
 
-<ul>
- <li><code>stretch</code></li>
- <li><code>flex-start</code></li>
- <li><code>flex-end</code></li>
- <li><code>center</code></li>
-</ul>
+- `stretch`
+- `flex-start`
+- `flex-end`
+- `center`
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}
 
-<h3 id="justify-content"><code>justify-content</code></h3>
+### `justify-content`
 
-<p>La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par <code>flex-direction</code>. La valeur initiale est <code>flex-start</code> qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur <code>flex-end</code> permet de les placer vers la fin et la valeur <code>center</code> permet de les centrer le long de l'axe principal.</p>
+La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par `flex-direction`. La valeur initiale est `flex-start` qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur `flex-end` permet de les placer vers la fin et la valeur `center` permet de les centrer le long de l'axe principal.
 
-<p>On peut également utiliser la valeur <code>space-between</code> afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur <code>space-around</code> (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur <code>space-evenly</code>.</p>
+On peut également utiliser la valeur `space-between` afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur `space-around` (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur `space-evenly`.
 
-<p>Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :</p>
+Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :
 
-<ul>
- <li><code>flex-start</code></li>
- <li><code>flex-end</code></li>
- <li><code>center</code></li>
- <li><code>space-around</code></li>
- <li><code>space-between</code></li>
- <li><code>space-evenly</code></li>
-</ul>
+- `flex-start`
+- `flex-end`
+- `center`
+- `space-around`
+- `space-between`
+- `space-evenly`
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}
 
-<p>Dans l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible">Aligner des éléments dans un conteneur flexible</a>, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.</p>
+Dans l'article [Aligner des éléments dans un conteneur flexible](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible), nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.
 
-<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+## Prochaines étapes
 
-<p>Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux <em>flexbox</em>. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">comment cette spécification s'articule avec les autres modules CSS</a>.</p>
+Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux _flexbox_. Dans le prochain article, nous verrons [comment cette spécification s'articule avec les autres modules CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods).
diff --git a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md
index c2d689cf0e..9ae3730f10 100644
--- a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md
+++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md
@@ -14,189 +14,180 @@ translation_of: >-
 original_slug: >-
   Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.</p>
+Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.
 
-<h2 id="Un_premier_aperçu">Un premier aperçu</h2>
+## Un premier aperçu
 
-<p>Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :</p>
+Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :
 
-<ul>
- <li><code>flex-grow</code> : quelle proportion de l'espace libre peut-on allouer en supplément à cet élément ?</li>
- <li><code>flex-shrink</code> : quelle proportion de l'espace peut être retirée à cet élément ?</li>
- <li><code>flex-basis</code> : quelle est la taille de l'élément avant tout agrandissement/réduction ?</li>
-</ul>
+- `flex-grow` : quelle proportion de l'espace libre peut-on allouer en supplément à cet élément ?
+- `flex-shrink` : quelle proportion de l'espace peut être retirée à cet élément ?
+- `flex-basis` : quelle est la taille de l'élément avant tout agrandissement/réduction ?
 
-<p>Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira <code>flex-grow</code> avec la valeur <code>2</code>, <code>flex-shrink</code> avec la valeur <code>1</code> et <code>flex-basis</code> avec la valeur <code>auto</code>.</p>
+Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira `flex-grow` avec la valeur `2`, `flex-shrink` avec la valeur `1` et `flex-basis` avec la valeur `auto`.
 
-<pre class="brush: css no-line-numbers">.item {
+```css
+.item {
   flex: 2 1 auto;
 }
-</pre>
+```
 
-<p>Dans l'article sur <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">les concepts de base relatifs aux boîtes flexibles</a>, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.</p>
+Dans l'article sur [les concepts de base relatifs aux boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox), nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.
 
-<h2 id="Les_concepts_majeurs_relatifs_à_l'axe_principal">Les concepts majeurs relatifs à l'axe principal</h2>
+## Les concepts majeurs relatifs à l'axe principal
 
-<p>Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille <em>naturelle</em> des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.</p>
+Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille _naturelle_ des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.
 
-<h3 id="Le_dimensionnement_des_objets_flexibles">Le dimensionnement des objets flexibles</h3>
+### Le dimensionnement des objets flexibles
 
-<p>Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?</p>
+Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?
 
-<p>CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis <a href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords">dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque</a> et ces valeurs peuvent être utilisées comme <a href="/fr/docs/Web/CSS/length">unité de longueurs</a>.</p>
+CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis [dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque](https://drafts.csswg.org/css-sizing-3/#width-height-keywords) et ces valeurs peuvent être utilisées comme [unité de longueurs](/fr/docs/Web/CSS/length).
 
-<p>Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est <code>min-content</code>. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur <code>min-content</code> correspond à la taille du plus grand mot du paragraphe.</p>
+Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est `min-content`. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur `min-content` correspond à la taille du plus grand mot du paragraphe.
 
-<p>Dans le second paragraphe, on utilise la valeur <code>max-content</code> et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.</p>
+Dans le second paragraphe, on utilise la valeur `max-content` et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}
 
-<p>Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :</p>
+Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :
 
-<p><img alt="Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse." src="ratios-size.png"></p>
+![Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse.](ratios-size.png)
 
-<p>Pour la suite de cet article, gardez à l'esprit l'impact de <code>min-content</code> et <code>max-content</code> lorsque nous verrons les propriétés <code>flex-grow</code> et <code>flex-shrink</code>.</p>
+Pour la suite de cet article, gardez à l'esprit l'impact de `min-content` et `max-content` lorsque nous verrons les propriétés `flex-grow` et `flex-shrink`.
 
-<h3 id="Espace_libre_positif_et_négatif">Espace libre positif et négatif</h3>
+### Espace libre positif et négatif
 
-<p>Pour étudier ces propriétés, nous devons définir le concept d'<strong>espace libre positif et négatif</strong>. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut <code>row</code> et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.</p>
+Pour étudier ces propriétés, nous devons définir le concept d'**espace libre positif et négatif**. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut `row` et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.
 
-<p><img alt="Une image illustrant l'espace restant après que les éléments aient été affichés." src="basics7.png"></p>
+![Une image illustrant l'espace restant après que les éléments aient été affichés.](basics7.png)
 
-<p>L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.</p>
+L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.
 
-<p><img alt="Les objets dépassent du conteneur." src="ratios1.png"></p>
+![Les objets dépassent du conteneur.](ratios1.png)
 
-<p>C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.</p>
+C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.
 
-<p>Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur <code>row</code>, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser <code>flex-direction: column</code> (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).</p>
+Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur `row`, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser `flex-direction: column` (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).
 
-<h2 id="La_propriété_flex-basis">La propriété <code>flex-basis</code></h2>
+## La propriété `flex-basis`
 
-<p>La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est <code>auto</code>. Si  <code>flex-basis</code> vaut <code>auto</code>, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour <code>flex-basis</code> (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour <code>flex-basis</code> pour cet élément).</p>
+La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est `auto`. Si  `flex-basis` vaut `auto`, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour `flex-basis` (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour `flex-basis` pour cet élément).
 
-<p>Si la taille initiale de l'élément n'est pas définie de façon absolue, <code>auto</code> correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de <code>min-</code> et <code>max-content</code>, car la boîte flexible utilisera <code>max-content</code> comme valeur pour <code>flex-basis</code>. Dans l'exemple suivant, nous verrons comment en tirer parti.</p>
+Si la taille initiale de l'élément n'est pas définie de façon absolue, `auto` correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de `min-` et `max-content`, car la boîte flexible utilisera `max-content` comme valeur pour `flex-basis`. Dans l'exemple suivant, nous verrons comment en tirer parti.
 
-<p>Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur <code>0</code> pour <code>flex-grow</code> et <code>flex-shrink</code>. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une <code>flex-basis</code> de <code>150px</code> tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.</p>
+Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur `0` pour `flex-grow` et `flex-shrink`. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une `flex-basis` de `150px` tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}
 
-<p>En plus du mot-clé <code>auto</code>, on peut également utiliser le mot-clé <code>content</code> comme valeur pour <code>flex-basis</code>. Ainsi, <code>flex-basis</code> sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé <code>auto</code> et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.</p>
+En plus du mot-clé `auto`, on peut également utiliser le mot-clé `content` comme valeur pour `flex-basis`. Ainsi, `flex-basis` sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé `auto` et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.
 
-<p>Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser <code>flex-basis</code> avec la valeur <code>0</code>. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons <code>flex-grow</code>.</p>
+Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser `flex-basis` avec la valeur `0`. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons `flex-grow`.
 
-<h2 id="La_propriété_flex-grow">La propriété <code>flex-grow</code></h2>
+## La propriété `flex-grow`
 
-<p>La propriété {{cssxref("flex-grow")}} définit <strong>le coefficient d'agrandissement flexible</strong>, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.</p>
+La propriété {{cssxref("flex-grow")}} définit **le coefficient d'agrandissement flexible**, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.
 
-<p>Si tous les objets possèdent la même valeur pour le coefficient <code>flex-grow</code>, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur <code>1</code>. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur <code>88</code>, <code>100</code> ou <code>1.2</code> — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.</p>
+Si tous les objets possèdent la même valeur pour le coefficient `flex-grow`, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur `1`. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur `88`, `100` ou `1.2` — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.
 
-<h3 id="Combiner_flex-grow_et_flex-basis">Combiner <code>flex-grow</code> et <code>flex-basis</code></h3>
+### Combiner `flex-grow` et `flex-basis`
 
-<p>Les choses se compliquent lorsque <code>flex-grow</code> et <code>flex-basis</code> interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :</p>
+Les choses se compliquent lorsque `flex-grow` et `flex-basis` interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :
 
-<p><code>flex: 1 1 auto;</code></p>
+`flex: 1 1 auto;`
 
-<p>Dans ce cas, <code>flex-basis</code> vaut <code>auto</code> et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille <code>max-content</code> des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :</p>
+Dans ce cas, `flex-basis` vaut `auto` et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille `max-content` des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :
 
-<p><img alt="Une image illustrant l'espace libre positif avec une zone hachurée." src="ratios2.png"></p>
+![Une image illustrant l'espace libre positif avec une zone hachurée.](ratios2.png)
 
-<p>On utilise ici une valeur <code>flex-basis</code> égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :</p>
+On utilise ici une valeur `flex-basis` égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :
 
-<p><img alt="L'espace positif est réparti entre les éléments." src="ratios3.png"></p>
+![L'espace positif est réparti entre les éléments.](ratios3.png)
 
-<p>Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :</p>
+Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :
 
-<p><code>flex: 1 1 0;</code></p>
+`flex: 1 1 0;`
 
-<p>Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut <code>0</code> — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient <code>flex-grow</code>, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.</p>
+Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut `0` — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient `flex-grow`, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.
 
-<p>Vous pouvez modifier le coefficient <code>flex-grow</code> pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :</p>
+Vous pouvez modifier le coefficient `flex-grow` pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}
 
-<h3 id="Affecter_différents_coefficients_flex-grow_aux_éléments">Affecter différents coefficients <code>flex-grow</code> aux éléments</h3>
+### Affecter différents coefficients `flex-grow` aux éléments
 
-<p>Notre compréhension du fonctionnement de <code>flex-grow</code> avec <code>flex-basis</code> nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients <code>flex-grow</code>. Si on conserve la valeur <code>0</code> pour <code>flex-basis</code> afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de <code>flex-grow</code> afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :</p>
+Notre compréhension du fonctionnement de `flex-grow` avec `flex-basis` nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients `flex-grow`. Si on conserve la valeur `0` pour `flex-basis` afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de `flex-grow` afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :
 
-<ul>
- <li><code>1</code> pour le premier élément</li>
- <li><code>1</code> pour le deuxième élément</li>
- <li><code>2</code> pour le troisième</li>
-</ul>
+- `1` pour le premier élément
+- `1` pour le deuxième élément
+- `2` pour le troisième
 
-<p>On utilise <code>flex-basis</code> avec la valeur <code>0</code> ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs <code>flex-grow</code> puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.</p>
+On utilise `flex-basis` avec la valeur `0` ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs `flex-grow` puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}
 
-<p>Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement <code>.25</code>, <code>.25</code> et <code>.50</code> — vous obtiendrez alors le même résultat.</p>
+Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement `.25`, `.25` et `.50` — vous obtiendrez alors le même résultat.
 
-<h2 id="La_propriété_flex-shrink">La propriété <code>flex-shrink</code></h2>
+## La propriété `flex-shrink`
 
-<p>La propriété {{cssxref("flex-shrink")}} définit <strong>le coefficient de rétrécissement flexible</strong> qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.</p>
+La propriété {{cssxref("flex-shrink")}} définit **le coefficient de rétrécissement flexible** qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.
 
-<p>Cette propriété est utilisée lorsque le navigateur calcule les valeurs <code>flex-basis</code> des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que <code>flex-shrink</code> possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.</p>
+Cette propriété est utilisée lorsque le navigateur calcule les valeurs `flex-basis` des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que `flex-shrink` possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.
 
-<p>Ainsi, si <code>flex-grow</code> gère la façon dont on peut ajouter de l'espace disponible, <code>flex-shrink</code> gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.</p>
+Ainsi, si `flex-grow` gère la façon dont on peut ajouter de l'espace disponible, `flex-shrink` gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.
 
-<p>Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si <code>flex-shrink</code> vaut <code>0</code>, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.</p>
+Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si `flex-shrink` vaut `0`, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}
 
-<p>En passant la valeur de <code>flex-shrink</code> à <code>1</code>, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.</p>
+En passant la valeur de `flex-shrink` à `1`, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.
 
-<h3 id="Combiner_flex-shrink_et_flex-basis">Combiner <code>flex-shrink</code> et <code>flex-basis</code></h3>
+### Combiner `flex-shrink` et `flex-basis`
 
-<p>On pourrait dire et penser que <code>flex-shrink</code> fonctionne de la même façon que <code>flex-grow</code>. Toutefois, deux arguments viennent contrecarrer cette analogie.</p>
+On pourrait dire et penser que `flex-shrink` fonctionne de la même façon que `flex-grow`. Toutefois, deux arguments viennent contrecarrer cette analogie.
 
-<p>Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre <code>flex-shrink</code> et l'espace libre négatif et celui de <code>flex-grow</code> avec l'espace libre positif :</p>
+Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre `flex-shrink` et l'espace libre négatif et celui de `flex-grow` avec l'espace libre positif :
 
-<blockquote>
-<p>“Note : Le coefficient <code>flex-shrink</code> est multiplié par la taille de base (<code>flex-basis</code>) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”</p>
-</blockquote>
+> “Note : Le coefficient `flex-shrink` est multiplié par la taille de base (`flex-basis`) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”
 
-<p>Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  <code>min-content</code> — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.</p>
+Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  `min-content` — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.
 
-<p>On peut observer ce seuil avec <code>min-content</code> dans l'exemple qui suit où <code>flex-basis</code> est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que <code>min-content</code>. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.</p>
+On peut observer ce seuil avec `min-content` dans l'exemple qui suit où `flex-basis` est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que `min-content`. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}
 
-<p>En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.</p>
+En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.
 
-<h3 id="Utiliser_différents_coefficients_flex-shrink_pour_différents_éléments">Utiliser différents coefficients <code>flex-shrink</code> pour différents éléments</h3>
+### Utiliser différents coefficients `flex-shrink` pour différents éléments
 
-<p>Comme avec <code>flex-grow</code>, on peut utiliser différents coefficients <code>flex-shrink</code>. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).</p>
+Comme avec `flex-grow`, on peut utiliser différents coefficients `flex-shrink`. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).
 
-<p>Dans l'exemple suivant, le premier objet possède un coefficient <code>flex-shrink</code> égal à 1, le deuxième a un coefficient égal à <code>0</code> (il ne rétrécira pas du tout) et le troisième est paramétré avec <code>4</code>. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec <code>flex-grow</code>, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.</p>
+Dans l'exemple suivant, le premier objet possède un coefficient `flex-shrink` égal à 1, le deuxième a un coefficient égal à `0` (il ne rétrécira pas du tout) et le troisième est paramétré avec `4`. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec `flex-grow`, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}
 
-<h2 id="Maîtriser_le_dimensionnement_des_objets_flexibles">Maîtriser le dimensionnement des objets flexibles</h2>
+## Maîtriser le dimensionnement des objets flexibles
 
-<p>Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :</p>
+Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :
 
-<h3 id="Quelle_est_la_taille_de_base_de_l'objet">Quelle est la taille de base de l'objet ?</h3>
+### Quelle est la taille de base de l'objet ?
 
-<ol>
- <li>Si  <code>flex-basis</code> vaut <code>auto</code> et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.</li>
- <li>Si  <code>flex-basis</code> vaut <code>auto</code> ou <code>content</code> (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément</li>
- <li>Si <code>flex-basis</code> est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.</li>
- <li>Si  <code>flex-basis</code> vaut <code>0</code>, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.</li>
-</ol>
+1.  Si  `flex-basis` vaut `auto` et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.
+2.  Si  `flex-basis` vaut `auto` ou `content` (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément
+3.  Si `flex-basis` est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.
+4.  Si  `flex-basis` vaut `0`, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.
 
-<h3 id="De_l'espace_est-il_disponible">De l'espace est-il disponible ?</h3>
+### De l'espace est-il disponible ?
 
-<p>Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.</p>
+Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.
 
-<ol>
- <li>Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété <code>flex-grow</code> qui entrera en jeu.</li>
- <li>Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété <code>flex-shrink</code> qui sera utilisée.</li>
-</ol>
+1.  Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété `flex-grow` qui entrera en jeu.
+2.  Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété `flex-shrink` qui sera utilisée.
 
-<h3 id="Les_autres_façons_de_distribuer_l'espace">Les autres façons de distribuer l'espace</h3>
+### Les autres façons de distribuer l'espace
 
-<p>Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">le guide sur l'alignement</a>. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.</p>
+Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans [le guide sur l'alignement](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container). La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.
 
-<p>Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.</p>
+Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.
diff --git a/files/fr/web/css/css_flexible_box_layout/index.md b/files/fr/web/css/css_flexible_box_layout/index.md
index a460f31765..dc6d476af2 100644
--- a/files/fr/web/css/css_flexible_box_layout/index.md
+++ b/files/fr/web/css/css_flexible_box_layout/index.md
@@ -9,100 +9,77 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Flexible_Box_Layout
 ---
-<div>{{CSSRef}}</div>
-
-<p><strong>Le module de disposition des boîtes flexibles CSS</strong> (<em>CSS Flexible Box Layout</em>) est un module de CSS qui définit un modèle de boîtes optimisé pour la conception des interfaces utilisateurs. En utilisant le modèle des boîtes flexibles, les éléments d'une conteneur flexible peuvent être disposés dans n'importe quelle direction et étendre leurs dimensions (pour remplir un espace vide) ou se réduire pour éviter de dépasser en dehors de l'élément parent. On peut facilement manipuler les alignements horizontal et vertical des éléments fils. On peut aussi imbriquer plusieurs niveaux de boîtes flexibles afin de construire des dispositions en deux dimensions..</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans l'exemple qui suit, on utilise <code>display: flex</code> pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété <code>justify-content</code> a été paramétrée avec la valeur <code>space-between</code> afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (<em>cross axis</em>) car la valeur par défaut de la propriété <code>align-items </code>est <code>stretch</code>. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
-
-<ul>
- <li>{{cssxref("flex")}}</li>
- <li>{{cssxref("flex-basis")}}</li>
- <li>{{cssxref("flex-direction")}}</li>
- <li>{{cssxref("flex-flow")}}</li>
- <li>{{cssxref("flex-grow")}}</li>
- <li>{{cssxref("flex-shrink")}}</li>
- <li>{{cssxref("flex-wrap")}}</li>
- <li>{{cssxref("order")}}</li>
-</ul>
-
-<h3 id="Propriétés_relatives_à_l'alignement">Propriétés relatives à l'alignement</h3>
-
-<p>Les propriétés <code>align-content</code>, <code>align-self</code>, <code>align-items</code> et <code>justify-content</code> étaient initialement définies dans la spécification Flexbox mais sont désormais définies dans la spécification sur l'alignement des boîtes et la spécification Flexbox fait référence à cette nouvelle spécification pour les définitions à jour. Des propriétés d'alignement additionnelles ont également été définies dans le module de spécification <em>Box Alignment</em>.</p>
-
-<ul>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("place-items")}}</li>
- <li>{{cssxref("place-content")}}</li>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
-
-<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
-
-<ul>
- <li><a href="/fr/docs/Glossary/Flexbox">Flexbox / boîte flexible</a></li>
- <li><a href="/fr/docs/Glossary/Flex_Container">Conteneur flexible</a></li>
- <li><a href="/fr/docs/Glossary/Flex_Item">Objet flexible</a></li>
- <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li>
- <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base des boîtes flexibles</a></dt>
- <dd>Un aperçu des différentes fonctionnalités offertes par les boîtes flexibles.</dd>
- <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">Les liens entre <em>flexbox</em> et les autres méthodes de disposition</a></dt>
- <dd>Comment <em>flexbox</em> s'articule avec les autres méthodes de disposition et les différents modules de spécification CSS.</dd>
- <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">L'alignement des éléments au sein d'un conteneur flexible</a></dt>
- <dd>Le fonctionnement des propriétés d'alignement des boîtes dans le contexte des boîtes flexibles.</dd>
- <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordonner_éléments_flexibles">Ordonner les éléments flexibles</a></dt>
- <dd>Ce guide explique les différentes méthodes qui permettent de modifier l'ordre et la direction des éléments dans le conteneur flexible et aborde également les problèmes que cela peut causer.</dd>
- <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a></dt>
- <dd>Cet article explique le fonctionnement des propriétés <code>flex-grow</code>, <code>flex-shrink</code> et <code>flex-basis</code>.</dd>
- <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles">Maîtriser le passage à la ligne des éléments flexibles</a></dt>
- <dd>Comment créer des conteneur flexibles qui s'étendent sur plusieurs lignes et contrôler l'affichage des éléments sur ces lignes.</dd>
- <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox">Les cas d'utilisation classiques des boîtes flexibles</a></dt>
- <dd>Des <em>design patterns</em> pouvant être résolus avec les boîtes flexibles.</dd>
- <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/R%C3%A9trocompatibilite_de_flexbox">La rétrocompatibilité de <em>flexbox</em></a></dt>
- <dd>L'état de la compatibilité des navigateurs pour les boîtes flexibles, les différents problème d'interopérabilité, la gestion des anciens navigateurs et l'évolution de la spécification.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox')}}</td>
-   <td>{{ Spec2('CSS3 Flexbox') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://github.com/philipwalton/flexbugs">Flexbugs : une liste, maintenue par la communauté, des différents bugs des navigateurs relatifs aux boîtes flexibles et les éventuelles méthodes de contournements associées</a></li>
- <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Mixins">Mixins multi-navigateurs pour flexbox</a> : cet article fournit un ensemble de mixins pour obtenir l'effet des flexbox de façon homogène sur les différents navigateurs qui ne supportent pas la syntaxe moderne pour les boîtes flexibles</li>
-</ul>
+{{CSSRef}}
+
+**Le module de disposition des boîtes flexibles CSS** (_CSS Flexible Box Layout_) est un module de CSS qui définit un modèle de boîtes optimisé pour la conception des interfaces utilisateurs. En utilisant le modèle des boîtes flexibles, les éléments d'une conteneur flexible peuvent être disposés dans n'importe quelle direction et étendre leurs dimensions (pour remplir un espace vide) ou se réduire pour éviter de dépasser en dehors de l'élément parent. On peut facilement manipuler les alignements horizontal et vertical des éléments fils. On peut aussi imbriquer plusieurs niveaux de boîtes flexibles afin de construire des dispositions en deux dimensions..
+
+## Exemple
+
+Dans l'exemple qui suit, on utilise `display: flex` pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété `justify-content` a été paramétrée avec la valeur `space-between` afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (_cross axis_) car la valeur par défaut de la propriété `align-items `est `stretch`. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments.
+
+{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}
+
+## Référence
+
+### Propriétés CSS
+
+- {{cssxref("flex")}}
+- {{cssxref("flex-basis")}}
+- {{cssxref("flex-direction")}}
+- {{cssxref("flex-flow")}}
+- {{cssxref("flex-grow")}}
+- {{cssxref("flex-shrink")}}
+- {{cssxref("flex-wrap")}}
+- {{cssxref("order")}}
+
+### Propriétés relatives à l'alignement
+
+Les propriétés `align-content`, `align-self`, `align-items` et `justify-content` étaient initialement définies dans la spécification Flexbox mais sont désormais définies dans la spécification sur l'alignement des boîtes et la spécification Flexbox fait référence à cette nouvelle spécification pour les définitions à jour. Des propriétés d'alignement additionnelles ont également été définies dans le module de spécification _Box Alignment_.
+
+- {{cssxref("align-content")}}
+- {{cssxref("align-items")}}
+- {{cssxref("align-self")}}
+- {{cssxref("justify-content")}}
+- {{cssxref("place-items")}}
+- {{cssxref("place-content")}}
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+
+### Termes du glossaire
+
+- [Flexbox / boîte flexible](/fr/docs/Glossary/Flexbox)
+- [Conteneur flexible](/fr/docs/Glossary/Flex_Container)
+- [Objet flexible](/fr/docs/Glossary/Flex_Item)
+- [Axe principal](/fr/docs/Glossary/Main_Axis)
+- [Axe secondaire](/fr/docs/Glossary/Cross_Axis)
+
+## Guides
+
+- [Les concepts de base des boîtes flexibles](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)
+  - : Un aperçu des différentes fonctionnalités offertes par les boîtes flexibles.
+- [Les liens entre _flexbox_ et les autres méthodes de disposition](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions)
+  - : Comment _flexbox_ s'articule avec les autres méthodes de disposition et les différents modules de spécification CSS.
+- [L'alignement des éléments au sein d'un conteneur flexible](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible)
+  - : Le fonctionnement des propriétés d'alignement des boîtes dans le contexte des boîtes flexibles.
+- [Ordonner les éléments flexibles](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordonner_éléments_flexibles)
+  - : Ce guide explique les différentes méthodes qui permettent de modifier l'ordre et la direction des éléments dans le conteneur flexible et aborde également les problèmes que cela peut causer.
+- [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal)
+  - : Cet article explique le fonctionnement des propriétés `flex-grow`, `flex-shrink` et `flex-basis`.
+- [Maîtriser le passage à la ligne des éléments flexibles](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles)
+  - : Comment créer des conteneur flexibles qui s'étendent sur plusieurs lignes et contrôler l'affichage des éléments sur ces lignes.
+- [Les cas d'utilisation classiques des boîtes flexibles](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox)
+  - : Des _design patterns_ pouvant être résolus avec les boîtes flexibles.
+- [La rétrocompatibilité de _flexbox_](/fr/docs/Web/CSS/Disposition_flexbox_CSS/R%C3%A9trocompatibilite_de_flexbox)
+  - : L'état de la compatibilité des navigateurs pour les boîtes flexibles, les différents problème d'interopérabilité, la gestion des anciens navigateurs et l'évolution de la spécification.
+
+## Spécifications
+
+| Spécification                        | État                                 | Commentaires         |
+| ------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Flexbox')}} | {{ Spec2('CSS3 Flexbox') }} | Définition initiale. |
+
+## Voir aussi
+
+- [Flexbugs : une liste, maintenue par la communauté, des différents bugs des navigateurs relatifs aux boîtes flexibles et les éventuelles méthodes de contournements associées](https://github.com/philipwalton/flexbugs)
+- [Mixins multi-navigateurs pour flexbox](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Mixins) : cet article fournit un ensemble de mixins pour obtenir l'effet des flexbox de façon homogène sur les différents navigateurs qui ne supportent pas la syntaxe moderne pour les boîtes flexibles
diff --git a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
index b962f9eb69..195322f484 100644
--- a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
+++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md
@@ -13,90 +13,86 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
 original_slug: >-
   Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut <code>row</code> ou de nouvelles colonnes si <code>flex-direction</code> vaut <code>column</code>. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une disposition en grille (<em>CSS Grid</em>)</a>.</p>
+Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut `row` ou de nouvelles colonnes si `flex-direction` vaut `column`. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser [une disposition en grille (_CSS Grid_)](/fr/docs/Web/CSS/CSS_Grid_Layout).
 
-<h2 id="Créer_des_passages_à_la_ligne">Créer des passages à la ligne</h2>
+## Créer des passages à la ligne
 
-<p>La valeur initiale de la propriété {{cssxref("flex-wrap")}} est <code>nowrap</code>. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété <code>flex-wrap</code> avec la valeur <code>wrap</code>, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs <code>row wrap</code> ou <code>column wrap</code>.</p>
+La valeur initiale de la propriété {{cssxref("flex-wrap")}} est `nowrap`. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété `flex-wrap` avec la valeur `wrap`, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs `row wrap` ou `column wrap`.
 
-<p>Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels <code>flex-basis</code> vaut <code>160px</code> et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.</p>
+Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels `flex-basis` vaut `160px` et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}
 
-<p>On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.</p>
+On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}
 
-<h2 id="Le_retour_à_la_ligne_et_flex-direction">Le retour à la ligne et <code>flex-direction</code></h2>
+## Le retour à la ligne et `flex-direction`
 
-<p>Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule <code>flex-direction</code>. Si <code>flex-direction</code> vaut <code>row-reverse</code>, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.</p>
+Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule `flex-direction`. Si `flex-direction` vaut `row-reverse`, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}
 
-<p>On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.</p>
+On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.
 
-<h2 id="Des_explications_sur_cette_disposition_unidimensionnelle">Des explications sur cette disposition unidimensionnelle</h2>
+## Des explications sur cette disposition unidimensionnelle
 
-<p>Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.</p>
+Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.
 
-<p>Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.</p>
+Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.
 
-<p>Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.</p>
+Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}
 
-<p>C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.</p>
+C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.
 
-<h2 id="Comment_fonctionnent_les_systèmes_de_grilles_basés_sur_les_boîtes_flexibles">Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?</h2>
+## Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?
 
-<p>La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (<em>floats</em>). Si on affecte des largeurs en pourcentage aux éléments flexibles (via <code>flex-basis</code> ou avec une largeur sur l'élément et avec <code>flex-basis</code> en <code>auto</code>) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.</p>
+La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (_floats_). Si on affecte des largeurs en pourcentage aux éléments flexibles (via `flex-basis` ou avec une largeur sur l'élément et avec `flex-basis` en `auto`) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.
 
-<p>Dans cet exemple, on a <code>flex-grow</code> et <code>flex-shrink</code> qui valent <code>0</code> afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.</p>
+Dans cet exemple, on a `flex-grow` et `flex-shrink` qui valent `0` afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}
 
-<p>Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.</p>
+Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.
 
-<h2 id="Créer_des_gouttières_entre_les_éléments">Créer des gouttières entre les éléments</h2>
+## Créer des gouttières entre les éléments
 
-<p>Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour <a href="https://www.w3.org/TR/css-align-3/">le module d'alignement des boîtes</a> et pour Flexbox. À l'avenir, nous pourrons utiliser <code>row-gap</code> et <code>column-gap</code> pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.</p>
+Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour [le module d'alignement des boîtes](https://www.w3.org/TR/css-align-3/) et pour Flexbox. À l'avenir, nous pourrons utiliser `row-gap` et `column-gap` pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.
 
-<p>On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.</p>
+On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.
 
-<p>Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.</p>
+Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}
 
-<h2 id="L'impact_de_visibility_collapse">L'impact de <code>visibility: collapse</code></h2>
+## L'impact de `visibility: collapse`
 
-<p>La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique <code>visibility: collapse</code> (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :</p>
+La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique `visibility: collapse` (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :
 
-<blockquote>
-<p>“Indiquer <code>visibility:collapse</code> sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de <code>visibility:collapse</code> sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Éléments repliés</a></p>
-</blockquote>
+> “Indiquer `visibility:collapse` sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de `visibility:collapse` sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - [Éléments repliés](https://www.w3.org/TR/css-flexbox-1/#visibility-collapse)
 
-<p>Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.</p>
+Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.
 
-<p>Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec <code>visibility: collapse</code> et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire <code>visibility: collapse</code> ou qu'on modifie la valeur de <code>visible</code>, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.</p>
+Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec `visibility: collapse` et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire `visibility: collapse` ou qu'on modifie la valeur de `visible`, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.
 
-<div class="note">
-<p><strong>Note :</strong> Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent <code>collapse</code> comme équivalent à <code>hidden</code>.</p>
-</div>
+> **Note :** Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent `collapse` comme équivalent à `hidden`.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}
 
-<p>Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.</p>
+Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.
 
-<p>Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.</p>
+Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.
 
-<p>Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.</p>
+Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}
 
-<p>Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.</p>
+Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.
 
-<h3 id="La_différence_entre_visibility_collapse_et_display_none">La différence entre <code>visibility: collapse</code> et <code>display: none</code></h3>
+### La différence entre `visibility: collapse` et `display: none`
 
-<p>Lorsqu'on utilise <code>display: none</code> sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. <code>visibility: hidden</code> permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.</p>
+Lorsqu'on utilise `display: none` sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. `visibility: hidden` permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.
diff --git a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md
index 5fc57819e1..87383e908a 100644
--- a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md
+++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md
@@ -12,129 +12,115 @@ tags:
 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
 original_slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Les nouvelles méthodes de disposition telles que les boîtes flexibles (<em>flexbox</em>) et la grille CSS (<em>CSS Grid</em>) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.</p>
+Les nouvelles méthodes de disposition telles que les boîtes flexibles (_flexbox_) et la grille CSS (_CSS Grid_) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.
 
-<h2 id="Inverser_l'affichage_des_éléments">Inverser l'affichage des éléments</h2>
+## Inverser l'affichage des éléments
 
-<p>La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :</p>
+La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :
 
-<ul>
- <li><code>row</code></li>
- <li><code>column</code></li>
- <li><code>row-reverse</code></li>
- <li><code>column-reverse</code></li>
-</ul>
+- `row`
+- `column`
+- `row-reverse`
+- `column-reverse`
 
-<p>Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.</p>
+Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.
 
-<p><img alt="Les objets sont affichés sur une ligne horizontale qui commence à gauche." src="basics1.png"></p>
+![Les objets sont affichés sur une ligne horizontale qui commence à gauche.](basics1.png)
 
-<p><img alt="Les objets sont affichés sur une colonne qui commence en haut." src="align10.png"></p>
+![Les objets sont affichés sur une colonne qui commence en haut.](align10.png)
 
-<p>Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.</p>
+Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.
 
-<p><img alt="Les éléments sont affichés dans l'ordre inverse et commencent à droite." src="align9.png"></p>
+![Les éléments sont affichés dans l'ordre inverse et commencent à droite.](align9.png)
 
-<p><img alt="Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas." src="align11.png"></p>
+![Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas.](align11.png)
 
-<p>Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment <code>row</code> et <code>row-reverse</code> fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), <code>row</code> correspondrait au côté droit et  <code>row-reverse</code> au côté gauche.</p>
+Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment `row` et `row-reverse` fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), `row` correspondrait au côté droit et  `row-reverse` au côté gauche.
 
-<p><img alt="Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse." src="order-rtl.png"></p>
+![Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse.](order-rtl.png)
 
-<p>Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'<em>affichage</em> est inversé. Sur ce sujet, la spécification explique :</p>
+Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'_affichage_ est inversé. Sur ce sujet, la spécification explique :
 
-<blockquote>
-<p>“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordre et Orientation</a></p>
-</blockquote>
+> “Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - [Ordre et Orientation](https://www.w3.org/TR/css-flexbox-1/#flow-order)
 
-<p>Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.</p>
+Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.
 
-<p>Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :</p>
+Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :
 
-<blockquote>
-<p>“Les auteurs ne doivent pas utiliser <code>order</code> ou les valeurs <em>-reverse</em> de <code>flex-flow</code>/<code>flex-direction</code> comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.<em>” </em></p>
-</blockquote>
+> “Les auteurs ne doivent pas utiliser `order` ou les valeurs _-reverse_ de `flex-flow`/`flex-direction` comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document._”_
 
-<div class="note">
-<p><strong>Note :</strong> Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.</p>
-</div>
+> **Note :** Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.
 
-<p>Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de <code>flex-direction</code>, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.</p>
+Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de `flex-direction`, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}
 
-<p>De la même façon, changer la valeur de <code>flex-direction</code> ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.</p>
+De la même façon, changer la valeur de `flex-direction` ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.
 
-<h2 id="La_propriété_order">La propriété <code>order</code></h2>
+## La propriété `order`
 
-<p>En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.</p>
+En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.
 
-<p>La propriété <code>order</code> permet de disposer les éléments au sein de <em>groupes ordinaux</em>. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.</p>
+La propriété `order` permet de disposer les éléments au sein de _groupes ordinaux_. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.
 
-<p>Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs <code>order</code> comme suit :</p>
+Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs `order` comme suit :
 
-<ul>
- <li>Premier élément selon la source : <code>order: 2</code></li>
- <li>Deuxième élément selon la source : <code>order: 3</code></li>
- <li>Troisième élément selon la source : <code>order: 1</code></li>
- <li>Quatrième élément selon la source :<code>order: 3</code></li>
- <li>Cinquième élément selon la source :<code>order: 1</code></li>
-</ul>
+- Premier élément selon la source : `order: 2`
+- Deuxième élément selon la source : `order: 3`
+- Troisième élément selon la source : `order: 1`
+- Quatrième élément selon la source :`order: 3`
+- Cinquième élément selon la source :`order: 1`
 
-<p>Les éléments seront affichés sur la page dans l'ordre suivant :</p>
+Les éléments seront affichés sur la page dans l'ordre suivant :
 
-<ul>
- <li>Troisième élément selon la source : <code>order: 1</code></li>
- <li>Cinquième élément selon la source : <code>order: 1</code></li>
- <li>Premier élément selon la source : <code>order: 2</code></li>
- <li>Deuxième élément selon la source : <code>order: 3</code></li>
- <li>Quatrième élément selon la source : <code>order: 3</code></li>
-</ul>
+- Troisième élément selon la source : `order: 1`
+- Cinquième élément selon la source : `order: 1`
+- Premier élément selon la source : `order: 2`
+- Deuxième élément selon la source : `order: 3`
+- Quatrième élément selon la source : `order: 3`
 
-<p><img alt="Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé." src="order-property.png"></p>
+![Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé.](order-property.png)
 
-<p>Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de <code>flex-direction</code> pour utiliser <code>row-reverse</code> — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.</p>
+Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de `flex-direction` pour utiliser `row-reverse` — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}
 
-<p>Par défaut, la valeur de la propriété <code>order</code> est <code>0</code> pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour <code>order</code>.</p>
+Par défaut, la valeur de la propriété `order` est `0` pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour `order`.
 
-<p>On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre <code>-1</code> au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.</p>
+On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre `-1` au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.
 
-<p>Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe <code>active</code> dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.</p>
+Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe `active` dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}
 
-<p>Les éléments sont affichés dans ce que la spécification intitule <em>un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"</em>). La valeur de la propriété <code>order</code> est prise en compte avant que les éléments soient affichés.</p>
+Les éléments sont affichés dans ce que la spécification intitule _un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"_). La valeur de la propriété `order` est prise en compte avant que les éléments soient affichés.
 
-<p>L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels <code>order</code> est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.</p>
+L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels `order` est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.
 
-<h2 id="La_propriété_order_et_l'accessibilité">La propriété <code>order</code> et l'accessibilité</h2>
+## La propriété `order` et l'accessibilité
 
-<p>La propriété <code>order</code> aura exactement les mêmes conséquences qu'une modification de <code>flex-direction</code> sur l'accessibilité. Utiliser <code>order</code> modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.</p>
+La propriété `order` aura exactement les mêmes conséquences qu'une modification de `flex-direction` sur l'accessibilité. Utiliser `order` modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.
 
-<p>En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :</p>
+En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :
 
-<ul>
- <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Une déconnexion entre les boîtes flexibles et la navigation au clavier (en anglais)</a></li>
- <li><a href="https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">L'ordre de la source HTML vs l'ordre d'affichage CSS (en anglais)</a></li>
- <li><a href="https://alastairc.ac/2017/06/the-responsive-order-conflict">Le conflit entre l'ordre <em>responsive</em> et le focus clavier (en anglais)</a></li>
-</ul>
+- [Une déconnexion entre les boîtes flexibles et la navigation au clavier (en anglais)](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
+- [L'ordre de la source HTML vs l'ordre d'affichage CSS (en anglais)](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html)
+- [Le conflit entre l'ordre _responsive_ et le focus clavier (en anglais)](https://alastairc.ac/2017/06/the-responsive-order-conflict)
 
-<h2 id="Cas_d'utilisation_pour_order">Cas d'utilisation pour <code>order</code></h2>
+## Cas d'utilisation pour `order`
 
-<p>Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété <code>order</code> à bon escient permet d'implémenter certains motifs récurrents.</p>
+Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété `order` à bon escient permet d'implémenter certains motifs récurrents.
 
-<p>Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un <em>design</em> comme celui-ci.</p>
+Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un _design_ comme celui-ci.
 
-<p><img alt="Un composant avec une date, un titre puis un contenu." src="order-card.png"></p>
+![Un composant avec une date, un titre puis un contenu.](order-card.png)
 
-<p>Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété <code>order</code>.</p>
+Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété `order`.
 
-<p>Dans cet exemple, la carte sera le conteneur flexible et <code>flex-direction</code> aura la valeur <code>column</code>. Pour la date, on affectera un ordre avec la propriété <code>order</code> qui vaut <code>-1</code> qui permettra de la placer au-dessus du titre.</p>
+Dans cet exemple, la carte sera le conteneur flexible et `flex-direction` aura la valeur `column`. Pour la date, on affectera un ordre avec la propriété `order` qui vaut `-1` qui permettra de la placer au-dessus du titre.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}
 
-<p>Ces légères adaptations sont caractéristiques des cas où la propriété <code>order</code> se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. <code>order</code> peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.</p>
+Ces légères adaptations sont caractéristiques des cas où la propriété `order` se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. `order` peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.
diff --git a/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md
index d48ee13ef4..24cf205ee2 100644
--- a/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md
+++ b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md
@@ -12,116 +12,106 @@ translation_of: >-
   Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods
 original_slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.</p>
+Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.
 
-<div class="note">
-<p><strong>Note :</strong> Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.</p>
-</div>
+> **Note :** Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.
 
-<h2 id="Le_module_d'alignement_des_boîtes_(Box_Alignment)">Le module d'alignement des boîtes (<em>Box Alignment</em>)</h2>
+## Le module d'alignement des boîtes (_Box Alignment_)
 
-<p>La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.</p>
+La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.
 
-<p>Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de <a href="https://www.w3.org/TR/css-align-3/">la spécification sur l'alignement des boîtes (<em>Box Alignment</em>)</a>. Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.</p>
+Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de [la spécification sur l'alignement des boîtes (_Box Alignment_)](https://www.w3.org/TR/css-align-3/). Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.
 
-<p>Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de <em>flexbox</em> et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification <em>flexbox</em>, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :</p>
+Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de _flexbox_ et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification _flexbox_, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :
 
-<blockquote>
-<p>« Note : Bien que les propriétés d'alignement soient définies dans le module CSS <em>Box Alignment</em> <a href="https://www.w3.org/TR/css-align-3/">CSS-ALIGN-3</a>, le module <em>Flexible Box Layout</em> reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que <em>CSS Box Alignment Level 3</em> soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module <em>Box Alignment</em> s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module <em>Box Alignment</em>, lorsqu'il sera complet, remplacera les définitions énoncées ici. »</p>
-</blockquote>
+> « Note : Bien que les propriétés d'alignement soient définies dans le module CSS _Box Alignment_ [CSS-ALIGN-3](https://www.w3.org/TR/css-align-3/), le module _Flexible Box Layout_ reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que _CSS Box Alignment Level 3_ soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module _Box Alignment_ s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module _Box Alignment_, lorsqu'il sera complet, remplacera les définitions énoncées ici. »
 
-<p>Dans un prochain article de ce guide (<a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible">Aligner les éléments d'un conteneur flexibles</a>), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.</p>
+Dans un prochain article de ce guide ([Aligner les éléments d'un conteneur flexibles](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible)), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.
 
-<h3 id="Les_propriétés_d'espacement_(gap)">Les propriétés d'espacement (<em>gap</em>)</h3>
+### Les propriétés d'espacement (_gap_)
 
-<p>Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées <code>grid-row-gap</code>, <code>grid-column-gap</code> et <code>grid-gap</code>. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés <code>gap</code>, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.</p>
+Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées `grid-row-gap`, `grid-column-gap` et `grid-gap`. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés `gap`, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.
 
-<h2 id="Les_modes_d'écritures_(Writing_Modes)">Les modes d'écritures (<em>Writing Modes</em>)</h2>
+## Les modes d'écritures (_Writing Modes_)
 
-<p>Dans l'article sur <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">les concepts de bases relatifs aux <em>flexbox</em></a>, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes</a> qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions <strong>de bloc</strong> et <strong>en ligne</strong> qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.</p>
+Dans l'article sur [les concepts de bases relatifs aux _flexbox_](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox), nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS [Writing Modes](https://www.w3.org/TR/css-writing-modes-3/) qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions **de bloc** et **en ligne** qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.
 
-<p>On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez <a href="https://24ways.org/2016/css-writing-modes/">consulter cet article</a> pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.</p>
+On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez [consulter cet article](https://24ways.org/2016/css-writing-modes/) pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.
 
-<h3 id="Les_différents_modes_d'écritures">Les différents modes d'écritures</h3>
+### Les différents modes d'écritures
 
-<p>La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :</p>
+La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :
 
-<ul>
- <li><code>horizontal-tb</code></li>
- <li><code>vertical-rl</code></li>
- <li><code>vertical-lr</code></li>
- <li><code>sideways-rl</code></li>
- <li><code>sideways-lr</code></li>
-</ul>
+- `horizontal-tb`
+- `vertical-rl`
+- `vertical-lr`
+- `sideways-rl`
+- `sideways-lr`
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p>
+{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}}
 
-<p>Actuellement, seul Firefox prend en charge <code>sideways-rl</code> et <code>sideways-lr</code>. Il existe également certains problèmes relatifs à <code>writing-mode</code> et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#compatibilité_des_navigateurs">les informations de compatibilité pour la propriété <code>writing-mode</code></a>. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !</p>
+Actuellement, seul Firefox prend en charge `sideways-rl` et `sideways-lr`. Il existe également certains problèmes relatifs à `writing-mode` et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter [les informations de compatibilité pour la propriété `writing-mode`](/fr/docs/Web/CSS/writing-mode#compatibilité_des_navigateurs). Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !
 
-<p>On notera que la propriété <code>writing-mode</code> CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut <code>dir</code> et <code>lang</code> sur l'élément <code>html</code> afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.</p>
+On notera que la propriété `writing-mode` CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut `dir` et `lang` sur l'élément `html` afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.
 
-<h2 id="Les_boîtes_flexibles_et_les_autres_méthodes_de_disposition">Les boîtes flexibles et les autres méthodes de disposition</h2>
+## Les boîtes flexibles et les autres méthodes de disposition
 
-<p>La spécification sur les boîtes flexibles contient <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">une définition</a> de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.</p>
+La spécification sur les boîtes flexibles contient [une définition](https://www.w3.org/TR/css-flexbox-1/#flex-containers) de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.
 
-<p>Un élément avec <code>display: flex</code> se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">les marges des conteneurs ne fusionneront pas</a>.</p>
+Un élément avec `display: flex` se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et [les marges des conteneurs ne fusionneront pas](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
 
-<p>Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (<em>cleared</em>) et qu'il devient flexible car son élément parent reçoit <code>display: flex</code>, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec <code>inline-block</code> ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.</p>
+Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (_cleared_) et qu'il devient flexible car son élément parent reçoit `display: flex`, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec `inline-block` ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.
 
-<p>Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit <code>display: flex</code>. Si vous retirez <code>display: flex</code>, vous pouvez voir que l'élément <code>.box</code> s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant <code>display: flex</code>, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.</p>
+Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit `display: flex`. Si vous retirez `display: flex`, vous pouvez voir que l'élément `.box` s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant `display: flex`, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}
 
-<h2 id="Les_boîtes_flexibles_et_la_disposition_en_grille">Les boîtes flexibles et la disposition en grille</h2>
+## Les boîtes flexibles et la disposition en grille
 
-<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">La disposition en grille (<em>CSS Grid</em>)</a> et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés <code>flex</code> qui auraient pu être affectées aux éléments enfants seront ignorées.</p>
+[La disposition en grille (_CSS Grid_)](/en-US/docs/Web/CSS/CSS_Grid_Layout) et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés `flex` qui auraient pu être affectées aux éléments enfants seront ignorées.
 
-<p>Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.</p>
+Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.
 
-<h3 id="Flexbox_grille_quelle_différence"><em>Flexbox</em> / grille : quelle différence ?</h3>
+### _Flexbox_ / grille : quelle différence ?
 
-<p>On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?</p>
+On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?
 
-<p>La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.</p>
+La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}
 
-<p>Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.</p>
+Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}
 
-<p>Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.</p>
+Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.
 
-<p>Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.</p>
+Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.
 
-<p>De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.</p>
+De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.
 
-<p>Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">cet article à propos des relations entre la grille CSS et les autres méthodes de disposition</a>. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.</p>
+Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter [cet article à propos des relations entre la grille CSS et les autres méthodes de disposition](/fr/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout). Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.
 
-<h2 id="Les_boîtes_flexibles_et_display_contents">Les boîtes flexibles et <code>display: contents</code></h2>
+## Les boîtes flexibles et `display: contents`
 
-<p>La valeur <code>contents</code> de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :</p>
+La valeur `contents` de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :
 
-<blockquote>
-<p>« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »</p>
-</blockquote>
+> « L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »
 
-<p>La valeur de la propriété <code>display</code> contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.</p>
+La valeur de la propriété `display` contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.
 
-<p>Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils <strong>directs</strong> du conteneur flexible.</p>
+Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils **directs** du conteneur flexible.
 
-<p>En ajoutant <code>display: contents</code> à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec <code>display: contents</code> afin que l'élément parent « revienne ».</p>
+En ajoutant `display: contents` à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec `display: contents` afin que l'élément parent « revienne ».
 
-<p>On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.</p>
+On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.
 
-<div class="warning">
-<p><strong>Attention :</strong> Utiliser <code>display: contents</code> entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé <code>display: none</code>). La valeur <code>contents</code> doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).</p>
-</div>
+> **Attention :** Utiliser `display: contents` entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé `display: none`). La valeur `contents` doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).
 
-<p>En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire <code>display: contents</code> dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.</p>
+En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire `display: contents` dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}
 
-<p>La prise en charge de <code>display:contents</code> est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge <code>display: contents</code> et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.</p>
+La prise en charge de `display:contents` est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge `display: contents` et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.
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 78a2dc9952..ea7df31530 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
@@ -9,133 +9,138 @@ tags:
 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
 original_slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.</p>
+Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.
 
-<h2 id="Pourquoi_choisir_les_boîtes_flexibles">Pourquoi choisir les boîtes flexibles ?</h2>
+## Pourquoi choisir les boîtes flexibles ?
 
-<p>Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">l'article sur les relations entre <em>flexbox</em> et les autres méthodes de disposition</a> où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.</p>
+Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec [l'article sur les relations entre _flexbox_ et les autres méthodes de disposition](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods) où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.
 
-<p>Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.</p>
+Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.
 
-<h2 id="La_navigation">La navigation</h2>
+## La navigation
 
-<p>Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.</p>
+Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.
 
-<p>Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.</p>
+Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.
 
-<h3 id="L'espace_distribué_en_dehors_des_éléments">L'espace distribué en dehors des éléments</h3>
+### L'espace distribué en dehors des éléments
 
-<p>Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a>, qui décrit comment aligner des objets sur l'axe principal.</p>
+Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide [Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container), qui décrit comment aligner des objets sur l'axe principal.
 
-<p>Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit <code>justify-content: space-between</code> afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur <code>space-around</code> ou, lorsqu'elle est prise en charge, la valeur <code>space-evenly</code>. On peut également utiliser <code>flex-start</code> afin de placer l'espace après les éléments ou encore <code>flex-end</code> pour placer l'espace avant les éléments voire <code>center</code> afin de centrer les éléments.</p>
+Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit `justify-content: space-between` afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur `space-around` ou, lorsqu'elle est prise en charge, la valeur `space-evenly`. On peut également utiliser `flex-start` afin de placer l'espace après les éléments ou encore `flex-end` pour placer l'espace avant les éléments voire `center` afin de centrer les éléments.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}
 
-<h3 id="L'espace_distribué_au_sein_des_éléments">L'espace distribué au sein des éléments</h3>
+### L'espace distribué au sein des éléments
 
-<p>On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans [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).
 
-<p>Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera <code>flex: auto</code> qui correspond à la notation raccourcie de <code>flex: 1 1 auto</code> — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.</p>
+Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera `flex: auto` qui correspond à la notation raccourcie de `flex: 1 1 auto` — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.
 
-<p>Dans l'exemple qui suit, vous pouvez modifier <code>flex: auto</code> pour utiliser <code>flex: 1</code> qui correspond à la notation raccourcie de <code>flex: 1 1 0</code> et qui permet d'avoir la même largeur pour chaque élément, car la base (<code>flex-basis</code>) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.</p>
+Dans l'exemple qui suit, vous pouvez modifier `flex: auto` pour utiliser `flex: 1` qui correspond à la notation raccourcie de `flex: 1 1 0` et qui permet d'avoir la même largeur pour chaque élément, car la base (`flex-basis`) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}
 
-<h2 id="La_navigation_séparée">La navigation séparée</h2>
+## La navigation séparée
 
-<p>Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.</p>
+Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.
 
-<p>Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour l'alignement sur l'axe principal</a>. Les éléments sont alignés le long de l'axe principal avec <code>flex-start</code>, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.</p>
+Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans [Utiliser les marges automatiques pour l'alignement sur l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal). Les éléments sont alignés le long de l'axe principal avec `flex-start`, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.
 
-<p>Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés <code>gap</code> de la spécification sur l'alignement des boîtes (<em>Box Alignment</em>) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.</p>
+Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés `gap` de la spécification sur l'alignement des boîtes (_Box Alignment_) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}
 
-<h2 id="Centrer_des_éléments">Centrer des éléments</h2>
+## Centrer des éléments
 
-<p>Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.</p>
+Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.
 
-<p>Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec <code>flex-start</code> ou à la fin avec <code>flex-end</code>.</p>
+Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec `flex-start` ou à la fin avec `flex-end`.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}
 
-<p>À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété <code>align-items</code> sur l'élément parent ou bien on cible l'élément voulu avec <code>align-self</code>.</p>
+À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété `align-items` sur l'élément parent ou bien on cible l'élément voulu avec `align-self`.
 
-<h2 id="Une_disposition_en_cartes_avec_un_pied_ajustable">Une disposition en cartes avec un pied ajustable</h2>
+## Une disposition en cartes avec un pied ajustable
 
-<p>Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.</p>
+Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.
 
-<p><img alt="Deux composants &quot;carte&quot; montrant que l'élément contenant le texte ne s'étire pas." src="flex-cards.png"></p>
+![Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas.](flex-cards.png)
 
-<p>On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}<code>: column</code>. Ensuite, on affecte un coefficient <code>flex: 1</code> à la zone du contenu (ce qui correspond à la notation raccourcie <code>flex: 1 1 0</code>) : l'élément pourra s'étirer ou se rétrécir avec une base <code>0</code>. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété <code>flex</code>, on peut voir le pied remonter pour être inscrit directement après le contenu.</p>
+On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}`: column`. Ensuite, on affecte un coefficient `flex: 1` à la zone du contenu (ce qui correspond à la notation raccourcie `flex: 1 1 0`) : l'élément pourra s'étirer ou se rétrécir avec une base `0`. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété `flex`, on peut voir le pied remonter pour être inscrit directement après le contenu.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}
 
-<h2 id="Les_objets_média">Les objets média</h2>
+## Les objets média
 
-<p>Un objet média est un motif classique en <em>design</em> web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.</p>
+Un objet média est un motif classique en _design_ web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.
 
-<p>On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.</p>
+On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.
 
-<p>Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec <code>flex-start</code> puis on définit <code>.content</code> avec <code>flex: 1</code>. Comme vu dans l'exemple précédent, <code>flex: 1</code> signifie que cette partie de la carte peut grandir.</p>
+Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec `flex-start` puis on définit `.content` avec `flex: 1`. Comme vu dans l'exemple précédent, `flex: 1` signifie que cette partie de la carte peut grandir.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}
 
-<p>Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.</p>
+Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.
 
-<p>Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera <code>auto</code> comme valeur pour <code>flex-basis</code>. Toute largeur {{cssxref("width")}} ou <code>max-width</code> appliquée à l'image sera utilisée comme mesure pour <code>flex-basis</code>.</p>
+Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera `auto` comme valeur pour `flex-basis`. Toute largeur {{cssxref("width")}} ou `max-width` appliquée à l'image sera utilisée comme mesure pour `flex-basis`.
 
-<pre class="brush: css">.image img {
+```css
+.image img {
   max-width: 100px;
 }
-</pre>
+```
 
-<p>On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec <code>flex: 1</code>, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser <code>flex: auto</code> et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).</p>
+On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec `flex: 1`, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser `flex: auto` et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).
 
-<pre class="brush: css">.media .content {
+```css
+.media .content {
   flex: 1;
   padding: 10px;
 }
 
 .image {
   flex: 1;
-}</pre>
+}
+```
 
-<p>On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser <code>flex: 1</code> pour le côté avec l'image et <code>flex: 3</code> pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base <code>flex-basis</code>  <code>0</code> et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de <code>flex-grow</code>. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+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).
 
-<pre class="brush: css">.media .content {
+```css
+.media .content {
   flex: 3;
   padding: 10px;
 }
 
 .image {
   flex: 1;
-}</pre>
+}
+```
 
-<h3 id="Inverser_la_position_de_l'objet_média">Inverser la position de l'objet média</h3>
+### Inverser la position de l'objet média
 
-<p>Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété <code>flex-direction</code> avec la valeur <code>row-reverse</code>. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe <code>flipped</code> (en plus de la classe existante <code>.media</code>). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.</p>
+Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété `flex-direction` avec la valeur `row-reverse`. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe `flipped` (en plus de la classe existante `.media`). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}
 
-<h2 id="Les_contrôles_de_formulaire">Les contrôles de formulaire</h2>
+## Les contrôles de formulaire
 
-<p>Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).</p>
+Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).
 
-<p>Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <code>&lt;button&gt;</code> et l'élément <code>&lt;input&gt;</code> dans un conteneur auquel on ajoute une bordure et pour lequel on a <code>display: flex</code>. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <code>&lt;input&gt;</code> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.</p>
+Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément `<button>` et l'élément `<input>` dans un conteneur auquel on ajoute une bordure et pour lequel on a `display: flex`. On utilise ensuite les propriétés flexibles afin de permettre à l'élément `<input>` de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}
 
-<p>On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.</p>
+On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.
 
-<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p>
+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}
 
-<p>De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.</p>
+De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.</p>
+En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.
 
-<p>Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.</p>
+Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.
diff --git a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
index f4e278deeb..32aa0de102 100644
--- a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
+++ b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md
@@ -8,122 +8,112 @@ tags:
 translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
 original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.</p>
+Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.
 
-<p>Le flux normal est défini par <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">la spécification CSS 2.1</a> qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (<em>block</em>) ou en ligne (<em>inline</em>) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.</p>
+Le flux normal est défini par [la spécification CSS 2.1](https://www.w3.org/TR/CSS2/visuren.html#normal-flow) qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (_block_) ou en ligne (_inline_) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.
 
-<p>Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :</p>
+Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :
 
-<blockquote>
-<p>« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.<br>
- <br>
- Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1</p>
-</blockquote>
+> « Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.
+>
+> Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1
 
-<p>Quant aux éléments du contexte de formatage en ligne :</p>
+Quant aux éléments du contexte de formatage en ligne :
 
-<blockquote>
-<p>« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (<em>padding</em>) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2</p>
-</blockquote>
+> « Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (_padding_) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2
 
-<p>On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.</p>
+On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.
 
-<h2 id="Les_éléments_qui_participent_à_un_contexte_de_formatage_de_bloc">Les éléments qui participent à un contexte de formatage de bloc</h2>
+## Les éléments qui participent à un contexte de formatage de bloc
 
-<p>Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.</p>
+Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.
 
-<p><img alt="" src="mdn-horizontal.png"></p>
+![](mdn-horizontal.png)
 
-<p>Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.</p>
+Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.
 
-<p><img alt="" src="mdn-vertical.png"></p>
+![](mdn-vertical.png)
 
-<p>Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.</p>
+Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.
 
-<p>Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.</p>
+Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}
 
-<p>Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.</p>
+Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}
 
-<p>Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.</p>
+Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}
 
-<h3 id="La_fusion_des_marges">La fusion des marges</h3>
+### La fusion des marges
 
-<p>La spécification indique que les marges verticales entre chaque éléments de bloc <em>fusionnent</em>. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.</p>
+La spécification indique que les marges verticales entre chaque éléments de bloc _fusionnent_. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.
 
-<p>Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de <code>40px</code> car la plus petite est « fusionnée » avec la plus grande.</p>
+Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de `40px` car la plus petite est « fusionnée » avec la plus grande.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}
 
-<p>Pour en savoir plus à propos de la fusion des marges, vous pouvez lire <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">l'article dédié à la fusion des marges</a>.</p>
+Pour en savoir plus à propos de la fusion des marges, vous pouvez lire [l'article dédié à la fusion des marges](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
 
-<div class="note">
-<p><strong>Note :</strong> Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.</p>
+> **Note :** Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.
+>
+> ![](box-model.png)
 
-<p><img alt="" src="box-model.png"></p>
-</div>
+## Les éléments qui participent à un contexte de formatage en ligne
 
-<h2 id="Les_éléments_qui_participent_à_un_contexte_de_formatage_en_ligne">Les éléments qui participent à un contexte de formatage en ligne</h2>
+Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).
 
-<p>Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).</p>
+Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.
 
-<p>Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.</p>
+{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}
 
-<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p>
+Les boîtes autour des mots, avant et après l'élément {{HTMLElement("&lt;strong&gt;")}} sont qualifiées de boîtes _anonymes_. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.
 
-<p>Les boîtes autour des mots, avant et après l'élément {{HTMLElement("&lt;strong&gt;")}} sont qualifiées de boîtes <em>anonymes</em>. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.</p>
+La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("&lt;strong&gt;")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.
 
-<p>La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("&lt;strong&gt;")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.</p>
+{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}
 
-<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p>
+Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter [le guide sur le modèle de formatage visuel](/fr/docs/Web/CSS/Visual_formatting_model).
 
-<p>Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter <a href="/fr/docs/Web/CSS/Visual_formatting_model">le guide sur le modèle de formatage visuel</a>.</p>
+## La propriété `display` et la disposition de flux
 
-<h2 id="La_propriété_display_et_la_disposition_de_flux">La propriété <code>display</code> et la disposition de flux</h2>
+En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété `display` définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification _CSS Display Model Level 3_, on en apprend plus sur la façon dont la propriété `display` modifie comportement des boîtes et des boîtes qu'elles génèrent.
 
-<p>En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété <code>display</code> définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification <em>CSS Display Model Level 3</em>, on en apprend plus sur la façon dont la propriété <code>display</code> modifie comportement des boîtes et des boîtes qu'elles génèrent.</p>
+Le type d'affichage d'un élément définit deux choses :
 
-<p>Le type d'affichage d'un élément définit deux choses :</p>
+- le type d'affichage extérieur, qui décrit comment la boîte s'affiche au sein des éléments du même contexte de formatage
+- le type d'affichage intérieur comment les boîtes situées à l'intérieur de cet élément doivent se comporter
 
-<ul>
- <li>le type d'affichage extérieur, qui décrit comment la boîte s'affiche au sein des éléments du même contexte de formatage</li>
- <li>le type d'affichage intérieur comment les boîtes situées à l'intérieur de cet élément doivent se comporter</li>
-</ul>
+Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué `display: flex`. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut `block`.
 
-<p>Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué <code>display: flex</code>. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut <code>block</code>.</p>
+Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a `display: flex`. Aussi, le type d'affichage intérieur vaut `flex` et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.
 
-<p>Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a <code>display: flex</code>. Aussi, le type d'affichage intérieur vaut <code>flex</code> et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.</p>
+{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}
 
-<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p>
+On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est `flow` et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.
 
-<p>On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est <code>flow</code> et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.</p>
+Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (`display: flex`) ou les grilles CSS (`display: grid`) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est `block`.
 
-<p>Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (<code>display: flex</code>) ou les grilles CSS (<code>display: grid</code>) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est <code>block</code>.</p>
+### Modifier le contexte de formatage auquel un élément participe
 
-<h3 id="Modifier_le_contexte_de_formatage_auquel_un_élément_participe">Modifier le contexte de formatage auquel un élément participe</h3>
+Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.
 
-<p>Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.</p>
+Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle `display: block` en ciblant les éléments `<strong>`. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.
 
-<p>Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle <code>display: block</code> en ciblant les éléments <code>&lt;strong&gt;</code>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.</p>
+{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}
 
-<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p>
+## Résumé
 
-<h2 id="Résumé">Résumé</h2>
+Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.
 
-<p>Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Model">Le module de spécification <em>CSS Basic Box Model</em> qui définit les propriétés de base pour le modèle de boîte</a></li>
- <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Apprendre - le fonctionnement du flux normal</a></li>
- <li><a href="/fr/docs/Web/HTML/Inline_elements">Les éléments HTML en ligne</a></li>
- <li><a href="/fr/docs/Web/HTML/Block-level_elements">Les éléments HTML de bloc</a></li>
-</ul>
+- [Le module de spécification _CSS Basic Box Model_ qui définit les propriétés de base pour le modèle de boîte](/fr/docs/Web/CSS/CSS_Box_Model)
+- [Apprendre - le fonctionnement du flux normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow)
+- [Les éléments HTML en ligne](/fr/docs/Web/HTML/Inline_elements)
+- [Les éléments HTML de bloc](/fr/docs/Web/HTML/Block-level_elements)
diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.md b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.md
index a1c3966d64..afd12bc61f 100644
--- a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.md
+++ b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.md
@@ -8,64 +8,62 @@ tags:
 translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
 original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement
 ---
-<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
+{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
 
-<p>Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.</p>
+Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.
 
-<h2 id="Qu'est-ce_que_le_dépassement">Qu'est-ce que le dépassement ?</h2>
+## Qu'est-ce que le dépassement ?
 
-<p>Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :</p>
+Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :
 
-<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}
 
-<p>Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété <code><a href="/fr/docs/Web/CSS/overflow">overflow</a></code>. La valeur initiale de cette propriété est <code>visible</code> et c'est pour cela qu'on voit le contenu dépasser.</p>
+Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété [`overflow`](/fr/docs/Web/CSS/overflow). La valeur initiale de cette propriété est `visible` et c'est pour cela qu'on voit le contenu dépasser.
 
-<h2 id="Contrôler_le_dépassement">Contrôler le dépassement</h2>
+## Contrôler le dépassement
 
-<p>La propriété <code>overflow</code> possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur <code>hidden</code>. Avec cette valeur, une partie du contenu peut ne pas être visible.</p>
+La propriété `overflow` possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur `hidden`. Avec cette valeur, une partie du contenu peut ne pas être visible.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}
 
-<p>Avec la valeur <code>scroll</code>, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.</p>
+Avec la valeur `scroll`, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}
 
-<p>Avec la valeur <code>auto</code>, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que <code>overflow: scroll</code> ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur <code>auto</code>, seules les barres de défilement nécessaires sont ajoutées.</p>
+Avec la valeur `auto`, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que `overflow: scroll` ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur `auto`, seules les barres de défilement nécessaires sont ajoutées.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}
 
-<p>Comme nous l'avons vu plus tôt, toute valeur qui est différente de <code>visible</code> créera un nouveau contexte de formatage de bloc.</p>
+Comme nous l'avons vu plus tôt, toute valeur qui est différente de `visible` créera un nouveau contexte de formatage de bloc.
 
-<div class="note">
-<p><strong>Note :</strong> Dans <a href="https://www.w3.org/TR/css-overflow-3/">le brouillon du module de spécification <em>Overflow</em> de niveau 3</a>, une valeur est ajoutée : <code>overflow: clip</code>. Cette valeur agira comme <code>overflow: hidden</code> mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.</p>
-</div>
+> **Note :** Dans [le brouillon du module de spécification _Overflow_ de niveau 3](https://www.w3.org/TR/css-overflow-3/), une valeur est ajoutée : `overflow: clip`. Cette valeur agira comme `overflow: hidden` mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.
 
-<p>Pour être tout à fait précis, la propriété <code>overflow</code> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> pour les propriétés <code><a href="/fr/docs/Web/CSS/overflow-x">overflow-x</a></code> et <code><a href="/fr/docs/Web/CSS/overflow-y">overflow-y</a></code>. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour <code>overflow-x</code> et la seconde pour <code>overflow-y</code>. Dans l'exemple qui suit, seule <code>overflow-y: scroll</code> est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.</p>
+Pour être tout à fait précis, la propriété `overflow` est une [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) pour les propriétés [`overflow-x`](/fr/docs/Web/CSS/overflow-x) et [`overflow-y`](/fr/docs/Web/CSS/overflow-y). Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour `overflow-x` et la seconde pour `overflow-y`. Dans l'exemple qui suit, seule `overflow-y: scroll` est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}
 
-<h2 id="Les_propriétés_relatives">Les propriétés relatives</h2>
+## Les propriétés relatives
 
-<p>Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">les modes d'écriture et la disposition en flux</a>, nous avons étudié des propriétés plus récentes <code>block-size</code> et <code>inline-size</code> qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : <code><a href="/fr/docs/Web/CSS/@media/overflow-block">overflow-block</a></code> et <code><a href="/fr/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>. Ces propriétés « logiques » correspondent aux propriétés « physiques » <code>overflow-x</code> et <code>overflow-y</code> où la correspondance varie en fonction du mode d'écriture du document.</p>
+Dans le guide sur [les modes d'écriture et la disposition en flux](/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes), nous avons étudié des propriétés plus récentes `block-size` et `inline-size` qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : [`overflow-block`](/fr/docs/Web/CSS/@media/overflow-block) et [`overflow-inline`](/fr/docs/Web/CSS/@media/overflow-inline). Ces propriétés « logiques » correspondent aux propriétés « physiques » `overflow-x` et `overflow-y` où la correspondance varie en fonction du mode d'écriture du document.
 
-<p>À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.</p>
+À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.
 
-<h2 id="Gérer_le_dépassement">Gérer le dépassement</h2>
+## Gérer le dépassement
 
-<p>Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.</p>
+Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.
 
-<h3 id="Dépassement_sur_l'axe_en_ligne">Dépassement sur l'axe en ligne</h3>
+### Dépassement sur l'axe en ligne
 
-<p>La propriété <code><a href="/fr/docs/Web/CSS/text-overflow">text-overflow</a></code> indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur <code>clip</code> qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur <code>ellipsis</code> permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.</p>
+La propriété [`text-overflow`](/fr/docs/Web/CSS/text-overflow) indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur `clip` qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur `ellipsis` permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}
 
-<h3 id="Dépassement_sur_l'axe_de_bloc">Dépassement sur l'axe de bloc</h3>
+### Dépassement sur l'axe de bloc
 
-<p>Il existe également une proposition pour une propriété <code>block-overflow</code>. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.</p>
+Il existe également une proposition pour une propriété `block-overflow`. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.
 
-<p>Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.</p>
+Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.</p>
+Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.
diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md
index 2291678c48..076c443908 100644
--- a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md
+++ b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md
@@ -8,84 +8,78 @@ tags:
 translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
 original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture
 ---
-<p>La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les propriétés liées à la disposition</a> devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.</p>
+La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. [Les propriétés liées à la disposition](/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal) devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.
 
-<p>Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux <a href="#Ressources_externes">ressources externes</a> ainsi qu'à la section <a href="#Voir_aussi">Voir aussi</a> en fin de page.</p>
+Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux [ressources externes](#Ressources_externes) ainsi qu'à la section [Voir aussi](#Voir_aussi) en fin de page.
 
-<h2 id="La_spécification_des_modes_d'écriture">La spécification des modes d'écriture</h2>
+## La spécification des modes d'écriture
 
-<p>Le module de spécification <em>CSS Writing Modes</em> de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction <a href="https://drafts.csswg.org/css-writing-modes-3/#text-flow">de la spécification </a>quant aux modes d'écriture :</p>
+Le module de spécification _CSS Writing Modes_ de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction [de la spécification ](https://drafts.csswg.org/css-writing-modes-3/#text-flow)quant aux modes d'écriture :
 
-<blockquote>
-<p>« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (<em>inline</em>) et selon sa direction de bloc. »</p>
-</blockquote>
+> « En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (_inline_) et selon sa direction de bloc. »
 
-<p>La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.</p>
+La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.
 
-<p>La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété <code>writing-mode</code> contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction <code>vertical-lr</code>, on pourra utiliser <code>writing-mode: vertical-lr</code> sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.</p>
+La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété `writing-mode` contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction `vertical-lr`, on pourra utiliser `writing-mode: vertical-lr` sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.
 
-<p>Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).</p>
+Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).
 
-<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}
 
-<h2 id="La_propriété_writing-mode_et_le_flux_de_bloc">La propriété <code>writing-mode</code> et le flux de bloc</h2>
+## La propriété `writing-mode` et le flux de bloc
 
-<p>La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs <code>horizontal-tb</code>, <code>vertical-rl</code> et <code>vertical-lr</code>. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est <code>horizontal-tb</code> ce qui signifie que l'axe de bloc est dirigé de haut en bas (<code>tb</code> pour <em>top to bottom</em> qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes <code>horizontal-tb</code>.</p>
+La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs `horizontal-tb`, `vertical-rl` et `vertical-lr`. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est `horizontal-tb` ce qui signifie que l'axe de bloc est dirigé de haut en bas (`tb` pour _top to bottom_ qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes `horizontal-tb`.
 
-<p>Voici un exemple avec <code>horizontal-tb</code>.</p>
+Voici un exemple avec `horizontal-tb`.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}
 
-<p>La valeur <code>vertical-rl</code> permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.</p>
+La valeur `vertical-rl` permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}
 
-<p>Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour <code>writing-mode</code> : <code>vertical-lr</code>. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.</p>
+Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour `writing-mode` : `vertical-lr`. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}
 
-<h2 id="Les_boîtes_utilisant_un_mode_d'écriture_différent_de_leur_parent">Les boîtes utilisant un mode d'écriture différent de leur parent</h2>
+## Les boîtes utilisant un mode d'écriture différent de leur parent
 
-<p>Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait <code>display: inline-block</code>.</p>
+Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait `display: inline-block`.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}
 
-<p>Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut <code>flow</code>, le type d'affichage calculé sera <code>flow-root</code>. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec <code>horizontal-tb</code> contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.</p>
+Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut `flow`, le type d'affichage calculé sera `flow-root`. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec `horizontal-tb` contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}
 
-<h2 id="Les_éléments_remplacés">Les éléments remplacés</h2>
+## Les éléments remplacés
 
-<p>Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété <code>writing-mode</code>. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.</p>
+Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété `writing-mode`. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}
 
-<h2 id="Les_propriétés_et_valeurs_logiques">Les propriétés et valeurs logiques</h2>
+## Les propriétés et valeurs logiques
 
-<p>Lorsqu'on travaille avec des modes d'écriture autres que <code>horizontal-tb</code>, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec <code>horizontal-tb</code> cette largeur sera selon la direction en ligne. Mais avec le mode <code>vertical-lr</code> cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.</p>
+Lorsqu'on travaille avec des modes d'écriture autres que `horizontal-tb`, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec `horizontal-tb` cette largeur sera selon la direction en ligne. Mais avec le mode `vertical-lr` cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}
 
-<p>C'est pour cela que des propriétés <em>logiques</em> ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit <code>inline-size: 100px</code> sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, <code>inline-size</code> correspondra à la direction en ligne quoi qu'il arrive.</p>
+C'est pour cela que des propriétés _logiques_ ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit `inline-size: 100px` sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, `inline-size` correspondra à la direction en ligne quoi qu'il arrive.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}
 
-<p>Le module de spécification <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">CSS sur les propriétés et valeurs logiques</a> contient des versions logiques des propriétés contrôlant les marges, le remplissage (<em>padding</em>) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions <em>physiques</em>.</p>
+Le module de spécification [CSS sur les propriétés et valeurs logiques](/en-US/docs/Web/CSS/CSS_Logical_Properties) contient des versions logiques des propriétés contrôlant les marges, le remplissage (_padding_) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions _physiques_.
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.</p>
+Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écritures</a></li>
-</ul>
+- [Les modes d'écritures](/fr/docs/Web/CSS/CSS_Writing_Modes)
 
-<h2 id="Ressources_externes">Ressources externes</h2>
+## Ressources externes
 
-<ul>
- <li><em><a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes (en anglais)</a></em> par Jen Simmons sur <em>24 Ways</em></li>
-</ul>
+- _[CSS Writing Modes (en anglais)](https://24ways.org/2016/css-writing-modes/)_ par Jen Simmons sur _24 Ways_
 
-<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
+{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md
index 5a796df22f..d3d899d180 100644
--- a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md
+++ b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md
@@ -8,62 +8,58 @@ tags:
 translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
 original_slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">le précédent guide</a>, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.</p>
+Dans [le précédent guide](/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal), nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.
 
-<p>Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément <code>strong</code>. Le titre et les paragraphes sont des éléments de blocs et l'élément <code>strong</code> est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type <code>display</code> externe qui vaut <code>block</code>.</p>
+Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément `strong`. Le titre et les paragraphes sont des éléments de blocs et l'élément `strong` est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type `display` externe qui vaut `block`.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}
 
-<p>Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.</p>
+Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.
 
-<h2 id="Retirer_un_élément_du_flux">Retirer un élément du flux</h2>
+## Retirer un élément du flux
 
-<p>Tous les éléments d'un document sont dans le flux à l'exception :</p>
+Tous les éléments d'un document sont dans le flux à l'exception :
 
-<ul>
- <li>des éléments flottants</li>
- <li>des éléments avec <code>position: absolute</code> ou avec <code>position: fixed</code></li>
- <li>de l'élément racine (<code>html</code>)</li>
-</ul>
+- des éléments flottants
+- des éléments avec `position: absolute` ou avec `position: fixed`
+- de l'élément racine (`html`)
 
-<p>Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou <em>Block Formatting Context</em> (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.</p>
+Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou _Block Formatting Context_ (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.
 
-<h3 id="Les_éléments_flottants">Les éléments flottants</h3>
+### Les éléments flottants
 
-<p>Dans cet exemple, on a un élément <code>div</code> puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément <code>div</code>. L'élément <code>div</code> est désormais en dehors du flux.</p>
+Dans cet exemple, on a un élément `div` puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément `div`. L'élément `div` est désormais en dehors du flux.
 
-<p>Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.</p>
+Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}
 
-<p>On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.</p>
+On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.
 
-<h3 id="Le_positionnement_absolu">Le positionnement absolu</h3>
+### Le positionnement absolu
 
-<p>En utilisant <code>position: absolute</code> ou <code>position: fixed</code> sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec <code>position</code> <code>absolute</code> et décalé avec les valeurs <code>top: 30px</code> et <code>right: 30px</code>. Cet élément est retiré du flux du document.</p>
+En utilisant `position: absolute` ou `position: fixed` sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec `position` `absolute` et décalé avec les valeurs `top: 30px` et `right: 30px`. Cet élément est retiré du flux du document.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}
 
-<p>Utiliser <code>position: fixed</code> retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (<em>viewport</em>) plutôt que par rapport au bloc englobant.</p>
+Utiliser `position: fixed` retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (_viewport_) plutôt que par rapport au bloc englobant.
 
-<p>Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.</p>
+Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.
 
-<h3 id="Le_positionnement_relatif_et_le_flux">Le positionnement relatif et le flux</h3>
+### Le positionnement relatif et le flux
 
-<p>Si on fournit un positionnement relatif en appliquant <code>position: relative</code> à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.</p>
+Si on fournit un positionnement relatif en appliquant `position: relative` à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}
 
-<p>Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant <code>position: absolute</code> n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.</p>
+Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant `position: absolute` n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a> dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications relatives aux contextes de formatage</a>.</p>
+Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de [contexte de formatage de bloc](/fr/docs/Web/CSS/Block_formatting_context) dans [Explications relatives aux contextes de formatage](/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">En apprendre plus sur le positionnement</a></li>
-</ul>
+- [En apprendre plus sur le positionnement](/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement)
diff --git a/files/fr/web/css/css_flow_layout/index.md b/files/fr/web/css/css_flow_layout/index.md
index c4932f195c..8eec20d495 100644
--- a/files/fr/web/css/css_flow_layout/index.md
+++ b/files/fr/web/css/css_flow_layout/index.md
@@ -7,36 +7,32 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Flow_Layout
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le <em>flux normal</em> ou « disposition en flux » (<em>Flow Layout</em>) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du <em>flux</em>, il est traité indépendamment.</p>
+Le _flux normal_ ou « disposition en flux » (_Flow Layout_) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du _flux_, il est traité indépendamment.
 
-<p>Avec un flux normal, les <strong>éléments en ligne (<em>inline elements</em>)</strong> sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">le mode d'écriture</a> du document. Les <strong>éléments de bloc (<em>block elements</em>)</strong> sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.</p>
+Avec un flux normal, les **éléments en ligne (_inline elements_)** sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon [le mode d'écriture](/fr/docs/Web/CSS/CSS_Writing_Modes) du document. Les **éléments de bloc (_block elements_)** sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.
 
-<p>Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.</p>
+Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.
 
-<h2 id="Exemple_simple">Exemple simple</h2>
+## Exemple simple
 
-<p>Dans l'exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes avec des bordures vertes sont des éléments de bloc. Ces deux éléments s'affichent l'un en dessous de l'autre.</p>
+Dans l'exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes avec des bordures vertes sont des éléments de bloc. Ces deux éléments s'affichent l'un en dessous de l'autre.
 
-<p>La première phrase contient également un élément {{HTMLElement("span")}} avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.</p>
+La première phrase contient également un élément {{HTMLElement("span")}} avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.
 
-<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les dispositions de bloc et en ligne dans le flux normal</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement">La disposition en flux et les dépassements</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">La disposition en flux et les modes d'écriture</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications sur les contextes de formatage</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors">Être ou non dans le flux</a></li>
-</ul>
+- [Les dispositions de bloc et en ligne dans le flux normal](/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal)
+- [La disposition en flux et les dépassements](/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement)
+- [La disposition en flux et les modes d'écriture](/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture)
+- [Explications sur les contextes de formatage](/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage)
+- [Être ou non dans le flux](/fr/docs/Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors)
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+### Termes du glossaire
 
-<ul>
- <li><a href="/fr/docs/Glossary/Block/Block_(CSS)">Bloc (CSS)</a></li>
-</ul>
+- [Bloc (CSS)](</fr/docs/Glossary/Block/Block_(CSS)>)
diff --git a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md
index 6478b943bc..96a22400e7 100644
--- a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md
+++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md
@@ -8,83 +8,79 @@ tags:
 translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
 original_slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.</p>
+Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.
 
-<p>Sur une page web, tout s'inscrit dans un <strong>contexte de formatage</strong>, une zone qui a été définie pour être organisée d'une certaine façon. Un <strong>contexte de formatage en bloc</strong> (ou <em>block formatting context</em> (<abbr title="Block Formatting Context">BFC</abbr>)) organisera ses éléments fils selon une disposition en bloc, un <strong>contexte de formatage flexible</strong> organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.</p>
+Sur une page web, tout s'inscrit dans un **contexte de formatage**, une zone qui a été définie pour être organisée d'une certaine façon. Un **contexte de formatage en bloc** (ou _block formatting context_ (BFC)) organisera ses éléments fils selon une disposition en bloc, un **contexte de formatage flexible** organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.
 
-<h2 id="Le_contexte_de_formatage_de_bloc">Le contexte de formatage de bloc</h2>
+## Le contexte de formatage de bloc
 
-<p>L'élément <code>html</code> définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <code>&lt;html&gt;&lt;/html&gt;</code> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (<em>Block formatting context</em> ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (<em>padding</em>) d'un élément interagissent avec les autres blocs du même contexte.</p>
+L'élément `html` définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans `<html></html>` s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (_Block formatting context_ ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (_padding_) d'un élément interagissent avec les autres blocs du même contexte.
 
-<h3 id="Créer_un_nouveau_contexte_de_formatage_de_bloc">Créer un nouveau contexte de formatage de bloc</h3>
+### Créer un nouveau contexte de formatage de bloc
 
-<p>L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">fusionneront</a> que pour des éléments d'un même contexte formatage.</p>
+L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne [fusionneront](/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges) que pour des éléments d'un même contexte formatage.
 
-<p>Au delà de l'élément racine du document (ici l'élément <code>html</code>), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :</p>
+Au delà de l'élément racine du document (ici l'élément `html`), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :
 
-<ul>
- <li>Pour les éléments flottants ({{cssxref("float")}})</li>
- <li>Pour les éléments positionnés de façon absolue (y compris avec {{cssxref("position", "position: fixed", "#fixed")}} ou {{cssxref("position", "position: sticky", "#sticky")}})</li>
- <li>Pour les éléments avec {{cssxref("display", "display: inline-block", "#inline-block")}}</li>
- <li>Pour les cellules de tableau ou pour les éléments avec <code>display: table-cell</code>, y compris pour les cellules de tableau anonymes créées avec les propriétés <code>display: table-*</code></li>
- <li>Les légendes de tableau ou les éléments avec <code>display: table-caption</code></li>
- <li>Les éléments de blocs pour lesquels <code>overflow</code> a une valeur différente de <code>visible</code></li>
- <li><code>display: flow-root</code></li>
- <li>Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code> ou <code>strict</code></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox">Les élément flexibles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les éléments de grille</a></li>
- <li><a href="fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes">Les conteneurs multi-colonnes</a></li>
- <li>Les éléments avec {{cssxref("column-span")}}:<code>all</code></li>
-</ul>
+- Pour les éléments flottants ({{cssxref("float")}})
+- Pour les éléments positionnés de façon absolue (y compris avec {{cssxref("position", "position: fixed", "#fixed")}} ou {{cssxref("position", "position: sticky", "#sticky")}})
+- Pour les éléments avec {{cssxref("display", "display: inline-block", "#inline-block")}}
+- Pour les cellules de tableau ou pour les éléments avec `display: table-cell`, y compris pour les cellules de tableau anonymes créées avec les propriétés `display: table-*`
+- Les légendes de tableau ou les éléments avec `display: table-caption`
+- Les éléments de blocs pour lesquels `overflow` a une valeur différente de `visible`
+- `display: flow-root`
+- Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, `content` ou `strict`
+- [Les élément flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox)
+- [Les éléments de grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base)
+- [Les conteneurs multi-colonnes](fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes)
+- Les éléments avec {{cssxref("column-span")}}:`all`
 
-<p>Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.</p>
+Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.
 
-<p>Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <code>&lt;div&gt;</code> où une bordure est appliquée. Le contenu de cet élément <code>div</code> flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du <code>div</code> passe sur le contenu flottant. Comme expliqué dans <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">le guide sur les éléments appartenant ou non au flux</a>, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du <code>div</code> ne contienne que le contenu et pas l'élément flottant.</p>
+Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément `<div>` où une bordure est appliquée. Le contenu de cet élément `div` flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du `div` passe sur le contenu flottant. Comme expliqué dans [le guide sur les éléments appartenant ou non au flux](/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow), l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du `div` ne contienne que le contenu et pas l'élément flottant.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}
 
-<p>En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer <code>overflow: auto</code> ou à utiliser d'autres valeurs que <code>overflow: visible</code>.</p>
+En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer `overflow: auto` ou à utiliser d'autres valeurs que `overflow: visible`.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}
 
-<p>En utilisant <code>overflow: auto</code>, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément <code>div</code> devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.</p>
+En utilisant `overflow: auto`, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément `div` devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.
 
-<p>Toutefois, utiliser <code>overflow</code> pour créer un nouveau contexte de formatage peut poser problème car la propriété <code>overflow</code> est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.</p>
+Toutefois, utiliser `overflow` pour créer un nouveau contexte de formatage peut poser problème car la propriété `overflow` est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.
 
-<h3 id="Créer_un_contexte_de_formatage_de_bloc_explicite_utiliser_display_flow-root">Créer un contexte de formatage de bloc explicite : utiliser <code>display: flow-root</code></h3>
+### Créer un contexte de formatage de bloc explicite : utiliser `display: flow-root`
 
-<p>Une valeur plus récente de <code>display</code> permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant <code>display: flow-root</code> sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.</p>
+Une valeur plus récente de `display` permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant `display: flow-root` sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}
 
-<p>Ainsi, en utilisant <code>display: flow-root;</code> sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.</p>
+Ainsi, en utilisant `display: flow-root;` sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.
 
-<p>Le nom de cette valeur, <code>flow-root</code>, prend son sens lorsqu'on voit que l'élément agit comme une racine (<code>root</code>) pour le nouveau contexte qui est créé.</p>
+Le nom de cette valeur, `flow-root`, prend son sens lorsqu'on voit que l'élément agit comme une racine (`root`) pour le nouveau contexte qui est créé.
 
-<h2 id="Un_contexte_de_formatage_en_ligne">Un contexte de formatage en ligne</h2>
+## Un contexte de formatage en ligne
 
-<p>Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.</p>
+Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.
 
-<p>Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (<em>padding</em>), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.</p>
+Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (_padding_), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}
 
-<h2 id="Les_autres_contexte_de_formatage">Les autres contexte de formatage</h2>
+## Les autres contexte de formatage
 
-<p>Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.</p>
+Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">les interactions entre le flux normal et les différents modes d'écriture</a>.</p>
+Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons [les interactions entre le flux normal et les différents modes d'écriture](/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Contexte de formatage de bloc (ou <em>Block Formatting Context</em> (BFC) en anglais)</a></li>
- <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Modèle de formatage visuel</a></li>
- <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Modèle de boîte CSS</a></li>
-</ul>
+- [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)
 
-<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
+{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_fonts/index.md b/files/fr/web/css/css_fonts/index.md
index 76d002b94e..f528870b38 100644
--- a/files/fr/web/css/css_fonts/index.md
+++ b/files/fr/web/css/css_fonts/index.md
@@ -8,17 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Fonts
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong>CSS Fonts</strong> est un module CSS qui définit des propriétés relatives aux polices de caractères et la façon dont les ressources des polices sont chargées. Il permet de définir le style d'une police, comme sa famille, sa taille ou sa graisse ainsi que la variante du glyphe à utiliser dans le cas des polices disposant de plusieurs glyphes par caractère. Il permet également de définir la hauteur d'une ligne.</p>
+**CSS Fonts** est un module CSS qui définit des propriétés relatives aux polices de caractères et la façon dont les ressources des polices sont chargées. Il permet de définir le style d'une police, comme sa famille, sa taille ou sa graisse ainsi que la variante du glyphe à utiliser dans le cas des polices disposant de plusieurs glyphes par caractère. Il permet également de définir la hauteur d'une ligne.
 
-<h2 id="Exemple_simple">Exemple simple</h2>
+## Exemple simple
 
-<p>L'exemple qui suit illustre l'utilisation simple de propriétés relatives aux polices afin de mettre en forme le texte d'un paragraphe.</p>
+L'exemple qui suit illustre l'utilisation simple de propriétés relatives aux polices afin de mettre en forme le texte d'un paragraphe.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 600px;
   margin: 0 auto;
   font-family: "Helvetica Neue", "Arial",  sans-serif;
@@ -27,100 +28,72 @@ translation_of: Web/CSS/CSS_Fonts
   font-variant-ligatures: normal;
   font-size: 2rem;
   letter-spacing: 1px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```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.
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemple_simple', '100%', '200')}}</p>
-
-<h2 id="Exemples_utilisant_les_polices_variables">Exemples utilisant les polices variables</h2>
-
-<p>Vous pouvez trouver plusieurs exemples utilisant les polices variables sur <a href="https://v-fonts.com/">v-fonts.com</a> et <a href="https://www.axis-praxis.org/">axis-praxis.org</a>. Notre <a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">guide sur les polices variables</a> contient des informations et des exemples d'utilisation.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<ul>
- <li>{{cssxref("font")}}</li>
- <li>{{cssxref("font-family")}}</li>
- <li>{{cssxref("font-feature-settings")}}</li>
- <li>{{cssxref("font-kerning")}}</li>
- <li>{{cssxref("font-language-override")}}</li>
- <li>{{cssxref("font-optical-sizing")}}</li>
- <li>{{cssxref("font-size")}}</li>
- <li>{{cssxref("font-size-adjust")}}</li>
- <li>{{cssxref("font-stretch")}}</li>
- <li>{{cssxref("font-style")}}</li>
- <li>{{cssxref("font-synthesis")}}</li>
- <li>{{cssxref("font-variant")}}</li>
- <li>{{cssxref("font-variant-alternates")}}</li>
- <li>{{cssxref("font-variant-caps")}}</li>
- <li>{{cssxref("font-variant-east-asian")}}</li>
- <li>{{cssxref("font-variant-ligatures")}}</li>
- <li>{{cssxref("font-variant-numeric")}}</li>
- <li>{{cssxref("font-variant-position")}}</li>
- <li>{{cssxref("font-variation-settings")}}</li>
- <li>{{cssxref("font-weight")}}</li>
- <li>{{cssxref("line-height")}}</li>
-</ul>
-
-<h3 id="Règles">Règles @</h3>
-
-<ul>
-  <li>{{cssxref("@font-face")}}</li>
-  <li>{{cssxref("@font-feature-values")}}</li>
- </ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals">Mise en forme du texte et utilisation des polices</a></dt>
- <dd>Dans cet article, destiné aux débutants, nous abordons en détail les fonctionnalités pour la mise en forme du texte et la modification de la police.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">Guide sur les caractéristiques de police OpenType</a></dt>
- <dd>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Guide sur les polices variables</a></dt>
- <dd>Les polices variables sont une évolution de la spécification OpenType qui permet de faire varier différents axes d'une police (provenant d'un seul fichier) plutôt que d'avoir plusieurs polices d'une même fonte. Cet article fournit l'ensemble des informations nécessaires à l'exploration des polices variables.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td>Ajout de <code>font-variation-settings</code> (ainsi que des propriétés de haut niveau associées) et de <code>font-optical-sizing</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Ajout de <code>font-feature-settings</code> (ainsi que des propriétés de haut niveau associées)</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#font', '')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemple_simple', '100%', '200')}}
+
+## Exemples utilisant les polices variables
+
+Vous pouvez trouver plusieurs exemples utilisant les polices variables sur [v-fonts.com](https://v-fonts.com/) et [axis-praxis.org](https://www.axis-praxis.org/). Notre [guide sur les polices variables](/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) contient des informations et des exemples d'utilisation.
+
+## Référence
+
+### Propriétés
+
+- {{cssxref("font")}}
+- {{cssxref("font-family")}}
+- {{cssxref("font-feature-settings")}}
+- {{cssxref("font-kerning")}}
+- {{cssxref("font-language-override")}}
+- {{cssxref("font-optical-sizing")}}
+- {{cssxref("font-size")}}
+- {{cssxref("font-size-adjust")}}
+- {{cssxref("font-stretch")}}
+- {{cssxref("font-style")}}
+- {{cssxref("font-synthesis")}}
+- {{cssxref("font-variant")}}
+- {{cssxref("font-variant-alternates")}}
+- {{cssxref("font-variant-caps")}}
+- {{cssxref("font-variant-east-asian")}}
+- {{cssxref("font-variant-ligatures")}}
+- {{cssxref("font-variant-numeric")}}
+- {{cssxref("font-variant-position")}}
+- {{cssxref("font-variation-settings")}}
+- {{cssxref("font-weight")}}
+- {{cssxref("line-height")}}
+
+### Règles @
+
+- {{cssxref("@font-face")}}
+- {{cssxref("@font-feature-values")}}
+
+## Guides
+
+- [Mise en forme du texte et utilisation des polices](/fr/docs/Learn/CSS/Styling_text/Fundamentals)
+  - : Dans cet article, destiné aux débutants, nous abordons en détail les fonctionnalités pour la mise en forme du texte et la modification de la police.
+- [Guide sur les caractéristiques de police OpenType](/fr/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide)
+  - : Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.
+- [Guide sur les polices variables](/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)
+  - : Les polices variables sont une évolution de la spécification OpenType qui permet de faire varier différents axes d'une police (provenant d'un seul fichier) plutôt que d'avoir plusieurs polices d'une même fonte. Cet article fournit l'ensemble des informations nécessaires à l'exploration des polices variables.
+
+## Spécifications
+
+| Spécification                                                            | État                             | Commentaires                                                                                                        |
+| ------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Fonts')}}                                     | {{Spec2('CSS4 Fonts')}} | Ajout de `font-variation-settings` (ainsi que des propriétés de haut niveau associées) et de `font-optical-sizing`. |
+| {{SpecName('CSS3 Fonts')}}                                     | {{Spec2('CSS3 Fonts')}} | Ajout de `font-feature-settings` (ainsi que des propriétés de haut niveau associées)                                |
+| {{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}} | {{Spec2('CSS2.1')}}         |                                                                                                                     |
+| {{SpecName('CSS1', '#font', '')}}                             | {{Spec2('CSS1')}}         | Définition initiale.                                                                                                |
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 ed04d4ca73..70da8b93a5 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
@@ -9,181 +9,166 @@ tags:
 translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide
 original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (<em>kerning</em> en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec  CSS.</p>
+Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (_kerning_ en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec  CSS.
 
-<p>Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.</p>
+Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.
 
-<p>En plus des caractéristiques communément utilisées telles que les ligatures ou <a href="https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens">les chiffres elzéviriens</a>, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.</p>
+En plus des caractéristiques communément utilisées telles que les ligatures ou [les chiffres elzéviriens](https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens), il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.
 
-<div class="warning">
-<p><strong>Attention :</strong> Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise <code>font-feature-settings</code> pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.</p>
-</div>
+> **Attention :** Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise `font-feature-settings` pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.
 
-<h2 id="Découvrir_la_disponibilité_des_caractéristiques_pour_certaines_polices">Découvrir la disponibilité des caractéristiques pour certaines polices</h2>
+## Découvrir la disponibilité des caractéristiques pour certaines polices
 
-<p>Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter <a href="https://wakamaifondue.com">wakamaifondue.com</a>, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site <a href="https://axis-praxis.org">Axis-praxis.org</a> fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné.</p>
+Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter [wakamaifondue.com](https://wakamaifondue.com), y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site [Axis-praxis.org](https://axis-praxis.org) fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné.
 
-<h2 id="Pourquoi_utiliser_les_caractéristiques_d'une_police">Pourquoi utiliser les caractéristiques d'une police ?</h2>
+## Pourquoi utiliser les caractéristiques d'une police ?
 
-<p>Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant :</p>
+Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant :
 
-<ul>
- <li><strong>Les ligatures</strong> telles que œ ou celles qui existent entre 'ff' répartissent plus également l'espace entre les lettres et permettent un lecture plus douce.</li>
- <li><strong>Les fractions</strong> permettent d'améliorer la compréhension et la lecture de certains textes (des recettes par exemple).</li>
- <li><strong>L'écriture des nombres</strong> au sein de paragraphes qui suivent la ligne de base du texte ou au contraire dont les jambages passent sous la ligne de base.</li>
-</ul>
+- **Les ligatures** telles que œ ou celles qui existent entre 'ff' répartissent plus également l'espace entre les lettres et permettent un lecture plus douce.
+- **Les fractions** permettent d'améliorer la compréhension et la lecture de certains textes (des recettes par exemple).
+- **L'écriture des nombres** au sein de paragraphes qui suivent la ligne de base du texte ou au contraire dont les jambages passent sous la ligne de base.
 
-<p>Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné</p>
+Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné
 
-<blockquote>
-<p>Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. <em>Tim Brown, Directeur de la typographie chez Adobe</em>.</p>
-</blockquote>
+> Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. _Tim Brown, Directeur de la typographie chez Adobe_.
 
-<h3 id="Au-delà_du_style_le_contenu_même">Au-delà du style : le contenu même</h3>
+### Au-delà du style : le contenu même
 
-<p>Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu.</p>
+Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu.
 
-<h2 id="Les_caractéristiques">Les caractéristiques</h2>
+## Les caractéristiques
 
-<p>Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C.</p>
+Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C.
 
-<div class="note">
-<p><strong>Note :</strong> Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts).</p>
-</div>
+> **Note :** Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts).
 
-<h3 id="Le_crénage_(kerning)_(cssxref(font-kerning))">Le crénage (<em>kerning</em>) ({{cssxref("font-kerning")}})</h3>
+### Le crénage (_kerning_) ({{cssxref("font-kerning")}})
 
-<p>Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte.</p>
+Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte.
 
-<div>{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}</div>
+{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
 
-<h3 id="Les_formes_alternatives_(cssxref(font-variant-alternates))">Les formes alternatives ({{cssxref("font-variant-alternates")}})</h3>
+### Les formes alternatives ({{cssxref("font-variant-alternates")}})
 
-<p>Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement.</p>
+Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement.
 
-<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}</div>
+{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}} Dans ce cas, `@stylistic(alternates)` affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique  `@styleset(alt-a)`, seule l'apparence de la lettre a minuscule changera.
 
-<div> </div>
+Vous pouvez modifier :
 
-<div>Dans ce cas, <code>@stylistic(alternates)</code> affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique  <code>@styleset(alt-a)</code>, seule l'apparence de la lettre a minuscule changera.</div>
+```css
+font-variant-alternates: styleset(alt-a);
+```
 
-<p>Vous pouvez modifier :</p>
+en :
 
-<pre class="brush: css">font-variant-alternates: styleset(alt-a);</pre>
+```css
+font-variant-alternates: styleset(alt-g);
+```
 
-<p>en :</p>
+et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.
 
-<pre class="brush: css">font-variant-alternates: styleset(alt-g);
-</pre>
+#### En savoir plus sur les formes alternatives
 
-<p>et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.</p>
+- [Lien vers la spécification de la propriété `font-variant-alternates`](https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates)
+- {{cssxref("font-variante-alternates")}}
 
-<h4 id="En_savoir_plus_sur_les_formes_alternatives">En savoir plus sur les formes alternatives</h4>
+### Les ligatures ({{cssxref("font-variant-ligatures")}})
 
-<ul>
- <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates">Lien vers la spécification de la propriété <code>font-variant-alternates</code></a></li>
- <li>{{cssxref("font-variante-alternates")}}</li>
-</ul>
+Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »).
 
-<h3 id="Les_ligatures_(cssxref(font-variant-ligatures))">Les ligatures ({{cssxref("font-variant-ligatures")}})</h3>
+Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches :
 
-<p>Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »).</p>
+{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
 
-<p>Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches :</p>
+### Les positions ({{cssxref("font-variant-position")}})
 
-<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}</div>
+Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}).
 
-<h3 id="Les_positions_(cssxref(font-variant-position))">Les positions ({{cssxref("font-variant-position")}})</h3>
+{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
 
-<p>Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}).</p>
+### Les capitales ({{cssxref("font-variant-caps")}})
 
-<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}</div>
+Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » [petites capitales](https://fr.wikipedia.org/wiki/Petite_capitale) qui sont généralement utilisées pour les acronymes et les abréviations.
 
-<h3 id="Les_capitales_(cssxref(font-variant-caps))">Les capitales ({{cssxref("font-variant-caps")}})</h3>
+{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
 
-<p>Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » <a href="https://fr.wikipedia.org/wiki/Petite_capitale">petites capitales</a> qui sont généralement utilisées pour les acronymes et les abréviations.</p>
+### Les chiffres ({{cssxref("font-variant-numeric")}})
 
-<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}</div>
+Il existe généralement différents types de chiffre dans les polices :
 
-<h3 id="Les_chiffres_(cssxref(font-variant-numeric))">Les chiffres ({{cssxref("font-variant-numeric")}})</h3>
+- Les chiffres classiques (ou chiffres Didot) qui sont alignées sur la ligne de base du texte et qui ont la même hauteur que les majuscules
+- [Les chiffres elzéviriens](https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens) qui ont des jambages et des hampes à la façon des autres lettres minuscules. Ces chiffres sont conçus pour être utilisés en incise et se « fondre » au sein des glyphes alentours, à la manières des petites capitales.
 
-<p>Il existe généralement différents types de chiffre dans les polices :</p>
+On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre).
 
-<ul>
- <li>Les chiffres classiques (ou chiffres Didot) qui sont alignées sur la ligne de base du texte et qui ont la même hauteur que les majuscules</li>
- <li><a href="https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens">Les chiffres elzéviriens</a> qui ont des jambages et des hampes à la façon des autres lettres minuscules. Ces chiffres sont conçus pour être utilisés en incise et se « fondre » au sein des glyphes alentours, à la manières des petites capitales.</li>
-</ul>
+Deux types de fractions peuvent être prises en charge avec cette propriété :
 
-<p>On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre).</p>
+- Les fractions avec barre diagonale.
+- Les fractions empilées verticalement.
 
-<p>Deux types de fractions peuvent être prises en charge avec cette propriété :</p>
+Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible.
 
-<ul>
- <li>Les fractions avec barre diagonale.</li>
- <li>Les fractions empilées verticalement.</li>
-</ul>
+#### Chiffres classiques et chiffres elzéviriens
 
-<p>Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible.</p>
+{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
 
-<h4 id="Chiffres_classiques_et_chiffres_elzéviriens">Chiffres classiques et chiffres elzéviriens</h4>
+#### Fractions, nombres ordinaux et zéro barré
 
-<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}</div>
+{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
 
-<h4 id="Fractions_nombres_ordinaux_et_zéro_barré">Fractions, nombres ordinaux et zéro barré</h4>
+### Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})
 
-<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}</div>
+Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher.
 
-<h3 id="Caractères_d'Asie_orientale_(cssxref(font-variant-east-asian))">Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})</h3>
+{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
 
-<p>Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher.</p>
+> **Note :** Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.
 
-<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}</div>
+### Propriété raccourcie ({{Cssxref("font-variant")}})
 
-<div class="note">
-<p><strong>Note :</strong> Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.</p>
-</div>
+La propriété raccourcie `font-variant` permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur `normal`, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant `none`,  `font-variant-ligatures` vaudra `none` et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque `none` est fourni).
 
-<h3 id="Propriété_raccourcie_(Cssxref(font-variant))">Propriété raccourcie ({{Cssxref("font-variant")}})</h3>
+{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
 
-<p>La propriété raccourcie <code>font-variant</code> permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur <code>normal</code>, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant <code>none</code>,  <code>font-variant-ligatures</code> vaudra <code>none</code> et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque <code>none</code> est fourni).</p>
+## Utiliser `font-feature-settings`
 
-<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}</div>
+La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser [des propriétés CSS personnalisées](/en-US/docs/Web/CSS/Using_CSS_custom_properties) afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.
 
-<h2 id="Utiliser_font-feature-settings">Utiliser <code>font-feature-settings</code></h2>
+Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.
 
-<p>La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">des propriétés CSS personnalisées</a> afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.</p>
+La syntaxe générale suivra cette structure :
 
-<p>Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.</p>
-
-<p>La syntaxe générale suivra cette structure :</p>
-
-<pre class="brush: css">.small-caps {
+```css
+.small-caps {
   font-feature-settings: "smcp", "c2sc";
 }
-</pre>
+```
 
-<p>Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante :</p>
+Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante :
 
-<pre class="brush: css">.no-ligatures {
+```css
+.no-ligatures {
   font-feature-settings: "liga" 0, "dlig" 0;
-}</pre>
+}
+```
 
-<h4 id="En_savoir_plus_sur_les_codes_des_caractéristiques_font-feature-settings">En savoir plus sur les codes des caractéristiques <code>font-feature-settings</code></h4>
+#### En savoir plus sur les codes des caractéristiques `font-feature-settings`
 
-<ul>
- <li><a href="https://sparanoid.com/lab/opentype-features/">Une démonstration des caractéristiques OpenType</a></li>
- <li><a href="https://en.wikipedia.org/wiki/List_of_typographic_features">La liste des caractéristiques OpenType sur Wikipédia</a></li>
-</ul>
+- [Une démonstration des caractéristiques OpenType](https://sparanoid.com/lab/opentype-features/)
+- [La liste des caractéristiques OpenType sur Wikipédia](https://en.wikipedia.org/wiki/List_of_typographic_features)
 
-<h2 id="Utiliser_la_détection_de_fonctionnalités_CSS">Utiliser la détection de fonctionnalités CSS</h2>
+## Utiliser la détection de fonctionnalités CSS
 
-<p>Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire.</p>
+Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire.
 
-<p>Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec <code>font-feature-settings</code> et une seule valeur pour {{cssxref("font-variant-caps")}}.</p>
+Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec `font-feature-settings` et une seule valeur pour {{cssxref("font-variant-caps")}}.
 
-<pre class="brush: css">.small-caps {
+```css
+.small-caps {
    font-feature-settings: "smcp", "c2sc";
 }
 
@@ -193,38 +178,27 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType
        font-variant-caps: all-small-caps;
    }
 }
-</pre>
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<h3 id="Démonstrations_de_caractéristiques_OpenType_en_CSS">Démonstrations de caractéristiques OpenType en CSS</h3>
+### Démonstrations de caractéristiques OpenType en CSS
 
-<ul>
- <li><a href="https://sparanoid.com/lab/opentype-features/">Démonstration CSS complète des caractéristiques OpenType (en anglais)</a>
+- [Démonstration CSS complète des caractéristiques OpenType (en anglais)](https://sparanoid.com/lab/opentype-features/)
 
-  <ul>
-   <li>Note : la complétude invoquée dans le titre n'est pas garantie…</li>
-  </ul>
- </li>
-</ul>
+  - Note : la complétude invoquée dans le titre n'est pas garantie…
 
-<h3 id="Outils_web_d'analyse_de_polices">Outils web d'analyse de polices</h3>
+### Outils web d'analyse de polices
 
-<ul>
- <li><a href="https://wakamaifondue.com">Wakamai Fondue (en anglais)</a></li>
- <li><a href="https://axis-praxis.org">Axis Praxis (en anglais)</a></li>
-</ul>
+- [Wakamai Fondue (en anglais)](https://wakamaifondue.com)
+- [Axis Praxis (en anglais)](https://axis-praxis.org)
 
-<h3 id="Spécifications_W3C">Spécifications W3C</h3>
+### Spécifications W3C
 
-<ul>
- <li><a href="https://drafts.csswg.org/css-fonts-3/#font-rend-props">Les propriétés relatives aux caractéristiques de police dans le module CSS Fonts de niveau 3 (en anglais)</a></li>
- <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates"><code>font-variant-alternatives</code>, spécifiée dans le module CSS Fonts de niveau 4 (en anglais)</a></li>
-</ul>
+- [Les propriétés relatives aux caractéristiques de police dans le module CSS Fonts de niveau 3 (en anglais)](https://drafts.csswg.org/css-fonts-3/#font-rend-props)
+- [`font-variant-alternatives`, spécifiée dans le module CSS Fonts de niveau 4 (en anglais)](https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates)
 
-<h3 id="Autres_ressources">Autres ressources</h3>
+### Autres ressources
 
-<ul>
- <li><a href="https://helpx.adobe.com/fonts/using/use-open-type-features.html">Utiliser les caractéristiques OpenType (en anglais)</a>, écrit par Tim Brown</li>
- <li><a href="https://helpx.adobe.com/fonts/using/open-type-syntax.html">La syntaxe Adobe pour les caractéristiques OpenType en CSS (en anglais)</a></li>
-</ul>
+- [Utiliser les caractéristiques OpenType (en anglais)](https://helpx.adobe.com/fonts/using/use-open-type-features.html), écrit par Tim Brown
+- [La syntaxe Adobe pour les caractéristiques OpenType en CSS (en anglais)](https://helpx.adobe.com/fonts/using/open-type-syntax.html)
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 487a4b1948..c8f7e28163 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
@@ -9,231 +9,229 @@ tags:
 translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide
 original_slug: Web/CSS/CSS_Fonts/Guide_polices_variables
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong>Les polices variables</strong> sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.</p>
+**Les polices variables** sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.
 
-<div class="warning">
-<p><strong>Attention :</strong> Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.</p>
-</div>
+> **Attention :** Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.
 
-<h2 id="Qu'est-ce_qu'une_police_variable">Qu'est-ce qu'une police variable ?</h2>
+## Qu'est-ce qu'une police variable ?
 
-<p>Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.</p>
+Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.
 
-<h3 id="Les_polices_standard_ou_polices_statiques">Les polices standard ou polices statiques</h3>
+### Les polices standard ou polices statiques
 
-<p>Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police.</p>
+Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police.
 
-<p>Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).</p>
+Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).
 
-<h3 id="Les_polices_variables">Les polices variables</h3>
+### Les polices variables
 
-<p>Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.</p>
+Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.
 
-<p>Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.</p>
+Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.
 
-<h4 id="Quelques_notes_à_propos_des_familles_de_polices_des_corps_et_des_variantes">Quelques notes à propos des familles de polices, des corps et des variantes</h4>
+#### Quelques notes à propos des familles de polices, des corps et des variantes
 
-<p>On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable.</p>
+On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable.
 
-<p>Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}.</p>
+Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}.
 
-<h2 id="L'axe_de_variation">L'axe de variation</h2>
+## L'axe de variation
 
-<p>Le concept clé des polices variables est celui d'<strong>axe de variation</strong> qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement).</p>
+Le concept clé des polices variables est celui d'**axe de variation** qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement).
 
-<p>Comme indiqué dans la spécification, deux types d'axe existent : <strong>les axes enregistrés</strong> et <strong>les axes spécifiques</strong> (<em>custom axes</em>) :</p>
+Comme indiqué dans la spécification, deux types d'axe existent : **les axes enregistrés** et **les axes spécifiques** (_custom axes_) :
 
-<ul>
- <li>
-  <p>Les axes enregistrés sont ceux que l'on rencontre le plus souvent et qui ont donc été standardisés dans la spécification. À l'heure actuelle, il existe 5 axes enregistrés : le corps, la largeur, la pente, l'italique et la taille optique. Chacun de ces axes possède un attribut CSS correspondant.</p>
- </li>
- <li>
-  <p>Les axes spécifiques peuvent être n'importe quel axe défini par le concepteur de la police. Chaque axe doit simplement être défini par une étiquette avec quatre lettres qui permettront de l'identifier. Ces étiquettes pourront être utilisées dans le code CSS pour indiquer quel niveau de variation utiliser (cf. exemples ci-après).</p>
- </li>
-</ul>
+- Les axes enregistrés sont ceux que l'on rencontre le plus souvent et qui ont donc été standardisés dans la spécification. À l'heure actuelle, il existe 5 axes enregistrés : le corps, la largeur, la pente, l'italique et la taille optique. Chacun de ces axes possède un attribut CSS correspondant.
+- Les axes spécifiques peuvent être n'importe quel axe défini par le concepteur de la police. Chaque axe doit simplement être défini par une étiquette avec quatre lettres qui permettront de l'identifier. Ces étiquettes pourront être utilisées dans le code CSS pour indiquer quel niveau de variation utiliser (cf. exemples ci-après).
 
-<h3 id="Les_axes_enregistrés_et_les_attributs_CSS_existants">Les axes enregistrés et les attributs CSS existants</h3>
+### Les axes enregistrés et les attributs CSS existants
 
-<p>Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}).</p>
+Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}).
 
-<p>Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, <code>font-variation-settings</code> doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement.</p>
+Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, `font-variation-settings` doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement.
 
-<h4 id="Notes">Notes</h4>
+#### Notes
 
-<ol>
- <li>
-  <p>Les noms d'axes utilisés avec <code>font-variation-settings</code> 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 :</p>
+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 :
 
-  <pre class="brush: css">font-variation-settings: 'wght' 375, 'GRAD' 88;</pre>
+    ```css
+    font-variation-settings: 'wght' 375, 'GRAD' 88;
+    ```
 
-  <p><code>wght</code> correspondra à l'axe enregistré du même nom et <code>GRAD</code> à un axe spécifique.</p>
- </li>
- <li>
-  <p>Si on a défini des valeurs avec <code>font-variation-settings</code> 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 <a href="/fr/docs/Web/CSS/Using_CSS_custom_properties">des propriétés CSS personnalisées</a> 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).</p>
- </li>
-</ol>
+    `wght` correspondra à l'axe enregistré du même nom et `GRAD` à un axe spécifique.
 
-<h3 id="La_graisse_(weight)">La graisse (<em>weight</em>)</h3>
+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).
 
-<p>La graisse (représenté par l'étiquette <code>wght</code>) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que <code>normal</code> ou <code>bold</code> qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables.</p>
+### La graisse (_weight_)
 
-<p>On notera qu'il n'est pas possible d'utiliser la déclaration <code>@font-face</code> afin qu'un point donné sur cet axe corresponde au mot-clé <code>bold</code> (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS :</p>
+La graisse (représenté par l'étiquette `wght`) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que `normal` ou `bold` qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables.
 
-<pre class="brush: css">font-weight: 375;
+On notera qu'il n'est pas possible d'utiliser la déclaration `@font-face` afin qu'un point donné sur cet axe corresponde au mot-clé `bold` (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS :
 
-font-variation-settings: 'wght' 375;</pre>
+```css
+font-weight: 375;
 
-<p>Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.</p>
+font-variation-settings: 'wght' 375;
+```
 
-<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div>
+Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.
 
-<h3 id="La_largeur_(width)">La largeur (<em>width</em>)</h3>
+{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
 
-<p>La largeur (indiquée par l'étiquette <code>wdth</code>) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible.</p>
+### La largeur (_width_)
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utilise la notation « bas niveau » avec <code>font-variation-settings</code>, on n'écrit pas le caractère %.</p>
-</div>
+La largeur (indiquée par l'étiquette `wdth`) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible.
 
-<pre class="brush: css">font-stretch: 115%;
+> **Note :** Lorsqu'on utilise la notation « bas niveau » avec `font-variation-settings`, on n'écrit pas le caractère %.
+
+```css
+font-stretch: 115%;
 
 font-variation-settings: 'wdth' 115;
-</pre>
+```
 
-<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.
 
-<div>{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}</div>
+{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
 
-<h3 id="L'italique">L'italique</h3>
+### L'italique
 
-<p>L'axe italique (<code>ital</code>) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux.</p>
+L'axe italique (`ital`) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux.
 
-<p>En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété <code>font-synthesis: none;</code> qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse).</p>
+En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété `font-synthesis: none;` qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse).
 
-<pre class="brush: css">font-style: italic;
+```css
+font-style: italic;
 
 font-variation-settings: 'ital' 1;
 
-font-synthesis: none;</pre>
+font-synthesis: none;
+```
 
-<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.
 
-<div>{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}</div>
+{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
 
-<h3 id="La_pente_(slant)">La pente (<em>slant</em>)</h3>
+### La pente (_slant_)
 
-<p>La pente (indiquée par l'étiquette <code>slnt</code>), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur <code>font-style</code> qui peut être utilisé pour cet axe.</p>
+La pente (indiquée par l'étiquette `slnt`), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur `font-style` qui peut être utilisé pour cet axe.
 
-<div class="note">
-<p><strong>Note :</strong> Le mot-clé <code>deg</code> ne doit pas être utilisé comme unité pour la notation avec <code>font-variation-settings</code>.</p>
-</div>
+> **Note :** Le mot-clé `deg` ne doit pas être utilisé comme unité pour la notation avec `font-variation-settings`.
 
-<pre class="brush: css">font-style: oblique 14deg;
+```css
+font-style: oblique 14deg;
 
-font-variation-settings: 'slnt' 14;</pre>
+font-variation-settings: 'slnt' 14;
+```
 
-<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.
 
-<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div>
+{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
 
-<h3 id="La_taille_optique">La taille optique</h3>
+### La taille optique
 
-<p>La taille optique, indiquée par l'étiquette <code>opsz</code>, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran.</p>
+La taille optique, indiquée par l'étiquette `opsz`, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran.
 
-<p>Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police.</p>
+Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police.
 
-<p>La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de <code>font-size</code> mais on peut tout à fait les manipuler avec la syntaxe de bas niveau <code>font-variation-settings</code>.</p>
+La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de `font-size` mais on peut tout à fait les manipuler avec la syntaxe de bas niveau `font-variation-settings`.
 
-<p>Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur <code>font-optical-sizing</code> permet uniquement d'utiliser les valeurs <code>auto</code> ou <code>none</code> et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec <code>font-variation-settings: 'opsz' &lt;num&gt;</code>, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour <code>font-size</code> et pour <code>opsz</code>. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique.</p>
+Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur `font-optical-sizing` permet uniquement d'utiliser les valeurs `auto` ou `none` et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec `font-variation-settings: 'opsz' <num>`, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour `font-size` et pour `opsz`. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique.
 
-<pre class="brush: css">font-optical-sizing: auto;
+```css
+font-optical-sizing: auto;
 
-font-variation-settings: 'opsz' 36;</pre>
+font-variation-settings: 'opsz' 36;
+```
 
-<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.
 
-<div>{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}</div>
+{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
 
-<h3 id="Les_axes_spécifiques">Les axes spécifiques</h3>
+### Les axes spécifiques
 
-<p>Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude.</p>
+Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude.
 
-<h3 id="Le_grade">Le grade</h3>
+### Le grade
 
-<p>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.</p>
+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.
 
-<pre class="brush: css">font-variation-settings: 'GRAD' 88;</pre>
+```css
+font-variation-settings: 'GRAD' 88;
+```
 
-<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.
 
-<div>{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}</div>
+{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
 
-<h3 id="Utiliser_une_police_variable_les_changements_pour_font-face">Utiliser une police variable : les changements pour <code>@font-face</code></h3>
+### Utiliser une police variable : les changements pour `@font-face`
 
-<p>Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes.</p>
+Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes.
 
-<p>La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs <code>font-weight</code> et <code>font-stretch</code>.</p>
+La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs `font-weight` et `font-stretch`.
 
-<h4 id="Exemple_d'une_police_standard_réale_droite">Exemple d'une police standard réale droite :</h4>
+#### Exemple d'une police standard réale droite :
 
-<pre class="brush: css">@font-face {
+```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;
 }
-</pre>
+```
 
-<h4 id="Exemple_d'une_police_avec_une_forme_droite_et_une_forme_italique">Exemple d'une police avec une forme droite et une forme italique :</h4>
+#### Exemple d'une police avec une forme droite et une forme italique :
 
-<pre class="brush: css">@font-face {
+```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;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à <code>font-style</code> indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique.</p>
-</div>
+> **Note :** Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à `font-style` indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique.
 
-<h4 id="Exemple_d'une_police_qui_ne_contient_que_des_italiques_et_aucun_caractère_droit">Exemple d'une police qui ne contient que des italiques et aucun caractère droit :</h4>
+#### Exemple d'une police qui ne contient que des italiques et aucun caractère droit :
 
-<pre class="brush: css">@font-face {
+```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;
-}</pre>
+}
+```
 
-<h4 id="Exemple_d'une_police_avec_un_axe_de_pente">Exemple d'une police avec un axe de pente :</h4>
+#### Exemple d'une police avec un axe de pente :
 
-<pre class="brush: css">@font-face {
+```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;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple <code>woff2</code> à la place de <code>woff2-variations</code>), mais mieux vaut utiliser la syntaxe la plus précise si possible.</p>
-</div>
+> **Note :** La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple `woff2` à la place de `woff2-variations`), mais mieux vaut utiliser la syntaxe la plus précise si possible.
 
-<div class="note">
-<p><strong>Note :</strong> Fournir des valeurs d'intervalle pour <code>font-weight</code>, <code>font-stretch</code> et <code>font-style</code> empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs <code>font-weight</code> ou <code>font-stretch</code>. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec <code>font-variation-settings</code> !</p>
-</div>
+> **Note :** Fournir des valeurs d'intervalle pour `font-weight`, `font-stretch` et `font-style` empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs `font-weight` ou `font-stretch`. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec `font-variation-settings` !
 
-<h2 id="Amélioration_progressive_et_anciens_navigateurs">Amélioration progressive et anciens navigateurs</h2>
+## Amélioration progressive et anciens navigateurs
 
-<p>La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge.</p>
+La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge.
 
-<pre class="brush: css">h1 {
+```css
+h1 {
  font-family: some-non-variable-font-family;
 }
 
@@ -241,22 +239,21 @@ font-variation-settings: 'opsz' 36;</pre>
  h1 {
     font-family: some-variable-font-family;
  }
-}</pre>
+}
+```
 
-<h2 id="Pages_d'exemples">Pages d'exemples</h2>
+## Pages d'exemples
 
-<p>Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à <code>font-variation-settings</code> et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (<em>hover</em>) sur l'élément <code>h2</code> qui ne joue que sur l'axe de grade.</p>
+Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à `font-variation-settings` et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (_hover_) sur l'élément `h2` qui ne joue que sur l'axe de grade.
 
-<div>{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}</div>
+{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://drafts.csswg.org/css-fonts-4">Module de spécification CSS Fonts de niveau 4 (au stade de brouillon) (en anglais)</a></li>
- <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview">Introduction Microsoft aux variations Open Type (en anglais)</a></li>
- <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg">Registre des étiquettes d'axe de variation - Microsoft OpenType Design (en anglais)</a></li>
- <li><a href="https://wakamaifondue.com">Wakamai Fondue (en anglais)</a> (un site qui permet d'explorer les axes et caractéristiques d'une police)</li>
- <li><a href="https://www.axis-praxis.org">Axis Praxis (en anglais)</a> (une site qui permet de manipuler les axes de polices variables)</li>
- <li><a href="https://v-fonts.com">V-Fonts.com (en anglais)</a> (un catalogue de polices variables)</li>
- <li><a href="https://play.typedetail.com">Font Playground (en anglais)</a> (un autre site de manipulation des polices variables)</li>
-</ul>
+- [Module de spécification CSS Fonts de niveau 4 (au stade de brouillon) (en anglais)](https://drafts.csswg.org/css-fonts-4)
+- [Introduction Microsoft aux variations Open Type (en anglais)](https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview)
+- [Registre des étiquettes d'axe de variation - Microsoft OpenType Design (en anglais)](https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg)
+- [Wakamai Fondue (en anglais)](https://wakamaifondue.com) (un site qui permet d'explorer les axes et caractéristiques d'une police)
+- [Axis Praxis (en anglais)](https://www.axis-praxis.org) (une site qui permet de manipuler les axes de polices variables)
+- [V-Fonts.com (en anglais)](https://v-fonts.com) (un catalogue de polices variables)
+- [Font Playground (en anglais)](https://play.typedetail.com) (un autre site de manipulation des polices variables)
diff --git a/files/fr/web/css/css_fragmentation/index.md b/files/fr/web/css/css_fragmentation/index.md
index 31f3a1c63d..b9e4526d47 100644
--- a/files/fr/web/css/css_fragmentation/index.md
+++ b/files/fr/web/css/css_fragmentation/index.md
@@ -9,38 +9,23 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Fragmentation
 ---
-<div>{{cssref}}</div>
+{{cssref}}
 
-<p><em><strong>CSS Fragmentation</strong></em> est un module CSS qui décrit la façon dont le contenu est divisé (fragmenté) entre plusieurs <a href="/en-US/docs/Web/CSS/Paged_Media">pages</a>, régions ou <a href="/en-US/docs/Web/CSS/CSS_Columns">colonnes</a>.</p>
+**_CSS Fragmentation_** est un module CSS qui décrit la façon dont le contenu est divisé (fragmenté) entre plusieurs [pages](/en-US/docs/Web/CSS/Paged_Media), régions ou [colonnes](/en-US/docs/Web/CSS/CSS_Columns).
 
-<p>La fragmentation se produit lorsqu'une boîte en ligne se retrouve sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne au sein d'un conteneur de colonne ou sur un saut de page lorsque le document est imprimé. Chaque morceau de l'élément ainsi divisé est appelé un <em>fragment</em>.</p>
+La fragmentation se produit lorsqu'une boîte en ligne se retrouve sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne au sein d'un conteneur de colonne ou sur un saut de page lorsque le document est imprimé. Chaque morceau de l'élément ainsi divisé est appelé un _fragment_.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<ul>
- <li>{{cssxref("box-decoration-break")}}</li>
- <li>{{cssxref("break-after")}}</li>
- <li>{{cssxref("break-before")}}</li>
- <li>{{cssxref("break-inside")}}</li>
- <li>{{cssxref("orphans")}}</li>
- <li>{{cssxref("widows")}}</li>
-</ul>
+- {{cssxref("box-decoration-break")}}
+- {{cssxref("break-after")}}
+- {{cssxref("break-before")}}
+- {{cssxref("break-inside")}}
+- {{cssxref("orphans")}}
+- {{cssxref("widows")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fragmentation')}}</td>
-   <td>{{Spec2('CSS3 Fragmentation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | État                                     | Commentaires         |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} | Définition initiale. |
diff --git a/files/fr/web/css/css_generated_content/index.md b/files/fr/web/css/css_generated_content/index.md
index 1892fb99c2..be8fda6c8a 100644
--- a/files/fr/web/css/css_generated_content/index.md
+++ b/files/fr/web/css/css_generated_content/index.md
@@ -8,39 +8,20 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Generated_Content
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Generated Content</strong></em> est un module CSS qui définit comment ajouter du contenu à un élément.</p>
+**_CSS Generated Content_** est un module CSS qui définit comment ajouter du contenu à un élément.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("content")}}</li>
- <li>{{cssxref("quotes")}}</li>
-</ul>
+- {{cssxref("content")}}
+- {{cssxref("quotes")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Content")}}</td>
-   <td>{{Spec2("CSS3 Content")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | État                             | Commentaires         |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("CSS3 Content")}} | {{Spec2("CSS3 Content")}} |                      |
+| {{SpecName('CSS2.1')}}         | {{Spec2('CSS2.1')}}         | Définition initiale. |
diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md
index 2fe6ab6f2c..119d3ec21a 100644
--- a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md
+++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md
@@ -10,16 +10,16 @@ tags:
 translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout
 original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}
 
-<p>En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.</p>
+En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.
 
+## Placement automatique
 
-<h2 id="Placement_automatique">Placement automatique</h2>
-
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -27,45 +27,47 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 10px;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<p>{{EmbedLiveSample('Placement_automatique', '500', '230')}}</p>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
 </div>
+```
+
+{{EmbedLiveSample('Placement_automatique', '500', '230')}}
 
-<h2 id="Définir_des_règles_pour_le_placement_automatique">Définir des règles pour le placement automatique</h2>
+## Définir des règles pour le placement automatique
 
-<p>Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec <code>grid-template-rows</code>, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.</p>
+Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec `grid-template-rows`, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.
 
-<h3 id="Dimensionner_les_lignes_de_la_grille_implicite">Dimensionner les lignes de la grille implicite</h3>
+### Dimensionner les lignes de la grille implicite
 
-<p>Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.</p>
+Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.
 
-<p>Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété <code>grid-auto-rows</code>. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :</p>
+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 :
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -73,38 +75,42 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 10px;
   grid-auto-rows: 100px;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Dimensionner_les_lignes_de_la_grille_implicite', '500', '330')}}</p>
+{{EmbedLiveSample('Dimensionner_les_lignes_de_la_grille_implicite', '500', '330')}}
 
-<h3 id="Dimensionner_les_lignes_avec_minmax">Dimensionner les lignes avec minmax()</h3>
-<p>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.</p>
+### Dimensionner les lignes avec minmax()
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+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;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -112,46 +118,49 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre
-    &lt;br&gt;Cette cellule
-    &lt;br&gt;a du contenu
-    &lt;br&gt;supplémentaire
-    &lt;br&gt;et max vaut auto
-    &lt;br&gt;afin que la ligne
-    &lt;br&gt;se développe.
-  &lt;/div&gt;
-  &lt;div&gt;Five&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css">.wrapper {
+```
+
+```html
+<div class="wrapper">
+  <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>
+  <div>Five</div>
+</div>
+```
+
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 10px;
   grid-auto-rows: minmax(100px, auto);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Dimensionner_les_lignes_avec_minmax', '500', '330')}}</p>
+{{EmbedLiveSample('Dimensionner_les_lignes_avec_minmax', '500', '330')}}
 
-<h3 id="Dimensionner_les_lignes_avec_une_liste_de_pistes">Dimensionner les lignes avec une liste de pistes</h3>
+### Dimensionner les lignes avec une liste de pistes
 
-<p>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 <code>200px</code>. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
    border: 2px solid #f76707;
@@ -159,54 +168,57 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
    background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-   &lt;div&gt;Un&lt;/div&gt;
-   &lt;div&gt;Deux&lt;/div&gt;
-   &lt;div&gt;Trois&lt;/div&gt;
-   &lt;div&gt;Quatre&lt;/div&gt;
-   &lt;div&gt;Cinq&lt;/div&gt;
-   &lt;div&gt;Six&lt;/div&gt;
-   &lt;div&gt;Sept&lt;/div&gt;
-   &lt;div&gt;Huit&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css">.wrapper {
+```
+
+```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>
+```
+
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 10px;
   grid-auto-rows: 100px 200px;
 }
-</pre>
-
-<p>{{EmbedLiveSample('Dimensionner_les_lignes_avec_une_liste_de_pistes', '500', '330')}}</p>
+```
 
+{{EmbedLiveSample('Dimensionner_les_lignes_avec_une_liste_de_pistes', '500', '330')}}
 
-<h3 id="Utiliser_le_placement_automatique_pour_les_colonnes">Utiliser le placement automatique pour les colonnes</h3>
+### Utiliser le placement automatique pour les colonnes
 
-<p>On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur <code>column</code>. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.</p>
+On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur `column`. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.
 
-<p>Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.</p>
+Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-rows: repeat(3, 200px);
   grid-gap: 10px;
   grid-auto-flow: column;
   grid-auto-columns: 300px 100px;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -214,42 +226,44 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-  &lt;div&gt;Six&lt;/div&gt;
-  &lt;div&gt;Sept&lt;/div&gt;
-  &lt;div&gt;Huit&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```
+
+```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>
+```
 
-<p>{{EmbedLiveSample('Utiliser_le_placement_automatique_pour_les_colonnes', '500', '640')}}</p>
+{{EmbedLiveSample('Utiliser_le_placement_automatique_pour_les_colonnes', '500', '640')}}
 
-<h2 id="Lordre_des_éléments_placés_automatiquement">L'ordre des éléments placés automatiquement</h2>
+## L'ordre des éléments placés automatiquement
 
-<p>Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">l'algorithme de placement des objets sur la grille</a>, mais voyons ici les quelques règles simples qu'il faut principalement retenir.</p>
+Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement [l'algorithme de placement des objets sur la grille](https://drafts.csswg.org/css-grid/#auto-placement-algo), mais voyons ici les quelques règles simples qu'il faut principalement retenir.
 
-<h3 id="Modification_de_lordre_du_document">Modification de l'ordre du document</h3>
+### Modification de l'ordre du document
 
-<p>Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section  <em>“order modified document order”</em>. Cela signifie que si on utilise uniquement la propriété <code>order</code>, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.</p>
+Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section  _“order modified document order”_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.
 
-<h3 id="Les_éléments_avec_des_propriétés_de_placement">Les éléments avec des propriétés de placement</h3>
+### Les éléments avec des propriétés de placement
 
-<p>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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -257,32 +271,34 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-  &lt;div&gt;Six&lt;/div&gt;
-  &lt;div&gt;Sept&lt;/div&gt;
-  &lt;div&gt;Huit&lt;/div&gt;
-  &lt;div&gt;Neuf&lt;/div&gt;
-  &lt;div&gt;Dix&lt;/div&gt;
-  &lt;div&gt;Onze&lt;/div&gt;
-  &lt;div&gt;Douze&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css">.wrapper {
+```
+
+```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>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+```
+
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 100px;
@@ -296,49 +312,52 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
   grid-column: 1 / 3;
   grid-row: 1 / 3;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Les_éléments_avec_des_propriétés_de_placement', '500', '450')}}</p>
+{{EmbedLiveSample('Les_éléments_avec_des_propriétés_de_placement', '500', '450')}}
 
-<h3 id="Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes">Gérer les éléments qui s'étalent sur plusieurs pistes</h3>
+### Gérer les éléments qui s'étalent sur plusieurs pistes
 
-<p>On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur <code>span 2</code>. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.</p>
+On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur `span 2`. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.
 
-<p>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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
   border: 2px solid #f76707;
   border-radius: 5px;
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-  &lt;div&gt;Six&lt;/div&gt;
-  &lt;div&gt;Sept&lt;/div&gt;
-  &lt;div&gt;Huit&lt;/div&gt;
-  &lt;div&gt;Neuf&lt;/div&gt;
-  &lt;div&gt;Dix&lt;/div&gt;
-  &lt;div&gt;Onze&lt;/div&gt;
-  &lt;div&gt;Douze&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css">.wrapper {
+```
+
+```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>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+```
+
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 100px;
@@ -357,51 +376,54 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
   grid-column: 1 / 3;
   grid-row: 1 / 3;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes', '500', '770')}}</p>
+{{EmbedLiveSample('Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes', '500', '770')}}
 
-<h3 id="Combler_les_espaces">Combler les espaces</h3>
+### Combler les espaces
 
-<p>En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.</p>
+En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.
 
-<p>Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur <code>dense</code>. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec <code>column</code>. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : <code>grid-auto-flow: column dense</code>.</p>
+Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur `dense`. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec `column`. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : `grid-auto-flow: column dense`.
 
-<p>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 (<em>tab order</em>) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilit%C3%A9">un article sur l'accessibilité</a>.</p>
+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%C3%A9).
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
   border: 2px solid #f76707;
   border-radius: 5px;
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-  &lt;div&gt;Six&lt;/div&gt;
-  &lt;div&gt;Sept&lt;/div&gt;
-  &lt;div&gt;Huit&lt;/div&gt;
-  &lt;div&gt;Neuf&lt;/div&gt;
-  &lt;div&gt;Dix&lt;/div&gt;
-  &lt;div&gt;Onze&lt;/div&gt;
-  &lt;div&gt;Douze&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css">.wrapper div:nth-child(4n+1) {
+```
+
+```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>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+```
+
+```css
+.wrapper div:nth-child(4n+1) {
   grid-column-end: span 2;
   grid-row-end: span 2;
   background-color: #ffa94d;
@@ -421,29 +443,31 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
   grid-gap: 10px;
   grid-auto-flow: dense;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Combler_les_espaces', '500', '730')}}</p>
+{{EmbedLiveSample('Combler_les_espaces', '500', '730')}}
 
-<h3 id="Les_éléments_anonymes_de_la_grille">Les éléments anonymes de la grille</h3>
+### Les éléments anonymes de la grille
 
-<p>Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des <code>div</code> et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.</p>
+Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des `div` et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.
 
-<pre class="brush: css">&lt;div class="grid"&gt;
+```css
+<div class="grid">
   Je suis une chaîne de caractères et je serai placé
   automatiquement.
-  &lt;div&gt;Un élément de la grille&lt;/div&gt;
-  &lt;div&gt;Un élément de la grille&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+  <div>Un élément de la grille</div>
+  <div>Un élément de la grille</div>
+</div>
+```
 
-<p>Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.</p>
+Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.
 
-<h3 id="Les_cas_dutilisation_pour_le_placement_automatique">Les cas d'utilisation pour le placement automatique</h3>
+### Les cas d'utilisation pour le placement automatique
 
-<p>Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe <code>landscape</code> l'élément s'étend sur deux colonnes). On utilise ensuite <code>grid-auto-flow: dense</code> afin de créer une grille dense.</p>
+Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe `landscape` l'élément s'étend sur deux colonnes). On utilise ensuite `grid-auto-flow: dense` afin de créer une grille dense.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   grid-gap: 10px;
@@ -465,53 +489,57 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
   width: 100%;
   height: 100%;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;ul class="wrapper"&gt;
-  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
-  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
-  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
-  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
-  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```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>
+</ul>
+```
 
-<p>{{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}}</p>
+{{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}}
 
-<p>Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément <code>dt</code> démarre sur la première ligne et que l'élément  <code>dd</code> sur la  ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.</p>
+Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément `dt` démarre sur la première ligne et que l'élément  `dd` sur la  ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.
 
-<h3 id="Autre_exemple">Autre exemple</h3>
+### Autre exemple
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
   border-radius: 5px;
   background-color: #fff4e6;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;dl&gt;
-    &lt;dt&gt;Mammals&lt;/dt&gt;
-    &lt;dd&gt;Cat&lt;/dd&gt;
-    &lt;dd&gt;Dog&lt;/dd&gt;
-    &lt;dd&gt;Mouse&lt;/dd&gt;
-    &lt;dt&gt;Fish&lt;/dt&gt;
-    &lt;dd&gt;Guppy&lt;/dd&gt;
-    &lt;dt&gt;Birds&lt;/dt&gt;
-    &lt;dd&gt;Pied Wagtail&lt;/dd&gt;
-    &lt;dd&gt;Owl&lt;/dd&gt;
-  &lt;dl&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css">dl {
+```
+
+```html
+<div class="wrapper">
+  <dl>
+    <dt>Mammals</dt>
+    <dd>Cat</dd>
+    <dd>Dog</dd>
+    <dd>Mouse</dd>
+    <dt>Fish</dt>
+    <dd>Guppy</dd>
+    <dt>Birds</dt>
+    <dd>Pied Wagtail</dd>
+    <dd>Owl</dd>
+  <dl>
+</div>
+```
+
+```css
+dl {
   display: grid;
   grid-template-columns: auto 1fr;
   max-width: 300px;
@@ -525,18 +553,16 @@ dt {
 dd {
   grid-column: 2;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Autre_exemple', '500', '230')}}</p>
+{{EmbedLiveSample('Autre_exemple', '500', '230')}}
 
-<div class="note">
-<p><strong>Note :</strong> Voir <a href="https://www.sitepoint.com/understanding-masonry-layout/">cet article de SitePoint</a> à propos de la disposition en briques pour d'autres cas d'utilisation.</p>
-</div>
+> **Note :** Voir [cet article de SitePoint](https://www.sitepoint.com/understanding-masonry-layout/) à propos de la disposition en briques pour d'autres cas d'utilisation.
 
-<h2 id="Quest-ce_que_le_placement_automatique_ne_permet_pas_de_réaliser_actuellement">Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?</h2>
+## Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?
 
-<p>Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée <code>n</code> » (pour que certaines lignes soient sautées). Cette question <a href="https://github.com/w3c/csswg-drafts/issues/796">est décrite sur le dépôt GitHub du CSSWG</a>, n'hésitez pas à ajouter vos exemples de scénarios.</p>
+Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée `n` » (pour que certaines lignes soient sautées). Cette question [est décrite sur le dépôt GitHub du CSSWG](https://github.com/w3c/csswg-drafts/issues/796), n'hésitez pas à ajouter vos exemples de scénarios.
 
-<p>Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les <em>issues</em> existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.</p>
+Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les _issues_ existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}
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 800c04293b..ebb8984bf0 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
@@ -10,322 +10,345 @@ tags:
 translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
 original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}
 
-<p>Le module <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface. Cet article introduit CSS Grid Layout, et la terminologie de la spécification CSS Grid Layout Level 1. Les fonctionnalités évoquées seront expliquées plus en détail dans le reste du guide.</p>
+Le module [CSS Grid Layout](/fr/docs/Web/CSS/CSS_Grid_Layout) ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface. Cet article introduit CSS Grid Layout, et la terminologie de la spécification CSS Grid Layout Level 1. Les fonctionnalités évoquées seront expliquées plus en détail dans le reste du guide.
 
-<h2 id="Qu'est-ce_qu'une_grille">Qu'est-ce qu'une grille ?</h2>
+## Qu'est-ce qu'une grille ?
 
-<p>Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes. Les fonctionnalités sont les suivantes :</p>
+Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes. Les fonctionnalités sont les suivantes :
 
-<h3 id="Pistes_à_taille_fixe_ou_variable">Pistes à taille fixe ou variable</h3>
+### Pistes à taille fixe ou variable
 
-<p>On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité <code>fr</code> créée à cet effet.</p>
+On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité `fr` créée à cet effet.
 
-<h3 id="Placement_des_éléments">Placement des éléments</h3>
+### Placement des éléments
 
-<p>Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.</p>
+Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.
 
-<h3 id="Création_de_pistes_supplémentaires_pour_du_contenu">Création de pistes supplémentaires pour du contenu</h3>
+### Création de pistes supplémentaires pour du contenu
 
-<p>Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».</p>
+Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».
 
-<h3 id="Contrôle_de_l'alignement">Contrôle de l'alignement</h3>
+### Contrôle de l'alignement
 
-<p>On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.</p>
+On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.
 
-<h3 id="Contrôle_des_contenus_qui_se_chevauchent">Contrôle des contenus qui se chevauchent</h3>
+### Contrôle des contenus qui se chevauchent
 
-<p>Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.</p>
+Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.
 
-<p>La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>. Le point de départ est le <strong>conteneur</strong>.</p>
+La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que [flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout). Le point de départ est le **conteneur**.
 
-<h2 id="Le_conteneur">Le conteneur</h2>
+## Le conteneur
 
-<p>À partir du moment où on crée un <em>conteneur</em> en déclarant la propriété <code>display: grid</code> ou <code>display: inline-grid</code> sur un élément, tous les <em>enfants directs </em>de cet élément deviennet des <em>éléments de grille</em>.</p>
+À partir du moment où on crée un _conteneur_ en déclarant la propriété `display: grid` ou `display: inline-grid` sur un élément, tous les _enfants directs_ de cet élément deviennet des _éléments de grille_.
 
-<p>Cet exemple montre une div avec une classe <code>.wrapper</code>, avec cinq éléments enfants.</p>
+Cet exemple montre une div avec une classe `.wrapper`, avec cinq éléments enfants.
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+```
 
-<p>On transforme <code>.wrapper</code> en conteneur.</p>
+On transforme `.wrapper` en conteneur.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
   border: 2px solid #f76707;
   border-radius: 5px;
   background-color: #fff4e6;
 }
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Le_conteneur', '200', '330') }}</p>
+{{ EmbedLiveSample('Le_conteneur', '200', '330') }}
 
-<p>Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">inspecteur de grille</a> dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur <code>grid</code>. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.</p>
+Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un [inspecteur de grille](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur `grid`. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.
 
-<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="screen_shot_2017-03-17_at_14.47.48.png"></p>
+![Using the Grid Highlighter in DevTools to view a grid](screen_shot_2017-03-17_at_14.47.48.png)
 
-<p>Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.</p>
+Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.
 
-<p>Pour que notre exemple ressemble vraiment à une grille nous devons ajouter des colonnes.</p>
+Pour que notre exemple ressemble vraiment à une grille nous devons ajouter des colonnes.
 
-<h2 id="Les_pistes">Les pistes</h2>
+## Les pistes
 
-<p>Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une <em>piste</em> est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.</p>
+Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une _piste_ est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.
 
-<p><img alt="" src="1_grid_track.png"></p>
+![](1_grid_track.png)
 
-<p>On peut ajouter la propriété <code>grid-template-columns</code> à notre exemple précédent, pour définir la taille des colonnes.</p>
+On peut ajouter la propriété `grid-template-columns` à notre exemple précédent, pour définir la taille des colonnes.
 
-<p>Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.</p>
+Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 200px 200px 200px;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
   border: 2px solid #f76707;
   border-radius: 5px;
   background-color: #fff4e6;
 }
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p>
+{{ EmbedLiveSample('grid_first', '610', '140') }}
 
+### L'unité fr
 
-<h3 id="L'unité_fr">L'unité fr</h3>
+Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, `fr`, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.
 
-<p>Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, <code>fr</code>, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.</p>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
   border: 2px solid #f76707;
   border-radius: 5px;
   background-color: #fff4e6;
 }
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample("L'unité_fr", '220', '140') }}</p>
+{{ EmbedLiveSample("L'unité_fr", '220', '140') }}
 
-<p>L'exemple suivant crée une grille avec une colonne de <code>2fr</code>, et deux colonnes de <code>1fr</code>. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.</p>
+L'exemple suivant crée une grille avec une colonne de `2fr`, et deux colonnes de `1fr`. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
 }
-</pre>
+```
 
-<p>Dans ce dernier exemple nous utilisons à la fois des dimensions absolues et des relatives. La première colonne faisant 500px, cette valeur est soustraite de l'espace disponible. L'espace restant est divisé en trois et alloué proportionnellement aux deux colonnes spécifiées avec l'unité relative <code>fr</code>.</p>
+Dans ce dernier exemple nous utilisons à la fois des dimensions absolues et des relatives. La première colonne faisant 500px, cette valeur est soustraite de l'espace disponible. L'espace restant est divisé en trois et alloué proportionnellement aux deux colonnes spécifiées avec l'unité relative `fr`.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 500px 1fr 2fr;
 }
-</pre>
+```
 
-<h3 id="Utiliser_la_notation_repeat()_pour_définir_les_pistes">Utiliser la notation <code>repeat()</code> pour définir les pistes</h3>
+### Utiliser la notation `repeat()` pour définir les pistes
 
-<p>Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation <code>repeat()</code> pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :</p>
+Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation `repeat()` pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 }
-</pre>
+```
 
-<p>peut également s'écrire :</p>
+peut également s'écrire :
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 }
-</pre>
+```
 
-<p>Dans l'exemple suivant on crée une grille avec une première colonne de 20px de large, puis une section répétant 6 fois une piste de 1fr, et enfin on termine par une colonne de 20px de large.</p>
+Dans l'exemple suivant on crée une grille avec une première colonne de 20px de large, puis une section répétant 6 fois une piste de 1fr, et enfin on termine par une colonne de 20px de large.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 20px repeat(6, 1fr) 20px;
 }
-</pre>
+```
 
-<p>Cette notation accepte une liste de pistes, on peut donc l'utiliser pour répéter un motif. Dans l'exemple qui suit la grille aura 10 colonnes : une colonne de 1fr suivie d'une colonne de 2fr, ceci répété 5 fois.</p>
+Cette notation accepte une liste de pistes, on peut donc l'utiliser pour répéter un motif. Dans l'exemple qui suit la grille aura 10 colonnes : une colonne de 1fr suivie d'une colonne de 2fr, ceci répété 5 fois.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(5, 1fr 2fr);
 }
-</pre>
+```
 
-<h3 id="Grille_implicite_et_grille_explicite">Grille implicite et grille explicite</h3>
+### Grille implicite et grille explicite
 
-<p>Dans ces exemples nous avons défini nos colonnes à l'aide de la propriété {{cssxref("grid-template-columns")}}, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.La grille explicite est constituée des pistes définies par les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d'étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c'est-à dire qu'elles s'ajusteront à leur contenu.</p>
+Dans ces exemples nous avons défini nos colonnes à l'aide de la propriété {{cssxref("grid-template-columns")}}, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.La grille explicite est constituée des pistes définies par les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d'étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c'est-à dire qu'elles s'ajusteront à leur contenu.
 
-<p>On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.</p>
+On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.
 
-<p>Dans l'exemple ci-après nous utilisons <code>grid-auto-rows</code> pour que les rangées de la grille implicite fassent 200 pixels de haut.</p>
+Dans l'exemple ci-après nous utilisons `grid-auto-rows` pour que les rangées de la grille implicite fassent 200 pixels de haut.
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 200px;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
     border: 2px solid #f76707;
     border-radius: 5px;
     background-color: #fff4e6;
 }
-.wrapper &gt; div {
+.wrapper > div {
     border: 2px solid #ffa94d;
     border-radius: 5px;
     background-color: #ffd8a8;
     padding: 1em;
     color: #d9480f;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}</p>
+{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}
 
-<h3 id="Dimensionner_une_piste_avec_minmax">Dimensionner une piste avec <code>minmax</code></h3>
+### Dimensionner une piste avec `minmax`
 
-<p>Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.</p>
+Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.
 
-<p>La fonction {{cssxref("minmax()", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons <code>minmax()</code> comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de <code>auto</code>, ce qui signifie que la taille s'adaptera à la hauteur du contenu.</p>
+La fonction {{cssxref("minmax()", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons `minmax()` comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de `auto`, ce qui signifie que la taille s'adaptera à la hauteur du contenu.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
     border: 2px solid #f76707;
     border-radius: 5px;
     background-color: #fff4e6;
 }
-.wrapper &gt; div {
+.wrapper > div {
     border: 2px solid #ffa94d;
     border-radius: 5px;
     background-color: #ffd8a8;
     padding: 1em;
     color: #d9480f;
-}</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-   &lt;div&gt;Un&lt;/div&gt;
-   &lt;div&gt;Deux
-     &lt;p&gt;Davantage de contenu.&lt;/p&gt;
-     &lt;p&gt;On dépasse les 100 pixels.&lt;/p&gt;
-   &lt;/div&gt;
-   &lt;div&gt;Trois&lt;/div&gt;
-   &lt;div&gt;Quatre&lt;/div&gt;
-   &lt;div&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+}
+```
+
+```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>
+```
 
-<p>{{ EmbedLiveSample('Dimensionner_une_piste_avec_minmax', '240', '470') }}</p>
+{{ EmbedLiveSample('Dimensionner_une_piste_avec_minmax', '240', '470') }}
 
-<h2 id="Lignes_de_grille">Lignes de grille</h2>
+## Lignes de grille
 
-<p>Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.</p>
+Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.
 
-<p><img alt="Grid Lines" src="grid2.jpg"></p>
+![Grid Lines](grid2.jpg)
 
-<p>Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.</p>
+Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.
 
-<h3 id="Positionnement_des_éléments_sur_les_lignes">Positionnement des éléments sur les lignes</h3>
+### Positionnement des éléments sur les lignes
 
-<p>Nous explorerons le placement sur les lignes plus en détail dans un prochain article, l'exemple qui suit montre comment l'utiliser de façon simple.</p>
+Nous explorerons le placement sur les lignes plus en détail dans un prochain article, l'exemple qui suit montre comment l'utiliser de façon simple.
 
-<p>Lorsque nous plaçons un élément nous ciblons une ligne plutôt qu'une piste. Nous plaçons ici les deux premiers éléments en utilisant les propriétés {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. En allant de gauche à droite, le premier élément est placé sur la ligne de colonne 1, et va jusqu'à la ligne de colonne 4, qui dans ce cas est la dernière. Il est placé sur la ligne de rangée 1, et va jusqu'à la ligne 3, s'étendant ainsi sur deux rangées.</p>
+Lorsque nous plaçons un élément nous ciblons une ligne plutôt qu'une piste. Nous plaçons ici les deux premiers éléments en utilisant les propriétés {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. En allant de gauche à droite, le premier élément est placé sur la ligne de colonne 1, et va jusqu'à la ligne de colonne 4, qui dans ce cas est la dernière. Il est placé sur la ligne de rangée 1, et va jusqu'à la ligne 3, s'étendant ainsi sur deux rangées.
 
-<p>Le second élément commence sur la ligne de colonne 1 et s'étend sur une seule piste. C'est la largeur par défaut, donc il n'est pas nécessaire de spécifier la ligne de fin. Il s'étend aussi sur deux rangées de la ligne 3 à la ligne 5. Les autres éléments se placeront dans les espaces vides de la grille.</p>
+Le second élément commence sur la ligne de colonne 1 et s'étend sur une seule piste. C'est la largeur par défaut, donc il n'est pas nécessaire de spécifier la ligne de fin. Il s'étend aussi sur deux rangées de la ligne 3 à la ligne 5. Les autres éléments se placeront dans les espaces vides de la grille.
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-  &lt;div class="box5"&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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="box5">Cinq</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
@@ -341,108 +364,111 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
   grid-row-start: 3;
   grid-row-end: 5;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
     border: 2px solid #f76707;
     border-radius: 5px;
     background-color: #fff4e6;
 }
-.wrapper &gt; div {
+.wrapper > div {
     border: 2px solid #ffa94d;
     border-radius: 5px;
     background-color: #ffd8a8;
     padding: 1em;
     color: #d9480f;
 }
-</pre>
-
+```
 
-<p>{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}</p>
+{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}
 
-<p>Pensez à utiliser l'<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspecteur de grille</a> dans les outils de développement pour voir comment les éléments se placent sur les lignes d'une grille items.</p>
+Pensez à utiliser l'[Inspecteur de grille](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) dans les outils de développement pour voir comment les éléments se placent sur les lignes d'une grille items.
 
-<h2 id="Les_cellules">Les cellules</h2>
+## Les cellules
 
-<p>Une <em>cellule</em> est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.</p>
+Une _cellule_ est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.
 
-<p><img alt="The first cell of the grid highlighted" src="1_grid_cell.png"></p>
+![The first cell of the grid highlighted](1_grid_cell.png)
 
-<h2 id="Les_zones">Les zones</h2>
+## Les zones
 
-<p>Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une <em>zone</em>. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.</p>
+Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une _zone_. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.
 
-<p><img alt="A grid area" src="1_grid_area.png"></p>
+![A grid area](1_grid_area.png)
 
-<h2 id="Les_gouttières">Les gouttières</h2>
+## Les gouttières
 
-<p>Les <em>gouttière</em><em>s</em> entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}, ou de la propriété raccourcie {{cssxref("gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.</p>
+Les _gouttière\*\*s_ entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}, ou de la propriété raccourcie {{cssxref("gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 1em;
 }
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.</p>
+> **Note :** Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe `grid-` soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.
+>
+> Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec `grid-`.
 
-<p>Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec <code>grid-</code>.</p>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
 </div>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
     border: 2px solid #f76707;
     border-radius: 5px;
     background-color: #fff4e6;
 }
-.wrapper &gt; div {
+.wrapper > div {
     border: 2px solid #ffa94d;
     border-radius: 5px;
     background-color: #ffd8a8;
     padding: 1em;
     color: #d9480f;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Les_gouttières') }}</p>
+{{ EmbedLiveSample('Les_gouttières') }}
 
-<p>L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité <code>fr</code>. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.</p>
+L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité `fr`. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.
 
-<h2 id="Grilles_imbriquées">Grilles imbriquées</h2>
+## Grilles imbriquées
 
-<p>Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.</p>
+Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box box1"&gt;
-    &lt;div class="nested"&gt;a&lt;/div&gt;
-    &lt;div class="nested"&gt;b&lt;/div&gt;
-    &lt;div class="nested"&gt;c&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
-  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </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>
+```
 
-<p><img alt="Nested grid in flow" src="grid3.jpg"></p>
+![Nested grid in flow](grid3.jpg)
 
-<p>En définissant la propriété <code>display:grid</code> sur l'élément <code>box1</code>, il devient lui-même une grille et ses enfants se positionnent sur cette grille.</p>
+En définissant la propriété `display:grid` sur l'élément `box1`, il devient lui-même une grille et ses enfants se positionnent sur cette grille.
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
@@ -450,9 +476,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
     border: 2px solid #f76707;
     border-radius: 5px;
@@ -471,19 +498,20 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
     background-color: #fff9db;
     padding: 1em;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Grilles_imbriquées', '600', '340') }}</p>
+{{ EmbedLiveSample('Grilles_imbriquées', '600', '340') }}
 
-<p>Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.</p>
+Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.
 
-<h3 id="Sous-grille">Sous-grille</h3>
+### Sous-grille
 
-<p>Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée <em>sous-grille</em> qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. <em>Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer.</em> Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer <code>display: grid</code> par <code>display: subgrid, </code>et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments.</p>
+Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée _sous-grille_ qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. _Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer._ Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer `display: grid` par `display: subgrid, `et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments.
 
-<p>Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer <code>grid-template-columns: repeat(3, 1fr)</code> en <code>grid-template-columns: subgrid</code>. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document.</p>
+Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer `grid-template-columns: repeat(3, 1fr)` en `grid-template-columns: subgrid`. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document.
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
@@ -491,22 +519,24 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
   display: grid;
   grid-template-columns: subgrid;
 }
-</pre>
+```
 
-<h2 id="Superposer_les_éléments_avec_z-index">Superposer les éléments avec <code>z-index</code></h2>
+## Superposer les éléments avec `z-index`
 
-<p>Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.</p>
+Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
-  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<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>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
@@ -522,9 +552,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
   grid-row-start: 2;
   grid-row-end: 4;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
   border: 2px solid #f76707;
   border-radius: 5px;
@@ -537,17 +568,18 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Superposer_les_éléments_avec_z-index', '230', '420') }}</p>
+{{ EmbedLiveSample('Superposer_les_éléments_avec_z-index', '230', '420') }}
 
-<p>L'élément <code>box2</code> est maintenant superposé avec <code>box1</code>, et comme il arrive après dans le code source il s'affiche par-dessus.</p>
+L'élément `box2` est maintenant superposé avec `box1`, et comme il arrive après dans le code source il s'affiche par-dessus.
 
-<h3 id="Contrôler_l’ordre_de_superposition">Contrôler l’ordre de superposition</h3>
+### Contrôler l’ordre de superposition
 
-<p>On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété <code>z-index</code>. Si nous donnons à <code>box2</code> un <code>z-index</code> inférieur à celui de <code>box1</code>, l'élément <code>box2</code> s'affichera sous <code>box1</code> dans la pile.</p>
+On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété `z-index`. Si nous donnons à `box2` un `z-index` inférieur à celui de `box1`, l'élément `box2` s'affichera sous `box1` dans la pile.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
@@ -565,18 +597,20 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
   grid-row-end: 4;
   z-index: 1;
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;div class="wrapper"&gt;
-    &lt;div class="box box1"&gt;Un&lt;/div&gt;
-    &lt;div class="box box2"&gt;Deux&lt;/div&gt;
-   &lt;div class="box box3"&gt;Trois&lt;/div&gt;
-   &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
-   &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
     border: 2px solid #f76707;
     border-radius: 5px;
@@ -589,12 +623,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
     padding: 1em;
     color: #d9480f;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}</p>
+{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}
 
-<h2 id="La_suite">La suite</h2>
+## La suite
 
-<p>Dans cet article nous avons parcouru rapidement la spécification CSS Grid Layout. Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.</p>
+Dans cet article nous avons parcouru rapidement la spécification CSS Grid Layout. Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.
 
-<p>{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}
diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md
index 6721ff8c67..3a3d192874 100644
--- a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md
+++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md
@@ -10,47 +10,46 @@ tags:
 translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}
 
-<p>Si vous connaissez <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles (flexbox)</a> vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.</p>
+Si vous connaissez [les boîtes flexibles (flexbox)](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification [Box Alignment Level 3](https://drafts.csswg.org/css-align/). Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.
 
-<p>Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.</p>
+Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.
 
-<h2 id="Les_deux_axes_dune_grille">Les deux axes d'une grille</h2>
+## Les deux axes d'une grille
 
-<p>Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (<em>block layout</em>). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.</p>
+Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (_block layout_). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.
 
-<p><img src="7_block_axis.png"></p>
+![](7_block_axis.png)
 
-<p><strong>L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.</strong></p>
+**L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.**
 
-<p><img alt="" src="7_inline_axis.png"></p>
+![](7_inline_axis.png)
 
-<p>Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.</p>
+Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.
 
-<h2 id="Aligner_des_objets_sur_laxe_de_bloc_block_axis">Aligner des objets sur l'axe de bloc (<em>block axis</em>)</h2>
+## Aligner des objets sur l'axe de bloc (_block axis_)
 
-<p>Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.</p>
+Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.
 
-<h3 id="utiliser_align-items">Utiliser align-items</h3>
+### Utiliser align-items
 
-<p>Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :</p>
+Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :
 
-<ul>
- <li><code>auto</code></li>
- <li><code>normal</code></li>
- <li><code>start</code></li>
- <li><code>end</code></li>
- <li><code>center</code></li>
- <li><code>stretch</code></li>
- <li><code>baseline</code></li>
- <li><code>first baseline</code></li>
- <li><code>last baseline</code></li>
-</ul>
+- `auto`
+- `normal`
+- `start`
+- `end`
+- `center`
+- `stretch`
+- `baseline`
+- `first baseline`
+- `last baseline`
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -58,16 +57,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   grid-gap: 10px;
@@ -91,27 +91,29 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
 .item4 {
   grid-area: d;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+```
 
-<p>{{EmbedLiveSample('utiliser_align-items', '500', '450')}}</p>
+{{EmbedLiveSample('utiliser_align-items', '500', '450')}}
 
-<p>Lorsqu'on utilise <code>align-self: start</code>, la hauteur de chaque <code>&lt;div&gt;</code> sera déterminée par le contenu du <code>&lt;div&gt;</code>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <code>&lt;div&gt;</code> sera étiré afin de remplir la zone de la grille.</p>
+Lorsqu'on utilise `align-self: start`, la hauteur de chaque `<div>` sera déterminée par le contenu du `<div>`. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque `<div>` sera étiré afin de remplir la zone de la grille.
 
-<p>La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant <code>align-self</code> pour les objets.</p>
+La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant `align-self` pour les objets.
 
-<h3 id="utiliser_align-self">Utiliser align-self</h3>
+### Utiliser align-self
 
-<p>Dans le prochain exemple, on utilise la propriété <code>align-self</code> afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour <code>align-self</code> : l'objet est étiré. Le deuxième objet utilise la valeur <code>start</code>, le troisième utilise <code>end</code> et le quatrième utilise <code>center</code>.</p>
+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`.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -119,16 +121,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   grid-gap: 10px;
@@ -154,45 +157,45 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
   grid-area: d;
   align-self: center;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+```
 
-<p>{{EmbedLiveSample('utiliser_align-self', '500', '450')}}</p>
+{{EmbedLiveSample('utiliser_align-self', '500', '450')}}
 
-<h3 id="Gestion_des_objets_avec_un_ratio_intrinsèque">Gestion des objets avec un ratio intrinsèque</h3>
+### Gestion des objets avec un ratio intrinsèque
 
-<p>La spécification indique que le comportement par défaut pour {{cssxref("align-self")}} est d'étirer l'objet sauf si celui-ci possède un ratio intrinsèque. Dans ce cas, le comportement par défaut correspond à la valeur <code>start</code>. En effet, si le comportement par défaut était le même pour les éléments avec un ratio intrinsèque (une image matricielle par exemple), l'étirement distordrait l'objet.</p>
+La spécification indique que le comportement par défaut pour {{cssxref("align-self")}} est d'étirer l'objet sauf si celui-ci possède un ratio intrinsèque. Dans ce cas, le comportement par défaut correspond à la valeur `start`. En effet, si le comportement par défaut était le même pour les éléments avec un ratio intrinsèque (une image matricielle par exemple), l'étirement distordrait l'objet.
 
-<p>Bien que ce comportement ait récemment été clarifié dans la spécification, il n'est pas encore implémenté dans les différents navigateurs. Pour le moment, il faut donc s'assurer d'utiliser {{cssxref("align-self")}} et {{cssxref("justify-self")}} avec les valeurs <code>start</code> pour les éléments concernés comme les images. Cela correspondra au comportement par défaut lorsqu'il aura été implémenté.</p>
+Bien que ce comportement ait récemment été clarifié dans la spécification, il n'est pas encore implémenté dans les différents navigateurs. Pour le moment, il faut donc s'assurer d'utiliser {{cssxref("align-self")}} et {{cssxref("justify-self")}} avec les valeurs `start` pour les éléments concernés comme les images. Cela correspondra au comportement par défaut lorsqu'il aura été implémenté.
 
-<h2 id="Justifier_les_objets_sur_laxe_en_ligne_inline_axis">Justifier les objets sur l'axe en ligne (<em>inline axis</em>)</h2>
+## Justifier les objets sur l'axe en ligne (_inline axis_)
 
-<p>{{cssxref("align-items")}} et {{cssxref("align-self")}} gèrent l'alignement des objets sur l'axe de bloc. {{cssxref("justify-items")}} et {{cssxref("justify-self")}} permettent quant à eux de gérer l'alignement sur l'axe en ligne. Les valeurs disponibles sont les mêmes que pour <code>align-self</code> :</p>
+{{cssxref("align-items")}} et {{cssxref("align-self")}} gèrent l'alignement des objets sur l'axe de bloc. {{cssxref("justify-items")}} et {{cssxref("justify-self")}} permettent quant à eux de gérer l'alignement sur l'axe en ligne. Les valeurs disponibles sont les mêmes que pour `align-self` :
 
-<ul>
- <li><code>auto</code></li>
- <li><code>normal</code></li>
- <li><code>start</code></li>
- <li><code>end</code></li>
- <li><code>center</code></li>
- <li><code>stretch</code></li>
- <li><code>baseline</code></li>
- <li><code>first baseline</code></li>
- <li><code>last baseline</code></li>
-</ul>
+- `auto`
+- `normal`
+- `start`
+- `end`
+- `center`
+- `stretch`
+- `baseline`
+- `first baseline`
+- `last baseline`
 
-<p>Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on a utilisé la propriété {{cssxref("justify-self")}}.</p>
+Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on a utilisé la propriété {{cssxref("justify-self")}}.
 
-<p>Là encore, la valeur par défaut <code>stretch</code> 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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -200,16 +203,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   grid-gap: 10px;
@@ -235,31 +239,35 @@ original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_C
   grid-area: d;
   justify-self: center;
 }
-</pre>
+```
+
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-&lt;/div&gt;
-</pre>
 Justifier_les_objets_sur_laxe_en_ligne_inline_axis
-<p>{{EmbedLiveSample('alignment_3', '500', '450')}}</p>
 
-<p>Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.</p>
+{{EmbedLiveSample('alignment_3', '500', '450')}}
+
+Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.
 
-<p>Les propriétés {{cssxref("justify-self")}} et {{cssxref("justify-items")}} ne sont pas disponibles lorsqu'on utilise les boîtes flexibles car celles-ci s'étendent uniquement sur une dimension. Pour aligner les éléments sur l'axe principale d'une boîte flexible, on utilisera la propriété {{cssxref("justify-content")}}.</p>
+Les propriétés {{cssxref("justify-self")}} et {{cssxref("justify-items")}} ne sont pas disponibles lorsqu'on utilise les boîtes flexibles car celles-ci s'étendent uniquement sur une dimension. Pour aligner les éléments sur l'axe principale d'une boîte flexible, on utilisera la propriété {{cssxref("justify-content")}}.
 
-<h3 id="Propriétés_raccourcies">Propriétés raccourcies</h3>
+### Propriétés raccourcies
 
-<p>La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-items")}} et {{CSSxRef("justify-items")}}. {{CSSxRef("place-self")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}}.</p>
+La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-items")}} et {{CSSxRef("justify-items")}}. {{CSSxRef("place-self")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}}.
 
-<h2 id="Centrer_un_objet_sur_une_zone">Centrer un objet sur une zone</h2>
+## Centrer un objet sur une zone
 
-<p>En combinant les propriétés <code>align-</code><code>*</code> et <code>justify-*</code>, on peut facilement centrer un objet sur sa zone de grille.</p>
+En combinant les propriétés ` align-``* ` et `justify-*`, on peut facilement centrer un objet sur sa zone de grille.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -267,16 +275,17 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 10px;
@@ -290,44 +299,44 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
   align-self: center;
   justify-self: center;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
- &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+ <div class="item1">Objet 1</div>
+</div>
+```
 
-<p>{{EmbedLiveSample('Centrer_un_objet_sur_une_zone', '500', '480')}}</p>
+{{EmbedLiveSample('Centrer_un_objet_sur_une_zone', '500', '480')}}
 
-<h2 id="Aligner_les_pistes_dune_grille_sur_laxe_de_bloc">Aligner les pistes d'une grille sur l'axe de bloc</h2>
+## Aligner les pistes d'une grille sur l'axe de bloc
 
-<p>Si on a des pistes qui n'occupent pas tout l'espace du conteneur, on pourra aligner les pistes au sein du conteneur. Là aussi, on peut obtenir cet alignement sur l'axe des colonnes et l'axe des lignes : {{cssxref("align-content")}} permet d'aligner les pistes selon l'axe des colonnes et {{cssxref("justify-content")}} permettant d'aligner sur l'axe en ligne.</p>
+Si on a des pistes qui n'occupent pas tout l'espace du conteneur, on pourra aligner les pistes au sein du conteneur. Là aussi, on peut obtenir cet alignement sur l'axe des colonnes et l'axe des lignes : {{cssxref("align-content")}} permet d'aligner les pistes selon l'axe des colonnes et {{cssxref("justify-content")}} permettant d'aligner sur l'axe en ligne.
 
-<p>La propriété {{cssxref("place-content")}} est une propriété raccourcie pour {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+La propriété {{cssxref("place-content")}} est une propriété raccourcie pour {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
 
-<p>Les valeurs disponibles pour {{cssxref("align-content")}}, {{cssxref("justify-content")}} et {{cssxref("place-content")}} sont :</p>
+Les valeurs disponibles pour {{cssxref("align-content")}}, {{cssxref("justify-content")}} et {{cssxref("place-content")}} sont :
 
-<ul>
- <li><code>normal</code></li>
- <li><code>start</code></li>
- <li><code>end</code></li>
- <li><code>center</code></li>
- <li><code>stretch</code></li>
- <li><code>space-around</code></li>
- <li><code>space-between</code></li>
- <li><code>space-evenly</code></li>
- <li><code>baseline</code></li>
- <li><code>first baseline</code></li>
- <li><code>last baseline</code></li>
-</ul>
+- `normal`
+- `start`
+- `end`
+- `center`
+- `stretch`
+- `space-around`
+- `space-between`
+- `space-evenly`
+- `baseline`
+- `first baseline`
+- `last baseline`
 
-<p>Dans l'exemple qui suit, on a un conteneur qui mesure 500 pixels de haut sur 500 pixels de large. On définit trois pistes de ligne et trois pistes de colonnes qui mesurent chacune 100 pixels et avec une gouttière de 10 pixels. On a donc un espace disponible dans le conteneur dans chaque direction.</p>
+Dans l'exemple qui suit, on a un conteneur qui mesure 500 pixels de haut sur 500 pixels de large. On définit trois pistes de ligne et trois pistes de colonnes qui mesurent chacune 100 pixels et avec une gouttière de 10 pixels. On a donc un espace disponible dans le conteneur dans chaque direction.
 
-<p>La propriété <code>align-content</code> s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est <code>start</code> : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.</p>
+La propriété `align-content` s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est `start` : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.
 
-<h3 id="alignement_par_defaut">Alignement par défaut</h3>
+### Alignement par défaut
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -335,16 +344,17 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(3,100px);
@@ -368,23 +378,25 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
 .item4 {
   grid-area: d;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+```
 
-<p>{{EmbedLiveSample('alignement_par_defaut', '500', '520')}}</p>
+{{EmbedLiveSample('alignement_par_defaut', '500', '520')}}
 
-<h3 id="align-content_end">Utiliser align-content: end</h3>
+### Utiliser align-content: end
 
-<p>Si on ajoute <code>align-content</code> avec la valeur <code>end</code> sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -392,16 +404,17 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(3,100px);
@@ -426,23 +439,25 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
 .item4 {
   grid-area: d;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+```
 
-<p>{{EmbedLiveSample('align-content_end', '500', '520')}}</p>
+{{EmbedLiveSample('align-content_end', '500', '520')}}
 
-<h3 id="align-content_end_space-between">Utiliser align-content: space-between</h3>
+### Utiliser align-content: space-between
 
-<p>Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : <code>space-between</code>, <code>space-around</code> et <code>space-evenly</code> qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec <code>space-between</code> pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -450,16 +465,17 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(3,100px);
@@ -484,31 +500,33 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
 .item4 {
   grid-area: d;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+```
 
-<p>{{EmbedLiveSample('align-content_end_space-between', '500', '1570')}}</p>
+{{EmbedLiveSample('align-content_end_space-between', '500', '1570')}}
 
-<p>On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.</p>
+On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.
 
-<p>Dans l'image qui suit, on a a placé une grille en utilisant <code>align-content: start</code> et une autre grille qui utilise <code>align-content: space-between</code>. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.</p>
+Dans l'image qui suit, on a a placé une grille en utilisant `align-content: start` et une autre grille qui utilise `align-content: space-between`. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.
 
-<p><img src="7_space-between.png"></p>
+![](7_space-between.png)
 
-<h2 id="Justifier_les_pistes_sur_laxe_des_lignes">Justifier les pistes sur l'axe des lignes</h2>
+## Justifier les pistes sur l'axe des lignes
 
-<p>Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la même façon qu'on utilisait {{cssxref("align-content")}} pour l'axe des colonnes.</p>
+Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la même façon qu'on utilisait {{cssxref("align-content")}} pour l'axe des colonnes.
 
-<p>Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur <code>space-around</code>. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -516,16 +534,17 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(3,100px);
@@ -551,25 +570,27 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
 .item4 {
   grid-area: d;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+```
 
-<p>{{EmbedLiveSample('Justifier_les_pistes_sur_laxe_des_lignes', '500', '500')}}</p>
+{{EmbedLiveSample('Justifier_les_pistes_sur_laxe_des_lignes', '500', '500')}}
 
-<h2 id="Alignement_et_marges_automatiques">Alignement et marges automatiques</h2>
+## Alignement et marges automatiques
 
-<p>Pour aligner les objets dans une zone, on peut également utiliser des marges automatiques. Si vous avez déjà utiliser <code>auto</code> pour les marges droite et gauche d'un conteneur de bloc, vous savez qu'une telle marge absorbe l'espace disponible. En utilisant <code>auto</code> pour les deux côtés, le bloc est contraint au milieu car les deux marges occupent le plus d'espace possible.</p>
+Pour aligner les objets dans une zone, on peut également utiliser des marges automatiques. Si vous avez déjà utiliser `auto` pour les marges droite et gauche d'un conteneur de bloc, vous savez qu'une telle marge absorbe l'espace disponible. En utilisant `auto` pour les deux côtés, le bloc est contraint au milieu car les deux marges occupent le plus d'espace possible.
 
-<p>Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec <code>auto</code>. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).</p>
+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).
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -577,16 +598,17 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(3,100px);
@@ -611,26 +633,27 @@ Justifier_les_objets_sur_laxe_en_ligne_inline_axis
 .item4 {
   grid-area: d;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+```
 
-<p>{{EmbedLiveSample('Alignement_et_marges_automatiques', '500', '500')}}</p>
+{{EmbedLiveSample('Alignement_et_marges_automatiques', '500', '500')}}
 
-<p>On peut voir comment l'objet est aligné grâce à <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles dans Firefox</a>.</p>
+On peut voir comment l'objet est aligné grâce à [l'outil de mise en évidence des grilles dans Firefox](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts).
 
-<p><img src="7_auto_margins.png"></p>
+![](7_auto_margins.png)
 
-<h2 id="Lalignement_et_les_modes_décriture">L'alignement et les modes d'écriture</h2>
+## L'alignement et les modes d'écriture
 
-<p>Dans tout ces exemples, nous avons travaillé en français ou en anglais, des langues qui s'écrivent de gauche à droite. Cela signifie que les lignes de début de notre grille étaient situées en haut et à gauche lorsqu'on raisonnait avec des directions <em>physiques</em>.</p>
+Dans tout ces exemples, nous avons travaillé en français ou en anglais, des langues qui s'écrivent de gauche à droite. Cela signifie que les lignes de début de notre grille étaient situées en haut et à gauche lorsqu'on raisonnait avec des directions _physiques_.
 
-<p>Les spécifications pour les grilles CSS et les boîtes flexibles sont conçues pour fonctionner avec les différents modes d'écriture. Cela signifie que si on travaille avec une langue qui s'écrit de droite à gauche (comme l'arabe), le début de la grille serait en haut à droite. Cela signifie également que la valeur par défaut <code>justify-content: start</code> placerait les pistes du côté droit de la grille. En revanche, si on utilise les marges automatiques avec <code>margin-right</code> ou <code>margin-left</code> ou si on utilise le positionnement absolu avec les valeurs <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>, on ne tiendra pas compte des modes d'écritures. Dans le guide suivant, nous verrons plus en détails comment les grilles et l'alignement interagissent avec les modes d'écriture. Cet aspect est fondamental si vous souhaitez développer des sites qui puissent être affichés dans plusieurs langues ou si vous souhaitez mélanger certaines langues ou modes d'écriture pour une application.</p>
+Les spécifications pour les grilles CSS et les boîtes flexibles sont conçues pour fonctionner avec les différents modes d'écriture. Cela signifie que si on travaille avec une langue qui s'écrit de droite à gauche (comme l'arabe), le début de la grille serait en haut à droite. Cela signifie également que la valeur par défaut `justify-content: start` placerait les pistes du côté droit de la grille. En revanche, si on utilise les marges automatiques avec `margin-right` ou `margin-left` ou si on utilise le positionnement absolu avec les valeurs `top`, `right`, `bottom` et `left`, on ne tiendra pas compte des modes d'écritures. Dans le guide suivant, nous verrons plus en détails comment les grilles et l'alignement interagissent avec les modes d'écriture. Cet aspect est fondamental si vous souhaitez développer des sites qui puissent être affichés dans plusieurs langues ou si vous souhaitez mélanger certaines langues ou modes d'écriture pour une application.
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}
diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md
index 1b93e665ec..6291e0ad41 100644
--- a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md
+++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md
@@ -10,56 +10,57 @@ tags:
 translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement
 original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}
 
-<p>Au printemps 2017, on voit pour la première fois une spécification majeure être disponible presque simultanément dans différents navigateurs : les grilles CSS (<em>CSS Grid</em>). Les grilles CSS sont disponibles dans les versions récentes de Firefox, Chrome, Opera, Safari et Edge. Malgré cela, si ces navigateurs récents permettront à la plupart d'entre nous de profiter de ces nouvelles fonctionnalités, il existe d'anciens navigateurs ou d'autres navigateurs qui ne prennent pas en charge ces fonctionnalité. Dans ce guide, nous allons parcourir différentes stratégies pour gérer cette prise en charge.</p>
+Au printemps 2017, on voit pour la première fois une spécification majeure être disponible presque simultanément dans différents navigateurs : les grilles CSS (_CSS Grid_). Les grilles CSS sont disponibles dans les versions récentes de Firefox, Chrome, Opera, Safari et Edge. Malgré cela, si ces navigateurs récents permettront à la plupart d'entre nous de profiter de ces nouvelles fonctionnalités, il existe d'anciens navigateurs ou d'autres navigateurs qui ne prennent pas en charge ces fonctionnalité. Dans ce guide, nous allons parcourir différentes stratégies pour gérer cette prise en charge.
 
-<h2 id="Les_navigateurs_qui_prennent_en_charge_les_grilles_CSS">Les navigateurs qui prennent en charge les grilles CSS</h2>
+## Les navigateurs qui prennent en charge les grilles CSS
 
-<p>En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.</p>
+En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.
 
-<h2 id="La_situation_pour_Internet_Explorer_et_Edge">La situation pour Internet Explorer et Edge</h2>
+## La situation pour Internet Explorer et Edge
 
-<p>La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.</p>
+La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.
 
-<p>La version implémentée pour IE/Edge (≤15) est préfixée avec <code>-ms</code> et les propriétés ont les noms suivants :</p>
+La version implémentée pour IE/Edge (≤15) est préfixée avec `-ms` et les propriétés ont les noms suivants :
 
-<ul>
- <li>{{cssxref("grid-template-columns")}} est appelée <code>-ms-grid-columns</code></li>
- <li>{{cssxref("grid-template-rows")}} est appelée <code>-ms-grid-rows</code></li>
- <li>{{cssxref("grid-row-start")}} est appelée <code>-ms-grid-row</code></li>
- <li>{{cssxref("grid-column-start")}} est appelée <code>-ms-grid-column</code></li>
- <li>{{cssxref("align-self")}} est appelée <code>-ms-grid-row-align</code></li>
- <li>{{cssxref("justify-self")}} est appelée <code>-ms-grid-column-align</code></li>
-</ul>
+- {{cssxref("grid-template-columns")}} est appelée `-ms-grid-columns`
+- {{cssxref("grid-template-rows")}} est appelée `-ms-grid-rows`
+- {{cssxref("grid-row-start")}} est appelée `-ms-grid-row`
+- {{cssxref("grid-column-start")}} est appelée `-ms-grid-column`
+- {{cssxref("align-self")}} est appelée `-ms-grid-row-align`
+- {{cssxref("justify-self")}} est appelée `-ms-grid-column-align`
 
-<p>La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : <code>-ms-grid-column-span</code> et <code>-ms-grid-row-span</code>. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par <code>-ms</code>. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.</p>
+La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : `-ms-grid-column-span` et `-ms-grid-row-span`. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par `-ms`. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.
 
-<h3 id="L'utilisation_d'autoprefixer_pour_la_prise_en_charge_de_la_grille">L'utilisation d'autoprefixer pour la prise en charge de la grille</h3>
+### L'utilisation d'autoprefixer pour la prise en charge de la grille
 
-<p>L'outil <em><a href="https://github.com/postcss/autoprefixer">autoprefixer</a></em> a été mis à jour afin de prendre en charge les versions préfixées par <code>-ms-</code> 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 <code>grid: autoplace</code>.</p>
+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`.
 
-<pre class="brush: js">autoprefixer({ grid: 'autoplace' })</pre>
+```js
+autoprefixer({ grid: 'autoplace' })
+```
 
-<p>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</p>
+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
 
-<h2 id="Puis-je_utiliser_les_grilles_CSS_sans_danger">Puis-je utiliser les grilles CSS sans danger ?</h2>
+## Puis-je utiliser les grilles CSS sans danger ?
 
-<p>Comme pour les autres technologies <em>front-end</em>, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.</p>
+Comme pour les autres technologies _front-end_, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.
 
-<h2 id="Commencer_à_utiliser_les_grilles_CSS_en_production">Commencer à utiliser les grilles CSS en production</h2>
+## Commencer à utiliser les grilles CSS en production
 
-<p>On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.</p>
+On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.
 
-<h3 id="Effectuer_la_transition_depuis_une_disposition_flottante">Effectuer la transition depuis une disposition flottante</h3>
+### Effectuer la transition depuis une disposition flottante
 
-<p>Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">des dispositions flottantes</a>. Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise {{cssxref("float")}}, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.</p>
+Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé [des dispositions flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats). Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise {{cssxref("float")}}, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.
 
-<p>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.</p>
+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.
 
-<pre class="brush: css">* {box-sizing: border-box;}
+```css
+* {box-sizing: border-box;}
 img {
   max-width: 100%;
   display: block;
@@ -88,35 +89,37 @@ img {
   padding: 10px;
   align-self: end;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="media"&gt;
-  &lt;div class="image"&gt;
-    &lt;img src="http://placehold.it/150x150" alt="placeholder"&gt;
-  &lt;/div&gt;
-  &lt;div class="text"&gt;
+```
+
+```html
+<div class="media">
+  <div class="image">
+    <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.
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+  </div>
+</div>
+```
 
-<p>{{EmbedLiveSample('Effectuer_la_transition_depuis_une_disposition_flottante', '500', '180')}}</p>
+{{EmbedLiveSample('Effectuer_la_transition_depuis_une_disposition_flottante', '500', '180')}}
 
-<p>Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.</p>
+Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.
 
-<p><img alt="A simple example of overriding a floated layout using grid." src="10-float-simple-override.png"></p>
+![A simple example of overriding a floated layout using grid.](10-float-simple-override.png)
 
-<h3 id="Utiliser_les_requêtes_de_fonctionnalité_(feature_queries)">Utiliser les requêtes de fonctionnalité (<em>feature queries</em>)</h3>
+### Utiliser les requêtes de fonctionnalité (_feature queries_)
 
-<p>L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.</p>
+L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.
 
-<h4 id="un_exemple_plus_complexe">Un exemple plus complexe</h4>
+#### Un exemple plus complexe
 
-<p>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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -132,9 +135,10 @@ img {
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper ul {
+```css
+.wrapper ul {
   overflow: hidden;
   margin: 0 -10px;
   padding: 0;
@@ -145,70 +149,73 @@ img {
   width: calc(33.333333% - 20px);
   margin: 0 10px 20px 10px;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;ul&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Un&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Deux&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Trois&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-       &lt;h2&gt;Quatre&lt;/h2&gt;
-       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-       &lt;h2&gt;Cinq&lt;/h2&gt;
-       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Six&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-<p>{{EmbedLiveSample('un_exemple_plus_complexe', '550', '400')}}</p>
-
-<p>Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.</p>
-
-<p><img alt="A floated cards layout demonstrating the problem caused by uneven content height." src="10-floated-cards.png"></p>
-
-<p>Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…</p>
-
-<p>Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.</p>
-
-<p><img alt="After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width." src="10-float-width-problem.png"></p>
-
-<p>Si on réinitialise la largeur avec <code>auto</code>, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce <a href="/fr/docs/Web/CSS/@supports">aux requêtes de fonctionnalité CSS</a>, on peut le faire directement en CSS.</p>
-
-<h4 id="une_solution_avec_les_requetes_de_fonctionnalité">Une solution avec les requêtes de fonctionnalité</h4>
-
-<p>Les requêtes de fonctionnalité ressemblent beaucoup aux <a href="/fr/docs/Web/CSS/Media_Queries">requêtes de média</a> qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.</p>
-
-<pre class="brush: css">@supports (display: grid) {
+```
+
+```html
+<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <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>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <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>
+    </li>
+    <li class="card">
+       <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>
+    </li>
+  </ul>
+</div>
+```
+
+{{EmbedLiveSample('un_exemple_plus_complexe', '550', '400')}}
+
+Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.
+
+![A floated cards layout demonstrating the problem caused by uneven content height.](10-floated-cards.png)
+
+Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…
+
+Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.
+
+![After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.](10-float-width-problem.png)
+
+Si on réinitialise la largeur avec `auto`, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce [aux requêtes de fonctionnalité CSS](/fr/docs/Web/CSS/@supports), on peut le faire directement en CSS.
+
+#### Une solution avec les requêtes de fonctionnalité
+
+Les requêtes de fonctionnalité ressemblent beaucoup aux [requêtes de média](/fr/docs/Web/CSS/Media_Queries) qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.
+
+```css
+@supports (display: grid) {
   .wrapper {
     // ajouter les règles qu'on souhaite
     // pour les navigateurs qui prennent
     // en charge les grilles
   }
 }
-</pre>
+```
 
-<p>La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.</p>
+La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.
 
-<p>On utilise donc <code>@supports</code> pour vérifier la prise en charge de <code>display: grid</code>;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec <code>auto</code> 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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -224,9 +231,10 @@ img {
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper ul {
+```css
+.wrapper ul {
     overflow: hidden;
     margin: 0 -10px;
     padding: 0;
@@ -250,47 +258,49 @@ img {
     margin: 0;
   }
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;ul&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Un&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Deux&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Trois&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-       &lt;h2&gt;Quatre&lt;/h2&gt;
-       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-       &lt;h2&gt;Cinq&lt;/h2&gt;
-       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Six&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-<p>{{EmbedLiveSample('une_solution_avec_les_requetes_de_fonctionnalité', '550', '480')}}</p>
-
-<h2 id="Surcharger_les_autres_valeurs_pour_display">Surcharger les autres valeurs pour <code>display</code></h2>
-
-<p>Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple <code>display: inline-block</code>.</p>
-
-<p>Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger <code>display: inline-block</code>. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par <code>inline-block</code>, ils deviendront des objets de la grille et <code>inline-block</code> ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété <code>vertical-align</code> sur les éléments lorsqu'on utilise le mode <code>inline-block</code>, 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.</p>
-
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```
+
+```html
+<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <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>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <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>
+    </li>
+    <li class="card">
+       <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>
+    </li>
+  </ul>
+</div>
+```
+
+{{EmbedLiveSample('une_solution_avec_les_requetes_de_fonctionnalité', '550', '480')}}
+
+## Surcharger les autres valeurs pour `display`
+
+Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple `display: inline-block`.
+
+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;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -307,10 +317,10 @@ img {
   padding: 1em;
   color: #d9480f;
 }
-</pre>
-
+```
 
-<pre class="brush: css">.wrapper ul {
+```css
+.wrapper ul {
   margin: 0 -10px;
   padding: 0;
   list-style: none;
@@ -334,79 +344,76 @@ img {
     margin: 0;
   }
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;ul&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Un&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Deux&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Trois&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-       &lt;h2&gt;Quatre&lt;/h2&gt;
-       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-       &lt;h2&gt;Cinq&lt;/h2&gt;
-       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-    &lt;li class="card"&gt;
-      &lt;h2&gt;Six&lt;/h2&gt;
-      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <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>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <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>
+    </li>
+    <li class="card">
+       <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>
+    </li>
+  </ul>
+</div>
+```
 
-<p>{{EmbedLiveSample('Surcharger_les_autres_valeurs_pour_display', '500', '480')}}</p>
+{{EmbedLiveSample('Surcharger_les_autres_valeurs_pour_display', '500', '480')}}
 
-<p>Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé <code>grid-gap</code> plutôt que des marges et des marges négatives pour créer les « gouttières ».</p>
+Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé `grid-gap` plutôt que des marges et des marges négatives pour créer les « gouttières ».
 
-<h2 id="Comment_la_spécification_gère-t-elle_cette_surcharge">Comment la spécification gère-t-elle cette surcharge ?</h2>
+## Comment la spécification gère-t-elle cette surcharge ?
 
-<p>La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :</p>
+La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :
 
-<ul>
- <li><a href="https://drafts.csswg.org/css-grid/#grid-containers">La création de conteneurs de grille (<em>Establishing Grid Containers</em>)</a></li>
- <li><a href="https://drafts.csswg.org/css-grid/#grid-items">Les objets de la grille (<em>Grid Items</em>)</a></li>
- <li><a href="https://drafts.csswg.org/css-grid/#grid-item-display">L'affichage d'un objet de la grille (<em>Grid Item Display</em>)</a></li>
-</ul>
+- [La création de conteneurs de grille (_Establishing Grid Containers_)](https://drafts.csswg.org/css-grid/#grid-containers)
+- [Les objets de la grille (_Grid Items_)](https://drafts.csswg.org/css-grid/#grid-items)
+- [L'affichage d'un objet de la grille (_Grid Item Display_)](https://drafts.csswg.org/css-grid/#grid-item-display)
 
-<p>Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.</p>
+Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.
 
-<h3 id="Les_autres_valeurs_de_display">Les autres valeurs de <code> display</code></h3>
+### Les autres valeurs de `display`
 
-<p>Lorsqu'un élément possède un parent pour lequel <code>display: grid</code>, cet élément devient un bloc (cf. <a href="https://drafts.csswg.org/css-display-3/#blockify">la specification</a>). C'est pour cela que, pour l'élément qui utilisait <code>inline-block</code>, <code>display: inline-block</code> ne s'appliquait plus.</p>
+Lorsqu'un élément possède un parent pour lequel `display: grid`, cet élément devient un bloc (cf. [la specification](https://drafts.csswg.org/css-display-3/#blockify)). C'est pour cela que, pour l'élément qui utilisait `inline-block`, `display: inline-block` ne s'appliquait plus.
 
-<p>Si la disposition historique utilise <code>display: table</code>, un élément avec <code>display: table-cell</code> génèrera des boîtes anonymes. Aussi, si on utilise <code>display: table-cell</code> sans élément parent avec <code>display-table</code>, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un <code>div</code> ou autre pour lequel on aurait défini <code>display: table</code>). Si on a un objet pour lequel <code>display: table-cell</code> et que, dans une requête de fonctionnalité, on utilise <code>display: grid</code> pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger <code>display: table</code> sans avoir ces boîtes anonymes supplémentaires.</p>
+Si la disposition historique utilise `display: table`, un élément avec `display: table-cell` génèrera des boîtes anonymes. Aussi, si on utilise `display: table-cell` sans élément parent avec `display-table`, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un `div` ou autre pour lequel on aurait défini `display: table`). Si on a un objet pour lequel `display: table-cell` et que, dans une requête de fonctionnalité, on utilise `display: grid` pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger `display: table` sans avoir ces boîtes anonymes supplémentaires.
 
-<h3 id="Les_éléments_flottants">Les éléments flottants</h3>
+### Les éléments flottants
 
-<p>Comme nous l'avons déjà vu, {{cssxref("float")}}, ainsi que {{cssxref("clear")}} n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement <code>float: none</code> sur les éléments.</p>
+Comme nous l'avons déjà vu, {{cssxref("float")}}, ainsi que {{cssxref("clear")}} n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement `float: none` sur les éléments.
 
-<h3 id="L'alignement_vertical">L'alignement vertical</h3>
+### L'alignement vertical
 
-<p>La propriété d'alignement {{cssxref("vertical-align")}} n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent <code>display: inline-block</code> ou <code>display: table</code>, la propriété <code>vertical-align</code> était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.</p>
+La propriété d'alignement {{cssxref("vertical-align")}} n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent `display: inline-block` ou `display: table`, la propriété `vertical-align` était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.
 
-<h3 id="La_disposition_sur_plusieurs_colonnes">La disposition sur plusieurs colonnes</h3>
+### La disposition sur plusieurs colonnes
 
-<p>Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés <code>column-*</code> ne s'appliquent pas sur un conteneur de grille.</p>
+Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés `column-*` ne s'appliquent pas sur un conteneur de grille.
 
-<h2 id="Approfondir_la_question">Approfondir la question</h2>
+## Approfondir la question
 
-<ul>
- <li>Pour mieux comprendre comment utiliser les requêtes média en CSS, vous pouvez lire <a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">cet excellent article de Hacks</a>.</li>
- <li>Un récapitulatif des différences d'implémentation entre celle utilisée par IE/Edge ≤15 et celle qui décrit la version moderne de la spécification. Cet article évoque également la prise en charge d'<em>autoprefixer</em> : <em><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Should I try to use the IE implementation of CSS Grid Layout?</a></em></li>
- <li><a href="https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie">Autoprefixer et le placement automatique des grilles pour IE</a></li>
- <li><a href="https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer">Les grilles CSS et la nouvelle version d'Autoprefixer</a></li>
-</ul>
+- Pour mieux comprendre comment utiliser les requêtes média en CSS, vous pouvez lire [cet excellent article de Hacks](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/).
+- Un récapitulatif des différences d'implémentation entre celle utilisée par IE/Edge ≤15 et celle qui décrit la version moderne de la spécification. Cet article évoque également la prise en charge d'_autoprefixer_ : _[Should I try to use the IE implementation of CSS Grid Layout?](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/)_
+- [Autoprefixer et le placement automatique des grilles pour IE](https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie)
+- [Les grilles CSS et la nouvelle version d'Autoprefixer](https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer)
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}
diff --git a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.md b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.md
index 2270ae2deb..0bddfca0e4 100644
--- a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.md
+++ b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.md
@@ -11,43 +11,40 @@ tags:
 translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
 original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}
 
-<p>Pour celles et ceux qui étaient présents aux premières lueurs du Web, les grilles CSS peuvent rappeler l'âge sombre où les tableaux HTML étaient utilisés pour la mise en forme des pages et où les cellules étaient utilisées pour diviser le contenu. Cette approche avait quelques avantages par rapport au positionnement CSS apparu après : on pouvait tirer parti de l'alignement et des colonnes créées dans un tableau. Il y a toutefois un inconvénient majeur : la mise en forme est fortement couplée à la structure du document, entraînant certains problèmes d'accessibilité. On pouvait par exemple découper le contenu dans le tableau afin d'obtenir la mise en forme souhaitée mais la structure de la page n'avait plus aucun sens lorsqu'elle était lue par un lecteur d'écran.</p>
+Pour celles et ceux qui étaient présents aux premières lueurs du Web, les grilles CSS peuvent rappeler l'âge sombre où les tableaux HTML étaient utilisés pour la mise en forme des pages et où les cellules étaient utilisées pour diviser le contenu. Cette approche avait quelques avantages par rapport au positionnement CSS apparu après : on pouvait tirer parti de l'alignement et des colonnes créées dans un tableau. Il y a toutefois un inconvénient majeur : la mise en forme est fortement couplée à la structure du document, entraînant certains problèmes d'accessibilité. On pouvait par exemple découper le contenu dans le tableau afin d'obtenir la mise en forme souhaitée mais la structure de la page n'avait plus aucun sens lorsqu'elle était lue par un lecteur d'écran.
 
-<p>Aux débuts de CSS, on évoquait souvent CSS comme un outil pour séparer distinctement la mise en forme d'une part et le contenu du document d'autre part. L'objectif ultime était alors de pouvoir créer un document sémantique et structuré correctement puis appliquer une feuille de style CSS afin de créer la disposition voulue. Des sites tels que <a href="https://www.csszengarden.com/">CSS Zen Garden</a> montrent comment obtenir différents styles grâce à CSS à partir d'un même document HTML.</p>
+Aux débuts de CSS, on évoquait souvent CSS comme un outil pour séparer distinctement la mise en forme d'une part et le contenu du document d'autre part. L'objectif ultime était alors de pouvoir créer un document sémantique et structuré correctement puis appliquer une feuille de style CSS afin de créer la disposition voulue. Des sites tels que [CSS Zen Garden](https://www.csszengarden.com/) montrent comment obtenir différents styles grâce à CSS à partir d'un même document HTML.
 
-<p><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a> n'ont pas les mêmes problèmes que les tableaux : la structure de la grille est bien définie dans la feuille de style et pas dans le document. Si nécessaire, on peut ajouter un élément sans rôle sémantique. En théorie, une grille CSS nous aide à obtenir cette séparation conceptuelle entre la forme (le code CSS) et le sens (le document HTML) mais est-il possible d'aller trop loin avec cette idée ? Est-ce que les grilles CSS peuvent causer des problèmes d'accessibilité ?</p>
+[Les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) n'ont pas les mêmes problèmes que les tableaux : la structure de la grille est bien définie dans la feuille de style et pas dans le document. Si nécessaire, on peut ajouter un élément sans rôle sémantique. En théorie, une grille CSS nous aide à obtenir cette séparation conceptuelle entre la forme (le code CSS) et le sens (le document HTML) mais est-il possible d'aller trop loin avec cette idée ? Est-ce que les grilles CSS peuvent causer des problèmes d'accessibilité ?
 
-<h2 id="Réordonner_le_contenu_dans_une_grille_CSS">Réordonner le contenu dans une grille CSS</h2>
+## Réordonner le contenu dans une grille CSS
 
-<p>Au fur et à mesure de ces articles, nous avons vu que les grilles CSS nous permettent de réordonner le contenu d'une page de différentes façons. On peut utiliser la propriété {{cssxref("order")}} afin de modifier la façon dont les éléments sont placés automatiquement sur la grille. On peut aussi utiliser <code>grid-auto-flow: dense</code> pour que les éléments ne suivent pas l'ordre du DOM afin de réduire les espaces laissés. On peut aussi positionner les éléments sur des lignes ou sur des zones définies, quel que soit leur emplacement dans la structure du document source.</p>
+Au fur et à mesure de ces articles, nous avons vu que les grilles CSS nous permettent de réordonner le contenu d'une page de différentes façons. On peut utiliser la propriété {{cssxref("order")}} afin de modifier la façon dont les éléments sont placés automatiquement sur la grille. On peut aussi utiliser `grid-auto-flow: dense` pour que les éléments ne suivent pas l'ordre du DOM afin de réduire les espaces laissés. On peut aussi positionner les éléments sur des lignes ou sur des zones définies, quel que soit leur emplacement dans la structure du document source.
 
-<p><a href="https://drafts.csswg.org/css-grid/#order-accessibility">La spécification</a> contient une section qui aborde ce ré-ordonnancement et l'accessibilité. En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.</p>
+[La spécification](https://drafts.csswg.org/css-grid/#order-accessibility) contient une section qui aborde ce ré-ordonnancement et l'accessibilité. En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.
 
-<blockquote>
-<p>La disposition en grille fournit une grande flexibilité aux auteurs pour replacer le contenu du document. Toutefois, cette flexibilité ne doit pas être utilisée pour pallier à un ordre incorrect du document source. Les propriétés des grilles relatives à l'ordre et au placement n'ont pas d'effet quant aux médias non-visuels (tels que la parole). De la même façon, le ré-ordonnancement visuel des éléments sur la grille n'a pas d'effet sur l'ordre de parcours séquentiel par défaut du document (notamment utilisé pour la navigation au clavier ou le parcours des liens, cf. <code><a href="/fr/docs/Web/HTML/Attributs_universels/tabindex">tabindex</a></code>).</p>
-</blockquote>
+> La disposition en grille fournit une grande flexibilité aux auteurs pour replacer le contenu du document. Toutefois, cette flexibilité ne doit pas être utilisée pour pallier à un ordre incorrect du document source. Les propriétés des grilles relatives à l'ordre et au placement n'ont pas d'effet quant aux médias non-visuels (tels que la parole). De la même façon, le ré-ordonnancement visuel des éléments sur la grille n'a pas d'effet sur l'ordre de parcours séquentiel par défaut du document (notamment utilisé pour la navigation au clavier ou le parcours des liens, cf. [`tabindex`](/fr/docs/Web/HTML/Attributs_universels/tabindex)).
 
-<p>Si vous réordonnez les éléments du document grâce à une disposition sur une grille, cela ne changera pas l'ordre du contenu lu par un lecteur d'écran ou manipulé par un autre agent utilisateur. Cela ne modifiera pas non plus l'ordre des éléments lorsque ceux-ci sont parcourus au clavier. Une personne utilisant le clavier pourrait ainsi passer d'un coup de la partie haute de la grille à la partie basse si les liens ont été réordonnés.</p>
+Si vous réordonnez les éléments du document grâce à une disposition sur une grille, cela ne changera pas l'ordre du contenu lu par un lecteur d'écran ou manipulé par un autre agent utilisateur. Cela ne modifiera pas non plus l'ordre des éléments lorsque ceux-ci sont parcourus au clavier. Une personne utilisant le clavier pourrait ainsi passer d'un coup de la partie haute de la grille à la partie basse si les liens ont été réordonnés.
 
-<p>La spécification prévient les auteurs (c'est-à-dire les développeurs web) et leur indique de ne pas appliquer ce ré-ordonnancement.</p>
+La spécification prévient les auteurs (c'est-à-dire les développeurs web) et leur indique de ne pas appliquer ce ré-ordonnancement.
 
-<blockquote>
-<p>Les auteurs doivent utiliser les propriétés d'ordre et de placement uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. Les feuilles de style qui utilisent ces fonctionnalités afin de réordonner les éléments sur le plan logique ne sont pas considérées comme des feuilles de style conformes.</p>
-</blockquote>
+> Les auteurs doivent utiliser les propriétés d'ordre et de placement uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. Les feuilles de style qui utilisent ces fonctionnalités afin de réordonner les éléments sur le plan logique ne sont pas considérées comme des feuilles de style conformes.
 
-<p>Quelles sont les implications pratiques lorsqu'on conçoit une disposition avec une grille ?</p>
+Quelles sont les implications pratiques lorsqu'on conçoit une disposition avec une grille ?
 
-<h3 id="Un_ré-ordonnancement_visuel_et_non_logique">Un ré-ordonnancement visuel et non logique</h3>
+### Un ré-ordonnancement visuel et non logique
 
-<p>La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est uniquement <em>visuelle</em>. C'est toujours le document sous-jacent qui contrôle l'ordre utilisé par les agents utilisateur non-visuels. Voyons comment cela s'applique pour un exemple simple.</p>
+La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est uniquement _visuelle_. C'est toujours le document sous-jacent qui contrôle l'ordre utilisé par les agents utilisateur non-visuels. Voyons comment cela s'applique pour un exemple simple.
 
-<p>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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -55,16 +52,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
@@ -74,48 +72,47 @@ original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité
   grid-column: 1;
   grid-row: 2;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box box1"&gt;&lt;a href=""&gt;Un&lt;/a&gt;&lt;/div&gt;
-  &lt;div class="box box2"&gt;&lt;a href=""&gt;Deux&lt;/a&gt;&lt;/div&gt;
-  &lt;div class="box box3"&gt;&lt;a href=""&gt;Trois&lt;/a&gt;&lt;/div&gt;
-  &lt;div class="box box4"&gt;&lt;a href=""&gt;Quatre&lt;/a&gt;&lt;/div&gt;
-  &lt;div class="box box5"&gt;&lt;a href=""&gt;Cinq&lt;/a&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="box box1"><a href="">Un</a></div>
+  <div class="box box2"><a href="">Deux</a></div>
+  <div class="box box3"><a href="">Trois</a></div>
+  <div class="box box4"><a href="">Quatre</a></div>
+  <div class="box box5"><a href="">Cinq</a></div>
+</div>
+```
 
-<p>{{EmbedLiveSample('Un_ré-ordonnancement_visuel_et_non_logique', '500', '330')}}</p>
+{{EmbedLiveSample('Un_ré-ordonnancement_visuel_et_non_logique', '500', '330')}}
 
-<p>Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.</p>
+Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.
 
-<h2 id="Comment_prendre_en_compte_l'accessibilité_avec_une_disposition_en_grille">Comment prendre en compte l'accessibilité avec une disposition en grille ?</h2>
+## Comment prendre en compte l'accessibilité avec une disposition en grille ?
 
-<p>On voit à partir de la spécification qu'il faut maintenir l'ordre logique du contenu. Quelle approche choisir pendant le développement afin de s'assurer de respecter l'accessibilité pour les utilisateurs et que ceux-ci puissent interagir correctement avec la page, quels que soient les outils utilisés ?</p>
+On voit à partir de la spécification qu'il faut maintenir l'ordre logique du contenu. Quelle approche choisir pendant le développement afin de s'assurer de respecter l'accessibilité pour les utilisateurs et que ceux-ci puissent interagir correctement avec la page, quels que soient les outils utilisés ?
 
-<dl>
- <dt>Démarrer avec un document structuré et accessible</dt>
- <dd>Une disposition en grille ne doit pas nécessiter de changement dans la structure du document pour obtenir la disposition souhaitée. Aussi, pour commencer, le document qui forme la page doit être bien structuré et accessible. Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans. Si un utilisateur fait défiler le site sur un appareil mobile, les éléments qu'il doit voir en premier sont généralement ceux qui sont au début du document dans la source.</dd>
- <dt>Créer une grille adaptative correcte</dt>
- <dd>Grâce à cette structure de base claire, on peut complexifier la disposition. Il est probable qu'on veuille ajouter des <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a> afin de créer des colonnes supplémentaires et gérer différentes tailles d'écran et différents appareils. Une grille peut s'avérer très utile pour déplacer les éléments qui étaient moins prioritaires sur mobile afin de construire la disposition d'un écran plus large. Une bonne stratégie consiste à tester chaque disposition, simplement en utilisant la navigation avec la touche tabulation : est-ce que cet ordre est pertinent ? est-ce qu'on ne passe pas d'un coup du haut en bas de la page ?</dd>
- <dt>Revenir à la source</dt>
- <dd>Si, pendant cette phase de conception, vous avez besoin de replacer un élément avec la grille, analysez s'il est nécessaire de replacer cet élément dans l'ordre logique du document. Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style. C'est un atout considérable par rapport aux dispositions construites avec {{cssxref("float")}} où la structure et l'ordre du document jouaient un rôle fondamental. Cela demande toutefois de garder à l'esprit qu'il faut revenir à la source pour mettre à jour et maintenir l'ordre logique.</dd>
-</dl>
+- Démarrer avec un document structuré et accessible
+  - : Une disposition en grille ne doit pas nécessiter de changement dans la structure du document pour obtenir la disposition souhaitée. Aussi, pour commencer, le document qui forme la page doit être bien structuré et accessible. Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans. Si un utilisateur fait défiler le site sur un appareil mobile, les éléments qu'il doit voir en premier sont généralement ceux qui sont au début du document dans la source.
+- Créer une grille adaptative correcte
+  - : Grâce à cette structure de base claire, on peut complexifier la disposition. Il est probable qu'on veuille ajouter des [requêtes de média](/fr/docs/Web/CSS/Requêtes_média) afin de créer des colonnes supplémentaires et gérer différentes tailles d'écran et différents appareils. Une grille peut s'avérer très utile pour déplacer les éléments qui étaient moins prioritaires sur mobile afin de construire la disposition d'un écran plus large. Une bonne stratégie consiste à tester chaque disposition, simplement en utilisant la navigation avec la touche tabulation : est-ce que cet ordre est pertinent ? est-ce qu'on ne passe pas d'un coup du haut en bas de la page ?
+- Revenir à la source
+  - : Si, pendant cette phase de conception, vous avez besoin de replacer un élément avec la grille, analysez s'il est nécessaire de replacer cet élément dans l'ordre logique du document. Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style. C'est un atout considérable par rapport aux dispositions construites avec {{cssxref("float")}} où la structure et l'ordre du document jouaient un rôle fondamental. Cela demande toutefois de garder à l'esprit qu'il faut revenir à la source pour mettre à jour et maintenir l'ordre logique.
 
-<h2 id="Les_grilles_et_le_risque_d'aplatir_le_document_à_outrance">Les grilles et le risque d'aplatir le document à outrance</h2>
+## Les grilles et le risque d'aplatir le document à outrance
 
-<p>On peut rencontrer un autre problème avec les grilles CSS (et, dans une moindre mesure, avec les boîtes flexibles) : vouloir aplatir la structure du document. Comme nous avons pu le voir, pour qu'un objet appartienne à la grille, il faut que ce soit un fils direct du conteneur de la grille. Ainsi, si on place un élément {{HTMLElement("ul")}} dans une grille, c'est <em>cet</em> <code>ul</code> qui devient un objet de la grille, les éléments {{HTMLElement("li")}} qui en dépendent n'en sont pas.</p>
+On peut rencontrer un autre problème avec les grilles CSS (et, dans une moindre mesure, avec les boîtes flexibles) : vouloir aplatir la structure du document. Comme nous avons pu le voir, pour qu'un objet appartienne à la grille, il faut que ce soit un fils direct du conteneur de la grille. Ainsi, si on place un élément {{HTMLElement("ul")}} dans une grille, c'est _cet_ `ul` qui devient un objet de la grille, les éléments {{HTMLElement("li")}} qui en dépendent n'en sont pas.
 
-<p>Si la valeur <code>subgrid</code> est implémentée pour la propriété {{cssxref("display")}}, on pourra alors indiquer que ces fils participent à la grille en tant que <em>sous-grille</em>. Actuellement, la seule solution à notre disposition est d'utiliser <code>display: contents</code> afin que la boîte générée par l'élément <code>ul</code> disparaisse de la structure graphique. Pour plus d'informations à ce sujet, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">l'article sur les liens entre les grilles et les autres méthodes de disposition</a> et notamment la section sur <code><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition#Utiliser_une_grille_et_display_contents">display: contents</a></code>.</p>
+Si la valeur `subgrid` est implémentée pour la propriété {{cssxref("display")}}, on pourra alors indiquer que ces fils participent à la grille en tant que _sous-grille_. Actuellement, la seule solution à notre disposition est d'utiliser `display: contents` afin que la boîte générée par l'élément `ul` disparaisse de la structure graphique. Pour plus d'informations à ce sujet, vous pouvez consulter [l'article sur les liens entre les grilles et les autres méthodes de disposition](/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition) et notamment la section sur [`display: contents`](/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition#Utiliser_une_grille_et_display_contents).
 
-<p>Étant donné que la prise en charge de <code>display: contents</code> pour les différents navigateurs est actuellement limitée et que les sous-grilles n'existent pas encore, on peut être tenté d'aplatir la structure du document lorsqu'on utilise les grilles CSS pour créer la disposition d'un document. Par exemple, pour une liste, identifiée sémantiquement comme telle avec <code>ul</code>, on pourrait plutôt utiliser des éléments {{HTMLElement("div")}} qui seraient des éléments directement situés sous le conteneur qui a <code>display: grid</code>. Mieux vaut donc être conscient de cette tentation et construire un document sans détricoter la structure. En commençant par créer un document structuré, on se rend plus facilement compte de la sémantique perdue si on retire des éléments pour une simple question visuelle.</p>
+Étant donné que la prise en charge de `display: contents` pour les différents navigateurs est actuellement limitée et que les sous-grilles n'existent pas encore, on peut être tenté d'aplatir la structure du document lorsqu'on utilise les grilles CSS pour créer la disposition d'un document. Par exemple, pour une liste, identifiée sémantiquement comme telle avec `ul`, on pourrait plutôt utiliser des éléments {{HTMLElement("div")}} qui seraient des éléments directement situés sous le conteneur qui a `display: grid`. Mieux vaut donc être conscient de cette tentation et construire un document sans détricoter la structure. En commençant par créer un document structuré, on se rend plus facilement compte de la sémantique perdue si on retire des éléments pour une simple question visuelle.
 
-<h2 id="Approfondir_la_question">Approfondir la question</h2>
+## Approfondir la question
 
-<p>Il n'existe pas encore beaucoup de contenu relatif à l'accessibilité et au modèle de grille CSS. La plupart des problèmes rencontrés s'approchent de ceux qu'on rencontre avec les boîtes flexibles (qui permettent également de réordonner le contenu avec des propriétés comme {{cssxref("flex-direction")}} et {{cssxref("order")}}).</p>
+Il n'existe pas encore beaucoup de contenu relatif à l'accessibilité et au modèle de grille CSS. La plupart des problèmes rencontrés s'approchent de ceux qu'on rencontre avec les boîtes flexibles (qui permettent également de réordonner le contenu avec des propriétés comme {{cssxref("flex-direction")}} et {{cssxref("order")}}).
 
-<p>Le concept selon lequel l'ordre d'affichage des éléments doit suivre l'ordre des éléments dans le document est décrit dans <em>WCAG Techniques for Success Criteria – <a href="https://www.w3.org/TR/WCAG20-TECHS/C27.html">Technique C27</a></em> (en anglais).</p>
+Le concept selon lequel l'ordre d'affichage des éléments doit suivre l'ordre des éléments dans le document est décrit dans _WCAG Techniques for Success Criteria – [Technique C27](https://www.w3.org/TR/WCAG20-TECHS/C27.html)_ (en anglais).
 
-<p>Pour construire votre réflexion sur ce sujet, je vous invite à lire <em><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox &amp; the Keyboard Navigation Disconnect</a></em> écrit par Léonie Watson. <a href="https://www.youtube.com/watch?v=spxT2CmHoPk">La vidéo de la présentation de Léonie à ffconf</a> est aussi utile pour mieux comprendre comment les lecteurs d'écran utilisent la représentation visuelle des objets en CSS. Adrian Roselli a également publié <a href="https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">un article sur l'ordre de la navigation au clavier dans les différents navigateurs</a> bien que cet article ait été rédigé avant l'implémentation des grilles CSS dans Firefox.</p>
+Pour construire votre réflexion sur ce sujet, je vous invite à lire _[Flexbox & the Keyboard Navigation Disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)_ écrit par Léonie Watson. [La vidéo de la présentation de Léonie à ffconf](https://www.youtube.com/watch?v=spxT2CmHoPk) est aussi utile pour mieux comprendre comment les lecteurs d'écran utilisent la représentation visuelle des objets en CSS. Adrian Roselli a également publié [un article sur l'ordre de la navigation au clavier dans les différents navigateurs](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html) bien que cet article ait été rédigé avant l'implémentation des grilles CSS dans Firefox.
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}
diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md
index d43798fd7f..9cf0afc469 100644
--- a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md
+++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md
@@ -11,17 +11,18 @@ translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mod
 original_slug: >-
   Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}
 
-<p>Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.</p>
+Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.
 
-<h2 id="Les_propriétés_logiques_les_propriétés_physiques_et_les_valeurs">Les propriétés logiques, les propriétés physiques et les valeurs</h2>
+## Les propriétés logiques, les propriétés physiques et les valeurs
 
-<p>CSS possède de nombreux mots-clés qui permettent de positionner <strong>physiquement</strong> les éléments : <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.</p>
+CSS possède de nombreux mots-clés qui permettent de positionner **physiquement** les éléments : `left`, `right`, `top`, `bottom`… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.
 
-<pre class="brush:css">.container {
+```css
+.container {
   position: relative;
 }
 .item {
@@ -29,52 +30,52 @@ original_slug: >-
   top: 20px;
   left: 30px;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;div class="item"&gt;Item&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="container">
+  <div class="item">Item</div>
+</div>
+```
 
-<p>On rencontre également ces mots-clés physiques avec <code>text-align: right</code> afin d'aligner le texte à droite. Il existe aussi des propriétés <strong>physiques</strong> en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.</p>
+On rencontre également ces mots-clés physiques avec `text-align: right` afin d'aligner le texte à droite. Il existe aussi des propriétés **physiques** en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.
 
-<p>On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.</p>
+On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.
 
-<p>Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise <code>text-align</code> avec <code>left</code> et on ajoute <code>dir="rtl"</code> sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec <code>text-align value: left</code>, l'alignement reste à gauche.</p>
+Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise `text-align` avec `left` et on ajoute `dir="rtl"` sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec `text-align value: left`, l'alignement reste à gauche.
 
-<p><img alt="A simple example of text direction." src="8_direction_simple_example.png"></p>
+![A simple example of text direction.](8_direction_simple_example.png)
 
-<p>Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.</p>
+Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.
 
-<h3 id="Les_propriétés_et_valeurs_logiques">Les propriétés et valeurs logiques</h3>
+### Les propriétés et valeurs logiques
 
-<p>Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à la direction du texte. C'est pour cette raison, qu'avec les grilles CSS, on utilise le mot-clé <code>start</code> lorsqu'on souhaite aligner quelque chose au début du conteneur. Quand on travaille en français ou en anglais, <code>start</code> correspondra à la gauche mais ce n'est pas nécessairement toujours le cas, <code>start</code> ne correspond pas à une position physique.</p>
+Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à la direction du texte. C'est pour cette raison, qu'avec les grilles CSS, on utilise le mot-clé `start` lorsqu'on souhaite aligner quelque chose au début du conteneur. Quand on travaille en français ou en anglais, `start` correspondra à la gauche mais ce n'est pas nécessairement toujours le cas, `start` ne correspond pas à une position physique.
 
-<h2 id="L'axe_de_bloc_et_l'axe_en_ligne">L'axe de bloc et l'axe en ligne</h2>
+## L'axe de bloc et l'axe en ligne
 
-<p>Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (<em>block axis</em> en anglais) et l'axe en ligne (<em>inline axis</em>). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes <em>logiques</em> sont très utiles et on comprend mieux leurs rôles sur la grille.</p>
+Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (_block axis_ en anglais) et l'axe en ligne (_inline axis_). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes _logiques_ sont très utiles et on comprend mieux leurs rôles sur la grille.
 
-<p><img alt="An image showing the default direction of the Block and Inline Axes." src="8-horizontal-tb.png"></p>
+![An image showing the default direction of the Block and Inline Axes.](8-horizontal-tb.png)
 
-<h2 id="Les_modes_d'écriture_CSS">Les modes d'écriture CSS</h2>
+## Les modes d'écriture CSS
 
-<p>Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (<em>CSS Writing Modes</em>). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article <a href="https://24ways.org/2016/css-writing-modes/"><em>CSS Writing Modes</em> (en anglais)</a> écrit par Jen Simmons.</p>
+Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (_CSS Writing Modes_). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article [_CSS Writing Modes_ (en anglais)](https://24ways.org/2016/css-writing-modes/) écrit par Jen Simmons.
 
-<h3 id="writing-mode"><code>writing-mode</code></h3>
+### `writing-mode`
 
-<p>Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété <code>writing-mode</code> nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :</p>
+Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété `writing-mode` nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :
 
-<ul>
- <li><code>horizontal-tb</code></li>
- <li><code>vertical-rl</code></li>
- <li><code>vertical-lr</code></li>
- <li><code>sideways-rl</code></li>
- <li><code>sideways-lr</code></li>
-</ul>
+- `horizontal-tb`
+- `vertical-rl`
+- `vertical-lr`
+- `sideways-rl`
+- `sideways-lr`
 
-<p>Sur le Web, c'est la valeur <code>horizontal-tb</code> qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut <code>horizontal-tb</code> et le second utilise la valeur <code>vertical-rl</code>. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (<em>inline</em>) est donc l'axe vertical.</p>
+Sur le Web, c'est la valeur `horizontal-tb` qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut `horizontal-tb` et le second utilise la valeur `vertical-rl`. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (_inline_) est donc l'axe vertical.
 
-<pre class="brush: css hidden">.wrapper &gt; p {
+```css hidden
+.wrapper > p {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
@@ -83,25 +84,27 @@ original_slug: >-
   color: #d9480f;
   max-width: 300px;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;p style="writing-mode: horizontal-tb"&gt;Mon mode d'écriture est celui par défaut &lt;code&gt;horizontal-tb&lt;/code&gt;&lt;/p&gt;
-  &lt;p style="writing-mode: vertical-rl"&gt;Moi je suis écrit avec &lt;code&gt;vertical-rl&lt;/code&gt;&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```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>
+</div>
+```
 
-<p>{{EmbedLiveSample("writing-mode", '500', '420')}}</p>
+{{EmbedLiveSample("writing-mode", '500', '420')}}
 
-<h2 id="La_gestion_des_modes_d'écriture_avec_une_grille">La gestion des modes d'écriture avec une grille</h2>
+## La gestion des modes d'écriture avec une grille
 
-<p>Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.</p>
+Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.
 
-<h3 id="Mode_d'écriture_par_défaut">Mode d'écriture par défaut</h3>
+### Mode d'écriture par défaut
 
-<p>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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -109,39 +112,42 @@ original_slug: >-
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(2, 100px);
   grid-gap: 10px;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-  &lt;div class="item5"&gt;Objet 5&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```
+
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+  <div class="item5">Objet 5</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Mode_d'écriture_par_défaut", '500', '330')}}</p>
+{{EmbedLiveSample("Mode_d'écriture_par_défaut", '500', '330')}}
 
-<h3 id="definir_writing-mode">Définir writing-mode</h3>
+### Définir writing-mode
 
-<p>Si on ajoute <code>writing-mode: vertical-lr</code> 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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -149,44 +155,47 @@ original_slug: >-
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   writing-mode: vertical-lr;
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(2, 100px);
   grid-gap: 10px;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-  &lt;div class="item5"&gt;Objet 5&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```
+
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+  <div class="item5">Objet 5</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("definir_writing-mode", '500', '330')}}</p>
+{{EmbedLiveSample("definir_writing-mode", '500', '330')}}
 
-<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="8-vertical-lr.png"></p>
+![A image showing the direction of Block and Inline when writing-mode is vertical-lr](8-vertical-lr.png)
 
-<h2 id="L'utilisation_de_valeurs_logiques_pour_l'alignement">L'utilisation de valeurs logiques pour l'alignement</h2>
+## L'utilisation de valeurs logiques pour l'alignement
 
-<p>Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pouvaient changer de direction, nous allons voir maintenant comment tirer partir des valeurs logiques des propriétés d'alignement.</p>
+Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pouvaient changer de direction, nous allons voir maintenant comment tirer partir des valeurs logiques des propriétés d'alignement.
 
-<p>Dans le prochain exemple, on aligne des objets dans une grille pour laquelle <code>writing-mode: vertical-lr</code>. Les valeurs <code>start</code> et <code>end</code> 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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -194,16 +203,17 @@ original_slug: >-
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   writing-mode: vertical-lr;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -228,38 +238,38 @@ original_slug: >-
   align-self: end;
   justify-self: end;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("L'utilisation_de_valeurs_logiques_pour_l'alignement", '500', '330')}}</p>
+{{EmbedLiveSample("L'utilisation_de_valeurs_logiques_pour_l'alignement", '500', '330')}}
 
-<p>Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de <code>vertical-lr</code> à <code>vertical-rl</code> pour changer de mode d'écriture.</p>
+Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de `vertical-lr` à `vertical-rl` pour changer de mode d'écriture.
 
-<h2 id="Le_placement_automatique_et_les_modes_d'écriture">Le placement automatique et les modes d'écriture</h2>
+## Le placement automatique et les modes d'écriture
 
-<p>On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.</p>
+On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.
 
-<h2 id="Le_placement_sur_les_lignes_et_les_modes_d'écriture">Le placement sur les lignes et les modes d'écriture</h2>
+## Le placement sur les lignes et les modes d'écriture
 
-<p>Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.</p>
+Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.
 
-<p>Dans l'exemple suivant, on a une grille avec la direction <code>ltr</code> et on positionne trois objets en utilisant le placement sur les lignes.</p>
+Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne trois objets en utilisant le placement sur les lignes.
 
-<ul>
- <li>L'objet 1 commence à la colonne 1 et occupe une piste</li>
- <li>L'objet 2 commence à la colonne -1 et occupe -3 pistes</li>
- <li>L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.</li>
-</ul>
+- L'objet 1 commence à la colonne 1 et occupe une piste
+- L'objet 2 commence à la colonne -1 et occupe -3 pistes
+- L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.
 
-<h3 id="placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite">Placement sur les lignes pour du texte de gauche à droite</h3>
+### Placement sur les lignes pour du texte de gauche à droite
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -267,17 +277,17 @@ original_slug: >-
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
-</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 100px);
@@ -293,22 +303,24 @@ original_slug: >-
   grid-column: 1 / 3;
   grid-row: 2;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite", '500', '330')}}</p>
+{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_gauche_à_droite", '500', '330')}}
 
-<h3 id="placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche">Placement sur les lignes pour du texte de droite à gauche</h3>
+### Placement sur les lignes pour du texte de droite à gauche
 
-<p>Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur <code>rtl</code> pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -316,16 +328,17 @@ original_slug: >-
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   direction: rtl;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -342,48 +355,46 @@ original_slug: >-
   grid-column: 1 / 3;
   grid-row: 2;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche", '500', '330')}}</p>
+{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_droite_à_gauche", '500', '330')}}
 
-<p>On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.</p>
+On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.
 
-<h3 id="L'étrange_ordre_des_valeurs_pour_grid-area">L'étrange ordre des valeurs pour <code>grid-area</code></h3>
+### L'étrange ordre des valeurs pour `grid-area`
 
-<p>La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).</p>
+La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).
 
-<p>Pour les valeurs de <code>grid-area</code>, l'ordre est le suivant :</p>
+Pour les valeurs de `grid-area`, l'ordre est le suivant :
 
-<ul>
- <li><code>grid-row-start</code></li>
- <li><code>grid-column-start</code></li>
- <li><code>grid-row-end</code></li>
- <li><code>grid-column-end</code></li>
-</ul>
+- `grid-row-start`
+- `grid-column-start`
+- `grid-row-end`
+- `grid-column-end`
 
-<p>Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :</p>
+Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :
 
-<ul>
- <li><code>top</code></li>
- <li><code>left</code></li>
- <li><code>bottom</code></li>
- <li><code>right</code></li>
-</ul>
+- `top`
+- `left`
+- `bottom`
+- `right`
 
-<p>Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété <code>grid-area</code> comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !</p>
+Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété `grid-area` comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !
 
-<h2 id="Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS">Utiliser des modes d'écriture hybrides et les grilles CSS</h2>
+## Utiliser des modes d'écriture hybrides et les grilles CSS
 
-<p>Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.</p>
+Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-gap: 20px;
   grid-template-columns: 1fr auto;
@@ -402,35 +413,36 @@ original_slug: >-
 .wrapper a {
   text-decoration: none;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="content"&gt;
-    &lt;p&gt;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.&lt;/p&gt;
-    &lt;p&gt;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.&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;nav&gt;
-    &lt;ul&gt;
-      &lt;li&gt;&lt;a href=""&gt;Lien 1&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href=""&gt;Lien 2&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href=""&gt;Lien 3&lt;/a&gt;&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/nav&gt;
-&lt;/div&gt;
-</pre>
+```
+
+```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>
+  </div>
+  <nav>
+    <ul>
+      <li><a href="">Lien 1</a></li>
+      <li><a href="">Lien 2</a></li>
+      <li><a href="">Lien 3</a></li>
+    </ul>
+  </nav>
+</div>
+```
 
-<p>{{EmbedLiveSample("Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS", '500', '330')}}</p>
+{{EmbedLiveSample("Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS", '500', '330')}}
 
-<h2 id="Les_valeurs_physiques_et_les_grilles_CSS">Les valeurs physiques et les grilles CSS</h2>
+## Les valeurs physiques et les grilles CSS
 
-<p>On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">l'alignement des boîtes et les grilles</a>, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.</p>
+On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur [l'alignement des boîtes et les grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout), nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.
 
-<p>Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode <code>ltr</code> à un mode <code>rtl</code>.</p>
+Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode `ltr` à un mode `rtl`.
 
-<h3 id="Utiliser_les_propriétés_logiques_partout">Utiliser les propriétés logiques partout</h3>
+### Utiliser les propriétés logiques partout
 
-<p>Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.</p>
+Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.
 
-<p>La <a href="https://drafts.csswg.org/css-logical-props/">spécification sur les propriétés logiques en CSS</a> vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">équivalents logiques</a> pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.</p>
+La [spécification sur les propriétés logiques en CSS](https://drafts.csswg.org/css-logical-props/) vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des [équivalents logiques](/fr/docs/Web/CSS/CSS_Logical_Properties) pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}
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 2b45f2fac6..b340f23c01 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
@@ -9,39 +9,39 @@ tags:
 translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
 original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}
 
-<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">le guide précédent</a>, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des <em>zones</em> de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !</p>
+Dans [le guide précédent](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid), on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des _zones_ de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !
 
-<h2 id="Donner_un_nom_à_une_zone_de_grille">Donner un nom à une zone de grille</h2>
+## Donner un nom à une zone de grille
 
-<p>On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :</p>
+On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
    grid-area: 1 / 1 / 4 / 2;
 }
-</pre>
+```
 
-<p>Ici, on définit les quatre lignes qui entourent la zone en question :</p>
+Ici, on définit les quatre lignes qui entourent la zone en question :
 
-<p><img alt="The Grid Area defined by lines" src="4_area.png"></p>
+![The Grid Area defined by lines](4_area.png)
 
-<p>On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :</p>
+On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :
 
-<ul>
- <li>Un en-tête (<em>header</em>)</li>
- <li>Un pied de page (<em>footer</em>)</li>
- <li>Une barre latérale (<em>sidebar</em>)</li>
- <li>Le contenu principale (<em>content</em>)</li>
-</ul>
+- Un en-tête (_header_)
+- Un pied de page (_footer_)
+- Une barre latérale (_sidebar_)
+- Le contenu principale (_content_)
 
-<p><img alt="An image showing a simple two column layout with header and footer" src="4_layout.png"></p>
+![An image showing a simple two column layout with header and footer](4_layout.png)
 
-<p>Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :</p>
+Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :
 
-<pre class="brush: css">.header {
+```css
+.header {
   grid-area: hd;
 }
 .footer {
@@ -53,11 +53,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 .sidebar {
   grid-area: sd;
 }
-</pre>
+```
 
-<p>Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :</p>
+Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -66,9 +67,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
     "sd sd sd main main main main main main"
     "ft ft ft ft   ft   ft   ft   ft   ft";
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -78,31 +80,34 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   margin: 0 auto;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="header"&gt;En-tête&lt;/div&gt;
-  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
-  &lt;div class="content"&gt;Contenu&lt;/div&gt;
-  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Donner_un_nom_à_une_zone_de_grille", '300', '330')}}</p>
+{{EmbedLiveSample("Donner_un_nom_à_une_zone_de_grille", '300', '330')}}
 
-<p>Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.</p>
+Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.
 
-<h2 id="Laisser_une_cellule_vide">Laisser une cellule vide</h2>
+## Laisser une cellule vide
 
-<p>Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.</p>
+Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.
 
-<pre class="brush: css">.header {
+```css
+.header {
   grid-area: hd;
 }
 .footer {
@@ -114,9 +119,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 .sidebar {
   grid-area: sd;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -126,16 +132,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   margin: 0 auto;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -144,26 +151,29 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
       "sd sd sd main main main main main main"
       ".  .  .  ft   ft   ft   ft   ft   ft";
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="header"&gt;En-tête&lt;/div&gt;
-  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
-  &lt;div class="content"&gt;Contenu&lt;/div&gt;
-  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Laisser_une_cellule_vide", '300', '330')}}</p>
+{{EmbedLiveSample("Laisser_une_cellule_vide", '300', '330')}}
 
-<p>Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.</p>
+Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.
 
-<h2 id="Occuper_plusieurs_cellules">Occuper plusieurs cellules</h2>
+## Occuper plusieurs cellules
 
-<p>Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que <code>hd</code> et <code>ft</code> soient alignés avec <code>main</code>).</p>
+Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que `hd` et `ft` soient alignés avec `main`).
 
-<p>La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par <code>sd</code>.</p>
+La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par `sd`.
 
-<pre class="brush: css">.header {
+```css
+.header {
   grid-area: hd;
 }
 .footer {
@@ -175,9 +185,10 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
 .sidebar {
   grid-area: sd;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -187,16 +198,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   margin: 0 auto;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -205,28 +217,31 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
     "sd sd sd main main main main main main"
     "sd sd sd  ft  ft   ft   ft   ft   ft";
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;div class="wrapper"&gt;
-  &lt;div class="header"&gt;En-tête&lt;/div&gt;
-  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
-  &lt;div class="content"&gt;Contenu&lt;/div&gt;
-  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html hidden
+<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Occuper_plusieurs_cellules", '300', '330')}}</p>
+{{EmbedLiveSample("Occuper_plusieurs_cellules", '300', '330')}}
 
-<p>La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.</p>
+La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.
 
-<h2 id="Redéfinir_une_grille_à_avec_des_media_queries">Redéfinir une grille à avec des <em>media queries</em></h2>
+## Redéfinir une grille à avec des _media queries_
 
-<p>Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.</p>
+Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.
 
-<p>Pour ce faire, on définit les noms des zones en dehors de toute <em>media query</em> afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.</p>
+Pour ce faire, on définit les noms des zones en dehors de toute _media query_ afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.
 
-<p>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 :</p>
+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 :
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -236,16 +251,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   margin: 0 auto;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.header {
+```css
+.header {
   grid-area: hd;
 }
 .footer {
@@ -268,11 +284,12 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
     "sd"
     "ft";
 }
-</pre>
+```
 
-<p>On peut ensuite redéfinir la disposition à l'intérieur des différentes <em>media queries</em> utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec <code>grid-template-areas</code>.</p>
+On peut ensuite redéfinir la disposition à l'intérieur des différentes _media queries_ utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec `grid-template-areas`.
 
-<pre class="brush: css">@media (min-width: 500px) {
+```css
+@media (min-width: 500px) {
   .wrapper {
     grid-template-columns: repeat(9, 1fr);
     grid-template-areas:
@@ -288,32 +305,35 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
       "sd sd main main main main main ft ft";
   }
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;div class="wrapper"&gt;
-  &lt;div class="header"&gt;En-tête&lt;/div&gt;
-  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
-  &lt;div class="content"&gt;Contenu&lt;/div&gt;
-  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html hidden
+<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}</p>
+{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}
 
-<h2 id="Utiliser_grid-template-areas_pour_des_éléments_d'interface_utilisateur">Utiliser <code>grid-template-areas</code> pour des éléments d'interface utilisateur</h2>
+## Utiliser `grid-template-areas` pour des éléments d'interface utilisateur
 
-<p>La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.</p>
+La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.
 
-<h3 id="Exemple_d'objet_média">Exemple d'objet média</h3>
+### Exemple d'objet média
 
-<p>Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.</p>
+Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.
 
-<p><img alt="Images showing an example media object design" src="4_media_objects.png"></p>
+![Images showing an example media object design](4_media_objects.png)
 
-<p>Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec <code>1fr</code> et celle pour le texte reçoit <code>3fr</code>. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser <code>1fr</code> pour la zone du texte. Cette colonne de <code>1fr</code> aurait alors occupé le reste de l'espace.</p>
+Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec `1fr` et celle pour le texte reçoit `3fr`. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser `1fr` pour la zone du texte. Cette colonne de `1fr` aurait alors occupé le reste de l'espace.
 
-<p>Pour la zone dédiée à l'image, on crée une zone de grille intitulée <code>img</code> et pour le texte, on crée une seconde zone intitulée <code>content</code>. Ensuite, on utilise ces noms pour créer l'organisation via la propriété <code>grid-template-areas</code>.</p>
+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`.
 
-<pre class="brush: css">* {box-sizing: border-box;}
+```css
+* {box-sizing: border-box;}
 
 .media {
   border: 2px solid #f76707;
@@ -337,24 +357,27 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   grid-area: content;
   padding: 10px;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="media"&gt;
-  &lt;div class="image"&gt;&lt;/div&gt;
-  &lt;div class="text"&gt;
+```html
+<div class="media">
+  <div class="image"></div>
+  <div class="text">
     Dans cet exemple, on peut utiliser
     grid-template-areas pour échanger les
     places du texte et du media.
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+  </div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Exemple_d'objet_média", '300', '200')}}</p>
+{{EmbedLiveSample("Exemple_d'objet_média", '300', '200')}}
 
-<h3 id="Afficher_l'image_de_l'autre_côté">Afficher l'image de l'autre côté</h3>
+### Afficher l'image de l'autre côté
 
-<p>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 <code>1fr</code> est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.</p>
+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")}}.
 
-<pre class="brush: css">* {box-sizing: border-box;}
+```css
+* {box-sizing: border-box;}
 
 .media {
   border: 2px solid #f76707;
@@ -383,44 +406,45 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
   grid-area: content;
   padding: 10px;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="media flipped"&gt;
-  &lt;div class="image"&gt;&lt;/div&gt;
-  &lt;div class="text"&gt;
+```html
+<div class="media flipped">
+  <div class="image"></div>
+  <div class="text">
     Dans cet exemple, on peut utiliser
     grid-template-areas pour échanger les
     places du texte et du media.
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+  </div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Afficher_l'image_de_l'autre_côté", '300', '200') }}</p>
+{{EmbedLiveSample("Afficher_l'image_de_l'autre_côté", '300', '200') }}
 
-<h2 id="Les_propriétés_raccourcies_pour_les_grilles_CSS">Les propriétés raccourcies pour les grilles CSS</h2>
+## Les propriétés raccourcies pour les grilles CSS
 
-<p>Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.</p>
+Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.
 
-<p>Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.</p>
+Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.
 
-<p>Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle <strong>mais aussi</strong> qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.</p>
+Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle **mais aussi** qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.
 
-<p>Les deux propriétés raccourcies pour les grilles sont <code>grid-template</code> et <code>grid</code>.</p>
+Les deux propriétés raccourcies pour les grilles sont `grid-template` et `grid`.
 
-<h3 id="grid-template"><code>grid-template</code></h3>
+### `grid-template`
 
-<p>La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :</p>
+La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :
 
-<ul>
- <li>{{cssxref("grid-template-rows")}}</li>
- <li>{{cssxref("grid-template-columns")}}</li>
- <li>{{cssxref("grid-template-areas")}}</li>
-</ul>
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-areas")}}
 
-<p>Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.</p>
+Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.
 
-<p>Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.</p>
+Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
     display: grid;
     grid-template:
       "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
@@ -428,40 +452,39 @@ original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
       "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
              / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
 }
-</pre>
+```
 
-<p>La première valeur correspond à celle de <code>grid-template-areas</code> mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec <code>minmax(100px, auto)</code>).</p>
+La première valeur correspond à celle de `grid-template-areas` mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec `minmax(100px, auto)`).
 
-<p>Après la valeur de <code>grid-template-areas</code>, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.</p>
+Après la valeur de `grid-template-areas`, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.
 
-<h3 id="grid"><code>grid</code></h3>
+### `grid`
 
-<p>La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :</p>
+La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :
 
-<ul>
- <li>{{cssxref("grid-template-rows")}}</li>
- <li>{{cssxref("grid-template-columns")}}</li>
- <li>{{cssxref("grid-template-areas")}}</li>
- <li>{{cssxref("grid-auto-rows")}}</li>
- <li>{{cssxref("grid-auto-columns")}}</li>
- <li>{{cssxref("grid-auto-flow")}}</li>
-</ul>
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-areas")}}
+- {{cssxref("grid-auto-rows")}}
+- {{cssxref("grid-auto-columns")}}
+- {{cssxref("grid-auto-flow")}}
 
-<p>Cette propriété réinitialise également la propriété {{cssxref("gap")}} avec la valeur <code>0</code> mais, en revanche, elle ne permet pas de définir des espaces.</p>
+Cette propriété réinitialise également la propriété {{cssxref("gap")}} avec la valeur `0` mais, en revanche, elle ne permet pas de définir des espaces.
 
-<p>On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :</p>
+On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
     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 ;
 }
-</pre>
+```
 
-<p>Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété <code>grid-auto-flow</code>.</p>
+Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété `grid-auto-flow`.
 
-<p>Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.</p>
+Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}
diff --git a/files/fr/web/css/css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/index.md
index 6d622ed3af..44d108bb14 100644
--- a/files/fr/web/css/css_grid_layout/index.md
+++ b/files/fr/web/css/css_grid_layout/index.md
@@ -8,44 +8,49 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Grid_Layout
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le module <em><strong>CSS Grid layout</strong></em> (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.</p>
+Le module **_CSS Grid layout_** (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.
 
-<p>Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.</p>
+Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.
 
-<h2 id="Un_exemple_simple">Un exemple simple</h2>
+## Un exemple simple
 
-<p>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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 .wrapper {
   max-width: 940px;
   margin: 0 auto;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid rgb(233,171,88);
   border-radius: 5px;
   background-color: rgba(233,171,88,.5);
   padding: 1em;
   color: #d9480f;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="one"&gt;Un&lt;/div&gt;
-  &lt;div class="two"&gt;Deux&lt;/div&gt;
-  &lt;div class="three"&gt;Trois&lt;/div&gt;
-  &lt;div class="four"&gt;Quatre&lt;/div&gt;
-  &lt;div class="five"&gt;Cinq&lt;/div&gt;
-  &lt;div class="six"&gt;Six&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="wrapper">
+  <div class="one">Un</div>
+  <div class="two">Deux</div>
+  <div class="three">Trois</div>
+  <div class="four">Quatre</div>
+  <div class="five">Cinq</div>
+  <div class="six">Six</div>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 10px;
@@ -75,109 +80,82 @@ translation_of: Web/CSS/CSS_Grid_Layout
   grid-column: 3;
   grid-row: 4;
 }
-</pre>
-
-<p>{{EmbedLiveSample("Un_exemple_simple", "100%", "440")}}</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
-
-<ul>
- <li>{{cssxref("grid-template-columns")}}</li>
- <li>{{cssxref("grid-template-rows")}}</li>
- <li>{{cssxref("grid-template-areas")}}</li>
- <li>{{cssxref("grid-template")}}</li>
- <li>{{cssxref("grid-auto-columns")}}</li>
- <li>{{cssxref("grid-auto-rows")}}</li>
- <li>{{cssxref("grid-auto-flow")}}</li>
- <li>{{cssxref("grid")}}</li>
- <li>{{cssxref("grid-row-start")}}</li>
- <li>{{cssxref("grid-column-start")}}</li>
- <li>{{cssxref("grid-row-end")}}</li>
- <li>{{cssxref("grid-column-end")}}</li>
- <li>{{cssxref("grid-row")}}</li>
- <li>{{cssxref("grid-column")}}</li>
- <li>{{cssxref("grid-area")}}</li>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
-
-<h3 id="Fonctions_CSS">Fonctions CSS</h3>
-
-<ul>
- <li>{{cssxref("repeat", "repeat()")}}</li>
- <li>{{cssxref("minmax", "minmax()")}}</li>
- <li>{{cssxref("fit-content", "fit-content()")}}</li>
-</ul>
-
-<h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3>
-
-<p>{{cssxref("&lt;flex&gt;")}}</p>
-
-<h3 id="Termes_définis_dans_le_glossaire">Termes définis dans le glossaire</h3>
-
-<ul>
- <li><a href="/fr/docs/Glossaire/Grid">Grille</a></li>
- <li><a href="/fr/docs/Glossaire/Grid_Lines">Lignes</a></li>
- <li><a href="/fr/docs/Glossaire/Grid_Tracks">Pistes</a></li>
- <li><a href="/fr/docs/Glossaire/Grid_Cell">Cellules</a></li>
- <li><a href="/fr/docs/Glossaire/Grid_Areas">Zones</a></li>
- <li><a href="/fr/docs/Glossaire/Gutters">Gouttières</a></li>
- <li><a href="/fr/docs/Glossaire/Grid_Axis">Axe</a></li>
- <li><a href="/fr/docs/Glossaire/Grid_Rows">Ligne horizontale </a></li>
- <li><a href="/fr/docs/Glossaire/Grid_Column">Colonnes</a></li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Placer les éléments sur les lignes d'une grille CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">Le modèle de grille et les autres modèles de disposition</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille">Utiliser des lignes nommées sur une grille</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Définir des zones sur une grille</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">Le placement automatique sur une grille</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles CSS, les valeurs logiques et les modes d'écriture</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">Les grilles CSS et l'accessibilité</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">Les grilles CSS et l'amélioration progressive</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS">Construire des dispositions courantes avec des grilles CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Les sous-grilles (<em>subgrid</em>)</a></li>
-</ul>
-
-<h2 id="Ressources_externes">Ressources externes</h2>
-
-<ul>
- <li><a href="http://labs.jensimmons.com/">Des exemples créés par Jen Simmons (en anglais)</a></li>
- <li><a href="http://gridbyexample.com/">Les grilles CSS par l'exemple - un ensemble d'exemples et de tutoriels (en anglais)</a></li>
- <li><a href="https://tympanus.net/codrops/css_reference/grid/">La référence Codrops sur les grilles CSS (en anglais)</a></li>
- <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">L'inspecteur de grille dans les outils de développement Firefox</a></li>
- <li><a href="https://mozilladevelopers.github.io/playground/">Le bac à sable CSS Grid (en anglais)</a></li>
- <li><a href="http://tomrothe.de/posts/css_grid_and_ie11.html">Les grilles CSS et Internet Explorer 11</a> (<a href="https://github.com/motine/css_grid_annotator">prothèse - <em>polyfill</em></a>)</li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Grid 2')}}</td>
-   <td>{{Spec2("CSS Grid 2")}}</td>
-   <td>Ajout des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">« sous-grilles » (<em>subgrids</em>)</a>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Grid')}}</td>
-   <td>{{Spec2('CSS3 Grid')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+```
+
+{{EmbedLiveSample("Un_exemple_simple", "100%", "440")}}
+
+## Référence
+
+### Propriétés CSS
+
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-template-areas")}}
+- {{cssxref("grid-template")}}
+- {{cssxref("grid-auto-columns")}}
+- {{cssxref("grid-auto-rows")}}
+- {{cssxref("grid-auto-flow")}}
+- {{cssxref("grid")}}
+- {{cssxref("grid-row-start")}}
+- {{cssxref("grid-column-start")}}
+- {{cssxref("grid-row-end")}}
+- {{cssxref("grid-column-end")}}
+- {{cssxref("grid-row")}}
+- {{cssxref("grid-column")}}
+- {{cssxref("grid-area")}}
+- {{cssxref("row-gap")}}
+- {{cssxref("column-gap")}}
+- {{cssxref("gap")}}
+
+### Fonctions CSS
+
+- {{cssxref("repeat", "repeat()")}}
+- {{cssxref("minmax", "minmax()")}}
+- {{cssxref("fit-content", "fit-content()")}}
+
+### Types de donnée CSS
+
+{{cssxref("&lt;flex&gt;")}}
+
+### Termes définis dans le glossaire
+
+- [Grille](/fr/docs/Glossaire/Grid)
+- [Lignes](/fr/docs/Glossaire/Grid_Lines)
+- [Pistes](/fr/docs/Glossaire/Grid_Tracks)
+- [Cellules](/fr/docs/Glossaire/Grid_Cell)
+- [Zones](/fr/docs/Glossaire/Grid_Areas)
+- [Gouttières](/fr/docs/Glossaire/Gutters)
+- [Axe](/fr/docs/Glossaire/Grid_Axis)
+- [Ligne horizontale](/fr/docs/Glossaire/Grid_Rows)
+- [Colonnes](/fr/docs/Glossaire/Grid_Column)
+
+## Guides
+
+- [Les concepts de base](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base)
+- [Placer les éléments sur les lignes d'une grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS)
+- [Le modèle de grille et les autres modèles de disposition](/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition)
+- [Utiliser des lignes nommées sur une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille)
+- [Définir des zones sur une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille)
+- [Le placement automatique sur une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS)
+- [L'alignement des boîtes avec les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)
+- [Les grilles CSS, les valeurs logiques et les modes d'écriture](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture)
+- [Les grilles CSS et l'accessibilité](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité)
+- [Les grilles CSS et l'amélioration progressive](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive)
+- [Construire des dispositions courantes avec des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS)
+- [Les sous-grilles (_subgrid_)](/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
+
+## Ressources externes
+
+- [Des exemples créés par Jen Simmons (en anglais)](http://labs.jensimmons.com/)
+- [Les grilles CSS par l'exemple - un ensemble d'exemples et de tutoriels (en anglais)](http://gridbyexample.com/)
+- [La référence Codrops sur les grilles CSS (en anglais)](https://tympanus.net/codrops/css_reference/grid/)
+- [L'inspecteur de grille dans les outils de développement Firefox](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)
+- [Le bac à sable CSS Grid (en anglais)](https://mozilladevelopers.github.io/playground/)
+- [Les grilles CSS et Internet Explorer 11](http://tomrothe.de/posts/css_grid_and_ie11.html) ([prothèse - _polyfill_](https://github.com/motine/css_grid_annotator))
+
+## Spécifications
+
+| Spécification                        | État                             | Commentaires                                                                                                  |
+| ------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS Grid 2')}} | {{Spec2("CSS Grid 2")}} | Ajout des [« sous-grilles » (_subgrids_)](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille). |
+| {{SpecName('CSS3 Grid')}}     | {{Spec2('CSS3 Grid')}}     | Définition initiale.                                                                                          |
diff --git a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md
index d31fb16a38..4b6a3c350d 100644
--- a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md
+++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md
@@ -9,17 +9,18 @@ tags:
 translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
 original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}
 
-<p>Dans les articles précédents, on a vu comment placer des objets sur les lignes définies par les pistes de la grilles. On a également vu comment placer des objets sur des zones nommées. Dans ce guide, nous allons combiner ces deux concepts et apprendre à placer les objets sur des lignes avec des noms. Le nommage des lignes peut s'avérer très utile mais un aspect encore plus intéressant consiste à combiner les noms et les tailles de pistes. Cela sera plus clair lorsque nous aurons vu les différents exemples.</p>
+Dans les articles précédents, on a vu comment placer des objets sur les lignes définies par les pistes de la grilles. On a également vu comment placer des objets sur des zones nommées. Dans ce guide, nous allons combiner ces deux concepts et apprendre à placer les objets sur des lignes avec des noms. Le nommage des lignes peut s'avérer très utile mais un aspect encore plus intéressant consiste à combiner les noms et les tailles de pistes. Cela sera plus clair lorsque nous aurons vu les différents exemples.
 
-<h2 id="Nommer_des_lignes_lorsqu'on_définit_une_grille">Nommer des lignes lorsqu'on définit une grille</h2>
+## Nommer des lignes lorsqu'on définit une grille
 
-<p>Lorsqu'on définit une grille avec <code>grid-template-rows</code> et <code>grid-template-columns</code>, 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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -27,27 +28,29 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<p>Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici <code>content-start</code> et <code>content-end</code>), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.</p>
+Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici `content-start` et `content-end`), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
  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];
 }
-</pre>
+```
 
-<p>Une fois que les lignes sont nommées, on peut utiliser ce nom plutôt que le numéro de ligne afin de placer les éléments.</p>
+Une fois que les lignes sont nommées, on peut utiliser ce nom plutôt que le numéro de ligne afin de placer les éléments.
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column-start: main-start;
   grid-row-start: main-start;
   grid-row-end: main-end;
@@ -66,32 +69,33 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   grid-column-end: main-end;
   grid-row-start: content-end;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```
 
-<p>{{EmbedLiveSample("Nommer_des_lignes_lorsqu'on_définit_une_grille", '500', '330')}}</p>
+```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>
+```
 
+{{EmbedLiveSample("Nommer_des_lignes_lorsqu'on_définit_une_grille", '500', '330')}}
 
-<p>Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition <em>responsive</em> où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les <em>media queries</em>.</p>
+Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition _responsive_ où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les _media queries_.
 
-<h3 id="Donner_plusieurs_noms_à_une_ligne">Donner plusieurs noms à une ligne</h3>
+### Donner plusieurs noms à une ligne
 
-<p>On peut donner plusieurs noms à une ligne (par exemple une ligne qui décrirait la fin de la barre latérale et le début du contenu principal). Pour cela, à l'intérieur des crochets, on déclare les différents noms, séparés par un espace : <code>[sidebar-end main-start]</code>. On peut ensuite désigner la ligne par l'un de ces noms.</p>
+On peut donner plusieurs noms à une ligne (par exemple une ligne qui décrirait la fin de la barre latérale et le début du contenu principal). Pour cela, à l'intérieur des crochets, on déclare les différents noms, séparés par un espace : `[sidebar-end main-start]`. On peut ensuite désigner la ligne par l'un de ces noms.
 
-<h2 id="Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées">Définir des zones de grilles implicites à l'aide de lignes nommées</h2>
+## Définir des zones de grilles implicites à l'aide de lignes nommées
 
-<p>Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à une ligne. D'un point de vue technique, ce nom est un <a href="https://drafts.csswg.org/css-values-4/#custom-idents">identifiant personnalisé (ou <em>custom ident</em>)</a>, c'est-à-dire un nom défini par l'auteur de la feuille de style. Pour être plus précis, ce nom ne doit pas reprendre les mots-clés qui apparaissent dans la spécification et ne doit pas être source de confusion (on évitera ainsi d'utiliser <code>span</code>). Les identifiants ne sont pas mis entre quotes.</p>
+Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à une ligne. D'un point de vue technique, ce nom est un [identifiant personnalisé (ou _custom ident_)](https://drafts.csswg.org/css-values-4/#custom-idents), c'est-à-dire un nom défini par l'auteur de la feuille de style. Pour être plus précis, ce nom ne doit pas reprendre les mots-clés qui apparaissent dans la spécification et ne doit pas être source de confusion (on évitera ainsi d'utiliser `span`). Les identifiants ne sont pas mis entre quotes.
 
-<p>Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes <code>-start</code> et <code>-end</code> 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 <code>content-start</code> et <code>content-end</code> pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée <code>content</code> qu'on peut également manipuler</p>
+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
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -99,18 +103,19 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<p>On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée <code>content</code>.</p>
+On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée `content`.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   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];
@@ -118,52 +123,50 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 .thing {
   grid-area: content;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="thing"&gt;
+```html
+<div class="wrapper">
+  <div class="thing">
     Je suis dans une zone nommée content.
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+  </div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées", '500', '330')}}</p>
+{{EmbedLiveSample("Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées", '500', '330')}}
 
-<p>Il n'est pas nécessaire de définir l'emplacement de cette zone avec <code>grid-template-areas</code> car les lignes suffisent à créer la zone et à la placer.</p>
+Il n'est pas nécessaire de définir l'emplacement de cette zone avec `grid-template-areas` car les lignes suffisent à créer la zone et à la placer.
 
-<h2 id="Définir_des_lignes_implicites_à_l'aide_de_zones_nommées">Définir des lignes implicites à l'aide de zones nommées</h2>
+## Définir des lignes implicites à l'aide de zones nommées
 
-<p>Nous avons vu comment des lignes nommées permettaient de créer des zones nommées. Cela fonctionne également dans l'autre sens. Les zones nommées créent aussi des lignes nommées qui peuvent ensuite être utilisées pour placer les objets. Si on reprend l'exemple utilisé dans le guide sur les zones nommées, on peut utiliser les lignes créées implicitement pour voir comment cela fonctionne.</p>
+Nous avons vu comment des lignes nommées permettaient de créer des zones nommées. Cela fonctionne également dans l'autre sens. Les zones nommées créent aussi des lignes nommées qui peuvent ensuite être utilisées pour placer les objets. Si on reprend l'exemple utilisé dans le guide sur les zones nommées, on peut utiliser les lignes créées implicitement pour voir comment cela fonctionne.
 
-<p>Dans cet exemple, on ajoute un élément <code>div</code> supplémentaire et on lui ajoute la classe <code>overlay</code>. On déclare des zones nommées à l'aide de <code>grid-area</code> puis on indique la disposition via la propriété <code>grid-template-areas</code>. Les noms utilisés pour les zones sont :</p>
+Dans cet exemple, on ajoute un élément `div` supplémentaire et on lui ajoute la classe `overlay`. On déclare des zones nommées à l'aide de `grid-area` puis on indique la disposition via la propriété `grid-template-areas`. Les noms utilisés pour les zones sont :
 
-<ul>
- <li><code>hd</code></li>
- <li><code>ft</code></li>
- <li><code>main</code></li>
- <li><code>sd</code></li>
-</ul>
+- `hd`
+- `ft`
+- `main`
+- `sd`
 
-<p>Cela crée implicitement les lignes et colonnes suivantes :</p>
+Cela crée implicitement les lignes et colonnes suivantes :
 
-<ul>
- <li><code>hd-start</code></li>
- <li><code>hd-end</code></li>
- <li><code>sd-start</code></li>
- <li><code>sd-end</code></li>
- <li><code>main-start</code></li>
- <li><code>main-end</code></li>
- <li><code>ft-start</code></li>
- <li><code>ft-end</code></li>
-</ul>
+- `hd-start`
+- `hd-end`
+- `sd-start`
+- `sd-end`
+- `main-start`
+- `main-end`
+- `ft-start`
+- `ft-end`
 
-<p>Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, <code>sd-end</code> et <code>main-start</code> font référence à la même ligne verticale).</p>
+Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, `sd-end` et `main-start` font référence à la même ligne verticale).
 
-<p><img alt="An image showing the implicit line names created by our grid areas." src="5_multiple_lines_from_areas.png"></p>
+![An image showing the implicit line names created by our grid areas.](5_multiple_lines_from_areas.png)
 
-<p>On peut positionner <code>overlay</code> grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :</p>
+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 :
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -171,16 +174,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -201,7 +205,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
 .sidebar {
   grid-area: sd;
 }
-.wrapper &gt; div.overlay {
+.wrapper > div.overlay {
   z-index: 10;
   grid-column: main-start / main-end;
   grid-row: hd-start / ft-end;
@@ -210,30 +214,32 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   color: rgb(92,148,13);
   font-size: 150%;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="header"&gt;En-tête&lt;/div&gt;
-  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
-  &lt;div class="content"&gt;Contenu&lt;/div&gt;
-  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
-  &lt;div class="overlay"&gt;Masque&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+  <div class="overlay">Masque</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("Définir_des_lignes_implicites_à_l'aide_de_zones_nommées", '500', '330')}}</p>
+{{EmbedLiveSample("Définir_des_lignes_implicites_à_l'aide_de_zones_nommées", '500', '330')}}
 
-<p>Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.</p>
+Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.
 
-<h2 id="Utiliser_plusieurs_lignes_avec_le_même_nom_repeat()">Utiliser plusieurs lignes avec le même nom : <code>repeat()</code></h2>
+## Utiliser plusieurs lignes avec le même nom : `repeat()`
 
-<p>Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec <code>repeat()</code> car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec <code>repeat()</code>, vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.</p>
+Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec `repeat()` car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec `repeat()`, vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.
 
-<h3 id="une_grille_à_12_colonnes_avec_repeat">Une grille à 12 colonnes avec repeat()</h3>
+### Une grille à 12 colonnes avec repeat()
 
-<p>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 (<code>1fr</code>), on définit un nom : <code>[col-start]</code>. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées <code>col-start</code> et qui mesureront chacune <code>1fr</code> de large.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -241,71 +247,81 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(12, [col-start] 1fr);
-}</pre>
+}
+```
 
-<p>Une fois la grille créée, on peut y placer les objets. On a alors plusieurs lignes avec le nom <code>col-start</code> et si on place un objet après la ligne <code>col-start</code>, la grille utilisera la première ligne intitulée <code>col-start</code> (dans notre cas, c'est la ligne la plus à gauche). Pour indiquer une autre ligne, on utilisera le nom, suivi du numéro de cette ligne. Ainsi, pour placer un objet à partir de la première ligne jusqu'à la cinquième, on pourra utiliser :</p>
+Une fois la grille créée, on peut y placer les objets. On a alors plusieurs lignes avec le nom `col-start` et si on place un objet après la ligne `col-start`, la grille utilisera la première ligne intitulée `col-start` (dans notre cas, c'est la ligne la plus à gauche). Pour indiquer une autre ligne, on utilisera le nom, suivi du numéro de cette ligne. Ainsi, pour placer un objet à partir de la première ligne jusqu'à la cinquième, on pourra utiliser :
 
-<pre class="brush: css">.item1 {
+```css
+.item1 {
   grid-column: col-start / col-start 5
 }
-</pre>
+```
 
-<p>On peut également utiliser le mot-clé <code>span</code>. Avec la règle suivante, le deuxième objet sera placé à partir de la septième ligne et occupera 3 lignes :</p>
+On peut également utiliser le mot-clé `span`. Avec la règle suivante, le deuxième objet sera placé à partir de la septième ligne et occupera 3 lignes :
 
-<pre class="brush: css">.item2 {
+```css
+.item2 {
   grid-column: col-start 7 / span 3;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Je vais de col-start 1 à col-start 5&lt;/div&gt;
-  &lt;div class="item2"&gt;Je vais de col-start 7 et je m'étends sur 3 lignes&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Je vais de col-start 1 à col-start 5</div>
+  <div class="item2">Je vais de col-start 7 et je m'étends sur 3 lignes</div>
+</div>
+```
 
-<p>{{EmbedLiveSample("une_grille_à_12_colonnes_avec_repeat", '500', '330')}}</p>
+{{EmbedLiveSample("une_grille_à_12_colonnes_avec_repeat", '500', '330')}}
 
-<p>Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :</p>
+Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :
 
-<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="5_named_lines1.png"></p>
+![The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.](5_named_lines1.png)
 
-<h3 id="Définir_des_lignes_nommées_avec_une_liste_de_piste">Définir des lignes nommées avec une liste de piste</h3>
+### Définir des lignes nommées avec une liste de piste
 
-<p>La syntaxe <code>repeat()</code> permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (<code>1fr</code>), intitulée <code>col1-start</code>, et qui est suivie par une colonne plus large (<code>3fr</code>), intitulée <code>col2-start</code>.</p>
+La syntaxe `repeat()` permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (`1fr`), intitulée `col1-start`, et qui est suivie par une colonne plus large (`3fr`), intitulée `col2-start`.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
 }
-</pre>
+```
 
-<p>Si on utilise <code>repeat()</code> et qu'on place deux lignes l'une à la suite de l'autre, ces lignes seront fusionnées et on aura le même résultat que si on avait donné plusieurs noms à un même ligne. La règle suivante permet de créer quatre pistes dont la largeur est <code>1fr</code>, chacune avec un début et une fin.</p>
+Si on utilise `repeat()` et qu'on place deux lignes l'une à la suite de l'autre, ces lignes seront fusionnées et on aura le même résultat que si on avait donné plusieurs noms à un même ligne. La règle suivante permet de créer quatre pistes dont la largeur est `1fr`, chacune avec un début et une fin.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
 }
-</pre>
+```
 
-<p>Si on écrivait la même définition sans utiliser <code>repeat()</code>, on aurait la forme suivante :</p>
+Si on écrivait la même définition sans utiliser `repeat()`, on aurait la forme suivante :
 
-<pre class="brush: css">.wrapper {
+```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];
 }
-</pre>
+```
 
-<p>Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé <code>span</code> pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.</p>
+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é.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -313,16 +329,17 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
 }
@@ -333,32 +350,35 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   grid-row: 2;
   grid-column: col1-start 2 / span 2 col1-start;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Je suis placé à partir de la première col1-start et jusqu'à la deuxième col2-start.&lt;/div&gt;
-  &lt;div class="item2"&gt;Je suis placé à partir de la deuxième col1-start et je m'étend sur deux lignes nommées col1-start&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<p>{{EmbedLiveSample('Définir_des_lignes_nommées_avec_une_liste_de_piste', '500', '330')}}</p>
+{{EmbedLiveSample('Définir_des_lignes_nommées_avec_une_liste_de_piste', '500', '330')}}
 
-<h3 id="cadre_d_une_grille_à_12_colonnes">Cadre d'une grille à 12 colonnes</h3>
+### Cadre d'une grille à 12 colonnes
 
-<p>Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.</p>
+Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.
 
-<p>Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des <em>frameworks</em> tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le <em>framework</em> importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel <em>framework</em> se résume à :</p>
+Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des _frameworks_ tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le _framework_ importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel _framework_ se résume à :
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(12, [col-start] 1fr);
 }
-</pre>
+```
 
-<p>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 :</p>
+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 :
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -366,27 +386,29 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   background-color: #fff4e6;
 }
 
-.wrapper &gt; * {
+.wrapper > * {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;header class="main-header"&gt;Je suis l'en-tête&lt;/header&gt;
-   &lt;aside class="side1"&gt;Je suis la barre latérale 1&lt;/aside&gt;
-   &lt;article class="content"&gt;Je suis l'article&lt;/article&gt;
-   &lt;aside class="side2"&gt;Je suis la barre latérale 2&lt;/aside&gt;
-   &lt;footer class="main-footer"&gt;Je suis le pied de page&lt;/footer&gt;
-&lt;/div&gt;
-</pre>
+```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>
+</div>
+```
 
-<p>Pour placer ces éléments, on utilise la grille de la façon suivante :</p>
+Pour placer ces éléments, on utilise la grille de la façon suivante :
 
-<pre class="brush: css">.main-header,
+```css
+.main-header,
 .main-footer  {
   grid-column: col-start / span 12;
 }
@@ -402,15 +424,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_gril
   grid-column: col-start 10 / span 3;
   grid-row: 2;
 }
-</pre>
-
-<p>{{ EmbedLiveSample('cadre_d_une_grille_à_12_colonnes', '500', '330') }}</p>
+```
 
-<p>Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :</p>
+{{ EmbedLiveSample('cadre_d_une_grille_à_12_colonnes', '500', '330') }}
 
-<p><img alt="The layout with the grid highlighted." src="5_named_lines2.png"></p>
+Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :
 
+![The layout with the grid highlighted.](5_named_lines2.png)
 
-<p>Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent <code>1fr</code>. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !</p>
+Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent `1fr`. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}
diff --git a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md
index 08aff7df63..645a3b0972 100644
--- a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md
+++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md
@@ -10,23 +10,24 @@ tags:
 translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid
 original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}
 
-<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">l'article sur les concepts de base</a>, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.</p>
+Dans [l'article sur les concepts de base](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout), nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.
 
-<p>Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes">un prochain guide</a>.</p>
+Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans [un prochain guide](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes).
 
-<h2 id="Un_exemple_simple">Un exemple simple</h2>
+## Un exemple simple
 
-<p>Dans cet exemple simple, on a une grille avec trois pistes pour les colonnes et trois pistes pour les lignes, on a donc 4 lignes pour chaque dimension.</p>
+Dans cet exemple simple, on a une grille avec trois pistes pour les colonnes et trois pistes pour les lignes, on a donc 4 lignes pour chaque dimension.
 
-<p>Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles de Firefox</a>, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.</p>
+Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez [l'outil de mise en évidence des grilles de Firefox](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts), vous pouvez voir les colonnes et les lignes horizontales formées par la grille.
 
-<p><img alt="Our Grid highlighted in DevTools" src="3_hilighted_grid.png"></p>
+![Our Grid highlighted in DevTools](3_hilighted_grid.png)
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -34,49 +35,53 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 100px);
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<p>{{EmbedLiveSample('Un_exemple_simple', '300', '330')}}</p>
+{{EmbedLiveSample('Un_exemple_simple', '300', '330')}}
 
-<h2 id="Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne">Positionner les éléments d'une grille grâce au numéro de ligne</h2>
+## Positionner les éléments d'une grille grâce au numéro de ligne
 
-<p>On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :</p>
+On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
 }
-</pre>
+```
 
-<p>Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">un prochain guide</a> mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.</p>
+Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans [un prochain guide](/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout) mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.
 
-<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.</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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -87,24 +92,26 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-template-rows: repeat(3, 100px);
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-   &lt;div class="box1"&gt;Un&lt;/div&gt;
-   &lt;div class="box2"&gt;Deux&lt;/div&gt;
-   &lt;div class="box3"&gt;Trois&lt;/div&gt;
-   &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<pre class="brush: css">.box2 {
+```css
+.box2 {
   grid-column-start: 3;
   grid-column-end: 4;
   grid-row-start: 1;
@@ -122,16 +129,16 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-row-start: 3;
   grid-row-end: 4;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne", '300', '330')}}</p>
+{{EmbedLiveSample("Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne", '300', '330')}}
 
+## Les propriétés raccourcies `grid-column` et `grid-row`
 
-<h2 id="Les_propriétés_raccourcies_grid-column_et_grid-row">Les propriétés raccourcies <code>grid-column</code> et <code>grid-row</code></h2>
+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")}}.
 
-<p>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")}}.</p>
-
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -142,24 +149,26 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-template-rows: repeat(3, 100px);
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column: 1 / 2;
   grid-row: 1 / 4;
 }
@@ -175,15 +184,16 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-column: 2 / 4;
   grid-row: 3 / 4;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Les_propriétés_raccourcies_grid-column_et_grid-row', '300', '330')}}</p>
+{{EmbedLiveSample('Les_propriétés_raccourcies_grid-column_et_grid-row', '300', '330')}}
 
-<h2 id="La_taille_par_défaut">La taille par défaut</h2>
+## La taille par défaut
 
-<p>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 <code>grid-column-end</code> ou <code>grid-row-end</code>. 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 :</p>
+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 :
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -194,24 +204,26 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-template-rows: repeat(3, 100px);
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column-start: 1;
   grid-row-start: 1;
   grid-row-end: 4;
@@ -230,15 +242,16 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-column-end: 4;
   grid-row-start: 3;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('La_taille_par_défaut', '300', '330')}}</p>
+{{EmbedLiveSample('La_taille_par_défaut', '300', '330')}}
 
-<h3 id="Tailles_par_défaut_avec_les_propriétés_raccourcies">Tailles par défaut avec les propriétés raccourcies</h3>
+### Tailles par défaut avec les propriétés raccourcies
 
-<p>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).</p>
+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).
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -249,24 +262,26 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-template-rows: repeat(3, 100px);
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column: 1 ;
   grid-row: 1 / 4;
 }
@@ -282,22 +297,21 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-column: 2 / 4;
   grid-row: 3 ;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Tailles_par_défaut_avec_les_propriétés_raccourcies', '300', '330')}}</p>
+{{EmbedLiveSample('Tailles_par_défaut_avec_les_propriétés_raccourcies', '300', '330')}}
 
-<h2 id="La_propriété_grid-area">La propriété <code>grid-area</code></h2>
+## La propriété `grid-area`
 
-<p>On peut aller plus loin et définir une zone pour chaque élément grâce à une seule propriété : {{cssxref("grid-area")}}. Cette propriété raccourcie permet d'utiliser les valeurs des propriétés suivantes (dans cet ordre) :</p>
+On peut aller plus loin et définir une zone pour chaque élément grâce à une seule propriété : {{cssxref("grid-area")}}. Cette propriété raccourcie permet d'utiliser les valeurs des propriétés suivantes (dans cet ordre) :
 
-<ul>
- <li><code>grid-row-start</code></li>
- <li><code>grid-column-start</code></li>
- <li><code>grid-row-end</code></li>
- <li><code>grid-column-end</code></li>
-</ul>
+- `grid-row-start`
+- `grid-column-start`
+- `grid-row-end`
+- `grid-column-end`
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -308,24 +322,26 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-template-rows: repeat(3, 100px);
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-area: 1 / 1 / 4 / 2;
 }
 .box2 {
@@ -337,30 +353,29 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
 .box4 {
   grid-area: 3 / 2 / 4 / 4;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}</p>
+{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}
 
-<p>L'ordre des valeurs utilisé pour <code>grid-area</code> peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (<em>margin</em>) et le remplissage (<em>padding</em>). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs <em>logiques</em> plutôt que des propriétés et des valeurs <em>physiques</em>. Nous aborderons ce point dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes">un prochain article</a> mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :</p>
+L'ordre des valeurs utilisé pour `grid-area` peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (_margin_) et le remplissage (_padding_). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs _logiques_ plutôt que des propriétés et des valeurs _physiques_. Nous aborderons ce point dans [un prochain article](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes) mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :
 
-<ul>
- <li><code>block-start</code></li>
- <li><code>block-end</code></li>
- <li><code>inline-start</code></li>
- <li><code>inline-end</code></li>
-</ul>
+- `block-start`
+- `block-end`
+- `inline-start`
+- `inline-end`
 
-<p>On travaille ici en anglais ou en français, une langue qui s'écrit de gauche à droite. La ligne physique correspondant à la ligne logique <code>block-start</code> est donc la ligne en haut du conteneur, <code>block-end</code> correspond à la ligne en bas du conteneur, <code>inline-start</code> correspond à la colonne la plus à gauche (le point de départ de l'écriture pour une ligne) et <code>inline-end</code> correspond à la dernière colonne, celle qui est située à l'extrémité droite de la grille.</p>
+On travaille ici en anglais ou en français, une langue qui s'écrit de gauche à droite. La ligne physique correspondant à la ligne logique `block-start` est donc la ligne en haut du conteneur, `block-end` correspond à la ligne en bas du conteneur, `inline-start` correspond à la colonne la plus à gauche (le point de départ de l'écriture pour une ligne) et `inline-end` correspond à la dernière colonne, celle qui est située à l'extrémité droite de la grille.
 
-<p>Lorsqu'on définit une zone d'une grille grâce à la propriété <code>grid-area</code>, on commence par définir les lignes de « début » : <code>block-start</code> et <code>inline-start</code> puis les lignes de « fin » avec <code>block-end</code> et <code>inline-end</code>. Cela peut paraître étrange quand on est habitué à manipuler des propriétés physiques qui progressent dans le sens horaire : haut, droit, bas, gauche mais cet ordre paraît plus pertinent quand on considère que les sites web peuvent être multi-directionnels selon le mode d'écriture.</p>
+Lorsqu'on définit une zone d'une grille grâce à la propriété `grid-area`, on commence par définir les lignes de « début » : `block-start` et `inline-start` puis les lignes de « fin » avec `block-end` et `inline-end`. Cela peut paraître étrange quand on est habitué à manipuler des propriétés physiques qui progressent dans le sens horaire : haut, droit, bas, gauche mais cet ordre paraît plus pertinent quand on considère que les sites web peuvent être multi-directionnels selon le mode d'écriture.
 
-<h2 id="Compter_à_rebours">Compter à rebours</h2>
+## Compter à rebours
 
-<p>On peut également compter à l'envers, à partir des lignes de fin. Pour un document écrit en français, cela correspond à la colonne la plus à droite et à la ligne la plus basse. Pour faire référence à la dernière ligne, on peut utiliser la valeur <code>-1</code> et on peut compter à rebours au fur et à mesure de cette façon (ainsi, <code>-2</code> fait référence à l'avant-dernière ligne). Attention, ici, la dernière ligne correspond à la dernière ligne <em>explicite</em> de la grille, telle qu'elle est définie par <code>grid-template-columns</code> et <code>grid-template-rows</code>. Ce comptage ne prend pas en compte les lignes ou les colonnes qui sont ajoutées implicitement dans la grille.</p>
+On peut également compter à l'envers, à partir des lignes de fin. Pour un document écrit en français, cela correspond à la colonne la plus à droite et à la ligne la plus basse. Pour faire référence à la dernière ligne, on peut utiliser la valeur `-1` et on peut compter à rebours au fur et à mesure de cette façon (ainsi, `-2` fait référence à l'avant-dernière ligne). Attention, ici, la dernière ligne correspond à la dernière ligne _explicite_ de la grille, telle qu'elle est définie par `grid-template-columns` et `grid-template-rows`. Ce comptage ne prend pas en compte les lignes ou les colonnes qui sont ajoutées implicitement dans la grille.
 
-<p>Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.</p>
+Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -371,24 +386,26 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-template-rows: repeat(3, 100px);
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-   &lt;div class="box1"&gt;Un&lt;/div&gt;
-   &lt;div class="box2"&gt;Deux&lt;/div&gt;
-   &lt;div class="box3"&gt;Trois&lt;/div&gt;
-   &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column-start: -1;
   grid-column-end: -2;
   grid-row-start: -1;
@@ -412,32 +429,32 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-row-start: -3;
   grid-row-end: -4;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Compter_à_rebours', '300', '330')}}</p>
+{{EmbedLiveSample('Compter_à_rebours', '300', '330')}}
 
-<h3 id="Étirer_un_élément_sur_la_grille">Étirer un élément sur la grille</h3>
+### Étirer un élément sur la grille
 
-<p>Étant donné qu'on peut utiliser les numéros de lignes pour la première et la dernière, on peut facilement étirer un élément pour que celui-ci occupe toute la largeur et/ou toute la hauteur de la grille avec :</p>
+Étant donné qu'on peut utiliser les numéros de lignes pour la première et la dernière, on peut facilement étirer un élément pour que celui-ci occupe toute la largeur et/ou toute la hauteur de la grille avec :
 
-<pre class="brush: css">.item {
+```css
+.item {
   grid-column: 1 / -1;
 }
-</pre>
+```
 
-<h2 id="Les_gouttières">Les gouttières</h2>
+## Les gouttières
 
-<p>La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.</p>
+La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.
 
-<div class="note">
-<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.</p>
-
-<p>Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec <code>grid-</code>.</p>
-</div>
+> **Note :** Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe `grid-` soit : {{cssxref("grid-column-gap")}}, {{cssxref("row-gap")}} et {{cssxref("gap")}}.
+>
+> Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec `grid-`.
 
-<p>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 :</p>
+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 :
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -448,24 +465,26 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-template-rows: repeat(3, 100px);
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column: 1 ;
   grid-row: 1 / 4;
 }
@@ -488,29 +507,31 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-column-gap: 20px;
   grid-row-gap: 1em;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Les_gouttières', '300', '350') }}</p>
+{{EmbedLiveSample('Les_gouttières', '300', '350') }}
 
-<h3 id="Les_propriétés_raccourcies_pour_les_gouttières">Les propriétés raccourcies pour les gouttières</h3>
+### Les propriétés raccourcies pour les gouttières
 
-<p>Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour <code>grid-row-gap</code> et la seconde pour <code>grid-column-gap</code>.</p>
+Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour `grid-row-gap` et la seconde pour `grid-column-gap`.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 100px);
   grid-gap: 1em 20px;
 }
-</pre>
+```
 
-<p>Par rapport au positionnement sur les lignes, les gouttières agissent comme si la ligne avait gagné en largeur ou en hauteur. Tout ce qui commence sur une ligne commencera après cet espace et on ne peut placer aucun élément dans cette gouttière. Aussi, si on veut qu'une gouttière agisse comme une piste classique dans laquelle on peut placer des objets, il suffira de définir une nouvelle piste plutôt qu'une gouttière.</p>
+Par rapport au positionnement sur les lignes, les gouttières agissent comme si la ligne avait gagné en largeur ou en hauteur. Tout ce qui commence sur une ligne commencera après cet espace et on ne peut placer aucun élément dans cette gouttière. Aussi, si on veut qu'une gouttière agisse comme une piste classique dans laquelle on peut placer des objets, il suffira de définir une nouvelle piste plutôt qu'une gouttière.
 
-<h2 id="Utiliser_le_mot-clé_span">Utiliser le mot-clé <code>span</code></h2>
+## Utiliser le mot-clé `span`
 
-<p>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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -521,24 +542,26 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-template-rows: repeat(3, 100px);
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column: 1;
   grid-row: 1 / span 3;
 }
@@ -554,30 +577,32 @@ original_slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_un
   grid-column: 2 / span 2;
   grid-row: 3;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Utiliser_le_mot-clé_span', '300', '330')}}</p>
+{{EmbedLiveSample('Utiliser_le_mot-clé_span', '300', '330')}}
 
-<p>Le mot-clé <code>span</code> peut également être utilisé dans les valeurs des propriétés <code>grid-row-start</code>/<code>grid-row-end</code> et <code>grid-column-start</code>/<code>grid-column-end</code>. Les deux fragments de code qui suivent créeront la même zone. Dans le premier, on indique la ligne de début puis la ligne de fin en indiquant que l'élément occupe trois lignes. La zone commencera donc sur la première ligne et occupera 3 lignes, jusqu'à la ligne 4.</p>
+Le mot-clé `span` peut également être utilisé dans les valeurs des propriétés `grid-row-start`/`grid-row-end` et `grid-column-start`/`grid-column-end`. Les deux fragments de code qui suivent créeront la même zone. Dans le premier, on indique la ligne de début puis la ligne de fin en indiquant que l'élément occupe trois lignes. La zone commencera donc sur la première ligne et occupera 3 lignes, jusqu'à la ligne 4.
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column-start: 1;
   grid-row-start: 1;
   grid-row-end: span 3;
 }
-</pre>
+```
 
-<p>Dans le deuxième exemple, on indique la ligne de fin et le nombre de lignes occupées par l'élément avec <code>span 3</code>. Cela signifie que l'élément partira de la ligne 4 et occupera 3 lignes jusqu'à la ligne 1.</p>
+Dans le deuxième exemple, on indique la ligne de fin et le nombre de lignes occupées par l'élément avec `span 3`. Cela signifie que l'élément partira de la ligne 4 et occupera 3 lignes jusqu'à la ligne 1.
 
-<pre class="brush: css">.box1 {
+```css
+.box1 {
   grid-column-start: 1;
   grid-row-start: span 3;
   grid-row-end: 4;
 }
-</pre>
+```
 
-<p>Pour vous familiariser avec le positionnement des éléments d'une grille en utilisant les lignes, vous pouvez essayer de construire certaines dispositions fréquemment utilisées en plaçant des éléments sur des grilles avec plus ou moins de pistes. Il faut garder à l'esprit que, lorsqu'on ne place pas explicitement tous les éléments, les éléments restants seront positionnés automatiquement. Cela peut tout à fait être l'objectif recherché mais si ce n'est pas le cas et que vous voyez un élément à un endroit inapproprié, vérifiez que vous lui avez affecté une position au sein de la grille.</p>
+Pour vous familiariser avec le positionnement des éléments d'une grille en utilisant les lignes, vous pouvez essayer de construire certaines dispositions fréquemment utilisées en plaçant des éléments sur des grilles avec plus ou moins de pistes. Il faut garder à l'esprit que, lorsqu'on ne place pas explicitement tous les éléments, les éléments restants seront positionnés automatiquement. Cela peut tout à fait être l'objectif recherché mais si ce n'est pas le cas et que vous voyez un élément à un endroit inapproprié, vérifiez que vous lui avez affecté une position au sein de la grille.
 
-<p>Il faut aussi se rappeler que lorsqu'on place les éléments explicitement sur la grille, ceux-ci peuvent se chevaucher. Cela permet d'obtenir certains effets mais attention aux erreurs lorsque c'est la mauvaise ligne de début ou de fin qui est indiquée. Pour régler ce problème, on peut utiliser <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence de la grille CSS dans Firefox</a> pour analyser une grille compliquée.</p>
+Il faut aussi se rappeler que lorsqu'on place les éléments explicitement sur la grille, ceux-ci peuvent se chevaucher. Cela permet d'obtenir certains effets mais attention aux erreurs lorsque c'est la mauvaise ligne de début ou de fin qui est indiquée. Pour régler ce problème, on peut utiliser [l'outil de mise en évidence de la grille CSS dans Firefox](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) pour analyser une grille compliquée.
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}
diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md
index b7af0ce06d..2bfa068958 100644
--- a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md
+++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md
@@ -11,23 +11,24 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
 original_slug: >-
   Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}
 
-<p>Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">les zones nommées d'une grille</a>, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.</p>
+Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise [les zones nommées d'une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas), un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.
 
-<h2 id="Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas">Une disposition adaptative avec une à trois colonnes en utilisant <code>grid-template-areas</code></h2>
+## Une disposition adaptative avec une à trois colonnes en utilisant `grid-template-areas`
 
-<p>De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit <em>responsive</em>, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.</p>
+De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit _responsive_, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.
 
-<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="11-responsive-areas.png"></p>
+![Image of the three different layouts created by redefining our grid at two breakpoints.](11-responsive-areas.png)
 
-<p>Ici, on crée une disposition avec des zones nommées comme on a pu le voir <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">dans l'article correspondant</a></em>.</p>
+Ici, on crée une disposition avec des zones nommées comme on a pu le voir _[dans l'article correspondant](/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)_.
 
-<p>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é.</p>
+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é.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   max-width: 1024px;
@@ -35,7 +36,7 @@ original_slug: >-
   font: 1.2em Helvetica, arial, sans-serif;
 }
 
-.wrapper &gt; * {
+.wrapper > * {
   border: 2px solid #f08c00;
   background-color: #ffec99;
   border-radius: 5px;
@@ -47,36 +48,38 @@ nav ul {
   margin: 0;
   padding: 0;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;header class="main-head"&gt;L'en-tête&lt;/header&gt;
-  &lt;nav class="main-nav"&gt;
-    &lt;ul&gt;
-      &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/nav&gt;
-  &lt;article class="content"&gt;
-    &lt;h1&gt;L'article principal&lt;/h1&gt;
-    &lt;p&gt;
+```
+
+```html
+<div class="wrapper">
+  <header class="main-head">L'en-tête</header>
+  <nav class="main-nav">
+    <ul>
+      <li><a href="">Nav 1</a></li>
+      <li><a href="">Nav 2</a></li>
+      <li><a href="">Nav 3</a></li>
+    </ul>
+  </nav>
+  <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.
-    &lt;/p&gt;
-  &lt;/article&gt;
-  &lt;aside class="side"&gt;Barre latérale&lt;/aside&gt;
-  &lt;div class="ad"&gt;Publicité&lt;/div&gt;
-  &lt;footer class="main-footer"&gt;Le pied de page&lt;/footer&gt;
-&lt;/div&gt;
-</pre>
-
-<p>On utilise {{cssxref("grid-template-areas")}} afin de créer la disposition. On nomme les zones en dehors des différentes <em>media queries</em>. Les propriétés sont nommées grâce à la propriété {{cssxref("grid-area")}}.</p>
-
-<pre class="brush: css">.main-head {
+    </p>
+  </article>
+  <aside class="side">Barre latérale</aside>
+  <div class="ad">Publicité</div>
+  <footer class="main-footer">Le pied de page</footer>
+</div>
+```
+
+On utilise {{cssxref("grid-template-areas")}} afin de créer la disposition. On nomme les zones en dehors des différentes _media queries_. Les propriétés sont nommées grâce à la propriété {{cssxref("grid-area")}}.
+
+```css
+.main-head {
   grid-area: header;
 }
 .content {
@@ -94,11 +97,12 @@ nav ul {
 .main-footer {
   grid-area: footer;
 }
-</pre>
+```
 
-<p>Avec ces différentes règles, on n'a pas encore de disposition, uniquement des noms qu'on pourra utiliser. Ensuite, on définit la disposition qu'on aura par défaut et qui sera utilisée pour les mobiles. Dans cette règle, on garde le même ordre que celui utilisé dans le document (cf. <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">le guide sur les grilles CSS et l'accessibilité</a></em>). On ne définit aucune piste (colonne ou ligne) mais cela suffit pour décrire une disposition sur une seule colonne, les lignes seront créées implicitement lorsqu'elles seront nécessaires.</p>
+Avec ces différentes règles, on n'a pas encore de disposition, uniquement des noms qu'on pourra utiliser. Ensuite, on définit la disposition qu'on aura par défaut et qui sera utilisée pour les mobiles. Dans cette règle, on garde le même ordre que celui utilisé dans le document (cf. _[le guide sur les grilles CSS et l'accessibilité](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)_). On ne définit aucune piste (colonne ou ligne) mais cela suffit pour décrire une disposition sur une seule colonne, les lignes seront créées implicitement lorsqu'elles seront nécessaires.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-gap: 20px;
   grid-template-areas:
@@ -109,11 +113,12 @@ nav ul {
     "ad"
     "footer";
 }
-</pre>
+```
 
-<p>Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une <a href="/fr/docs/Web/CSS/Media_Queries">requête média (<em>media query</em>)</a> et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :</p>
+Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une [requête média (_media query_)](/fr/docs/Web/CSS/Media_Queries) et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :
 
-<pre class="brush: css">@media (min-width: 500px) {
+```css
+@media (min-width: 500px) {
   .wrapper {
     grid-template-columns: 1fr 3fr;
     grid-template-areas:
@@ -127,13 +132,14 @@ nav ul {
     justify-content: space-between;
   }
 }
-</pre>
+```
 
-<p>On peut voir la disposition organisée dans la valeur pour la propriété {{cssxref("grid-template-areas")}}. L'en-tête <code>header</code> s'étale sur deux colonnes et le bloc <code>nav</code> également. Sur la troisième ligne, on a la barre latérale (<code>sidebar</code>) à côté du contenu (<code>content</code>). Sur la quatrième ligne, on a le bloc pour la publicité (<code>ad</code>) qui apparaît sous la barre latérale et enfin le pied de page qui apparaît sous le contenu. On utilise une boîte flexible pour la barre de navigation afin de l'étaler sur une ligne homogène.</p>
+On peut voir la disposition organisée dans la valeur pour la propriété {{cssxref("grid-template-areas")}}. L'en-tête `header` s'étale sur deux colonnes et le bloc `nav` également. Sur la troisième ligne, on a la barre latérale (`sidebar`) à côté du contenu (`content`). Sur la quatrième ligne, on a le bloc pour la publicité (`ad`) qui apparaît sous la barre latérale et enfin le pied de page qui apparaît sous le contenu. On utilise une boîte flexible pour la barre de navigation afin de l'étaler sur une ligne homogène.
 
-<p>Enfin, on ajoute une autre requête de média pour la disposition avec trois colonnes :</p>
+Enfin, on ajoute une autre requête de média pour la disposition avec trois colonnes :
 
-<pre class="brush: css">@media (min-width: 700px) {
+```css
+@media (min-width: 700px) {
   .wrapper {
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas:
@@ -146,53 +152,57 @@ nav ul {
      flex-direction: column;
    }
 }
-</pre>
+```
 
-<p>Cette disposition en trois colonnes possède une première colonne qui s'étend sur <code>1fr</code>, une colonne centrale qui s'étend sur <code>4fr</code> et une dernière colonne qui mesure également <code>1fr</code>. Cela signifie que l'espace disponible dans le conteneur est découpé en 6 et que chacun de ces morceaux est affecté à une de ces pistes.</p>
+Cette disposition en trois colonnes possède une première colonne qui s'étend sur `1fr`, une colonne centrale qui s'étend sur `4fr` et une dernière colonne qui mesure également `1fr`. Cela signifie que l'espace disponible dans le conteneur est découpé en 6 et que chacun de ces morceaux est affecté à une de ces pistes.
 
-<p>Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.</p>
+Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.
 
-<p>{{EmbedLiveSample('Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas', '800', '430')}}</p>
+{{EmbedLiveSample('Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas', '800', '430')}}
 
-<p>Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc <code>ad</code> dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.</p>
+Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc `ad` dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.
 
-<h2 id="Une_disposition_flexible_avec_12_colonnes">Une disposition flexible avec 12 colonnes</h2>
+## Une disposition flexible avec 12 colonnes
 
-<p>Si vous travaillez avec un <em>framework</em> ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure <code>1fr</code>-unit et commence par une ligne intitulée <code>col-start</code>. Autrement dit, on aura 12 colonnes intitulées <code>col-start</code>.</p>
+Si vous travaillez avec un _framework_ ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure `1fr`-unit et commence par une ligne intitulée `col-start`. Autrement dit, on aura 12 colonnes intitulées `col-start`.
 
-<pre class="brush: css hidden">.wrapper {
+```css hidden
+.wrapper {
   max-width: 1024px;
   margin: 0 auto;
   font: 1.2em Helvetica, arial, sans-serif;
 }
-.wrapper &gt; * {
+.wrapper > * {
   border: 2px solid #f08c00;
   background-color: #ffec99;
   border-radius: 5px;
   padding: 10px;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(12, [col-start] 1fr);
   grid-gap: 20px;
 }
-</pre>
+```
 
-<p>Pour voir comment ce système fonctionne, on place quatre éléments dans le conteneur :</p>
+Pour voir comment ce système fonctionne, on place quatre éléments dans le conteneur :
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Début à la première colonne, s'étend sur 3 colonnes.&lt;/div&gt;
-  &lt;div class="item2"&gt;Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.&lt;/div&gt;
-  &lt;div class="item3"&gt;Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.&lt;/div&gt;
-  &lt;div class="item4"&gt;Début à la colonne 3, s'étend jusqu'à la fin de la grille.&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```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>
+```
 
-<p>Et on place ces éléments sur la grille en utilisant les noms utilisés précédemment, avec le mot-clé <code>span</code> :</p>
+Et on place ces éléments sur la grille en utilisant les noms utilisés précédemment, avec le mot-clé `span` :
 
-<pre class="brush: css">.item1 {
+```css
+.item1 {
   grid-column: col-start / span 3;
 }
 .item2 {
@@ -207,23 +217,24 @@ nav ul {
   grid-column: col-start 3 / -1;
   grid-row: 3;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Une_disposition_flexible_avec_12_colonnes', '800', '330')}}</p>
+{{EmbedLiveSample('Une_disposition_flexible_avec_12_colonnes', '800', '330')}}
 
-<p>Comme nous l'avons vu dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">le guide sur le nommage des lignes</a>, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.</p>
+Comme nous l'avons vu dans [le guide sur le nommage des lignes](/fr/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines), on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.
 
-<p>Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé <code>span</code> pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille de Firefox</a> qui indique de façon claire comment les objets sont placés.</p>
+Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé `span` pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé [l'inspecteur de grille de Firefox](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) qui indique de façon claire comment les objets sont placés.
 
-<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="11-grid-inspector-12col.png"></p>
+![Showing the items placed on the grid with grid tracks highlighted.](11-grid-inspector-12col.png)
 
-<p>Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant <em>stricte</em>, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.</p>
+Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant _stricte_, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.
 
-<h2 id="Construire_une_disposition_avec_ce_système_à_12_colonnes">Construire une disposition avec ce système à 12 colonnes</h2>
+## Construire une disposition avec ce système à 12 colonnes
 
-<p>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 :</p>
+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 :
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   max-width: 1024px;
@@ -231,7 +242,7 @@ nav ul {
   font: 1.2em Helvetica, arial, sans-serif;
 }
 
-.wrapper &gt; * {
+.wrapper > * {
   border: 2px solid #f08c00;
   background-color: #ffec99;
   border-radius: 5px;
@@ -243,56 +254,60 @@ nav ul {
   margin: 0;
   padding: 0;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;header class="main-head"&gt;L'en-tête&lt;/header&gt;
-  &lt;nav class="main-nav"&gt;
-    &lt;ul&gt;
-      &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
-      &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/nav&gt;
-  &lt;article class="content"&gt;
-    &lt;h1&gt;L'article principal&lt;/h1&gt;
-    &lt;p&gt;
+```
+
+```html
+<div class="wrapper">
+  <header class="main-head">L'en-tête</header>
+  <nav class="main-nav">
+    <ul>
+      <li><a href="">Nav 1</a></li>
+      <li><a href="">Nav 2</a></li>
+      <li><a href="">Nav 3</a></li>
+    </ul>
+  </nav>
+  <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.
-    &lt;/p&gt;
-  &lt;/article&gt;
-  &lt;aside class="side"&gt;Barre latérale&lt;/aside&gt;
-  &lt;div class="ad"&gt;Publicité&lt;/div&gt;
-  &lt;footer class="main-footer"&gt;Le pied de page&lt;/footer&gt;
-&lt;/div&gt;
-</pre>
+    </p>
+  </article>
+  <aside class="side">Barre latérale</aside>
+  <div class="ad">Publicité</div>
+  <footer class="main-footer">Le pied de page</footer>
+</div>
+```
 
-<p>On initialise la grille avec nos 12 colonnes :</p>
+On initialise la grille avec nos 12 colonnes :
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(12, [col-start] 1fr);
   grid-gap: 20px;
 }
-</pre>
+```
 
-<p>Là encore, nous allons adapter la disposition en fonction de la taille de la zone d'affichage mais ici, nous utiliserons les colonnes nommées. Pour chaque type d'affichage, nous allons utiliser 12 colonnes et faire varier le nombre de pistes sur lequel s'étalent les objets à afficher.</p>
+Là encore, nous allons adapter la disposition en fonction de la taille de la zone d'affichage mais ici, nous utiliserons les colonnes nommées. Pour chaque type d'affichage, nous allons utiliser 12 colonnes et faire varier le nombre de pistes sur lequel s'étalent les objets à afficher.
 
-<p>Commençons par le mobile : on souhaite gérer les écrans les plus étroits par défaut. Ici aussi, on respecte l'ordre des éléments indiqués par le code source du document et tous les objets s'étalent tout au long de la grille.</p>
+Commençons par le mobile : on souhaite gérer les écrans les plus étroits par défaut. Ici aussi, on respecte l'ordre des éléments indiqués par le code source du document et tous les objets s'étalent tout au long de la grille.
 
-<pre class="brush: css">.wrapper &gt; * {
+```css
+.wrapper > * {
   grid-column: col-start / span 12;
 }
-</pre>
+```
 
-<p>Pour la prochaine taille, on veut obtenir une disposition sur deux colonnes. Ici, l'en-tête et la barre de navigation occuperont toute une ligne horizontale, il n'est donc pas nécessaire d'indiquer de positionnement pour eux. La barre latérale commence sur la première colonne intitulée <code>col-start</code> et s'étend sur 3 colonnes et commence à partir de la troisième ligne (les deux premières étant occupées par l'en-tête et la barre de navigation).</p>
+Pour la prochaine taille, on veut obtenir une disposition sur deux colonnes. Ici, l'en-tête et la barre de navigation occuperont toute une ligne horizontale, il n'est donc pas nécessaire d'indiquer de positionnement pour eux. La barre latérale commence sur la première colonne intitulée `col-start` et s'étend sur 3 colonnes et commence à partir de la troisième ligne (les deux premières étant occupées par l'en-tête et la barre de navigation).
 
-<p>Le panneau dédié à la publicité est affiché sous la barre latérale et commence à partir de la quatrième ligne. On a ensuite le contenu et le pied de page qui commencent à partir de la quatrième colonne et s'étendent sur 9 pistes pour occuper le reste de la grille.</p>
+Le panneau dédié à la publicité est affiché sous la barre latérale et commence à partir de la quatrième ligne. On a ensuite le contenu et le pied de page qui commencent à partir de la quatrième colonne et s'étendent sur 9 pistes pour occuper le reste de la grille.
 
-<pre class="brush: css">@media (min-width: 500px) {
+```css
+@media (min-width: 500px) {
   .side {
     grid-column: col-start / span 3;
     grid-row: 3;
@@ -309,11 +324,12 @@ nav ul {
     justify-content: space-between;
   }
 }
-</pre>
+```
 
-<p>Voyons alors la disposition sur trois colonnes. Pour ce plan, l'en-tête s'étale aussi sur toute la largeur de la grille, la barre de navigation devient verticale, à côté on a le contenu puis la barre latérale. Le pied de page s'étale, lui aussi, sur toute la largeur du conteneur.</p>
+Voyons alors la disposition sur trois colonnes. Pour ce plan, l'en-tête s'étale aussi sur toute la largeur de la grille, la barre de navigation devient verticale, à côté on a le contenu puis la barre latérale. Le pied de page s'étale, lui aussi, sur toute la largeur du conteneur.
 
-<pre class="brush: css">@media (min-width: 700px) {
+```css
+@media (min-width: 700px) {
   .main-nav {
     grid-column: col-start / span 2;
     grid-row: 2 / 4;
@@ -337,55 +353,57 @@ nav ul {
     flex-direction: column;
   }
 }
-</pre>
-
-<p>{{EmbedLiveSample('Construire_une_disposition_avec_ce_système_à_12_colonnes', '800', '430')}}</p>
-
-<p>On peut à nouveau profiter de <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille</a> pour voir comment se compose effectivement notre disposition :</p>
-
-<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="11-grid-inspector-12col-layout.png"></p>
-
-<p>On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..</p>
-
-<h2 id="Une_liste_produit_utilisant_le_placement_automatique">Une liste produit utilisant le placement automatique</h2>
-
-<p>De nombreuses dispositions sont essentiellement composée de <em>cartes</em> ou <em>tuiles</em> : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de <a href="/fr/docs/Web/CSS/Media_Queries">requêtes de média</a>. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.</p>
-
-<p>Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.</p>
-
-<pre class="brush: html">&lt;ul class="listing"&gt;
-  &lt;li&gt;
-    &lt;h2&gt;Produit n°1&lt;/h2&gt;
-    &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
-    &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
-  &lt;/li&gt;
-   &lt;li&gt;
-     &lt;h2&gt;Produit n°2&lt;/h2&gt;
-     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
-     &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
-   &lt;/li&gt;
-   &lt;li class="wide"&gt;
-     &lt;h2&gt;Produit n°3&lt;/h2&gt;
-     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;
-     &lt;p&gt;Ce produit possède un descriptif beaucoup plus long.&lt;/p&gt;
-     &lt;p&gt;Vraiment plus long&lt;/p&gt;
-     &lt;p&gt;Peut-être faudrait-il le gérer différemment ?&lt;/p&gt;&lt;/div&gt;
-     &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
-     &lt;h2&gt;Produit n°4&lt;/h2&gt;
-     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
-     &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
-    &lt;/li&gt;
-     &lt;li&gt;
-     &lt;h2&gt;Produit n°5&lt;/h2&gt;
-     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
-      &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
-    &lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```
+
+{{EmbedLiveSample('Construire_une_disposition_avec_ce_système_à_12_colonnes', '800', '430')}}
+
+On peut à nouveau profiter de [l'inspecteur de grille](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) pour voir comment se compose effectivement notre disposition :
+
+![Showing the layout with grid tracks highlighted by the grid inspector.](11-grid-inspector-12col-layout.png)
+
+On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..
+
+## Une liste produit utilisant le placement automatique
+
+De nombreuses dispositions sont essentiellement composée de _cartes_ ou _tuiles_ : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de [requêtes de média](/fr/docs/Web/CSS/Media_Queries). Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.
+
+Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.
+
+```html
+<ul class="listing">
+  <li>
+    <h2>Produit n°1</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;}
 body {
   font: 1.2em Helvetica, arial, sans-serif;
@@ -403,24 +421,26 @@ h2 {
   margin: 0;
   padding: 20px;
 }
-</pre>
+```
 
-<p>Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction <code>minmax()</code> avec la notation <code>repeat</code> pour la propriété <code>grid-template-columns</code> qui permet de dimensionner les pistes.</p>
+Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction `minmax()` avec la notation `repeat` pour la propriété `grid-template-columns` qui permet de dimensionner les pistes.
 
-<pre class="brush: css">.listing {
+```css
+.listing {
   list-style: none;
   margin: 2em;
   display: grid;
   grid-gap: 20px;
   grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
 }
-</pre>
+```
 
-<p>Dès qu'on ajoute cette règle, les objets s'organisent sur la grille. Si on chance la taille de la fenêtre, le nombre de colonne s'adaptera, sans qu'il soit nécessaire d'ajouter des requêtes de média ou de définir la grille.</p>
+Dès qu'on ajoute cette règle, les objets s'organisent sur la grille. Si on chance la taille de la fenêtre, le nombre de colonne s'adaptera, sans qu'il soit nécessaire d'ajouter des requêtes de média ou de définir la grille.
 
-<p>On peut ensuite améliorer chacune des boîtes en utilisant les boîtes flexibles. Pour les éléments de la liste ({{HTMLElement("li")}}), on utilise <code>display: flex</code> et <code>flex-direction</code> avec la valeur <code>column</code>. On ajoute une marge automatique pour la classe <code>.cta</code> afin que cette barre soit placée en bas de la boîte.</p>
+On peut ensuite améliorer chacune des boîtes en utilisant les boîtes flexibles. Pour les éléments de la liste ({{HTMLElement("li")}}), on utilise `display: flex` et `flex-direction` avec la valeur `column`. On ajoute une marge automatique pour la classe `.cta` afin que cette barre soit placée en bas de la boîte.
 
-<pre class="brush: css">.listing li {
+```css
+.listing li {
   border: 1px solid #ffe066;
   border-radius: 5px;
   display: flex;
@@ -435,53 +455,55 @@ h2 {
 .listing .body {
   padding: 10px;
 }
-</pre>
-
-<p>Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.</p>
-
-<p>{{EmbedLiveSample('Une_liste_produit_utilisant_le_placement_automatique', '800', '900')}}</p>
-
-<h2 id="empecher_les_espaces_avec_dense">Empêcher les espaces avec dense</h2>
-
-<p>Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe <code>wide</code> sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur <code>span 2</code>. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :</p>
-
-<p><img alt="The layout has gaps as there is not space to layout a two track item." src="11-grid-auto-flow-sparse.png"></p>
-
-<p>Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}<code>: dense </code>sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (<em>tab order</em>) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.</p>
-
-<pre class="brush: html hidden">&lt;ul class="listing"&gt;
-  &lt;li&gt;
-    &lt;h2&gt;Item One&lt;/h2&gt;
-    &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
-    &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
-  &lt;/li&gt;
-   &lt;li&gt;
-     &lt;h2&gt;Item Two&lt;/h2&gt;
-     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
-     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
-   &lt;/li&gt;
-   &lt;li class="wide"&gt;
-     &lt;h2&gt;Item Three&lt;/h2&gt;
-     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;
-     &lt;p&gt;This one has more text than the other items.&lt;/p&gt;
-     &lt;p&gt;Quite a lot more&lt;/p&gt;
-     &lt;p&gt;Perhaps we could do something different with it?&lt;/p&gt;&lt;/div&gt;
-     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
-     &lt;h2&gt;Item Four&lt;/h2&gt;
-     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
-     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
-    &lt;/li&gt;
-     &lt;li&gt;
-     &lt;h2&gt;Item Five&lt;/h2&gt;
-     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
-      &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
-    &lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```
+
+Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.
+
+{{EmbedLiveSample('Une_liste_produit_utilisant_le_placement_automatique', '800', '900')}}
+
+## Empêcher les espaces avec dense
+
+Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe `wide` sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur `span 2`. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :
+
+![The layout has gaps as there is not space to layout a two track item.](11-grid-auto-flow-sparse.png)
+
+Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}`: dense `sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (_tab order_) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.
+
+```html hidden
+<ul class="listing">
+  <li>
+    <h2>Item One</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;}
 body {
   font: 1.2em Helvetica, arial, sans-serif;
@@ -512,9 +534,10 @@ h2 {
 .listing .body {
   padding: 10px;
 }
-</pre>
+```
 
-<pre class="brush: css">.listing {
+```css
+.listing {
   list-style: none;
   margin: 2em;
   display: grid;
@@ -525,19 +548,17 @@ h2 {
 .listing .wide {
   grid-column-end: span 2;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('empecher_les_espaces_avec_dense', '800', '900')}}</p>
+{{EmbedLiveSample('empecher_les_espaces_avec_dense', '800', '900')}}
 
-<p>Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.</p>
+Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.
 
-<h2 id="Aller_plus_loin">Aller plus loin</h2>
+## Aller plus loin
 
-<p>La meilleure façon d'apprendre à utiliser les grilles CSS est de continuer à construire des exemples comme ceux que nous avons vus ici. Prenez un cas d'utilisation que vous auriez construit avec un <em>framework</em> ou avec un autre mode de disposition et voyez si vous pouvez le construire à l'aide d'une grille. N'oubliez pas de trouver des exemples de disposition encore impossibles à construire avec les méthodes actuelles : prenez différentes sources d'inspiration comme les magazines et affiches. Le modèle de grille offre un nouvel éventail de possibilités et il serait dommage de rester sur nos acquis.</p>
+La meilleure façon d'apprendre à utiliser les grilles CSS est de continuer à construire des exemples comme ceux que nous avons vus ici. Prenez un cas d'utilisation que vous auriez construit avec un _framework_ ou avec un autre mode de disposition et voyez si vous pouvez le construire à l'aide d'une grille. N'oubliez pas de trouver des exemples de disposition encore impossibles à construire avec les méthodes actuelles : prenez différentes sources d'inspiration comme les magazines et affiches. Le modèle de grille offre un nouvel éventail de possibilités et il serait dommage de rester sur nos acquis.
 
-<ul>
- <li>Vous pouvez consulter le <a href="https://labs.jensimmons.com/"><em>Layout Labs</em> de Jen Simmons (en anglais)</a>, elle a créé différentes disposition en se basant sur une variété d'exemples.</li>
- <li>Pour d'autres exemples, vous pouvez vous référer à <em><a href="https://gridbyexample.com">Grid by Example</a></em> qui contient des exemples pour des grilles plus petites, des fragments d'interface utilisateur ou des dispositions pour des pages entières.</li>
-</ul>
+- Vous pouvez consulter le [_Layout Labs_ de Jen Simmons (en anglais)](https://labs.jensimmons.com/), elle a créé différentes disposition en se basant sur une variété d'exemples.
+- Pour d'autres exemples, vous pouvez vous référer à _[Grid by Example](https://gridbyexample.com)_ qui contient des exemples pour des grilles plus petites, des fragments d'interface utilisateur ou des dispositions pour des pages entières.
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}</p>
+{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}
diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md
index f32d5cd4b9..5272f1bbdb 100644
--- a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md
+++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md
@@ -4,23 +4,24 @@ slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.</p>
+Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.
 
-<h2 id="Les_grilles_et_les_boîtes_flexibles_flexbox">Les grilles et les boîtes flexibles (<em>flexbox</em>)</h2>
+## Les grilles et les boîtes flexibles (_flexbox_)
 
-<p>La différence fondamentale, entre les grilles et <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles CSS</a>, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.</p>
+La différence fondamentale, entre les grilles et [les boîtes flexibles CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.
 
-<h3 id="Disposition_sur_une_dimension_ou_sur_deux_dimensions">Disposition sur une dimension ou sur deux dimensions</h3>
+### Disposition sur une dimension ou sur deux dimensions
 
-<p>Voyons un exemple simple pour illustrer la différence entre une disposition sur un seul axe et une disposition sur deux axes.</p>
+Voyons un exemple simple pour illustrer la différence entre une disposition sur un seul axe et une disposition sur deux axes.
 
-<p>Dans le premier exemple, on utilise un boîte flexible pour organiser un ensemble de boîte. Le conteneur contient 5 objets fils et on utilise des propriétés afin qu'ils puissent être agrandis/rétrécis avec une base (<code>flex-basis</code>) de 150 pixels.</p>
+Dans le premier exemple, on utilise un boîte flexible pour organiser un ensemble de boîte. Le conteneur contient 5 objets fils et on utilise des propriétés afin qu'ils puissent être agrandis/rétrécis avec une base (`flex-basis`) de 150 pixels.
 
-<p>On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur <code>wrap</code>, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver <code>flex-basis</code>.</p>
+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`.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -28,45 +29,48 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   width: 500px;
   display: flex;
   flex-wrap: wrap;
 }
-.wrapper &gt; div {
+.wrapper > div {
   flex: 1 1 150px;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Disposition_sur_une_dimension_ou_sur_deux_dimensions', '500', '230')}}</p>
+{{EmbedLiveSample('Disposition_sur_une_dimension_ou_sur_deux_dimensions', '500', '230')}}
 
-<p>On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.</p>
+On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.
 
-<p>On se demande alors comment faire pour aligner ces éléments… C'est là qu'intervient la disposition en deux dimensions, pour contrôler l'alignement des lignes et des colonnes : voici la grille.</p>
+On se demande alors comment faire pour aligner ces éléments… C'est là qu'intervient la disposition en deux dimensions, pour contrôler l'alignement des lignes et des colonnes : voici la grille.
 
-<h3 id="La_même_disposition_avec_une_grille_CSS">La même disposition avec une grille CSS</h3>
+### La même disposition avec une grille CSS
 
-<p>Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes <code>1fr</code>. 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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -74,58 +78,59 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-  &lt;div&gt;Quatre&lt;/div&gt;
-  &lt;div&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('La_même_disposition_avec_une_grille_CSS', '300', '170')}}</p>
+{{EmbedLiveSample('La_même_disposition_avec_une_grille_CSS', '300', '170')}}
 
-<p>Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :</p>
+Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :
 
-<ul>
- <li>Ai-je uniquement besoin de contrôler la disposition selon des colonnes <strong>ou</strong> selon des lignes ? Si oui, mieux vaudra utiliser des boîtes flexibles.</li>
- <li>Ai-je besoin de contrôler la disposition selon des colonnes <strong>et</strong> selon des lignes ? Si oui, mieux vaudra utiliser une grille CSS.</li>
-</ul>
+- Ai-je uniquement besoin de contrôler la disposition selon des colonnes **ou** selon des lignes ? Si oui, mieux vaudra utiliser des boîtes flexibles.
+- Ai-je besoin de contrôler la disposition selon des colonnes **et** selon des lignes ? Si oui, mieux vaudra utiliser une grille CSS.
 
-<h3 id="Organiser_lespace_ou_organiser_le_contenu">Organiser l'espace ou organiser le contenu ?</h3>
+### Organiser l'espace ou organiser le contenu ?
 
-<p>En plus de la distinction sur le nombre de dimensions, on peut prendre un autre angle de vue pour choisir entre les boîtes flexibles et les grilles. Les boîtes flexibles permettent de répartir l'espace de façon équitable autour des éléments d'un conteneur. C'est la taille du contenu qui détermine l'espace occupé par chacun des éléments. Si les objets passent sur une nouvelle ligne, leur espacement sera calculé en fonction de leurs tailles et de l'espace disponible sur cette ligne.</p>
+En plus de la distinction sur le nombre de dimensions, on peut prendre un autre angle de vue pour choisir entre les boîtes flexibles et les grilles. Les boîtes flexibles permettent de répartir l'espace de façon équitable autour des éléments d'un conteneur. C'est la taille du contenu qui détermine l'espace occupé par chacun des éléments. Si les objets passent sur une nouvelle ligne, leur espacement sera calculé en fonction de leurs tailles et de l'espace disponible sur cette ligne.
 
-<p>En revanche, les grilles organisent le contenu dans l'espace. Lorsqu'on utilise les grilles CSS, on crée un « plan » et on place les éléments sur ce plan (ou on indique un placement automatique, strict, sur cette grille). Il est possible de créer des pistes (<em>tracks</em>) qui réagissent à la taille du contenu mais cela modifierait alors l'ensemble de la piste.</p>
+En revanche, les grilles organisent le contenu dans l'espace. Lorsqu'on utilise les grilles CSS, on crée un « plan » et on place les éléments sur ce plan (ou on indique un placement automatique, strict, sur cette grille). Il est possible de créer des pistes (_tracks_) qui réagissent à la taille du contenu mais cela modifierait alors l'ensemble de la piste.
 
-<p>Si vous utilisez les boîtes flexibles et souhaitez bloquer certains des aspects autour de la flexibilité, vous aurez probablement besoin d'une grille CSS. Par exemple, si vous définissez un objet flexible avec un pourcentage en largeur pour aligner l'objet avec les éléments du dessus, une grille pourrait être plus adaptée.</p>
+Si vous utilisez les boîtes flexibles et souhaitez bloquer certains des aspects autour de la flexibilité, vous aurez probablement besoin d'une grille CSS. Par exemple, si vous définissez un objet flexible avec un pourcentage en largeur pour aligner l'objet avec les éléments du dessus, une grille pourrait être plus adaptée.
 
-<h3 id="Lalignement_des_boîtes">L'alignement des boîtes</h3>
+### L'alignement des boîtes
 
-<p>Une des fonctionnalités les plus attendues pour les boîtes flexibles était celle qui permettait enfin de contrôler l'alignement correctement. On pouvait simplement centrer une boîte sur une page. Les éléments flexibles pouvaient être étirés en hauteur dans leurs conteneurs et on pouvait donc obtenir des colonnes avec des hauteurs égales. Il était désormais possible d'éviter des contournements pour obtenir ce résultat.</p>
+Une des fonctionnalités les plus attendues pour les boîtes flexibles était celle qui permettait enfin de contrôler l'alignement correctement. On pouvait simplement centrer une boîte sur une page. Les éléments flexibles pouvaient être étirés en hauteur dans leurs conteneurs et on pouvait donc obtenir des colonnes avec des hauteurs égales. Il était désormais possible d'éviter des contournements pour obtenir ce résultat.
 
-<p>Les propriétés d'alignement ont été ajoutées à la spécification pour les boîtes flexibles dans une nouvelle spécification intitulée <em><a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a></em>. Cela signifie qu'elles peuvent être utilisées dans d'autres modules, y compris dans les grilles CSS. À l'avenir, elles pourront éventuellement s'appliquer aux autres méthodes de disposition.</p>
+Les propriétés d'alignement ont été ajoutées à la spécification pour les boîtes flexibles dans une nouvelle spécification intitulée _[Box Alignment Level 3](https://drafts.csswg.org/css-align/)_. Cela signifie qu'elles peuvent être utilisées dans d'autres modules, y compris dans les grilles CSS. À l'avenir, elles pourront éventuellement s'appliquer aux autres méthodes de disposition.
 
-<p>Dans un autre article de cette série, nous verrons comment utiliser l'alignement des boîtes dans une disposition en grille. Pour le moment, voici un exemple simple qui permet de comparer les boîtes flexibles et les grilles.</p>
+Dans un autre article de cette série, nous verrons comment utiliser l'alignement des boîtes dans une disposition en grille. Pour le moment, voici un exemple simple qui permet de comparer les boîtes flexibles et les grilles.
 
-<p>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 <code>flex-end</code> 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 <code>box1</code> afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à <code>box2</code> afin que <code>box1</code> soit alignée avec le début du conteneur flexible.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -133,23 +138,25 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: flex;
   align-items: flex-end;
   min-height: 200px;
@@ -160,15 +167,16 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 .box2 {
   align-self: flex-start;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Lalignement_des_boîtes', '300', '230')}}</p>
+{{EmbedLiveSample('Lalignement_des_boîtes', '300', '230')}}
 
-<h3 id="Lalignement_sur_les_grilles_CSS">L'alignement sur les grilles CSS</h3>
+### L'alignement sur les grilles CSS
 
-<p>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 à <code>start</code> et <code>end</code> plutôt que par rapport à <code>flex-start</code> et <code>flex-end</code>. 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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -176,23 +184,25 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   align-items: end;
@@ -203,25 +213,26 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 .box2 {
   align-self: start;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Lalignement_sur_les_grilles_CSS', '200', '310')}}</p>
+{{EmbedLiveSample('Lalignement_sur_les_grilles_CSS', '200', '310')}}
 
-<h3 id="Lunité_fr_et_flex-basis">L'unité <code>fr</code> et <code>flex-basis</code></h3>
+### L'unité `fr` et `flex-basis`
 
-<p>On a vu avant l'unité <code>fr</code> qui permet d'affecter aux pistes de la grille une portion de l'espace disponible dans le conteneur. L'unité <code>fr</code>, lorsqu'elle est combinée avec la fonction {{cssxref("minmax()", "minmax()")}} permet d'obtenir un comportement proche des propriétés <code>flex</code> utilisées pour les boîtes flexibles, tout en permettant de créer une disposition sur deux dimensions.</p>
+On a vu avant l'unité `fr` qui permet d'affecter aux pistes de la grille une portion de l'espace disponible dans le conteneur. L'unité `fr`, lorsqu'elle est combinée avec la fonction {{cssxref("minmax()", "minmax()")}} permet d'obtenir un comportement proche des propriétés `flex` utilisées pour les boîtes flexibles, tout en permettant de créer une disposition sur deux dimensions.
 
-<p>Si on revient sur l'exemple illustrant la différence entre une disposition à une dimension et une disposition à deux dimensions. On voit qu'il y a une différence sur la façon dont les deux dispositions fonctionnent en mode <em>responsive</em> (lorsque les dimensions de la zone d'affichage varient). Avec la disposition flexible, si on redimensionne la disposition ajustera le nombre d'éléments sur chaque ligne en fonction de l'espace disponible. S'il y a beaucoup d'espace, les cinq éléments pourront tenir sur une seule ligne et si l'espace est réduit, on pourra avoir jusqu'à un seul élément par ligne.</p>
+Si on revient sur l'exemple illustrant la différence entre une disposition à une dimension et une disposition à deux dimensions. On voit qu'il y a une différence sur la façon dont les deux dispositions fonctionnent en mode _responsive_ (lorsque les dimensions de la zone d'affichage varient). Avec la disposition flexible, si on redimensionne la disposition ajustera le nombre d'éléments sur chaque ligne en fonction de l'espace disponible. S'il y a beaucoup d'espace, les cinq éléments pourront tenir sur une seule ligne et si l'espace est réduit, on pourra avoir jusqu'à un seul élément par ligne.
 
-<p>En revanche, avec la grille, on a toujours trois pistes qui forment trois colonnes. Les pistes s'élargiront ou se rétrécieront mais il y en aura toujours trois car c'est le nombre de pistes déclaré à la définition de la grille.</p>
+En revanche, avec la grille, on a toujours trois pistes qui forment trois colonnes. Les pistes s'élargiront ou se rétrécieront mais il y en aura toujours trois car c'est le nombre de pistes déclaré à la définition de la grille.
 
-<h4 id="Des_pistes_qui_se_remplissent_automatiquement">Des pistes qui se remplissent automatiquement</h4>
+#### Des pistes qui se remplissent automatiquement
 
-<p>On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrangement en lignes et colonnes grâce à la notation <code>repeat</code> et aux propriétés <code>auto-fill</code> et <code>auto-fit</code>.</p>
+On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrangement en lignes et colonnes grâce à la notation `repeat` et aux propriétés `auto-fill` et `auto-fit`.
 
-<p>Dans l'exemple qui suit, on utilise le mot-clé <code>auto-fill</code> à la place d'un entier dans la fonction <code>repeat</code> 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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -229,37 +240,40 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Des_pistes_qui_se_remplissent_automatiquement', '500', '170')}}</p>
+{{EmbedLiveSample('Des_pistes_qui_se_remplissent_automatiquement', '500', '170')}}
 
-<h3 id="Avoir_un_nombre_de_pistes_flexible">Avoir un nombre de pistes flexible</h3>
+### Avoir un nombre de pistes flexible
 
-<p>L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles. Dans l'exemple avec les boîtes flexibles, les objets qui sont plus larges que la base de 200 pixels avant de passer à la ligne. On peut obtenir le même effet sur une grille en combinant le mot-clé <code>auto-fill</code> et la fonction {{cssxref("minmax()", "minmax()")}}.</p>
+L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles. Dans l'exemple avec les boîtes flexibles, les objets qui sont plus larges que la base de 200 pixels avant de passer à la ligne. On peut obtenir le même effet sur une grille en combinant le mot-clé `auto-fill` et la fonction {{cssxref("minmax()", "minmax()")}}.
 
-<p>Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec <code>minmax</code>. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de <code>1fr</code>. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum <code>1fr</code> afin de répartir l'espace restant entre les objets.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -267,43 +281,46 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div&gt;Un&lt;/div&gt;
-  &lt;div&gt;Deux&lt;/div&gt;
-  &lt;div&gt;Trois&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Avoir_un_nombre_de_pistes_flexible', '500', '170')}}</p>
+{{EmbedLiveSample('Avoir_un_nombre_de_pistes_flexible', '500', '170')}}
 
-<p>On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.</p>
+On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.
 
-<h2 id="Les_grilles_et_les_éléments_positionnés_de_façon_absolue">Les grilles et les éléments positionnés de façon absolue</h2>
+## Les grilles et les éléments positionnés de façon absolue
 
-<p>La grille peut interagir avec les éléments positionnés de façon absolue. Cela peut s'avérer utile si on souhaite positionner un élément dans une grille ou dans une zone donnée de la grille. La spécification définit le comportement lorsqu'une grille est un bloc englobant et que la grille est le parent d'un élément positionné de façon absolue.</p>
+La grille peut interagir avec les éléments positionnés de façon absolue. Cela peut s'avérer utile si on souhaite positionner un élément dans une grille ou dans une zone donnée de la grille. La spécification définit le comportement lorsqu'une grille est un bloc englobant et que la grille est le parent d'un élément positionné de façon absolue.
 
-<h3 id="Avoir_une_grille_comme_bloc_englobant">Avoir une grille comme bloc englobant</h3>
+### Avoir une grille comme bloc englobant
 
-<p>Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété <code>position</code> avec la valeur <code>relative</code> (comme on ferait pour un bloc classique). Une fois que c'est fait, si on utilise <code>position:</code> <code>absolute</code> sur un objet de la grille, son bloc englobant sera la grille. Si l'élément a une position donnée sur la grille, le conteneur sera la zone de la grille sur laquelle il est placé.</p>
+Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété `position` avec la valeur `relative` (comme on ferait pour un bloc classique). Une fois que c'est fait, si on utilise `position:` `absolute` sur un objet de la grille, son bloc englobant sera la grille. Si l'élément a une position donnée sur la grille, le conteneur sera la zone de la grille sur laquelle il est placé.
 
-<p>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 <code>position:</code> <code>relative</code> et devient donc le contexte de positionnement pour cet objet.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -311,29 +328,31 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;
+```html
+<div class="wrapper">
+  <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.
-  &lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+  </div>
+  <div class="box4">Quatre</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-auto-rows: 200px;
@@ -349,29 +368,30 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   top: 40px;
   left: 40px;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Avoir_une_grille_comme_bloc_englobant', '500', '330')}}</p>
+{{EmbedLiveSample('Avoir_une_grille_comme_bloc_englobant', '500', '330')}}
 
-<p>On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés <code>top</code> et <code>left</code>. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.</p>
+On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés `top` et `left`. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.
 
-<p>Si on retire <code>position:</code> <code>absolute</code> des règles sur <code>.box3</code>, on peut voir le résultat qu'on aurait obtenu sans ce positionnement absolu.</p>
+Si on retire `position:` `absolute` des règles sur `.box3`, on peut voir le résultat qu'on aurait obtenu sans ce positionnement absolu.
 
-<h3 id="Utiliser_une_grille_comme_parent">Utiliser une grille comme parent</h3>
+### Utiliser une grille comme parent
 
-<p>Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire <code>position:</code> <code>relative</code> dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le <em>viewport</em>) :</p>
+Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire `position:` `relative` dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le _viewport_) :
 
-<p><img alt="Image of grid container as parent" src="2_abspos_example.png"></p>
+![Image of grid container as parent](2_abspos_example.png)
 
-<p>Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.</p>
+Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.
 
-<h3 id="Utiliser_une_zone_de_grille_comme_parent">Utiliser une zone de grille comme parent</h3>
+### Utiliser une zone de grille comme parent
 
-<p>Si l'élément positionné de façon absolu est imbriqué dans une zone de la grille, on peut créer un contexte de positionnement pour cette zone. Dans l'exemple qui suit, on utilise la même grille qu'avant sauf que l'élément est imbriqué dans la zone <code>.box3</code> de la grille.</p>
+Si l'élément positionné de façon absolu est imbriqué dans une zone de la grille, on peut créer un contexte de positionnement pour cette zone. Dans l'exemple qui suit, on utilise la même grille qu'avant sauf que l'élément est imbriqué dans la zone `.box3` de la grille.
 
-<p>On indique que <code>.box3</code> 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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -379,30 +399,32 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;Un&lt;/div&gt;
-  &lt;div class="box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box3"&gt;Trois
-    &lt;div class="abspos"&gt;
+```html
+<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <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.
-    &lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+    </div>
+  </div>
+  <div class="box4">Quatre</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-auto-rows: 200px;
@@ -424,23 +446,22 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   color: #000;
   padding: 10px;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Utiliser_une_zone_de_grille_comme_parent', '500', '420')}}</p>
+{{EmbedLiveSample('Utiliser_une_zone_de_grille_comme_parent', '500', '420')}}
 
-<h2 id="Utiliser_une_grille_et_display_contents">Utiliser une grille et <code>display:</code> <code>contents</code></h2>
+## Utiliser une grille et `display:` `contents`
 
-<p>Une autre combinaison notable, en termes de disposition, peut être l'utilisation de <code>display:</code> <code>contents</code> avec les grilles CSS. La valeur <code>contents</code> de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite comme suit dans la <a href="https://drafts.csswg.org/css-display/#box-generation">spécification Display</a> :</p>
+Une autre combinaison notable, en termes de disposition, peut être l'utilisation de `display:` `contents` avec les grilles CSS. La valeur `contents` de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite comme suit dans la [spécification Display](https://drafts.csswg.org/css-display/#box-generation) :
 
-<blockquote>
-<p>L'élément même ne génère aucune boîte mais ses éléments fils, ainsi que les pseudo-éléments, génèrent des boîtes normales. Afin de générer les boîtes et la disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document.</p>
-</blockquote>
+> L'élément même ne génère aucune boîte mais ses éléments fils, ainsi que les pseudo-éléments, génèrent des boîtes normales. Afin de générer les boîtes et la disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document.
 
-<p>Si on utilise <code>display:</code> <code>contents</code> sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.</p>
+Si on utilise `display:` `contents` sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.
 
-<h3>Utiliser display contents avant</h3>
+### Utiliser display contents avant
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -461,22 +482,24 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   background-color: #fff9db;
   padding: 1em;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box box1"&gt;
-    &lt;div class="nested"&gt;a&lt;/div&gt;
-    &lt;div class="nested"&gt;b&lt;/div&gt;
-    &lt;div class="nested"&gt;c&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
-  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css">.wrapper {
+```
+
+```html
+<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </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>
+```
+
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -485,16 +508,16 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   grid-column-start: 1;
   grid-column-end: 4;
 }
+```
 
-</pre>
+{{EmbedLiveSample('utiliser_display_contents_avant', '400', '420')}}
 
-<p>{{EmbedLiveSample('utiliser_display_contents_avant', '400', '420')}}</p>
+### Utiliser display contents après
 
-<h3>Utiliser display contents après</h3>
-  
-<p>Si on ajoute <code>display:</code> <code>contents</code> aux règles qui ciblent <code>box1</code>, 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.</p>
+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.
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -515,22 +538,24 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   background-color: #fff9db;
   padding: 1em;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box box1"&gt;
-    &lt;div class="nested"&gt;a&lt;/div&gt;
-    &lt;div class="nested"&gt;b&lt;/div&gt;
-    &lt;div class="nested"&gt;c&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
-  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
-  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
-  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: css">.wrapper {
+```
+
+```html
+<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </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>
+```
+
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -540,17 +565,15 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
   grid-column-end: 4;
   display: contents;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('utiliser_display_contents_après', '400', '330')}}</p>
+{{EmbedLiveSample('utiliser_display_contents_après', '400', '330')}}
 
-<p>Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (<em>subgrids</em>) lorsqu'elles seront implémentées. Vous pouvez également utiliser <code>display:</code> <code>contents</code> de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.</p>
+Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (_subgrids_) lorsqu'elles seront implémentées. Vous pouvez également utiliser `display:` `contents` de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.
 
-<p>Comme on a pu le voir dans cet article, la disposition avec les grilles CSS n'est qu'un outil parmi d'autres. Il ne faut pas hésiter à combiner différentes méthodes de disposition afin d'obtenir les résultats souhaités.</p>
+Comme on a pu le voir dans cet article, la disposition avec les grilles CSS n'est qu'un outil parmi d'autres. Il ne faut pas hésiter à combiner différentes méthodes de disposition afin d'obtenir les résultats souhaités.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Guides sur <em>Flexbox</em></a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Columns">Guides sur la disposition multi-colonnes</a></li>
-</ul>
+- [Guides sur _Flexbox_](/fr/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Guides sur la disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns)
diff --git a/files/fr/web/css/css_grid_layout/subgrid/index.md b/files/fr/web/css/css_grid_layout/subgrid/index.md
index bfd9bb1b1b..432e5abf05 100644
--- a/files/fr/web/css/css_grid_layout/subgrid/index.md
+++ b/files/fr/web/css/css_grid_layout/subgrid/index.md
@@ -8,111 +8,94 @@ tags:
   - subgrid
 translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>La valeur <code><strong>subgrid</strong></code> a été ajoutée par le module de spécification <em>CSS Grid Layout</em> de niveau 2 pour les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Dans ce guide, nous verrons comment utiliser cette valeur ainsi que les cas d'utilisation ou patrons de conception qui peuvent en bénéficier.</p>
+La valeur **`subgrid`** a été ajoutée par le module de spécification _CSS Grid Layout_ de niveau 2 pour les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Dans ce guide, nous verrons comment utiliser cette valeur ainsi que les cas d'utilisation ou patrons de conception qui peuvent en bénéficier.
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Firefox Nightly</a> afin de tester les exemples ci-après.</p>
-</div>
+> **Attention :** Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger [Firefox Nightly](https://www.mozilla.org/firefox/channel/desktop/#nightly) afin de tester les exemples ci-après.
 
-<h2 id="Une_introduction_à_subgrid">Une introduction à <code>subgrid</code></h2>
+## Une introduction à `subgrid`
 
-<p>Lorsqu'on ajoute <code>display: grid</code> à un conteneur, seuls les descendants directs deviennent des éléments de grille et peuvent être placés sur la grille ainsi créée. Les enfants de ces descendants seront disposés selon le flux habituel.</p>
+Lorsqu'on ajoute `display: grid` à un conteneur, seuls les descendants directs deviennent des éléments de grille et peuvent être placés sur la grille ainsi créée. Les enfants de ces descendants seront disposés selon le flux habituel.
 
-<p>On peut imbriquer des grilles en utilisant <code>display: grid</code> sur un descendant direct du conteneur de grille mais les grilles créées seront indépendantes. On ne pourra pas récupérer le dimensionnement des pistes de la grille parente pour l'utiliser dans la grille fille. Il est donc difficile d'aligner des objets de la grille fille sur la grille parente.</p>
+On peut imbriquer des grilles en utilisant `display: grid` sur un descendant direct du conteneur de grille mais les grilles créées seront indépendantes. On ne pourra pas récupérer le dimensionnement des pistes de la grille parente pour l'utiliser dans la grille fille. Il est donc difficile d'aligner des objets de la grille fille sur la grille parente.
 
-<p>Si on utilise la valeur <code>subgrid</code> pour <code>grid-template-columns</code> et/ou <code>grid-template-rows</code>, on pourra utiliser les pistes de la grille parente à l'intérieur plutôt que de créer des pistes indépendantes.</p>
+Si on utilise la valeur `subgrid` pour `grid-template-columns` et/ou `grid-template-rows`, on pourra utiliser les pistes de la grille parente à l'intérieur plutôt que de créer des pistes indépendantes.
 
-<p>Ainsi, si on utilise <code>grid-template-columns: subgrid</code> et que la grille imbriquée s'inscrit dans trois colonnes du parent, la grille imbriquée possèdera trois pistes, dimensionnées comme celles du parent. Les gouttières (<em>gaps</em>) sont également héritées mais il est possible de les surcharger avec une valeur {{cssxref("gap")}} différente. Les noms des lignes peuvent être passés du parent à la grille fille et la grille fille peut aussi déclarer ses propres noms de ligne.</p>
+Ainsi, si on utilise `grid-template-columns: subgrid` et que la grille imbriquée s'inscrit dans trois colonnes du parent, la grille imbriquée possèdera trois pistes, dimensionnées comme celles du parent. Les gouttières (_gaps_) sont également héritées mais il est possible de les surcharger avec une valeur {{cssxref("gap")}} différente. Les noms des lignes peuvent être passés du parent à la grille fille et la grille fille peut aussi déclarer ses propres noms de ligne.
 
-<h2 id="Les_sous-grilles_pour_les_colonnes">Les sous-grilles pour les colonnes</h2>
+## Les sous-grilles pour les colonnes
 
-<p>Dans l'exemple qui suit, on a une grille décomposée en neufs colonnes de <code>1fr</code> chacune et avec quatre lignes qui mesurent au moins <code>100px</code>.</p>
+Dans l'exemple qui suit, on a une grille décomposée en neufs colonnes de `1fr` chacune et avec quatre lignes qui mesurent au moins `100px`.
 
-<p>On place un objet <code>.item</code> entre les colonnes 2 et 7 et entre les lignes 2 à 4. On indique que cet objet est lui-même une grille et on définit les pistes de colonnes comme sous-grille et on utilise des lignes normales. L'objet ainsi paramétré s'étalant sur 5 colonnes de la grille parente, cela signifie que la sous-grille possède cinq pistes pour les colonnes. On place alors un objet <code>.subitem</code> sur cette deuxième grille.</p>
+On place un objet `.item` entre les colonnes 2 et 7 et entre les lignes 2 à 4. On indique que cet objet est lui-même une grille et on définit les pistes de colonnes comme sous-grille et on utilise des lignes normales. L'objet ainsi paramétré s'étalant sur 5 colonnes de la grille parente, cela signifie que la sous-grille possède cinq pistes pour les colonnes. On place alors un objet `.subitem` sur cette deuxième grille.
 
-<p>Les lignes horizontales de cet exemple ne sont pas une sous-grille et se comportent comme pour une grille imbriquée « classique ». La zone de la grille parente s'étend donc afin de pouvoir stocker le contenu de cette grille imbriquée.</p>
+Les lignes horizontales de cet exemple ne sont pas une sous-grille et se comportent comme pour une grille imbriquée « classique ». La zone de la grille parente s'étend donc afin de pouvoir stocker le contenu de cette grille imbriquée.
 
-<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}
 
-<p>On notera que la numérotation recommence à l'intérieur de la grille imbriquée. La colonne n°1 de la sous-grille correspond donc ici à la colonne n°2 de la grille parente. Autrement dit, les numéros des colonnes et des lignes de la grille parente ne sont pas héritées via la sous-grille. Cela permet une disposition modulaire et indépendante de la position quant à la grille parente.</p>
+On notera que la numérotation recommence à l'intérieur de la grille imbriquée. La colonne n°1 de la sous-grille correspond donc ici à la colonne n°2 de la grille parente. Autrement dit, les numéros des colonnes et des lignes de la grille parente ne sont pas héritées via la sous-grille. Cela permet une disposition modulaire et indépendante de la position quant à la grille parente.
 
-<h2 id="Les_sous-grilles_pour_les_lignes">Les sous-grilles pour les lignes</h2>
+## Les sous-grilles pour les lignes
 
-<p>Dans l'exemple ci-après, on a la même disposition mais on utilise cette fois <code>subgrid</code> pour la propriété <code>grid-template-rows</code> et on définit explicitement des pistes pour les colonnes. Les colonnes se comportent donc comme pour une grille imbriquée mais les lignes de la sous-grille sont liées à celles de la grille parente.</p>
+Dans l'exemple ci-après, on a la même disposition mais on utilise cette fois `subgrid` pour la propriété `grid-template-rows` et on définit explicitement des pistes pour les colonnes. Les colonnes se comportent donc comme pour une grille imbriquée mais les lignes de la sous-grille sont liées à celles de la grille parente.
 
-<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}
 
-<h2 id="Les_sous-grilles_sur_deux_dimensions">Les sous-grilles sur deux dimensions</h2>
+## Les sous-grilles sur deux dimensions
 
-<p>Bien entendu, on peut définir une sous-grille pour les lignes et pour les colonnes en même temps. Cela signifie que la sous-grille sera couplée à la grille parente pour les deux axes.</p>
+Bien entendu, on peut définir une sous-grille pour les lignes et pour les colonnes en même temps. Cela signifie que la sous-grille sera couplée à la grille parente pour les deux axes.
 
-<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}
 
-<h3 id="Absence_de_grille_implicite_pour_une_sous-grille">Absence de grille implicite pour une sous-grille</h3>
+### Absence de grille implicite pour une sous-grille
 
-<p>S'il vous faut placer automatiquement des objets et que vous ne connaissez pas leur quantité, faites attention à l'utilisation des sous-grilles : celles-ci empêcheront la création de lignes supplémentaires pour afficher le contenu.</p>
+S'il vous faut placer automatiquement des objets et que vous ne connaissez pas leur quantité, faites attention à l'utilisation des sous-grilles : celles-ci empêcheront la création de lignes supplémentaires pour afficher le contenu.
 
-<p>Pour mieux illustrer ce point, voyons le prochain exemple (on utilise le même parent et la même sous-grille qu'avant) où on essaie d'afficher 12 éléments automatiquement dans une grille qui contient uniquement 10 cellules. La sous-grille étant couplée sur les deux axes (lignes et colonnes), il n'y a aucune place restante pour les deux éléments restants et ils sont donc placés sur la dernière piste de la grille, comme indiqué dans la spécification.</p>
+Pour mieux illustrer ce point, voyons le prochain exemple (on utilise le même parent et la même sous-grille qu'avant) où on essaie d'afficher 12 éléments automatiquement dans une grille qui contient uniquement 10 cellules. La sous-grille étant couplée sur les deux axes (lignes et colonnes), il n'y a aucune place restante pour les deux éléments restants et ils sont donc placés sur la dernière piste de la grille, comme indiqué dans la spécification.
 
-<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}
 
-<p>Si on retire la valeur sur <code>grid-template-rows</code>, on permet alors la création de pistes implicites. Ainsi, même si on n'aura pas l'alignement avec les pistes de la grille parente, on pourra avoir autant de lignes que nécessaire pour afficher l'ensemble du contenu.</p>
+Si on retire la valeur sur `grid-template-rows`, on permet alors la création de pistes implicites. Ainsi, même si on n'aura pas l'alignement avec les pistes de la grille parente, on pourra avoir autant de lignes que nécessaire pour afficher l'ensemble du contenu.
 
-<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}
 
-<h2 id="Utilisation_des_gouttières_et_des_sous-grilles">Utilisation des gouttières et des sous-grilles</h2>
+## Utilisation des gouttières et des sous-grilles
 
-<p>Si vous utilisez {{cssxref("gap")}}, {{cssxref("column-gap")}} ou {{cssxref("row-gap")}} sur la grille parente, celles-ci seront héritées par la sous-grille et vous aurez donc le même espacement entre les pistes dans la sous-grille et dans la grille parente. Dans certains cas, on peut cependant vouloir d'avoir des espacements différents ou aucun espacement. Pourcela, on pourra utiliser les propriétés <code>gap-*</code> sur le conteneur de grille de la sous-grille.</p>
+Si vous utilisez {{cssxref("gap")}}, {{cssxref("column-gap")}} ou {{cssxref("row-gap")}} sur la grille parente, celles-ci seront héritées par la sous-grille et vous aurez donc le même espacement entre les pistes dans la sous-grille et dans la grille parente. Dans certains cas, on peut cependant vouloir d'avoir des espacements différents ou aucun espacement. Pourcela, on pourra utiliser les propriétés `gap-*` sur le conteneur de grille de la sous-grille.
 
-<p>Dans l'exempel qui suit, la grille parente définit des gouttières de 20 pixels pour les lignes et les colonnes et pour la sous-grille, on fixe la propriété <code>row-gap</code> à <code>0</code>.</p>
+Dans l'exempel qui suit, la grille parente définit des gouttières de 20 pixels pour les lignes et les colonnes et pour la sous-grille, on fixe la propriété `row-gap` à `0`.
 
-<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}
 
-<p>Si on inspecte le résultat avec l'inspecteur de grille de Firefox, on pourra voir que l'espace auparavant occupé par la gouttière est partagé entre les cellules et permet d'agrandir la zone pour le contenu.</p>
+Si on inspecte le résultat avec l'inspecteur de grille de Firefox, on pourra voir que l'espace auparavant occupé par la gouttière est partagé entre les cellules et permet d'agrandir la zone pour le contenu.
 
-<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="gap.png"></p>
+![The smaller item displays in the gap as row-gap is set to 0 on the subgrid.](gap.png)
 
-<h2 id="Les_lignes_nommées">Les lignes nommées</h2>
+## Les lignes nommées
 
-<p>Lorsqu'on utilise les grilles CSS, on peut fournir des noms aux lignes et positionner des objets sur la grille par rapport à ces noms plutôt qu'en utilisant les numéros de lignes. Les noms des lignes de la grille parente sont passés à la sous-grille et on peut donc placer des objets relativement à ces noms. Dans l'exempel qui suit, on a des lignes intitulées <code>col-start</code> et <code>col-end</code> sur la grille parente et on utilise ces noms pour placer un objet à l'intérieur de la sous-grille.</p>
+Lorsqu'on utilise les grilles CSS, on peut fournir des noms aux lignes et positionner des objets sur la grille par rapport à ces noms plutôt qu'en utilisant les numéros de lignes. Les noms des lignes de la grille parente sont passés à la sous-grille et on peut donc placer des objets relativement à ces noms. Dans l'exempel qui suit, on a des lignes intitulées `col-start` et `col-end` sur la grille parente et on utilise ces noms pour placer un objet à l'intérieur de la sous-grille.
 
-<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}
 
-<p>Il est aussi possible d'utiliser de nouveaux noms dans la sous-grille. Pour cela, on ajoutera une liste de noms entre crochets après le mot-clé <code>subgrid</code>. Si on disposait de 4 lignes sur la sous-grille, on pourrait alors écrire <code>grid-template-columns: subgrid [line1] [line2] [line3] [line4]</code>.</p>
+Il est aussi possible d'utiliser de nouveaux noms dans la sous-grille. Pour cela, on ajoutera une liste de noms entre crochets après le mot-clé `subgrid`. Si on disposait de 4 lignes sur la sous-grille, on pourrait alors écrire `grid-template-columns: subgrid [line1] [line2] [line3] [line4]`.
 
-<p>Les noms indiquées sur la sous-grille sont ajoutés à ceux déjà portés par la grille parente et on peut donc utiliser les uns ou les autres. Dans l'exemple suivant, on illustre ce point en positionnant un objet en utilisant deux noms : l'un provenant de la grille parente et l'autre provenant de la grille fille.</p>
+Les noms indiquées sur la sous-grille sont ajoutés à ceux déjà portés par la grille parente et on peut donc utiliser les uns ou les autres. Dans l'exemple suivant, on illustre ce point en positionnant un objet en utilisant deux noms : l'un provenant de la grille parente et l'autre provenant de la grille fille.
 
-<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}
 
-<h2 id="Utilisation_des_sous-grilles">Utilisation des sous-grilles</h2>
+## Utilisation des sous-grilles
 
-<p>Exception faite qu'il faille veiller au contenu qui ne pourrait pas être affiché dans une sous-grille, cette dernière se comporte généralement comme une grille imbriquée. La différence principale réside dans le dimensionnement des pistes qui peut provenir de la grille parente. Toutefois (et comme avec une simple grille imbriquée), la taille du contenu placé sur la sous-grille peut modifier le dimensionnement des pistes (lorsqu'on utilise un dimensionnement qui s'adapte au contenu). Ainsi, les pistes dimensionnées automatiquement s'agrandiront pour contenir les objets de la grille parente et aussi ceux de la sous-grille.</p>
+Exception faite qu'il faille veiller au contenu qui ne pourrait pas être affiché dans une sous-grille, cette dernière se comporte généralement comme une grille imbriquée. La différence principale réside dans le dimensionnement des pistes qui peut provenir de la grille parente. Toutefois (et comme avec une simple grille imbriquée), la taille du contenu placé sur la sous-grille peut modifier le dimensionnement des pistes (lorsqu'on utilise un dimensionnement qui s'adapte au contenu). Ainsi, les pistes dimensionnées automatiquement s'agrandiront pour contenir les objets de la grille parente et aussi ceux de la sous-grille.
 
-<p>Une telle ressemblance entre <code>subgrid</code> et les grilles imbriquées peut faciliter le passage d'une méthode à l'autre. Ainsi, si on réalise qu'il faut une grille implicite sur les lignes, il suffit de retirer <code>subgrid</code> pour la propriété <code>grid-template-rows</code> (et éventuellement fournir une valeur à <code>grid-auto-rows</code> afin de contrôler le dimensionnement implicite).</p>
+Une telle ressemblance entre `subgrid` et les grilles imbriquées peut faciliter le passage d'une méthode à l'autre. Ainsi, si on réalise qu'il faut une grille implicite sur les lignes, il suffit de retirer `subgrid` pour la propriété `grid-template-rows` (et éventuellement fournir une valeur à `grid-auto-rows` afin de contrôler le dimensionnement implicite).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Grid 2")}}</td>
-   <td>{{Spec2("CSS Grid 2")}}</td>
-   <td>Définition initiale des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#sous-grille">sous-grilles (<em>subgrids</em>)</a>.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | État                             | Commentaires                                                                                                                     |
+| ------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS Grid 2")}} | {{Spec2("CSS Grid 2")}} | Définition initiale des [sous-grilles (_subgrids_)](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#sous-grille). |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#sous-grille">Les concepts de bases des grilles CSS</a></li>
-</ul>
+- [Les concepts de bases des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#sous-grille)
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 1454f113ed..8e870e90e8 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
@@ -8,45 +8,47 @@ tags:
 translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
 original_slug: Web/CSS/CSS_Images/Sprites_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les <em>sprites</em> sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors <code>background-position</code> pour choisir l'image qu'on souhaite utiliser.</p>
+Les _sprites_ sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors `background-position` pour choisir l'image qu'on souhaite utiliser.
 
-<div class="note">
-<p><strong>Note :</strong> Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.</p>
-</div>
+> **Note :** Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.
 
-<h2 id="Implémentation">Implémentation</h2>
+## Implémentation
 
-<p>Supposons qu'une image est affichée pour chaque élement de la classe <code>toolbtn</code> :</p>
+Supposons qu'une image est affichée pour chaque élement de la classe `toolbtn` :
 
-<pre class="brush:css">.toolbtn {
+```css
+.toolbtn {
   background: url('myfile.png');
   display: inline-block;
   height: 20px;
   width: 20px;
-}</pre>
+}
+```
 
-<p>Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url()")}} pour décaler l'image de fond ({{cssxref("background")}}). Cela fonctionne aussi avec {{cssxref("background-position")}}. Par exemple :</p>
+Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url()")}} pour décaler l'image de fond ({{cssxref("background")}}). Cela fonctionne aussi avec {{cssxref("background-position")}}. Par exemple :
 
-<pre class="brush:css">#btn1 {
+```css
+#btn1 {
   background-position: -20px 0px;
 }
 
 #btn2 {
   background-position: -40px 0px;
-}</pre>
+}
+```
 
-<p>L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe <code>toolbtn</code>).</p>
+L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe `toolbtn`).
 
-<p>De la même manière, vous pouvez faire un effet de transition au survol :</p>
+De la même manière, vous pouvez faire un effet de transition au survol :
 
-<pre class="brush:css">#btn:hover {
-  background-position: <var>&lt;pixels shifted right&gt;</var>px <var>&lt;pixels shifted down&gt;</var>px;
-}</pre>
+```css
+#btn:hover {
+  background-position: <pixels shifted right>px <pixels shifted down>px;
+}
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Une démonstration sur CSS Tricks</a></li>
-</ul>
+- [Une démonstration sur CSS Tricks](https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/)
diff --git a/files/fr/web/css/css_images/index.md b/files/fr/web/css/css_images/index.md
index 71e61e5b8d..5641ddd5f8 100644
--- a/files/fr/web/css/css_images/index.md
+++ b/files/fr/web/css/css_images/index.md
@@ -8,93 +8,52 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Images
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Images</strong></em> est un module CSS qui définit les types d'images qui peuvent être utilisés (le type {{cssxref("&lt;image&gt;")}}, les URLs qu'elles contiennent, les dégradés et autres types d'images), comment les redimensionner et comment elles, ainsi que le contenu remplacé, interagissent avec les différents modèles de mise en page.</p>
+**_CSS Images_** est un module CSS qui définit les types d'images qui peuvent être utilisés (le type {{cssxref("&lt;image&gt;")}}, les URLs qu'elles contiennent, les dégradés et autres types d'images), comment les redimensionner et comment elles, ainsi que le contenu remplacé, interagissent avec les différents modèles de mise en page.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{CSSxRef("image-orientation")}}</li>
- <li>{{CSSxRef("image-rendering")}}</li>
- <li>{{CSSxRef("image-resolution")}}</li>
- <li>{{CSSxRef("object-fit")}}</li>
- <li>{{CSSxRef("object-position")}}</li>
-</ul>
+- {{CSSxRef("image-orientation")}}
+- {{CSSxRef("image-rendering")}}
+- {{CSSxRef("image-resolution")}}
+- {{CSSxRef("object-fit")}}
+- {{CSSxRef("object-position")}}
 
-<h3 id="Fonctions">Fonctions</h3>
+### Fonctions
 
-<ul>
- <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li>
- <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li>
- <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
- <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
- <li>{{CSSxRef("conic-gradient")}}</li>
- <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li>
- <li>{{CSSxRef("url", "url()")}}</li>
- <li>{{CSSxRef("element", "element()")}}</li>
- <li>{{CSSxRef("_image", "image()")}}</li>
- <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li>
-</ul>
+- {{CSSxRef("linear-gradient", "linear-gradient()")}}
+- {{CSSxRef("radial-gradient", "radial-gradient()")}}
+- {{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}
+- {{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}
+- {{CSSxRef("conic-gradient")}}
+- {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}
+- {{CSSxRef("url", "url()")}}
+- {{CSSxRef("element", "element()")}}
+- {{CSSxRef("_image", "image()")}}
+- {{CSSxRef("cross-fade", "cross-fade()")}}
 
-<h3 id="Types_de_données">Types de données</h3>
+### Types de données
 
-<ul>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{cssxref("&lt;gradient&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;image&gt;")}}
+- {{cssxref("&lt;gradient&gt;")}}
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utilisation de dégradés CSS</a></dt>
- <dd>Présente un type spécifique d'images CSS, les <em>dégradés</em>, et comment les créer et les utiliser.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">Les <em>sprites</em> CSS</a></dt>
- <dd>Décrit la technique classique consistant à regrouper plusieurs images en un seul document pour économiser des requêtes de téléchargement et rendre une page disponible plus rapidement.</dd>
-</dl>
+- [Utilisation de dégradés CSS](/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS)
+  - : Présente un type spécifique d'images CSS, les _dégradés_, et comment les créer et les utiliser.
+- [Les _sprites_ CSS](/fr/docs/Web/CSS/CSS_Images/Sprites_CSS)
+  - : Décrit la technique classique consistant à regrouper plusieurs images en un seul document pour économiser des requêtes de téléchargement et rendre une page disponible plus rapidement.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Images")}}</td>
-   <td>{{Spec2("CSS4 Images")}}</td>
-   <td>Ajout de {{CSSxRef("image-resolution")}},{{CSSxRef("conic-gradient")}} et {{CSSxRef("_image", "image()")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Images")}}</td>
-   <td>{{Spec2("CSS3 Images")}}</td>
-   <td>Ajout de {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}} et {{CSSxRef("object-position")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}</td>
-   <td>{{Spec2("Compat")}}</td>
-   <td>Standardisation de la version préfixée avec <code>-webkit</code> pour les valeurs de fonctions de dégradé</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}</td>
-   <td>{{Spec2("CSS3 Values")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "#url", "&lt;url&gt;")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>Définition intiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                             | Commentaires                                                                                                                                                                  |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS4 Images")}}                                                 | {{Spec2("CSS4 Images")}} | Ajout de {{CSSxRef("image-resolution")}},{{CSSxRef("conic-gradient")}} et {{CSSxRef("_image", "image()")}}.                                   |
+| {{SpecName("CSS3 Images")}}                                                 | {{Spec2("CSS3 Images")}} | Ajout de {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}} et {{CSSxRef("object-position")}} |
+| {{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}} | {{Spec2("Compat")}}         | Standardisation de la version préfixée avec `-webkit` pour les valeurs de fonctions de dégradé                                                                                |
+| {{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}                 | {{Spec2("CSS3 Values")}} |                                                                                                                                                                               |
+| {{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}         | {{Spec2("CSS2.1")}}         |                                                                                                                                                                               |
+| {{SpecName("CSS1", "#url", "&lt;url&gt;")}}                             | {{Spec2("CSS1")}}         | Définition intiale.                                                                                                                                                           |
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 6826ef0070..87cb6a287b 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,176 +8,198 @@ tags:
 translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
 original_slug: Web/CSS/Utilisation_de_dégradés_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les <strong>dégradés CSS</strong> sont représentés par le type de donnée {{cssxref("&lt;gradient&gt;")}} qui est un sous-ensemble du type {{cssxref("&lt;image&gt;")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}).</p>
+Les **dégradés CSS** sont représentés par le type de donnée {{cssxref("&lt;gradient&gt;")}} qui est un sous-ensemble du type {{cssxref("&lt;image&gt;")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}).
 
-<p>Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}.</p>
+Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}.
 
-<p>Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images 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.</p>
+Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images 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.
 
-<p>Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées.</p>
+Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées.
 
-<h2 id="Dégradés_linéaires">Dégradés linéaires</h2>
+## Dégradés linéaires
 
-<p>Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué.</p>
+Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué.
 
-<h3 id="Dégradés_linéaires_simples">Dégradés linéaires simples</h3>
+### Dégradés linéaires simples
 
-<p>Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.</p>
+Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.linear-gradient {
+```css
+.linear-gradient {
   background: linear-gradient(blue, white);
 }
 
 div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;</pre>
+```html
+<div class="linear-gradient"></div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}}</p>
+{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}}
 
-<h3 id="Appliquer_un_dégradé_de_gauche_à_droite">Appliquer un dégradé de gauche à droite</h3>
+### Appliquer un dégradé de gauche à droite
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.linear-gradient {
+```css
+.linear-gradient {
   background: linear-gradient(to right, blue, white);
 }
 
 div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
-</pre>
+```html
+<div class="linear-gradient"></div>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}}</p>
+{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}}
 
-<h3 id="Appliquer_un_dégradé_en_diagonale">Appliquer un dégradé en diagonale</h3>
+### Appliquer un dégradé en diagonale
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.linear-gradient {
+```css
+.linear-gradient {
   background: linear-gradient(to bottom right, blue, white);
 }
 
 div {
   width: 200px;
   height: 100px;
-}</pre>
+}
+```
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
-</pre>
+```html
+<div class="linear-gradient"></div>
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}}</p>
+{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}}
 
-<h3 id="Utilisation_d’angles">Utilisation d’angles</h3>
+### Utilisation d’angles
 
-<p>Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.</p>
+Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.
 
-<h4 id="CSS_4">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.linear-gradient {
+```css
+.linear-gradient {
   background: linear-gradient(70deg, blue, pink);
 }
 
 div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<h4 id="HTML_4">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
-</pre>
+```html
+<div class="linear-gradient"></div>
+```
 
-<h4 id="Résultat_4">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utilisation_d’angles",120,120)}}</p>
+{{EmbedLiveSample("Utilisation_d’angles",120,120)}}
 
-<p>L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, <code>0deg</code> crée un dégradé vertical de bas en haut, tandis que <code>90deg</code> génère un dégradé horizontal de la gauche vers la droite :</p>
+L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, `0deg` crée un dégradé vertical de bas en haut, tandis que `90deg` génère un dégradé horizontal de la gauche vers la droite :
 
-<p><img src="linear_red_angles.png"></p>
+![](linear_red_angles.png)
 
-<pre class="brush: css">background: linear-gradient(&lt;angle&gt;, red, white);</pre>
+```css
+background: linear-gradient(<angle>, red, white);
+```
 
-<h2 id="Créer_des_effets_et_manipuler_les_couleurs">Créer des effets et manipuler les couleurs</h2>
+## Créer des effets et manipuler les couleurs
 
-<h3 id="Utiliser_plus_de_deux_couleurs">Utiliser plus de deux couleurs</h3>
+### Utiliser plus de deux couleurs
 
-<p>Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité :</p>
+Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité :
 
-<h4 id="CSS_5">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.linear-gradient {
+```css
+.linear-gradient {
   background: linear-gradient(red, yellow, blue, orange);
 }
 
 div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<h4 id="HTML_5">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
-</pre>
+```html
+<div class="linear-gradient"></div>
+```
 
-<h4 id="Résultat_5">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}}</p>
+{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}}
 
-<h3 id="Arrêts_de_couleurs">Arrêts de couleurs</h3>
+### Arrêts de couleurs
 
-<p>Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, <code>0%</code> indique le point de départ, et <code>100%</code> le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.</p>
+Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, `0%` indique le point de départ, et `100%` le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.
 
-<h4 id="CSS_6">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.linear-gradient {
+```css
+.linear-gradient {
   background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
 }
 
 div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<h4 id="HTML_6">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
-</pre>
+```html
+<div class="linear-gradient"></div>
+```
 
-<h4 id="Résultat_6">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Arrêts_de_couleur",120,120)}}</p>
+{{EmbedLiveSample("Arrêts_de_couleur",120,120)}}
 
-<p>Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.</p>
+Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.
 
-<h3 id="Utiliser_des_indications_de_couleurs">Utiliser des indications de couleurs</h3>
+### Utiliser des indications de couleurs
 
-<p>Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe.</p>
+Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe.
 
-<h4 id="CSS_7">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width:120px;
   height: 120px;
   float: left;
@@ -190,25 +212,28 @@ div {
 
 .simple-linear {
   background: linear-gradient(blue, pink);
-}</pre>
+}
+```
 
-<h4 id="HTML_7">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="color-hint"&gt;&lt;/div&gt;
-&lt;div class="simple-linear"&gt;&lt;/div&gt;
-</pre>
+```html
+<div class="color-hint"></div>
+<div class="simple-linear"></div>
+```
 
-<h4 id="Résultat_7">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}}</p>
+{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}}
 
-<h3 id="Transparence_et_dégradés">Transparence et dégradés</h3>
+### Transparence et dégradés
 
-<p>Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :</p>
+Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :
 
-<h4 id="CSS_8">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.linear-gradient {
+```css
+.linear-gradient {
   background: linear-gradient(to right, transparent, mistyrose),
     url("https://mdn.mozillademos.org/files/15525/critters.png");
 }
@@ -216,52 +241,63 @@ div {
 div {
   width: 300px;
   height: 150px;
-}</pre>
+}
+```
 
-<h4 id="HTML_8">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
-</pre>
+```html
+<div class="linear-gradient"></div>
+```
 
-<h4 id="Résultat_8">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Transparence_et_dégradés",300,150)}}</p>
+{{EmbedLiveSample("Transparence_et_dégradés",300,150)}}
 
-<p>Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.</p>
+Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.
 
-<h3 id="Créer_des_lignes_franches">Créer des lignes franches</h3>
+### Créer des lignes franches
 
-<p>Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à <code>50%</code>:</p>
+Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à `50%`:
 
-<pre class="brush: html hidden">&lt;div class="striped"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="striped"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.striped {
+```css
+.striped {
    background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}}</p>
+{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}}
 
-<h3 id="Créer_des_bandes_de_couleur">Créer des bandes de couleur</h3>
+### Créer des bandes de couleur
 
-<p>Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.</p>
+Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.
 
-<pre class="brush: html hidden">&lt;div class="multiposition-stops"&gt;&lt;/div&gt;
-&lt;div class="multiposition-stop2"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="multiposition-stops"></div>
+<div class="multiposition-stop2"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
   float: left; margin-right: 10px; box-sizing: border-box;
-}</pre>
+}
+```
 
-<pre class="brush: css">.multiposition-stops {
+```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,
@@ -273,45 +309,49 @@ div {
    background: linear-gradient(to left,
       lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
 }
-</pre>
-
-<p>{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}}</p>
+```
 
-<p>Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc.</p>
+{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}}
 
-<p>Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives.</p>
+Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc.
 
-<h3 id="Contrôler_la_progression_du_dégradé">Contrôler la progression du dégradé</h3>
+Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives.
 
-<p>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.</p>
+### Contrôler la progression du dégradé
 
-<pre class="brush: html hidden">&lt;div class="colorhint-gradient"&gt;&lt;/div&gt; &lt;div class="regular-progression"&gt;&lt;/div&gt;
+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.
 
-</pre>
+```html hidden
+<div class="colorhint-gradient"></div> <div class="regular-progression"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
   float: left; margin-right: 10px; box-sizing: border-box;
-}</pre>
+}
+```
 
-<pre class="brush: css">.colorhint-gradient {
+```css
+.colorhint-gradient {
   background: linear-gradient(to top, black, 20%, cyan);
 }
 .regular-progression {
   background: linear-gradient(to top, black, cyan);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}}</p>
+{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}}
 
-<h3 id="Empilement_de_dégradés">Empilement de dégradés</h3>
+### Empilement de dégradés
 
-<p>Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.</p>
+Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.
 
-<h4 id="CSS_9">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.linear-gradient {
+```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%),
@@ -321,159 +361,187 @@ div {
 div {
   width: 100px;
   height: 100px;
-}</pre>
+}
+```
 
-<h4 id="HTML_9">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
-</pre>
+```html
+<div class="linear-gradient"></div>
+```
 
-<h4 id="Résultat_9">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Empilement_de_dégradés")}}</p>
+{{EmbedLiveSample("Empilement_de_dégradés")}}
 
-<h2 id="Dégradés_radiaux">Dégradés radiaux</h2>
+## Dégradés radiaux
 
-<p>Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.</p>
+Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.
 
-<h3 id="Un_dégradé_radial_simple">Un dégradé radial simple</h3>
+### Un dégradé radial simple
 
-<div class="note">
-<p><strong>Note :</strong> Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.</p>
-</div>
+> **Note :** Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.
 
-<p>De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.</p>
+De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.
 
-<pre class="brush: html hidden">&lt;div class="simple-radial"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="simple-radial"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.simple-radial {
+```css
+.simple-radial {
   background: radial-gradient(red, blue);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}}</p>
+{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}}
 
-<h3 id="Positionner_les_points_d’arrêt">Positionner les points d’arrêt</h3>
+### Positionner les points d’arrêt
 
-<p>À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.</p>
+À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.
 
-<pre class="brush: html hidden">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="radial-gradient"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.radial-gradient {
+```css
+.radial-gradient {
   background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}}</p>
+{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}}
 
-<h3 id="Positionner_le_centre_du_dégradé">Positionner le centre du dégradé</h3>
+### Positionner le centre du dégradé
 
-<p>La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.</p>
+La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.
 
-<pre class="brush: html hidden">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="radial-gradient"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 240px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.radial-gradient {
+```css
+.radial-gradient {
   background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}</p>
+{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}
 
-<h3 id="Dimensionner_les_dégradés_radiaux">Dimensionner les dégradés radiaux</h3>
+### Dimensionner les dégradés radiaux
 
-<p>À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial.</p>
+À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial.
 
-<h4 id="Utiliser_closest-side_pour_les_ellipses">Utiliser <code>closest-side</code> pour les ellipses</h4>
+#### Utiliser `closest-side` pour les ellipses
 
-<p>Dans l'exemple qui suit, on utilise la valeur <code>closest-side</code> pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.</p>
+Dans l'exemple qui suit, on utilise la valeur `closest-side` pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.
 
-<pre class="brush: html hidden">&lt;div class="radial-ellipse-side"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="radial-ellipse-side"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 240px;
   height: 100px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.radial-ellipse-side {
+```css
+.radial-ellipse-side {
   background: radial-gradient(ellipse closest-side,
       red, yellow 10%, #1e90ff 50%, beige);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}</p>
+{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}
 
-<h4 id="Utiliser_farthest-corner_pour_les_ellipses">Utiliser <code>farthest-corner</code> pour les ellipses</h4>
+#### Utiliser `farthest-corner` pour les ellipses
 
-<p>Cet exemple ressemble fortement au précédent mais on utilise ici <code>farthest-corner</code> qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.</p>
+Cet exemple ressemble fortement au précédent mais on utilise ici `farthest-corner` qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.
 
-<pre class="brush: html hidden">&lt;div class="radial-ellipse-far"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="radial-ellipse-far"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 240px;
   height: 100px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.radial-ellipse-far {
+```css
+.radial-ellipse-far {
   background: radial-gradient(ellipse farthest-corner,
       red, yellow 10%, #1e90ff 50%, beige);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}}</p>
+{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}}
 
-<h4 id="Utiliser_closest-side_pour_les_cercles">Utiliser <code>closest-side</code> pour les cercles</h4>
+#### Utiliser `closest-side` pour les cercles
 
-<p>Pour cet exemple, on utilise <code>closest-side</code> qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.</p>
+Pour cet exemple, on utilise `closest-side` qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.
 
-<pre class="brush: html hidden">&lt;div class="radial-circle-close"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="radial-circle-close"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 240px;
   height: 120px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.radial-circle-close {
+```css
+.radial-circle-close {
   background: radial-gradient(circle closest-side,
       red, yellow 10%, #1e90ff 50%, beige);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}}</p>
+{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}}
 
-<h3 id="Empiler_des_dégradés_radiaux">Empiler des dégradés radiaux</h3>
+### Empiler des dégradés radiaux
 
-<p>À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.</p>
+À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.
 
-<pre class="brush: html hidden">&lt;div class="stacked-radial"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="stacked-radial"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 200px;
   height: 200px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.stacked-radial {
+```css
+.stacked-radial {
   background:
       radial-gradient(circle at 50% 0,
         rgba(255,0,0,.5),
@@ -486,115 +554,129 @@ div {
         rgba(0,255,0,0) 70.71%) beige;
   border-radius: 50%;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}}</p>
+{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}}
 
-<h2 id="Dégradés_coniques">Dégradés coniques</h2>
+## Dégradés coniques
 
-<p>La fonction <strong><code>conic-gradient()</code></strong> permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des éventails de couleurs.</p>
+La fonction **`conic-gradient()`** permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des éventails de couleurs.
 
-<p>La syntaxe de <code>conic-gradient()</code> est semblable à celle de <code>radial-gradient()</code> mais les arrêts de couleur seront placés le long d'un arc plutôt que le long de la ligne émise depuis le centre. Les arrêts de couleur seront exprimés en pourcentages ou en degrés, ils ne pourront pas être exprimés sous forme de longueurs absolues.</p>
+La syntaxe de `conic-gradient()` est semblable à celle de `radial-gradient()` mais les arrêts de couleur seront placés le long d'un arc plutôt que le long de la ligne émise depuis le centre. Les arrêts de couleur seront exprimés en pourcentages ou en degrés, ils ne pourront pas être exprimés sous forme de longueurs absolues.
 
-<p>Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui progresse vers l'extérieur dans toutes les directions. Un dégradé conique verra la transition progresser le long de l'arc autour du cercle, dans le sens horaire. À l'instar des dégradés radiaux, il est possible de positionner le centre du dégradé et à l'instar des dégradés linéaires, on peut modifier l'angle du dégradé.</p>
+Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui progresse vers l'extérieur dans toutes les directions. Un dégradé conique verra la transition progresser le long de l'arc autour du cercle, dans le sens horaire. À l'instar des dégradés radiaux, il est possible de positionner le centre du dégradé et à l'instar des dégradés linéaires, on peut modifier l'angle du dégradé.
 
-<div>
-<h3 id="Un_dégradé_conique_simple">Un dégradé conique simple</h3>
+### Un dégradé conique simple
 
-<p>Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :</p>
+Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :
 
-<pre class="brush: html hidden">&lt;div class="simple-conic"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="simple-conic"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.simple-conic {
+```css
+.simple-conic {
   background: conic-gradient(red, blue);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}}</p>
-</div>
+{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}}
 
-<div>
-<h3 id="Positionner_le_centre">Positionner le centre</h3>
+### Positionner le centre
 
-<p>À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé <code>at</code>.</p>
+À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé `at`.
 
-<pre class="brush: html hidden">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="conic-gradient"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.conic-gradient {
+```css
+.conic-gradient {
   background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Positionner_le_centre', 120, 120)}}</p>
-</div>
+{{EmbedLiveSample('Positionner_le_centre', 120, 120)}}
 
-<div>
-<h3 id="Modifier_l’angle">Modifier l’angle</h3>
+### Modifier l’angle
 
-<pre class="brush: html hidden">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="conic-gradient"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.conic-gradient {
+```css
+.conic-gradient {
   background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("Modifier_l’angle", 120, 120)}}</p>
-</div>
+{{EmbedLiveSample("Modifier_l’angle", 120, 120)}}
 
-<h2 id="Répéter_des_dégradés">Répéter des dégradés</h2>
+## Répéter des dégradés
 
-<p>Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité.</p>
+Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité.
 
-<p>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%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition.</p>
+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%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition.
 
-<h3 id="Répéter_un_dégradé_linéaire">Répéter un dégradé linéaire</h3>
+### Répéter un dégradé linéaire
 
-<p>Dans cet exemple, on utilise la fonction {{cssxref("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.</p>
+Dans cet exemple, on utilise la fonction {{cssxref("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.
 
-<pre class="brush: html hidden">&lt;div class="repeating-linear"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="repeating-linear"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.repeating-linear {
+```css
+.repeating-linear {
   background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}}</p>
+{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}}
 
-<h3 id="Répéter_plusieurs_dégradés_linéaires">Répéter plusieurs dégradés linéaires</h3>
+### Répéter plusieurs dégradés linéaires
 
-<pre class="brush: html hidden">&lt;div class="multi-repeating-linear"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="multi-repeating-linear"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 600px;
   height: 400px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.multi-repeating-linear {
+```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,
@@ -610,20 +692,25 @@ div {
         yellow 150px, green 200px, blue 250px,
         indigo 300px, violet 350px, red 370px);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}}</p>
+{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}}
 
-<h3 id="Créer_un_tartan">Créer un tartan</h3>
+### Créer un tartan
 
-<pre class="brush: html hidden">&lt;div class="plaid-gradient"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div class="plaid-gradient"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 200px;
   height: 200px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.plaid-gradient {
+```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,
@@ -642,40 +729,48 @@ div {
       repeating-linear-gradient(45deg, transparent, transparent 5px,
         rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Créer_un_tartan', 200, 200)}}</p>
+{{EmbedLiveSample('Créer_un_tartan', 200, 200)}}
 
-<h3 id="Répéter_des_dégradés_radiaux">Répéter des dégradés radiaux</h3>
+### Répéter des dégradés radiaux
 
-<p>Ici, on utilise la fonction {{cssxref("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.</p>
+Ici, on utilise la fonction {{cssxref("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.
 
-<pre class="brush: html hidden">&lt;div class="repeating-radial"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="repeating-radial"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.repeating-radial {
+```css
+.repeating-radial {
   background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}}</p>
+{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}}
 
-<h3 id="Répéter_plusieurs_dégradés_radiaux">Répéter plusieurs dégradés radiaux</h3>
+### Répéter plusieurs dégradés radiaux
 
-<pre class="brush: html hidden">&lt;div class="multi-target"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="multi-target"></div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 250px;
   height: 150px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.multi-target {
+```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,
@@ -685,28 +780,23 @@ div {
         rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
   background-size: 200px 200px, 150px 150px;
 }
-</pre>
-
-<p>{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les fonctions de manipulation des dégradés
-  <ul>
-   <li>{{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
-  </ul>
- </li>
- <li>Les types de donnée CSS relatifs aux dégradés
-  <ul>
-   <li>{{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}</li>
-  </ul>
- </li>
- <li>Certaines propriétés CSS qui permettent d'utiliser des dégradés
-  <ul>
-   <li>{{cssxref("background")}}, {{cssxref("background-image")}}</li>
-  </ul>
- </li>
- <li><a href="https://lea.verou.me/css3patterns/">Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou</a></li>
- <li><a href="https://cssgenerator.org/gradient-css-generator.html">Un générateur de dégradé CSS</a></li>
-</ul>
+```
+
+{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}}
+
+## Voir aussi
+
+- Les fonctions de manipulation des dégradés
+
+  - {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}
+
+- Les types de donnée CSS relatifs aux dégradés
+
+  - {{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}
+
+- Certaines propriétés CSS qui permettent d'utiliser des dégradés
+
+  - {{cssxref("background")}}, {{cssxref("background-image")}}
+
+- [Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou](https://lea.verou.me/css3patterns/)
+- [Un générateur de dégradé CSS](https://cssgenerator.org/gradient-css-generator.html)
diff --git a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md
index 019656613c..80180ce972 100644
--- a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md
+++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md
@@ -8,99 +8,102 @@ tags:
 translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
 original_slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La modification la plus fréquemment apportée sur une liste concerne la distance d'indentation (autrement dit, la distance de laquelle les éléments sont décalés vers la droite). Ce point peut être source de frustration car les navigateurs se comportent différemment à ce sujet. Ainsi, si on déclare une liste sans marge à gauche, elles sont déplacées Internet Explorer mais restent obstinément à la même place dans les navigateurs Gecko.</p>
+La modification la plus fréquemment apportée sur une liste concerne la distance d'indentation (autrement dit, la distance de laquelle les éléments sont décalés vers la droite). Ce point peut être source de frustration car les navigateurs se comportent différemment à ce sujet. Ainsi, si on déclare une liste sans marge à gauche, elles sont déplacées Internet Explorer mais restent obstinément à la même place dans les navigateurs Gecko.
 
-<p>Pour comprendre pourquoi cela se produit ainsi, et surtout afin d'éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.</p>
+Pour comprendre pourquoi cela se produit ainsi, et surtout afin d'éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.
 
-<h2 id="Construire_une_liste">Construire une liste</h2>
+## Construire une liste
 
-<p>Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.</p>
+Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.
 
-<p><img alt="" src="consistent-list-indentation-figure1.gif"></p>
+![](consistent-list-indentation-figure1.gif)
 
-<p>La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (<em>padding</em>) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :</p>
+La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (_padding_) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :
 
-<p><img alt="" src="consistent-list-indentation-figure2.gif"></p>
+![](consistent-list-indentation-figure2.gif)
 
-<p>À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon <a href="/fr/docs/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le modèle de boîtes CSS</a>, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (<em>padding</em>). On obtient donc ce résultat :</p>
+À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon [le modèle de boîtes CSS](/fr/docs/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte), les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (_padding_). On obtient donc ce résultat :
 
-<p><img alt="" src="consistent-list-indentation-figure3.gif"></p>
+![](consistent-list-indentation-figure3.gif)
 
-<p>Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément <code>ul</code>. Puisqu'il n'a pas de remplissage (<em>padding</em>), cette limite épouse étroitement celles des trois éléments de la liste.</p>
+Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément `ul`. Puisqu'il n'a pas de remplissage (_padding_), cette limite épouse étroitement celles des trois éléments de la liste.
 
-<p>On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :</p>
+On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :
 
-<p><img alt="" src="consistent-list-indentation-figure4.gif"></p>
+![](consistent-list-indentation-figure4.gif)
 
-<p>Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément <code>ul</code>, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments <code>li</code>. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque <code>li</code>.</p>
+Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément `ul`, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments `li`. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque `li`.
 
-<p>C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément <code>li</code>, dès lors que la propriété {{cssxref("list-style-position")}} vaut <code>outside</code>. Si cette valeur est changée en <code>inside</code>, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments <code>li</code>, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci.</p>
+C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément `li`, dès lors que la propriété {{cssxref("list-style-position")}} vaut `outside`. Si cette valeur est changée en `inside`, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments `li`, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci.
 
-<h3 id="Obtenir_une_double_indentation">Obtenir une double indentation</h3>
+### Obtenir une double indentation
 
-<p>Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles :</p>
+Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles :
 
-<pre class="brush: css">ul, li {
+```css
+ul, li {
   margin-left: 0;
   padding-left: 0;
-}</pre>
+}
+```
 
-<p>Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune indentation apparente, et nos marqueurs courront le risque d'être rejetés au-delà de la limite gauche de la fenêtre du navigateur.</p>
+Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune indentation apparente, et nos marqueurs courront le risque d'être rejetés au-delà de la limite gauche de la fenêtre du navigateur.
 
-<p>Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes :</p>
+Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes :
 
-<ol>
- <li>Doter chaque élément <code>li</code> d'une marge gauche ;</li>
- <li>Doter chaque élément <code>ul</code> d'une marge gauche ;</li>
- <li>Doter chaque élément <code>ul</code> d'un padding gauche quelconque.</li>
-</ol>
+1.  Doter chaque élément `li` d'une marge gauche ;
+2.  Doter chaque élément `ul` d'une marge gauche ;
+3.  Doter chaque élément `ul` d'un padding gauche quelconque.
 
-<p>Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci.</p>
+Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci.
 
-<p>Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément <code>ul</code>. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément <code>ul</code>, nous obtenons le résultat qui suit :</p>
+Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément `ul`. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément `ul`, nous obtenons le résultat qui suit :
 
-<p><img alt="" src="consistent-list-indentation-figure5.gif"></p>
+![](consistent-list-indentation-figure5.gif)
 
-<p>De son côté, Gecko applique un <em>padding</em> gauche de 40 pixels à cet élément <code>ul</code>. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :</p>
+De son côté, Gecko applique un _padding_ gauche de 40 pixels à cet élément `ul`. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :
 
-<p><br>
- <img alt="" src="consistent-list-indentation-figure6.gif"></p>
+![](consistent-list-indentation-figure6.gif)
 
-<p>Comme nous pouvons le voir, les marqueurs restent attachés aux éléments <code>li</code>, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément <code>ul</code> est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément <code>ul</code></p>
+Comme nous pouvons le voir, les marqueurs restent attachés aux éléments `li`, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément `ul` est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément `ul`
 
-<h2 id="Obtenir_un_rendu_homogène">Obtenir un rendu homogène</h2>
+## Obtenir un rendu homogène
 
-<p>Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier <em>à la fois</em> la marge gauche et le <em>padding</em> gauche de l'élément <code>ul</code>. L'élément <code>li</code> peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez :</p>
+Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier _à la fois_ la marge gauche et le _padding_ gauche de l'élément `ul`. L'élément `li` peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez :
 
-<pre class="brush: css">ul {
+```css
+ul {
   margin-left: 0;
   padding-left: 40px;
-}</pre>
+}
+```
 
-<p>Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors :</p>
+Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors :
 
-<pre class="brush: css">ul {
+```css
+ul {
   margin-left: 40px;
   padding-left: 0;
-}</pre>
+}
+```
 
-<p>Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à <code>1.25em</code> si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un <em>padding</em> et une marge nuls :</p>
+Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à `1.25em` si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un _padding_ et une marge nuls :
 
-<pre class="brush: css">ul {
+```css
+ul {
   margin-left: 0;
   padding-left: 0;
-}</pre>
+}
+```
 
-<p>Souvenez-vous, cependant, qu'en faisant ainsi, vos puces se tiendront en dehors de votre liste et de son élément parent. Si ce parent est l'élément <code>body</code>, il y a de fortes chances qu'elles se retrouvent complètement en dehors de la fenêtre d'affichage du navigateur et qu'elles ne soient donc invisibles.</p>
+Souvenez-vous, cependant, qu'en faisant ainsi, vos puces se tiendront en dehors de votre liste et de son élément parent. Si ce parent est l'élément `body`, il y a de fortes chances qu'elles se retrouvent complètement en dehors de la fenêtre d'affichage du navigateur et qu'elles ne soient donc invisibles.
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>Au bout du compte, on voit qu'aucun des navigateurs mentionnés dans cet article n'a tort ou raison sur ce point. Ces navigateurs utilisent différents styles par défaut et c'est là que réside le seul problème. En veillant à mettre en forme à la fois la marge gauche et le <em>padding</em> gauche des listes, on peut obtenir un rendu bien plus homogène de l'indentation sur les différents navigateurs.</p>
+Au bout du compte, on voit qu'aucun des navigateurs mentionnés dans cet article n'a tort ou raison sur ce point. Ces navigateurs utilisent différents styles par défaut et c'est là que réside le seul problème. En veillant à mettre en forme à la fois la marge gauche et le _padding_ gauche des listes, on peut obtenir un rendu bien plus homogène de l'indentation sur les différents navigateurs.
 
-<h2 id="Recommandations">Recommandations</h2>
+## Recommandations
 
-<ul>
- <li>Lorsque vous modifiez l'indentation des listes, veillez à indiquer à la fois le <em>padding</em> et la marge.</li>
-</ul>
+- Lorsque vous modifiez l'indentation des listes, veillez à indiquer à la fois le _padding_ et la marge.
diff --git a/files/fr/web/css/css_lists_and_counters/index.md b/files/fr/web/css/css_lists_and_counters/index.md
index 44ea497254..15c9a7738c 100644
--- a/files/fr/web/css/css_lists_and_counters/index.md
+++ b/files/fr/web/css/css_lists_and_counters/index.md
@@ -7,50 +7,29 @@ tags:
 translation_of: Web/CSS/CSS_Lists_and_Counters
 original_slug: Web/CSS/CSS_Lists
 ---
-<div>{{CSSRef}}</div>
-
-<p><em><strong>CSS Lists </strong></em>(listes CSS) est un module CSS qui définit la façon dont les listes sont mises en forme, comment des styles peuvent être appliqués aux marqueurs.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<ul>
- <li>{{cssxref("list-style-image")}}</li>
- <li>{{cssxref("list-style-type")}}</li>
- <li>{{cssxref("list-style-position")}}</li>
- <li>{{cssxref("list-style")}}</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Indentation_homogène_des_listes">Indentation homogène des listes</a></dt>
- <dd>Explique comment obtenir une indentation homogène dans les différents navigateurs.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></dt>
- <dd>Explique comment utiliser les propriétés CSS relatives aux compteurs pour numéroter les listes.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Lists')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+{{CSSRef}}
+
+**\*CSS Lists** \*(listes CSS) est un module CSS qui définit la façon dont les listes sont mises en forme, comment des styles peuvent être appliqués aux marqueurs.
+
+## Référence
+
+### Propriétés
+
+- {{cssxref("list-style-image")}}
+- {{cssxref("list-style-type")}}
+- {{cssxref("list-style-position")}}
+- {{cssxref("list-style")}}
+
+## Guides
+
+- [Indentation homogène des listes](/fr/docs/Indentation_homogène_des_listes)
+  - : Explique comment obtenir une indentation homogène dans les différents navigateurs.
+- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS)
+  - : Explique comment utiliser les propriétés CSS relatives aux compteurs pour numéroter les listes.
+
+## Spécifications
+
+| Spécification                                        | État                             | Commentaires         |
+| ---------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Lists')}}                 | {{Spec2('CSS3 Lists')}} |                      |
+| {{SpecName('CSS2.1', 'generate.html')}} | {{Spec2('CSS2.1')}}         | Définition initiale. |
diff --git a/files/fr/web/css/css_lists_and_counters/using_css_counters/index.md b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.md
index e5eb03d473..90ad13bca7 100644
--- a/files/fr/web/css/css_lists_and_counters/using_css_counters/index.md
+++ b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.md
@@ -8,37 +8,36 @@ tags:
 translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
 original_slug: Web/CSS/CSS_Lists/Compteurs_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les <strong>compteurs CSS</strong> sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document.</p>
+Les **compteurs CSS** sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document.
 
-<p>La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions <code>counter()</code> et <code>counters()</code> dans la propriété {{cssxref("content")}}.</p>
+La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions `counter()` et `counters()` dans la propriété {{cssxref("content")}}.
 
-<h2 id="Utiliser_les_compteurs">Utiliser les compteurs</h2>
+## Utiliser les compteurs
 
-<h3 id="Manipuler_la_valeur_d'un_compteur">Manipuler la valeur d'un compteur</h3>
+### Manipuler la valeur d'un compteur
 
-<p>Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être <code>none</code>, <code>inherit</code> ou <code>initial</code>.</p>
+Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être `none`, `inherit` ou `initial`.
 
-<h3 id="Afficher_un_compteur">Afficher un compteur</h3>
+### Afficher un compteur
 
-<p>Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}.</p>
+Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}.
 
-<p>La fonction <code>counter()</code> prend deux formes : <code>counter(nom)</code> ou <code>counter(nom, style)</code>. Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est <code>decimal</code>).</p>
+La fonction `counter()` prend deux formes : `counter(nom)` ou `counter(nom, style)`. Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est `decimal`).
 
-<p>La fonction <code>counters()</code> prend également deux formes : <code>counters(nom, chaine)</code> ou <code>counters(nom, chaine style)</code>. Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est <code>decimal</code>).</p>
+La fonction `counters()` prend également deux formes : `counters(nom, chaine)` ou `counters(nom, chaine style)`. Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est `decimal`).
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<p>Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section &lt;la valeur du compteur&gt; : ».</p>
+Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section \<la valeur du compteur> : ».
 
-<div class="note">
-<p><strong>Note :</strong> La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est <code>decimal</code>).</p>
-</div>
+> **Note :** La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est `decimal`).
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">body {
+```css
+body {
   counter-reset: section;                    /* On initialise le compteur à 0 */
 }
 
@@ -46,25 +45,28 @@ h3::before {
   counter-increment: section;                /* On incrémente le compteur section */
   content: "Section " counter(section) " : "; /* On affiche le compteur */
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h3&gt;Introduction&lt;/h3&gt;
-&lt;h3&gt;Corps&lt;/h3&gt;
-&lt;h3&gt;Conclusion&lt;/h3&gt;</pre>
+```html
+<h3>Introduction</h3>
+<h3>Corps</h3>
+<h3>Conclusion</h3>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}}</p>
+{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}}
 
-<h2 id="Imbriquer_des_compteurs">Imbriquer des compteurs</h2>
+## Imbriquer des compteurs
 
-<p>Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués.</p>
+Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués.
 
-<h3 id="CSS_2">CSS</h3>
+### CSS
 
-<pre class="brush: css">ol {
+```css
+ol {
   counter-reset: section;                /* On crée une nouvelle instance du
                                             compteur section avec chaque ol */
   list-style-type: none;
@@ -75,75 +77,58 @@ li::before {
                                             instance du compteur */
   content: counters(section,".") " ";    /* On ajoute la valeur de toutes les
                                             instances séparées par ".". */
-                                         /* Si on doit supporter &lt; IE8 il faudra
+                                         /* Si on doit supporter < IE8 il faudra
                                             faire attention à ce qu'il n'y ait
                                             aucun blanc après ',' */
 }
-</pre>
-
-<h3 id="HTML_2">HTML</h3>
-
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
-  &lt;li&gt;item               &lt;!-- 2     --&gt;
-    &lt;ol&gt;
-      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.1   --&gt;
-      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.2   --&gt;
-      &lt;li&gt;item           &lt;!-- 2.3   --&gt;
-        &lt;ol&gt;
-          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
-          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
-        &lt;/ol&gt;
-        &lt;ol&gt;
-          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
-          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
-          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
-        &lt;/ol&gt;
-      &lt;/li&gt;
-      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.4   --&gt;
-    &lt;/ol&gt;
-  &lt;/li&gt;
-  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 3     --&gt;
-  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 4     --&gt;
-&lt;/ol&gt;
-&lt;ol&gt;
-  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
-  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
-&lt;/ol&gt;</pre>
-
-<h3 id="Résultat_2">Résultat</h3>
-
-<p>{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td>
-   <td>{{Spec2("CSS3 Lists")}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("counter-reset")}}</li>
- <li>{{cssxref("counter-set")}}</li>
- <li>{{cssxref("counter-increment")}}</li>
- <li>{{cssxref("@counter-style")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}}
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}     | {{Spec2("CSS3 Lists")}} | Aucune modification. |
+| {{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}} | {{Spec2("CSS2.1")}}         | Définition initiale. |
+
+## Voir aussi
+
+- {{cssxref("counter-reset")}}
+- {{cssxref("counter-set")}}
+- {{cssxref("counter-increment")}}
+- {{cssxref("@counter-style")}}
diff --git a/files/fr/web/css/css_logical_properties/basic_concepts/index.md b/files/fr/web/css/css_logical_properties/basic_concepts/index.md
index 82079917e4..0cb1ef181d 100644
--- a/files/fr/web/css/css_logical_properties/basic_concepts/index.md
+++ b/files/fr/web/css/css_logical_properties/basic_concepts/index.md
@@ -8,69 +8,65 @@ tags:
 translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts
 original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.</p>
+La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.
 
-<h2 id="Quel_intérêt_pour_les_propriétés_logiques">Quel intérêt pour les propriétés logiques ?</h2>
+## Quel intérêt pour les propriétés logiques ?
 
-<p>Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l'écran. On pouvait alors décrire des boîtes avec une certaine largeur ({{CSSxRef("width")}}) et une certaine hauteur ({{CSSxRef("height")}}), positionner les éléments à partir du haut (<code>top</code>) et de la gauche (<code>left</code>), faire flotter les objets, créer des bordures, des marges, du remplissage (<em>padding</em>) en haut, à droite, en bas et à gauche (resp. <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, etc.). La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : <code>start</code> et <code>end</code> plutôt que <code>left</code> et <code>right</code> ou <code>top</code> et <code>bottom</code>.</p>
+Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l'écran. On pouvait alors décrire des boîtes avec une certaine largeur ({{CSSxRef("width")}}) et une certaine hauteur ({{CSSxRef("height")}}), positionner les éléments à partir du haut (`top`) et de la gauche (`left`), faire flotter les objets, créer des bordures, des marges, du remplissage (_padding_) en haut, à droite, en bas et à gauche (resp. `top`, `right`, `bottom`, `left`, etc.). La spécification [sur les propriétés et valeurs logiques](https://drafts.csswg.org/css-logical/) définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : `start` et `end` plutôt que `left` et `right` ou `top` et `bottom`.
 
-<p>Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : <code>justify-self: start</code> aligne l'élément au début de l'axe en ligne et <code>align-self: start</code> aligne l'élément au début de l'axe de bloc.</p>
+Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : `justify-self: start` aligne l'élément au début de l'axe en ligne et `align-self: start` aligne l'élément au début de l'axe de bloc.
 
-<p><img alt="A grid in a horizontal writing mode" src="grid-horizontal-width-sm.png"></p>
+![A grid in a horizontal writing mode](grid-horizontal-width-sm.png)
 
-<p>Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur <code>vertical-rl</code>, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.</p>
+Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur `vertical-rl`, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.
 
-<p><img alt="A grid in vertical writing mode." src="grid-vertical-width-sm.png"></p>
+![A grid in vertical writing mode.](grid-vertical-width-sm.png)
 
-<p>Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que <code>width</code>, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.</p>
+Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que `width`, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.
 
-<p><img alt="A grid layout in vertical writing mode" src="grid-vertical-inline-size-small.png"></p>
+![A grid layout in vertical writing mode](grid-vertical-inline-size-small.png)
 
-<p>Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété <code>writing-mode</code> pour la passer de <code>vertical-rl</code> à <code>horizontal-tb</code> sur le sélecteur <code>.box</code> afin d'observer la façon dont les différentes propriétés modifient la disposition.</p>
+Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété `writing-mode` pour la passer de `vertical-rl` à `horizontal-tb` sur le sélecteur `.box` afin d'observer la façon dont les différentes propriétés modifient la disposition.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}
 
-<p>Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.</p>
+Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.
 
-<h2 id="Axe_de_bloc_et_axe_en_ligne">Axe de bloc et axe en ligne</h2>
+## Axe de bloc et axe en ligne
 
-<p>Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de <code>block</code> et <code>inline</code> plutôt que <code>right</code> et <code>left</code>/<code>top</code> et <code>bottom</code> pour l'alignement des objets.</p>
+Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de `block` et `inline` plutôt que `right` et `left`/`top` et `bottom` pour l'alignement des objets.
 
-<p>La dimension en ligne (<em>inline</em>) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.</p>
+La dimension en ligne (_inline_) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.
 
-<p>La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.</p>
+La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.
 
-<p>Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :</p>
+Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :
 
-<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="mdn-horizontal.png"></p>
+![diagram showing the inline axis running horizontally, block axis vertically.](mdn-horizontal.png)
 
-<p>Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :</p>
+Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :
 
-<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="mdn-vertical.png"></p>
+![Diagram showing the block axis running horizontally the inline axis vertically.](mdn-vertical.png)
 
-<h2 id="Prise_en_charge_des_navigateurs">Prise en charge des navigateurs</h2>
+## Prise en charge des navigateurs
 
-<p>Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#reference">de référence pour ces propriétés sur MDN</a>, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).</p>
+Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages [de référence pour ces propriétés sur MDN](/en-US/docs/Web/CSS/CSS_Logical_Properties#reference), seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).
 
-<p>On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.</p>
+On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.
 
-<div class="note">
-<p><strong>Note :</strong> Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom <code>margin</code> pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'<em>issue</em> GitHub <a href="https://github.com/w3c/csswg-drafts/issues/1282">n°1282</a>.</p>
-</div>
+> **Note :** Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom `margin` pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'_issue_ GitHub [n°1282](https://github.com/w3c/csswg-drafts/issues/1282).
 
-<h3 id="Tester_la_compatibilité_des_navigateurs">Tester la compatibilité des navigateurs</h3>
+### Tester la compatibilité des navigateurs
 
-<p>Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (<code>@supports</code>). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir <code>width</code> avec <code>auto</code> et <code>inline-size</code> avec la valeur initialement utilisée pour <code>width</code>.</p>
+Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (`@supports`). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir `width` avec `auto` et `inline-size` avec la valeur initialement utilisée pour `width`.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">L'alignement des boîtes pour une disposition en grille</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes pour une disposition flexible</a></li>
- <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Comprendre les propriétés et les valeurs logiques</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Les modes d'écriture</a></li>
-</ul>
+- [L'alignement des boîtes pour une disposition en grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+- [L'alignement des boîtes pour une disposition flexible](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)
+- [Comprendre les propriétés et les valeurs logiques](https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/)
+- [Les modes d'écriture](/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes)
diff --git a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.md b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.md
index e7105dad8a..d32d4de0f2 100644
--- a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.md
+++ b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.md
@@ -8,137 +8,76 @@ tags:
 translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
 original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement
 ---
-<div>{{CSSRef}}</div>
-
-<p><a href="https://drafts.csswg.org/css-logical/">La spécification sur les propriétés et valeurs logiques</a> définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une <a href="/fr/docs/Web/CSS/CSS_Positioning">disposition positionnée</a>. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.</p>
-
-<h2 id="Correspondance_entre_les_propriétés_et_les_valeurs">Correspondance entre les propriétés et les valeurs</h2>
-
-<p>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.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété ou valeur logique</th>
-   <th scope="col">Propriété ou valeur physique</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{cssxref("float")}}<code>: inline-start</code></td>
-   <td>{{cssxref("float")}}<code>: left</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("float")}}<code>: inline-end</code></td>
-   <td>{{cssxref("float")}}<code>: right</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("clear")}}<code>: inline-start</code></td>
-   <td>{{cssxref("clear")}}<code>: left</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("clear")}}<code>: inline-end</code></td>
-   <td>{{cssxref("clear")}}<code>: right</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset-inline-start")}}</td>
-   <td>{{cssxref("left")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset-inline-end")}}</td>
-   <td>{{cssxref("right")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset-block-start")}}</td>
-   <td>{{cssxref("top")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset-block-end")}}</td>
-   <td>{{cssxref("bottom")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("text-align")}}<code>: start</code></td>
-   <td>{{cssxref("text-align")}}<code>: left</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("text-align")}}<code>: end</code></td>
-   <td>{{cssxref("text-align")}}<code>: right</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>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")}}.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété logique</th>
-   <th scope="col">Objectif</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{cssxref("inset-inline")}}</td>
-   <td>Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset-block")}}</td>
-   <td>Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("inset")}}</td>
-   <td>Cette propriété définit les valeurs des quatre décalages.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple_d'un_flottement_et_d'un_dégagement">Exemple d'un flottement et d'un dégagement</h2>
-
-<p>Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont <code>left</code>, <code>right</code> et <code>both</code>. Les valeurs logiques définies par la spécification sont <code>inline-start</code> et <code>inline-end</code> et qui peuvent correspondre à <code>left</code> et <code>right</code> selon le mode d'écriture.</p>
-
-<p>Dans l'exemple ci-après, on a deux boîtes : la première flotte avec <code>float: left</code> et la deuxième avec <code>float: inline-start</code>. Si on modifie la propriété <code>writing-mode</code> pour la passer en <code>vertical-rl</code> ou si on modifie <code>direction</code> en <code>rtl</code>, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec <code>inline-start</code> suit la direction et le mode d'écriture.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p>
-
-<h2 id="Exemple_des_propriétés_inset_pour_les_dispositions_positionnées">Exemple des propriétés <code>inset</code> pour les dispositions positionnées</h2>
-
-<p>Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.</p>
-
-<p>Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.</p>
-
-<p>De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :</p>
-
-<ul>
- <li>{{cssxref("inset-block-start")}}</li>
- <li>{{cssxref("inset-block-end")}}</li>
- <li>{{cssxref("inset-inline-start")}}</li>
- <li>{{cssxref("inset-inline-end")}}.</li>
-</ul>
-
-<p>Dans l'exemple qui suit, on utilise les propriétés <code>inset-block-start</code> et <code>inset-inline-end</code> afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a <code>position: relative</code>. En modifiant la propriété <code>writing-mode</code> afin d'utiliser la valeur <code>vertical-rl</code> ou en ajoutant <code>direction: rtl</code>, on pourra voir comment la boîte relative reste dans la direction du texte.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p>
-
-<h2 id="Nouvelles_propriétés_raccourcies">Nouvelles propriétés raccourcies</h2>
-
-<p>Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.</p>
-
-<ul>
- <li>{{cssxref("inset")}} — elle permet de définir les quatre décalages avec une correspondance physique.</li>
- <li>{{cssxref("inset-inline")}} — elle permet de définir les décalages sur l'axe en ligne</li>
- <li>{{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc</li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.</p>
-</div>
-
-<h2 id="Exemple_de_valeurs_logiques_pour_text-align">Exemple de valeurs logiques pour <code>text-align</code></h2>
-
-<p>La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser <code>left</code> et <code>right</code>, on pourra utiliser <code>start</code> et <code>end</code>. Dans l'exemple suivant, on définit <code>text-align: right</code> pour le premier bloc et <code>text-align: end</code> pour le second.</p>
-
-<p>Si on modifie la valeur de <code>direction</code> pour la passer à <code>rtl</code>, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p>
-
-<p>Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (<code>start</code> et <code>end</code>) plutôt que des alignements basés sur les directions physiques.</p>
+{{CSSRef}}
+
+[La spécification sur les propriétés et valeurs logiques](https://drafts.csswg.org/css-logical/) définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une [disposition positionnée](/fr/docs/Web/CSS/CSS_Positioning). Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.
+
+## Correspondance entre les propriétés et les valeurs
+
+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` |
+
+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                                                                                           |
+| ------------------------------------ | -------------------------------------------------------------------------------------------------- |
+| {{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.                                          |
+
+## Exemple d'un flottement et d'un dégagement
+
+Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont `left`, `right` et `both`. Les valeurs logiques définies par la spécification sont `inline-start` et `inline-end` et qui peuvent correspondre à `left` et `right` selon le mode d'écriture.
+
+Dans l'exemple ci-après, on a deux boîtes : la première flotte avec `float: left` et la deuxième avec `float: inline-start`. Si on modifie la propriété `writing-mode` pour la passer en `vertical-rl` ou si on modifie `direction` en `rtl`, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec `inline-start` suit la direction et le mode d'écriture.
+
+{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}
+
+## Exemple des propriétés `inset` pour les dispositions positionnées
+
+Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.
+
+Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.
+
+De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :
+
+- {{cssxref("inset-block-start")}}
+- {{cssxref("inset-block-end")}}
+- {{cssxref("inset-inline-start")}}
+- {{cssxref("inset-inline-end")}}.
+
+Dans l'exemple qui suit, on utilise les propriétés `inset-block-start` et `inset-inline-end` afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a `position: relative`. En modifiant la propriété `writing-mode` afin d'utiliser la valeur `vertical-rl` ou en ajoutant `direction: rtl`, on pourra voir comment la boîte relative reste dans la direction du texte.
+
+{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}
+
+## Nouvelles propriétés raccourcies
+
+Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.
+
+- {{cssxref("inset")}} — elle permet de définir les quatre décalages avec une correspondance physique.
+- {{cssxref("inset-inline")}} — elle permet de définir les décalages sur l'axe en ligne
+- {{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc
+
+> **Note :** Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.
+
+## Exemple de valeurs logiques pour `text-align`
+
+La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser `left` et `right`, on pourra utiliser `start` et `end`. Dans l'exemple suivant, on définit `text-align: right` pour le premier bloc et `text-align: end` pour le second.
+
+Si on modifie la valeur de `direction` pour la passer à `rtl`, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.
+
+{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}
+
+Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (`start` et `end`) plutôt que des alignements basés sur les directions physiques.
diff --git a/files/fr/web/css/css_logical_properties/index.md b/files/fr/web/css/css_logical_properties/index.md
index 7d671c63ed..fbbeecd7f9 100644
--- a/files/fr/web/css/css_logical_properties/index.md
+++ b/files/fr/web/css/css_logical_properties/index.md
@@ -9,156 +9,127 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Logical_Properties
 ---
-<div>{{CSSRef}}</div>
-
-<p><em><strong>CSS Logical Properties</strong></em> (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : <em>block</em> et <em>inline</em>, perpendiculaires, qui dépendent du sens de l'orientation du document.</p>
-
-<p>Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.</p>
-
-<h3 id="Dimension_de_bloc_ou_de_ligne">Dimension de bloc ou de ligne</h3>
-
-<p>Les propriétés et valeurs logiques utilisent les termes abstraits <em>bloc</em> (<em>block</em>) ou ligne (<em>inline</em>) afin de décrire leur direction. La signification physique de ces termes dépend du <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">mode d'écriture</a>.</p>
-
-<dl>
- <dt>Dimension de bloc</dt>
- <dd>C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).</dd>
- <dt>Dimension en ligne</dt>
- <dd>C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).</dd>
-</dl>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés_relatives_au_dimensionnement">Propriétés relatives au dimensionnement</h3>
-
-<ul>
- <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h3 id="Propriétés_relatives_aux_marges_bordures_et_remplissages">Propriétés relatives aux marges, bordures et remplissages</h3>
-
-<ul>
- <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-color")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("border-style")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("border-width")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("margin")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding")}} (mot-clé <code>logical</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h3 id="Propriétés_relatives_aux_flottements_et_au_positionnement">Propriétés relatives aux flottements et au positionnement</h3>
-
-<ul>
- <li>{{CSSxRef("clear")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("float")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h3 id="Autres_propriétés">Autres propriétés</h3>
-
-<ul>
- <li>{{CSSxRef("caption-side")}} (mots-clés <code>inline-end</code> {{Experimental_Inline}} et <code>inline-start</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("overflow-block")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("overflow-inline")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés <code>block</code> {{Experimental_Inline}} et <code>inline</code> {{Experimental_Inline}})</li>
- <li>{{CSSxRef("text-align")}} (mots-clés <code>end</code> {{Experimental_Inline}} et <code>start</code> {{Experimental_Inline}})</li>
-</ul>
-
-<h3 id="Propriétés_dépréciées">Propriétés dépréciées</h3>
-
-<ul>
- <li>{{CSSxRef("inset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</li>
- <li>{{CSSxRef("inset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</li>
- <li>{{CSSxRef("inset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</li>
- <li>{{CSSxRef("inset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">Concepts de base pour les propriétés logiques et les valeurs logiques</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Sizing">Les propriétés logiques utiles au dimensionnement</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding">Les propriétés logiques utiles aux marges, bordures et remplissage (<em>padding</em>)</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning">Les propriétés logiques utiles aux flottements et au positionnement</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_générale">Compatibilité générale</h2>
-
-<p>De façon générale :</p>
-
-<ul>
- <li>Firefox prend en charge les propriétés logiques lorsqu'il existe une correspondance directe avec les propriétés physiques.</li>
- <li>Idem pour Chrome à partir de la version 69.</li>
- <li>Edge ne prend actuellement (décembre 2018) pas en charge ces propriétés.</li>
- <li>Firefox 66 introduit la prise en charge de deux valeurs raccourcies qui sont également derrière un <em>flag</em> pour Chrome.</li>
-</ul>
-
-<p>Pour des informations précises sur chaque propriété, se référer au tableau de compatibilité des pages des propriétés.</p>
+{{CSSRef}}
+
+**_CSS Logical Properties_** (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : _block_ et _inline_, perpendiculaires, qui dépendent du sens de l'orientation du document.
+
+Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec CSS 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.
+
+### Dimension de bloc ou de ligne
+
+Les propriétés et valeurs logiques utilisent les termes abstraits _bloc_ (_block_) ou ligne (_inline_) afin de décrire leur direction. La signification physique de ces termes dépend du [mode d'écriture](/fr/docs/Web/CSS/CSS_Writing_Modes).
+
+- Dimension de bloc
+  - : C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).
+- Dimension en ligne
+  - : C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).
+
+## Référence
+
+### Propriétés relatives au dimensionnement
+
+- {{CSSxRef("block-size")}} {{Experimental_Inline}}
+- {{CSSxRef("inline-size")}} {{Experimental_Inline}}
+- {{CSSxRef("max-block-size")}} {{Experimental_Inline}}
+- {{CSSxRef("max-inline-size")}} {{Experimental_Inline}}
+- {{CSSxRef("min-block-size")}} {{Experimental_Inline}}
+- {{CSSxRef("min-inline-size")}} {{Experimental_Inline}}
+
+### Propriétés relatives aux marges, bordures et remplissages
+
+- {{CSSxRef("border-block")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-end")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-start")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-block-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-color")}} (mot-clé `logical` {{Experimental_Inline}})
+- {{CSSxRef("border-inline")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-end")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-start")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-style")}} {{Experimental_Inline}}
+- {{CSSxRef("border-inline-width")}} {{Experimental_Inline}}
+- {{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}
+- {{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}
+- {{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}
+- {{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}
+- {{CSSxRef("border-style")}} (mot-clé `logical` {{Experimental_Inline}})
+- {{CSSxRef("border-width")}} (mot-clé `logical` {{Experimental_Inline}})
+- {{CSSxRef("margin")}} (mot-clé `logical` {{Experimental_Inline}})
+- {{CSSxRef("margin-block")}} {{Experimental_Inline}}
+- {{CSSxRef("margin-block-end")}} {{Experimental_Inline}}
+- {{CSSxRef("margin-block-start")}} {{Experimental_Inline}}
+- {{CSSxRef("margin-inline")}} {{Experimental_Inline}}
+- {{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}
+- {{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}
+- {{CSSxRef("padding")}} (mot-clé `logical` {{Experimental_Inline}})
+- {{CSSxRef("padding-block")}} {{Experimental_Inline}}
+- {{CSSxRef("padding-block-end")}} {{Experimental_Inline}}
+- {{CSSxRef("padding-block-start")}} {{Experimental_Inline}}
+- {{CSSxRef("padding-inline")}} {{Experimental_Inline}}
+- {{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}
+- {{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}
+
+### Propriétés relatives aux flottements et au positionnement
+
+- {{CSSxRef("clear")}} (mots-clés `inline-end` {{Experimental_Inline}} et `inline-start` {{Experimental_Inline}})
+- {{CSSxRef("float")}} (mots-clés `inline-end` {{Experimental_Inline}} et `inline-start` {{Experimental_Inline}})
+- {{CSSxRef("inset")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-block")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-block-end")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-block-start")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-inline")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}
+- {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}
+
+### Autres propriétés
+
+- {{CSSxRef("caption-side")}} (mots-clés `inline-end` {{Experimental_Inline}} et `inline-start` {{Experimental_Inline}})
+- {{CSSxRef("overflow-block")}} {{Experimental_Inline}}
+- {{CSSxRef("overflow-inline")}} {{Experimental_Inline}}
+- {{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés `block` {{Experimental_Inline}} et `inline` {{Experimental_Inline}})
+- {{CSSxRef("text-align")}} (mots-clés `end` {{Experimental_Inline}} et `start` {{Experimental_Inline}})
+
+### Propriétés dépréciées
+
+- {{CSSxRef("inset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})
+- {{CSSxRef("inset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})
+- {{CSSxRef("inset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})
+- {{CSSxRef("inset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})
+
+## Guides
+
+- [Concepts de base pour les propriétés logiques et les valeurs logiques](/fr/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts)
+- [Les propriétés logiques utiles au dimensionnement](/fr/docs/Web/CSS/CSS_Logical_Properties/Sizing)
+- [Les propriétés logiques utiles aux marges, bordures et remplissage (_padding_)](/fr/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding)
+- [Les propriétés logiques utiles aux flottements et au positionnement](/fr/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning)
+
+## Spécifications
+
+| Spécification                                        | État                                             | Commentaires         |
+| ---------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+## Compatibilité générale
+
+De façon générale :
+
+- Firefox prend en charge les propriétés logiques lorsqu'il existe une correspondance directe avec les propriétés physiques.
+- Idem pour Chrome à partir de la version 69.
+- Edge ne prend actuellement (décembre 2018) pas en charge ces propriétés.
+- Firefox 66 introduit la prise en charge de deux valeurs raccourcies qui sont également derrière un _flag_ pour Chrome.
+
+Pour des informations précises sur chaque propriété, se référer au tableau de compatibilité des pages des propriétés.
diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md
index cf45a45e67..b8d49e34f8 100644
--- a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md
+++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md
@@ -9,290 +9,156 @@ translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding
 original_slug: >-
   Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages
 ---
-<p>{{CSSRef}}</p>
-
-<p>La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (<em>padding</em>) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.</p>
-
-<p>Si vous avez consulté la page principale sur <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">les propriétés et valeurs logiques</a>, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.</p>
-
-<h2 id="Correspondances_pour_les_marges_les_bordures_et_les_remplissages_(padding)">Correspondances pour les marges, les bordures et les remplissages (<em>padding</em>)</h2>
-
-<p>La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est <code>horizontal-tb</code> et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.</p>
-
-<p>Si on avait utilisé un mode d'écriture <code>horizontal-tb</code> 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")}}.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété logique</th>
-   <th scope="col">Propriété physique</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{cssxref("border-block-end")}}</td>
-   <td>{{cssxref("border-bottom")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-end-color")}}</td>
-   <td>{{cssxref("border-bottom-color")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-end-style")}}</td>
-   <td>{{cssxref("border-bottom-style")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-end-width")}}</td>
-   <td>{{cssxref("border-bottom-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-start")}}</td>
-   <td>{{cssxref("border-top")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-start-color")}}</td>
-   <td>{{cssxref("border-top-color")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-start-style")}}</td>
-   <td>{{cssxref("border-top-style")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-start-width")}}</td>
-   <td>{{cssxref("border-top-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-end")}}</td>
-   <td>{{cssxref("border-right")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-end-color")}}</td>
-   <td>{{cssxref("border-right-color")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-end-style")}}</td>
-   <td>{{cssxref("border-right-style")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-end-width")}}</td>
-   <td>{{cssxref("border-right-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-start")}}</td>
-   <td>{{cssxref("border-left")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-start-color")}}</td>
-   <td>{{cssxref("border-left-color")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-start-style")}}</td>
-   <td>{{cssxref("border-left-style")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-start-width")}}</td>
-   <td>{{cssxref("border-left-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-start-start-radius")}}</td>
-   <td>{{cssxref("border-top-left-radius")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-start-end-radius")}}</td>
-   <td>{{cssxref("border-bottom-left-radius")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-end-start-radius")}}</td>
-   <td>{{cssxref("border-top-right-radius")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-end-end-radius")}}</td>
-   <td>{{cssxref("border-bottom-right-radius")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-block-end")}}</td>
-   <td>{{cssxref("margin-bottom")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-block-start")}}</td>
-   <td>{{cssxref("margin-top")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-inline-end")}}</td>
-   <td>{{cssxref("margin-right")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-inline-start")}}</td>
-   <td>{{cssxref("margin-left")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-block-end")}}</td>
-   <td>{{cssxref("padding-bottom")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-block-start")}}</td>
-   <td>{{cssxref("padding-top")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-inline-end")}}</td>
-   <td>{{cssxref("padding-right")}}</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-inline-start")}}</td>
-   <td>{{cssxref("padding-left")}}</td>
-  </tr>
- </tbody>
-</table>
-
-<p>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.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Objectif</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{cssxref("border-block")}}</td>
-   <td>Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-color")}}</td>
-   <td>Définit <code>border-color</code> pour les deux bordures sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-style")}}</td>
-   <td>Définit <code>border-style</code> pour les deux bordures sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-block-width")}}</td>
-   <td>Définit <code>border-width</code> pour les deux bordures sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline")}}</td>
-   <td>Définit <code>border-color</code>, <code>-style</code> et <code>-width</code> pour les deux bordures sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-color")}}</td>
-   <td>Définit <code>border-color</code> pour les deux bordures sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-style")}}</td>
-   <td>Définit <code>border-style</code> pour les deux bordures sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-inline-width")}}</td>
-   <td>Définit <code>border-width</code> pour les deux bordures sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-block")}}</td>
-   <td>Défnit les deux marges sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("margin-inline")}}</td>
-   <td>Défnit les deux marges sur l'axe en ligne.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-block")}}</td>
-   <td>Définit le remplissage (<em>padding</em>) sur l'axe de bloc.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("padding-inline")}}</td>
-   <td>Définit le remplissage (<em>padding</em>) sur l'axe en ligne.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples_de_marges">Exemples de marges</h2>
-
-<p>Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.</p>
-
-<p>Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.</p>
-
-<p>Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en <code>rtl</code> par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.</p>
-
-<p>Vous pouvez également modifier la propriété <code>writing-mode</code> pour la passer de <code>horizontal-tb</code> à <code>vertical-rl</code>. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}</p>
-
-<h3 id="Propriétés_raccourcies_pour_les_marges">Propriétés raccourcies pour les marges</h3>
-
-<p>Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.</p>
-
-<p>Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.</p>
-
-<pre class="brush: css">.box {
+{{CSSRef}}
+
+La spécification [sur les propriétés et valeurs logiques](https://drafts.csswg.org/css-logical/) définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (_padding_) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.
+
+Si vous avez consulté la page principale sur [les propriétés et valeurs logiques](/en-US/docs/Web/CSS/CSS_Logical_Properties), vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.
+
+## Correspondances pour les marges, les bordures et les remplissages (_padding_)
+
+La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est `horizontal-tb` et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.
+
+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")}}     |
+| {{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")}}                     |
+
+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.                                                                                                               |
+
+## Exemples de marges
+
+Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.
+
+Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.
+
+Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en `rtl` par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.
+
+Vous pouvez également modifier la propriété `writing-mode` pour la passer de `horizontal-tb` à `vertical-rl`. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.
+
+{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}
+
+### Propriétés raccourcies pour les marges
+
+Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.
+
+Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.
+
+```css
+.box {
   margin-block: 5px 10px;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Ces propriétés raccourcies, <code>margin-inline</code> et <code>margin-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
-</div>
+> **Note :** Ces propriétés raccourcies, `margin-inline` et `margin-block`, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.
 
-<h2 id="Exemples_pour_le_remplissage">Exemples pour le remplissage</h2>
+## Exemples pour le remplissage
 
-<p>Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.</p>
+Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.
 
-<p>Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture <code>horizontal-tb</code>, les deux boîtes auront la même apparence.</p>
+Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture `horizontal-tb`, les deux boîtes auront la même apparence.
 
-<p>En modifiant la propriété <code>direction</code> avec la valeur <code>rtl</code>, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.</p>
+En modifiant la propriété `direction` avec la valeur `rtl`, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.
 
-<p>Vous pouvez aussi modifier la valeur de la propriété <code>writing-mode</code> pour la passer de <code>horizontal-tb</code> à <code>vertical-rl</code>. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.</p>
+Vous pouvez aussi modifier la valeur de la propriété `writing-mode` pour la passer de `horizontal-tb` à `vertical-rl`. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}
 
-<h3 id="Propriétés_raccourcies_pour_le_remplissage">Propriétés raccourcies pour le remplissage</h3>
+### Propriétés raccourcies pour le remplissage
 
-<p>À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.</p>
+À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.
 
-<p>Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de <code>5px</code> sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :</p>
+Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de `5px` sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :
 
-<pre class="brush: css">.box {
+```css
+.box {
   padding-block: 5px 10px;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Ces propriétés raccourcies, <code>padding-inline</code> et <code>padding-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
-</div>
+> **Note :** Ces propriétés raccourcies, `padding-inline` et `padding-block`, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.
 
-<h2 id="Exemples_pour_les_bordures">Exemples pour les bordures</h2>
+## Exemples pour les bordures
 
-<p>Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.</p>
+Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.
 
-<p>L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés <code>direction</code> et <code>writing-mode</code> pour observer les impacts.</p>
+L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés `direction` et `writing-mode` pour observer les impacts.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}
 
-<h3 id="Propriétés_raccourcies_pour_les_bordures">Propriétés raccourcies pour les bordures</h3>
+### Propriétés raccourcies pour les bordures
 
-<p>Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.</p>
+Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.
 
-<pre class="brush: css">.box {
+```css
+.box {
   border-block: 2px solid green;
   border-inline-width: 4px;
   border-inline-style: dotted;
   border-inline-color: rebeccapurple;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Ces propriétés raccourcies, <code>border-inline</code> et <code>border-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
-</div>
+> **Note :** Ces propriétés raccourcies, `border-inline` et `border-block`, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.
 
-<h3 id="Propriétés_pour_les_courbures_des_bordures_relatives_au_flux">Propriétés pour les courbures des bordures relatives au flux</h3>
+### Propriétés pour les courbures des bordures relatives au flux
 
-<p>La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.</p>
+La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.
 
-<pre class="brush: css">.box {
+```css
+.box {
   border-end-start-radius: 1em;
   border-end-end-radius: 0;
   border-start-end-radius: 20px;
   border-start-start-radius: 40px;
-}</pre>
+}
+```
 
-<h2 id="Utiliser_les_valeurs_logiques_avec_les_propriétés_raccourcies_classiques">Utiliser les valeurs logiques avec les propriétés raccourcies classiques</h2>
+## Utiliser les valeurs logiques avec les propriétés raccourcies classiques
 
-<p>La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (<code>margin</code> par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de <a href="https://github.com/w3c/csswg-drafts/issues/1282">cette <em>issue</em></a>.</p>
+La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (`margin` par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de [cette _issue_](https://github.com/w3c/csswg-drafts/issues/1282).
 
-<p>À l'heure actuelle (décembre 2018), les propriétés raccourcies <code>margin</code>, <code>padding</code> et <code>border</code> ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.</p>
+À l'heure actuelle (décembre 2018), les propriétés raccourcies `margin`, `padding` et `border` ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.
diff --git a/files/fr/web/css/css_logical_properties/sizing/index.md b/files/fr/web/css/css_logical_properties/sizing/index.md
index 2ede7d1bca..e3ded8e4ea 100644
--- a/files/fr/web/css/css_logical_properties/sizing/index.md
+++ b/files/fr/web/css/css_logical_properties/sizing/index.md
@@ -8,83 +8,55 @@ tags:
 translation_of: Web/CSS/CSS_Logical_Properties/Sizing
 original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.</p>
+Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.
 
-<p>Lorsqu'on définit la taille d'un objet, <a href="https://drafts.csswg.org/css-logical/">la spécification sur les propriétés et les valeurs logiques</a> permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs <em>logiques</em>, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs <em>physiques</em> en combinaison avec ces propriétés et ces valeurs logiques.</p>
+Lorsqu'on définit la taille d'un objet, [la spécification sur les propriétés et les valeurs logiques](https://drafts.csswg.org/css-logical/) permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs _logiques_, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs _physiques_ en combinaison avec ces propriétés et ces valeurs logiques.
 
-<h2 id="Correspondances_pour_les_dimensions">Correspondances pour les dimensions</h2>
+## Correspondances pour les dimensions
 
-<p>Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (<code>horizontal-tb</code>) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.</p>
+Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (`horizontal-tb`) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.
 
-<p>Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.</p>
+Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété logique</th>
-   <th scope="col">Propriété physique</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{CSSxRef("inline-size")}}</td>
-   <td>{{CSSxRef("width")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("block-size")}}</td>
-   <td>{{CSSxRef("height")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("min-inline-size")}}</td>
-   <td>{{CSSxRef("min-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("min-block-size")}}</td>
-   <td>{{CSSxRef("min-height")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("max-inline-size")}}</td>
-   <td>{{CSSxRef("max-width")}}</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("max-block-size")}}</td>
-   <td>{{CSSxRef("max-height")}}</td>
-  </tr>
- </tbody>
-</table>
+| 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")}} |
 
-<h2 id="Exemple_pour_width_et_height">Exemple pour <code>width</code> et <code>height</code></h2>
+## Exemple pour `width` et `height`
 
-<p>Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer <code>width</code> par <code>inline-size</code> et <code>height</code> par <code>block-size</code> et on obtiendra le même résultat.</p>
+Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer `width` par `inline-size` et `height` par `block-size` et on obtiendra le même résultat.
 
-<p>Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec <code>horizontal-tb</code>. En modifiant cette valeur pour la passer à <code>vertical-rl</code>, on verra que le premier exemple, qui utilise <code>width</code> et <code>height</code>, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise <code>inline-size</code> et <code>block-size</code>, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.</p>
+Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec `horizontal-tb`. En modifiant cette valeur pour la passer à `vertical-rl`, on verra que le premier exemple, qui utilise `width` et `height`, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise `inline-size` et `block-size`, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}
 
-<h2 id="Exemple_pour_min-width_et_min-height">Exemple pour <code>min-width</code> et <code>min-height</code></h2>
+## Exemple pour `min-width` et `min-height`
 
-<p>Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que <code>inline-size</code> et <code>block-size</code> mais paramètrent une taille minimale plutôt qu'une taille fixe.</p>
+Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que `inline-size` et `block-size` mais paramètrent une taille minimale plutôt qu'une taille fixe.
 
-<p>Dans l'exemple suivant, vous pouvez passer le mode d'écriture en <code>vertical-rl</code> et observer l'effet obtenu. Là encore, on utilise la propriété physique (<code>min-height</code>) sur le premier exemple et la propriété logique (<code>min-block-size</code>) sur le second.</p>
+Dans l'exemple suivant, vous pouvez passer le mode d'écriture en `vertical-rl` et observer l'effet obtenu. Là encore, on utilise la propriété physique (`min-height`) sur le premier exemple et la propriété logique (`min-block-size`) sur le second.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}
 
-<h2 id="Exemple_pour_max-width_et_max-height">Exemple pour <code>max-width</code> et <code>max-height</code></h2>
+## Exemple pour `max-width` et `max-height`
 
-<p>Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.</p>
+Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}
 
-<h2 id="Mots-clés_logiques_pour_resize">Mots-clés logiques pour <code>resize</code></h2>
+## Mots-clés logiques pour `resize`
 
-<p>La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques <code>horizontal</code> et <code>vertical</code>. La propriété <code>resize</code> peut désormais s'utiliser également avec des valeurs logiques : <code>resize: inline</code> permettra de redimensionner un objet sur l'axe en ligne et <code>resize: block</code> permettra de le redimensionner sur l'axe en bloc.</p>
+La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques `horizontal` et `vertical`. La propriété `resize` peut désormais s'utiliser également avec des valeurs logiques : `resize: inline` permettra de redimensionner un objet sur l'axe en ligne et `resize: block` permettra de le redimensionner sur l'axe en bloc.
 
-<p>La valeur <code>both</code> peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.</p>
+La valeur `both` peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.
 
-<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p>
+{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}
 
-<div class="warning">
-<p><strong>Attention :</strong> À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour <code>resize</code>.</p>
-</div>
+> **Attention :** À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour `resize`.
diff --git a/files/fr/web/css/css_masking/index.md b/files/fr/web/css/css_masking/index.md
index 7eee5da307..6699d3a116 100644
--- a/files/fr/web/css/css_masking/index.md
+++ b/files/fr/web/css/css_masking/index.md
@@ -9,57 +9,38 @@ tags:
 translation_of: Web/CSS/CSS_Masking
 original_slug: Web/CSS/CSS_Masks
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Masking</strong></em> (ou « masques CSS ») est un module CSS qui définit les moyens, dont les masques et le <em>clipping</em>, pour dissimuler des parties d'éléments visuels, partiellement ou en totalité.</p>
+**_CSS Masking_** (ou « masques CSS ») est un module CSS qui définit les moyens, dont les masques et le _clipping_, pour dissimuler des parties d'éléments visuels, partiellement ou en totalité.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("clip")}} {{deprecated_inline}}</li>
- <li>{{cssxref("clip-path")}}</li>
- <li>{{cssxref("clip-rule")}}</li>
- <li>{{cssxref("mask")}}</li>
- <li>{{cssxref("mask-border")}}</li>
- <li>{{cssxref("mask-border-mode")}}</li>
- <li>{{cssxref("mask-border-outset")}}</li>
- <li>{{cssxref("mask-border-repeat")}}</li>
- <li>{{cssxref("mask-border-slice")}}</li>
- <li>{{cssxref("mask-border-source")}}</li>
- <li>{{cssxref("mask-border-width")}}</li>
- <li>{{cssxref("mask-clip")}}</li>
- <li>{{cssxref("mask-composite")}}</li>
- <li>{{cssxref("mask-image")}}</li>
- <li>{{cssxref("mask-mode")}}</li>
- <li>{{cssxref("mask-origin")}}</li>
- <li>{{cssxref("mask-position")}}</li>
- <li>{{cssxref("mask-repeat")}}</li>
- <li>{{cssxref("mask-size")}}</li>
- <li>{{cssxref("mask-type")}}</li>
-</ul>
+- {{cssxref("clip")}} {{deprecated_inline}}
+- {{cssxref("clip-path")}}
+- {{cssxref("clip-rule")}}
+- {{cssxref("mask")}}
+- {{cssxref("mask-border")}}
+- {{cssxref("mask-border-mode")}}
+- {{cssxref("mask-border-outset")}}
+- {{cssxref("mask-border-repeat")}}
+- {{cssxref("mask-border-slice")}}
+- {{cssxref("mask-border-source")}}
+- {{cssxref("mask-border-width")}}
+- {{cssxref("mask-clip")}}
+- {{cssxref("mask-composite")}}
+- {{cssxref("mask-image")}}
+- {{cssxref("mask-mode")}}
+- {{cssxref("mask-origin")}}
+- {{cssxref("mask-position")}}
+- {{cssxref("mask-repeat")}}
+- {{cssxref("mask-size")}}
+- {{cssxref("mask-type")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks")}}                                                 | {{Spec2("CSS Masks")}} |                      |
+| {{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}} | {{Spec2('SVG1.1')}}     | Définition initiale. |
diff --git a/files/fr/web/css/css_miscellaneous/index.md b/files/fr/web/css/css_miscellaneous/index.md
index e7d51f4938..c5696ab6cc 100644
--- a/files/fr/web/css/css_miscellaneous/index.md
+++ b/files/fr/web/css/css_miscellaneous/index.md
@@ -7,23 +7,21 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Miscellaneous
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Cette page regroupe des propriétés CSS qui sont hautement expérimentales ou qui ne rentrent dans aucune autre catégorie.</p>
+Cette page regroupe des propriétés CSS qui sont hautement expérimentales ou qui ne rentrent dans aucune autre catégorie.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("all")}}</li>
- <li>{{cssxref("text-rendering")}}</li>
-</ul>
+- {{cssxref("all")}}
+- {{cssxref("text-rendering")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p><em>Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leur pages respectives pour connaître leurs spécifications.</em></p>
+_Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leur pages respectives pour connaître leurs spécifications._
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p><em>Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leurs pages respectives pour connaître leur disponibilité dans les navigateurs.</em></p>
+_Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leurs pages respectives pour connaître leur disponibilité dans les navigateurs._
diff --git a/files/fr/web/css/css_motion_path/index.md b/files/fr/web/css/css_motion_path/index.md
index a20d3067bb..f05ccd94ff 100644
--- a/files/fr/web/css/css_motion_path/index.md
+++ b/files/fr/web/css/css_motion_path/index.md
@@ -10,42 +10,27 @@ tags:
 translation_of: Web/CSS/CSS_Motion_Path
 original_slug: Web/CSS/Motion_Path
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p><em><strong>Motion Path</strong></em> est un module de la spécification CSS qui permet aux auteurs d'animer des objets graphiques le long d'une ligne appelée <em>chemin</em>.</p>
+**_Motion Path_** est un module de la spécification CSS qui permet aux auteurs d'animer des objets graphiques le long d'une ligne appelée _chemin_.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("offset")}}</li>
- <li>{{cssxref("offset-distance")}}</li>
- <li>{{cssxref("offset-path")}}</li>
- <li>{{cssxref("offset-rotate")}}</li>
-</ul>
+- {{cssxref("offset")}}
+- {{cssxref("offset-distance")}}
+- {{cssxref("offset-path")}}
+- {{cssxref("offset-rotate")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Motion Path Level 1')}}</td>
-   <td>{{Spec2('Motion Path Level 1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Motion Path Level 1')}} | {{Spec2('Motion Path Level 1')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="offset"><code>offset</code></h3>
+### `offset`
 
-<p>{{Compat("css.properties.offset")}}</p>
+{{Compat("css.properties.offset")}}
diff --git a/files/fr/web/css/css_namespaces/index.md b/files/fr/web/css/css_namespaces/index.md
index ca72f88a6c..90a64c0d84 100644
--- a/files/fr/web/css/css_namespaces/index.md
+++ b/files/fr/web/css/css_namespaces/index.md
@@ -8,39 +8,24 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Namespaces
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Namespaces</strong></em> (ou « espaces de noms CSS ») est un module CSS qui permet aux auteurs de spécifier des <a href="/en-US/docs/Namespaces">espaces de noms XML</a> en CSS.</p>
+**_CSS Namespaces_** (ou « espaces de noms CSS ») est un module CSS qui permet aux auteurs de spécifier des [espaces de noms XML](/en-US/docs/Namespaces) en CSS.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Règles">Règles @</h3>
+### Règles @
 
-<ul>
- <li>{{cssxref("@namespace")}}</li>
-</ul>
+- {{cssxref("@namespace")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Namespaces")}}</td>
-   <td>{{Spec2("CSS3 Namespaces")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | État                                 | Commentaires         |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Namespaces")}} | {{Spec2("CSS3 Namespaces")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="namespace"><code>@namespace</code></h3>
+### `@namespace`
 
-<p>{{Compat("css.at-rules.namespace")}}</p>
+{{Compat("css.at-rules.namespace")}}
diff --git a/files/fr/web/css/css_overflow/index.md b/files/fr/web/css/css_overflow/index.md
index cbac890ad5..1bf9216960 100644
--- a/files/fr/web/css/css_overflow/index.md
+++ b/files/fr/web/css/css_overflow/index.md
@@ -7,70 +7,47 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Overflow
 ---
-<p>{{CSSRef}}<br>
- Le module de spécification <em><strong>CSS Overflow</strong></em> décrit les fonctionnalités CSS relatives au dépassement et au défilement du contenu pour les médias visuels. En CSS, le dépassement se produit lorsque le contenu d'une boîte s'étend au-delà des bords de la boîte.</p>
+{{CSSRef}}
+Le module de spécification **_CSS Overflow_** décrit les fonctionnalités CSS relatives au dépassement et au défilement du contenu pour les médias visuels. En CSS, le dépassement se produit lorsque le contenu d'une boîte s'étend au-delà des bords de la boîte.
 
-<h2 id="Dépassement_au_dessin_ink_overflow_et_dépassement_défilable_scrollable_overflow">Dépassement au dessin (<em>ink overflow</em>) et dépassement défilable (<em>scrollable overflow</em>)</h2>
+## Dépassement au dessin (_ink overflow_) et dépassement défilable (_scrollable overflow_)
 
-<p>Il existe deux types de dépassement en CSS. Le premier, intitulé en anglais <em><strong>ink overflow</strong></em> (qu'on pourrait traduire par « dépassement pour le dessin ») indique le dépassement des effets visuels qui ne modifient pas la disposition ou le dimensionnement (ex. les ombres des boîtes, les bordures des images, les décorations du texte, les caractères avec un jambage qui dépasse, etc.).</p>
+Il existe deux types de dépassement en CSS. Le premier, intitulé en anglais **_ink overflow_** (qu'on pourrait traduire par « dépassement pour le dessin ») indique le dépassement des effets visuels qui ne modifient pas la disposition ou le dimensionnement (ex. les ombres des boîtes, les bordures des images, les décorations du texte, les caractères avec un jambage qui dépasse, etc.).
 
-<p>Le second type de dépassement, <em><strong>scrollable overflow</strong></em> (ou dépassement défilable) se produit lorsque du contenu se situe hors de la boîte et qu'il est nécessaire de fournir un mécanisme pour faire défiler le contenu afin de pouvoir le consulter. Les propriétés de ce module de spécification décrivent ce qui se passe lorsque le contenu dépasse d'une boîte. </p>
+Le second type de dépassement, **_scrollable overflow_** (ou dépassement défilable) se produit lorsque du contenu se situe hors de la boîte et qu'il est nécessaire de fournir un mécanisme pour faire défiler le contenu afin de pouvoir le consulter. Les propriétés de ce module de spécification décrivent ce qui se passe lorsque le contenu dépasse d'une boîte.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exempel interactif suivant illustre comment la modification de la valeur de la propriété <code>overflow</code> change la façon dont est géré le dépassement pour une boîte avec une hauteur fixe.</p>
+L'exempel interactif suivant illustre comment la modification de la valeur de la propriété `overflow` change la façon dont est géré le dépassement pour une boîte avec une hauteur fixe.
 
-<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
+{{EmbedInteractiveExample("pages/css/overflow.html")}}
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+### Propriétés CSS
 
-<ul>
- <li>{{CSSxRef("overflow")}}</li>
- <li>{{CSSxRef("overflow-block")}}</li>
- <li>{{CSSxRef("overflow-inline")}}</li>
- <li>{{CSSxRef("overflow-x")}}</li>
- <li>{{CSSxRef("overflow-y")}}</li>
- <li>{{CSSxRef("text-overflow")}}</li>
- <li>{{CSSxRef("block-overflow")}} {{experimental_inline}}</li>
- <li>{{CSSxRef("line-clamp")}} {{experimental_inline}}</li>
- <li>{{CSSxRef("max-lines")}} {{experimental_inline}}</li>
- <li>{{CSSxRef("continue")}} {{experimental_inline}}</li>
-</ul>
+- {{CSSxRef("overflow")}}
+- {{CSSxRef("overflow-block")}}
+- {{CSSxRef("overflow-inline")}}
+- {{CSSxRef("overflow-x")}}
+- {{CSSxRef("overflow-y")}}
+- {{CSSxRef("text-overflow")}}
+- {{CSSxRef("block-overflow")}} {{experimental_inline}}
+- {{CSSxRef("line-clamp")}} {{experimental_inline}}
+- {{CSSxRef("max-lines")}} {{experimental_inline}}
+- {{CSSxRef("continue")}} {{experimental_inline}}
 
-<h3 id="Propriétés_spécifiques">Propriétés spécifiques</h3>
+### Propriétés spécifiques
 
-<ul>
- <li>{{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}</li>
-</ul>
+- {{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
-   <td>{{Spec2('CSS3 Overflow')}}</td>
-   <td>Modification de la syntaxe afin de permettre d'utilise un ou deux mots-clés (plutôt qu'un seul auparavant).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                                 | Commentaires                                                                                                |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}} | {{Spec2('CSS3 Overflow')}} | Modification de la syntaxe afin de permettre d'utilise un ou deux mots-clés (plutôt qu'un seul auparavant). |
+| {{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}         | {{Spec2('CSS2.1')}}             | Définition initiale.                                                                                        |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés qui permettent de mettre en forme les barres de défilement/ascenceurs : {{CSSxRef("scrollbar-width")}} et {{CSSxRef("scrollbar-color")}}</li>
-</ul>
+- Les propriétés qui permettent de mettre en forme les barres de défilement/ascenceurs : {{CSSxRef("scrollbar-width")}} et {{CSSxRef("scrollbar-color")}}
diff --git a/files/fr/web/css/css_pages/index.md b/files/fr/web/css/css_pages/index.md
index a7f074727b..52e54869af 100644
--- a/files/fr/web/css/css_pages/index.md
+++ b/files/fr/web/css/css_pages/index.md
@@ -8,60 +8,33 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Pages
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong>Les média paginés CSS</strong> (ou <em>CSS Paged Media</em> en anglais) est un module CSS qui définit la façon dont sont gérés les sauts de page ainsi que les veuves et orphelines.</p>
+**Les média paginés CSS** (ou _CSS Paged Media_ en anglais) est un module CSS qui définit la façon dont sont gérés les sauts de page ainsi que les veuves et orphelines.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("page-break-after")}}</li>
- <li>{{cssxref("page-break-before")}}</li>
- <li>{{cssxref("page-break-inside")}}</li>
-</ul>
+- {{cssxref("page-break-after")}}
+- {{cssxref("page-break-before")}}
+- {{cssxref("page-break-inside")}}
 
-<h3 id="Règles">Règles @</h3>
+### Règles @
 
-<ul>
- <li>{{cssxref('@page')}}</li>
-</ul>
+- {{cssxref('@page')}}
 
-<h3 id="Pseudo-classes">Pseudo-classes</h3>
+### Pseudo-classes
 
-<ul>
- <li>{{cssxref(':blank')}}</li>
- <li>{{cssxref(':first')}}</li>
- <li>{{cssxref(':left')}}</li>
- <li>{{cssxref(':right')}}</li>
-</ul>
+- {{cssxref(':blank')}}
+- {{cssxref(':first')}}
+- {{cssxref(':left')}}
+- {{cssxref(':right')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Paged Media')}}</td>
-   <td>{{Spec2('CSS3 Paged Media')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fragmentation')}}</td>
-   <td>{{Spec2('CSS3 Fragmentation')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | État                                     | Commentaires |
+| -------------------------------------------- | ---------------------------------------- | ------------ |
+| {{SpecName('CSS3 Paged Media')}} | {{Spec2('CSS3 Paged Media')}} |              |
+| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} |              |
+| {{SpecName('CSS2.1')}}                 | {{Spec2('CSS2.1')}}                 |              |
diff --git a/files/fr/web/css/css_positioning/index.md b/files/fr/web/css/css_positioning/index.md
index 7271af1172..b4ca0b565a 100644
--- a/files/fr/web/css/css_positioning/index.md
+++ b/files/fr/web/css/css_positioning/index.md
@@ -8,52 +8,31 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Positioning
 ---
-<div>{{CSSRef}}</div>
-
-<p><em><strong>CSS Positioned Layout</strong></em> (ou module CSS de disposition positionnée) est un module CSS qui définit comment positionner des éléments sur une page.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<ul>
- <li>{{cssxref("bottom")}}</li>
- <li>{{cssxref("clear")}}</li>
- <li>{{cssxref("float")}}</li>
- <li>{{cssxref("left")}}</li>
- <li>{{cssxref("position")}}</li>
- <li>{{cssxref("right")}}</li>
- <li>{{cssxref("top")}}</li>
- <li>{{cssxref("z-index")}}</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Comprendre_z-index">Comprendre <code>z-index</code> en CSS</a></dt>
- <dd>Présente la notion de contexte d'empilement et explique comment fonctionne le tri sur z avec plusieurs exemples.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Positioning')}}</td>
-   <td>{{Spec2('CSS3 Positioning') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+{{CSSRef}}
+
+**_CSS Positioned Layout_** (ou module CSS de disposition positionnée) est un module CSS qui définit comment positionner des éléments sur une page.
+
+## Référence
+
+### Propriétés
+
+- {{cssxref("bottom")}}
+- {{cssxref("clear")}}
+- {{cssxref("float")}}
+- {{cssxref("left")}}
+- {{cssxref("position")}}
+- {{cssxref("right")}}
+- {{cssxref("top")}}
+- {{cssxref("z-index")}}
+
+## Guides
+
+- [Comprendre `z-index` en CSS](/fr/docs/Web/CSS/Comprendre_z-index)
+  - : Présente la notion de contexte d'empilement et explique comment fonctionne le tri sur z avec plusieurs exemples.
+
+## Spécifications
+
+| Spécification                                        | État                                     | Commentaires |
+| ---------------------------------------------------- | ---------------------------------------- | ------------ |
+| {{SpecName('CSS3 Positioning')}}         | {{Spec2('CSS3 Positioning') }} |              |
+| {{SpecName('CSS2.1', 'visuren.html')}} | {{Spec2('CSS2.1')}}                 |              |
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md
index bfbc64fb1c..1526b9350c 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md
+++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md
@@ -9,83 +9,77 @@ tags:
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
 original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index
 ---
-<div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</div>
+{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}
 
-<h2 id="Ajouter_z-index">Ajouter <code>z-index</code></h2>
+## Ajouter `z-index`
 
-<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">« empilement sans <code>z-index</code> »</a>,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.</p>
+Dans le premier exemple, [« empilement sans `z-index` »](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index),  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.
 
-<p>Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de <code>z-index</code> est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.</p>
+Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de `z-index` est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.
 
-<div class="warning">
-<p><strong>Attention :</strong> <code>z-index</code> a un effet sur les éléments uniquement si ceux-ci sont <a href="/fr/docs/Web/CSS/position">positionnés</a>.</p>
-</div>
+> **Attention :** `z-index` a un effet sur les éléments uniquement si ceux-ci sont [positionnés](/fr/docs/Web/CSS/position).
 
-<ul>
- <li><em>Bas : couche la plus lointaine de l'observateur</em></li>
- <li>…</li>
- <li>Couche -3</li>
- <li>Couche -2</li>
- <li>Couche -1</li>
- <li>Couche 0 <em>couche de rendu par défaut</em></li>
- <li>Couche 1</li>
- <li>Couche 2</li>
- <li>Couche 3</li>
- <li>…</li>
- <li><em>Haut : couche la plus proche de l'observateur</em></li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong>
-
-<ul>
- <li>Lorsque la propriété <code>z-index</code> n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.</li>
- <li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li>
-</ul></p>
-</div>
+- _Bas : couche la plus lointaine de l'observateur_
+- …
+- Couche -3
+- Couche -2
+- Couche -1
+- Couche 0 _couche de rendu par défaut_
+- Couche 1
+- Couche 2
+- Couche 3
+- …
+- _Haut : couche la plus proche de l'observateur_
 
-<p>Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant <code>z-index</code>. Le <code>z-index</code> du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.</p>
+> **Note :**
+>
+> - Lorsque la propriété `z-index` n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.
+> - Si plusieurs éléments possède la même valeur de `z-index` (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans [empilement sans `z-index`](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index) s'appliquent.
 
-<p>{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}</p>
+Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant `z-index`. Le `z-index` du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.
 
-<h2 id="Code_source_de_l’exemple"><strong>Code source de l’exemple</strong></h2>
+{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}
 
-<h3 id="HTML">HTML</h3>
+## **Code source de l’exemple**
 
-<pre class="brush: html">&lt;div id="abs1"&gt;
-  &lt;b&gt;DIV #1&lt;/b&gt;
-  &lt;br /&gt;position: absolute;
-  &lt;br /&gt;z-index: 5;
-&lt;/div&gt;
+### HTML
+
+```html
+<div id="abs1">
+  <b>DIV #1</b>
+  <br />position: absolute;
+  <br />z-index: 5;
+</div>
 
-&lt;div id="rel1"&gt;
-  &lt;b&gt;DIV #2&lt;/b&gt;
-  &lt;br /&gt;position: relative;
-  &lt;br /&gt;z-index: 3;
-&lt;/div&gt;
+<div id="rel1">
+  <b>DIV #2</b>
+  <br />position: relative;
+  <br />z-index: 3;
+</div>
 
-&lt;div id="rel2"&gt;
-  &lt;b&gt;DIV #3&lt;/b&gt;
-  &lt;br /&gt;position: relative;
-  &lt;br /&gt;z-index: 2;
-&lt;/div&gt;
+<div id="rel2">
+  <b>DIV #3</b>
+  <br />position: relative;
+  <br />z-index: 2;
+</div>
 
-&lt;div id="abs2"&gt;
-  &lt;b&gt;DIV #4&lt;/b&gt;
-  &lt;br /&gt;position: absolute;
-  &lt;br /&gt;z-index: 1;
-&lt;/div&gt;
+<div id="abs2">
+  <b>DIV #4</b>
+  <br />position: absolute;
+  <br />z-index: 1;
+</div>
 
-&lt;div id="sta1"&gt;
-  &lt;b&gt;DIV #5&lt;/b&gt;
-  &lt;br /&gt;no positioning
-  &lt;br /&gt;z-index: 8;
-&lt;/div&gt;
-</pre>
+<div id="sta1">
+  <b>DIV #5</b>
+  <br />no positioning
+  <br />z-index: 8;
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   padding: 10px;
   opacity: 0.7;
   text-align: center;
@@ -145,6 +139,6 @@ b {
   background-color: #ffc;
   margin: 0px 50px 0px 50px;
 }
-</pre>
+```
 
-<p>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</p>
+{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/index.md
index 92a9a86a4e..e60cd463a0 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/index.md
+++ b/files/fr/web/css/css_positioning/understanding_z_index/index.md
@@ -8,30 +8,26 @@ tags:
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
 original_slug: Web/CSS/Comprendre_z-index
 ---
-<p>{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}</p>
+{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}
 
-<p>Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.</p>
+Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.
 
-<blockquote>
-<p><em>Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement. </em></p>
-</blockquote>
+> _Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement._
 
-<p>Source : <a href="https://www.w3.org/TR/CSS2/visuren.html#z-index">Section 9.9.1. de CSS 2.1 - La présentation en couches</a></p>
+Source : [Section 9.9.1. de CSS 2.1 - La présentation en couches](https://www.w3.org/TR/CSS2/visuren.html#z-index)
 
-<p>Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.</p>
+Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.
 
-<p><code>z-index</code> peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque <code>z-index</code> est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.</p>
+`z-index` peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque `z-index` est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.
 
-<p>Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.</p>
+Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.
 
-<ol>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">L'empilement sans <code>z-index</code></a> : Règles d'empilement par défaut</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float">L'empilement et <code>float</code></a> : Comportement des éléments flottants</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajouter <code>z-index</code></a> : Utiliser <code>z-index</code> pour modifier l'empilement par défaut</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">L'empilement de couches</a> : Remarques sur l'empilement de couches</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, <code>z-index</code> sur le dernier niveau</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, <code>z-index</code> sur tous les éléments</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, <code>z-index</code> sur le deuxième niveau</li>
-</ol>
+1.  [L'empilement sans `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index) : Règles d'empilement par défaut
+2.  [L'empilement et `float`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float) : Comportement des éléments flottants
+3.  [Ajouter `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index) : Utiliser `z-index` pour modifier l'empilement par défaut
+4.  [L'empilement de couches](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches) : Remarques sur l'empilement de couches
+5.  [Exemple d'empilement n°1](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1) : Hiérarchie HTML à 2 niveaux, `z-index` sur le dernier niveau
+6.  [Exemple d'empilement n°2](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2) : Hiérarchie HTML à 2 niveaux, `z-index` sur tous les éléments
+7.  [Exemple d'empilement n°3](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3) : Hiérarchie HTML à 3 niveaux, `z-index` sur le deuxième niveau
 
-<p>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}</p>
+{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md
index 2b0dc727af..7344ca0196 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md
@@ -12,62 +12,58 @@ tags:
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
 original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float
 ---
-<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div>
+{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
 
-<h2 id="L'empilement_et_les_éléments_flottants">L'empilement et les éléments flottants</h2>
+## L'empilement et les éléments flottants
 
-<p>Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :</p>
+Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :
 
-<ol>
- <li>L'arrière-plan et les bordures de l'élément racine du document</li>
- <li>Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;</li>
- <li>Les blocs flottants ;</li>
- <li>Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).</li>
-</ol>
+1.  L'arrière-plan et les bordures de l'élément racine du document
+2.  Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;
+3.  Les blocs flottants ;
+4.  Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).
 
-<p>En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}.</p>
+En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}.
 
-<p>Ce comportement peut être expliqué en améliorant la liste précédente :</p>
+Ce comportement peut être expliqué en améliorant la liste précédente :
 
-<ol>
- <li>L'arrière-plan et les bordures de l'élément racine ;</li>
- <li>Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;</li>
- <li>Les blocs flottants ;</li>
- <li>Les éléments « en-ligne » enfants dans le flux normal ;</li>
- <li>Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).</li>
-</ol>
+1.  L'arrière-plan et les bordures de l'élément racine ;
+2.  Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;
+3.  Les blocs flottants ;
+4.  Les éléments « en-ligne » enfants dans le flux normal ;
+5.  Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).
 
-<div class="note">
-  <p><strong>Note :</strong> Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> de Philip Walton ou son excellente traduction de Vincent De Oliveira, <a href="https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement">Ce que personne ne vous a dit sur z-index</a> et, bien-sûr, la <a href="https://www.w3.org/TR/CSS2/zindex.html">spécification</a>).</p>
-</div>
+> **Note :** Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) de Philip Walton ou son excellente traduction de Vincent De Oliveira, [Ce que personne ne vous a dit sur z-index](https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement) et, bien-sûr, la [spécification](https://www.w3.org/TR/CSS2/zindex.html)).
 
-<p>{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}</p>
+{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}
 
-<h2 id="Code_source_de_l'exemple">Code source de l'exemple</h2>
+## Code source de l'exemple
 
-<h3 id="HTML"><strong>HTML</strong></h3>
+### **HTML**
 
-<pre class="brush: html">&lt;div id="abs1"&gt;
-  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+```html
+<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
 
-&lt;div id="flo1"&gt;
-  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;float: left;&lt;/div&gt;
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
 
-&lt;div id="flo2"&gt;
-  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;float: right;&lt;/div&gt;
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
 
-&lt;br /&gt;
+<br />
 
-&lt;div id="sta1"&gt;
-  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;no positioning&lt;/div&gt;
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
 
-&lt;div id="abs2"&gt;
-  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
-</pre>
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   padding: 10px;
   text-align: center;
 }
@@ -120,17 +116,16 @@ b {
   left: 100px;
   border: 1px dashed #990;
   background-color: #fdd;
-}</pre>
+}
+```
 
-<h2 id="Voir_aussi"><strong>Voir aussi</strong></h2>
+## **Voir aussi**
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">L'empilement sans z-index</a> : Règles d'empilement par défaut</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Ajouter z-index</a> : Utiliser z-index pour modifier l'empilement par défaut</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">L'empilement de couches</a> : Remarques sur l'empilement de couches</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau</li>
-</ul>
+- [L'empilement sans z-index](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index) : Règles d'empilement par défaut
+- [Ajouter z-index](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index) : Utiliser z-index pour modifier l'empilement par défaut
+- [L'empilement de couches](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) : Remarques sur l'empilement de couches
+- [Exemple d'empilement n°1](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1) : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau
+- [Exemple d'empilement n°2](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2) : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments
+- [Exemple d'empilement n°3](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3) : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau
 
-<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div>
+{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md
index dadbe3ec99..2ba5b4585f 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md
@@ -8,47 +8,41 @@ tags:
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
 original_slug: Web/CSS/Comprendre_z-index/Exemple_1
 ---
-<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}</div>
+{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
 
-<h2 id="Premier_exemple">Premier exemple</h2>
+## Premier exemple
 
-<p>Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs <em>DIV</em> (<em>DIV #1</em> et <em>DIV #3</em>), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc <em>DIV #1</em> il y a un bloc <em>DIV #2</em> en position absolue, alors que dans le bloc <em>DIV #3</em> il y a un bloc <em>DIV #4</em> en position absolue, tout deux également sans propriété <code>z-index</code>.</p>
+Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs _DIV_ (_DIV #1_ et _DIV #3_), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc _DIV #1_ il y a un bloc _DIV #2_ en position absolue, alors que dans le bloc _DIV #3_ il y a un bloc _DIV #4_ en position absolue, tout deux également sans propriété `z-index`.
 
-<p>Le seul et unique contexte d'empilement est le contexte racine. Sans <code>z-index</code>, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.</p>
+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.
 
-<p><img alt="Figure 5a : Exemple de contexte d'empilement 1" src="understanding_zindex_05a.png"></p>
+![Figure 5a : Exemple de contexte d'empilement 1](understanding_zindex_05a.png)
 
-<p>Si on assigne au bloc <em>DIV #2</em> une valeur de <code>z-index</code> positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.</p>
+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.
 
-<p><img alt="Figure 5b : Exemple de contexte d'empilement 1" src="understanding_zindex_05b.png"></p>
+![Figure 5b : Exemple de contexte d'empilement 1](understanding_zindex_05b.png)
 
-<p>Si maintenant on assigne également au bloc <em>DIV #4</em> une valeur de <code>z-index</code> positive, plus grande que celle du <em>DIV #2</em>, le bloc <em>DIV #4</em> est rendu par dessus tous les autres, y compris par dessus le bloc <em>DIV #2</em>.</p>
+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_.
 
-<p><img alt="Figure 5c : Exemple de contexte d'empilement 1" src="understanding_zindex_05c.png"></p>
+![Figure 5c : Exemple de contexte d'empilement 1](understanding_zindex_05c.png)
 
-<p>Dans le dernier exemple, vous pouvez voir que les blocs <em>DIV #2</em> et <em>DIV #4</em> 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 <em>DIV #4</em>, tout en respectant le bloc <em>DIV #2</em>, peut être contrôlé avec la propriété <code>z-index</code>. Il se fait que les éléments <em>DIV #1</em> et <em>DIV #3</em> n'ayant pas de <code>z-index</code> défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs <em>DIV #2</em> et <em>DIV #3</em>, appartient au contexte d'empilement de la racine.</p>
+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.
 
-<p>Dans le contexte d'empilement, les blocs <em>DIV #1</em> et <em>DIV #3</em> sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :</p>
+Dans le contexte d'empilement, les blocs _DIV #1_ et _DIV #3_ sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :
 
-<ul>
- <li>Contexte d'empilement racine
-  <ul>
-   <li>DIV #2 (z-index 1)</li>
-   <li>DIV #4 (z-index 2)</li>
-  </ul>
- </li>
-</ul>
+- Contexte d'empilement racine
 
-<div class="note">
-  <p><strong>Note :</strong> Les blocs <em>DIV #1</em> et <em>DIV #3</em> ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés <code>z-index</code>. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
-  </p>
-</div>
+  - DIV #2 (z-index 1)
+  - DIV #4 (z-index 2)
+
+> **Note :** Les blocs _DIV #1_ et _DIV #3_ ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés `z-index`. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
 
-<h2 id="Exemple"><strong>Exemple</strong></h2>
+## **Exemple**
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.bold {
+```css
+.bold {
   font-weight: bold;
   font: 12px Arial;
 }
@@ -86,36 +80,38 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1
   background-color: #ddddff;
   text-align: left;
   padding-left: 10px;
-}</pre>
-
-<h3 id="HTML"><strong>HTML</strong></h3>
-
-<pre class="brush: html">&lt;div id="div1"&gt;
-  &lt;br/&gt;
-  &lt;span class="bold"&gt;DIV #1&lt;/span&gt;
-  &lt;br/&gt;position: relative;
-  &lt;div id="div2"&gt;
-    &lt;br/&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
-    &lt;br/&gt;position: absolute;
-     &lt;br/&gt;z-index: 1;
-  &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;br/&gt;
-
-&lt;div id="div3"&gt;
-  &lt;b/&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
-  &lt;br/&gt;position: relative;
-  &lt;div id="div4"&gt;
-    &lt;br/&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
-    &lt;br/&gt;position: absolute;
-    &lt;br/&gt;z-index: 2;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemple')}}</p>
-
-<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}</div>
+}
+```
+
+### **HTML**
+
+```html
+<div id="div1">
+  <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: 1;
+  </div>
+</div>
+
+<br/>
+
+<div id="div3">
+  <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;
+  </div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemple')}}
+
+{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md
index e4dcfaa383..78b9dca877 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md
@@ -8,42 +8,35 @@ tags:
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
 original_slug: Web/CSS/Comprendre_z-index/Exemple_2
 ---
-<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div>
+{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
 
-<h2 id="Deuxième_exemple">Deuxième exemple</h2>
+## Deuxième exemple
 
-<p>Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de <em>contexte d'empilement</em>. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.</p>
+Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de _contexte d'empilement_. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.
 
-<p>{{ EmbedLiveSample('Exemple', '352', '270') }}</p>
+{{ EmbedLiveSample('Exemple', '352', '270') }}
 
-<p>Vous pouvez voir que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #3</em> (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de <code>z-index</code> régissent l'empilement des éléments.</p>
+Vous pouvez voir que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #3_ (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de `z-index` régissent l'empilement des éléments.
 
-<p>Ce qui peut apparaitre comme étrange, c'est que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #4</em> (z-index : 10), malgré leurs valeurs de <code>z-index</code>. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc <em>DIV #4</em> appartient au contexte d'empilement créé par le bloc <em>DIV #3</em>, et, comme expliqué précédemment, le bloc <em>DIV #3</em> (et tout son contenu) est au dessous du bloc <em>DIV #2</em>.</p>
+Ce qui peut apparaitre comme étrange, c'est que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #4_ (z-index : 10), malgré leurs valeurs de `z-index`. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc _DIV #4_ appartient au contexte d'empilement créé par le bloc _DIV #3_, et, comme expliqué précédemment, le bloc _DIV #3_ (et tout son contenu) est au dessous du bloc _DIV #2_.
 
-<p>Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :</p>
+Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :
 
-<ul>
- <li>Contexte d'empilement racine
-  <ul>
-   <li>DIV #2 (z-index 2)</li>
-   <li>DIV #3 (z-index 1)
-    <ul>
-     <li>DIV #4 (z-index 10)</li>
-    </ul>
-   </li>
-  </ul>
- </li>
-</ul>
+- Contexte d'empilement racine
 
-<div class="note">
-  <p><strong>Note :</strong> Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.</p>
-</div>
+  - DIV #2 (z-index 2)
+  - DIV #3 (z-index 1)
+
+    - DIV #4 (z-index 10)
+
+> **Note :** Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   font: 12px Arial;
 }
 
@@ -94,35 +87,36 @@ span.bold {
   background-color: #ddddff;
   text-align: left;
   padding-left: 10px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;br/&gt;
-
-&lt;div id="div1"&gt;
-  &lt;br/&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
-  &lt;br/&gt;position: relative;
-  &lt;div id="div2"&gt;
-    &lt;br/&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
-    &lt;br/&gt;position: absolute;
-    &lt;br/&gt;z-index: 2;
-  &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;br/&gt;
-
-&lt;div id="div3"&gt;
-  &lt;br/&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
-  &lt;br/&gt;position: relative;
-  &lt;br/&gt;z-index: 1;
-  &lt;div id="div4"&gt;
-    &lt;br/&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
-    &lt;br/&gt;position: absolute;
-    &lt;br/&gt;z-index: 10;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-
-<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div>
+}
+```
+
+### HTML
+
+```html
+<br/>
+
+<div id="div1">
+  <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;
+  </div>
+</div>
+
+<br/>
+
+<div id="div3">
+  <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;
+  </div>
+</div>
+```
+
+{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md
index 0668f2416a..d41a4a98f4 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md
@@ -8,62 +8,54 @@ tags:
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
 original_slug: Web/CSS/Comprendre_z-index/Exemple_3
 ---
-<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div>
+{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
 
-<h2 id="Troisième_exemple">Troisième exemple</h2>
+## Troisième exemple
 
-<p>Ce dernier exemple illustre les problèmes qui peuvent survenir lorsqu'on utilise des éléments positionnés dans une hiérarchie HTML à plusieurs niveaux et lorsque des {{cssxref("z-index")}} sont assignés à l'aide de sélecteurs de classe.</p>
+Ce dernier exemple illustre les problèmes qui peuvent survenir lorsqu'on utilise des éléments positionnés dans une hiérarchie HTML à plusieurs niveaux et lorsque des {{cssxref("z-index")}} sont assignés à l'aide de sélecteurs de classe.
 
-<p>Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs <em>DIV</em> positionnés. Les deuxième et troisième niveaux apparaissent lors du survol ou d'un clic sur leur parent. D'ordinaire, ce type de menu est généré par un script, côté client ou côté serveur, de façon à ce que les règles de styles soient assignées à l'aide de sélecteurs de classe plutôt qu'avec des sélecteurs d'<em>id</em>.</p>
+Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs _DIV_ positionnés. Les deuxième et troisième niveaux apparaissent lors du survol ou d'un clic sur leur parent. D'ordinaire, ce type de menu est généré par un script, côté client ou côté serveur, de façon à ce que les règles de styles soient assignées à l'aide de sélecteurs de classe plutôt qu'avec des sélecteurs d'_id_.
 
-<p>Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.</p>
+Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.
 
-<p>{{ EmbedLiveSample('Exemple', '320', '330') }}</p>
+{{ EmbedLiveSample('Exemple', '320', '330') }}
 
-<p>Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.</p>
+Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.
 
-<p>Le menu de deuxième niveau est positionné en absolu à l'intérieur de son élément parent. Afin de le faire apparaître au dessus de tous les menus de premier niveau, on utilise un <code>z-index</code>. Le problème est que pour chaque menu de deuxième niveau, un contexte d'empilement se crée et chaque menu de troisième niveau appartient au contexte d'empilement de son parent.</p>
+Le menu de deuxième niveau est positionné en absolu à l'intérieur de son élément parent. Afin de le faire apparaître au dessus de tous les menus de premier niveau, on utilise un `z-index`. Le problème est que pour chaque menu de deuxième niveau, un contexte d'empilement se crée et chaque menu de troisième niveau appartient au contexte d'empilement de son parent.
 
-<p>Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de <code>z-index</code> et que les règles d'empilement par défaut s'appliquent.</p>
+Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de `z-index` et que les règles d'empilement par défaut s'appliquent.
 
-<p>Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :</p>
+Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :
 
-<ul>
- <li>Contexte d'empilement racine
-  <ul>
-   <li>Niveau #1
-    <ul>
-     <li>Niveau #2 (z-index : 1)
-      <ul>
-       <li>Niveau #3</li>
-       <li>…</li>
-       <li>Niveau #3</li>
-      </ul>
-     </li>
-     <li>Niveau #2 (z-index : 1)</li>
-     <li>…</li>
-     <li>Niveau #2 (z-index : 1)</li>
-    </ul>
-   </li>
-   <li>Niveau #1</li>
-   <li>…</li>
-   <li>Niveau #1</li>
-  </ul>
- </li>
-</ul>
+- Contexte d'empilement racine
 
-<p>On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de <code>z-index</code> individuelles (et différentes) assignées à l'aide de sélecteurs d'<em>id</em> plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.</p>
+  - Niveau #1
 
-<div class="note">
-  <p><strong>Note :</strong> Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes <em>DIV</em> contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
-  </p>
-</div>
+    - Niveau #2 (z-index : 1)
+
+      - Niveau #3
+      - …
+      - Niveau #3
+
+    - Niveau #2 (z-index : 1)
+    - …
+    - Niveau #2 (z-index : 1)
+
+  - Niveau #1
+  - …
+  - Niveau #1
 
-<h2 id="Exemple">Exemple</h2>
+On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de `z-index` individuelles (et différentes) assignées à l'aide de sélecteurs d'_id_ plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.
 
-<h3 id="CSS">CSS</h3>
+> **Note :** Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes _DIV_ contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
 
-<pre class="brush: css">div {
+## Exemple
+
+### CSS
+
+```css
+div {
   font: 12px Arial;
 }
 
@@ -111,51 +103,52 @@ div.lev3 {
   border: 2px outset #000099;
   background-color: #ddddff;
   padding-left: 5px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;br/&gt;
-
-&lt;div class="lev1"&gt;
-&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
-  &lt;div id="container1"&gt;
-    &lt;div class="lev2"&gt;
-      &lt;br/&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
-      &lt;br/&gt;z-index: 1;
-      &lt;div id="container2"&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="lev2"&gt;
-      &lt;br/&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
-      &lt;br/&gt;z-index: 1;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="lev1"&gt;
-  &lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;div class="lev1"&gt;
-  &lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;div class="lev1"&gt;
-  &lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
-&lt;/div&gt;
-</pre>
-
-
-<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div>
+}
+```
+
+### HTML
+
+```html
+<br/>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+  <div id="container1">
+    <div class="lev2">
+      <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>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+      </div>
+    </div>
+    <div class="lev2">
+      <br/><span class="bold">LEVEL #2</span>
+      <br/>z-index: 1;
+    </div>
+  </div>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+```
+
+{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
index f5c69a0055..9fdfb30422 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
+++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
@@ -9,53 +9,49 @@ tags:
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
 original_slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index
 ---
-<div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div>
+{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
 
-<h2 id="Empilement_sans_z-index">Empilement sans <code>z-index</code></h2>
+## Empilement sans `z-index`
 
-<p>Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :</p>
+Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :
 
-<ol>
- <li>Arrière-plans et bordures de l'élément racine</li>
- <li>Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)</li>
- <li>Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)</li>
-</ol>
+1.  Arrière-plans et bordures de l'élément racine
+2.  Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)
+3.  Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)
 
-<p>On gardera à l'esprit que, lorsque la propriété {{cssxref("order")}} modifie l'ordre visuel des conteneurs flexibles ({{cssxref("flex")}}), cela modifie également l'ordre du contexte d'empilement.</p>
+On gardera à l'esprit que, lorsque la propriété {{cssxref("order")}} modifie l'ordre visuel des conteneurs flexibles ({{cssxref("flex")}}), cela modifie également l'ordre du contexte d'empilement.
 
-<p>Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.</p>
+Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.
 
-<div class="note">
-<p><strong>Note :</strong>
-<ul>
- <li>Dans un groupe d'éléments sans aucune propriété <code>z-index</code>, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.</li>
- <li>Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.</li>
- <li><strong>Attention</strong> : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.</li>
-</ul>
-</p>
-</div>
+> **Note :**
+>
+> - Dans un groupe d'éléments sans aucune propriété `z-index`, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.
+> - Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.
+> - **Attention** : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.
 
-<p>{{EmbedLiveSample("Exemple", 600, 400)}}</p>
+{{EmbedLiveSample("Exemple", 600, 400)}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="abs1" class="absolute"&gt;
-  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
-&lt;div id="rel1" class="relative"&gt;
-  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
-&lt;div id="rel2" class="relative"&gt;
-  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
-&lt;div id="abs2" class="absolute"&gt;
-  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
-&lt;div id="sta1" class="static"&gt;
-  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: static;&lt;/div&gt;
-</pre>
+```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>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">b {
+```css
+b {
   font-family: sans-serif;
 }
 
@@ -114,6 +110,6 @@ div {
   background-color: #ffc;
   margin: 0px 50px 0px 50px;
 }
-</pre>
+```
 
-<div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div>
+{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
index a377b3b7ff..f5be095d45 100644
--- a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
+++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
@@ -9,93 +9,76 @@ tags:
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches
 ---
-<div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}</div>
-
-<h2 id="Le_contexte_dempilement">Le contexte d'empilement</h2>
-
-<p>Dans l'exemple précédent, <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Ajout de z-index</a>, les blocs <em>DIV</em> sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de <code>z-index</code> est la plus forte. Dans cet exemple, il n'y a qu'un seul <em>contexte d'empilement</em>, qui est l'élément <code>HTML</code> racine de la page.</p>
-
-<p>Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc <em>DIV</em> (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de <code>z-index</code> différente de <em>auto</em> crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de <code>z-index</code> de ses enfants n'ont de signification que dans ce contexte. Le bloc <em>DIV</em> entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.</p>
-
-<p>Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :</p>
-
-<ul>
- <li>L'élément racine du document (HTML)</li>
- <li>Un élément pour lequel {{cssxref("position")}} vaut <code>absolute</code> ou <code>relative</code> et pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li>
- <li>Un élément pour lequel {{cssxref("position")}} vaut <code>fixed</code> ou <code>sticky</code></li>
- <li>Un élément qui est le fils d'un conteneur flexible ({{cssxref("flexbox")}}) pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li>
- <li>Un élément qui est le fils d'un conteneur en grille ({{cssxref("grid")}}) pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li>
- <li>Un élément pour lequel {{cssxref("opacity")}} est inférieure à 1 (cf. <a href="https://www.w3.org/TR/css3-color/#transparency">la spécification</a>)</li>
- <li>Un élément pour lequel {{cssxref("mix-blend-mode")}} est différente de <code>normal</code></li>
- <li>Un élément pour lequel n'importe laquelle de ces propriétés est différente de <code>none</code> :
-  <ul>
-   <li>{{cssxref("transform")}}</li>
-   <li>{{cssxref("filter")}}</li>
-   <li>{{cssxref("perspective")}}</li>
-   <li>{{cssxref("clip-path")}}</li>
-   <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li>
-  </ul>
- </li>
- <li>Un élément pour lequel {{cssxref("isolation")}} vaut <code>isolate</code></li>
- <li>Un élément pour lequel {{cssxref("-webkit-overflow-scrolling")}} vaut <code>touch</code>.</li>
- <li>Un élément pour lequel la valeur de la propriété {{cssxref("will-change")}} concerne une propriété qui créerait un contexte d'empilement avec une valeur non-initiale.</li>
- <li>Un élément pour lequel la valeur de la propriété {{cssxref("contain")}} est <code>layout</code>, <code>paint</code> ou une valeur composite contenant un de ces mots-clés (par exemple <code>contain: strict</code> ou <code>contain: content</code>).</li>
-</ul>
-
-<p>Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des <code>z-index</code> pour les contextes d'empilement des éléments fils ont uniquement un sens pour l'élément parent. Les contextes d'empilement sont traités de façon atomique, comme une seule unité, dans le contexte de l'élément parent.</p>
-
-<p>En bref :</p>
-
-<ul>
- <li>Les contextes d'empilement peuvent être enfants d'autres contextes d'empilement, et ensemble forment une hiérarchie de contextes d'empilement.</li>
- <li>Chaque contexte d'empilement est indépendant de ses voisins : seuls les éléments enfants sont pris en compte lorsque l'empilement est traité.</li>
- <li>Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.</li>
-</ul>
-
-<div class="note">
-  <p><strong>Note :</strong> La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété <code>z-index</code> créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont <em>assimilés</em> par le contexte d'empilement parent.</p>
-</div>
+{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
 
-<h4 id="Illustration">Illustration</h4>
-
-<p><img alt="Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index" src="understanding_zindex_04.png"></p>
-
-<p>Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur <code>z-index</code>. La hiérarchie des contextes d'empilement est organisée comme suit :</p>
-
-<ul>
- <li>Racine
-  <ul>
-   <li>DIV #1</li>
-   <li>DIV #2</li>
-   <li>DIV #3
-    <ul>
-     <li>DIV #4</li>
-     <li>DIV #5</li>
-     <li>DIV #6</li>
-    </ul>
-   </li>
-  </ul>
- </li>
-</ul>
-
-<p>Il est important de noter que les blocs <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em> sont les enfants du bloc <em>DIV #3</em>, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément <em>DIV #3</em> est prise en compte pour l'empilement dans l'élément racine par rapport à ses <em>DIV</em> voisins.</p>
-
-<div class="note">
-<p><strong>Note :</strong>
-
-<ul>
- <li><em>DIV #4</em> est rendu dans le bloc <em>DIV #1</em> car le <code>z-index</code> (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le <code>z-index</code> (6) du bloc <em>DIV #4</em> est valide à l'intérieur du contexte d'empilement du bloc <em>DIV #3</em>. Ainsi, DIV #4 se trouve sous <em>DIV #1</em>, parce que <em>DIV #4</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus petite.</li>
- <li>Pour la même raison <em>DIV #2</em> (dont le <code>z-index</code> est 2) est rendu sous <em>DIV#5</em> (de <code>z-index</code> égal à 1) parce que <em>DIV #5</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus grande.</li>
- <li>Le <code>z-index</code> du bloc <em>DIV #3</em> est 4, mais cette valeur est indépendante du <code>z-index</code> du bloc <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em>, parce qu'il appartient à un contexte d'empilement différent.</li>
-</ul>
-</p>
-</div>
+## Le contexte d'empilement
+
+Dans l'exemple précédent, [Ajout de z-index](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index), les blocs _DIV_ sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de `z-index` est la plus forte. Dans cet exemple, il n'y a qu'un seul _contexte d'empilement_, qui est l'élément `HTML` racine de la page.
+
+Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc _DIV_ (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de `z-index` différente de _auto_ crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de `z-index` de ses enfants n'ont de signification que dans ce contexte. Le bloc _DIV_ entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.
+
+Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :
+
+- L'élément racine du document (HTML)
+- Un élément pour lequel {{cssxref("position")}} vaut `absolute` ou `relative` et pour lequel {{cssxref("z-index")}} est différente de `auto`
+- Un élément pour lequel {{cssxref("position")}} vaut `fixed` ou `sticky`
+- Un élément qui est le fils d'un conteneur flexible ({{cssxref("flexbox")}}) pour lequel {{cssxref("z-index")}} est différente de `auto`
+- Un élément qui est le fils d'un conteneur en grille ({{cssxref("grid")}}) pour lequel {{cssxref("z-index")}} est différente de `auto`
+- Un élément pour lequel {{cssxref("opacity")}} est inférieure à 1 (cf. [la spécification](https://www.w3.org/TR/css3-color/#transparency))
+- Un élément pour lequel {{cssxref("mix-blend-mode")}} est différente de `normal`
+- Un élément pour lequel n'importe laquelle de ces propriétés est différente de `none` :
+
+  - {{cssxref("transform")}}
+  - {{cssxref("filter")}}
+  - {{cssxref("perspective")}}
+  - {{cssxref("clip-path")}}
+  - {{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}
+
+- Un élément pour lequel {{cssxref("isolation")}} vaut `isolate`
+- Un élément pour lequel {{cssxref("-webkit-overflow-scrolling")}} vaut `touch`.
+- Un élément pour lequel la valeur de la propriété {{cssxref("will-change")}} concerne une propriété qui créerait un contexte d'empilement avec une valeur non-initiale.
+- Un élément pour lequel la valeur de la propriété {{cssxref("contain")}} est `layout`, `paint` ou une valeur composite contenant un de ces mots-clés (par exemple `contain: strict` ou `contain: content`).
+
+Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des `z-index` pour les contextes d'empilement des éléments fils ont uniquement un sens pour l'élément parent. Les contextes d'empilement sont traités de façon atomique, comme une seule unité, dans le contexte de l'élément parent.
+
+En bref :
+
+- Les contextes d'empilement peuvent être enfants d'autres contextes d'empilement, et ensemble forment une hiérarchie de contextes d'empilement.
+- Chaque contexte d'empilement est indépendant de ses voisins : seuls les éléments enfants sont pris en compte lorsque l'empilement est traité.
+- Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.
 
-<h2 id="Exemple">Exemple</h2>
+> **Note :** La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété `z-index` créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont _assimilés_ par le contexte d'empilement parent.
 
-<h3 id="CSS">CSS</h3>
+#### Illustration
 
-<pre class="brush: css">* {
+![Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index](understanding_zindex_04.png)
+
+Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur `z-index`. La hiérarchie des contextes d'empilement est organisée comme suit :
+
+- Racine
+
+  - DIV #1
+  - DIV #2
+  - DIV #3
+
+    - DIV #4
+    - DIV #5
+    - DIV #6
+
+Il est important de noter que les blocs _DIV #4_, _DIV #5_ et _DIV #6_ sont les enfants du bloc _DIV #3_, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément _DIV #3_ est prise en compte pour l'empilement dans l'élément racine par rapport à ses _DIV_ voisins.
+
+> **Note :**
+>
+> - _DIV #4_ est rendu dans le bloc _DIV #1_ car le `z-index` (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le `z-index` (6) du bloc _DIV #4_ est valide à l'intérieur du contexte d'empilement du bloc _DIV #3_. Ainsi, DIV #4 se trouve sous _DIV #1_, parce que _DIV #4_ appartient à _DIV #3_, qui possède une valeur de `z-index` plus petite.
+> - Pour la même raison _DIV #2_ (dont le `z-index` est 2) est rendu sous _DIV#5_ (de `z-index` égal à 1) parce que _DIV #5_ appartient à _DIV #3_, qui possède une valeur de `z-index` plus grande.
+> - Le `z-index` du bloc _DIV #3_ est 4, mais cette valeur est indépendante du `z-index` du bloc _DIV #4_, _DIV #5_ et _DIV #6_, parce qu'il appartient à un contexte d'empilement différent.
+
+## Exemple
+
+### CSS
+
+```css
+* {
   margin: 0;
 }
 
@@ -169,49 +152,50 @@ h1 {
   padding-top: 125px;
   background-color: #ddf;
   text-align: ce        }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="div1"&gt;
-  &lt;h1&gt;Division Element #1&lt;/h1&gt;
-  &lt;code&gt;position: relative;&lt;br/&gt;
-  z-index: 5;&lt;/code&gt;
-&lt;/div&gt;
+```html
+<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
 
-&lt;div id="div2"&gt;
-  &lt;h1&gt;Division Element #2&lt;/h1&gt;
-  &lt;code&gt;position: relative;&lt;br/&gt;
-  z-index: 2;&lt;/code&gt;
-&lt;/div&gt;
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
 
-&lt;div id="div3"&gt;
+<div id="div3">
 
-  &lt;div id="div4"&gt;
-    &lt;h1&gt;Division Element #4&lt;/h1&gt;
-    &lt;code&gt;position: relative;&lt;br/&gt;
-    z-index: 6;&lt;/code&gt;
-  &lt;/div&gt;
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
 
-  &lt;h1&gt;Division Element #3&lt;/h1&gt;
-  &lt;code&gt;position: absolute;&lt;br/&gt;
-  z-index: 4;&lt;/code&gt;
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
 
-  &lt;div id="div5"&gt;
-    &lt;h1&gt;Division Element #5&lt;/h1&gt;
-    &lt;code&gt;position: relative;&lt;br/&gt;
-    z-index: 1;&lt;/code&gt;
-  &lt;/div&gt;
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
 
-  &lt;div id="div6"&gt;
-    &lt;h1&gt;Division Element #6&lt;/h1&gt;
-    &lt;code&gt;position: absolute;&lt;br/&gt;
-    z-index: 3;&lt;/code&gt;
-  &lt;/div&gt;
-</pre>
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemple","556","396")}}</p>
+{{EmbedLiveSample("Exemple","556","396")}}
 
-<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}</div>
+{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_properties_reference/index.md b/files/fr/web/css/css_properties_reference/index.md
index a6c6fcca3a..ace60c6ecc 100644
--- a/files/fr/web/css/css_properties_reference/index.md
+++ b/files/fr/web/css/css_properties_reference/index.md
@@ -5,313 +5,85 @@ tags:
   - CSS
 translation_of: Web/CSS/CSS_Properties_Reference
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<h2 id="Référence_des_propriétés_CSS_usuelles">Référence des propriétés CSS usuelles</h2>
+## Référence des propriétés CSS usuelles
 
-<p>Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM,  habituellement utilisée avec JavaScript :</p>
+Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM,  habituellement utilisée avec JavaScript :
 
-<div class="note">
-  <p><strong>Note :</strong>  Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a> et <a href="/fr/docs/Web/CSS/Mozilla_Extensions">les extensions CSS spécifiques à Mozilla</a>.</p>
-</div>
+> **Note :**  Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir [la référence CSS](/fr/docs/Web/CSS/Reference) et [les extensions CSS spécifiques à Mozilla](/fr/docs/Web/CSS/Mozilla_Extensions).
 
-<table>
- <thead>
-  <tr>
-   <th scope="col"><strong>CSS</strong></th>
-   <th scope="col"><strong>JavaScript</strong></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>background</code></td>
-   <td><code>background</code></td>
-  </tr>
-  <tr>
-   <td><code>background-attachment</code></td>
-   <td><code>backgroundAttachment</code></td>
-  </tr>
-  <tr>
-   <td><code>background-color</code></td>
-   <td><code>backgroundColor</code></td>
-  </tr>
-  <tr>
-   <td><code>background-image</code></td>
-   <td><code>backgroundImage</code></td>
-  </tr>
-  <tr>
-   <td><code>background-position</code></td>
-   <td><code>backgroundPosition</code></td>
-  </tr>
-  <tr>
-   <td><code>background-repeat</code></td>
-   <td><code>backgroundRepeat</code></td>
-  </tr>
-  <tr>
-   <td><code>border</code></td>
-   <td><code>border</code></td>
-  </tr>
-  <tr>
-   <td><code>border-bottom</code></td>
-   <td><code>borderBottom</code></td>
-  </tr>
-  <tr>
-   <td><code>border-bottom-color</code></td>
-   <td><code>borderBottomColor</code></td>
-  </tr>
-  <tr>
-   <td><code>border-bottom-style</code></td>
-   <td><code>borderBottomStyle</code></td>
-  </tr>
-  <tr>
-   <td><code>border-bottom-width</code></td>
-   <td><code>borderBottomWidth</code></td>
-  </tr>
-  <tr>
-   <td><code>border-color</code></td>
-   <td><code>borderColor</code></td>
-  </tr>
-  <tr>
-   <td><code>border-left</code></td>
-   <td><code>borderLeft</code></td>
-  </tr>
-  <tr>
-   <td><code>border-left-color</code></td>
-   <td><code>borderLeftColor</code></td>
-  </tr>
-  <tr>
-   <td><code>border-left-style</code></td>
-   <td><code>borderLeftStyle</code></td>
-  </tr>
-  <tr>
-   <td><code>border-left-width</code></td>
-   <td><code>borderLeftWidth</code></td>
-  </tr>
-  <tr>
-   <td><code>border-right</code></td>
-   <td><code>borderRight</code></td>
-  </tr>
-  <tr>
-   <td><code>border-right-color</code></td>
-   <td><code>borderRightColor</code></td>
-  </tr>
-  <tr>
-   <td><code>border-right-style</code></td>
-   <td><code>borderRightStyle</code></td>
-  </tr>
-  <tr>
-   <td><code>border-right-width</code></td>
-   <td><code>borderRightWidth</code></td>
-  </tr>
-  <tr>
-   <td><code>border-style</code></td>
-   <td><code>borderStyle</code></td>
-  </tr>
-  <tr>
-   <td><code>border-top</code></td>
-   <td><code>borderTop</code></td>
-  </tr>
-  <tr>
-   <td><code>border-top-color</code></td>
-   <td><code>borderTopColor</code></td>
-  </tr>
-  <tr>
-   <td><code>border-top-style</code></td>
-   <td><code>borderTopStyle</code></td>
-  </tr>
-  <tr>
-   <td><code>border-top-width</code></td>
-   <td><code>borderTopWidth</code></td>
-  </tr>
-  <tr>
-   <td><code>border-width</code></td>
-   <td><code>borderWidth</code></td>
-  </tr>
-  <tr>
-   <td><code>clear</code></td>
-   <td><code>clear</code></td>
-  </tr>
-  <tr>
-   <td><code>clip</code></td>
-   <td><code>clip</code></td>
-  </tr>
-  <tr>
-   <td><code>color</code></td>
-   <td><code>color</code></td>
-  </tr>
-  <tr>
-   <td><code>cursor</code></td>
-   <td><code>cursor</code></td>
-  </tr>
-  <tr>
-   <td><code>display</code></td>
-   <td><code>display</code></td>
-  </tr>
-  <tr>
-   <td><code>filter</code></td>
-   <td><code>filter</code></td>
-  </tr>
-  <tr>
-   <td><code>float</code></td>
-   <td><code>cssFloat</code></td>
-  </tr>
-  <tr>
-   <td><code>font</code></td>
-   <td><code>font</code></td>
-  </tr>
-  <tr>
-   <td><code>font-family</code></td>
-   <td><code>fontFamily</code></td>
-  </tr>
-  <tr>
-   <td><code>font-size</code></td>
-   <td><code>fontSize</code></td>
-  </tr>
-  <tr>
-   <td><code>font-variant</code></td>
-   <td><code>fontVariant</code></td>
-  </tr>
-  <tr>
-   <td><code>font-weight</code></td>
-   <td><code>fontWeight</code></td>
-  </tr>
-  <tr>
-   <td><code>height</code></td>
-   <td><code>height</code></td>
-  </tr>
-  <tr>
-   <td><code>left</code></td>
-   <td><code>left</code></td>
-  </tr>
-  <tr>
-   <td><code>letter-spacing</code></td>
-   <td><code>letterSpacing</code></td>
-  </tr>
-  <tr>
-   <td><code>line-height</code></td>
-   <td><code>lineHeight</code></td>
-  </tr>
-  <tr>
-   <td><code>list-style</code></td>
-   <td><code>listStyle</code></td>
-  </tr>
-  <tr>
-   <td><code>list-style-image</code></td>
-   <td><code>listStyleImage</code></td>
-  </tr>
-  <tr>
-   <td><code>list-style-position</code></td>
-   <td><code>listStylePosition</code></td>
-  </tr>
-  <tr>
-   <td><code>list-style-type</code></td>
-   <td><code>listStyleType</code></td>
-  </tr>
-  <tr>
-   <td><code>margin</code></td>
-   <td><code>margin</code></td>
-  </tr>
-  <tr>
-   <td><code>margin-bottom</code></td>
-   <td><code>marginBottom</code></td>
-  </tr>
-  <tr>
-   <td><code>margin-left</code></td>
-   <td><code>marginLeft</code></td>
-  </tr>
-  <tr>
-   <td><code>margin-right</code></td>
-   <td><code>marginRight</code></td>
-  </tr>
-  <tr>
-   <td><code>margin-top</code></td>
-   <td><code>marginTop</code></td>
-  </tr>
-  <tr>
-   <td><code>overflow</code></td>
-   <td><code>overflow</code></td>
-  </tr>
-  <tr>
-   <td><code>padding</code></td>
-   <td><code>padding</code></td>
-  </tr>
-  <tr>
-   <td><code>padding-bottom</code></td>
-   <td><code>paddingBottom</code></td>
-  </tr>
-  <tr>
-   <td><code>padding-left</code></td>
-   <td><code>paddingLeft</code></td>
-  </tr>
-  <tr>
-   <td><code>padding-right</code></td>
-   <td><code>paddingRight</code></td>
-  </tr>
-  <tr>
-   <td><code>padding-top</code></td>
-   <td><code>paddingTop</code></td>
-  </tr>
-  <tr>
-   <td><code>page-break-after</code></td>
-   <td><code>pageBreakAfter</code></td>
-  </tr>
-  <tr>
-   <td><code>page-break-before</code></td>
-   <td><code>pageBreakBefore</code></td>
-  </tr>
-  <tr>
-   <td><code>position</code></td>
-   <td><code>position</code></td>
-  </tr>
-  <tr>
-   <td><code>stroke-dasharray</code></td>
-   <td><code>strokeDasharray</code></td>
-  </tr>
-  <tr>
-   <td><code>stroke-dashoffset</code></td>
-   <td><code>strokeDashoffset</code></td>
-  </tr>
-  <tr>
-   <td><code>stroke-width</code></td>
-   <td><code>strokeWidth</code></td>
-  </tr>
-  <tr>
-   <td><code>text-align</code></td>
-   <td><code>textAlign</code></td>
-  </tr>
-  <tr>
-   <td><code>text-decoration</code></td>
-   <td><code>textDecoration</code></td>
-  </tr>
-  <tr>
-   <td><code>text-indent</code></td>
-   <td><code>textIndent</code></td>
-  </tr>
-  <tr>
-   <td><code>text-transform</code></td>
-   <td><code>textTransform</code></td>
-  </tr>
-  <tr>
-   <td><code>top</code></td>
-   <td><code>top</code></td>
-  </tr>
-  <tr>
-   <td><code>vertical-align</code></td>
-   <td><code>verticalAlign</code></td>
-  </tr>
-  <tr>
-   <td><code>visibility</code></td>
-   <td><code>visibility</code></td>
-  </tr>
-  <tr>
-   <td><code>width</code></td>
-   <td><code>width</code></td>
-  </tr>
-  <tr>
-   <td><code>z-index</code></td>
-   <td><code>zIndex</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
+| **CSS**                 | **JavaScript**         |
+| ----------------------- | ---------------------- |
+| `background`            | `background`           |
+| `background-attachment` | `backgroundAttachment` |
+| `background-color`      | `backgroundColor`      |
+| `background-image`      | `backgroundImage`      |
+| `background-position`   | `backgroundPosition`   |
+| `background-repeat`     | `backgroundRepeat`     |
+| `border`                | `border`               |
+| `border-bottom`         | `borderBottom`         |
+| `border-bottom-color`   | `borderBottomColor`    |
+| `border-bottom-style`   | `borderBottomStyle`    |
+| `border-bottom-width`   | `borderBottomWidth`    |
+| `border-color`          | `borderColor`          |
+| `border-left`           | `borderLeft`           |
+| `border-left-color`     | `borderLeftColor`      |
+| `border-left-style`     | `borderLeftStyle`      |
+| `border-left-width`     | `borderLeftWidth`      |
+| `border-right`          | `borderRight`          |
+| `border-right-color`    | `borderRightColor`     |
+| `border-right-style`    | `borderRightStyle`     |
+| `border-right-width`    | `borderRightWidth`     |
+| `border-style`          | `borderStyle`          |
+| `border-top`            | `borderTop`            |
+| `border-top-color`      | `borderTopColor`       |
+| `border-top-style`      | `borderTopStyle`       |
+| `border-top-width`      | `borderTopWidth`       |
+| `border-width`          | `borderWidth`          |
+| `clear`                 | `clear`                |
+| `clip`                  | `clip`                 |
+| `color`                 | `color`                |
+| `cursor`                | `cursor`               |
+| `display`               | `display`              |
+| `filter`                | `filter`               |
+| `float`                 | `cssFloat`             |
+| `font`                  | `font`                 |
+| `font-family`           | `fontFamily`           |
+| `font-size`             | `fontSize`             |
+| `font-variant`          | `fontVariant`          |
+| `font-weight`           | `fontWeight`           |
+| `height`                | `height`               |
+| `left`                  | `left`                 |
+| `letter-spacing`        | `letterSpacing`        |
+| `line-height`           | `lineHeight`           |
+| `list-style`            | `listStyle`            |
+| `list-style-image`      | `listStyleImage`       |
+| `list-style-position`   | `listStylePosition`    |
+| `list-style-type`       | `listStyleType`        |
+| `margin`                | `margin`               |
+| `margin-bottom`         | `marginBottom`         |
+| `margin-left`           | `marginLeft`           |
+| `margin-right`          | `marginRight`          |
+| `margin-top`            | `marginTop`            |
+| `overflow`              | `overflow`             |
+| `padding`               | `padding`              |
+| `padding-bottom`        | `paddingBottom`        |
+| `padding-left`          | `paddingLeft`          |
+| `padding-right`         | `paddingRight`         |
+| `padding-top`           | `paddingTop`           |
+| `page-break-after`      | `pageBreakAfter`       |
+| `page-break-before`     | `pageBreakBefore`      |
+| `position`              | `position`             |
+| `stroke-dasharray`      | `strokeDasharray`      |
+| `stroke-dashoffset`     | `strokeDashoffset`     |
+| `stroke-width`          | `strokeWidth`          |
+| `text-align`            | `textAlign`            |
+| `text-decoration`       | `textDecoration`       |
+| `text-indent`           | `textIndent`           |
+| `text-transform`        | `textTransform`        |
+| `top`                   | `top`                  |
+| `vertical-align`        | `verticalAlign`        |
+| `visibility`            | `visibility`           |
+| `width`                 | `width`                |
+| `z-index`               | `zIndex`               |
diff --git a/files/fr/web/css/css_ruby/index.md b/files/fr/web/css/css_ruby/index.md
index 1f9fade2e6..90d4bd5d64 100644
--- a/files/fr/web/css/css_ruby/index.md
+++ b/files/fr/web/css/css_ruby/index.md
@@ -9,34 +9,19 @@ tags:
   - Ruby
 translation_of: Web/CSS/CSS_Ruby
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Ruby Layout</strong></em> est un module CSS qui fournit des propriétés de contrôle pour le rendu et la mise en forme <a href="https://fr.wikipedia.org/wiki/Ruby_(linguistique)">des annotations Ruby</a> utilisées dans les documents d'Asie orientale afin d'indiquer la prononciation ou d'annoter le texte de base.</p>
+**_CSS Ruby Layout_** est un module CSS qui fournit des propriétés de contrôle pour le rendu et la mise en forme [des annotations Ruby](<https://fr.wikipedia.org/wiki/Ruby_(linguistique)>) utilisées dans les documents d'Asie orientale afin d'indiquer la prononciation ou d'annoter le texte de base.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("ruby-align")}}</li>
- <li>{{cssxref("ruby-position")}}</li>
-</ul>
+- {{cssxref("ruby-align")}}
+- {{cssxref("ruby-position")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Ruby')}}</td>
-   <td>{{Spec2('CSS3 Ruby')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                    | État                         | Commentaires         |
+| -------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('CSS3 Ruby')}} | {{Spec2('CSS3 Ruby')}} | Définition initiale. |
diff --git a/files/fr/web/css/css_scroll_snap/basic_concepts/index.md b/files/fr/web/css/css_scroll_snap/basic_concepts/index.md
index 2eebe3962b..181d8097fc 100644
--- a/files/fr/web/css/css_scroll_snap/basic_concepts/index.md
+++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.md
@@ -8,64 +8,62 @@ tags:
 translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts
 original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="https://drafts.csswg.org/css-scroll-snap-1/">Le module de spécification CSS <em>Scroll Snap</em></a> fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).</p>
+[Le module de spécification CSS _Scroll Snap_](https://drafts.csswg.org/css-scroll-snap-1/) fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).
 
-<h2 id="Principes_fondamentaux">Principes fondamentaux</h2>
+## Principes fondamentaux
 
-<p>Les propriétés principales définies par la spécification <em>Scroll Snap</em> sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété <code>scroll-snap-type</code> s'utilise sur <a href="/fr/docs/Glossary/Scroll_container">le conteneur de défilement (<em>scroll container</em>)</a> et établit le type et la direction du défilement.</p>
+Les propriétés principales définies par la spécification _Scroll Snap_ sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété `scroll-snap-type` s'utilise sur [le conteneur de défilement (_scroll container_)](/fr/docs/Glossary/Scroll_container) et établit le type et la direction du défilement.
 
-<p>La propriété <code>scroll-snap-align</code> doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et <code>scroll-snap-align</code> est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.</p>
+La propriété `scroll-snap-align` doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et `scroll-snap-align` est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.
 
-<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}
 
-<h2 id="Utiliser_scroll-snap-type">Utiliser <code>scroll-snap-type</code></h2>
+## Utiliser `scroll-snap-type`
 
-<p>La propriété {{CSSxRef("scroll-snap-type")}} doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : <code>x</code> ou <code>y</code> ou avec des valeurs logiques : <code>block</code> ou <code>inline</code>. On peut également utiliser le mot-clé <code>both</code> afin d'avoir un défilement et des accroches selon les deux axes.</p>
+La propriété {{CSSxRef("scroll-snap-type")}} doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : `x` ou `y` ou avec des valeurs logiques : `block` ou `inline`. On peut également utiliser le mot-clé `both` afin d'avoir un défilement et des accroches selon les deux axes.
 
-<p>Cette propriété s'utilise également avec les mots-clés <code>mandatory</code> ou <code>proximity</code>. Le mot-clé <code>mandatory</code> indique au navigateur que le contenu <em>doit</em> s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé <code>proximity</code> indique que le contenu <em>peut</em> s'accrocher sur un point mais que ce n'est pas obligatoire.</p>
+Cette propriété s'utilise également avec les mots-clés `mandatory` ou `proximity`. Le mot-clé `mandatory` indique au navigateur que le contenu _doit_ s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé `proximity` indique que le contenu _peut_ s'accrocher sur un point mais que ce n'est pas obligatoire.
 
-<p>La valeur <code>mandatory</code> permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera <code>mandatory</code> dans des situations maîtrisées où la taille du contenu sur un écran est connue.</p>
+La valeur `mandatory` permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera `mandatory` dans des situations maîtrisées où la taille du contenu sur un écran est connue.
 
-<p>La valeur <code>proximity</code> déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de <code>mandatory</code> à <code>proximity</code> afin d'observer l'effet obtenu.</p>
+La valeur `proximity` déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de `mandatory` à `proximity` afin d'observer l'effet obtenu.
 
-<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}
 
-<h2 id="Utiliser_scroll-snap-align">Utiliser <code>scroll-snap-align</code></h2>
+## Utiliser `scroll-snap-align`
 
-<p>La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs <code>start</code>, <code>end</code> ou <code>center</code>. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur <code>scroll-snap-align</code> dans l'exemple interactif qui suit pour voir le résultat obtenu.</p>
+La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs `start`, `end` ou `center`. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur `scroll-snap-align` dans l'exemple interactif qui suit pour voir le résultat obtenu.
 
-<p>{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}
 
-<h2 id="Ajuster_la_position_de_défilement_avec_un_remplissage">Ajuster la position de défilement avec un remplissage</h2>
+## Ajuster la position de défilement avec un remplissage
 
-<p>Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété {{CSSxRef("scroll-padding")}} (ou les propriétés détaillées équivalentes) afin de définir un remplissage (<em>padding</em>) pour décaler la position du contenu.</p>
+Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété {{CSSxRef("scroll-padding")}} (ou les propriétés détaillées équivalentes) afin de définir un remplissage (_padding_) pour décaler la position du contenu.
 
-<p>Dans l'exemple qui suit, on paramètre <code>scroll-padding</code> à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de <code>scroll-padding</code> afin de voir l'impact sur le décalage obtenu.</p>
+Dans l'exemple qui suit, on paramètre `scroll-padding` à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de `scroll-padding` afin de voir l'impact sur le décalage obtenu.
 
-<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}
 
-<p>Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant <code>scroll-padding</code>, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <code>&lt;h1&gt;</code> qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.</p>
+Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant `scroll-padding`, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre `<h1>` qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.
 
-<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}
 
-<h2 id="Ajouter_des_marges_sur_les_éléments_fils_du_défilement">Ajouter des marges sur les éléments fils du défilement</h2>
+## Ajouter des marges sur les éléments fils du défilement
 
-<p>Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété {{CSSxRef("scroll-margin")}} sur l'élément fils. <code>scroll-margin</code> définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :</p>
+Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété {{CSSxRef("scroll-margin")}} sur l'élément fils. `scroll-margin` définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :
 
-<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}
 
-<h2 id="La_propriété_scroll-snap-stop">La propriété <code>scroll-snap-stop</code></h2>
+## La propriété `scroll-snap-stop`
 
-<p>La propriété {{CSSxRef("scroll-snap-stop")}} indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.</p>
+La propriété {{CSSxRef("scroll-snap-stop")}} indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.
 
-<p>Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.</p>
+Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.
 
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>scroll-snap-stop</code> est actuellement mise en question dans la version <em>Candidate Recommendation</em> de la spécification et pourrait être retirée.</p>
-</div>
+> **Note :** La propriété `scroll-snap-stop` est actuellement mise en question dans la version _Candidate Recommendation_ de la spécification et pourrait être retirée.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat">poursuivre avec le guide suivant</a> pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.</p>
+Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez [poursuivre avec le guide suivant](/fr/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat) pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.
diff --git a/files/fr/web/css/css_scroll_snap/browser_compat/index.md b/files/fr/web/css/css_scroll_snap/browser_compat/index.md
index c1eb4da23a..c68c8d9693 100644
--- a/files/fr/web/css/css_scroll_snap/browser_compat/index.md
+++ b/files/fr/web/css/css_scroll_snap/browser_compat/index.md
@@ -9,39 +9,37 @@ tags:
 translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat
 original_slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Firefox implémentait initialement une première version de la spécification <em>Scroll Snap</em> appelée alors <em>Scroll Snap Points</em>. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.</p>
+Firefox implémentait initialement une première version de la spécification _Scroll Snap_ appelée alors _Scroll Snap Points_. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.
 
-<h2 id="Que_faire_si_mon_style_utilisait_l'ancienne_implémentation_(Firefox_&lt;_68)">Que faire si mon style utilisait l'ancienne implémentation (Firefox &lt; 68) ?</h2>
+## Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?
 
-<p>Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par <em>Scroll Snap Points</em>, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.</p>
+Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par _Scroll Snap Points_, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.
 
-<p>Voici les principaux points d'attention :</p>
+Voici les principaux points d'attention :
 
-<ul>
- <li>Les propriétés {{CSSxRef("scroll-snap-type-x")}} et {{CSSxRef("scroll-snap-type-y")}} ont été abandonnées</li>
- <li>La propriété {{CSSxRef("scroll-snap-type")}} n'est plus une propriété raccourcie et l'ancienne syntaxe courte (ex. <code>scroll-snap-type: mandatory</code>) cessera de fonctionner</li>
-</ul>
+- Les propriétés {{CSSxRef("scroll-snap-type-x")}} et {{CSSxRef("scroll-snap-type-y")}} ont été abandonnées
+- La propriété {{CSSxRef("scroll-snap-type")}} n'est plus une propriété raccourcie et l'ancienne syntaxe courte (ex. `scroll-snap-type: mandatory`) cessera de fonctionner
 
-<h2 id="Comment_utiliser_l'ancienne_implémentation_comme_méthode_de_recours">Comment utiliser l'ancienne implémentation comme méthode de recours ?</h2>
+## Comment utiliser l'ancienne implémentation comme méthode de recours ?
 
-<p>Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.</p>
+Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.
 
-<p>Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.</p>
+Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.
 
-<p>L'exemple contient les propriétés {{CSSxRef("scroll-snap-points-y")}} et {{CSSxRef("scroll-snap-destination")}}, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété {{CSSxRef("scroll-snap-type")}} à deux reprises, une fois avec la valeur <code>y</code> (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur <code>y</code>.</p>
+L'exemple contient les propriétés {{CSSxRef("scroll-snap-points-y")}} et {{CSSxRef("scroll-snap-destination")}}, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété {{CSSxRef("scroll-snap-type")}} à deux reprises, une fois avec la valeur `y` (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur `y`.
 
-<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}
 
-<p>Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section <em><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap_Points">Scroll Snap Points</a></em>.</p>
+Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section _[Scroll Snap Points](/fr/docs/Web/CSS/CSS_Scroll_Snap_Points)_.
 
-<h2 id="Faut-il_utiliser_les_deux_spécifications">Faut-il utiliser les deux spécifications ?</h2>
+## Faut-il utiliser les deux spécifications ?
 
-<p>Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.</p>
+Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.
 
-<p>Si vous souhaitez tester la prise en charge grâce <a href="/en-US/docs/Web/CSS/@supports">aux requêtes de fonctionnalité</a>, nous vous recommandons de tester {{CSSxRef("scroll-snap-align")}} car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.</p>
+Si vous souhaitez tester la prise en charge grâce [aux requêtes de fonctionnalité](/en-US/docs/Web/CSS/@supports), nous vous recommandons de tester {{CSSxRef("scroll-snap-align")}} car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.
 
-<h2 id="Pourquoi_existent_deux_versions">Pourquoi existent deux versions ?</h2>
+## Pourquoi existent deux versions ?
 
-<p>Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.</p>
+Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.
diff --git a/files/fr/web/css/css_scroll_snap/index.md b/files/fr/web/css/css_scroll_snap/index.md
index 0c9ccd8baa..6e2c73b659 100644
--- a/files/fr/web/css/css_scroll_snap/index.md
+++ b/files/fr/web/css/css_scroll_snap/index.md
@@ -8,77 +8,56 @@ tags:
   - Vue d'ensemble
 translation_of: Web/CSS/CSS_Scroll_Snap
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Scroll Snap</strong></em> est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.</p>
+**_CSS Scroll Snap_** est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.
 
-<div class="note">
-<p><strong>Note :</strong> La version précédente ce module, <em>Scroll Snap Points</em>, est dépréciée et est désormais remplacée par <em>CSS Scroll Snap</em>.</p>
-</div>
+> **Note :** La version précédente ce module, _Scroll Snap Points_, est dépréciée et est désormais remplacée par _CSS Scroll Snap_.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés_CSS_applicables_aux_conteneurs">Propriétés CSS applicables aux conteneurs</h3>
+### Propriétés CSS applicables aux conteneurs
 
-<ul>
- <li>{{cssxref("scroll-snap-type")}}</li>
- <li>{{cssxref("scroll-snap-stop")}}</li>
- <li>{{cssxref("scroll-padding")}}</li>
- <li>{{cssxref("scroll-padding-top")}}</li>
- <li>{{cssxref("scroll-padding-right")}}</li>
- <li>{{cssxref("scroll-padding-bottom")}}</li>
- <li>{{cssxref("scroll-padding-left")}}</li>
- <li>{{cssxref("scroll-padding-inline")}}</li>
- <li>{{cssxref("scroll-padding-inline-start")}}</li>
- <li>{{cssxref("scroll-padding-inline-end")}}</li>
- <li>{{cssxref("scroll-padding-block")}}</li>
- <li>{{cssxref("scroll-padding-block-start")}}</li>
- <li>{{cssxref("scroll-padding-block-end")}}</li>
-</ul>
+- {{cssxref("scroll-snap-type")}}
+- {{cssxref("scroll-snap-stop")}}
+- {{cssxref("scroll-padding")}}
+- {{cssxref("scroll-padding-top")}}
+- {{cssxref("scroll-padding-right")}}
+- {{cssxref("scroll-padding-bottom")}}
+- {{cssxref("scroll-padding-left")}}
+- {{cssxref("scroll-padding-inline")}}
+- {{cssxref("scroll-padding-inline-start")}}
+- {{cssxref("scroll-padding-inline-end")}}
+- {{cssxref("scroll-padding-block")}}
+- {{cssxref("scroll-padding-block-start")}}
+- {{cssxref("scroll-padding-block-end")}}
 
-<h3 id="Propriétés_CSS_applicables_aux_éléments_enfants">Propriétés CSS applicables aux éléments enfants</h3>
+### Propriétés CSS applicables aux éléments enfants
 
-<ul>
- <li>{{cssxref("scroll-snap-align")}}</li>
- <li>{{cssxref("scroll-margin")}}</li>
- <li>{{cssxref("scroll-margin-top")}}</li>
- <li>{{cssxref("scroll-margin-right")}}</li>
- <li>{{cssxref("scroll-margin-bottom")}}</li>
- <li>{{cssxref("scroll-margin-left")}}</li>
- <li>{{cssxref("scroll-margin-inline")}}</li>
- <li>{{cssxref("scroll-margin-inline-start")}}</li>
- <li>{{cssxref("scroll-margin-inline-end")}}</li>
- <li>{{cssxref("scroll-margin-block")}}</li>
- <li>{{cssxref("scroll-margin-block-start")}}</li>
- <li>{{cssxref("scroll-margin-block-end")}}</li>
-</ul>
+- {{cssxref("scroll-snap-align")}}
+- {{cssxref("scroll-margin")}}
+- {{cssxref("scroll-margin-top")}}
+- {{cssxref("scroll-margin-right")}}
+- {{cssxref("scroll-margin-bottom")}}
+- {{cssxref("scroll-margin-left")}}
+- {{cssxref("scroll-margin-inline")}}
+- {{cssxref("scroll-margin-inline-start")}}
+- {{cssxref("scroll-margin-inline-end")}}
+- {{cssxref("scroll-margin-block")}}
+- {{cssxref("scroll-margin-block-start")}}
+- {{cssxref("scroll-margin-block-end")}}
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Concepts_de_base">Concepts de bases pour <em>CSS Scroll Snap</em></a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilit%C3%A9_navigateurs">Compatiblité des navigateurs et <em>CSS Scroll Snap</em></a></li>
-</ul>
+- [Concepts de bases pour _CSS Scroll Snap_](/fr/docs/Web/CSS/CSS_Scroll_Snap/Concepts_de_base)
+- [Compatiblité des navigateurs et _CSS Scroll Snap_](/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilit%C3%A9_navigateurs)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                        | État                                             | Commentaires         |
+| ---------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Les informations de compatibilité sont présentes sur chacune des pages des propriétés. <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilit%C3%A9_navigateurs">Voir le guide sur la compatibilité des navigateurs</a> afin de comprendre comment les différentes versions de la spécification sont implémentées.</p>
+Les informations de compatibilité sont présentes sur chacune des pages des propriétés. [Voir le guide sur la compatibilité des navigateurs](/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilit%C3%A9_navigateurs) afin de comprendre comment les différentes versions de la spécification sont implémentées.
diff --git a/files/fr/web/css/css_scroll_snap_points/index.md b/files/fr/web/css/css_scroll_snap_points/index.md
index bc27bffd62..b31d86ee9d 100644
--- a/files/fr/web/css/css_scroll_snap_points/index.md
+++ b/files/fr/web/css/css_scroll_snap_points/index.md
@@ -9,41 +9,24 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Scroll_Snap_Points
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p><em><strong>CSS Scroll Snap Points</strong></em> (ou <strong>points d'accroche CSS</strong>) est un module CSS qui introduit les positions d'accroche. Il définit les propriétés qui gèrent les « points d'accroche » utilisés lors du défilement des éléments.</p>
+**_CSS Scroll Snap Points_** (ou **points d'accroche CSS**) est un module CSS qui introduit les positions d'accroche. Il définit les propriétés qui gèrent les « points d'accroche » utilisés lors du défilement des éléments.
 
-<div class="note">
-<p><strong>Note :</strong> C'est désormais le module de spécification <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap">CSS Scroll Snap</a> qui définit ces fonctionnalités.</p>
-</div>
+> **Note :** C'est désormais le module de spécification [CSS Scroll Snap](/fr/docs/Web/CSS/CSS_Scroll_Snap) qui définit ces fonctionnalités.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("scroll-snap-coordinate")}}</li>
- <li>{{cssxref("scroll-snap-destination")}}</li>
- <li>{{cssxref("scroll-snap-points-x")}}</li>
- <li>{{cssxref("scroll-snap-points-y")}}</li>
- <li>{{cssxref("scroll-snap-type")}}</li>
-</ul>
+- {{cssxref("scroll-snap-coordinate")}}
+- {{cssxref("scroll-snap-destination")}}
+- {{cssxref("scroll-snap-points-x")}}
+- {{cssxref("scroll-snap-points-y")}}
+- {{cssxref("scroll-snap-type")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
diff --git a/files/fr/web/css/css_scrollbars/index.md b/files/fr/web/css/css_scrollbars/index.md
index acba92423a..53a8c0c423 100644
--- a/files/fr/web/css/css_scrollbars/index.md
+++ b/files/fr/web/css/css_scrollbars/index.md
@@ -7,81 +7,66 @@ tags:
   - css scrollbars
 translation_of: Web/CSS/CSS_Scrollbars
 ---
-<div>{{CSSRef}} {{SeeCompatTable}}</div>
+{{CSSRef}} {{SeeCompatTable}}
 
-<p>Le module de spécification <em>CSS Scrollbars</em> standardise la mise en forme des barres de défilement (<em>scrollbar</em>) notamment introduite en 2000 avec Windows IE 5.5.</p>
+Le module de spécification _CSS Scrollbars_ standardise la mise en forme des barres de défilement (_scrollbar_) notamment introduite en 2000 avec Windows IE 5.5.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on crée une barre de défilement fine avec une piste verte et un curseur violet.</p>
+Dans l'exemple qui suit, on crée une barre de défilement fine avec une piste verte et un curseur violet.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.scroller {
+```css
+.scroller {
   width: 300px;
   height: 100px;
   overflow-y: scroll;
   scrollbar-color: rebeccapurple green;
   scrollbar-width: thin;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="scroller"&gt;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.&lt;/div&gt;</pre>
+```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>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("scrollbar-width")}}</li>
- <li>{{cssxref("scrollbar-color")}}</li>
-</ul>
+- {{cssxref("scrollbar-width")}}
+- {{cssxref("scrollbar-color")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Lors du paramétrage des barres de défilement, on s'assurera que le contraste avec les éléments alentour est suffisant et que la surface d'interaction est suffisamment grande pour les personnes qui utilisent une interface tactile.</p>
+Lors du paramétrage des barres de défilement, on s'assurera que le contraste avec les éléments alentour est suffisant et que la surface d'interaction est suffisamment grande pour les personnes qui utilisent une interface tactile.
 
-<ul>
- <li><a href="http://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html">Règles de base pour l'utilisabilité des barres de défilement, par Adrian Roselli (en anglais)</a></li>
-</ul>
+- [Règles de base pour l'utilisabilité des barres de défilement, par Adrian Roselli (en anglais)](http://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Scrollbars')}}</td>
-   <td>{{Spec2('CSS Scrollbars')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | État                                 | Commentaires        |
+| ---------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('CSS Scrollbars')}} | {{Spec2('CSS Scrollbars')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="scrollbar-width">scrollbar-width</h3>
+### scrollbar-width
 
-<div>{{Compat("css.properties.scrollbar-width")}}</div>
+{{Compat("css.properties.scrollbar-width")}}
 
-<h3 id="scrollbar-color">scrollbar-color</h3>
+### scrollbar-color
 
-<div>{{Compat("css.properties.scrollbar-color")}}</div>
+{{Compat("css.properties.scrollbar-color")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
- <li>{{CSSxRef("-ms-overflow-style")}}</li>
-</ul>
+- {{CSSxRef("::-webkit-scrollbar")}}
+- {{CSSxRef("-ms-overflow-style")}}
diff --git a/files/fr/web/css/css_selectors/index.md b/files/fr/web/css/css_selectors/index.md
index ead1aa386e..7c77728cab 100644
--- a/files/fr/web/css/css_selectors/index.md
+++ b/files/fr/web/css/css_selectors/index.md
@@ -10,106 +10,113 @@ tags:
 translation_of: Web/CSS/CSS_Selectors
 original_slug: Web/CSS/Sélecteurs_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong>Les sélecteurs</strong> définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.</p>
+**Les sélecteurs** définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.
 
-<h2 id="Les_sélecteurs_simples">Les sélecteurs simples</h2>
+## Les sélecteurs simples
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Type_selectors">Les sélecteurs de type</a></dt>
- <dd>Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.<br>
- <strong>Syntaxe :</strong> <code><var>nomelement</var></code><br>
- <strong>Exemple :</strong> <code>input</code> permettra de cibler n'importe quel élément {{HTMLElement('input')}}.</dd>
- <dt><a href="/fr/docs/Web/CSS/Class_selectors">Les sélecteurs de classe</a></dt>
- <dd>Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut <code>class</code>.<br>
- <strong>Syntaxe :</strong> <code>.<var>nomclasse</var></code><br>
- <strong>Exemple :</strong> <code>.index</code> permettra de cibler n'importe quel élément qui possède la classe <code>index</code> (vraisemblablement définie avec un attribut <code>class="index"</code>).</dd>
- <dt><a href="/fr/docs/Web/CSS/ID_selectors">Les sélecteurs d'identifiant</a></dt>
- <dd>Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut <code>id</code>. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.<br>
- <strong>Syntaxe :</strong> <code>#<var>valeurid</var></code><br>
- <strong>Exemple :</strong> <code>#toc</code> permettra de cibler l'élément qui possède l'identifiant <code>toc</code> (vraisemblablement défini avec un attribut <code>id="toc"</code>).</dd>
- <dt><a href="/fr/docs/Web/CSS/Universal_selectors">Le sélecteur universel</a></dt>
- <dd>Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.<br>
- <strong>Syntaxe :</strong> <code>*</code> <code>ns|*</code> <code>*|*</code><br>
- <strong>Exemple :</strong> <code>*</code> permettra de cibler tous les éléments du document.</dd>
- <dt><a href="/fr/docs/Web/CSS/Attribute_selectors">Les sélecteurs d'attribut</a></dt>
- <dd>Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.<br>
- <strong>Syntaxe :</strong> <code>[attr]</code> <code>[attr=valeur]</code> <code>[attr~=valeur]</code> <code>[attr|=valeur] [attr^=valeur]</code> <code>[attr$=valeur]</code> <code>[attr*=valeur]</code><br>
- <strong>Exemple :</strong> <code>[autoplay]</code> permettra de cibler tous les éléments qui possède l'attribut <code>autoplay</code> défini (quelle que soit sa valeur).</dd>
-</dl>
+- [Les sélecteurs de type](/fr/docs/Web/CSS/Type_selectors)
+  - : Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
+    **Syntaxe :** `nomelement`
+    **Exemple :** `input` permettra de cibler n'importe quel élément {{HTMLElement('input')}}.
+- [Les sélecteurs de classe](/fr/docs/Web/CSS/Class_selectors)
+  - : Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut `class`.
+    **Syntaxe :** `.nomclasse`
+    **Exemple :** `.index` permettra de cibler n'importe quel élément qui possède la classe `index` (vraisemblablement définie avec un attribut `class="index"`).
+- [Les sélecteurs d'identifiant](/fr/docs/Web/CSS/ID_selectors)
+  - : Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut `id`. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
+    **Syntaxe :** `#valeurid`
+    **Exemple :** `#toc` permettra de cibler l'élément qui possède l'identifiant `toc` (vraisemblablement défini avec un attribut `id="toc"`).
+- [Le sélecteur universel](/fr/docs/Web/CSS/Universal_selectors)
+  - : Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
+    **Syntaxe :** `*` `ns|*` `*|*`
+    **Exemple :** `*` permettra de cibler tous les éléments du document.
+- [Les sélecteurs d'attribut](/fr/docs/Web/CSS/Attribute_selectors)
+  - : Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
+    **Syntaxe :** `[attr]` `[attr=valeur]` `[attr~=valeur]` `[attr|=valeur] [attr^=valeur]` `[attr$=valeur]` `[attr*=valeur]`
+    **Exemple :** `[autoplay]` permettra de cibler tous les éléments qui possède l'attribut `autoplay` défini (quelle que soit sa valeur).
 
-<h2 id="Les_combinateurs">Les combinateurs</h2>
+## Les combinateurs
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Les sélecteurs de voisin direct</a></dt>
- <dd>Le combinateur <code>'+'</code> permet de sélectionner les nœuds qui suivent immédiatement un élément donné.<br>
- <strong>Syntaxe :</strong> <code><var>A</var> + <var>B</var></code><br>
- <strong>Exemple :</strong> <code>div + p</code> permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.</dd>
- <dt><a href="/fr/docs/Web/CSS/General_sibling_combinator">Les sélecteurs de voisins</a></dt>
- <dd>Le combinateur <code>'~'</code> permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.<br>
- <strong>Syntaxe :</strong> <code><var>A</var> ~ <var>B</var></code><br>
- <strong>Exemple :</strong> <code>p ~ span</code> permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.</dd>
- <dt><a href="/fr/docs/Web/CSS/Child_combinator">Les sélecteurs d'éléments enfants</a></dt>
- <dd>Le combinateur <code>'&gt;'</code> permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné.<br>
- <strong>Syntaxe :</strong> <code><var>A</var> &gt; <var>B</var></code><br>
- <strong>Exemple :</strong> <code>ul &gt; li</code> permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.</dd>
- <dt><a href="/fr/docs/Web/CSS/Descendant_combinator">Les sélecteurs d'éléments descendants</a></dt>
- <dd>Le combinateur <code> </code> (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné.<br>
- <strong>Syntaxe :</strong> <code>A B</code><br>
- <strong>Exemple :</strong> <code>div span</code> permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.</dd>
- <dt><a href="/fr/docs/Web/CSS/Column_combinator">Le combinateur de colonne</a>{{experimental_inline}}</dt>
- <dd>Le combinateur <code>||</code> sélectionne les nœuds qui appartiennent à une colonne. <strong>Syntaxe :</strong> <code>A || B</code><br>
- <strong>Exemple :</strong> <code>col || td</code> permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.</dd>
-</dl>
+- [Les sélecteurs de voisin direct](/fr/docs/Web/CSS/Adjacent_sibling_combinator)
+  - : Le combinateur `'+'` permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
+    **Syntaxe :** `A + B`
+    **Exemple :** `div + p` permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.
+- [Les sélecteurs de voisins](/fr/docs/Web/CSS/General_sibling_combinator)
+  - : Le combinateur `'~'` permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
+    **Syntaxe :** `A ~ B`
+    **Exemple :** `p ~ span` permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.
+- [Les sélecteurs d'éléments enfants](/fr/docs/Web/CSS/Child_combinator)
+  - : Le combinateur `'>'` permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné.
+    **Syntaxe :** `A > B`
+    **Exemple :** `ul > li` permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.
+- [Les sélecteurs d'éléments descendants](/fr/docs/Web/CSS/Descendant_combinator)
+  - : Le combinateur ` ` (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné.
+    **Syntaxe :** `A B`
+    **Exemple :** `div span` permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.
+- [Le combinateur de colonne](/fr/docs/Web/CSS/Column_combinator){{experimental_inline}}
+  - : Le combinateur `||` sélectionne les nœuds qui appartiennent à une colonne. **Syntaxe :** `A || B`
+    **Exemple :** `col || td` permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.
 
-<h2 id="Les_pseudo-classes">Les pseudo-classes</h2>
+## Les pseudo-classes
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Pseudo-classes">Les pseudo-classes</a> permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.</dt>
- <dd><strong>Exemple:</strong> <code>a:visited</code> permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.</dd>
-</dl>
+- [Les pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.
+  - : **Exemple:** `a:visited` permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.
 
-<h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2>
+## Les pseudo-éléments
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Pseudo-elements">Les pseudo-éléments</a> représentent des entités du document qui ne sont pas décrites en HTML.</dt>
- <dd><strong>Exemple :</strong> <code>p::first-line</code> permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.</dd>
-</dl>
+- [Les pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) représentent des entités du document qui ne sont pas décrites en HTML.
+  - : **Exemple :** `p::first-line` permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Ajout du combinateur de colonne (<code>||</code>), des sélecteurs structurels pour la  grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse pour les caractèes ASCII et du ciblage des attributs insensible à la casse.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Ajout du combinateur de voisin <code>~</code>. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (<code>::</code>)</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>
-    <p>Ajout des combinateurs pour les enfants (<code>&gt;</code>) et voisins adjacents (<code>+</code>).<br>
-     Ajout du sélecteur universel et du sélecteur d'attribut.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('CSS4 Selectors')}}</td>
+      <td>{{Spec2('CSS4 Selectors')}}</td>
+      <td>
+        Ajout du combinateur de colonne (<code>||</code>), des sélecteurs
+        structurels pour la  grille, des combinateurs logiques, des
+        pseudo-classes pour la localisation, la temporisation, les états de
+        ressources, les éléments linguistiques et les éléments relatifs à
+        l'interface utilisateur. Ajout du modificateur de sensibilité à la casse
+        pour les caractèes ASCII et du ciblage des attributs insensible à la
+        casse.
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS3 Selectors')}}</td>
+      <td>{{Spec2('CSS3 Selectors')}}</td>
+      <td>
+        Ajout du combinateur de voisin <code>~</code>. Les pseudo-éléments
+        utilisent désormais un préfixe avec deux fois deux-points
+        (<code>::</code>)
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
+      <td>{{Spec2('CSS2.1')}}</td>
+      <td>
+        <p>
+          Ajout des combinateurs pour les enfants (<code>></code>) et voisins
+          adjacents (<code>+</code>).<br />Ajout du sélecteur universel et du
+          sélecteur d'attribut.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS1')}}</td>
+      <td>{{Spec2('CSS1')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
 </table>
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 72c96372e8..cd979bb8e2 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
@@ -8,55 +8,60 @@ tags:
 translation_of: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors
 original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les <a href="https://www.w3.org/TR/css3-selectors/#target-pseudo">sélecteurs CSS3</a> ont introduit <a href="/fr/docs/Web/CSS/Pseudo-classes">la pseudo-classe</a> {{cssxref(":target")}}.</p>
+Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les [sélecteurs CSS3](https://www.w3.org/TR/css3-selectors/#target-pseudo) ont introduit [la pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) {{cssxref(":target")}}.
 
-<h2 id="Choisir_une_cible">Choisir une cible</h2>
+## Choisir une cible
 
-<p>La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL <code>https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple</code> contient le fragment d'identifiant <code>#Exemple</code>. En HTML, les identifiants correspondent aux valeurs des attributs <code>id</code> et <code>name</code>, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.</p>
+La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL `https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple` contient le fragment d'identifiant `#Exemple`. En HTML, les identifiants correspondent aux valeurs des attributs `id` et `name`, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.
 
-<p>Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :</p>
+Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :
 
-<pre class="brush: css">h2:target {
+```css
+h2:target {
   font-weight: bold;
-}</pre>
+}
+```
 
-<p>On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment <code>#Exemple</code>, on pourra écrire :</p>
+On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment `#Exemple`, on pourra écrire :
 
-<pre class="brush: css">#Exemple:target {
+```css
+#Exemple:target {
   border: 1px solid black;
-}</pre>
+}
+```
 
-<h2 id="Cibler_tous_les_éléments">Cibler tous les éléments</h2>
+## Cibler tous les éléments
 
-<p>Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :</p>
+Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :
 
-<pre class="brush: css">:target {
+```css
+:target {
   color: red;
 }
-</pre>
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>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<code> &lt;h1 id="un"&gt; </code>devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.</p>
+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.
 
-<pre class="brush: html">&lt;h4 id="un"&gt;...&lt;/h4&gt; &lt;p id="deux"&gt;...&lt;/p&gt;
-&lt;div id="trois"&gt;...&lt;/div&gt; &lt;a id="quatre"&gt;...&lt;/a&gt; &lt;em id="cinq"&gt;...&lt;/em&gt;
+```html
+<h4 id="un">...</h4> <p id="deux">...</p>
+<div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em>
 
-&lt;a href="#un"&gt;Premier&lt;/a&gt;
-&lt;a href="#deux"&gt;Deuxième&lt;/a&gt;
-&lt;a href="#trois"&gt;Troisième&lt;/a&gt;
-&lt;a href="#quatre"&gt;Quatrième&lt;/a&gt;
-&lt;a href="#cinq"&gt;Cinquième&lt;/a&gt;</pre>
+<a href="#un">Premier</a>
+<a href="#deux">Deuxième</a>
+<a href="#trois">Troisième</a>
+<a href="#quatre">Quatrième</a>
+<a href="#cinq">Cinquième</a>
+```
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.</p>
+Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://www.w3.org/TR/css3-selectors/#target-pseudo"><em>CSS3 Selectors #target-pseudo</em> (en anglais)</a></li>
- <li>{{cssxref(":target")}}</li>
-</ul>
+- [_CSS3 Selectors #target-pseudo_ (en anglais)](https://www.w3.org/TR/css3-selectors/#target-pseudo)
+- {{cssxref(":target")}}
diff --git a/files/fr/web/css/css_shapes/basic_shapes/index.md b/files/fr/web/css/css_shapes/basic_shapes/index.md
index 46e4ebee5a..d0475bfe72 100644
--- a/files/fr/web/css/css_shapes/basic_shapes/index.md
+++ b/files/fr/web/css/css_shapes/basic_shapes/index.md
@@ -8,143 +8,145 @@ tags:
 translation_of: Web/CSS/CSS_Shapes/Basic_Shapes
 original_slug: Web/CSS/CSS_Shapes/Formes_simples
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les formes CSS peuvent être définies grâce au type {{cssxref("&lt;basic-shape&gt;")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.</p>
+Les formes CSS peuvent être définies grâce au type {{cssxref("&lt;basic-shape&gt;")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.
 
-<p>Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :</p>
+Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :
 
-<ul>
- <li>Le type de donnée <code>&lt;basic-shape&gt;</code></li>
- <li>La boîte de référence</li>
-</ul>
+- Le type de donnée `<basic-shape>`
+- La boîte de référence
 
-<h2 id="Le_type_&lt;basic-shape>">Le type <code>&lt;basic-shape&gt;</code></h2>
+## Le type `<basic-shape>`
 
-<p>Le type de donnée <code>&lt;basic-shape&gt;</code> fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.</p>
+Le type de donnée `<basic-shape>` fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.
 
-<p>Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.</p>
+Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.
 
-<h2 id="La_boîte_de_référence">La boîte de référence</h2>
+## La boîte de référence
 
-<p>La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte <a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values">dans le guide sur la création de formes à partir des boîtes</a> où nous avons directement utilisé la boîte de référence afin de créer une forme.</p>
+La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte [dans le guide sur la création de formes à partir des boîtes](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values) où nous avons directement utilisé la boîte de référence afin de créer une forme.
 
-<p>L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec <code>shape-outside: circle(50%)</code>, l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du <a href="/fr/docs/Web/CSS/Mod%C3%A8le_de_bo%C3%AEte_CSS">modèle de boîtes</a>.</p>
+L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec `shape-outside: circle(50%)`, l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du [modèle de boîtes](/fr/docs/Web/CSS/Mod%C3%A8le_de_bo%C3%AEte_CSS).
 
-<p><img alt="" src="shapes-reference-box.png"></p>
+![](shapes-reference-box.png)
 
-<p>La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .</p>
+La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .
 
-<pre class="brush: css">.shape {
+```css
+.shape {
   shape-outside: circle(50%) margin-box;
 }
-</pre>
+```
 
-<p>On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :</p>
+On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :
 
-<pre class="brush: css">.shape {
+```css
+.shape {
   shape-outside: circle(50%) border-box;
 }
-</pre>
+```
 
-<p>On notera que la boîte <code>margin-box</code> pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.</p>
+On notera que la boîte `margin-box` pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.
 
-<p>Pour une description des boîtes et de leurs relations avec les formes CSS, voir <a href="http://razvancaliman.com/writing/css-shapes-reference-boxes/">Comprendre les liens entre les boîtes de référence et les formes CSS</a>.</p>
+Pour une description des boîtes et de leurs relations avec les formes CSS, voir [Comprendre les liens entre les boîtes de référence et les formes CSS](http://razvancaliman.com/writing/css-shapes-reference-boxes/).
 
-<h2 id="inset()"><code>inset()</code></h2>
+## `inset()`
 
-<p>Le type <code>inset()</code> définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec <code>inset()</code>, on peut inclure des décalages et déplacer la forme autour de la boîte de référence.</p>
+Le type `inset()` définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec `inset()`, on peut inclure des décalages et déplacer la forme autour de la boîte de référence.
 
-<p><code>inset()</code> prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour <code>border-radius</code>. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle <code>border-radius</code> vaut 10 pixels.</p>
+`inset()` prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour `border-radius`. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle `border-radius` vaut 10 pixels.
 
-<pre class="brush: css">.shape {
+```css
+.shape {
   float: left;
   shape-outside: inset(20px 10px 20px 10px round 10px);
 }
-</pre>
+```
 
-<p>Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :</p>
+Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :
 
-<ul>
- <li>Lorsqu'une seule valeur est fournie, elle est utilisée pour tous les côtés.</li>
- <li>Lorsque deux valeurs sont fournies, la première correspond aux décalages haut et bas et la deuxième correspond aux décalages gauche et droit</li>
- <li>Lorsque trois valeurs sont fournies, la première correspond au décalage haut, la deuxième aux décalages droit et gauche et la dernière au décalage bas.</li>
- <li>Avec quatre valeurs, les décalages suivent l'ordre trigonométrique : haut, droit, bas, gauche.</li>
-</ul>
+- Lorsqu'une seule valeur est fournie, elle est utilisée pour tous les côtés.
+- Lorsque deux valeurs sont fournies, la première correspond aux décalages haut et bas et la deuxième correspond aux décalages gauche et droit
+- Lorsque trois valeurs sont fournies, la première correspond au décalage haut, la deuxième aux décalages droit et gauche et la dernière au décalage bas.
+- Avec quatre valeurs, les décalages suivent l'ordre trigonométrique : haut, droit, bas, gauche.
 
-<p>Ainsi, la règle écrite ci-avant peut-être formulée :</p>
+Ainsi, la règle écrite ci-avant peut-être formulée :
 
-<pre class="brush: css">.shape {
+```css
+.shape {
   float: left;
   shape-outside: inset(20px 10px round 10px);
-}</pre>
+}
+```
 
-<p>Dans l'exemple qui suit, on a une forme <code>inset()</code> qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.</p>
+Dans l'exemple qui suit, on a une forme `inset()` qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}
 
-<p>Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier <code>margin-box</code> afin d'utiliser <code>border-box</code>, <code>padding-box</code> ou <code>content-box</code> pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.</p>
+Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier `margin-box` afin d'utiliser `border-box`, `padding-box` ou `content-box` pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}
 
-<h2 id="circle()"><code>circle()</code></h2>
+## `circle()`
 
-<p>La valeur <code>circle()</code> peut être utilisée pour <code>shape-outside</code> et prend jusqu'à deux argument. Le premier de ces arguments correspond à <code>shape-radius</code>.</p>
+La valeur `circle()` peut être utilisée pour `shape-outside` et prend jusqu'à deux argument. Le premier de ces arguments correspond à `shape-radius`.
 
-<p>La fonction <code>circle()</code> et la fonction <code>ellipse()</code>, pour <code>shape-outside</code>, peuvent utiliser cet argument <code>&lt;shape-radius&gt;</code>. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés <code>closest-side</code> ou <code>farthest-side</code>.</p>
+La fonction `circle()` et la fonction `ellipse()`, pour `shape-outside`, peuvent utiliser cet argument `<shape-radius>`. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés `closest-side` ou `farthest-side`.
 
-<p>Le mot-clé <code><strong>closest-side</strong></code> utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.</p>
+Le mot-clé **`closest-side`** utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.
 
-<p>Le mot-clé <code><strong>farthest-side</strong></code> utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.</p>
+Le mot-clé **`farthest-side`** utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.
 
-<p>Le deuxième argument est une <code>position</code> dont la valeur par défaut est <code>center</code>. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.</p>
+Le deuxième argument est une `position` dont la valeur par défaut est `center`. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.
 
-<p>Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé <code>closest-side</code> ou <code>farthest-side</code>, optionnellement suivi par le mot-clé <code>at</code> suivi par une position.</p>
+Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé `closest-side` ou `farthest-side`, optionnellement suivi par le mot-clé `at` suivi par une position.
 
-<p>Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour <code>shape-radius</code>, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.</p>
+Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour `shape-radius`, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}
 
-<p>Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.</p>
+Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.
 
-<p>Ajoutons un autre exemple, en utilisant les mots-clés <code>top left</code> pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.</p>
+Ajoutons un autre exemple, en utilisant les mots-clés `top left` pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}
 
-<h3 id="Limitation_à_la_boîte_de_marge">Limitation à la boîte de marge</h3>
+### Limitation à la boîte de marge
 
-<p>Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.</p>
+Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.
 
-<pre class="brush: css">img {
+```css
+img {
   float: left;
   shape-outside: circle(50% at 60%);
 }
-</pre>
+```
 
-<p><img alt="The circle shape is clipped by the margin box" src="shapes-circle-clipped.png"></p>
+![The circle shape is clipped by the margin box](shapes-circle-clipped.png)
 
-<h2 id="ellipse()"><code>ellipse()</code></h2>
+## `ellipse()`
 
-<p>Une ellipse peut être vue comme un cercle aplati. De ce point de vu <code>ellipse()</code> fonctionne de façon analogue à <code>circle()</code> mais il est nécessaire d'indiquer deux rayons : un rayon horizontal <code>x</code> et un rayon vertical <code>y</code> (dans cet ordre).</p>
+Une ellipse peut être vue comme un cercle aplati. De ce point de vu `ellipse()` fonctionne de façon analogue à `circle()` mais il est nécessaire d'indiquer deux rayons : un rayon horizontal `x` et un rayon vertical `y` (dans cet ordre).
 
-<p>Ces rayons peuvent être suivis par une position qui permet, comme avec <code>circle()</code>, de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.</p>
+Ces rayons peuvent être suivis par une position qui permet, comme avec `circle()`, de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}
 
-<p>Les mots-clés <code>closest-side</code> et <code>farthest-side</code> permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.</p>
+Les mots-clés `closest-side` et `farthest-side` permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}
 
-<h2 id="polygon()"><code>polygon()</code></h2>
+## `polygon()`
 
-<p>La forme simple qui permet de créer une grande variété de formes est <code>polygon()</code>. Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.</p>
+La forme simple qui permet de créer une grande variété de formes est `polygon()`. Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.
 
-<p>Dans l'exemple qui suit, on crée une forme avec <code>polygon()</code> pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.</p>
+Dans l'exemple qui suit, on crée une forme avec `polygon()` pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}
 
-<p>L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.</p>
+L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.
 
-<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="shapes-polygon.png"></p>
+![The polygon basic shape, highlighted with the Shapes Inspector.](shapes-polygon.png)
 
-<p>Une autre ressource qui peut s'avérer utile sur ces sujets est <a href="https://bennettfeely.com/clippy/">Clippy</a> : cet outil permet de créer des formes pour <code>clip-path</code>. Or, les formes utilisées pour <code>clip-path</code> sont les mêmes que pour les formes simples.</p>
+Une autre ressource qui peut s'avérer utile sur ces sujets est [Clippy](https://bennettfeely.com/clippy/) : cet outil permet de créer des formes pour `clip-path`. Or, les formes utilisées pour `clip-path` sont les mêmes que pour les formes simples.
diff --git a/files/fr/web/css/css_shapes/from_box_values/index.md b/files/fr/web/css/css_shapes/from_box_values/index.md
index 5ba429d0e6..06c54e56e9 100644
--- a/files/fr/web/css/css_shapes/from_box_values/index.md
+++ b/files/fr/web/css/css_shapes/from_box_values/index.md
@@ -10,67 +10,63 @@ tags:
 translation_of: Web/CSS/CSS_Shapes/From_box_values
 original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.</p>
+Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.
 
-<p>Les <a href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">valeurs de boîte</a> qui sont autorisées pour les formes sont :</p>
+Les [valeurs de boîte](https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values) qui sont autorisées pour les formes sont :
 
-<ul>
- <li><code>content-box</code></li>
- <li><code>padding-box</code></li>
- <li><code>border-box</code></li>
- <li><code>margin-box</code></li>
-</ul>
+- `content-box`
+- `padding-box`
+- `border-box`
+- `margin-box`
 
-<p>Les valeurs <code>border-radius</code> sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.</p>
+Les valeurs `border-radius` sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.
 
-<h2 id="Le_modèle_de_boîte_CSS">Le modèle de boîte CSS</h2>
+## Le modèle de boîte CSS
 
-<p>Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (<em>content</em>), du remplissage (<em>padding</em>), une bordure (<em>border</em>) ainsi qu'une marge (<em>margin</em>).</p>
+Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (_content_), du remplissage (_padding_), une bordure (_border_) ainsi qu'une marge (_margin_).
 
-<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="box-model.png"></p>
+![The Box Model consists of the margin, border, padding and content boxes.](box-model.png)
 
-<p>En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.</p>
+En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.
 
-<h3 id="margin-box"><code>margin-box</code></h3>
+### `margin-box`
 
-<p>La valeur <code>margin-box</code> correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.</p>
+La valeur `margin-box` correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.
 
-<p>Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété <code>border-radius</code> a été utilisée afin de créer le cercle avec <code>border-radius: 50%</code>. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.</p>
+Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété `border-radius` a été utilisée afin de créer le cercle avec `border-radius: 50%`. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}
 
-<h3 id="border-box"><code>border-box</code></h3>
+### `border-box`
 
-<p>La valeur <code>border-box</code> correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, <code>border-box</code> sera équivalent à <code>padding-box</code> et la forme suivra le bord extérieur de la boîte de remplissage.</p>
+La valeur `border-box` correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, `border-box` sera équivalent à `padding-box` et la forme suivra le bord extérieur de la boîte de remplissage.
 
-<p>Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.</p>
+Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}
 
-<h3 id="padding-box"><code>padding-box</code></h3>
+### `padding-box`
 
-<p>La valeur <code>padding-box</code> correspond à la forme définie par le bord extérieur de la boîte de remplissage (<em>padding</em>). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, <code>padding-box</code> sera équivalent à <code>content-box</code>.</p>
+La valeur `padding-box` correspond à la forme définie par le bord extérieur de la boîte de remplissage (_padding_). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, `padding-box` sera équivalent à `content-box`.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}
 
-<h3 id="content-box"><code>content-box</code></h3>
+### `content-box`
 
-<p>La valeur <code>content-box</code> correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre <code>0</code> et <code>border-radius − border-width − padding</code>. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.</p>
+La valeur `content-box` correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre `0` et `border-radius − border-width − padding`. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}
 
-<div class="note">
-<p><strong>Note :</strong> Pour en savoir plus sur le modèle de boîte CSS, voir <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">cet article</a>.</p>
-</div>
+> **Note :** Pour en savoir plus sur le modèle de boîte CSS, voir [cet article](/en-US/docs/Learn/CSS/Building_blocks/The_box_model).
 
-<h2 id="Quand_utiliser_les_valeurs_de_boîte">Quand utiliser les valeurs de boîte</h2>
+## Quand utiliser les valeurs de boîte
 
-<p>Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété <code>border-radius</code>. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).</p>
+Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété `border-radius`. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).
 
-<p>Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur <code>border-radius</code> de 100% dans la direction la plus proche du texte.</p>
+Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur `border-radius` de 100% dans la direction la plus proche du texte.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}
 
-<p>Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de <a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">type <code>&lt;basic-shape&gt;</code> (les formes simples)</a> ou <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">définir une forme à partir d'une image</a>, tel que nous le verrons dans les autres guides de cette section.</p>
+Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de [type `<basic-shape>` (les formes simples)](/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes) ou [définir une forme à partir d'une image](/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images), tel que nous le verrons dans les autres guides de cette section.
diff --git a/files/fr/web/css/css_shapes/index.md b/files/fr/web/css/css_shapes/index.md
index 585e96ac67..00eefc04a5 100644
--- a/files/fr/web/css/css_shapes/index.md
+++ b/files/fr/web/css/css_shapes/index.md
@@ -8,69 +8,48 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Shapes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Shapes</strong></em> est un module de spécification CSS qui décrit les formes géométriques. <a href="https://drafts.csswg.org/css-shapes/">Selon le niveau 1 de cette spécification</a>, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.</p>
+**_CSS Shapes_** est un module de spécification CSS qui décrit les formes géométriques. [Selon le niveau 1 de cette spécification](https://drafts.csswg.org/css-shapes/), les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.
 
-<h2 id="exemple_simple">Exemple simple</h2>
+## Exemple simple
 
-<p>Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété <code>shape-outside</code> qui lui est appliquée vaut <code>circle(50%)</code>. Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.</p>
+Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété `shape-outside` qui lui est appliquée vaut `circle(50%)`. Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("shape-image-threshold")}}</li>
- <li>{{cssxref("shape-margin")}}</li>
- <li>{{cssxref("shape-outside")}}</li>
-</ul>
+- {{cssxref("shape-image-threshold")}}
+- {{cssxref("shape-margin")}}
+- {{cssxref("shape-outside")}}
 
-<h3 id="Types_de_donnée">Types de donnée</h3>
+### Types de donnée
 
-<ul>
- <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;basic-shape&gt;")}}
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Un aperçu des formes CSS (<em>CSS Shapes</em>)</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Les formes appliquées aux différentes boîtes</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Des formes simples</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Des formes à partir d'images</a></li>
- <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Éditer les contours d'une forme en CSS dans Firefox </a></li>
-</ul>
+- [Un aperçu des formes CSS (_CSS Shapes_)](/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)
+- [Les formes appliquées aux différentes boîtes](/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values)
+- [Des formes simples](/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes)
+- [Des formes à partir d'images](/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images)
+- [Éditer les contours d'une forme en CSS dans Firefox](/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes)
 
-<h2 id="Ressources_externes">Ressources externes</h2>
+## Ressources externes
 
-<ul>
- <li><a href="https://codepen.io/KristopherVanSant/post/css-shapes-resources">Une liste de ressources sur les formes CSS (en anglais)</a></li>
- <li><a href="https://alistapart.com/article/css-shapes-101"><em>CSS Shapes 101</em> (en anglais)</a></li>
- <li><a href="https://www.sarasoueidan.com/blog/css-shapes/">Creating non-rectangular layouts with CSS Shapes (en anglais)</a></li>
- <li><a href="https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498"><em>How To Use CSS Shapes In Your Web Design</em> (en anglais)</a></li>
- <li><a href="https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/"><em>How To Get Started With CSS Shapes</em> (en anglais)</a></li>
- <li><a href="https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5"><em>What I Learned In One Weekend With CSS Shapes</em> (en anglais)</a></li>
- <li><a href="https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/"><em>CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components</em> (en anglais)</a></li>
-</ul>
+- [Une liste de ressources sur les formes CSS (en anglais)](https://codepen.io/KristopherVanSant/post/css-shapes-resources)
+- [_CSS Shapes 101_ (en anglais)](https://alistapart.com/article/css-shapes-101)
+- [Creating non-rectangular layouts with CSS Shapes (en anglais)](https://www.sarasoueidan.com/blog/css-shapes/)
+- [_How To Use CSS Shapes In Your Web Design_ (en anglais)](https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498)
+- [_How To Get Started With CSS Shapes_ (en anglais)](https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/)
+- [_What I Learned In One Weekend With CSS Shapes_ (en anglais)](https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5)
+- [_CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components_ (en anglais)](https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Shapes")}}</td>
-   <td>{{Spec2("CSS Shapes")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | État                             | Commentaires         |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("CSS Shapes")}} | {{Spec2("CSS Shapes")}} | Définition initiale. |
diff --git a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md
index ad57ea506d..36d7003216 100644
--- a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md
+++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md
@@ -9,118 +9,112 @@ tags:
 translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes
 original_slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La spécification <a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1</a> définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.</p>
+La spécification [CSS Shapes Level 1](https://www.w3.org/TR/css-shapes/) définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.
 
-<p>Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.</p>
+Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.
 
-<p>Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.</p>
+Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.
 
-<h2 id="Que_définit_la_spécification">Que définit la spécification ?</h2>
+## Que définit la spécification ?
 
-<p>La spécification définit trois nouvelles propriétés :</p>
+La spécification définit trois nouvelles propriétés :
 
-<ul>
- <li>{{cssxref("shape-outside")}} qui permet de définir des formes simples</li>
- <li>{{cssxref("shape-image-threshold")}} qui permet d'indiquer un seuil d'opacité. Si une image est utilisée afin de définir une forme, seuls les fragments de l'image qui sont d'une opacité supérieure ou égale à ce seuil seront utilisés afin de créer la forme. Les autres fragments de l'image sont ignorés.</li>
- <li>{{cssxref("shape-margin")}} définit une marge autour d'une forme</li>
-</ul>
+- {{cssxref("shape-outside")}} qui permet de définir des formes simples
+- {{cssxref("shape-image-threshold")}} qui permet d'indiquer un seuil d'opacité. Si une image est utilisée afin de définir une forme, seuls les fragments de l'image qui sont d'une opacité supérieure ou égale à ce seuil seront utilisés afin de créer la forme. Les autres fragments de l'image sont ignorés.
+- {{cssxref("shape-margin")}} définit une marge autour d'une forme
 
-<h2 id="Définir_des_formes_simples">Définir des formes simples</h2>
+## Définir des formes simples
 
-<p>La propriété <code>shape-outside</code> permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("&lt;basic-shape&gt;")}}. Prenons un exemple simple pour commencer.</p>
+La propriété `shape-outside` permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("&lt;basic-shape&gt;")}}. Prenons un exemple simple pour commencer.
 
-<p>Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique <code>shape-outside</code> avec la valeur <code>circle(50%)</code>. Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.</p>
+Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique `shape-outside` avec la valeur `circle(50%)`. Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}
 
-<p>À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer <code>&lt;basic-shape&gt;</code>. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.</p>
+À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer `<basic-shape>`. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.
 
-<h3 id="Formes_simples_(Basic_Shapes)">Formes simples (<em>Basic Shapes</em>)</h3>
+### Formes simples (_Basic Shapes_)
 
-<p>La valeur <code>circle(50%)</code> est une exemple de forme simple. La spécification fournit quatre valeur de types <code>&lt;basic-shape&gt;</code> :</p>
+La valeur `circle(50%)` est une exemple de forme simple. La spécification fournit quatre valeur de types `<basic-shape>` :
 
-<ul>
- <li><code>inset()</code></li>
- <li><code>circle()</code></li>
- <li><code>ellipse()</code></li>
- <li><code>polygon()</code></li>
-</ul>
+- `inset()`
+- `circle()`
+- `ellipse()`
+- `polygon()`
 
-<p>Avec la valeur <code>inset()</code>, le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.</p>
+Avec la valeur `inset()`, le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.
 
-<p>Nous avons vu le fonctionnement de <code>circle()</code> dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. <code>ellipse()</code> est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser <code>polygon()</code> afin de créer un polygone correspondant à une forme complexe.</p>
+Nous avons vu le fonctionnement de `circle()` dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. `ellipse()` est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser `polygon()` afin de créer un polygone correspondant à une forme complexe.
 
-<p>Dans <a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">le guide sur les formes simples</a>, nous verrons comment créer et exploiter ces formes.</p>
+Dans [le guide sur les formes simples](/fr/docs/Web/CSS/CSS_Shapes/Formes_simples), nous verrons comment créer et exploiter ces formes.
 
-<h3 id="Boîtes_de_référence">Boîtes de référence</h3>
+### Boîtes de référence
 
-<p>Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">modèle de boîte</a> et utiliser les valeurs :</p>
+Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du [modèle de boîte](/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte) et utiliser les valeurs :
 
-<ul>
- <li><code>border-box</code></li>
- <li><code>padding-box</code></li>
- <li><code>content-box</code></li>
- <li><code>margin-box</code></li>
-</ul>
+- `border-box`
+- `padding-box`
+- `content-box`
+- `margin-box`
 
-<p>Dans l'exemple qui suit, vous pouvez modifier la valeur <code>border-box</code> afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.</p>
+Dans l'exemple qui suit, vous pouvez modifier la valeur `border-box` afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}
 
-<p>Pour en savoir plus, voir <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">le guide sur les formes et les boîtes</a>.</p>
+Pour en savoir plus, voir [le guide sur les formes et les boîtes](/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values).
 
-<h3 id="Générer_une_forme_à_partir_d'une_image">Générer une forme à partir d'une image</h3>
+### Générer une forme à partir d'une image
 
-<p>Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).</p>
+Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).
 
-<p>Attention, les images utilisées ainsi doivent être <a href="/en-US/docs/Web/HTTP/CORS">compatibles avec les règles CORS</a>. Se n'est pass le cas, <code>shape-outside</code> se comportera comme si elle avait reçu la valeur <code>none</code> et il n'y aura alors aucune forme.</p>
+Attention, les images utilisées ainsi doivent être [compatibles avec les règles CORS](/en-US/docs/Web/HTTP/CORS). Se n'est pass le cas, `shape-outside` se comportera comme si elle avait reçu la valeur `none` et il n'y aura alors aucune forme.
 
-<p>Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour <code>shape-outside</code>. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.</p>
+Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour `shape-outside`. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}
 
-<h4 id="shape-image-threshold"><code>shape-image-threshold</code></h4>
+#### `shape-image-threshold`
 
-<p>La propriété <code>shape-image-threshold</code> permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de <code>shape-image-threshold</code> est <code>0.0</code> (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur <code>1.0</code>, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.</p>
+La propriété `shape-image-threshold` permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de `shape-image-threshold` est `0.0` (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur `1.0`, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.
 
-<p>Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.</p>
+Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}
 
-<p>Dans l'article <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Créer des formes à partir d'images</a>, nous verrons plus en détails le fonctionnement de ces propriétés.</p>
+Dans l'article [Créer des formes à partir d'images](/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images), nous verrons plus en détails le fonctionnement de ces propriétés.
 
-<h2 id="La_propriété_shape-margin">La propriété <code>shape-margin</code></h2>
+## La propriété `shape-margin`
 
-<p>La propriété {{cssxref("shape-margin")}} ajoute une marge à <code>shape-outside</code>. Cela permet d'écarter le contenu de la forme.</p>
+La propriété {{cssxref("shape-margin")}} ajoute une marge à `shape-outside`. Cela permet d'écarter le contenu de la forme.
 
-<p>Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute <code>shape-margin</code>. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.</p>
+Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute `shape-margin`. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}
 
-<h2 id="Utiliser_du_contenu_généré_comme_objet_flottant">Utiliser du contenu généré comme objet flottant</h2>
+## Utiliser du contenu généré comme objet flottant
 
-<p>Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.</p>
+Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.
 
-<p>Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.</p>
+Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}
 
-<h2 id="Relations_avec_clip-path">Relations avec <code>clip-path</code></h2>
+## Relations avec `clip-path`
 
-<p>Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.</p>
+Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.
 
-<p>Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  <code>shape-outside: ellipse(40% 50%);</code> puis utilisé <code>clip-path: ellipse(40% 50%);</code> afin de rogner l'image pour suivre la forme.</p>
+Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  `shape-outside: ellipse(40% 50%);` puis utilisé `clip-path: ellipse(40% 50%);` afin de rogner l'image pour suivre la forme.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}
 
-<h2 id="Outils_de_développement_pour_les_formes_CSS">Outils de développement pour les formes CSS</h2>
+## Outils de développement pour les formes CSS
 
-<p>Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : <a href="/fr/docs/Outils/Inspecteur/Comment/Edit_CSS_shapes">l'éditeur de chemin pour les formes (<em>Shape Path Editor</em>)</a>. Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.</p>
+Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : [l'éditeur de chemin pour les formes (_Shape Path Editor_)](/fr/docs/Outils/Inspecteur/Comment/Edit_CSS_shapes). Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.
 
-<p>L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à <code>clip-path</code>. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à <code>shape-outside</code> à condition d'avoir activé la préférence <code>layout.css.shape-outside.enabled</code>.</p>
+L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à `clip-path`. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à `shape-outside` à condition d'avoir activé la préférence `layout.css.shape-outside.enabled`.
 
-<h2 id="Les_futures_fonctionnalités">Les futures fonctionnalités</h2>
+## Les futures fonctionnalités
 
-<p>Dans sa version initiale, le module de spécification pour les formes contenait une propriété <code>shape-inside</code> afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de <a href="https://drafts.csswg.org/css-shapes-2/">niveau 2</a>. La propriété <code>shape-inside</code> était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.</p>
+Dans sa version initiale, le module de spécification pour les formes contenait une propriété `shape-inside` afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de [niveau 2](https://drafts.csswg.org/css-shapes-2/). La propriété `shape-inside` était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.
diff --git a/files/fr/web/css/css_shapes/shapes_from_images/index.md b/files/fr/web/css/css_shapes/shapes_from_images/index.md
index bbb1f822f7..3e1764d790 100644
--- a/files/fr/web/css/css_shapes/shapes_from_images/index.md
+++ b/files/fr/web/css/css_shapes/shapes_from_images/index.md
@@ -8,58 +8,58 @@ tags:
 translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images
 original_slug: Web/CSS/CSS_Shapes/Générer_formes_images
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.</p>
+Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.
 
-<h2 id="Générer_une_forme_simple_avec_une_image">Générer une forme simple avec une image</h2>
+## Générer une forme simple avec une image
 
-<p>Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.</p>
+Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.
 
-<p>Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.</p>
+Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}
 
-<p>On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.</p>
+On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}
 
-<h2 id="Origines_et_compatibilité_CORS">Origines et compatibilité CORS</h2>
+## Origines et compatibilité CORS
 
-<p>Attention, les images utilisées pour créer les formes doivent <a href="/fr/docs/Web/HTTP/CORS">être compatibles pour le CORS</a>. Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.</p>
+Attention, les images utilisées pour créer les formes doivent [être compatibles pour le CORS](/fr/docs/Web/HTTP/CORS). Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.
 
-<h3 id="Ai-je_à_faire_à_un_problème_de_CORS">Ai-je à faire à un problème de CORS ?</h3>
+### Ai-je à faire à un problème de CORS ?
 
-<p>Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.</p>
+Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.
 
-<h2 id="Utiliser_un_seuil">Utiliser un seuil</h2>
+## Utiliser un seuil
 
-<p>La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si <code>shape-image-threshold</code> vaut <code>0.0</code> (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur <code>1.0</code> est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.</p>
+La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si `shape-image-threshold` vaut `0.0` (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur `1.0` est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.
 
-<p>Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise <code>shape-image-threshold</code> avec la valeur <code>0.3</code>, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à <code>0.2</code>, on aura une forme rectangulaire.</p>
+Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise `shape-image-threshold` avec la valeur `0.3`, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à `0.2`, on aura une forme rectangulaire.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}
 
-<h2 id="Utiliser_des_images_avec_du_contenu_généré">Utiliser des images avec du contenu généré</h2>
+## Utiliser des images avec du contenu généré
 
-<p>Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété <code>shape-outside</code> ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.</p>
+Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété `shape-outside` ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.
 
-<p>Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.</p>
+Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}
 
-<h2 id="Créer_des_formes_avec_un_dégradé">Créer des formes avec un dégradé</h2>
+## Créer des formes avec un dégradé
 
-<p>En CSS, <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">un dégradé</a> est une image. On peut donc utiliser un dégradé afin de générer une forme.</p>
+En CSS, [un dégradé](/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS) est une image. On peut donc utiliser un dégradé afin de générer une forme.
 
-<p>Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.</p>
+Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.
 
-<p>Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.</p>
+Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}
 
-<p>Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.</p>
+Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.
 
-<p>{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}
 
-<p>Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.</p>
+Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.
diff --git a/files/fr/web/css/css_table/index.md b/files/fr/web/css/css_table/index.md
index 7b01e5fe58..cea9beb8da 100644
--- a/files/fr/web/css/css_table/index.md
+++ b/files/fr/web/css/css_table/index.md
@@ -7,38 +7,23 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Table
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Table</strong></em> (ou module des tableaux CSS) est un module CSS qui définit comment disposer les données de tableaux.</p>
+**_CSS Table_** (ou module des tableaux CSS) est un module CSS qui définit comment disposer les données de tableaux.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("border-collapse")}}</li>
- <li>{{cssxref("border-spacing")}}</li>
- <li>{{cssxref("caption-side")}}</li>
- <li>{{cssxref("empty-cells")}}</li>
- <li>{{cssxref("table-layout")}}</li>
- <li>{{cssxref("vertical-align")}}</li>
-</ul>
+- {{cssxref("border-collapse")}}
+- {{cssxref("border-spacing")}}
+- {{cssxref("caption-side")}}
+- {{cssxref("empty-cells")}}
+- {{cssxref("table-layout")}}
+- {{cssxref("vertical-align")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS2.1", "tables.html")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | État                     | Commentaires         |
+| ------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName("CSS2.1", "tables.html")}} | {{Spec2("CSS2.1")}} | Définition initiale. |
diff --git a/files/fr/web/css/css_text/index.md b/files/fr/web/css/css_text/index.md
index 31160cd80f..d8056a8cc1 100644
--- a/files/fr/web/css/css_text/index.md
+++ b/files/fr/web/css/css_text/index.md
@@ -8,62 +8,35 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Text
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Text</strong></em> (ou module texte de CSS) est un module CSS qui définit comment effectuer des manipulations de texte, comme les coupures de mots, la justification et l'alignement, la gestion des espaces et les transformations de texte.</p>
+**_CSS Text_** (ou module texte de CSS) est un module CSS qui définit comment effectuer des manipulations de texte, comme les coupures de mots, la justification et l'alignement, la gestion des espaces et les transformations de texte.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("hanging-punctuation")}}</li>
- <li>{{cssxref("hyphens")}}</li>
- <li>{{cssxref("letter-spacing")}}</li>
- <li>{{cssxref("line-break")}}</li>
- <li>{{cssxref("overflow-wrap")}}</li>
- <li>{{cssxref("tab-size")}}</li>
- <li>{{cssxref("text-align")}}</li>
- <li>{{cssxref("text-align-last")}}</li>
- <li>{{cssxref("text-indent")}}</li>
- <li>{{cssxref("text-justify")}}</li>
- <li>{{cssxref("text-size-adjust")}}</li>
- <li>{{cssxref("text-transform")}}</li>
- <li>{{cssxref("white-space")}}</li>
- <li>{{cssxref("word-break")}}</li>
- <li>{{cssxref("word-spacing")}}</li>
-</ul>
+- {{cssxref("hanging-punctuation")}}
+- {{cssxref("hyphens")}}
+- {{cssxref("letter-spacing")}}
+- {{cssxref("line-break")}}
+- {{cssxref("overflow-wrap")}}
+- {{cssxref("tab-size")}}
+- {{cssxref("text-align")}}
+- {{cssxref("text-align-last")}}
+- {{cssxref("text-indent")}}
+- {{cssxref("text-justify")}}
+- {{cssxref("text-size-adjust")}}
+- {{cssxref("text-transform")}}
+- {{cssxref("white-space")}}
+- {{cssxref("word-break")}}
+- {{cssxref("word-spacing")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Logical Properties')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>Actualise certaines propriétés pour être indépendant de la direction du texte.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Text')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                        | État                                             | Commentaires                                                                   |
+| ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------ |
+| {{SpecName('CSS Logical Properties')}} | {{Spec2('CSS Logical Properties')}} | Actualise certaines propriétés pour être indépendant de la direction du texte. |
+| {{SpecName('CSS3 Text')}}                     | {{Spec2('CSS3 Text')}}                     |                                                                                |
+| {{SpecName('CSS2.1', 'text.html')}}     | {{Spec2('CSS2.1')}}                         |                                                                                |
+| {{SpecName('CSS1')}}                         | {{Spec2('CSS1')}}                         | Définition initiale.                                                           |
diff --git a/files/fr/web/css/css_text_decoration/index.md b/files/fr/web/css/css_text_decoration/index.md
index e008cdc147..d7f695ed7a 100644
--- a/files/fr/web/css/css_text_decoration/index.md
+++ b/files/fr/web/css/css_text_decoration/index.md
@@ -7,58 +7,35 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Text_Decoration
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Text Decoration</strong></em> (ou module des décorations textuelles CSS) est un module CSS qui définit les caractéristiques relatives à la décoration du texte, comme le soulignage, les ombres et les marques d'emphase.</p>
+**_CSS Text Decoration_** (ou module des décorations textuelles CSS) est un module CSS qui définit les caractéristiques relatives à la décoration du texte, comme le soulignage, les ombres et les marques d'emphase.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("letter-spacing")}}</li>
- <li>{{cssxref("text-align")}}</li>
- <li>{{cssxref("text-decoration")}}</li>
- <li>{{cssxref("text-decoration-color")}}</li>
- <li>{{cssxref("text-decoration-line")}}</li>
- <li>{{cssxref("text-decoration-style")}}</li>
- <li>{{cssxref("text-emphasis")}}</li>
- <li>{{cssxref("text-emphasis-color")}}</li>
- <li>{{cssxref("text-emphasis-position")}}</li>
- <li>{{cssxref("text-emphasis-style")}}</li>
- <li>{{cssxref("text-indent")}}</li>
- <li>{{cssxref("text-rendering")}}</li>
- <li>{{cssxref("text-shadow")}}</li>
- <li>{{cssxref("text-transform")}}</li>
- <li>{{cssxref("white-space")}}</li>
- <li>{{cssxref("word-spacing")}}</li>
-</ul>
+- {{cssxref("letter-spacing")}}
+- {{cssxref("text-align")}}
+- {{cssxref("text-decoration")}}
+- {{cssxref("text-decoration-color")}}
+- {{cssxref("text-decoration-line")}}
+- {{cssxref("text-decoration-style")}}
+- {{cssxref("text-emphasis")}}
+- {{cssxref("text-emphasis-color")}}
+- {{cssxref("text-emphasis-position")}}
+- {{cssxref("text-emphasis-style")}}
+- {{cssxref("text-indent")}}
+- {{cssxref("text-rendering")}}
+- {{cssxref("text-shadow")}}
+- {{cssxref("text-transform")}}
+- {{cssxref("white-space")}}
+- {{cssxref("word-spacing")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Text Decoration')}} | {{Spec2('CSS3 Text Decoration')}} |                      |
+| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}}                     |                      |
+| {{SpecName('CSS1')}}                     | {{Spec2('CSS1')}}                     | Définition initiale. |
diff --git a/files/fr/web/css/css_transforms/index.md b/files/fr/web/css/css_transforms/index.md
index be8a54dc82..5e7b91af1c 100644
--- a/files/fr/web/css/css_transforms/index.md
+++ b/files/fr/web/css/css_transforms/index.md
@@ -8,53 +8,36 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Transforms
 ---
-<div>{{CSSRef}}</div>
-
-<p>Le module <em><strong>CSS Transforms</strong></em> (ou module des transformations CSS) est un module de la spécification CSS qui définit comment les éléments mis en forme avec CSS peuvent être transformés dans un espace à deux ou à trois dimensions.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<ul>
- <li>{{cssxref("backface-visibility")}}</li>
- <li>{{cssxref("perspective")}}</li>
- <li>{{cssxref("perspective-origin")}}</li>
- <li>{{cssxref("rotate")}}</li>
- <li>{{cssxref("scale")}}</li>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("transform-box")}}</li>
- <li>{{cssxref("transform-origin")}}</li>
- <li>{{cssxref("transform-style")}}</li>
- <li>{{cssxref("translate")}}</li>
-</ul>
-
-<h3 id="Types_de_donnée">Types de donnée</h3>
-
-<p>{{cssxref("&lt;transform-function&gt;")}}</p>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></dt>
- <dd>Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transforms')}}</td>
-   <td>{{Spec2('CSS3 Transforms')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+{{CSSRef}}
+
+Le module **_CSS Transforms_** (ou module des transformations CSS) est un module de la spécification CSS qui définit comment les éléments mis en forme avec CSS peuvent être transformés dans un espace à deux ou à trois dimensions.
+
+## Référence
+
+### Propriétés
+
+- {{cssxref("backface-visibility")}}
+- {{cssxref("perspective")}}
+- {{cssxref("perspective-origin")}}
+- {{cssxref("rotate")}}
+- {{cssxref("scale")}}
+- {{cssxref("transform")}}
+- {{cssxref("transform-box")}}
+- {{cssxref("transform-origin")}}
+- {{cssxref("transform-style")}}
+- {{cssxref("translate")}}
+
+### Types de donnée
+
+{{cssxref("&lt;transform-function&gt;")}}
+
+## Guides
+
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS)
+  - : Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS.
+
+## Spécifications
+
+| Spécification                            | État                                 | Commentaires         |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Transforms')}} | {{Spec2('CSS3 Transforms')}} | Définition initiale. |
diff --git a/files/fr/web/css/css_transforms/using_css_transforms/index.md b/files/fr/web/css/css_transforms/using_css_transforms/index.md
index e52bf437be..2b121224ea 100644
--- a/files/fr/web/css/css_transforms/using_css_transforms/index.md
+++ b/files/fr/web/css/css_transforms/using_css_transforms/index.md
@@ -14,71 +14,67 @@ tags:
 translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
 original_slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>En modifiant l'espace des coordonnées, les <strong>transformations CSS</strong> permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.</p>
+En modifiant l'espace des coordonnées, les **transformations CSS** permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.
 
-<div class="warning">
-<p><strong>Attention :</strong> Seuls les éléments positionnés selon <a href="/fr/docs/Web/CSS/CSS_Box_Model">le modèle de boîtes</a> peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec <code>display: block</code> est positionné selon le modèle de boîtes.</p>
-</div>
+> **Attention :** Seuls les éléments positionnés selon [le modèle de boîtes](/fr/docs/Web/CSS/CSS_Box_Model) peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec `display: block` est positionné selon le modèle de boîtes.
 
-<h2 id="Propriétés_des_transformations_CSS">Propriétés des transformations CSS</h2>
+## Propriétés des transformations CSS
 
-<p>Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.</p>
+Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.
 
-<dl>
- <dt>{{cssxref("transform-origin")}}</dt>
- <dd>Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.</dd>
- <dt>{{cssxref("transform")}}</dt>
- <dd>Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.</dd>
-</dl>
+- {{cssxref("transform-origin")}}
+  - : Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.
+- {{cssxref("transform")}}
+  - : Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voici une version originale du logo MDN :</p>
+Voici une version originale du logo MDN :
 
-<p><img alt="MDN Logo" src="screen_shot_2016-02-16_at_15.53.54.png"></p>
+![MDN Logo](screen_shot_2016-02-16_at_15.53.54.png)
 
-<h3 id="Rotation">Rotation</h3>
+### Rotation
 
-<p>Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :</p>
+Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :
 
-<pre class="brush: html">&lt;img style="transform: rotate(90deg);
+```html
+<img style="transform: rotate(90deg);
             transform-origin: bottom left;"
-     src="screen_shot_2016-02-16_at_15.53.54.png"&gt;
-</pre>
+     src="screen_shot_2016-02-16_at_15.53.54.png">
+```
 
-<p>{{EmbedLiveSample('Rotation','auto',240)}}</p>
+{{EmbedLiveSample('Rotation','auto',240)}}
 
-<h3 id="Distorsion_et_translation">Distorsion et translation</h3>
+### Distorsion et translation
 
-<p>Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :</p>
+Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :
 
-<pre class="brush: html">&lt;img style="transform: skewx(10deg) translatex(150px);
+```html
+<img style="transform: skewx(10deg) translatex(150px);
             transform-origin: bottom left;"
-     src="screen_shot_2016-02-16_at_15.53.54.png"&gt;
-</pre>
+     src="screen_shot_2016-02-16_at_15.53.54.png">
+```
 
-<p>{{EmbedLiveSample('Distorsion_et_translation')}}</p>
+{{EmbedLiveSample('Distorsion_et_translation')}}
 
-<h2 id="Propriétés_CSS_spécifiques_à_la_3D">Propriétés CSS spécifiques à la 3D</h2>
+## Propriétés CSS spécifiques à la 3D
 
-<p>Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.</p>
+Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.
 
-<h3 id="Définir_une_perspective">Définir une perspective</h3>
+### Définir une perspective
 
-<p>Le premier élément à définir est la <em>perspective.</em> La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.</p>
+Le premier élément à définir est la _perspective._ La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.
 
-<p>{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}</p>
+{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}
 
-<p>Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.</p>
+Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.
 
-<p>{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}</p>
+{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation with 3D Transforms">Utiliser <code>deviceorientation</code> avec les transformations 3D</a></li>
- <li><a href="https://desandro.github.com/3dtransforms/">Une introduction aux transformations CSS, un billet de David DeSandro (en anglais)</a></li>
- <li><a href="https://css-transform.moro.es/">CSS Transform playground (outil en ligne qui permet de visualiser des transformations CSS)</a></li>
-</ul>
+- [Utiliser `deviceorientation` avec les transformations 3D](/fr/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms "Using Deviceorientation with 3D Transforms")
+- [Une introduction aux transformations CSS, un billet de David DeSandro (en anglais)](https://desandro.github.com/3dtransforms/)
+- [CSS Transform playground (outil en ligne qui permet de visualiser des transformations CSS)](https://css-transform.moro.es/)
diff --git a/files/fr/web/css/css_transitions/index.md b/files/fr/web/css/css_transitions/index.md
index c9bcefcbf6..d7fb6abc82 100644
--- a/files/fr/web/css/css_transitions/index.md
+++ b/files/fr/web/css/css_transitions/index.md
@@ -8,50 +8,31 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Transitions
 ---
-<div>{{CSSRef}}</div>
-
-<p>Les <strong>transitions CSS</strong> permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<ul>
- <li>{{cssxref("transition")}}</li>
- <li>{{cssxref("transition-delay")}}</li>
- <li>{{cssxref("transition-duration")}}</li>
- <li>{{cssxref("transition-property")}}</li>
- <li>{{cssxref("transition-timing-function")}}</li>
-</ul>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></dt>
- <dd>Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Apparentées aux transitions CSS, les <a href="/fr/docs/Web/CSS/Animations_CSS">animations CSS</a> peuvent déclencher des animations indépendamment du changement des valeurs spécifiées.</li>
-</ul>
+{{CSSRef}}
+
+Les **transitions CSS** permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage.
+
+## Référence
+
+### Propriétés
+
+- {{cssxref("transition")}}
+- {{cssxref("transition-delay")}}
+- {{cssxref("transition-duration")}}
+- {{cssxref("transition-property")}}
+- {{cssxref("transition-timing-function")}}
+
+## Guides
+
+- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS)
+  - : Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent.
+
+## Spécifications
+
+| Spécification                                | État                                     | Commentaire          |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Transitions')}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. |
+
+## Voir aussi
+
+- Apparentées aux transitions CSS, les [animations CSS](/fr/docs/Web/CSS/Animations_CSS) peuvent déclencher des animations indépendamment du changement des valeurs spécifiées.
diff --git a/files/fr/web/css/css_transitions/using_css_transitions/index.md b/files/fr/web/css/css_transitions/using_css_transitions/index.md
index 9403828edb..6cea275461 100644
--- a/files/fr/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/fr/web/css/css_transitions/using_css_transitions/index.md
@@ -9,70 +9,60 @@ tags:
 translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
 original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
 ---
-<div>{{CSSref}}</div>
+{{CSSref}}
 
-<p>Les <strong>transitions CSS</strong> permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée.</p>
+Les **transitions CSS** permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée.
 
-<p>Les animations qui utilisent des transitions entre deux états sont souvent appelées <em>transitions implicites</em> car l'état initial et l'état final sont définis implicitement par le navigateur.</p>
+Les animations qui utilisent des transitions entre deux états sont souvent appelées _transitions implicites_ car l'état initial et l'état final sont définis implicitement par le navigateur.
 
-<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="transitionsprinciple.png"></p>
+![A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.](transitionsprinciple.png)
 
-<p>Les transitions CSS vous permettent de choisir :</p>
+Les transitions CSS vous permettent de choisir :
 
-<ul>
- <li>les propriétés à animer en les listant explicitement</li>
- <li>le début de l'animation</li>
- <li>la durée de l'animation</li>
- <li>la façon dont la transition s'exécutera</li>
-</ul>
+- les propriétés à animer en les listant explicitement
+- le début de l'animation
+- la durée de l'animation
+- la façon dont la transition s'exécutera
 
-<h2 id="Quelles_sont_les_propriétés_CSS_qui_peuvent_être_animées">Quelles sont les propriétés CSS qui peuvent être animées ?</h2>
+## Quelles sont les propriétés CSS qui peuvent être animées ?
 
-<p>On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et <a href="/fr/docs/Web/CSS/CSS_animated_properties">la liste des propriétés concernées est limitée</a>.</p>
+On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et [la liste des propriétés concernées est limitée](/fr/docs/Web/CSS/CSS_animated_properties).
 
-<div class="note">
-  <p><strong>Note :</strong> La gestion de la valeur <code>auto</code> représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec <code>auto</code>.</p>
-</div>
+> **Note :** La gestion de la valeur `auto` représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec `auto`.
 
-<div class="note">
-  <p><strong>Note :</strong> Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via <code>.appendChild()</code> ou en modiant <code>display: none;</code>. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer <code>window.setTimeout()</code> pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.</p>
-</div>
+> **Note :** Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via `.appendChild()` ou en modiant `display: none;`. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer `window.setTimeout()` pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.
 
-<h2 id="Les_propriétés_CSS_relatives_aux_transitions">Les propriétés CSS relatives aux transitions</h2>
+## Les propriétés CSS relatives aux transitions
 
-<p>Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :</p>
+Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :
 
-<div class="note">
-<p><strong>Note :</strong>Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.</p>
-</div>
+> **Note :**Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.
 
-<dl>
- <dt>{{cssxref("transition-property")}}</dt>
- <dd>Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.</dd>
- <dt>{{cssxref("transition-duration")}}</dt>
- <dd>Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés.
- </dd>
- <dt>{{cssxref("transition-timing-function")}}</dt>
- <dd>Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des <a href="/fr/docs/Web/CSS/easing-function">fonctions de temporisation</a>.
- </dd>
- <dt>{{cssxref("transition-delay")}}</dt>
- <dd>Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition.
- </dd>
-</dl>
+- {{cssxref("transition-property")}}
+  - : Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.
+- {{cssxref("transition-duration")}}
+  - : Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés.
+- {{cssxref("transition-timing-function")}}
+  - : Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des [fonctions de temporisation](/fr/docs/Web/CSS/easing-function).
+- {{cssxref("transition-delay")}}
+  - : Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition.
 
-<p>La syntaxe de la propriété raccourcie {{cssxref("transition")}} est :</p>
+La syntaxe de la propriété raccourcie {{cssxref("transition")}} est :
 
-<pre class="brush: css">div {
-  transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
-}</pre>
+```css
+div {
+  transition: <property> <duration> <timing-function> <delay>;
+}
+```
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Un_exemple_simple">Un exemple simple</h3>
+### Un exemple simple
 
-<p>Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :</p>
+Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :
 
-<pre class="brush: css">#delay {
+```css
+#delay {
   font-size: 14px;
   transition-property: font-size;
   transition-duration: 4s;
@@ -81,18 +71,22 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
 
 #delay:hover {
   font-size: 36px;
-}</pre>
+}
+```
 
-<h3 id="Exemple_avec_plusieurs_propriétés_animées">Exemple avec plusieurs propriétés animées</h3>
+### Exemple avec plusieurs propriétés animées
 
-<pre class="brush: html hidden highlight:[3]">&lt;body&gt;
-    &lt;p&gt;La boîte ci-dessous utilise des transitions pour les propriétés : width, height, background-color, transform. Survolez la boîte pour voir les animations.&lt;/p&gt;
-    &lt;div class="box"&gt;Sample&lt;/div&gt;
-&lt;/body&gt;</pre>
+```html hidden
+<body>
+    <p>La boîte ci-dessous utilise des transitions pour les propriétés : width, height, background-color, transform. Survolez la boîte pour voir les animations.</p>
+    <div class="box">Sample</div>
+</body>
+```
 
-<h4 id="CSS_Content">CSS Content</h4>
+#### CSS Content
 
-<pre class="brush: css; highlight:[8,9]">.box {
+```css
+.box {
     border-style: solid;
     border-width: 1px;
     display: block;
@@ -108,16 +102,16 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
     height: 200px;
     transform: rotate(180deg);
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Exemple_avec_plusieurs_propriétés_animées', 600, 300)}}</p>
+{{EmbedLiveSample('Exemple_avec_plusieurs_propriétés_animées', 600, 300)}}
 
+### Appliquer une transition sur plusieurs propriétés
 
-<h3 id="Appliquer_une_transition_sur_plusieurs_propriétés">Appliquer une transition sur plusieurs propriétés</h3>
+#### CSS
 
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css; highlight:[8,9]">.box {
+```css
+.box {
   border-style: solid;
   border-width: 1px;
   display: block;
@@ -133,67 +127,77 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
   height: 200px;
   transform: rotate(180deg);
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html; highlight:[3]">&lt;p&gt;Cette boîte utilisera des transitions pour width, height, background-color, transform.
-   Survolez cette boîte pour voir l'effet.&lt;/p&gt;
-&lt;div class="box"&gt;&lt;/div&gt;
-</pre>
+```html
+<p>Cette boîte utilisera des transitions pour width, height, background-color, transform.
+   Survolez cette boîte pour voir l'effet.</p>
+<div class="box"></div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}}</p>
+{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}}
 
-<h3 id="Le_rôle_de_la_taille_des_listes_de_valeurs">Le rôle de la taille des listes de valeurs</h3>
+### Le rôle de la taille des listes de valeurs
 
-<p>Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi :</p>
+Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi :
 
-<pre class="brush: css">div {
+```css
+div {
   transition-property: opacity, left, top, height;
   transition-duration: 3s, 5s;
 }
-</pre>
+```
 
-<p>Sera équivalent à :</p>
+Sera équivalent à :
 
-<pre class="brush: css">div {
+```css
+div {
   transition-property: opacity, left, top, height;
   transition-duration: 3s, 5s, 3s, 5s;
-}</pre>
+}
+```
 
-<p>De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi,</p>
+De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi,
 
-<pre class="brush: css">div {
+```css
+div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
-}</pre>
+}
+```
 
-<p>Sera équivalent à :</p>
+Sera équivalent à :
 
-<pre class="brush: css">div {
+```css
+div {
   transition-property: opacity, left;
   transition-duration: 3s, 5s;
-}</pre>
+}
+```
 
-<h3 id="Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu">Utiliser les transitions pour accentuer les éléments pour un menu</h3>
+### Utiliser les transitions pour accentuer les éléments pour un menu
 
-<p>On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu.</p>
+On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu.
 
-<p>Tout d'abord, on définit le menu en HTML :</p>
+Tout d'abord, on définit le menu en HTML :
 
-<pre class="brush: html">&lt;nav&gt;
-  &lt;a href="#"&gt;Accueil&lt;/a&gt;
-  &lt;a href="#"&gt;À propos&lt;/a&gt;
-  &lt;a href="#"&gt;Contact&lt;/a&gt;
-  &lt;a href="#"&gt;Liens&lt;/a&gt;
-&lt;/nav&gt;
-</pre>
+```html
+<nav>
+  <a href="#">Accueil</a>
+  <a href="#">À propos</a>
+  <a href="#">Contact</a>
+  <a href="#">Liens</a>
+</nav>
+```
 
-<p>On construit le CSS pour définir l'apparence du menu :</p>
+On construit le CSS pour définir l'apparence du menu :
 
-<pre class="brush: css">a {
+```css
+a {
   color: #fff;
   background-color: #333;
   transition: all 1s ease-out;
@@ -203,9 +207,11 @@ a:hover,
 a:focus {
   color: #333;
   background-color: #fff;
-}</pre>
+}
+```
 
-<pre class="brush: css hidden">html,
+```css hidden
+html,
 body {
   margin: 0;
   padding: 0;
@@ -231,34 +237,37 @@ a {
 a:not(:last-child) {
   margin-right: 12px;
 }
-</pre>
+```
 
-<p>Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change.</p>
+Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change.
 
-<p>{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}}</p>
+{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}}
 
-<h2 id="Exemples_avec_JavaScript">Exemples avec JavaScript</h2>
+## Exemples avec JavaScript
 
-<h3 id="Utiliser_les_transitions_CSS_pour_lisser_les_transformations_avec_JavaScript">Utiliser les transitions CSS pour lisser les transformations avec JavaScript</h3>
+### Utiliser les transitions CSS pour lisser les transformations avec JavaScript
 
-<p>Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple :</p>
+Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple :
 
-<pre class="brush: html">&lt;p&gt;Click anywhere to move the ball&lt;/p&gt;
-&lt;div id="foo"&gt;&lt;/div&gt;
-</pre>
+```html
+<p>Click anywhere to move the ball</p>
+<div id="foo"></div>
+```
 
-<p>Avec JavaScript on peut ajouter un effet de mouvement sur la balle :</p>
+Avec JavaScript on peut ajouter un effet de mouvement sur la balle :
 
-<pre class="brush: js">var f = document.getElementById('foo');
+```js
+var f = document.getElementById('foo');
 document.addEventListener('click', function(ev){
     f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
     f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
 },false);
-</pre>
+```
 
-<p>Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :</p>
+Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :
 
-<pre class="brush: css">p {
+```css
+p {
   padding-left: 60px;
 }
 
@@ -272,57 +281,41 @@ document.addEventListener('click', function(ev){
   left: 0;
   transition: transform 1s;
 }
-</pre>
+```
 
-<p>{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}}</p>
+{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}}
 
-<h3 id="Détecter_le_début_et_la_fin_d'une_transition">Détecter le début et la fin d'une transition</h3>
+### Détecter le début et la fin d'une transition
 
-<p>L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} :</p>
+L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} :
 
-<dl>
- <dt><code>propertyName</code></dt>
- <dd>Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée.</dd>
- <dt><code>elapsedTime</code></dt>
- <dd>Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}.</dd>
-</dl>
+- `propertyName`
+  - : Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée.
+- `elapsedTime`
+  - : Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}.
 
-<p>Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement :</p>
+Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement :
 
-<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
-</pre>
+```js
+el.addEventListener("transitionend", updateTransition, true);
+```
 
-<p>Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement :</p>
+Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement :
 
-<pre class="brush: js">el.addEventListener("transitionrun", signalStart, true);
-el.addEventListener("transitionstart", signalStart, true);</pre>
+```js
+el.addEventListener("transitionrun", signalStart, true);
+el.addEventListener("transitionstart", signalStart, true);
+```
 
-<div class="note">
-  <p><strong>Note :</strong> L'événement <code>transitionend</code> n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}<code>: none</code> ou si la valeur de la propriété est modifiée.</p>
-</div>
+> **Note :** L'événement `transitionend` n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}`: none` ou si la valeur de la propriété est modifiée.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '', '')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                        | État                                     | Commentaires         |
+| ---------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Transitions', '', '')}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface {{domxref("TransitionEvent")}} et l'événement {{event("transitionend")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Utiliser les animations CSS</a></li>
-</ul>
+- L'interface {{domxref("TransitionEvent")}} et l'événement {{event("transitionend")}}
+- [Utiliser les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
diff --git a/files/fr/web/css/css_types/index.md b/files/fr/web/css/css_types/index.md
index eb632cdba0..a8510816b9 100644
--- a/files/fr/web/css/css_types/index.md
+++ b/files/fr/web/css/css_types/index.md
@@ -10,92 +10,69 @@ tags:
 translation_of: Web/CSS/CSS_Types
 original_slug: Web/CSS/Types_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le module <strong><em>CSS basic data types</em></strong> définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (&lt; &gt;).</p>
+Le module **_CSS basic data types_** définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (< >).
 
-<div class="note">
-<p><strong>Note :</strong> Les types de donnée CSS sont un type spécial de <a href="https://www.w3.org/TR/css3-values/#component-types">composant de type de valeur</a>.</p>
-</div>
+> **Note :** Les types de donnée CSS sont un type spécial de [composant de type de valeur](https://www.w3.org/TR/css3-values/#component-types).
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<ul>
- <li>{{cssxref("&lt;angle&gt;")}}</li>
- <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
- <li>{{cssxref("&lt;angular-color-hint&gt;")}}</li>
- <li>{{cssxref("&lt;angular-color-stop&gt;")}}</li>
- <li>{{cssxref("&lt;attr-fallback&gt;")}}</li>
- <li>{{cssxref("&lt;attr-name&gt;")}}</li>
- <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
- <li>{{cssxref("&lt;calc-product&gt;")}}</li>
- <li>{{cssxref("&lt;calc-sum&gt;")}}</li>
- <li>{{cssxref("&lt;calc-value&gt;")}}</li>
- <li>{{cssxref("&lt;color&gt;")}}</li>
- <li>{{cssxref("&lt;color-stop&gt;")}}</li>
- <li>{{cssxref("&lt;color-stop-angle&gt;")}}</li>
- <li>{{cssxref("&lt;counter-style&gt;")}}</li>
- <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
- <li>{{cssxref("&lt;dimension&gt;")}}</li>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>{{cssxref("&lt;flex&gt;")}}</li>
- <li>{{cssxref("&lt;frequency&gt;")}}</li>
- <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
- <li>{{cssxref("&lt;gradient&gt;")}}</li>
- <li>{{cssxref("&lt;ident&gt;")}}</li>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{cssxref("&lt;integer&gt;")}}</li>
- <li>{{cssxref("&lt;length&gt;")}}</li>
- <li>{{cssxref("&lt;length-percentage&gt;")}}</li>
- <li>{{cssxref("&lt;number&gt;")}}</li>
- <li>{{cssxref("&lt;number-percentage&gt;")}}</li>
- <li>{{cssxref("&lt;percentage&gt;")}}</li>
- <li>{{cssxref("&lt;position&gt;")}}</li>
- <li>{{cssxref("&lt;quote&gt;")}}</li>
- <li>{{cssxref("&lt;ratio&gt;")}}</li>
- <li>{{cssxref("&lt;resolution&gt;")}}</li>
- <li>{{cssxref("&lt;shape-box&gt;")}}</li>
- <li>{{cssxref("&lt;shape-radius&gt;")}}</li>
- <li>{{cssxref("&lt;string&gt;")}}</li>
- <li>{{cssxref("&lt;time&gt;")}}</li>
- <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
- <li>{{cssxref("easing-function")}}</li>
- <li>{{cssxref("&lt;toggle-value&gt;")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li>{{cssxref("&lt;type-or-unit&gt;")}}</li>
- <li>{{cssxref("&lt;url&gt;")}}</li>
- <li>{{cssxref("&lt;url-modifier&gt;")}}</li>
- <li>{{cssxref("&lt;zero&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;angle&gt;")}}
+- {{cssxref("&lt;angle-percentage&gt;")}}
+- {{cssxref("&lt;angular-color-hint&gt;")}}
+- {{cssxref("&lt;angular-color-stop&gt;")}}
+- {{cssxref("&lt;attr-fallback&gt;")}}
+- {{cssxref("&lt;attr-name&gt;")}}
+- {{cssxref("&lt;basic-shape&gt;")}}
+- {{cssxref("&lt;blend-mode&gt;")}}
+- {{cssxref("&lt;calc-product&gt;")}}
+- {{cssxref("&lt;calc-sum&gt;")}}
+- {{cssxref("&lt;calc-value&gt;")}}
+- {{cssxref("&lt;color&gt;")}}
+- {{cssxref("&lt;color-stop&gt;")}}
+- {{cssxref("&lt;color-stop-angle&gt;")}}
+- {{cssxref("&lt;counter-style&gt;")}}
+- {{cssxref("&lt;custom-ident&gt;")}}
+- {{cssxref("&lt;dimension&gt;")}}
+- {{cssxref("&lt;filter-function&gt;")}}
+- {{cssxref("&lt;flex&gt;")}}
+- {{cssxref("&lt;frequency&gt;")}}
+- {{cssxref("&lt;frequency-percentage&gt;")}}
+- {{cssxref("&lt;gradient&gt;")}}
+- {{cssxref("&lt;ident&gt;")}}
+- {{cssxref("&lt;image&gt;")}}
+- {{cssxref("&lt;integer&gt;")}}
+- {{cssxref("&lt;length&gt;")}}
+- {{cssxref("&lt;length-percentage&gt;")}}
+- {{cssxref("&lt;number&gt;")}}
+- {{cssxref("&lt;number-percentage&gt;")}}
+- {{cssxref("&lt;percentage&gt;")}}
+- {{cssxref("&lt;position&gt;")}}
+- {{cssxref("&lt;quote&gt;")}}
+- {{cssxref("&lt;ratio&gt;")}}
+- {{cssxref("&lt;resolution&gt;")}}
+- {{cssxref("&lt;shape-box&gt;")}}
+- {{cssxref("&lt;shape-radius&gt;")}}
+- {{cssxref("&lt;string&gt;")}}
+- {{cssxref("&lt;time&gt;")}}
+- {{cssxref("&lt;time-percentage&gt;")}}
+- {{cssxref("easing-function")}}
+- {{cssxref("&lt;toggle-value&gt;")}}
+- {{cssxref("&lt;transform-function&gt;")}}
+- {{cssxref("&lt;type-or-unit&gt;")}}
+- {{cssxref("&lt;url&gt;")}}
+- {{cssxref("&lt;url-modifier&gt;")}}
+- {{cssxref("&lt;zero&gt;")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | État                             | Commentaires         |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Values')}} | {{Spec2('CSS4 Values')}} |                      |
+| {{SpecName('CSS3 Values')}} | {{Spec2('CSS3 Values')}} | Définition initiale. |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Unités et valeurs CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li>
-</ul>
+- [Unités et valeurs CSS](/fr/docs/Web/CSS/CSS_Values_and_Units)
+- [Introduction à CSS : les valeurs et les unités](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
diff --git a/files/fr/web/css/css_values_and_units/index.md b/files/fr/web/css/css_values_and_units/index.md
index 623b4118a6..5f15cc7d9a 100644
--- a/files/fr/web/css/css_values_and_units/index.md
+++ b/files/fr/web/css/css_values_and_units/index.md
@@ -7,489 +7,339 @@ tags:
 translation_of: Web/CSS/CSS_Values_and_Units
 original_slug: Web/CSS/Valeurs_et_unités_CSS
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Chaque déclaration CSS inclut une paire constituée d'une propriété et d'une valeur. La plupart de celles-ci sont définies dans le module de spécification <em><a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units</a></em> (Valeurs et unités CSS). Dans cet article, nous verrons ces différents types et valeurs ainsi que des notions de base quant à leur utilisation. Pour obtenir des informattions plus détaillées, vous pouvez consulter la page de chacun de ces types.</p>
+Chaque déclaration CSS inclut une paire constituée d'une propriété et d'une valeur. La plupart de celles-ci sont définies dans le module de spécification _[CSS Values and Units](https://www.w3.org/TR/css-values-4/)_ (Valeurs et unités CSS). Dans cet article, nous verrons ces différents types et valeurs ainsi que des notions de base quant à leur utilisation. Pour obtenir des informattions plus détaillées, vous pouvez consulter la page de chacun de ces types.
 
-<h2 id="Types_de_données_textuels">Types de données textuels</h2>
+## Types de données textuels
 
-<ul>
- <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
- <li>Des mots-clés prédéfinis tels que les identifiants (<code>&lt;ident&gt;</code>)</li>
- <li>{{cssxref("&lt;string&gt;")}}</li>
- <li>{{cssxref("&lt;url&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;custom-ident&gt;")}}
+- Des mots-clés prédéfinis tels que les identifiants (`<ident>`)
+- {{cssxref("&lt;string&gt;")}}
+- {{cssxref("&lt;url&gt;")}}
 
-<p>Une valeur dont le type de donnée est textuel peut être un identifiant CSS (<code>&lt;ident&gt;</code>) ou une chaîne de caractères (<code>&lt;string&gt;</code>). Lorsqu'il s'agit d'un identifiant CSS, celui-ci ne doit pas être entouré de doubles quotes (guillemets anglais). En revanche, les chaînes de caractères (<code>&lt;string&gt;</code>) doivent être délimitées par des quotes ou des doubles quotes.</p>
+Une valeur dont le type de donnée est textuel peut être un identifiant CSS (`<ident>`) ou une chaîne de caractères (`<string>`). Lorsqu'il s'agit d'un identifiant CSS, celui-ci ne doit pas être entouré de doubles quotes (guillemets anglais). En revanche, les chaînes de caractères (`<string>`) doivent être délimitées par des quotes ou des doubles quotes.
 
-<p>Dans les spécifications, les valeurs qui peuvent être définies par un développeur web sont indiquées comme {{cssxref("&lt;custom-ident&gt;")}} ; ce type de valeur se comportera comme n'importe quel autre identifiant CSS. Ainsi, pour la propriété {{cssxref("grid-area")}}, on peut utiliser une valeur de type <code>&lt;custom-ident&gt;</code> et si on a une zone de grille nommée <code>content</code>, on l'indiquera sans quotes :</p>
+Dans les spécifications, les valeurs qui peuvent être définies par un développeur web sont indiquées comme {{cssxref("&lt;custom-ident&gt;")}} ; ce type de valeur se comportera comme n'importe quel autre identifiant CSS. Ainsi, pour la propriété {{cssxref("grid-area")}}, on peut utiliser une valeur de type `<custom-ident>` et si on a une zone de grille nommée `content`, on l'indiquera sans quotes :
 
-<pre class="brush: css">.item {
+```css
+.item {
   grid-area: content;
 }
-</pre>
+```
 
-<p>En revanche, lorsqu'on manipule une valeur de type {{cssxref("&lt;string&gt;")}}, comme ça peut être le cas lorsqu'on utilise la propriété {{cssxref("content")}}, il faut l'entourer de quotes :</p>
+En revanche, lorsqu'on manipule une valeur de type {{cssxref("&lt;string&gt;")}}, comme ça peut être le cas lorsqu'on utilise la propriété {{cssxref("content")}}, il faut l'entourer de quotes :
 
-<pre class="brush: css">.item::after {
+```css
+.item::after {
   content: "Voici le contenu.";
 }
-</pre>
+```
 
-<p>Si le type indiqué dans la spécification est <code>&lt;custom-ident&gt; | &lt;string&gt;</code>, cela nidiquera que les quotes sont optionnelles. C'est par exemple le cas avec les noms des animations :</p>
+Si le type indiqué dans la spécification est `<custom-ident> | <string>`, cela nidiquera que les quotes sont optionnelles. C'est par exemple le cas avec les noms des animations :
 
-<pre class="brush: bash">@keyframe identifiantValide {
+```bash
+@keyframe identifiantValide {
   /* on place les keyframes ici */
 }
 
 @keyframe 'chaineValide' {
   /* on place les keyframes ici */
-}</pre>
+}
+```
 
-<p>Bien qu'on puisse généralement utiliser presque n'importe nom (y compris en le composant d'emojis), un identifiant ne peut pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>, ne peut pas commencer par un chiffre ou par deux tirets. De façon générale, il ne faut pas qu'un identifiant soit un mot-clé CSS existant. Pour plus d'informations, voir les pages {{cssxref("&lt;custom-ident&gt;")}} et {{cssxref("&lt;string&gt;")}}.</p>
+Bien qu'on puisse généralement utiliser presque n'importe nom (y compris en le composant d'emojis), un identifiant ne peut pas être `none`, `unset`, `initial` ou `inherit`, ne peut pas commencer par un chiffre ou par deux tirets. De façon générale, il ne faut pas qu'un identifiant soit un mot-clé CSS existant. Pour plus d'informations, voir les pages {{cssxref("&lt;custom-ident&gt;")}} et {{cssxref("&lt;string&gt;")}}.
 
-<h3 id="Mots-clés_prédéfinis">Mots-clés prédéfinis</h3>
+### Mots-clés prédéfinis
 
-<p>Les spécifications définissent également des mots-clés utilisables comme valeurs pour certaines propriétés. Ces mots-clés sont également des identifiants CSS et ne doivent pas être entourés de guillemets.</p>
+Les spécifications définissent également des mots-clés utilisables comme valeurs pour certaines propriétés. Ces mots-clés sont également des identifiants CSS et ne doivent pas être entourés de guillemets.
 
-<p>Lorsque vous consultez une spécification ou un article de MDN à propos d'une propriété, vous pourrez voir les mots-clés autorisés sous la forme suivante. Voici un exemple avec les valeurs autorisées pour la propriété {{cssxref("break-inside")}}.</p>
+Lorsque vous consultez une spécification ou un article de MDN à propos d'une propriété, vous pourrez voir les mots-clés autorisés sous la forme suivante. Voici un exemple avec les valeurs autorisées pour la propriété {{cssxref("break-inside")}}.
 
-<pre class="syntaxbox">auto | avoid | avoid-page | avoid-column | avoid-region</pre>
+    auto | avoid | avoid-page | avoid-column | avoid-region
 
-<p>Dans une déclaration, on pourra donc écrire (sans quote) :</p>
+Dans une déclaration, on pourra donc écrire (sans quote) :
 
-<pre class="brush: css">.box {
+```css
+.box {
   break-inside: avoid;
 }
-</pre>
+```
 
-<h3 id="Mots-clés_généraux">Mots-clés généraux</h3>
+### Mots-clés généraux
 
-<p>En complément des mots-clés définis pour certaines propriétés, il existe trois mots-clés utilisables pour l'ensemble des propriétés CSS : {{cssxref("initial")}}, {{cssxref("inherit")}} et {{cssxref("unset")}}.</p>
+En complément des mots-clés définis pour certaines propriétés, il existe trois mots-clés utilisables pour l'ensemble des propriétés CSS : {{cssxref("initial")}}, {{cssxref("inherit")}} et {{cssxref("unset")}}.
 
-<p>Le mot-clé <code>initial</code> représente la valeur définie comme la valeur initiale de la propriété. Le mot-clé <code>inherit</code> correspond à la valeur calculée de la propriété sur l'élément parent si celle-ci est héritée.</p>
+Le mot-clé `initial` représente la valeur définie comme la valeur initiale de la propriété. Le mot-clé `inherit` correspond à la valeur calculée de la propriété sur l'élément parent si celle-ci est héritée.
 
-<p>Le mot-clé <code>unset</code> agit comme <code>inherit</code> ou <code>initial</code> selon que la propriété soit héritée ou non.</p>
+Le mot-clé `unset` agit comme `inherit` ou `initial` selon que la propriété soit héritée ou non.
 
-<p>Une quatrième valeur, {{cssxref("revert")}}, a été ajoutée dans le module de spécification de niveau 4 sur la cascade mais sa prise en charge est encore faible et hétérogène (en février 2019).</p>
+Une quatrième valeur, {{cssxref("revert")}}, a été ajoutée dans le module de spécification de niveau 4 sur la cascade mais sa prise en charge est encore faible et hétérogène (en février 2019).
 
-<h3 id="URL">URL</h3>
+### URL
 
-<p>Une valeur de type {{cssxref("&lt;url&gt;")}} s'utilise avec une notation fonctionnelle qui prend une chaîne de caractères (type <code>&lt;string&gt;</code>) comme argument et qui est une URL. La chaîne de caractères peut être une URL absolue ou relative. Ainsi, si on souhaite inclure une image d'arrière-plan, on pourra utiliser l'une ou l'autre de ces déclarations.</p>
+Une valeur de type {{cssxref("&lt;url&gt;")}} s'utilise avec une notation fonctionnelle qui prend une chaîne de caractères (type `<string>`) comme argument et qui est une URL. La chaîne de caractères peut être une URL absolue ou relative. Ainsi, si on souhaite inclure une image d'arrière-plan, on pourra utiliser l'une ou l'autre de ces déclarations.
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   background-image: url("images/mon-arriere-plan.png");
-}</code>
+}
 
-<code>.box {
+.box {
   background-image: url("https://www.exammple.com/images/mon-arriere-plan.png");
-}</code>
-</pre>
+}
+```
 
-<p>On notera que la valeur passée à <code>url()</code> peut ne pas contenir de quotes. Dans ce cas, elle sera analysée comme une valeur <code>&lt;url-token&gt;</code> et devra respecter certaines règles supplémentaires quant à l'échappement de certains caractères. Voir la page {{cssxref("&lt;url&gt;")}} pour plus d'informations.</p>
+On notera que la valeur passée à `url()` peut ne pas contenir de quotes. Dans ce cas, elle sera analysée comme une valeur `<url-token>` et devra respecter certaines règles supplémentaires quant à l'échappement de certains caractères. Voir la page {{cssxref("&lt;url&gt;")}} pour plus d'informations.
 
-<h2 id="Types_de_données_numériques">Types de données numériques</h2>
+## Types de données numériques
 
-<ul>
- <li>{{cssxref("&lt;integer&gt;")}}</li>
- <li>{{cssxref("&lt;number&gt;")}}</li>
- <li>{{cssxref("&lt;dimension&gt;")}}</li>
- <li>{{cssxref("&lt;percentage&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;integer&gt;")}}
+- {{cssxref("&lt;number&gt;")}}
+- {{cssxref("&lt;dimension&gt;")}}
+- {{cssxref("&lt;percentage&gt;")}}
 
-<h3 id="Entiers">Entiers</h3>
+### Entiers
 
-<p>Un entier ({{cssxref("&lt;integer&gt;")}}) se compose d'un ou plusieurs chiffres entre <code>0</code> et <code>9</code> (exemple de valeurs : <code>1024</code> ou <code>-55</code>). Un entier peut être précédé d'un signe <code>+</code> ou <code>-</code>.</p>
+Un entier ({{cssxref("&lt;integer&gt;")}}) se compose d'un ou plusieurs chiffres entre `0` et `9` (exemple de valeurs : `1024` ou `-55`). Un entier peut être précédé d'un signe `+` ou `-`.
 
-<h3 id="Nombres">Nombres</h3>
+### Nombres
 
-<p>Un nombre ({{cssxref("&lt;number&gt;")}}) représente un nombre décimal pouvant avoir (ou non) une composante décimale. Le séparateur décimal utilisé est le point. Ainsi, <code>1</code> et <code>1.2</code> sont des nombres en CSS. Les nombres peuvent être précédés d'un signe <code>+</code> ou <code>-</code>.</p>
+Un nombre ({{cssxref("&lt;number&gt;")}}) représente un nombre décimal pouvant avoir (ou non) une composante décimale. Le séparateur décimal utilisé est le point. Ainsi, `1` et `1.2` sont des nombres en CSS. Les nombres peuvent être précédés d'un signe `+` ou `-`.
 
-<h3 id="Dimensions">Dimensions</h3>
+### Dimensions
 
-<p>Une valeur {{cssxref("&lt;dimension&gt;")}} est un nombre (<code>&lt;number&gt;</code>) suivi directement d'une unité (par exemple <code>10px</code>). L'identifiant utilisé pour exprimer l'unité est insensible à la casse et est lui-même un identifiant. Il n'y a jamais d'espace entre le nombre et l'unité (<code>1 cm</code> ne sera pas valide). CSS utilise les dimensions pour les types suivants :</p>
+Une valeur {{cssxref("&lt;dimension&gt;")}} est un nombre (`<number>`) suivi directement d'une unité (par exemple `10px`). L'identifiant utilisé pour exprimer l'unité est insensible à la casse et est lui-même un identifiant. Il n'y a jamais d'espace entre le nombre et l'unité (`1 cm` ne sera pas valide). CSS utilise les dimensions pour les types suivants :
 
-<ul>
- <li>{{cssxref("&lt;length&gt;")}} (longueurs avec des unités de distance)</li>
- <li>{{cssxref("&lt;angle&gt;")}}</li>
- <li>{{cssxref("&lt;time&gt;")}}</li>
- <li>{{cssxref("&lt;frequency&gt;")}}</li>
- <li>{{cssxref("&lt;resolution&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;length&gt;")}} (longueurs avec des unités de distance)
+- {{cssxref("&lt;angle&gt;")}}
+- {{cssxref("&lt;time&gt;")}}
+- {{cssxref("&lt;frequency&gt;")}}
+- {{cssxref("&lt;resolution&gt;")}}
 
-<p>Nous verrons chacun de ces types dans les sections suivantes.</p>
+Nous verrons chacun de ces types dans les sections suivantes.
 
-<ul>
-</ul>
+#### Unités de distance
 
-<h4 id="Unités_de_distance">Unités de distance</h4>
+Lorsqu'on peut utiliser une distance comme valeur d'une propriété, cette valeur est décrite avec le type {{cssxref("&lt;length&gt;")}}. Il existe deux types de longueur en CSS : les longueurs absolues d'une part et les longueurs relatives d'autre part.
 
-<p>Lorsqu'on peut utiliser une distance comme valeur d'une propriété, cette valeur est décrite avec le type {{cssxref("&lt;length&gt;")}}. Il existe deux types de longueur en CSS : les longueurs absolues d'une part et les longueurs relatives d'autre part.</p>
+Les unités de longueur relative permettent d'exprimer une distance relative à une autre grandeur. Ainsi, l'unité `em` sera relative à la taille (corps) de la police pour l'élément ; l'unité `vh` sera relative à la hauteur de la zone d'affichage (_viewport_).
 
-<p>Les unités de longueur relative permettent d'exprimer une distance relative à une autre grandeur. Ainsi, l'unité <code>em</code> sera relative à la taille (corps) de la police pour l'élément ; l'unité <code>vh</code> sera relative à la hauteur de la zone d'affichage (<em>viewport</em>).</p>
+| Unité  | Relative à                                                                                                                                         |
+| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `em`   | La taille (corps) de police de l'élément                                                                                                           |
+| `ex`   | La hauteur d'un x avec la police utilisée par l'élément                                                                                            |
+| `cap`  | La hauteur d'une majuscule nominale avec la police utilisée par l'élément                                                                          |
+| `ch`   | La largeur moyenne d'un glyphe étroit et de l'espace alentour pour la police utilisée par l'élément (le glyphe concerné étant “0” (ZERO, U+0030)). |
+| `ic`   | La largeur moyenne d'un glyphe large et de l'espace alentour pour la police utilisée par l'élément (exemple de glyphe “水” ).                      |
+| `rem`  | La taille (corps) de police de l'élément racine                                                                                                    |
+| `lh`   | La hauteur de la ligne de l'élément                                                                                                                |
+| `rlh`  | La hauteur de la ligne de l'élément racine                                                                                                         |
+| `vw`   | 1% de la largeur de la zone d'affichage (_viewport_)                                                                                               |
+| `vh`   | 1% de la hauteur de la zone d'affichage (_viewport_)                                                                                               |
+| `vi`   | 1% de la taille de la zone d'affichage sur l'axe en ligne (_inline axis_)                                                                          |
+| `vb`   | 1% de la taille de la zone d'affichage sur l'axe de bloc (_block axis_)                                                                            |
+| `vmin` | 1% de la zone d'affichage selon sa plus petite dimension                                                                                           |
+| `vmax` | 1% de la zone d'affichage selon sa plus grande dimension                                                                                           |
 
-<table class="standard-table">
- <caption>Récapitulatif des unités relatives</caption>
- <thead>
-  <tr>
-   <th scope="col">Unité</th>
-   <th scope="col">Relative à</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>em</code></td>
-   <td>La taille (corps) de police de l'élément</td>
-  </tr>
-  <tr>
-   <td><code>ex</code></td>
-   <td>La hauteur d'un x avec la police utilisée par l'élément</td>
-  </tr>
-  <tr>
-   <td><code>cap</code></td>
-   <td>La hauteur d'une majuscule nominale avec la police utilisée par l'élément</td>
-  </tr>
-  <tr>
-   <td><code>ch</code></td>
-   <td>La largeur moyenne d'un glyphe étroit et de l'espace alentour pour la police utilisée par l'élément (le glyphe concerné étant “0” (ZERO, U+0030)).</td>
-  </tr>
-  <tr>
-   <td><code>ic</code></td>
-   <td>La largeur moyenne d'un glyphe large et de l'espace alentour pour la police utilisée par l'élément (exemple de glyphe “水” ).</td>
-  </tr>
-  <tr>
-   <td><code>rem</code></td>
-   <td>La taille (corps) de police de l'élément racine</td>
-  </tr>
-  <tr>
-   <td><code>lh</code></td>
-   <td>La hauteur de la ligne de l'élément</td>
-  </tr>
-  <tr>
-   <td><code>rlh</code></td>
-   <td>La hauteur de la ligne de l'élément racine</td>
-  </tr>
-  <tr>
-   <td><code>vw</code></td>
-   <td>1% de la largeur de la zone d'affichage (<em>viewport</em>)</td>
-  </tr>
-  <tr>
-   <td><code>vh</code></td>
-   <td>1% de la hauteur de la zone d'affichage (<em>viewport</em>)</td>
-  </tr>
-  <tr>
-   <td><code>vi</code></td>
-   <td>1% de la taille de la zone d'affichage sur l'axe en ligne (<em>inline axis</em>)</td>
-  </tr>
-  <tr>
-   <td><code>vb</code></td>
-   <td>1% de la taille de la zone d'affichage sur l'axe de bloc (<em>block axis</em>)</td>
-  </tr>
-  <tr>
-   <td><code>vmin</code></td>
-   <td>1% de la zone d'affichage selon sa plus petite dimension</td>
-  </tr>
-  <tr>
-   <td><code>vmax</code></td>
-   <td>1% de la zone d'affichage selon sa plus grande dimension</td>
-  </tr>
- </tbody>
-</table>
+Les unités de longueur absolue correspondent à des mesures physiques et sont ainsi particulièrement adaptées lors que le média d'affichage possède une taille fixe (l'impression par exemple). Ainsi, l'unité `cm` correspond à un centimètre physique.
 
-<p>Les unités de longueur absolue correspondent à des mesures physiques et sont ainsi particulièrement adaptées lors que le média d'affichage possède une taille fixe (l'impression par exemple). Ainsi, l'unité <code>cm</code> correspond à un centimètre physique.</p>
+| Unité | Nom                 | Équivalence         |
+| ----- | ------------------- | ------------------- |
+| `cm`  | Centimètre          | 1cm = 96px/2.54     |
+| `mm`  | Millimètre          | 1mm = 1/10e de 1cm  |
+| `Q`   | Quart de millimètre | 1Q = 1/40e de 1cm   |
+| `in`  | Pouces (_inches_)   | 1in = 2.54cm = 96px |
+| `pc`  | Picas               | 1pc = 1/16e de 1in  |
+| `pt`  | Points              | 1pt = 1/72e de 1in  |
+| `px`  | Pixels              | 1px = 1/96e de 1in  |
 
-<table class="standard-table">
- <caption>Récapitulatif des unités de longueur absolue</caption>
- <thead>
-  <tr>
-   <th scope="col">Unité</th>
-   <th scope="col">Nom</th>
-   <th scope="col">Équivalence</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>cm</code></td>
-   <td>Centimètre</td>
-   <td>1cm = 96px/2.54</td>
-  </tr>
-  <tr>
-   <td><code>mm</code></td>
-   <td>Millimètre</td>
-   <td>1mm = 1/10e de 1cm</td>
-  </tr>
-  <tr>
-   <td><code>Q</code></td>
-   <td>Quart de millimètre</td>
-   <td>1Q = 1/40e de 1cm</td>
-  </tr>
-  <tr>
-   <td><code>in</code></td>
-   <td>Pouces (<em>inches</em>)</td>
-   <td>1in = 2.54cm = 96px</td>
-  </tr>
-  <tr>
-   <td><code>pc</code></td>
-   <td>Picas</td>
-   <td>1pc = 1/16e de 1in</td>
-  </tr>
-  <tr>
-   <td><code>pt</code></td>
-   <td>Points</td>
-   <td>1pt = 1/72e de 1in</td>
-  </tr>
-  <tr>
-   <td><code>px</code></td>
-   <td>Pixels</td>
-   <td>1px = 1/96e de 1in</td>
-  </tr>
- </tbody>
-</table>
+Lorsqu'on utilise une longueur nulle (sa valeur est `0`), l'identifiant correspondant à l'unité n'est pas obligatoire. Dans tous les autres cas, l'unité doit être écrite juste après la valeur (sans espace). L'identifiant de l'unité est insensible à la casse.
 
-<p>Lorsqu'on utilise une longueur nulle (sa valeur est <code>0</code>), l'identifiant correspondant à l'unité n'est pas obligatoire. Dans tous les autres cas, l'unité doit être écrite juste après la valeur (sans espace). L'identifiant de l'unité est insensible à la casse.</p>
+#### Unités angulaires
 
-<h4 id="Unités_angulaires">Unités angulaires</h4>
+Les valeurs angulaires sont représentées avec le type {{cssxref("&lt;angle&gt;")}} et peuvent être décrites avec les unités suivantes :
 
-<p>Les valeurs angulaires sont représentées avec le type {{cssxref("&lt;angle&gt;")}} et peuvent être décrites avec les unités suivantes :</p>
+| Unité  | Nom             | Description                              |
+| ------ | --------------- | ---------------------------------------- |
+| `deg`  | Degrés          | Un cercle se divise en 360 degrés égaux. |
+| `grad` | Grades/Gradians | Un cercle se compose de 400 grades.      |
+| `rad`  | Radians         | Un cercle se compose de 2π radians.      |
+| `turn` | Tours           | Un cercle se compose d'un tour.          |
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Unité</th>
-   <th scope="col">Nom</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>deg</code></td>
-   <td>Degrés</td>
-   <td>Un cercle se divise en 360 degrés égaux.</td>
-  </tr>
-  <tr>
-   <td><code>grad</code></td>
-   <td>Grades/Gradians</td>
-   <td>Un cercle se compose de 400 grades.</td>
-  </tr>
-  <tr>
-   <td><code>rad</code></td>
-   <td>Radians</td>
-   <td>Un cercle se compose de 2π radians.</td>
-  </tr>
-  <tr>
-   <td><code>turn</code></td>
-   <td>Tours</td>
-   <td>Un cercle se compose d'un tour.</td>
-  </tr>
- </tbody>
-</table>
+#### Unités temporelles
 
-<h4 id="Unités_temporelles">Unités temporelles</h4>
+Les valeurs temporelles sont de type {{cssxref("&lt;time&gt;")}} et utilisent les unités suivantes.
 
-<p>Les valeurs temporelles sont de type {{cssxref("&lt;time&gt;")}} et utilisent les unités suivantes.</p>
+| Unité | Nom           | Description             |
+| ----- | ------------- | ----------------------- |
+| `s`   | Secondes      |                         |
+| `ms`  | Millisecondes | Un millième de seconde. |
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Unité</th>
-   <th scope="col">Nom</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>s</code></td>
-   <td>Secondes</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td><code>ms</code></td>
-   <td>Millisecondes</td>
-   <td>Un millième de seconde.</td>
-  </tr>
- </tbody>
-</table>
+#### Unités de fréquence
 
-<h4 id="Unités_de_fréquence">Unités de fréquence</h4>
+Les valeurs de fréquence ont le type {{cssxref("&lt;frequency&gt;")}} et utilisent les valeurs suivantes.
 
-<p>Les valeurs de fréquence ont le type {{cssxref("&lt;frequency&gt;")}} et utilisent les valeurs suivantes.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Unité</th>
-   <th scope="col">Nom</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>Hz</code></td>
-   <td>Hertz</td>
-   <td>Nombre de fois par seconde.</td>
-  </tr>
-  <tr>
-   <td><code>kHz</code></td>
-   <td>Kilohertz</td>
-   <td>1000 Hertz.</td>
-  </tr>
- </tbody>
-</table>
+| Unité | Nom       | Description                 |
+| ----- | --------- | --------------------------- |
+| `Hz`  | Hertz     | Nombre de fois par seconde. |
+| `kHz` | Kilohertz | 1000 Hertz.                 |
 
-<h4 id="Unités_de_résolution">Unités de résolution</h4>
+#### Unités de résolution
 
-<p>Les résolutions sont représentées par des valeurs de type {{cssxref("&lt;resolution&gt;")}}. Elles correspondent à la taille d'un point sur une représentation graphique et décrivent la quantité de ces points sur un pixel, pouce ou centimètre CSS.</p>
+Les résolutions sont représentées par des valeurs de type {{cssxref("&lt;resolution&gt;")}}. Elles correspondent à la taille d'un point sur une représentation graphique et décrivent la quantité de ces points sur un pixel, pouce ou centimètre CSS.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Unité</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>dpi</code></td>
-   <td>Points par pouce.</td>
-  </tr>
-  <tr>
-   <td><code>dpcm</code></td>
-   <td>Points par centimètre.</td>
-  </tr>
-  <tr>
-   <td><code>dppx</code>, <code>x</code></td>
-   <td>Points par unité px.</td>
-  </tr>
- </tbody>
-</table>
+| Unité       | Description            |
+| ----------- | ---------------------- |
+| `dpi`       | Points par pouce.      |
+| `dpcm`      | Points par centimètre. |
+| `dppx`, `x` | Points par unité px.   |
 
-<h3 id="Pourcentages">Pourcentages</h3>
+### Pourcentages
 
-<p>Une valeur de type {{cssxref("&lt;percentage&gt;")}} représente une fraction d'une autre valeur de référence.</p>
+Une valeur de type {{cssxref("&lt;percentage&gt;")}} représente une fraction d'une autre valeur de référence.
 
-<p>Les valeurs exprimées en pourcentages sont relatives à d'autres quantités (une longueur par exemple). Chaque propriété qui permet d'utiliser un pourcentage définit également la quantité à laquelle se réfère ce pourcentage. Cette quantité peut être une valeur d'une autre propriété du même élément, la valeur de la propriété sur un élément ancêtre, une caractéristique du bloc englobant ou autre chose.</p>
+Les valeurs exprimées en pourcentages sont relatives à d'autres quantités (une longueur par exemple). Chaque propriété qui permet d'utiliser un pourcentage définit également la quantité à laquelle se réfère ce pourcentage. Cette quantité peut être une valeur d'une autre propriété du même élément, la valeur de la propriété sur un élément ancêtre, une caractéristique du bloc englobant ou autre chose.
 
-<p>Ainsi, si on utilise {{cssxref("width")}} avec un pourcentage sur une boîte. Ce pourcentage fera référence à la largeur calculée de l'élément parent de la boîte :</p>
+Ainsi, si on utilise {{cssxref("width")}} avec un pourcentage sur une boîte. Ce pourcentage fera référence à la largeur calculée de l'élément parent de la boîte :
 
-<pre class="brush: css">.box {
+```css
+.box {
   width: 50%;
-}</pre>
+}
+```
 
-<h3 id="Mélanges_entre_les_pourcentages_et_les_dimensions">Mélanges entre les pourcentages et les dimensions</h3>
+### Mélanges entre les pourcentages et les dimensions
 
-<p>Certaines propriétés permettent d'utiliser une dimension avec deux types possibles (par exemple une longueur ou un pourcentage). Dans ce cas, la valeur mentionnée dans la spécification a une unité composite (ex. {{cssxref("&lt;length-percentage&gt;")}}). Voici les différentes unités composites qui existent :</p>
+Certaines propriétés permettent d'utiliser une dimension avec deux types possibles (par exemple une longueur ou un pourcentage). Dans ce cas, la valeur mentionnée dans la spécification a une unité composite (ex. {{cssxref("&lt;length-percentage&gt;")}}). Voici les différentes unités composites qui existent :
 
-<ul>
- <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
- <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
- <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;frequency-percentage&gt;")}}
+- {{cssxref("&lt;angle-percentage&gt;")}}
+- {{cssxref("&lt;time-percentage&gt;")}}
 
-<h3 id="Types_de_données_spéciaux_(définis_via_d'autres_spécifications)">Types de données spéciaux (définis via d'autres spécifications)</h3>
+### Types de données spéciaux (définis via d'autres spécifications)
 
-<ul>
- <li>{{cssxref("&lt;color&gt;")}}</li>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{cssxref("&lt;position&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;color&gt;")}}
+- {{cssxref("&lt;image&gt;")}}
+- {{cssxref("&lt;position&gt;")}}
 
-<h4 id="Couleur">Couleur</h4>
+#### Couleur
 
-<p>Une valeur de type {{cssxref("&lt;color&gt;")}} permet de représenter une couleur pour un élément (par exemple la couleur de son arrière-plan). Ce type est défini dans le module de spécification <em><a href="https://drafts.csswg.org/css-color-3/">CSS Color</a></em>.</p>
+Une valeur de type {{cssxref("&lt;color&gt;")}} permet de représenter une couleur pour un élément (par exemple la couleur de son arrière-plan). Ce type est défini dans le module de spécification _[CSS Color](https://drafts.csswg.org/css-color-3/)_.
 
-<h4 id="Image">Image</h4>
+#### Image
 
-<p>Une valeur de type {{cssxref("&lt;image&gt;")}} permet de représenter une image utilisable en CSS. Ce type est défini dans le module de spécification <em><a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a></em>.</p>
+Une valeur de type {{cssxref("&lt;image&gt;")}} permet de représenter une image utilisable en CSS. Ce type est défini dans le module de spécification _[CSS Image Values and Replaced Content Module](https://www.w3.org/TR/css-images-4/)_.
 
-<h4 id="Position">Position</h4>
+#### Position
 
-<p>Le type {{cssxref("&lt;position&gt;")}} définit le positionnement, sur deux dimensions, d'un objet sur une zone de positionnement. Ce peut être le positionnement d'une image d'arrière-plan par rapport à son conteneur par exemple. Ce type est interprété comme {{cssxref("background-position")}} et est donc spécifié avec le module <a href="https://www.w3.org/TR/css-backgrounds-3/"><em>CSS Backgrounds and Borders</em></a>.</p>
+Le type {{cssxref("&lt;position&gt;")}} définit le positionnement, sur deux dimensions, d'un objet sur une zone de positionnement. Ce peut être le positionnement d'une image d'arrière-plan par rapport à son conteneur par exemple. Ce type est interprété comme {{cssxref("background-position")}} et est donc spécifié avec le module [_CSS Backgrounds and Borders_](https://www.w3.org/TR/css-backgrounds-3/).
 
-<h3 id="Notations_fonctionnelles_(fonctions)">Notations fonctionnelles (fonctions)</h3>
+### Notations fonctionnelles (fonctions)
 
-<ul>
- <li>{{cssxref("calc()")}}</li>
- <li>{{cssxref("min()", "min()")}}</li>
- <li>{{cssxref("max()", "max()")}}</li>
- <li>{{cssxref("clamp()", "clamp()")}}</li>
- <li>{{cssxref("toggle", "toggle()")}}</li>
- <li>{{cssxref("attr()", "attr()")}}</li>
-</ul>
+- {{cssxref("calc()")}}
+- {{cssxref("min()", "min()")}}
+- {{cssxref("max()", "max()")}}
+- {{cssxref("clamp()", "clamp()")}}
+- {{cssxref("toggle", "toggle()")}}
+- {{cssxref("attr()", "attr()")}}
 
-<p>Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche <code>(</code> suivie des arguments de la notation, suivis d'une parenthèse droite<code>)</code>. Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.</p>
+Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche `(` suivie des arguments de la notation, suivis d'une parenthèse droite`)`. Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.
 
-<p>Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.</p>
+Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.
 
-<div class="note">
-<p><strong>Note :</strong> Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.</p>
-</div>
+> **Note :** Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.
 
-<p>Certaines notations fonctionnelles historiques telles que <code>rgba()</code> utilisent des virgules pour séparer des arguments mais la plupart du temps, les virgules sont uniquement utilisées afin de séparer les éléments d'une liste. Si une virgule est utilisée comme séparateur entre des arguments, on peut ajouter un espace optionnel avant et après la virgule.</p>
+Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des virgules pour séparer des arguments mais la plupart du temps, les virgules sont uniquement utilisées afin de séparer les éléments d'une liste. Si une virgule est utilisée comme séparateur entre des arguments, on peut ajouter un espace optionnel avant et après la virgule.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Values")}}</td>
-   <td>{{Spec2("CSS4 Values")}}</td>
-   <td>Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> et <code>rlh</code>.<br>
-    Ajout des notations fonctionnelles  <code>min()</code>, <code>max()</code> et <code>clamp()</code>.<br>
-    Ajout de  <code>toggle()</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Values")}}</td>
-   <td>{{Spec2("CSS3 Values")}}</td>
-   <td>Ajout de <code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS4 Colors")}}</td>
-   <td>{{Spec2("CSS4 Colors")}}</td>
-   <td>Ajout des syntaxes sans virgule pour les fonctions <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>. Ajout des valeurs alpha pour  <code>rgb()</code> et <code>hsl()</code>, transformant ainsi <code>rgba()</code> et <code>hsla()</code> en alias respectifs (dépréciés).<br>
-    Ajout du mot-clé de couleur <code>rebeccapurple</code>.<br>
-    Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la valeur alpha.<br>
-    Ajout des fonctions <code>hwb()</code>, <code>device-cmyk()</code> et <code>color()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Colors")}}</td>
-   <td>{{Spec2("CSS3 Colors")}}</td>
-   <td>Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS4 Images")}}</td>
-   <td>{{Spec2("CSS4 Images")}}</td>
-   <td>
-    <p>Ajout des notations fonctionnelles <code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code></p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Images")}}</td>
-   <td>{{Spec2("CSS3 Images")}}</td>
-   <td>Définition initiale du type <code>image</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName("CSS4 Values")}}</td>
+      <td>{{Spec2("CSS4 Values")}}</td>
+      <td>
+        Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>,
+        <code>cap</code>, <code>lh</code> et <code>rlh</code>.<br />Ajout des
+        notations fonctionnelles  <code>min()</code>, <code>max()</code> et
+        <code>clamp()</code>.<br />Ajout de  <code>toggle()</code>
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName("CSS3 Values")}}</td>
+      <td>{{Spec2("CSS3 Values")}}</td>
+      <td>
+        Ajout de
+        <code>calc()</code
+        >, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code
+          >Q</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName("CSS4 Colors")}}</td>
+      <td>{{Spec2("CSS4 Colors")}}</td>
+      <td>
+        Ajout des syntaxes sans virgule pour les fonctions
+        <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et
+        <code>hsla()</code>. Ajout des valeurs alpha pour  <code>rgb()</code> et
+        <code>hsl()</code>, transformant ainsi <code>rgba()</code> et
+        <code>hsla()</code> en alias respectifs (dépréciés).<br />Ajout du
+        mot-clé de couleur <code>rebeccapurple</code>.<br />Ajout des couleurs
+        sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la
+        valeur alpha.<br />Ajout des fonctions <code>hwb()</code>, <code
+          >device-cmyk()</code
+        >
+        et <code>color()</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName("CSS3 Colors")}}</td>
+      <td>{{Spec2("CSS3 Colors")}}</td>
+      <td>
+        Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des
+        fonctions <code>rgba()</code>, <code>hsl()</code> et
+        <code>hsla()</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName("CSS4 Images")}}</td>
+      <td>{{Spec2("CSS4 Images")}}</td>
+      <td>
+        <p>
+          Ajout des notations fonctionnelles <code>element()</code>,
+          <code>image()</code>, <code>image-set()</code>,
+          <code>conic-gradient()</code>
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName("CSS3 Images")}}</td>
+      <td>{{Spec2("CSS3 Images")}}</td>
+      <td>Définition initiale du type <code>image</code>.</td>
+    </tr>
+    <tr>
+      <td>{{SpecName("CSS2.1")}}</td>
+      <td>{{Spec2("CSS2.1")}}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>{{SpecName("CSS1")}}</td>
+      <td>{{Spec2("CSS1")}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Types">Les types de donnée de base en CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li>
-</ul>
+- [Les types de donnée de base en CSS](/fr/docs/Web/CSS/CSS_Types)
+- [Introduction à CSS : les valeurs et les unités](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
diff --git a/files/fr/web/css/css_variables/index.md b/files/fr/web/css/css_variables/index.md
index df08214795..6c8bf3bae6 100644
--- a/files/fr/web/css/css_variables/index.md
+++ b/files/fr/web/css/css_variables/index.md
@@ -8,33 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Variables
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Custom Properties for Cascading Variables</strong></em> ou « module des propriétés personnalisées pour les variables CSS » est un module de la spécification CSS qui permet de créer des propriétés personnalisées afin de les utiliser à plusieurs endroits, sans avoir à répéter de valeurs.</p>
+**_CSS Custom Properties for Cascading Variables_** ou « module des propriétés personnalisées pour les variables CSS » est un module de la spécification CSS qui permet de créer des propriétés personnalisées afin de les utiliser à plusieurs endroits, sans avoir à répéter de valeurs.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("--*")}}</li>
-</ul>
+- {{cssxref("--*")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Variables")}}</td>
-   <td>{{Spec2("CSS3 Variables")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | État                                 | Commentaires         |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Variables")}} | {{Spec2("CSS3 Variables")}} | Définition initiale. |
diff --git a/files/fr/web/css/css_writing_modes/index.md b/files/fr/web/css/css_writing_modes/index.md
index 66fa80e82d..1b106f5ad6 100644
--- a/files/fr/web/css/css_writing_modes/index.md
+++ b/files/fr/web/css/css_writing_modes/index.md
@@ -8,48 +8,25 @@ tags:
   - Reference
 translation_of: Web/CSS/CSS_Writing_Modes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSS Writing Modes</strong></em> (ou modes d'écriture CSS) est un module qui définit différents modes d'écriture internationaux comme l'écriture de gauche à droite (e.g. utilisée par les langues latines et indiennes), de droite à gauche (e.g. utilisée par l'hébreu ou l'arabe), bidirectionnelle (utilisée quand il y a à la fois des écritures de gauche à droite et de droite à gauche sont ) et verticale (e.g. utilisée par certains écrits asiatiques).</p>
+**_CSS Writing Modes_** (ou modes d'écriture CSS) est un module qui définit différents modes d'écriture internationaux comme l'écriture de gauche à droite (e.g. utilisée par les langues latines et indiennes), de droite à gauche (e.g. utilisée par l'hébreu ou l'arabe), bidirectionnelle (utilisée quand il y a à la fois des écritures de gauche à droite et de droite à gauche sont ) et verticale (e.g. utilisée par certains écrits asiatiques).
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("direction")}}</li>
- <li>{{cssxref("glyph-orientation-horizontal")}}</li>
- <li>{{cssxref("text-combine-upright")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
- <li>{{cssxref("unicode-bidi")}}</li>
- <li>{{cssxref("writing-mode")}}</li>
-</ul>
+- {{cssxref("direction")}}
+- {{cssxref("glyph-orientation-horizontal")}}
+- {{cssxref("text-combine-upright")}}
+- {{cssxref("text-orientation")}}
+- {{cssxref("unicode-bidi")}}
+- {{cssxref("writing-mode")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Writing Modes')}}</td>
-   <td>{{Spec2('CSS3 Writing Modes')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | État                                     | Commentaires         |
+| ------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Writing Modes')}}     | {{Spec2('CSS3 Writing Modes')}} |                      |
+| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}}                 |                      |
+| {{SpecName('CSS1')}}                     | {{Spec2('CSS1')}}                 | Définition initiale. |
diff --git a/files/fr/web/css/cssom_view/coordinate_systems/index.md b/files/fr/web/css/cssom_view/coordinate_systems/index.md
index a4de1dd910..6b1db2d4de 100644
--- a/files/fr/web/css/cssom_view/coordinate_systems/index.md
+++ b/files/fr/web/css/cssom_view/coordinate_systems/index.md
@@ -9,65 +9,64 @@ tags:
 translation_of: Web/CSS/CSSOM_View/Coordinate_systems
 original_slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées
 ---
-<div>{{cssref}}</div>
+{{cssref}}
 
-<p>Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.</p>
+Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.
 
-<p>Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.</p>
+Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.
 
-<h2 id="Dimensions">Dimensions</h2>
+## Dimensions
 
-<p>Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).</p>
+Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).
 
-<p>L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.</p>
+L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.
 
-<p>Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.</p>
+Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.
 
-<div class="note">
-<p><strong>Note :</strong> Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.</p>
-</div>
+> **Note :** Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.
 
-<h2 id="Les_systèmes_de_coordonnées_CSSOM_standard">Les systèmes de coordonnées CSSOM standard</h2>
+## Les systèmes de coordonnées CSSOM standard
 
-<p>Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.</p>
+Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.
 
-<h3 id="Offset"><em>Offset</em></h3>
+### _Offset_
 
-<p>Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.</p>
+Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.
 
-<p>Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.</p>
+Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.
 
-<h3 id="Client">Client</h3>
+### Client
 
-<p>Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (<em>viewport</em>) ou du contexte de navigation comme origine.</p>
+Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (_viewport_) ou du contexte de navigation comme origine.
 
-<p>Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.</p>
+Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.
 
-<h3 id="Page">Page</h3>
+### Page
 
-<p>Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).</p>
+Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).
 
-<p>Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.</p>
+Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.
 
-<h3 id="Écran">Écran</h3>
+### Écran
 
-<p>Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).</p>
+Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).
 
-<p>Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.</p>
+Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.</p>
+Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<p>Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.</p>
+Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.
 
-<h4 id="Afficher_les_coordonnées">Afficher les coordonnées</h4>
+#### Afficher les coordonnées
 
-<p>Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.</p>
+Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.
 
-<pre class="brush: js">let inner = document.querySelector(".inner");
+```js
+let inner = document.querySelector(".inner");
 let log = document.querySelector(".log");
 
 function setCoords(e, type) {
@@ -77,17 +76,18 @@ function setCoords(e, type) {
   document.getElementById(idX).innerText = e[idX];
   document.getElementById(idY).innerText = e[idY];
 }
-</pre>
+```
 
-<p>Dans <code>inner</code> On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.</p>
+Dans `inner` On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.
 
-<p>La fonction <code>setCoords()</code> prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables <code>idX</code> et <code>idY</code> sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si <code>type</code> vaut <code>"page"</code>, alors <code>idX</code> vaudra <code>"pageX"</code> et <code>idY</code> vaudra <code>"pageY"</code>.</p>
+La fonction `setCoords()` prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables `idX` et `idY` sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si `type` vaut `"page"`, alors `idX` vaudra `"pageX"` et `idY` vaudra `"pageY"`.
 
-<h4 id="Gérer_les_évènements_liés_à_la_souris">Gérer les évènements liés à la souris</h4>
+#### Gérer les évènements liés à la souris
 
-<p><code>setCoords()</code> est appelé par le gestionnaire d'évènements <code>update()</code> qui est lui même utilisé sur les différents évènements :</p>
+`setCoords()` est appelé par le gestionnaire d'évènements `update()` qui est lui même utilisé sur les différents évènements :
 
-<pre class="brush: js">function update(e) {
+```js
+function update(e) {
   setCoords(e, "offset");
   setCoords(e, "client");
   setCoords(e, "page");
@@ -96,44 +96,48 @@ function setCoords(e, type) {
 
 inner.addEventListener("mouseenter", update, false);
 inner.addEventListener("mousemove", update, false);
-inner.addEventListener("mouseleave", update, false);</pre>
-
-<p>Le gestionnaire d'évènement <code>update()</code> appelle <code>setCoords()</code> pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.</p>
-
-<p>Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.</p>
-
-<h3 id="HTML">HTML</h3>
-
-<p>Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément <code>&lt;div&gt;</code> avec l'identifiant <code>"log"</code>, on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.</p>
-
-<pre class="brush: html">&lt;div class="outer"&gt;
-  &lt;div class="inner"&gt;
-    &lt;div class="log"&gt;
-      &lt;p&gt;
-        Système de coordonnées Offset : &lt;span id="offsetX"&gt;0&lt;/span&gt;,
-        &lt;span id="offsetY"&gt;0&lt;/span&gt;
-      &lt;/p&gt;
-      &lt;p&gt;
-        Système de coordonnées Client : &lt;span id="clientX"&gt;0&lt;/span&gt;,
-        &lt;span id="clientY"&gt;0&lt;/span&gt;
-      &lt;/p&gt;
-      &lt;p&gt;
-        Système de coordonnées Page : &lt;span id="pageX"&gt;0&lt;/span&gt;,
-        &lt;span id="pageY"&gt;0&lt;/span&gt;
-      &lt;/p&gt;
-      &lt;p&gt;
-        Système de coordonnées Écran : &lt;span id="screenX"&gt;0&lt;/span&gt;,
-        &lt;span id="screenY"&gt;0&lt;/span&gt;
-      &lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<p>Le code CSS est uniquement utilisé à des fins stylistiques. La classe <code>"outer"</code> est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir <em>scroller</em> horizontalement. La boîte <code>"inner"</code> est celle sur laquelle on suit les évènements.</p>
-
-<pre class="brush: css">.outer {
+inner.addEventListener("mouseleave", update, false);
+```
+
+Le gestionnaire d'évènement `update()` appelle `setCoords()` pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.
+
+Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.
+
+### HTML
+
+Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément `<div>` avec l'identifiant `"log"`, on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.
+
+```html
+<div class="outer">
+  <div class="inner">
+    <div class="log">
+      <p>
+        Système de coordonnées Offset : <span id="offsetX">0</span>,
+        <span id="offsetY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Client : <span id="clientX">0</span>,
+        <span id="clientY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Page : <span id="pageX">0</span>,
+        <span id="pageY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Écran : <span id="screenX">0</span>,
+        <span id="screenY">0</span>
+      </p>
+    </div>
+  </div>
+</div>
+```
+
+### CSS
+
+Le code CSS est uniquement utilisé à des fins stylistiques. La classe `"outer"` est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir _scroller_ horizontalement. La boîte `"inner"` est celle sur laquelle on suit les évènements.
+
+```css
+.outer {
   width: 1000px;
   height: 200px;
   background-color: red;
@@ -158,24 +162,21 @@ inner.addEventListener("mouseleave", update, false);</pre>
   position: relative;
   width: 100%;
   text-align: center;
-}</pre>
+}
+```
+
+### Résultat
 
-<h3 id="Résultat">Résultat</h3>
+Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur `pageX`.
 
-<p>Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur <code>pageX</code>.</p>
+{{EmbedLiveSample("Exemples", 600, 250)}}
 
-<p>{{EmbedLiveSample("Exemples", 600, 250)}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) : comment modifier un système de coordonnées
+- Les coordonnées relatives aux évènements de la souris :
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utiliser les transformations CSS</a> : comment modifier un système de coordonnées</li>
- <li>Les coordonnées relatives aux évènements de la souris :
-  <ul>
-   <li>{{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}</li>
-   <li>{{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}}</li>
-   <li>{{domxref("MouseEvent.pageX")}} et {{domxref("MouseEvent.pageY")}}</li>
-   <li>{{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}
+  - {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}}
+  - {{domxref("MouseEvent.pageX")}} et {{domxref("MouseEvent.pageY")}}
+  - {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}}
diff --git a/files/fr/web/css/cssom_view/index.md b/files/fr/web/css/cssom_view/index.md
index d052cb0abc..39cc562253 100644
--- a/files/fr/web/css/cssom_view/index.md
+++ b/files/fr/web/css/cssom_view/index.md
@@ -9,44 +9,27 @@ tags:
   - Reference
 translation_of: Web/CSS/CSSOM_View
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>CSSOM View</strong></em> (ou <strong>Vue CSSOM</strong>) est un module de la spécification CSS qui définit comment manipuler la vue d'un document et notamment le comportement lors du défilement (<em>scrolling</em>).</p>
+**_CSSOM View_** (ou **Vue CSSOM**) est un module de la spécification CSS qui définit comment manipuler la vue d'un document et notamment le comportement lors du défilement (_scrolling_).
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("scroll-behavior")}}</li>
-</ul>
+- {{cssxref("scroll-behavior")}}
 
-<h2 id="Guide">Guide</h2>
+## Guide
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSSOM_View/Systèmes_de_coordonnées">Les systèmes de coordonnées</a></dt>
- <dd>Un guide à propos des différents systèmes de coordonnées permettant de définir une position dans un contexte d'affichage : que ce soit un écran, une zone d'affichage, un appareil mobile ou bien une position sur une feuille de papier lors de l'impression.</dd>
-</dl>
+- [Les systèmes de coordonnées](/fr/docs/Web/CSS/CSSOM_View/Systèmes_de_coordonnées)
+  - : Un guide à propos des différents systèmes de coordonnées permettant de définir une position dans un contexte d'affichage : que ce soit un écran, une zone d'affichage, un appareil mobile ou bien une position sur une feuille de papier lors de l'impression.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM View')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | État                             | Commentaires         |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSSOM View')}} | {{Spec2('CSSOM View')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-behavior")}}</p>
+{{Compat("css.properties.scroll-behavior")}}
diff --git a/files/fr/web/css/cursor/index.md b/files/fr/web/css/cursor/index.md
index 2931c1851a..b480e8503f 100644
--- a/files/fr/web/css/cursor/index.md
+++ b/files/fr/web/css/cursor/index.md
@@ -15,15 +15,16 @@ tags:
 translation_of: Web/CSS/cursor
 browser-compat: css.properties.cursor
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>cursor</code></strong> définit la forme du curseur (s'il y en a un) lorsque le pointeur est au-dessus de l'élément.</p>
+La propriété CSS **`cursor`** définit la forme du curseur (s'il y en a un) lorsque le pointeur est au-dessus de l'élément.
 
-<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
+{{EmbedInteractiveExample("pages/css/cursor.html")}}
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 cursor: pointer;
 cursor: auto;
 
@@ -38,239 +39,343 @@ cursor: url(cursor2.png) 2 2, pointer;
 cursor: inherit;
 cursor: initial;
 cursor: unset;
-</pre>
-
-<p>La propriété <code>cursor</code> peut être définie grâce à zéro ou plusieurs valeurs <code><a href="#url">&lt;url&gt;</a></code> séparées par des virgules et suivi par un unique <a href="#mot-clé">mot-clé obligatoire</a>. Chaque <code>&lt;url&gt;</code> doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.</p>
-
-<p>Chaque <code>&lt;url&gt;</code> peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) <code><a href="#xy">&lt;x&gt;&lt;y&gt;</a></code> Ces coordonnées permettent de paramétrer le point d'action (<em>hotspot</em>) du curseur par rapport au coin en haut à gauche de l'image.</p>
-
-<p>Par exemple, on peut indiquer deux images grâce à deux valeurs <code>&lt;url&gt;</code> et fournir des coordonnées <code>&lt;x&gt;&lt;y&gt;</code> pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé <code>progress</code> :</p>
-
-<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>
-
-<h3 id="values">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;url&gt;</code></dt>
- <dd>Une <code>url(…)</code> ou une liste d'URL séparées par des virgules <code>url(…), url(…), …</code> pointant vers un fichier image. On peut utiliser plusieurs <a href="/fr/docs/Web/CSS/url()"><code>url()</code></a>, au cas où certains types d'images ne sont pas pris en charge. Il est <em>obligatoire</em> qu'une valeur non-URL soit présente à la fin de cette liste.</dd>
- <dt><code>&lt;x&gt;</code> <code>&lt;y&gt;</code> {{experimental_inline}}</dt>
- <dd>Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.</dd>
- <dt>Valeurs utilisant un mot-clé</dt>
- <dd>
- <p><strong>Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.</strong></p>
-
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th>Catégorie</th>
-    <th>Valeur CSS</th>
-    <th>Rendu</th>
-    <th>Description</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr style="cursor: auto;">
-    <td rowspan="3">Général</td>
-    <td><code>auto</code></td>
-    <td></td>
-    <td>Le navigateur détermine le curseur à afficher en fonction du contexte (par exemple, l'effet sera équivalent à <code>text</code> lors du survol du texte).</td>
-   </tr>
-   <tr style="cursor: default;">
-    <td><code>default</code></td>
-    <td><img alt="default.gif" src="default.gif"></td>
-    <td>Le curseur par défaut de la plateforme (qui est généralement une flèche).</td>
-   </tr>
-   <tr style="cursor: none;">
-    <td><code>none</code></td>
-    <td></td>
-    <td>Aucun curseur n'est affiché.</td>
-   </tr>
-   <tr style="cursor: context-menu;">
-    <td rowspan="5" style="cursor: auto;">Liens &amp; états</td>
-    <td><code>context-menu</code></td>
-    <td><img alt="context-menu.png" src="context-menu.png"></td>
-    <td>Un menu contextuel est disponible sous le curseur. Seul IE 10 et les versions supérieures ont implémenté cette valeur Bur Windows : <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=258960">bug 258960</a>.</td>
-   </tr>
-   <tr style="cursor: help;">
-    <td><code>help</code></td>
-    <td><img alt="help.gif" src="help.gif"></td>
-    <td>Le pointeur indique qu'une aide est disponible.</td>
-   </tr>
-   <tr style="cursor: pointer;">
-    <td><code>pointer</code></td>
-    <td><img alt="pointer.gif" src="pointer.gif"></td>
-    <td>Le curseur est un pointeur qui indique un lien ; généralement c'est une main.</td>
-   </tr>
-   <tr style="cursor: progress;">
-    <td><code>progress</code></td>
-    <td><img alt="progress.gif" src="progress.gif"></td>
-    <td>Le programme est occupé en arrière-plan mais l'utilisateur peut toujours interagir avec l'interface (à la différence de <code>wait</code>).</td>
-   </tr>
-   <tr style="cursor: wait;">
-    <td><code>wait</code></td>
-    <td><img alt="wait.gif" src="wait.gif"></td>
-    <td>Le programme est occupé, empêchant toute interaction.</td>
-   </tr>
-   <tr style="cursor: cell;">
-    <td rowspan="4" style="cursor: auto;">Sélection</td>
-    <td><code>cell</code></td>
-    <td><img alt="cell.gif" src="cell.gif"></td>
-    <td>Le pointeur indique que la ou les cellules du tableau peuvent être sélectionnées.</td>
-   </tr>
-   <tr style="cursor: crosshair;">
-    <td><code>crosshair</code></td>
-    <td><img alt="crosshair.gif" src="crosshair.gif"></td>
-    <td>Un curseur en forme de croix, généralement utilisé pour indiquer une sélection sur une image.</td>
-   </tr>
-   <tr style="cursor: text;">
-    <td><code>text</code></td>
-    <td><img alt="text.gif" class="default" src="text.gif"></td>
-    <td>Le pointeur indique que le texte peut être sélectionné.</td>
-   </tr>
-   <tr style="cursor: vertical-text;">
-    <td><code>vertical-text</code></td>
-    <td><img alt="vertical-text.gif" src="vertical-text.gif"></td>
-    <td>Le pointeur indique que du texte vertical peut être sélectionné.</td>
-   </tr>
-   <tr style="cursor: alias;">
-    <td rowspan="7" style="cursor: auto;">Glisser/déposer</td>
-    <td><code>alias</code></td>
-    <td><img alt="alias.gif" src="alias.gif"></td>
-    <td>Le pointeur indique qu'un alias ou qu'un raccourci sera créé.</td>
-   </tr>
-   <tr style="cursor: copy;">
-    <td><code>copy</code></td>
-    <td><img alt="copy.gif" class="default" src="copy.gif"></td>
-    <td>Le pointeur indique que quelque chose devra être copié.</td>
-   </tr>
-   <tr style="cursor: move;">
-    <td><code>move</code></td>
-    <td><img alt="move.gif" src="move.gif"></td>
-    <td>L'objet survolé devra être déplacé.</td>
-   </tr>
-   <tr style="cursor: no-drop;">
-    <td><code>no-drop</code></td>
-    <td><img alt="no-drop.gif" class="lwrap" src="no-drop.gif" style="float: left;"></td>
-    <td>Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=B75173">bug 275173</a> pour Windows et Mac OS X, « <code>no-drop</code> a le même effet que <code>not-allowed</code> ».</td>
-   </tr>
-   <tr style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
-    <td><code>grab</code></td>
-    <td><img alt="grab.gif" class="default" src="grab.gif"></td>
-    <td rowspan="2" style="cursor: auto;">
-     <p>Le pointeur indique que le contenu peut être accroché/attrapé ou est accroché/attrapé pour être glissé et déposé quelque part.</p>
-    </td>
-   </tr>
-   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
-    <td><code>grabbing</code></td>
-    <td><img alt="grabbing.gif" class="default" src="grabbing.gif"></td>
-   </tr>
-   <tr style="cursor: not-allowed;">
-    <td><code>not-allowed</code></td>
-    <td><img alt="not-allowed.gif" src="not-allowed.gif"></td>
-    <td>Le curseur indique que quelque chose ne peut pas être fait.</td>
-   </tr>
-   <tr style="cursor: all-scroll;">
-    <td rowspan="15" style="cursor: auto;">Redimensionnement &amp; défilement</td>
-    <td><code>all-scroll</code></td>
-    <td><img alt="all-scroll.gif" src="all-scroll.gif"></td>
-    <td>Le curseur indique qu'on peut faire défiler le contenu dans n'importe quelle direction. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=275174">Bug 275174</a> pour Windows, « <code>all-scroll</code> a le même effet que <code>move</code>".</td>
-   </tr>
-   <tr style="cursor: col-resize;">
-    <td><code>col-resize</code></td>
-    <td><img alt="col-resize.gif" src="col-resize.gif"></td>
-    <td>L'élément ou la colonne peut être redimensionné horizontalement.</td>
-   </tr>
-   <tr style="cursor: row-resize;">
-    <td><code>row-resize</code></td>
-    <td><img alt="row-resize.gif" src="row-resize.gif"></td>
-    <td>L'élément ou la ligne peut être redimensionné verticalement.</td>
-   </tr>
-   <tr style="cursor: n-resize;">
-    <td><code>n-resize</code></td>
-    <td><img alt="Exemple de redimensionnement vers le haut" src="n-resize.gif" style="border-style: solid; border-width: 0px;"></td>
-    <td rowspan="8" style="cursor: auto;">
-     <p>Un bord peut être déplacé. Par exemple, le curseur <code>se-resize</code> peut être utilisé lorsqu'on redimensionne une boîte à partir de son coin sud-est.</p>
-
-     <p>Dans certains environnements, un curseur bidirectionnel équivalent est affiché (ex. <code>n-resize</code> et <code>s-resize</code> sont synonymes de <code>ns-resize</code>).</p>
-    </td>
-   </tr>
-   <tr style="cursor: e-resize;">
-    <td><code>e-resize</code></td>
-    <td><img alt="Example of a resize towards the right cursor" src="e-resize.gif"></td>
-   </tr>
-   <tr style="cursor: s-resize;">
-    <td><code>s-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom cursor " src="s-resize.gif"></td>
-   </tr>
-   <tr style="cursor: w-resize;">
-    <td><code>w-resize</code></td>
-    <td><img alt="Example of a resize towards the left cursor" src="w-resize.gif"></td>
-   </tr>
-   <tr style="cursor: ne-resize;">
-    <td><code>ne-resize</code></td>
-    <td><img alt="Example of a resize towards the top-right corner cursor" src="ne-resize.gif"></td>
-   </tr>
-   <tr style="cursor: nw-resize;">
-    <td><code>nw-resize</code></td>
-    <td><img alt="Example of a resize towards the top-left corner cursor" src="nw-resize.gif"></td>
-   </tr>
-   <tr style="cursor: se-resize;">
-    <td><code>se-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="se-resize.gif"></td>
-   </tr>
-   <tr style="cursor: sw-resize;">
-    <td><code>sw-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="sw-resize.gif"></td>
-   </tr>
-   <tr style="cursor: ew-resize;">
-    <td><code>ew-resize</code></td>
-    <td><img alt="3-resize.gif" class="default" src="3-resize.gif"></td>
-    <td rowspan="4" style="cursor: auto;">Le pointeur indique un redimensionnement bidirectionnel.</td>
-   </tr>
-   <tr style="cursor: ns-resize;">
-    <td><code>ns-resize</code></td>
-    <td><img alt="6-resize.gif" class="default" src="6-resize.gif"></td>
-   </tr>
-   <tr style="cursor: nesw-resize;">
-    <td><code>nesw-resize</code></td>
-    <td><img alt="1-resize.gif" class="default" src="1-resize.gif"></td>
-   </tr>
-   <tr style="cursor: nwse-resize;">
-    <td><code>nwse-resize</code></td>
-    <td><img alt="4-resize.gif" class="default" src="4-resize.gif"></td>
-   </tr>
-   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
-    <td rowspan="2">Zoom</td>
-    <td><code>zoom-in</code></td>
-    <td><img alt="zoom-in.gif" class="default" src="zoom-in.gif"></td>
-    <td rowspan="2" style="cursor: auto;">
-     <p>Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.</p>
-    </td>
-   </tr>
-   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
-    <td><code>zoom-out</code></td>
-    <td><img alt="zoom-out.gif" class="default" src="zoom-out.gif"></td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="formal_syntax">Syntaxe formelle</h3>
+```
+
+La propriété `cursor` peut être définie grâce à zéro ou plusieurs valeurs [`<url>`](#url) séparées par des virgules et suivi par un unique [mot-clé obligatoire](#mot-clé). Chaque `<url>` doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.
+
+Chaque `<url>` peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) [`<x><y>`](#xy) Ces coordonnées permettent de paramétrer le point d'action (_hotspot_) du curseur par rapport au coin en haut à gauche de l'image.
+
+Par exemple, on peut indiquer deux images grâce à deux valeurs `<url>` et fournir des coordonnées `<x><y>` pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé `progress` :
+
+```css
+cursor: url(one.svg), url(two.svg) 5 5, progress;
+```
+
+### Valeurs
+
+- `<url>`
+  - : Une `url(…)` ou une liste d'URL séparées par des virgules `url(…), url(…), …` pointant vers un fichier image. On peut utiliser plusieurs [`url()`](</fr/docs/Web/CSS/url()>), au cas où certains types d'images ne sont pas pris en charge. Il est _obligatoire_ qu'une valeur non-URL soit présente à la fin de cette liste.
+- `<x>` `<y>` {{experimental_inline}}
+  - : Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.
+- Valeurs utilisant un mot-clé
+
+  - : **Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.**
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <th>Catégorie</th>
+          <th>Valeur CSS</th>
+          <th>Rendu</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr style="cursor: auto">
+          <td rowspan="3">Général</td>
+          <td><code>auto</code></td>
+          <td></td>
+          <td>
+            Le navigateur détermine le curseur à afficher en fonction du contexte
+            (par exemple, l'effet sera équivalent à <code>text</code> lors du survol
+            du texte).
+          </td>
+        </tr>
+        <tr style="cursor: default">
+          <td><code>default</code></td>
+          <td><img alt="default.gif" src="default.gif" /></td>
+          <td>
+            Le curseur par défaut de la plateforme (qui est généralement une
+            flèche).
+          </td>
+        </tr>
+        <tr style="cursor: none">
+          <td><code>none</code></td>
+          <td></td>
+          <td>Aucun curseur n'est affiché.</td>
+        </tr>
+        <tr style="cursor: context-menu">
+          <td rowspan="5" style="cursor: auto">Liens &#x26; états</td>
+          <td><code>context-menu</code></td>
+          <td><img alt="context-menu.png" src="context-menu.png" /></td>
+          <td>
+            Un menu contextuel est disponible sous le curseur. Seul IE 10 et les
+            versions supérieures ont implémenté cette valeur Bur Windows :
+            <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=258960"
+              >bug 258960</a
+            >.
+          </td>
+        </tr>
+        <tr style="cursor: help">
+          <td><code>help</code></td>
+          <td><img alt="help.gif" src="help.gif" /></td>
+          <td>Le pointeur indique qu'une aide est disponible.</td>
+        </tr>
+        <tr style="cursor: pointer">
+          <td><code>pointer</code></td>
+          <td><img alt="pointer.gif" src="pointer.gif" /></td>
+          <td>
+            Le curseur est un pointeur qui indique un lien ; généralement c'est une
+            main.
+          </td>
+        </tr>
+        <tr style="cursor: progress">
+          <td><code>progress</code></td>
+          <td><img alt="progress.gif" src="progress.gif" /></td>
+          <td>
+            Le programme est occupé en arrière-plan mais l'utilisateur peut toujours
+            interagir avec l'interface (à la différence de <code>wait</code>).
+          </td>
+        </tr>
+        <tr style="cursor: wait">
+          <td><code>wait</code></td>
+          <td><img alt="wait.gif" src="wait.gif" /></td>
+          <td>Le programme est occupé, empêchant toute interaction.</td>
+        </tr>
+        <tr style="cursor: cell">
+          <td rowspan="4" style="cursor: auto">Sélection</td>
+          <td><code>cell</code></td>
+          <td><img alt="cell.gif" src="cell.gif" /></td>
+          <td>
+            Le pointeur indique que la ou les cellules du tableau peuvent être
+            sélectionnées.
+          </td>
+        </tr>
+        <tr style="cursor: crosshair">
+          <td><code>crosshair</code></td>
+          <td><img alt="crosshair.gif" src="crosshair.gif" /></td>
+          <td>
+            Un curseur en forme de croix, généralement utilisé pour indiquer une
+            sélection sur une image.
+          </td>
+        </tr>
+        <tr style="cursor: text">
+          <td><code>text</code></td>
+          <td><img alt="text.gif" class="default" src="text.gif" /></td>
+          <td>Le pointeur indique que le texte peut être sélectionné.</td>
+        </tr>
+        <tr style="cursor: vertical-text">
+          <td><code>vertical-text</code></td>
+          <td><img alt="vertical-text.gif" src="vertical-text.gif" /></td>
+          <td>Le pointeur indique que du texte vertical peut être sélectionné.</td>
+        </tr>
+        <tr style="cursor: alias">
+          <td rowspan="7" style="cursor: auto">Glisser/déposer</td>
+          <td><code>alias</code></td>
+          <td><img alt="alias.gif" src="alias.gif" /></td>
+          <td>Le pointeur indique qu'un alias ou qu'un raccourci sera créé.</td>
+        </tr>
+        <tr style="cursor: copy">
+          <td><code>copy</code></td>
+          <td><img alt="copy.gif" class="default" src="copy.gif" /></td>
+          <td>Le pointeur indique que quelque chose devra être copié.</td>
+        </tr>
+        <tr style="cursor: move">
+          <td><code>move</code></td>
+          <td><img alt="move.gif" src="move.gif" /></td>
+          <td>L'objet survolé devra être déplacé.</td>
+        </tr>
+        <tr style="cursor: no-drop">
+          <td><code>no-drop</code></td>
+          <td>
+            <img
+              alt="no-drop.gif"
+              class="lwrap"
+              src="no-drop.gif"
+              style="float: left"
+            />
+          </td>
+          <td>
+            Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit.
+            <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=B75173"
+              >bug 275173</a
+            >
+            pour Windows et Mac OS X, « <code>no-drop</code> a le même effet que
+            <code>not-allowed</code> ».
+          </td>
+        </tr>
+        <tr style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab">
+          <td><code>grab</code></td>
+          <td><img alt="grab.gif" class="default" src="grab.gif" /></td>
+          <td rowspan="2" style="cursor: auto">
+            <p>
+              Le pointeur indique que le contenu peut être accroché/attrapé ou est
+              accroché/attrapé pour être glissé et déposé quelque part.
+            </p>
+          </td>
+        </tr>
+        <tr
+          style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing"
+        >
+          <td><code>grabbing</code></td>
+          <td><img alt="grabbing.gif" class="default" src="grabbing.gif" /></td>
+        </tr>
+        <tr style="cursor: not-allowed">
+          <td><code>not-allowed</code></td>
+          <td><img alt="not-allowed.gif" src="not-allowed.gif" /></td>
+          <td>Le curseur indique que quelque chose ne peut pas être fait.</td>
+        </tr>
+        <tr style="cursor: all-scroll">
+          <td rowspan="15" style="cursor: auto">
+            Redimensionnement &#x26; défilement
+          </td>
+          <td><code>all-scroll</code></td>
+          <td><img alt="all-scroll.gif" src="all-scroll.gif" /></td>
+          <td>
+            Le curseur indique qu'on peut faire défiler le contenu dans n'importe
+            quelle direction.
+            <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=275174"
+              >Bug 275174</a
+            >
+            pour Windows, « <code>all-scroll</code> a le même effet que
+            <code>move</code>".
+          </td>
+        </tr>
+        <tr style="cursor: col-resize">
+          <td><code>col-resize</code></td>
+          <td><img alt="col-resize.gif" src="col-resize.gif" /></td>
+          <td>L'élément ou la colonne peut être redimensionné horizontalement.</td>
+        </tr>
+        <tr style="cursor: row-resize">
+          <td><code>row-resize</code></td>
+          <td><img alt="row-resize.gif" src="row-resize.gif" /></td>
+          <td>L'élément ou la ligne peut être redimensionné verticalement.</td>
+        </tr>
+        <tr style="cursor: n-resize">
+          <td><code>n-resize</code></td>
+          <td>
+            <img
+              alt="Exemple de redimensionnement vers le haut"
+              src="n-resize.gif"
+              style="border-style: solid; border-width: 0px"
+            />
+          </td>
+          <td rowspan="8" style="cursor: auto">
+            <p>
+              Un bord peut être déplacé. Par exemple, le curseur
+              <code>se-resize</code> peut être utilisé lorsqu'on redimensionne une
+              boîte à partir de son coin sud-est.
+            </p>
+            <p>
+              Dans certains environnements, un curseur bidirectionnel équivalent est
+              affiché (ex. <code>n-resize</code> et <code>s-resize</code> sont
+              synonymes de <code>ns-resize</code>).
+            </p>
+          </td>
+        </tr>
+        <tr style="cursor: e-resize">
+          <td><code>e-resize</code></td>
+          <td>
+            <img
+              alt="Example of a resize towards the right cursor"
+              src="e-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: s-resize">
+          <td><code>s-resize</code></td>
+          <td>
+            <img
+              alt="Example of a resize towards the bottom cursor "
+              src="s-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: w-resize">
+          <td><code>w-resize</code></td>
+          <td>
+            <img
+              alt="Example of a resize towards the left cursor"
+              src="w-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: ne-resize">
+          <td><code>ne-resize</code></td>
+          <td>
+            <img
+              alt="Example of a resize towards the top-right corner cursor"
+              src="ne-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: nw-resize">
+          <td><code>nw-resize</code></td>
+          <td>
+            <img
+              alt="Example of a resize towards the top-left corner cursor"
+              src="nw-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: se-resize">
+          <td><code>se-resize</code></td>
+          <td>
+            <img
+              alt="Example of a resize towards the bottom-right corner cursor"
+              src="se-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: sw-resize">
+          <td><code>sw-resize</code></td>
+          <td>
+            <img
+              alt="Example of a resize towards the bottom-left corner cursor"
+              src="sw-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: ew-resize">
+          <td><code>ew-resize</code></td>
+          <td><img alt="3-resize.gif" class="default" src="3-resize.gif" /></td>
+          <td rowspan="4" style="cursor: auto">
+            Le pointeur indique un redimensionnement bidirectionnel.
+          </td>
+        </tr>
+        <tr style="cursor: ns-resize">
+          <td><code>ns-resize</code></td>
+          <td><img alt="6-resize.gif" class="default" src="6-resize.gif" /></td>
+        </tr>
+        <tr style="cursor: nesw-resize">
+          <td><code>nesw-resize</code></td>
+          <td><img alt="1-resize.gif" class="default" src="1-resize.gif" /></td>
+        </tr>
+        <tr style="cursor: nwse-resize">
+          <td><code>nwse-resize</code></td>
+          <td><img alt="4-resize.gif" class="default" src="4-resize.gif" /></td>
+        </tr>
+        <tr style="cursor: -webkit-zoom-in; cursor: zoom-in">
+          <td rowspan="2">Zoom</td>
+          <td><code>zoom-in</code></td>
+          <td><img alt="zoom-in.gif" class="default" src="zoom-in.gif" /></td>
+          <td rowspan="2" style="cursor: auto">
+            <p>Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.</p>
+          </td>
+        </tr>
+        <tr style="cursor: -webkit-zoom-out; cursor: zoom-out">
+          <td><code>zoom-out</code></td>
+          <td><img alt="zoom-out.gif" class="default" src="zoom-out.gif" /></td>
+        </tr>
+      </tbody>
+    </table>
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Bien que la spécification ne définisse aucune limite de taille pour les curseurs, chaque navigateur/agent utilisateur pourra imposer la sienne. Les images de curseur utilisées qui dépassent les limites prises en charge seront généralement ignorées.</p>
+Bien que la spécification ne définisse aucune limite de taille pour les curseurs, chaque navigateur/agent utilisateur pourra imposer la sienne. Les images de curseur utilisées qui dépassent les limites prises en charge seront généralement ignorées.
 
-<p>Pour plus d'informations, voir le tableau de compatibilité ci-après.</p>
+Pour plus d'informations, voir le tableau de compatibilité ci-après.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.toto {
+```css
+.toto {
   cursor: crosshair;
 }
 
@@ -281,56 +386,39 @@ cursor: unset;
   cursor: -webkit-zoom-in;
   cursor: zoom-in;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="toto"&gt;
+```html
+<p class="toto">
   On dirait qu'on pourrait sélectionner une zone.
-&lt;/p&gt;
+</p>
 
-&lt;p class="truc"&gt;
+<p class="truc">
   Et là on peut zoomer.
-&lt;/p&gt;</pre>
-
-<h3 id="result">Résultat</h3>
-
-<p>{{EmbedLiveSample("examples")}}</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Ajout de plusieurs mots-clés et de la syntaxe de positionnement pour <code>url()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<div>{{Compat}}</div>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">Utiliser des valeurs URL pour <code>cursor</code></a></li>
- <li><a href="/fr/docs/Web/CSS/pointer-events"><code>pointer-events</code></a></li>
- <li>La fonction CSS {{cssxref("url()", "url()")}}</li>
-</ul>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("examples")}}
+
+## Spécifications
+
+| Spécification                                                                | État                                 | Commentaires                                                                  |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}         | {{Spec2('CSS3 Basic UI')}} | Ajout de plusieurs mots-clés et de la syntaxe de positionnement pour `url()`. |
+| {{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}} | {{Spec2('CSS2.1')}}             | Définition initiale.                                                          |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Utiliser des valeurs URL pour `cursor`](/fr/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property)
+- [`pointer-events`](/fr/docs/Web/CSS/pointer-events)
+- La fonction CSS {{cssxref("url()", "url()")}}
diff --git a/files/fr/web/css/custom-ident/index.md b/files/fr/web/css/custom-ident/index.md
index b9581cd660..adbb326658 100644
--- a/files/fr/web/css/custom-ident/index.md
+++ b/files/fr/web/css/custom-ident/index.md
@@ -7,122 +7,87 @@ tags:
   - Type
 translation_of: Web/CSS/custom-ident
 ---
-<div>{{CSSRef}}</div>
-
-<p>Le type de données CSS <strong><code>&lt;custom-ident&gt;</code></strong> permet de représenter des chaînes de caractères arbitraires définies par l'utilisateur et qui sont utilisées comme identifiants. Ce type de données est sensible à la casse et pour chaque contexte d'utilisation, plusieurs valeurs sont exclues afin d'éviter des ambiguïtés et des erreurs.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>La syntaxe est proche de celle utilisée pour les identifiants CSS. Une valeur <code>&lt;custom-ident&gt;</code> est sensible à la casse et est une séquence de caractères dont les caractères peuvent être :</p>
-
-<ul>
- <li>n'importe quel caractère alphanumérique (<code>A</code> à <code>Z</code> ou <code>a</code> à <code>z</code>),</li>
- <li>n'importe quel chiffre (<code>0</code> à <code>9</code>),</li>
- <li>un tiret (<code>-</code>)</li>
- <li>un tiret bas (<em>underscore</em>) (<code>_</code>),</li>
- <li>un caractère échappé via une barre oblique inversée (<code>\</code>),</li>
- <li>un caractère <a href="http://en.wikipedia.org/wiki/Unicode">Unicode</a> (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).</li>
-</ul>
-
-<p>Le premier caractère de l'identifiant ne doit pas être un chiffre, un tiret suivi d'un chiffre ou un tiret suivi d'un autre tiret. Une valeur <code>&lt;custom-ident&gt;</code> ne doit pas être encadrée entre quotes ou entre doubles quotes car ce serait alors une valeur {{cssxref("&lt;string&gt;")}}.</p>
-
-<p>On notera que <code>id1</code>, <code>Id1</code>, <code>iD1</code> et <code>ID1</code> sont des identifiants différents car leurs casses sont différentes. En revanche, il existe plusieurs façons d'échapper un même caractère et <code>toto\?</code> et <code>toto\3F</code> représentent donc le même identifiant.</p>
-
-<h3 id="Liste_des_valeurs_interdites">Liste des valeurs interdites</h3>
-
-<p>Afin d'éviter des ambiguïtés dangereuses, chaque propriété qui utilise <code>&lt;custom-ident&gt;</code> définit également une liste de valeurs interdites :</p>
-
-<dl>
- <dt>{{cssxref("animation-name")}}</dt>
- <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que la valeur <code>none</code>.</dd>
- <dt>{{cssxref("counter-reset")}}</dt>
- <dt>{{cssxref("counter-increment")}}</dt>
- <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que la valeur <code>none</code>.</dd>
- <dt>{{cssxref("@counter-style")}}</dt>
- <dt>{{cssxref("list-style-type")}}</dt>
- <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que les valeurs <code>none</code>, <code>inline</code>, <code>outside</code> et d'autres valeurs prédéfinies, implémentées par les différents navigateurs : <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code> et <code>disclosure-close</code>.</dd>
- <dt>{{cssxref("grid-row-start")}}<br>
- {{cssxref("grid-row-end")}}<br>
- {{cssxref("grid-column-start")}}<br>
- {{cssxref("grid-column-end")}}</dt>
- <dd>Interdisent la valeur <code>span</code>.</dd>
- <dt>{{cssxref("will-change")}}</dt>
- <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que les valeurs <code>will-change</code>, <code>auto</code>, <code>scroll-position</code> et <code>contents</code>.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Voici des identifiants valides</p>
-
-<pre class="eval">nono79            Un mélange de caractères alphanumériques.
-ground-level      Un mélange de caractères alphanumériques avec un tiret.
--test             Un tiret suivi d'un mélange de caractères alphanumériques.
-_internal         Un tiret bas suivi d'un mélange de caractères alphanumériques.
-\22 toto          Un caractère Unicode suivi par une série de caractères alphanumériques.
-bili\.bob         Le point est bien échappé.
-</pre>
-
-<p>Voici des identifiants invalides :</p>
-
-<pre class="eval">34rem             Il ne doit pas démarrer par un chiffre.
--12rad            Il ne doit pas démarrer par un tiret suivi d'un chiffre.
-bili.bob          Il ne doit contenir que des caractères alphanumériques. _ et - n'ont pas besoin d'être échappés.
---toto            Il ne doit pas démarrer avec deux tirets.
-'bilibob'         Ce n'est pas une valeur &lt;user-ident&gt; mais une {{cssxref("&lt;string&gt;")}}.
-"bilibob"         Ce n'est pas une valeur &lt;user-ident&gt; mais une {{cssxref("&lt;string&gt;")}}.
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> for <code>will-change</code>')}}</td>
-   <td>{{Spec2('CSS Will Change')}}</td>
-   <td>Définition des valeurs exclues pour {{cssxref("will-change")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> for <code>list-style-type</code>')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Utilisation de <code>&lt;custom-ident&gt;</code> à la place d'une liste finie de mots-clés. Définition des valeurs exclues pour {{cssxref("list-style-type")}} et {{cssxref("@counter-style")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> for <code>counter-*</code>')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td><code>&lt;identifier&gt;</code> est renommé en <code>&lt;custom-ident&gt;</code>. Son utilisation est ajoutée pour la propriété <code>counter-set</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> for <code>animation-name</code>')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition des valeurs exclues pour {{cssxref("animation-name")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#identifier-value', '<code>&lt;custom-ident&gt;</code>')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td><code>&lt;identifier&gt;</code> est renommé en <code>&lt;custom-ident&gt;</code>. Devient un pseudo-type et est lié aux différents cas d'utilisation pour la définition des valeurs exclues.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p><em>Ce type de données n'est pas un type de données « réel » mais un type artificiel permettant de simplifier la description des valeurs permises. Il n'y a donc pas de données de compatibilité stricto sensu.</em></p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{CSSxRef("&lt;ident&gt;")}}</li>
- <li><a href="/fr/docs/tag/Type">Les différents types de données CSS</a></li>
-</ul>
+{{CSSRef}}
+
+Le type de données CSS **`<custom-ident>`** permet de représenter des chaînes de caractères arbitraires définies par l'utilisateur et qui sont utilisées comme identifiants. Ce type de données est sensible à la casse et pour chaque contexte d'utilisation, plusieurs valeurs sont exclues afin d'éviter des ambiguïtés et des erreurs.
+
+## Syntaxe
+
+La syntaxe est proche de celle utilisée pour les identifiants CSS. Une valeur `<custom-ident>` est sensible à la casse et est une séquence de caractères dont les caractères peuvent être :
+
+- n'importe quel caractère alphanumérique (`A` à `Z` ou `a` à `z`),
+- n'importe quel chiffre (`0` à `9`),
+- un tiret (`-`)
+- un tiret bas (_underscore_) (`_`),
+- un caractère échappé via une barre oblique inversée (`\`),
+- un caractère [Unicode](http://en.wikipedia.org/wiki/Unicode) (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).
+
+Le premier caractère de l'identifiant ne doit pas être un chiffre, un tiret suivi d'un chiffre ou un tiret suivi d'un autre tiret. Une valeur `<custom-ident>` ne doit pas être encadrée entre quotes ou entre doubles quotes car ce serait alors une valeur {{cssxref("&lt;string&gt;")}}.
+
+On notera que `id1`, `Id1`, `iD1` et `ID1` sont des identifiants différents car leurs casses sont différentes. En revanche, il existe plusieurs façons d'échapper un même caractère et `toto\?` et `toto\3F` représentent donc le même identifiant.
+
+### Liste des valeurs interdites
+
+Afin d'éviter des ambiguïtés dangereuses, chaque propriété qui utilise `<custom-ident>` définit également une liste de valeurs interdites :
+
+- {{cssxref("animation-name")}}
+  - : Interdit d'utiliser les valeurs CSS globales `unset`, `initial` et `inherit` ainsi que la valeur `none`.
+- {{cssxref("counter-reset")}}
+
+  {{cssxref("counter-increment")}}
+
+  - : Interdit d'utiliser les valeurs CSS globales `unset`, `initial` et `inherit` ainsi que la valeur `none`.
+
+- {{cssxref("@counter-style")}}
+
+  {{cssxref("list-style-type")}}
+
+  - : Interdit d'utiliser les valeurs CSS globales `unset`, `initial` et `inherit` ainsi que les valeurs `none`, `inline`, `outside` et d'autres valeurs prédéfinies, implémentées par les différents navigateurs : `disc`, `circle`, `square`, `decimal`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hebrew`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open` et `disclosure-close`.
+
+- {{cssxref("grid-row-start")}}
+  {{cssxref("grid-row-end")}}
+  {{cssxref("grid-column-start")}}
+  {{cssxref("grid-column-end")}}
+  - : Interdisent la valeur `span`.
+- {{cssxref("will-change")}}
+  - : Interdit d'utiliser les valeurs CSS globales `unset`, `initial` et `inherit` ainsi que les valeurs `will-change`, `auto`, `scroll-position` et `contents`.
+
+## Exemples
+
+Voici des identifiants valides
+
+    nono79            Un mélange de caractères alphanumériques.
+    ground-level      Un mélange de caractères alphanumériques avec un tiret.
+    -test             Un tiret suivi d'un mélange de caractères alphanumériques.
+    _internal         Un tiret bas suivi d'un mélange de caractères alphanumériques.
+    \22 toto          Un caractère Unicode suivi par une série de caractères alphanumériques.
+    bili\.bob         Le point est bien échappé.
+
+Voici des identifiants invalides :
+
+    34rem             Il ne doit pas démarrer par un chiffre.
+    -12rad            Il ne doit pas démarrer par un tiret suivi d'un chiffre.
+    bili.bob          Il ne doit contenir que des caractères alphanumériques. _ et - n'ont pas besoin d'être échappés.
+    --toto            Il ne doit pas démarrer avec deux tirets.
+    'bilibob'         Ce n'est pas une valeur <user-ident> mais une {{cssxref("&lt;string&gt;")}}.
+    "bilibob"         Ce n'est pas une valeur <user-ident> mais une {{cssxref("&lt;string&gt;")}}.
+
+## Spécifications
+
+| Spécification                                                                                                                                                                        | État                                         | Commentaires                                                                                                                                                                                         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> for <code>will-change</code>')}}     | {{Spec2('CSS Will Change')}}         | Définition des valeurs exclues pour {{cssxref("will-change")}}.                                                                                                                            |
+| {{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> for <code>list-style-type</code>')}} | {{Spec2('CSS3 Counter Styles')}} | Utilisation de `<custom-ident>` à la place d'une liste finie de mots-clés. Définition des valeurs exclues pour {{cssxref("list-style-type")}} et {{cssxref("@counter-style")}}. |
+| {{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> for <code>counter-*</code>')}}                             | {{Spec2('CSS3 Lists')}}             | `<identifier>` est renommé en `<custom-ident>`. Son utilisation est ajoutée pour la propriété `counter-set`.                                                                                         |
+| {{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> for <code>animation-name</code>')}} | {{Spec2('CSS3 Animations')}}         | Définition des valeurs exclues pour {{cssxref("animation-name")}}.                                                                                                                        |
+| {{SpecName('CSS3 Values', '#identifier-value', '<code>&lt;custom-ident&gt;</code>')}}                                                                     | {{Spec2('CSS3 Values')}}             | `<identifier>` est renommé en `<custom-ident>`. Devient un pseudo-type et est lié aux différents cas d'utilisation pour la définition des valeurs exclues.                                           |
+| {{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}                                                         | {{Spec2('CSS2.1')}}                     | Définition initiale.                                                                                                                                                                                 |
+
+## Compatibilité des navigateurs
+
+_Ce type de données n'est pas un type de données « réel » mais un type artificiel permettant de simplifier la description des valeurs permises. Il n'y a donc pas de données de compatibilité stricto sensu._
+
+## Voir aussi
+
+- {{CSSxRef("&lt;ident&gt;")}}
+- [Les différents types de données CSS](/fr/docs/tag/Type)
diff --git a/files/fr/web/css/descendant_combinator/index.md b/files/fr/web/css/descendant_combinator/index.md
index 26e23199d3..2886d00fc1 100644
--- a/files/fr/web/css/descendant_combinator/index.md
+++ b/files/fr/web/css/descendant_combinator/index.md
@@ -9,100 +9,76 @@ tags:
 translation_of: Web/CSS/Descendant_combinator
 original_slug: Web/CSS/Sélecteurs_descendant
 ---
-<div>{{CSSRef("Selectors")}}</div>
+{{CSSRef("Selectors")}}
 
-<p>Le <strong>combinateur de descendance</strong>, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs  (sous la forme <code><var>sélecteur₁</var> <var>sélecteur₂</var></code>) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.</p>
+Le **combinateur de descendance**, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs  (sous la forme `sélecteur₁ sélecteur₂`) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.
 
-<pre class="brush: css no-line-numbers">/* Les éléments &lt;li&gt; qui sont des descendants */
-/* d'un &lt;ul class="mon-truc"&gt; */
+```css
+/* Les éléments <li> qui sont des descendants */
+/* d'un <ul class="mon-truc"> */
 ul.mon-truc li {
   margin: 2em;
-}</pre>
+}
+```
 
-<p>Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.</p>
+Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">selecteur1 selecteur2 { <var>/* déclarations CSS */</var> }
-</pre>
+    selecteur1 selecteur2 { /* déclarations CSS */ }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">li {
+```css
+li {
   list-style-type: disc;
 }
 
 li li {
   list-style-type: circle;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;
-    &lt;div&gt;Élément 1&lt;/div&gt;
-    &lt;ul&gt;
-      &lt;li&gt;Sous-élément A&lt;/li&gt;
-      &lt;li&gt;Sous-élément B&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;div&gt;Élément 2&lt;/div&gt;
-    &lt;ul&gt;
-      &lt;li&gt;Sous-élément A&lt;/li&gt;
-      &lt;li&gt;Sous-élément B&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.descendant")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+```
+
+### HTML
 
+```html
 <ul>
- <li><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteur d'enfant</a></li>
+  <li>
+    <div>Élément 1</div>
+    <ul>
+      <li>Sous-élément A</li>
+      <li>Sous-élément B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Élément 2</div>
+    <ul>
+      <li>Sous-élément A</li>
+      <li>Sous-élément B</li>
+    </ul>
+  </li>
 </ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}     | {{Spec2("CSS4 Selectors")}} |                      |
+| {{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}     | {{Spec2('CSS3 Selectors')}} |                      |
+| {{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}} | {{Spec2('CSS2.1')}}             |                      |
+| {{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}                     | {{Spec2('CSS1')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.descendant")}}
+
+## Voir aussi
+
+- [Sélecteur d'enfant](/fr/docs/Web/CSS/Sélecteurs_enfant)
diff --git a/files/fr/web/css/dimension/index.md b/files/fr/web/css/dimension/index.md
index 6be0130cde..cf2f1f9ce3 100644
--- a/files/fr/web/css/dimension/index.md
+++ b/files/fr/web/css/dimension/index.md
@@ -7,68 +7,45 @@ tags:
   - Type
 translation_of: Web/CSS/dimension
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée <strong><code>&lt;dimension&gt;</code></strong> représente une valeur de type {{CSSxRef("&lt;number&gt;")}} directement suivie d'une unité : par exemple <code>10px</code>.</p>
+Le type de donnée **`<dimension>`** représente une valeur de type {{CSSxRef("&lt;number&gt;")}} directement suivie d'une unité : par exemple `10px`.
 
-<p>CSS utilise des dimensions pour définir des distances (type {{CSSxRef("&lt;length&gt;")}}), des durées (type {{CSSxRef("&lt;time&gt;")}}), des fréquences (type {{CSSxRef("&lt;frequency&gt;")}}), des résolutions (type {{CSSxRef("&lt;resolution&gt;")}}) ainsi que d'autres quantités.</p>
+CSS utilise des dimensions pour définir des distances (type {{CSSxRef("&lt;length&gt;")}}), des durées (type {{CSSxRef("&lt;time&gt;")}}), des fréquences (type {{CSSxRef("&lt;frequency&gt;")}}), des résolutions (type {{CSSxRef("&lt;resolution&gt;")}}) ainsi que d'autres quantités.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La syntaxe d'une valeur de type <code>&lt;dimension&gt;</code> est un nombre (valeur de type {{CSSxRef("&lt;number&gt;")}}) immédiatement suivi d'une unité représentée par son identifiant. Les identifiants utilisés pour les unités sont insensibles à la casse.</p>
+La syntaxe d'une valeur de type `<dimension>` est un nombre (valeur de type {{CSSxRef("&lt;number&gt;")}}) immédiatement suivi d'une unité représentée par son identifiant. Les identifiants utilisés pour les unités sont insensibles à la casse.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Dimensions_valides">Dimensions valides</h3>
+### Dimensions valides
 
-<pre class="brush:css example-good">12px      12 pixels
+```css example-good
+12px      12 pixels
 1rem      1 rem
 1.2pt     1.2 points
 2200ms    2200 millisecondes
 200hz     200 Hertz
 200Hz     200 Hertz (les unités sont insensibles à la casse)
-</pre>
+```
 
-<h3 id="Dimensions_invalides">Dimensions invalides</h3>
+### Dimensions invalides
 
-<pre class="brush:css example-bad">12 px       L'unité doit immédiatement être indiquée après le nombre
+```css example-bad
+12 px       L'unité doit immédiatement être indiquée après le nombre
 12"px"      Les unités sont des identifiants et ne doivent pas être entourées de quotes
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
-   <td>{{Spec2("CSS4 Values")}}</td>
-   <td>Adds <code>cap</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code>, <code>vi</code>, <code>vb</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
-   <td>{{Spec2("CSS3 Values")}}</td>
-   <td>Adds <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "syndata.html#numbers", "&lt;dimension&gt;")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Defined under Numbers and Length</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "", "&lt;dimension&gt;")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>Initial definition under "length units"</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                             | Commentaires                                      |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------- |
+| {{SpecName("CSS4 Values", "#dimensions", "&lt;dimension&gt;")}}     | {{Spec2("CSS4 Values")}} | Adds `cap`, `ic`, `lh`, `rlh`, `vi`, `vb`         |
+| {{SpecName("CSS3 Values", "#dimensions", "&lt;dimension&gt;")}}     | {{Spec2("CSS3 Values")}} | Adds `ch`, `rem`, `vw`, `vw`, `vmin`,` vmax`, `Q` |
+| {{SpecName("CSS2.1", "syndata.html#numbers", "&lt;dimension&gt;")}} | {{Spec2("CSS2.1")}}         | Defined under Numbers and Length                  |
+| {{SpecName("CSS1", "", "&lt;dimension&gt;")}}                             | {{Spec2("CSS1")}}         | Initial definition under "length units"           |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.dimension")}}</p>
+{{Compat("css.types.dimension")}}
diff --git a/files/fr/web/css/direction/index.md b/files/fr/web/css/direction/index.md
index 8ffd33d2de..6fe130080a 100644
--- a/files/fr/web/css/direction/index.md
+++ b/files/fr/web/css/direction/index.md
@@ -7,98 +7,81 @@ tags:
   - Reference
 translation_of: Web/CSS/direction
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>direction</code></strong> doit être paramétrée afin de correspondre à la direction du texte: <code>rtl</code> (<em>Right To Left</em> pour droite à gauche) pour les textes en hébreu ou en arabe et <code>ltr</code> (<em>Left To Right</em> pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant <a href="/fr/docs/Web/HTML/Attributs_universels/dir">l'attribut <code>dir</code> en HTML</a>) plutôt qu'avec une feuille de style CSS.</p>
+La propriété **`direction`** doit être paramétrée afin de correspondre à la direction du texte: `rtl` (_Right To Left_ pour droite à gauche) pour les textes en hébreu ou en arabe et `ltr` (_Left To Right_ pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant [l'attribut `dir` en HTML](/fr/docs/Web/HTML/Attributs_universels/dir)) plutôt qu'avec une feuille de style CSS.
 
-<div>{{EmbedInteractiveExample("pages/css/direction.html")}}</div>
+{{EmbedInteractiveExample("pages/css/direction.html")}}
 
-<p>La propriété définit la direction principale du texte des éléments de type bloc et celle des éléments incorporés créés par la propriété {{cssxref("unicode-bidi")}}. Elle définit également l'alignement par défaut du texte et des éléments de type bloc, ainsi que le sens de progression des cellules dans une ligne de tableau.</p>
+La propriété définit la direction principale du texte des éléments de type bloc et celle des éléments incorporés créés par la propriété {{cssxref("unicode-bidi")}}. Elle définit également l'alignement par défaut du texte et des éléments de type bloc, ainsi que le sens de progression des cellules dans une ligne de tableau.
 
-<p>Contrairement à l'attribut HTML <code>dir</code>, la propriété <code>direction</code> n'est pas héritée pour les cellules depuis les colonnes d'un tableau car l'héritage CSS suit l'arborescence du document et les cellules sont à l'intérieur des lignes et non à l'intérieur des colonnes.</p>
+Contrairement à l'attribut HTML `dir`, la propriété `direction` n'est pas héritée pour les cellules depuis les colonnes d'un tableau car l'héritage CSS suit l'arborescence du document et les cellules sont à l'intérieur des lignes et non à l'intérieur des colonnes.
 
-<p>Les propriétés <code>direction</code> et {{cssxref("unicode-bidi")}} sont les deux seuls propriétés qui ne sont pas affectés par la propriété raccourcie {{cssxref("all")}}.</p>
+Les propriétés `direction` et {{cssxref("unicode-bidi")}} sont les deux seuls propriétés qui ne sont pas affectés par la propriété raccourcie {{cssxref("all")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">direction: ltr;
+```css
+direction: ltr;
 direction: rtl;
 
 /* Valeurs globales */
 direction: inherit;
 direction: initial;
 direction: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>ltr</code></dt>
- <dd>La valeur par défaut qui correspond à une disposition de la gauche vers la droite pour le texte et les autres éléments.</dd>
- <dt><code>rtl</code></dt>
- <dd>Le texte et les autres éléments vont de la droite vers la gauche.</dd>
-</dl>
+- `ltr`
+  - : La valeur par défaut qui correspond à une disposition de la gauche vers la droite pour le texte et les autres éléments.
+- `rtl`
+  - : Le texte et les autres éléments vont de la droite vers la gauche.
 
-<p>Afin que la propriété <code>direction</code> ait un effet sur les éléments en ligne, il faut que la valeur de la propriété {{cssxref("unicode-bidi")}} soit <code>embed</code> ou <code>override</code>.</p>
+Afin que la propriété `direction` ait un effet sur les éléments en ligne, il faut que la valeur de la propriété {{cssxref("unicode-bidi")}} soit `embed` ou `override`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">blockquote {
+```css
+blockquote {
   direction: rtl;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;blockquote&gt;
+```html
+<blockquote>
   Du reste, depuis son bain dans la mare aux larmes,
   tout était changé : la salle, la table de verre, et
   la petite porte avaient complétement disparu.
-&lt;/blockquote&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}</td>
-   <td>{{Spec2('CSS3 Writing Modes')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.direction")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("unicode-bidi")}}</li>
- <li>{{cssxref("writing-mode")}}</li>
-</ul>
+</blockquote>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                    | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Writing Modes', '#direction', 'direction')}} | {{Spec2('CSS3 Writing Modes')}} | Aucune modification. |
+| {{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}} | {{Spec2('CSS2.1')}}                 | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.direction")}}
+
+## Voir aussi
+
+- {{cssxref("unicode-bidi")}}
+- {{cssxref("writing-mode")}}
diff --git a/files/fr/web/css/display-box/index.md b/files/fr/web/css/display-box/index.md
index 3c1c278420..5846c64b47 100644
--- a/files/fr/web/css/display-box/index.md
+++ b/files/fr/web/css/display-box/index.md
@@ -7,100 +7,101 @@ tags:
   - Type de donnée
 translation_of: Web/CSS/display-box
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.</p>
+Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<dl>
- <dt><code>contents</code> {{Experimental_Inline}}</dt>
- <dd>L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur <code>contents</code> affecte les éléments « inhabituels » tels que les éléments remplacés. Voir <a href="https://drafts.csswg.org/css-display/#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> pour plus de détails.<br>
- <br>
- À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec <code>display: contents</code> sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran<em>.</em></dd>
- <dt><code>none</code></dt>
- <dd>Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.<br>
- Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété {{CSSxRef("visibility")}}.</dd>
-</dl>
+- `contents` {{Experimental_Inline}}
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur `contents` affecte les éléments « inhabituels » tels que les éléments remplacés. Voir [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) pour plus de détails.
+
+    À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec `display: contents` sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran*.*
+
+- `none`
+  - : Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.
+    Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété {{CSSxRef("visibility")}}.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="display_none"><code>display: none</code></h3>
+### `display: none`
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p.secret {
+```css
+p.secret {
   display: none;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Texte visible&lt;/p&gt;
-&lt;p class="secret"&gt;Texte invisible&lt;/p&gt;</pre>
+```html
+<p>Texte visible</p>
+<p class="secret">Texte invisible</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("display_none", "100%", 60)}}</p>
+{{EmbedLiveSample("display_none", "100%", 60)}}
 
-<h3 id="display_contents"><code>display: contents</code></h3>
+### `display: contents`
 
-<p>Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec <code>display: contents</code> et l'élément <code>&lt;div&gt;</code> ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.</p>
+Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec `display: contents` et l'élément `<div>` ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.outer {
+```css
+.outer {
   border: 2px solid red;
   width: 300px;
   display: contents;
 }
 
-.outer &gt; div {
+.outer > div {
   border: 1px solid green;
 }
-</pre>
+```
+
+#### HTML
+
+```html
+<div class="outer">
+  <div>Inner div.</div>
+</div>
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### Résultat
 
-<pre class="brush: html">&lt;div class="outer"&gt;
-  &lt;div&gt;Inner div.&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+{{EmbedLiveSample("Display_contents", 300, 60)}}
 
-<h4 id="Résultat_2">Résultat</h4>
+## Accessibilité
 
-<p>{{EmbedLiveSample("Display_contents", 300, 60)}}</p>
+Via leur implémentation, la plupart des navigation retireront un élément de [l'arbre d'accessibilité](/fr/docs/Apprendre/a11y/What_is_accessibility) si celui-ci reçoit `display: contents`. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon [la spécification CSSWG](https://drafts.csswg.org/css-display/#the-display-properties).
 
-<h2 id="Accessibilité">Accessibilité</h2>
+- [Améliorer l'accessibilité du contenu avec `display: contents`, par Hidde de Vries (en anglais)](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents)
+- [`display: contents` n'est pas un outil de réinitialisation CSS, par Adrian Roselli (en anglais)](http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
 
-<p>Via leur implémentation, la plupart des navigation retireront un élément de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility">l'arbre d'accessibilité</a> si celui-ci reçoit <code>display: contents</code>. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon <a href="https://drafts.csswg.org/css-display/#the-display-properties">la spécification CSSWG</a>.</p>
+## Compatibilité des navigateurs
 
-<ul>
- <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Améliorer l'accessibilité du contenu avec <code>display: contents</code>, par Hidde de Vries (en anglais)</a></li>
- <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS, par Adrian Roselli (en anglais)</a></li>
-</ul>
+### Prise en charge `contents`
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.properties.display.contents", 10)}}
 
-<h3 id="Prise_en_charge_contents">Prise en charge <code>contents</code></h3>
+## Voir aussi
 
-<p>{{Compat("css.properties.display.contents", 10)}}</p>
+- {{CSSxRef("display")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
 
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-  </ul>
- </li>
- <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS (en anglais)</a></li>
- <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Un balisage plus accessible avec <code>display: contents</code> (en anglais)</a></li>
-</ul>
+- [`display: contents` n'est pas un outil de réinitialisation CSS (en anglais)](http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
+- [Un balisage plus accessible avec `display: contents` (en anglais)](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents)
diff --git a/files/fr/web/css/display-inside/index.md b/files/fr/web/css/display-inside/index.md
index 697b44c4c9..298e80c95c 100644
--- a/files/fr/web/css/display-inside/index.md
+++ b/files/fr/web/css/display-inside/index.md
@@ -7,48 +7,47 @@ tags:
   - Type
 translation_of: Web/CSS/display-inside
 ---
-<div>{{CSSRef}}</div>
-
-<p>Ces mots-clés définissent le type d'affichage ({{CSSxRef("display")}}) pour l'intérieur de l'élément. Ce type servira à la disposition du contenu de l'élément (si ce contenu n'est pas un élément remplacé). Ces mots-clés sont des valeurs de la propriété <code>display</code> et peuvent, historiquement être utilisé seul, ou plus récemment (cf. la spécification de niveau 3), être utilisé en combinaison avec un mot-clé {{CSSxRef("&lt;display-outside&gt;")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Une valeur <code>&lt;display-inside&gt;</code> est définie avec l'un des mots-clés suivants :</p>
-
-<dl>
- <dt><code>flow</code> {{Experimental_Inline}}</dt>
- <dd>L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « <em>block and inline layout</em> » en anglais).
- <p>Si le type d'affichage extérieur est <code>inline</code> ou <code>run-in</code> et que l'élément participe à un contexte de formatage bloc ou en ligne, il génèrera une boîte en ligne. Sinon, il génèrera un conteneur de bloc.</p>
-
- <p>Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a> (BFC) pour son contenu ou intègre son contenu dans le contexte parent.</p>
- </dd>
- <dt><code>flow-root</code> {{Experimental_Inline}}</dt>
- <dd>L'élément génère un bloc qui établit un nouveau <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a>, définissant ainsi une nouvelle racine pour le formatage.</dd>
- <dt><code>table</code></dt>
- <dd>L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc.</dd>
- <dt><code>flex</code></dt>
- <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">le modèle des boîtes flexibles</a>.</dd>
- <dt><code>grid</code></dt>
- <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">le modèle des grilles</a>.</dd>
- <dt><code>ruby</code> {{Experimental_Inline}}</dt>
- <dd>L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <code>&lt;display-inside&gt;</code> lorsque c'est cohérent. Ainsi, avec <code>display: flex</code> ou <code>display: grid</code>, la valeur utilisée de <code>&lt;display-outside&gt;</code> sera nécessairement <code>block</code>. On a ainsi le résultat attendu car on doit avoir <code>display: grid</code> avec un conteneur qui soit un bloc.</p>
-</div>
+{{CSSRef}}
+
+Ces mots-clés définissent le type d'affichage ({{CSSxRef("display")}}) pour l'intérieur de l'élément. Ce type servira à la disposition du contenu de l'élément (si ce contenu n'est pas un élément remplacé). Ces mots-clés sont des valeurs de la propriété `display` et peuvent, historiquement être utilisé seul, ou plus récemment (cf. la spécification de niveau 3), être utilisé en combinaison avec un mot-clé {{CSSxRef("&lt;display-outside&gt;")}}.
+
+## Syntaxe
+
+Une valeur `<display-inside>` est définie avec l'un des mots-clés suivants :
+
+- `flow` {{Experimental_Inline}}
+
+  - : L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « _block and inline layout_ » en anglais).
+
+    Si le type d'affichage extérieur est `inline` ou `run-in` et que l'élément participe à un contexte de formatage bloc ou en ligne, il génèrera une boîte en ligne. Sinon, il génèrera un conteneur de bloc.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau [contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context) (BFC) pour son contenu ou intègre son contenu dans le contexte parent.
+
+- `flow-root` {{Experimental_Inline}}
+  - : L'élément génère un bloc qui établit un nouveau [contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context), définissant ainsi une nouvelle racine pour le formatage.
+- `table`
+  - : L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc.
+- `flex`
+  - : L'élément se comporte comme un élément de bloc et dispose son contenu selon [le modèle des boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout).
+- `grid`
+  - : L'élément se comporte comme un élément de bloc et dispose son contenu selon [le modèle des grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout).
+- `ruby` {{Experimental_Inline}}
+  - : L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}.
+
+> **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que `<display-inside>` lorsque c'est cohérent. Ainsi, avec `display: flex` ou `display: grid`, la valeur utilisée de `<display-outside>` sera nécessairement `block`. On a ainsi le résultat attendu car on doit avoir `display: grid` avec un conteneur qui soit un bloc.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, la boîte parente est ciblée avec <code>display: flow-root</code> et crée donc un nouveau contexte de formatage de bloc qui contient l'élément flottant.</p>
+Dans l'exemple qui suit, la boîte parente est ciblée avec `display: flow-root` et crée donc un nouveau contexte de formatage de bloc qui contient l'élément flottant.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.box {
+```css
+.box {
   background-color: rgb(224, 206, 247);
   border: 5px solid rebeccapurple;
   display: flow-root;
@@ -61,58 +60,57 @@ translation_of: Web/CSS/display-inside
   background-color: white;
   border:1px solid black;
   padding: 10px;
-}</pre>
+}
+```
+
+### HTML
+
+```html
+<div class="box">
+  <div class="float">I am a floated box!</div>
+  <p>I am content inside the container.</p>
+</div>
+```
 
-<h3 id="HTML">HTML</h3>
+### Résultat
 
-<pre class="brush: html">&lt;div class="box"&gt;
-  &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
-  &lt;p&gt;I am content inside the container.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+{{EmbedLiveSample("Exemples", "100%", 180)}}
 
-<h3 id="Résultat">Résultat</h3>
+## Compatibilité des navigateurs
 
-<p>{{EmbedLiveSample("Exemples", "100%", 180)}}</p>
+### Prise en charge des valeurs multiples
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.properties.display.multi-keyword_values", 10)}}
 
-<h3 id="Prise_en_charge_des_valeurs_multiples">Prise en charge des valeurs multiples</h3>
+### Prise en charge de `flow-root`
 
-<p>{{Compat("css.properties.display.multi-keyword_values", 10)}}</p>
+{{Compat("css.properties.display.flow-root", 10)}}
 
-<h3 id="Prise_en_charge_de_flow-root">Prise en charge de <code>flow-root</code></h3>
+### Prise en charge des tableaux
 
-<p>{{Compat("css.properties.display.flow-root", 10)}}</p>
+{{Compat("css.properties.display.table_values", 10)}}
 
-<h3 id="Prise_en_charge_des_tableaux">Prise en charge des tableaux</h3>
+### Prise en charge des grilles
 
-<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+{{Compat("css.properties.display.grid", 10)}}
 
-<h3 id="Prise_en_charge_des_grilles">Prise en charge des grilles</h3>
+### Prise en charge des boîtes flexibles
 
-<p>{{Compat("css.properties.display.grid", 10)}}</p>
+{{Compat("css.properties.display.flex", 10)}}
 
-<h3 id="Prise_en_charge_des_boîtes_flexibles">Prise en charge des boîtes flexibles</h3>
+### Prise en charge des annotations ruby
 
-<p>{{Compat("css.properties.display.flex", 10)}}</p>
+{{Compat("css.properties.display.ruby_values", 10)}}
 
-<h3 id="Prise_en_charge_des_annotations_ruby">Prise en charge des annotations ruby</h3>
+## Voir aussi
 
-<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+- {{CSSxRef("display")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
 
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-  </ul>
- </li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Concepts de base des boîtes flexibles (<em>flexbox</em>)</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Concepts de base des grilles CSS</a></li>
-</ul>
+- [Concepts de base des boîtes flexibles (_flexbox_)](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+- [Concepts de base des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
diff --git a/files/fr/web/css/display-internal/index.md b/files/fr/web/css/display-internal/index.md
index 3d4c4425fb..c2c6e47a43 100644
--- a/files/fr/web/css/display-internal/index.md
+++ b/files/fr/web/css/display-internal/index.md
@@ -7,65 +7,59 @@ tags:
   - Type de donnée
 translation_of: Web/CSS/display-internal
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Certains modes de disposition tels que <code>table</code> et <code>ruby</code> possèdent une structure interne complexe avec différents roles pour les éléments enfants et descendants. Cette page décrit ces valeurs « internes » pour <code>display</code> et qui s'appliquent dans un mode donné.</p>
+Certains modes de disposition tels que `table` et `ruby` possèdent une structure interne complexe avec différents roles pour les éléments enfants et descendants. Cette page décrit ces valeurs « internes » pour `display` et qui s'appliquent dans un mode donné.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Sauf mention contraire, le type d'affichage intérieur et extérieur sont définis simultanément par le mot-clé indiqué.</p>
+Sauf mention contraire, le type d'affichage intérieur et extérieur sont définis simultanément par le mot-clé indiqué.
 
-<dl>
- <dt><code>table-row-group</code></dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("tbody")}}.</dd>
- <dt><code>table-header-group</code></dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("thead")}}.</dd>
- <dt><code>table-footer-group</code></dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("tfoot")}}.</dd>
- <dt><code>table-row</code></dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("tr")}}.</dd>
- <dt><code>table-cell</code></dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("td")}}.</dd>
- <dt><code>table-column-group</code></dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("colgroup")}}.</dd>
- <dt><code>table-column</code></dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("col")}}.</dd>
- <dt><code>table-caption</code></dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("caption")}}.</dd>
- <dt><code>ruby-base</code> {{Experimental_Inline}}</dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rb")}}.</dd>
- <dt><code>ruby-text</code> {{Experimental_Inline}}</dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rt")}}.</dd>
- <dt><code>ruby-base-container</code> {{Experimental_Inline}}</dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rbc")}} générés comme des boîtes anonymes.</dd>
- <dt><code>ruby-text-container</code> {{Experimental_Inline}}</dt>
- <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rtc")}}.</dd>
-</dl>
+- `table-row-group`
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("tbody")}}.
+- `table-header-group`
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("thead")}}.
+- `table-footer-group`
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("tfoot")}}.
+- `table-row`
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("tr")}}.
+- `table-cell`
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("td")}}.
+- `table-column-group`
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("colgroup")}}.
+- `table-column`
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("col")}}.
+- `table-caption`
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("caption")}}.
+- `ruby-base` {{Experimental_Inline}}
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rb")}}.
+- `ruby-text` {{Experimental_Inline}}
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rt")}}.
+- `ruby-base-container` {{Experimental_Inline}}
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rbc")}} générés comme des boîtes anonymes.
+- `ruby-text-container` {{Experimental_Inline}}
+  - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rtc")}}.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Prise_en_charge_pour_les_valeurs_liées_à_table">Prise en charge pour les valeurs liées à <code>table</code></h3>
+### Prise en charge pour les valeurs liées à `table`
 
-<p><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-footer-group</code>, <code>table-header-group</code>, <code>table-row</code> et <code>table-row-group</code></p>
+`table`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row` et `table-row-group`
 
-<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+{{Compat("css.properties.display.table_values", 10)}}
 
-<h3 id="Prise_en_charge_pour_les_valeurs_ruby">Prise en charge pour les valeurs <code>ruby</code></h3>
+### Prise en charge pour les valeurs `ruby`
 
-<p><code>ruby</code>, <code>ruby-base</code>, <code>ruby-base-container</code>, <code>ruby-text</code> et <code>ruby-text-container</code></p>
+`ruby`, `ruby-base`, `ruby-base-container`, `ruby-text` et `ruby-text-container`
 
-<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+{{Compat("css.properties.display.ruby_values", 10)}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-  </ul>
- </li>
-</ul>
+- {{CSSxRef("display")}}
+
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
diff --git a/files/fr/web/css/display-legacy/index.md b/files/fr/web/css/display-legacy/index.md
index 759ab90d24..35894b40a8 100644
--- a/files/fr/web/css/display-legacy/index.md
+++ b/files/fr/web/css/display-legacy/index.md
@@ -7,95 +7,99 @@ tags:
   - Type de donnée
 translation_of: Web/CSS/display-legacy
 ---
-<div>{{CSSRef}}</div>
-
-<p>CSS 2 utilisant une syntaxe avec un seul mot-clé comme valeur pour la propriété <code>display</code>, il fallait plusieurs mots-clés pour les différentes variantes bloc/en ligne d'un même mode. Cette page décrit ces valeurs.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<dl>
- <dt><code>inline-block</code></dt>
- <dd>L'élément s'inscrit dans le contenu environnant comme une boîte en ligne et organise son propre contenu en bloc.<br>
- <br>
- Ce mot-clé est équivalent à la combinaison <code>inline flow-root</code>.</dd>
- <dt><code>inline-table</code></dt>
- <dd>La valeur <code>inline-table</code> n'a pas de correspondance directe en HTML. Un tel élément se comporte comme un élément HTML {{HTMLElement("table")}} avec une boîte en ligne et pas de bloc. À l'intérieur de la boîte de tableau, on aura un contexte de bloc.<br>
- <br>
- Ce mot-clé est équivalent à la combinaison <code>inline table</code>.</dd>
- <dt><code>inline-flex</code></dt>
- <dd>L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des boîtes flexibles.<br>
- <br>
- Ce mot-clé est équivalent à la combinaison <code>inline flex</code>.</dd>
- <dt><code>inline-grid</code></dt>
- <dd>L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des grilles CSS.<br>
- <br>
- Ce mot-clé est équivalent à la combinaison <code>inline grid</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+{{CSSRef}}
+
+CSS 2 utilisant une syntaxe avec un seul mot-clé comme valeur pour la propriété `display`, il fallait plusieurs mots-clés pour les différentes variantes bloc/en ligne d'un même mode. Cette page décrit ces valeurs.
+
+## Syntaxe
+
+- `inline-block`
+
+  - : L'élément s'inscrit dans le contenu environnant comme une boîte en ligne et organise son propre contenu en bloc.
+
+    Ce mot-clé est équivalent à la combinaison `inline flow-root`.
+
+- `inline-table`
+
+  - : La valeur `inline-table` n'a pas de correspondance directe en HTML. Un tel élément se comporte comme un élément HTML {{HTMLElement("table")}} avec une boîte en ligne et pas de bloc. À l'intérieur de la boîte de tableau, on aura un contexte de bloc.
+
+    Ce mot-clé est équivalent à la combinaison `inline table`.
+
+- `inline-flex`
+
+  - : L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des boîtes flexibles.
+
+    Ce mot-clé est équivalent à la combinaison `inline flex`.
+
+- `inline-grid`
+
+  - : L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des grilles CSS.
+
+    Ce mot-clé est équivalent à la combinaison `inline grid`.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique <code>inline-flex</code>.</p>
+Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique `inline-flex`.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.container {
+```css
+.container {
   display: inline-flex;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;div&gt;Élément flexible&lt;/div&gt;
-  &lt;div&gt;Élément flexible&lt;/div&gt;
-&lt;/div&gt;
+```html
+<div class="container">
+  <div>Élément flexible</div>
+  <div>Élément flexible</div>
+</div>
 
 Pas d'élément flexible
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 300, 150)}}</p>
-</div>
+{{EmbedLiveSample("Exemples", 300, 150)}}
 
-<p>Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (<code>inline</code>) et la seconde pour le mode d'affichage intérieur (<code>flex</code>).</p>
+Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (`inline`) et la seconde pour le mode d'affichage intérieur (`flex`).
 
-<pre class="brush: css">.container {
+```css
+.container {
   display: inline flex;
-}</pre>
+}
+```
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+### Prise en charge de `inline-block`
 
-<h3 id="Prise_en_charge_de_inline-block">Prise en charge de <code>inline-block</code></h3>
+{{Compat("css.properties.display.inline-block", 10)}}
 
-<p>{{Compat("css.properties.display.inline-block", 10)}}</p>
+### Prise en charge de `inline-table`
 
-<h3 id="Prise_en_charge_de_inline-table">Prise en charge de <code>inline-table</code></h3>
+{{Compat("css.properties.display.inline-table", 10)}}
 
-<p>{{Compat("css.properties.display.inline-table", 10)}}</p>
+### Prise en charge de `inline-flex`
 
-<h3 id="Prise_en_charge_de_inline-flex">Prise en charge de <code>inline-flex</code></h3>
+{{Compat("css.properties.display.inline-flex", 10)}}
 
-<p>{{Compat("css.properties.display.inline-flex", 10)}}</p>
+### Prise en charge de `inline-grid`
 
-<h3 id="Prise_en_charge_de_inline-grid">Prise en charge de <code>inline-grid</code></h3>
+{{Compat("css.properties.display.inline-grid", 10)}}
 
-<p>{{Compat("css.properties.display.inline-grid", 10)}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- {{CSSxRef("display")}}
 
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}
diff --git a/files/fr/web/css/display-listitem/index.md b/files/fr/web/css/display-listitem/index.md
index 021c78fc97..3506944425 100644
--- a/files/fr/web/css/display-listitem/index.md
+++ b/files/fr/web/css/display-listitem/index.md
@@ -7,56 +7,53 @@ tags:
   - Type de donnée
 translation_of: Web/CSS/display-listitem
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le mot-clé <code>list-item</code> permet à un élément de générer un pseudo-élément <code>::marker</code>  dont le contenu  est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément.</p>
+Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker`  dont le contenu  est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une valeur <code>list-item</code> indiquera à l'élément de se comporter comme un élément d'une liste. Cette valeur peut être utilisée avec les propriétés {{CSSxRef("list-style-type")}} et {{CSSxRef("list-style-position")}}.</p>
+Une valeur `list-item` indiquera à l'élément de se comporter comme un élément d'une liste. Cette valeur peut être utilisée avec les propriétés {{CSSxRef("list-style-type")}} et {{CSSxRef("list-style-position")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Pour les navigateurs qui prennent en charge la syntaxe avec deux valeurs, si aucune valeur pour le mode intérieur n'est indiquée, sa valeur par défaut sera <code>flow</code>. Si aucune valeur n'est fournie pour le mode extérieur, la boîte principale aura un mode extérieur <code>block</code>.</p>
-</div>
+> **Note :** Pour les navigateurs qui prennent en charge la syntaxe avec deux valeurs, si aucune valeur pour le mode intérieur n'est indiquée, sa valeur par défaut sera `flow`. Si aucune valeur n'est fournie pour le mode extérieur, la boîte principale aura un mode extérieur `block`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.fausse-liste {
+```css
+.fausse-liste {
   display: list-item;
   list-style-position: inside;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="fausse-liste"&gt;Je vais m'afficher comme un élément de liste&lt;/div&gt;
-</pre>
+```html
+<div class="fausse-liste">Je vais m'afficher comme un élément de liste</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", 150)}}</p>
+{{EmbedLiveSample("Exemples", "100%", 150)}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Prise_en_charge_de_list-item">Prise en charge de <code>list-item</code></h3>
+### Prise en charge de `list-item`
 
-<p>{{Compat("css.properties.display.list-item", 10)}}</p>
+{{Compat("css.properties.display.list-item", 10)}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-  </ul>
- </li>
-</ul>
+- {{CSSxRef("display")}}
+
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
diff --git a/files/fr/web/css/display-outside/index.md b/files/fr/web/css/display-outside/index.md
index 5bde80335d..96e20d0c7d 100644
--- a/files/fr/web/css/display-outside/index.md
+++ b/files/fr/web/css/display-outside/index.md
@@ -7,79 +7,77 @@ tags:
   - Type de donnée
 translation_of: Web/CSS/display-outside
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les mots-clés de type <code>&lt;display-outside&gt;</code> définissent le mode de disposition extérieure de l'élément. Autrement dit, ces mots-clés précisent le rôle de l'élément dans le flux. Ces valeurs peuvent être utilisées pour la propriété <code>display</code>. La syntaxe historique (avant CSS 3) prendra une seule valeur et la nouvelle syntaxe combinera cette valeur avec une valeur {{CSSxRef("&lt;display-inside&gt;")}}.</p>
+Les mots-clés de type `<display-outside>` définissent le mode de disposition extérieure de l'élément. Autrement dit, ces mots-clés précisent le rôle de l'élément dans le flux. Ces valeurs peuvent être utilisées pour la propriété `display`. La syntaxe historique (avant CSS 3) prendra une seule valeur et la nouvelle syntaxe combinera cette valeur avec une valeur {{CSSxRef("&lt;display-inside&gt;")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une valeur <code>&lt;display-outside&gt;</code> peut être l'un des mots-clés suivants.</p>
+Une valeur `<display-outside>` peut être l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>block</code></dt>
- <dd>L'élément génère une boîte de bloc ce qui ajoute des passages à la ligne avant et après l'élément dans le flux normal.</dd>
- <dt><code>inline</code></dt>
- <dd>L'élément génère une ou plusieurs boîtes en lignes qui n'ajoutent pas de passages à la ligne avant ou après. Dans un flux normal, le prochain élément sera sur la même ligne si l'espace le permet.</dd>
- <dt><code>run-in</code> {{Experimental_Inline}}</dt>
- <dd>L'élément génère une boîte « <em>run-in</em> ». Si le voisin adjacent à l'élément est une boîte de bloc, la boîte <code>run-in</code> devient la première boîte en ligne qui suit cette boîte de bloc.<br>
- <br>
- Les éléments <em>run-in</em> se comportent comme des éléments de bloc ou en ligne selon les éléments environnants. Autrement dit, si la boîte <em>run-in</em> contient une boîte de bloc, l'élément se comportera comme un bloc. Si la boîte de bloc suit une boîte <em>run-in</em>, la boîte <em>run-in</em> deviendra la première boîte en ligne de la boîte de bloc. Si une boîte en ligne succède à l'élément, la boîte <em>run-in</em> deviendra une boîte de bloc.</dd>
-</dl>
+- `block`
+  - : L'élément génère une boîte de bloc ce qui ajoute des passages à la ligne avant et après l'élément dans le flux normal.
+- `inline`
+  - : L'élément génère une ou plusieurs boîtes en lignes qui n'ajoutent pas de passages à la ligne avant ou après. Dans un flux normal, le prochain élément sera sur la même ligne si l'espace le permet.
+- `run-in` {{Experimental_Inline}}
 
-<div class="note">
-<p><strong>Note :</strong> Browsers that support the two value syntax, on finding the outer value only, such as when <code>display: block</code> or <code>display: inline</code> is specified, will set the inner value to <code>flow</code>. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.</p>
+  - : L'élément génère une boîte « _run-in_ ». Si le voisin adjacent à l'élément est une boîte de bloc, la boîte `run-in` devient la première boîte en ligne qui suit cette boîte de bloc.
 
-<p><strong>Note : </strong>Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut <code>flow</code> pour le mode intérieur si <code>display: block</code> ou <code>display: inline</code>.  On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne).</p>
-</div>
+    Les éléments _run-in_ se comportent comme des éléments de bloc ou en ligne selon les éléments environnants. Autrement dit, si la boîte _run-in_ contient une boîte de bloc, l'élément se comportera comme un bloc. Si la boîte de bloc suit une boîte _run-in_, la boîte _run-in_ deviendra la première boîte en ligne de la boîte de bloc. Si une boîte en ligne succède à l'élément, la boîte _run-in_ deviendra une boîte de bloc.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+> **Note :** Browsers that support the two value syntax, on finding the outer value only, such as when `display: block` or `display: inline` is specified, will set the inner value to `flow`. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.
+>
+> **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut `flow` pour le mode intérieur si `display: block` ou `display: inline`.  On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne).
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
+
+Dans l'exemple suivant, les éléments {{HTMLElement("span")}}, normalement affichés comme des éléments en ligne, sont paramétrés avec `display: block` et passent à la ligne en étendant leur conteneur selon l'axe en ligne.
 
-<p>Dans l'exemple suivant, les éléments {{HTMLElement("span")}}, normalement affichés comme des éléments en ligne, sont paramétrés avec <code>display: block</code> et passent à la ligne en étendant leur conteneur selon l'axe en ligne.</p>
 
-<p> </p>
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">span {
+```css
+span {
   display: block;
   border: 1px solid rebeccapurple;
-}</pre>
+}
+```
+
+
+
+### HTML
 
-<p> </p>
+```html
+<span>span 1</span>
+<span>span 2</span>
+```
 
-<h3 id="HTML">HTML</h3>
+### Résultat
 
-<pre class="brush: html">&lt;span&gt;span 1&lt;/span&gt;
-&lt;span&gt;span 2&lt;/span&gt;</pre>
+{{EmbedLiveSample("Exemples", 300, 60)}}
 
-<h3 id="Résultat">Résultat</h3>
+## Compatibilité des navigateurs
 
-<p>{{EmbedLiveSample("Exemples", 300, 60)}}</p>
+### Prise en charge `run-in`
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.properties.display.run-in", 10)}}
 
-<h3 id="Prise_en_charge_run-in">Prise en charge <code>run-in</code></h3>
+## Voir aussi
 
-<p>{{Compat("css.properties.display.run-in", 10)}}</p>
+- {{CSSxRef("display")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
 
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-  </ul>
- </li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline layout in Normal Flow</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts">Formatting Contexts explained</a></li>
-</ul>
+- [Block and Inline layout in Normal Flow](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)
+- [Formatting Contexts explained](/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts)
diff --git a/files/fr/web/css/display/index.md b/files/fr/web/css/display/index.md
index 2f322c669c..c20330af76 100644
--- a/files/fr/web/css/display/index.md
+++ b/files/fr/web/css/display/index.md
@@ -8,22 +8,23 @@ tags:
   - display
 translation_of: Web/CSS/display
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>display</code></strong> définit le type d'affichage utilisée pour le rendu d'un élément (<a href="/fr/docs/Web/CSS/CSS_Flow_Layout">de bloc ou en ligne</a>) et la disposition utilisée pour ses éléments fils : <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">grille</a> ou <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">boîtes flexibles</a>.</p>
+La propriété **`display`** définit le type d'affichage utilisée pour le rendu d'un élément ([de bloc ou en ligne](/fr/docs/Web/CSS/CSS_Flow_Layout)) et la disposition utilisée pour ses éléments fils : [grille](/fr/docs/Web/CSS/CSS_Grid_Layout) ou [boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout).
 
-<p>Le type d'affichage donné par <code>display</code> possède deux composantes : le type d'affichage extérieur qui définit comment la boîte participe au <a href="/fr/docs/Web/CSS/CSS_Flow_Layout">flux</a> et le type d'affichage intérieur qui définit l'organisation des éléments enfants.</p>
+Le type d'affichage donné par `display` possède deux composantes : le type d'affichage extérieur qui définit comment la boîte participe au [flux](/fr/docs/Web/CSS/CSS_Flow_Layout) et le type d'affichage intérieur qui définit l'organisation des éléments enfants.
 
-<p>Certaines valeurs de <code>display</code> sont définies dans des spécifications séparées. Pour plus d'informations, voir la section Spécifications ci-après.</p>
+Certaines valeurs de `display` sont définies dans des spécifications séparées. Pour plus d'informations, voir la section Spécifications ci-après.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;display-outside&gt; */
+```css
+/* Valeurs de type <display-outside> */
 display: block;
 display: inline;
 display: run-in;
 
-/* Valeurs de type &lt;display-inside&gt; */
+/* Valeurs de type <display-inside> */
 display: flow;
 display: flow-root;
 display: table;
@@ -32,12 +33,12 @@ display: grid;
 display: ruby;
 
 /* Combinaison de valeurs */
-/* &lt;display-outside&gt; et &lt;display-inside&gt; */
+/* <display-outside> et <display-inside> */
 display: block flow;
 display: inline table;
 display: flex run-in;
 
-/* Valeurs de type &lt;display-listitem&gt; */
+/* Valeurs de type <display-listitem> */
 display: list-item;
 display: list-item block;
 display: list-item inline;
@@ -47,7 +48,7 @@ display: list-item block flow;
 display: list-item block flow-root;
 display: flow list-item block;
 
-/* Valeurs de type &lt;display-internal&gt; */
+/* Valeurs de type <display-internal> */
 display: table-row-group;
 display: table-header-group;
 display: table-footer-group;
@@ -61,11 +62,11 @@ display: ruby-text;
 display: ruby-base-container;
 display: ruby-text-container;
 
-/* Valeurs de type &lt;display-box&gt; */
+/* Valeurs de type <display-box> */
 display: contents;
 display: none;
 
-/* Valeurs de type &lt;display-legacy&gt; */
+/* Valeurs de type <display-legacy> */
 display: inline-block;
 display: inline-table;
 display: inline-flex;
@@ -75,161 +76,125 @@ display: inline-grid;
 display: inherit;
 display: initial;
 display: unset;
-</pre>
+```
 
-<p>La propriété <code>display</code> est définie à l'aide de mots-clés. Ces valeurs sont rangées selon six catégories.</p>
+La propriété `display` est définie à l'aide de mots-clés. Ces valeurs sont rangées selon six catégories.
 
-<dl>
- <dt>{{CSSxRef("&lt;display-outside&gt;")}}</dt>
- <dd>Ces mots-clés définissent le type d'affichage extérieur de l'élément. Autrement dit, ils définissent comment l'élément participe au flux.</dd>
- <dt>{{CSSxRef("&lt;display-inside&gt;")}}</dt>
- <dd>Ces mots-clés définissent le type d'affichage intérieur de l'élément qui définit le contexte de formatage qui organisera le contenu de l'élément (si celui-ci n'est pas un élément remplacé).</dd>
- <dt>{{CSSxRef("&lt;display-listitem&gt;")}}</dt>
- <dd>L'élément génère une boîte de bloc pour le contenu et une boîte en ligne séparée pour l'élément de liste.</dd>
- <dt>{{CSSxRef("&lt;display-internal&gt;")}}</dt>
- <dd>Certains modes de dispositions, tels que <code><span class="css">table</span></code> et <code>ruby</code> possèdent une structure interne complexe avec différents rôles possibles pour les éléments descendants. Cette section définit ces rôles internes qui s'appliquent uniquement pour un mode de disposition donné.</dd>
- <dt>{{CSSxRef("&lt;display-box&gt;")}}</dt>
- <dd>Ces valeurs définissent si un élément génère une boîte ou non.</dd>
- <dt>{{CSSxRef("&lt;display-legacy&gt;")}}</dt>
- <dd>CSS 2 utilise une syntaxe avec un seul mot-clé pour la propriété <code>display</code> et il faut donc des mots-clés distincts pour les variantes bloc/en ligne d'un même mode de disposition.</dd>
-</dl>
+- {{CSSxRef("&lt;display-outside&gt;")}}
+  - : Ces mots-clés définissent le type d'affichage extérieur de l'élément. Autrement dit, ils définissent comment l'élément participe au flux.
+- {{CSSxRef("&lt;display-inside&gt;")}}
+  - : Ces mots-clés définissent le type d'affichage intérieur de l'élément qui définit le contexte de formatage qui organisera le contenu de l'élément (si celui-ci n'est pas un élément remplacé).
+- {{CSSxRef("&lt;display-listitem&gt;")}}
+  - : L'élément génère une boîte de bloc pour le contenu et une boîte en ligne séparée pour l'élément de liste.
+- {{CSSxRef("&lt;display-internal&gt;")}}
+  - : Certains modes de dispositions, tels que `table` et `ruby` possèdent une structure interne complexe avec différents rôles possibles pour les éléments descendants. Cette section définit ces rôles internes qui s'appliquent uniquement pour un mode de disposition donné.
+- {{CSSxRef("&lt;display-box&gt;")}}
+  - : Ces valeurs définissent si un élément génère une boîte ou non.
+- {{CSSxRef("&lt;display-legacy&gt;")}}
+  - : CSS 2 utilise une syntaxe avec un seul mot-clé pour la propriété `display` et il faut donc des mots-clés distincts pour les variantes bloc/en ligne d'un même mode de disposition.
 
-<h3 id="Valeurs_historiques_de_display">Valeurs historiques de <code>display</code></h3>
+### Valeurs historiques de `display`
 
-<p>La spécification de niveau 3 permet d'utiliser deux valeurs pour définir la propriété <code>display</code> afin de définir explicitement le type d'affichage intérieur et le type d'affichage extérieur. Toutefois, cette syntaxe sur deux valeurs n'est pas encore prise en charge de façon homogène par les navigateurs.</p>
+La spécification de niveau 3 permet d'utiliser deux valeurs pour définir la propriété `display` afin de définir explicitement le type d'affichage intérieur et le type d'affichage extérieur. Toutefois, cette syntaxe sur deux valeurs n'est pas encore prise en charge de façon homogène par les navigateurs.
 
-<p>Les méthodes d'affichage historiques permettent d'obtenir les mêmes résultats avec un seul mot-clé. Ces valeurs devraient être privilégiées tant que la prise en charge de la syntaxe sur deux valeurs n'est pas mieux prise en charge. Ainsi, il est possible d'utiliseur deux valeur afin de définir un conteneur flexible en ligne :</p>
+Les méthodes d'affichage historiques permettent d'obtenir les mêmes résultats avec un seul mot-clé. Ces valeurs devraient être privilégiées tant que la prise en charge de la syntaxe sur deux valeurs n'est pas mieux prise en charge. Ainsi, il est possible d'utiliseur deux valeur afin de définir un conteneur flexible en ligne :
 
-<pre class="brush: css">.container {
+```css
+.container {
   display: inline flex;
-}</pre>
+}
+```
 
-<p>On pourra obtenir un comportement équivalent en écrivant cela avec une seule valeur.</p>
+On pourra obtenir un comportement équivalent en écrivant cela avec une seule valeur.
 
-<pre class="brush: css">.container {
+```css
+.container {
   display: inline-flex;
 }
-</pre>
+```
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>En plus de l'exemple qui suit, vous pouvez voir d'autres exemples sur les sections dédiées aux différents modes de disposition :</p>
+En plus de l'exemple qui suit, vous pouvez voir d'autres exemples sur les sections dédiées aux différents modes de disposition :
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Boîtes flexibles (<em>flexbox</em>) CSS</a></li>
- <li><a href="/fr/docs/Apprendre/CSS/CSS_layout">Apprendre la disposition en CSS</a></li>
-</ul>
+- [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout)
+- [Boîtes flexibles (_flexbox_) CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout)
+- [Apprendre la disposition en CSS](/fr/docs/Apprendre/CSS/CSS_layout)
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Texte visible
-&lt;/p&gt;
-&lt;p class="secret"&gt;
+</p>
+<p class="secret">
   Texte invisible
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p.secret {
+```css
+p.secret {
   display: none;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 300, 60)}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<h3 id="display_none"><code>display: none;</code></h3>
-
-<p>Utiliser la propriété <code>display</code> avec la valeur <code>none</code> sur un élément entraînera son retrait de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a>. Cet élément ainsi que ses descendants ne seront plus annoncés par les lecteurs d'écrans.</p>
-
-<p>Si vous souhaitez masquer un élément visuellement, une alternative plus accessible consiste à utiliser <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">une combinaison de propriétés</a> afin de le retirer de l'écran mais de le conserver lisible pour les technologies d'assistance.</p>
-
-<h3 id="display_contents"><code>display: contents;</code></h3>
-
-<p>Tout élément ciblé avec <code>display: contents</code> sera retiré de l'arbre d'accessibilité par la plupart des navigateurs. Ainsi, l'élément et ses descendants ne seront plus annoncés par les outils d'assistance tels que les lecteurs d'écran. Ce comportement est incorrect selon <a href="https://drafts.csswg.org/css-display/#the-display-properties">la spécification CSSWG</a>.</p>
-
-<ul>
- <li><a href="https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS, par Adrian Roselli, en anglais</a></li>
- <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Obtenir un balisage plus accessible grâce à <code>display: contents</code>, en anglais, par Hidde de Vries</a></li>
-</ul>
-
-<h3 id="Les_tableaux">Les tableaux</h3>
-
-<p>Modifier la valeur de <code>display</code> pour un élément de <a href="/en-US/docs/Web/HTML/Element/table">tableau</a> afin d'utiliser la valeur <code>block</code>, <code>grid</code> ou <code>flex</code> modifiera sa représentation au sein de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a>. Aussi, le tableau ne sera plus correctement annoncé par les technologies d'assistance.</p>
-
-<ul>
- <li><a href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Une rapide note sur l'impact de la propriété CSS <code>display</code> sur la sémantique des tableaux — The Paciello Group (en anglais)</a></li>
- <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/">Du contenu masqué avec une meilleure accessibilité - Go Make Things (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td>
-   <td>{{Spec2('CSS3 Display')}}</td>
-   <td>Ajout des valeurs <code>run-in</code>, <code>contents</code>, <code>flow</code>, <code>flow-root</code> et des valeurs avec plusieurs mots-clés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
-   <td>{{Spec2('CSS3 Ruby')}}</td>
-   <td>Ajout des valeurs <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code> et <code>ruby-text-container</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
-   <td>{{Spec2('CSS3 Grid')}}</td>
-   <td>Ajout des valeurs pour le modèle de boîtes en grille.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Ajout des valeurs pour le modèle de boîtes flexibles.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Ajout des valeurs pour le modèle de boîte pour les tableaux et de la valeur <code>inline-block<em>.</em></code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale. Définitions des valeurs basiques : <code>none</code>, <code>block</code>, <code>inline</code>, et <code>list-item</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.display",10)}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("visibility")}}</li>
- <li>{{cssxref("float")}}</li>
- <li>{{cssxref("position")}}</li>
- <li>{{cssxref("flex")}}</li>
- <li>{{cssxref("grid")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications sur les contextes de formatage</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les dispositions de bloc et en ligne dans un flux normal</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 300, 60)}}
+
+## Accessibilité
+
+### `display: none;`
+
+Utiliser la propriété `display` avec la valeur `none` sur un élément entraînera son retrait de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs). Cet élément ainsi que ses descendants ne seront plus annoncés par les lecteurs d'écrans.
+
+Si vous souhaitez masquer un élément visuellement, une alternative plus accessible consiste à utiliser [une combinaison de propriétés](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link) afin de le retirer de l'écran mais de le conserver lisible pour les technologies d'assistance.
+
+### `display: contents;`
+
+Tout élément ciblé avec `display: contents` sera retiré de l'arbre d'accessibilité par la plupart des navigateurs. Ainsi, l'élément et ses descendants ne seront plus annoncés par les outils d'assistance tels que les lecteurs d'écran. Ce comportement est incorrect selon [la spécification CSSWG](https://drafts.csswg.org/css-display/#the-display-properties).
+
+- [`display: contents` n'est pas un outil de réinitialisation CSS, par Adrian Roselli, en anglais](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
+- [Obtenir un balisage plus accessible grâce à `display: contents`, en anglais, par Hidde de Vries](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents)
+
+### Les tableaux
+
+Modifier la valeur de `display` pour un élément de [tableau](/en-US/docs/Web/HTML/Element/table) afin d'utiliser la valeur `block`, `grid` ou `flex` modifiera sa représentation au sein de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs). Aussi, le tableau ne sera plus correctement annoncé par les technologies d'assistance.
+
+- [Une rapide note sur l'impact de la propriété CSS `display` sur la sémantique des tableaux — The Paciello Group (en anglais)](https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/)
+- [Du contenu masqué avec une meilleure accessibilité - Go Make Things (en anglais)](https://gomakethings.com/hidden-content-for-better-a11y/)
+- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- [_Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires                                                                                         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Display', '#the-display-properties', 'display')}} | {{Spec2('CSS3 Display')}} | Ajout des valeurs `run-in`, `contents`, `flow`, `flow-root` et des valeurs avec plusieurs mots-clés. |
+| {{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}                 | {{Spec2('CSS3 Ruby')}}     | Ajout des valeurs `ruby`, `ruby-base`, `ruby-text`, `ruby-base-container` et `ruby-text-container`.  |
+| {{SpecName('CSS3 Grid', '#grid-containers', 'display')}}             | {{Spec2('CSS3 Grid')}}     | Ajout des valeurs pour le modèle de boîtes en grille.                                                |
+| {{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}         | {{Spec2('CSS3 Flexbox')}} | Ajout des valeurs pour le modèle de boîtes flexibles.                                                |
+| {{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}     | {{Spec2('CSS2.1')}}         | Ajout des valeurs pour le modèle de boîte pour les tableaux et de la valeur `inline-block.`          |
+| {{SpecName('CSS1', '#display', 'display')}}                                 | {{Spec2('CSS1')}}         | Définition initiale. Définitions des valeurs basiques : `none`, `block`, `inline`, et `list-item`.   |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.display",10)}}
+
+## Voir aussi
+
+- {{cssxref("visibility")}}
+- {{cssxref("float")}}
+- {{cssxref("position")}}
+- {{cssxref("flex")}}
+- {{cssxref("grid")}}
+- [Explications sur les contextes de formatage](/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage)
+- [Les dispositions de bloc et en ligne dans un flux normal](/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal)
diff --git a/files/fr/web/css/easing-function/index.md b/files/fr/web/css/easing-function/index.md
index ed1e420f89..283017f125 100644
--- a/files/fr/web/css/easing-function/index.md
+++ b/files/fr/web/css/easing-function/index.md
@@ -3,186 +3,203 @@ title: <easing-function>
 slug: Web/CSS/easing-function
 translation_of: Web/CSS/easing-function
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le <a href="/fr/docs/Web/CSS/CSS_Types">type de données</a> CSS <strong><code>&lt;easing-function&gt;</code></strong> indique une fonction mathématique qui décrit la façon dont une valeur numérique évolue.</p>
+Le [type de données](/fr/docs/Web/CSS/CSS_Types) CSS **`<easing-function>`** indique une fonction mathématique qui décrit la façon dont une valeur numérique évolue.
 
-<p>Cette transition entre deux valeurs peut être appliquées dans différentes situations. Elle peut être utilisée pour décrire la rapidité selon laquelle les valeurs évoluent durant les animations. Elle permet ainsi de faire varier la vitesse de l'animation au fur et à mesure de sa progression. Elle peut aussi être utilisée pour interpoler deux couleurs au sein d'un dégradé.</p>
+Cette transition entre deux valeurs peut être appliquées dans différentes situations. Elle peut être utilisée pour décrire la rapidité selon laquelle les valeurs évoluent durant les animations. Elle permet ainsi de faire varier la vitesse de l'animation au fur et à mesure de sa progression. Elle peut aussi être utilisée pour interpoler deux couleurs au sein d'un dégradé.
 
-<p>Les fonctions d'évolution qui appartiennent au sous ensemble des courbes de Bézier cubiques sont souvent appelées des fonctions « douces » car elles permettent d'avoir des évolutions légères en début et en fin d'interpolation. Les fonctions d'évolution relient un ratio d'entrée à un ratio de sortie, tous les deux exprimés comme des nombres (<a href="/fr/docs/Web/CSS/&lt;number&gt;"><code>&lt;number&gt;</code></a>). Pour ces valeurs, <code>0.0</code> représente l'état initial et <code>1.0</code> représente l'état final.</p>
+Les fonctions d'évolution qui appartiennent au sous ensemble des courbes de Bézier cubiques sont souvent appelées des fonctions « douces » car elles permettent d'avoir des évolutions légères en début et en fin d'interpolation. Les fonctions d'évolution relient un ratio d'entrée à un ratio de sortie, tous les deux exprimés comme des nombres ([`<number>`](/fr/docs/Web/CSS/<number>)). Pour ces valeurs, `0.0` représente l'état initial et `1.0` représente l'état final.
 
-<p>Selon la fonction utilisée, la sortie calculée peut parfois être supérieure à <code>1.0</code> ou être inférieure à <code>0.0</code> pendant le cours de l'animation. Cela placera la valeur plus loin que son état final puis la fera revenir. Pour les animations de certaines propriétés (comme <a href="/fr/docs/Web/CSS/left"><code>left</code></a> ou <a href="/fr/docs/Web/CSS/right"><code>right</code></a>), cela crée un effet de rebond.</p>
+Selon la fonction utilisée, la sortie calculée peut parfois être supérieure à `1.0` ou être inférieure à `0.0` pendant le cours de l'animation. Cela placera la valeur plus loin que son état final puis la fera revenir. Pour les animations de certaines propriétés (comme [`left`](/fr/docs/Web/CSS/left) ou [`right`](/fr/docs/Web/CSS/right)), cela crée un effet de rebond.
 
-<img src="tf_with_output_gt_than_1.png">
+![](tf_with_output_gt_than_1.png)
 
-<p>Toutefois, certaines propriétés restreindront la valeur de sortie au sein d'un intervalle acceptable. Ainsi, pour une valeur représentant la composante d'une couleur, celle-ci sera écrétée pour rester dans l'intervalle autorisé 0-255. Certaines courbes <code>cubic-bezier()</code> illustrent cette propriété.</p>
+Toutefois, certaines propriétés restreindront la valeur de sortie au sein d'un intervalle acceptable. Ainsi, pour une valeur représentant la composante d'une couleur, celle-ci sera écrétée pour rester dans l'intervalle autorisé 0-255. Certaines courbes `cubic-bezier()` illustrent cette propriété.
 
-<img src="tf_with_output_gt_than_1_clipped.png">
+![](tf_with_output_gt_than_1_clipped.png)
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<p>Il existe trois types de <a href="#easing_functions">fonctions de transition</a> : linéaires, <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">courbes de Bézier cubiques</a> et les fonctions en escalier. Une valeur du type <code>&lt;easing-function&gt;</code> décrit la fonction de transition en utilisant l'un de ces trois types.</p>
+Il existe trois types de [fonctions de transition](#easing_functions) : linéaires, [courbes de Bézier cubiques](https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves) et les fonctions en escalier. Une valeur du type `<easing-function>` décrit la fonction de transition en utilisant l'un de ces trois types.
 
-<h3 id="fonctions_de_transition">Fonctions de transition</h3>
+### Fonctions de transition
 
-<p>CSS prend en charge trois sortes de fonction de transition : les fonctions linéaires, le sous ensemble des courbes cubiques de Bézier qui sont des fonctions et les fonctions en escalier. Les fonctions les plus utiles peuvent être facilement utilisées grâce à des mots-clés.</p>
+CSS prend en charge trois sortes de fonction de transition : les fonctions linéaires, le sous ensemble des courbes cubiques de Bézier qui sont des fonctions et les fonctions en escalier. Les fonctions les plus utiles peuvent être facilement utilisées grâce à des mots-clés.
 
-<h4 id="les_fonctions_de_transition_linéaires">Les fonctions de transition linéaires</h4>
+#### Les fonctions de transition linéaires
 
-<h5 id="linear">linear</h5>
+##### linear
 
-<img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne diagonale droite par de l'origine 0 0 jusqu'à arriver à la position 1 1." src="cubic-bezier-linear.png">
+![Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne diagonale droite par de l'origine 0 0 jusqu'à arriver à la position 1 1.](cubic-bezier-linear.png)
 
-<p>L'interpolation se fait à évolution constante, du début jusqu'à la fin. Ce mot-clé représente la fonction de transition décrite par <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code>.</p>
+L'interpolation se fait à évolution constante, du début jusqu'à la fin. Ce mot-clé représente la fonction de transition décrite par `cubic-bezier(0.0, 0.0, 1.0, 1.0)`.
 
-<h4 id="cubic-bezier">La classe des fonctions de transition cubic-bezier()</h4>
+#### La classe des fonctions de transition cubic-bezier()
 
-<img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe par de l'origine jusqu'à atteindre la position 1 1. Le point à l'origine est appelé 'P₀ = (0, 0)'. En partant de l'origine, on a une poignée de Bézier intitulée 'P₁ = (0.075, 0.75)'. Le point aux coordonnées 1 1 est intitulé 'P₃ = (1, 1)'. En partant du point 1 1, on a une poignée de Bézier intitulée 'P₂ = (0.0875, 0.36)'." src="cubic-bezier-example.png">
+![Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe par de l'origine jusqu'à atteindre la position 1 1. Le point à l'origine est appelé 'P₀ = (0, 0)'. En partant de l'origine, on a une poignée de Bézier intitulée 'P₁ = (0.075, 0.75)'. Le point aux coordonnées 1 1 est intitulé 'P₃ = (1, 1)'. En partant du point 1 1, on a une poignée de Bézier intitulée 'P₂ = (0.0875, 0.36)'.](cubic-bezier-example.png)
 
-<p>La notation fonctionnelle <code>cubic-bezier()</code> définit <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier#Courbes_de_B%C3%A9zier_cubiques">une courbe de Bézier cubique</a>. Ces courbes étant continues, elles sont souvent utilisées afin de démarrer et de finir progressivement une interpolation. Elles sont parfois appelées <em>fonctions de transition</em>.</p>
+La notation fonctionnelle `cubic-bezier()` définit [une courbe de Bézier cubique](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier#Courbes_de_B%C3%A9zier_cubiques). Ces courbes étant continues, elles sont souvent utilisées afin de démarrer et de finir progressivement une interpolation. Elles sont parfois appelées _fonctions de transition_.
 
-<p>Une courbe de Bézier cubique est définie par quatre points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub> et P<sub>3</sub>. P<sub>0</sub> et P<sub>3</sub> représentent les points de début et de fin de la courbe. Pour les fonctions de transition CSS, ces points sont fixes, car les coordonnées représentent des ratios (sur les abscisses, le ratio en temps et sur les ordonnées, le ratio en sortie). P<sub>0</sub> est donc situé en <code>(0, 0)</code> et représente l'état initial. P<sub>3</sub> est en <code>(1, 1)</code> et réprésente l'état final.</p>
+Une courbe de Bézier cubique est définie par quatre points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub> et P<sub>3</sub>. P<sub>0</sub> et P<sub>3</sub> représentent les points de début et de fin de la courbe. Pour les fonctions de transition CSS, ces points sont fixes, car les coordonnées représentent des ratios (sur les abscisses, le ratio en temps et sur les ordonnées, le ratio en sortie). P<sub>0</sub> est donc situé en `(0, 0)` et représente l'état initial. P<sub>3</sub> est en `(1, 1)` et réprésente l'état final.
 
-<p>Toutes les courbes de Bézier cubiques ne sont pas des fonctions de transition, car toutes ne sont pas <a href="https://fr.wikipedia.org/wiki/Fonction_(math%C3%A9matiques)">des fonctions mathématiques</a> (c'est-à-dire des courbes qui, pour une abscisse donnée, ont une seule ou zéro valeur). Avec les contraintes imposées sur P<sub>0</sub> et P<sub>3</sub> en CSS, une courbe de Bézier cubique sera une fonction mathématique et pourra être utilisée comme fonction de transition, si et seulement si les abscisses de P<sub>1</sub> et P<sub>2</sub> appartiennent, tous les deux, à l'intervalle <code>[0, 1]</code>.</p>
+Toutes les courbes de Bézier cubiques ne sont pas des fonctions de transition, car toutes ne sont pas [des fonctions mathématiques](<https://fr.wikipedia.org/wiki/Fonction_(math%C3%A9matiques)>) (c'est-à-dire des courbes qui, pour une abscisse donnée, ont une seule ou zéro valeur). Avec les contraintes imposées sur P<sub>0</sub> et P<sub>3</sub> en CSS, une courbe de Bézier cubique sera une fonction mathématique et pourra être utilisée comme fonction de transition, si et seulement si les abscisses de P<sub>1</sub> et P<sub>2</sub> appartiennent, tous les deux, à l'intervalle `[0, 1]`.
 
-<p>Les courbes de Bézier cubiques pour lesquelles les ordonnées des points P<sub>1</sub> ou P<sub>2</sub> sont en dehors de l'intervalle <code>[0, 1]</code> pourront générer un effet de rebond.</p>
+Les courbes de Bézier cubiques pour lesquelles les ordonnées des points P<sub>1</sub> ou P<sub>2</sub> sont en dehors de l'intervalle `[0, 1]` pourront générer un effet de rebond.
 
-<p>Si on utilise une déclaration <code>cubic-bezier</code> avec une fonction invalide, CSS ignorera l'ensemble de la propriété.</p>
+Si on utilise une déclaration `cubic-bezier` avec une fonction invalide, CSS ignorera l'ensemble de la propriété.
 
-<h5 id="syntaxe_2">Syntaxe</h5>
+##### Syntaxe
 
-<pre class="brush: css">cubic-bezier(<var>x<sub>1</sub></var>, <var>y<sub>1</sub></var>, <var>x<sub>2</sub></var>, <var>y<sub>2</sub></var>)
-</pre>
+```css
+cubic-bezier(x1, y1, x2, y2)
+```
 
-<p>avec :</p>
+avec :
 
-<dl>
- <dt><strong><var>x<sub>1</sub></var>, <var>y<sub>1</sub></var>, <var>x<sub>2</sub></var>, <var>y<sub>2</sub></var></strong></dt>
- <dd>Des valeurs numériques (<a href="/fr/docs/Web/CSS/&lt;number&gt;"><code>&lt;number&gt;</code></a>) qui représentent les abscisses et ordonnées des points P<sub>1</sub> et P<sub>2</sub> qui définissent la courbe de Bézier cubique. x<sub>1</sub> et x<sub>2</sub> doivent appartenir à l'intervalle [0, 1] afin que la valeur soit valide.</dd>
-</dl>
+- **_x<sub>1</sub>_, _y<sub>1</sub>_, _x<sub>2</sub>_, _y<sub>2</sub>_**
 
-<h4 id="Keywords_for_common_cubic-bezier_easing_functions">Mots-clés pour les fonctions de transition communes</h4>
+  - : Des valeurs numériques ([`<number>`](/fr/docs/Web/CSS/<number>)) qui représentent les abscisses et ordonnées des points P
 
-<h5 id="ease">ease</h5>
+    <sub>1</sub>
 
-<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'au point 1 1 en démarrant rapidement et finissant par un arc plat." src="cubic-bezier-ease.png"></p>
+    et P
 
-<p>L'interpolation démarre doucement puis accélère vivement avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>. Cette valeur est semblable à <a href="#ease-in-out"><code>ease-in-out</code></a>, bien qu'elle accélère plus rapidement au début.</p>
+    <sub>2</sub>
 
-<h5 id="ease-in">ease-in</h5>
+    qui définissent la courbe de Bézier cubique. x
 
-<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une courbe part l'origine jusqu'au point 1 1 avec une bonne partie de la courbe proche de l'origine et qui s'élève en quasi-ligne droite afin d'atteindre le point d'arrivée 1 1."  src="cubic-bezier-ease-in.png"></p>
+    <sub>1</sub>
 
-<p>L'interpolation démarre lentement puis s'accélère progressivement jusqu'à la fin où elle s'arrête de façon abrutpe. Ce mot-clé représente la fonction de transition <code>cubic-bezier(0.42, 0.0, 1.0, 1.0)</code>.</p>
+    et x
 
-<h5 id="ease-in-out"><code>ease-in-out</code></h5>
+    <sub>2</sub>
 
-<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe qui part de l'origine jusqu'à atteindre le point 1 1. La courbe est symétrique et ressemble à un S étiré" src="cubic-bezier-ease-in-out.png"></p>
+    doivent appartenir à l'intervalle \[0, 1] afin que la valeur soit valide.
 
-<p>L'interpolation démarre lentement puis accélère avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition <code>cubic-bezier(0.42, 0.0, 0.58, 1.0)</code>. Au début, elle se comporte comme <a href="#ease-in"><code>ease-in</code></a> et à la fin, elle se comporte comme <a href="#ease-out"><code>ease-out</code></a>.</p>
+#### Mots-clés pour les fonctions de transition communes
 
-<h5 id="ease-out">ease-out</h5>
+##### ease
 
-<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'à atteindre le point 1 1. Cette courbe démarre comme une ligne droite en diagonale puis se courbe progressivement à l'approche de 1 1." src="cubic-bezer-ease-out.png"></p>
+![Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'au point 1 1 en démarrant rapidement et finissant par un arc plat.](cubic-bezier-ease.png)
 
-<p>L'interpolation démarre abruptement puis ralentit progressivement vers la fin. Ce mot-clé correspond à la fonction de transition <code>cubic-bezier(0.0, 0.0, 0.58, 1.0)</code>.</p>
+L'interpolation démarre doucement puis accélère vivement avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition `cubic-bezier(0.25, 0.1, 0.25, 1.0)`. Cette valeur est semblable à [`ease-in-out`](#ease-in-out), bien qu'elle accélère plus rapidement au début.
 
-<h4 id="steps">Les fonctions de transition en escalier</h4>
+##### ease-in
 
-<p>La notation fonctionnelle <code>steps()</code> définit une fonction en escalier qui divise le domaine des valeurs de sorties en marches équidistantes.</p>
+![Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une courbe part l'origine jusqu'au point 1 1 avec une bonne partie de la courbe proche de l'origine et qui s'élève en quasi-ligne droite afin d'atteindre le point d'arrivée 1 1.](cubic-bezier-ease-in.png)
 
-<h5 id="syntaxe_3">Syntaxe</h5>
+L'interpolation démarre lentement puis s'accélère progressivement jusqu'à la fin où elle s'arrête de façon abrutpe. Ce mot-clé représente la fonction de transition `cubic-bezier(0.42, 0.0, 1.0, 1.0)`.
 
-<pre class="brush: css">steps(<var>nombre_de_marches</var>, <var>direction</var>)
-</pre>
+##### `ease-in-out`
 
-<p>avec :</p>
+![Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe qui part de l'origine jusqu'à atteindre le point 1 1. La courbe est symétrique et ressemble à un S étiré](cubic-bezier-ease-in-out.png)
 
-<dl>
- <dt><var>nombre_de_marches</var></dt>
- <dd>Un entier (<a href="/fr/docs/Web/CSS/&lt;integer&gt;"><code>&lt;integer&gt;</code></a>) strictement positif qui représente le nombre de segments équidistants qui composent la fonction en escalier.</dd>
- <dt><var>direction</var></dt>
- <dd>
-   <p>Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :</p>
-   <ul>
-    <li><code>jump-start</code> indique une fonction continue à gauche : le premier saut a lieu au début de l'interpolation ;</li>
-    <li><code>jump-end</code> indique une fonction continue à droite : le dernier saut a lieu à la fin de l'interpolation ;</li>
-    <li><code>jump-both</code> indique une fonction continue à droite et à gauche avec des pauses au début et à la fin, ce qui se traduit par l'ajout d'une étape lors de l'itération de l'interpolation ;</li>
-    <li><code>jump-none</code> indique qu'il n'y a pas de saut au début ou à la fin mais une temporisation de 1/n de la durée totale à chaque extrêmité.</li>
-    <li><code>start</code> est équivalent à <code>jump-start</code></li>
-    <li><code>end</code> est équivalent à <code>jump-end</code></li>
-   </ul>
-   <p><code>end</code> est la valeur par défaut.</p>
- </dd>
-</dl>
+L'interpolation démarre lentement puis accélère avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition `cubic-bezier(0.42, 0.0, 0.58, 1.0)`. Au début, elle se comporte comme [`ease-in`](#ease-in) et à la fin, elle se comporte comme [`ease-out`](#ease-out).
 
-<h5 id="steps_n_&lt;direction&gt;">steps( n, &lt;direction&gt; )</h5>
+##### ease-out
 
-<ul>
- <li>
-  <p><code>steps(2, jump-start)</code><br>
-   <code>steps(2, start)</code></p>
-  <img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Trois points sont affichés : le premier aux coordonnées 0 0, le deuxième aux coordonnées 0,5 0,5 et le troisième aux coordonnées 1 1. Les deuxième et troisième points sont le début de lignes horizontales qui partent vers la gauche sur 0,5 unités." src="steps-2-start.png"></li>
- <li>
-  <p><code>steps(4, jump-end)<br>
-   steps(4, end)</code></p>
-  <img alt="Quatre marches avec un saut de la quatrième à la valeur située à la fin." src="steps-4-end.png"></li>
- <li>
-  <p><code>steps(5, jump-none)</code></p>
-  <img alt="Cinq marches, sans saut : 20% de temps s'écoule à l'étape initiale et 20% de temps s'écoule à l'étape finale." src="step5none.png"></li>
- <li>
-  <p><code>steps(3, jump-both)</code></p>
-  <img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Cinq points sont affichés, respectivement aux coordonnées 0 0, 0 0,25, 0,5 0,5, 0,75 0,75, 1 1. Les deuxième, troisième et quatrième points ont des lignes qui partent vers la droite sur 0,25 unités." src="step3both.png"></li>
-</ul>
+![Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'à atteindre le point 1 1. Cette courbe démarre comme une ligne droite en diagonale puis se courbe progressivement à l'approche de 1 1.](cubic-bezer-ease-out.png)
+
+L'interpolation démarre abruptement puis ralentit progressivement vers la fin. Ce mot-clé correspond à la fonction de transition `cubic-bezier(0.0, 0.0, 0.58, 1.0)`.
+
+#### Les fonctions de transition en escalier
+
+La notation fonctionnelle `steps()` définit une fonction en escalier qui divise le domaine des valeurs de sorties en marches équidistantes.
+
+##### Syntaxe
+
+```css
+steps(nombre_de_marches, direction)
+```
+
+avec :
+
+- _nombre_de_marches_
+  - : Un entier ([`<integer>`](/fr/docs/Web/CSS/<integer>)) strictement positif qui représente le nombre de segments équidistants qui composent la fonction en escalier.
+- _direction_
+
+  - : Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :
+
+    - `jump-start` indique une fonction continue à gauche : le premier saut a lieu au début de l'interpolation ;
+    - `jump-end` indique une fonction continue à droite : le dernier saut a lieu à la fin de l'interpolation ;
+    - `jump-both` indique une fonction continue à droite et à gauche avec des pauses au début et à la fin, ce qui se traduit par l'ajout d'une étape lors de l'itération de l'interpolation ;
+    - `jump-none` indique qu'il n'y a pas de saut au début ou à la fin mais une temporisation de 1/n de la durée totale à chaque extrêmité.
+    - `start` est équivalent à `jump-start`
+    - `end` est équivalent à `jump-end`
+
+    `end` est la valeur par défaut.
+
+##### steps( n, \<direction> )
+
+- `steps(2, jump-start)`
+  `steps(2, start)`
+
+  ![Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Trois points sont affichés : le premier aux coordonnées 0 0, le deuxième aux coordonnées 0,5 0,5 et le troisième aux coordonnées 1 1. Les deuxième et troisième points sont le début de lignes horizontales qui partent vers la gauche sur 0,5 unités.](steps-2-start.png)
 
-<h5 id="step-start">step-start</h5>
+- `steps(4, jump-end) steps(4, end)`
 
-<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du deuxième point vers l'axe Y." src="steps-1-start.png"> L'interpolation saute directement à l'état final et reste ainsi jusqu'à la fin. Ce mot-clé correspond à la fonction de transition <code>steps(1, jump-start)</code> ou <code>steps(1, start)</code>.</p>
+  ![Quatre marches avec un saut de la quatrième à la valeur située à la fin.](steps-4-end.png)
 
-<h5 id="step-end">step-end</h5>
+- `steps(5, jump-none)`
 
-<p><img alt="Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du premier point et reste sur l'axe des abscisses." src="steps-1-end.png"> L'interpolation reste dans son état initial jusqu'à la fin où elle saute directement à l'état final. Ce mot-clé représente la fonction de transition <code>steps(1, jump-end)</code> ou <code>steps(1, end)</code>.</p>
+  ![Cinq marches, sans saut : 20% de temps s'écoule à l'étape initiale et 20% de temps s'écoule à l'étape finale.](step5none.png)
 
-<h2 id="exemples">Exemples</h2>
+- `steps(3, jump-both)`
 
-<h3 id="comparaison_des_fonctions_de_transition">Comparaison des fonctions de transition</h3>
+  ![Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Cinq points sont affichés, respectivement aux coordonnées 0 0, 0 0,25, 0,5 0,5, 0,75 0,75, 1 1. Les deuxième, troisième et quatrième points ont des lignes qui partent vers la droite sur 0,25 unités.](step3both.png)
 
-<p>Dans cet exemple, on crée une animation qui peut être démarrée ou stoppée à l'aide du bouton fourni et un menu est affiché pour choisir la fonction de transition à utiliser : différents mots-clés sont disponibles ainsi que des exemples utilisant <code>cubic-bezier()</code> et <code>steps()</code>. L'idée est de fournir un outil de comparaison simple entre ces fonctions.</p>
+##### step-start
 
-<h4 id="HTML">HTML</h4>
+![Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du deuxième point vers l'axe Y.](steps-1-start.png) L'interpolation saute directement à l'état final et reste ainsi jusqu'à la fin. Ce mot-clé correspond à la fonction de transition `steps(1, jump-start)` ou `steps(1, start)`.
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;div&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;ul&gt;
-  &lt;li&gt;
-    &lt;button class="animation-button"&gt;Démarrer l'animation&lt;/button&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;label for="easing-select"&gt;Choisir une fonction de transition :&lt;/label&gt;
-    &lt;select id="easing-select"&gt;
-      &lt;option selected&gt;linear&lt;/option&gt;
-      &lt;option&gt;ease&lt;/option&gt;
-      &lt;option&gt;ease-in&lt;/option&gt;
-      &lt;option&gt;ease-in-out&lt;/option&gt;
-      &lt;option&gt;ease-out&lt;/option&gt;
-      &lt;option&gt;cubic-bezier(0.1, -0.6, 0.2, 0)&lt;/option&gt;
-      &lt;option&gt;cubic-bezier(0, 1.1, 0.8, 4)&lt;/option&gt;
-      &lt;option&gt;steps(5, end)&lt;/option&gt;
-      &lt;option&gt;steps(3, start)&lt;/option&gt;
-      &lt;option&gt;steps(4)&lt;/option&gt;
-    &lt;/select&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</pre>
+##### step-end
 
-<h4 id="CSS">CSS</h4>
+![Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du premier point et reste sur l'axe des abscisses.](steps-1-end.png) L'interpolation reste dans son état initial jusqu'à la fin où elle saute directement à l'état final. Ce mot-clé représente la fonction de transition `steps(1, jump-end)` ou `steps(1, end)`.
 
-<pre class="brush: css">body &gt; div {
+## Exemples
+
+### Comparaison des fonctions de transition
+
+Dans cet exemple, on crée une animation qui peut être démarrée ou stoppée à l'aide du bouton fourni et un menu est affiché pour choisir la fonction de transition à utiliser : différents mots-clés sont disponibles ainsi que des exemples utilisant `cubic-bezier()` et `steps()`. L'idée est de fournir un outil de comparaison simple entre ces fonctions.
+
+#### HTML
+
+```html
+<div>
+  <div></div>
+</div>
+<ul>
+  <li>
+    <button class="animation-button">Démarrer l'animation</button>
+  </li>
+  <li>
+    <label for="easing-select">Choisir une fonction de transition :</label>
+    <select id="easing-select">
+      <option selected>linear</option>
+      <option>ease</option>
+      <option>ease-in</option>
+      <option>ease-in-out</option>
+      <option>ease-out</option>
+      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
+      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
+      <option>steps(5, end)</option>
+      <option>steps(3, start)</option>
+      <option>steps(4)</option>
+    </select>
+  </li>
+</ul>
+```
+
+#### CSS
+
+```css
+body > div {
   position: relative;
   height: 100px;
 }
 
-div &gt; div {
+div > div {
   position: absolute;
   width: 50px;
   height: 50px;
@@ -208,15 +225,17 @@ li {
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
-}</pre>
+}
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">const selectElem = document.querySelector("select");
+```js
+const selectElem = document.querySelector("select");
 const startBtn = document.querySelector("button");
-const divElem = document.querySelector("div &gt; div");
+const divElem = document.querySelector("div > div");
 
-startBtn.addEventListener("click", () =&gt; {
+startBtn.addEventListener("click", () => {
   if(startBtn.textContent === "Démarrer l'animation") {
     divElem.style.animationName = "move-right";
     startBtn.textContent = "Arrêter l'animation";
@@ -227,22 +246,24 @@ startBtn.addEventListener("click", () =&gt; {
   }
 });
 
-selectElem.addEventListener("change", () =&gt; {
+selectElem.addEventListener("change", () => {
   divElem.style.animationTimingFunction = selectElem.value;
-});</pre>
+});
+```
 
-<h4 id="résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('comparaison_des_fonctions_de_transition', '100%', 300)}}</p>
+{{EmbedLiveSample('comparaison_des_fonctions_de_transition', '100%', 300)}}
 
-<h3 id="exemples_avec_cubic-bezier">Exemples avec cubic-bezier()</h3>
+### Exemples avec cubic-bezier()
 
-<p>Ces courbes de Bézier cubiques sont valides pour être utilisées en CSS :</p>
+Ces courbes de Bézier cubiques sont valides pour être utilisées en CSS :
 
-<pre class="brush: css">/* La courbe de Bézier canonique avec quatre nombres dans l'intervalle [0,1]. */
+```css
+/* La courbe de Bézier canonique avec quatre nombres dans l'intervalle [0,1]. */
 cubic-bezier(0.1, 0.7, 1.0, 0.1)
 
-/* On peut aussi utiliser des valeurs entières (&lt;integer&gt;) car ce sont des nombres. */
+/* On peut aussi utiliser des valeurs entières (<integer>) car ce sont des nombres. */
 cubic-bezier(0, 0, 1, 1)
 
 /* Les valeurs négatives pour les ordonnées sont valides et créent un effet de rebond.*/
@@ -250,11 +271,11 @@ cubic-bezier(0.1, -0.6, 0.2, 0)
 
 /* Les valeurs supérieures à 1.0 pour les ordonnées sont aussi valides. */
 cubic-bezier(0, 1.1, 0.8, 4)
-</pre>
+```
 
-<p>Ces courbes de Bézier cubiques sont invalides en CSS :</p>
+Ces courbes de Bézier cubiques sont invalides en CSS :
 
-<pre class="brush: css example-bad">
+```css example-bad
 /* Bien que les valeurs animées puissent être des couleurs,
    les courbes de Bézier ne fonctionnent qu'avec des ratios numériques.*/
 cubic-bezier(0.1, red, 1.0, green)
@@ -269,13 +290,14 @@ cubic-bezier(0.3, 2.1)
 
 /* Les abscisses doivent être dans l'intervalle [0, 1], sinon la courbe
    ne représente pas une fonction du temps. */
-cubic-bezier(-1.9, 0.3, -0.2, 2.1) </pre>
+cubic-bezier(-1.9, 0.3, -0.2, 2.1)
+```
 
-<h3 id="exemples_avec_steps">Exemples avec steps()</h3>
+### Exemples avec steps()
 
-<p>Ces fonctions de transition sont valides :</p>
+Ces fonctions de transition sont valides :
 
-<pre class="brush: css">
+```css
 /* Il y a 5 étapes, la dernière se produit juste avant
    la fin de l'animation. */
 steps(5, end)
@@ -286,15 +308,13 @@ steps(2, start)
 
 /* Le deuxième paramètre est optionnel. */
 steps(2)
-</pre>
+```
 
-<div class="notecard note">
-  <p><strong>Note :</strong> Si l'animation contient plusieurs arrêts, les marches décrites dans la fonction <code>steps()</code> s'appliqueront à chaque section. Ainsi, pour une animation avec trois segments et <code>steps(2)</code>, on aura au total 6 étapes, 2 pour chaque segment.</p>
-</div>
+> **Note :** Si l'animation contient plusieurs arrêts, les marches décrites dans la fonction `steps()` s'appliqueront à chaque section. Ainsi, pour une animation avec trois segments et `steps(2)`, on aura au total 6 étapes, 2 pour chaque segment.
 
-<p>Les fonctions de transitions qui suivent sont invalides :</p>
+Les fonctions de transitions qui suivent sont invalides :
 
-<pre class="brush: css example-bad">
+```css example-bad
 /* Le premier paramètre doit être un entier et ne peut pas être
    une valeur décimale (même si celle-ci est égale à une valeur entière). */
 steps(2.0, jump-end)
@@ -303,35 +323,21 @@ steps(2.0, jump-end)
 steps(-3, start)
 
 /* Il doit y avoir au moins une marche.*/
-steps(0, jump-none)</pre>
+steps(0, jump-none)
+```
 
-<h2 id="spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Easing 1', '#typedef-easing-function', '&lt;easing-function&gt;')}}</td>
-   <td>{{Spec2('CSS Easing 1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS Easing 1', '#typedef-easing-function', '&lt;easing-function&gt;')}} | {{Spec2('CSS Easing 1')}} | Définition initiale. |
 
-<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.easing-function", 2)}}</p>
+{{Compat("css.types.easing-function", 2)}}
 
-<h2 id="voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations">CSS Animations</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li>
- <li><a href="https://cubic-bezier.com/">cubic-bezier</a></li>
-</ul>
+- [CSS Animations](/fr/docs/Web/CSS/CSS_Animations)
+- [CSS Transitions](/fr/docs/Web/CSS/CSS_Transitions)
+- [cubic-bezier](https://cubic-bezier.com/)
diff --git a/files/fr/web/css/element()/index.md b/files/fr/web/css/element()/index.md
index a0f0f92cc2..0c7ad0851e 100644
--- a/files/fr/web/css/element()/index.md
+++ b/files/fr/web/css/element()/index.md
@@ -7,32 +7,31 @@ tags:
   - Reference
 translation_of: Web/CSS/element()
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La fonction <strong><code>element()</code></strong> définit une valeur {{cssxref("&lt;image&gt;")}} générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour.</p>
+La fonction **`element()`** définit une valeur {{cssxref("&lt;image&gt;")}} générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour.
 
-<p>Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan.</p>
+Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan.
 
-<p>Pour les navigateurs basés sur Gecko, on peut utiliser la méthode {{domxref("document.mozSetImageElement()")}} pour modifier l'élément utilisé comme arrière-plan pour un <code>background</code> CSS donné.</p>
+Pour les navigateurs basés sur Gecko, on peut utiliser la méthode {{domxref("document.mozSetImageElement()")}} pour modifier l'élément utilisé comme arrière-plan pour un `background` CSS donné.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">element(<var>id</var>)</pre>
+    element(id)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><strong><code>id</code></strong></dt>
- <dd>L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé.</dd>
-</dl>
+- **`id`**
+  - : L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Un_premier_exemple_réaliste">Un premier exemple réaliste</h3>
+### Un premier exemple réaliste
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   width: 400px;
   height: 400px;
   background: -moz-element(#monArrierePlan) no-repeat;
@@ -54,38 +53,41 @@ translation_of: Web/CSS/element()
   overflow: hidden;
   height: 0;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;
-  &lt;p&gt;
+```html
+<div class="exemple">
+  <p>
     Cet élément utilise l'élément
     #monArrierePlan comme image
     de fond !
-  &lt;/p&gt;
-&lt;/div&gt;
+  </p>
+</div>
 
-&lt;div class="cache"&gt;
-  &lt;div id="monArrierePlan"&gt;
-    &lt;p class="paragraphe"&gt;
+<div class="cache">
+  <div id="monArrierePlan">
+    <p class="paragraphe">
       Et voici un texte inscrit sur
       l'arrière-plan.
-    &lt;/p&gt;
-  &lt;div&gt;
-&lt;div&gt;</pre>
+    </p>
+  <div>
+<div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>Pour les navigateurs qui prennent en charge <code>element</code>, on peut ici voir un arrière-plan généré avec un paragraphe HTML.</p>
+Pour les navigateurs qui prennent en charge `element`, on peut ici voir un arrière-plan généré avec un paragraphe HTML.
 
-<p>{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}}</p>
+{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}}
 
-<h3 id="Un_second_exemple_plus_méchant">Un second exemple plus méchant</h3>
+### Un second exemple plus méchant
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   width: 400px;
   height: 100px;
   background: -moz-element(#monArrierePlan);
@@ -94,54 +96,42 @@ translation_of: Web/CSS/element()
 .cache {
   overflow: hidden;
   height: 0;
-} </pre>
+}
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;&lt;/div&gt;
+```html
+<div class="exemple"></div>
 
-&lt;div class="cache"&gt;
-  &lt;button id="monArrierePlan" type="button"&gt;
+<div class="cache">
+  <button id="monArrierePlan" type="button">
     Méchant bouton
-  &lt;/button&gt;
-&lt;/div&gt;</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td>Reporté pour CSS4</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.image.element")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("document.mozSetImageElement()")}}</li>
- <li>{{cssxref("_image", "image()")}}</li>
- <li>{{cssxref("image-set", "image-set()")}}</li>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{cssxref("&lt;gradient&gt;")}}</li>
- <li>{{cssxref("element()")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
- <li>{{domxref("document.mozSetImageElement()")}}</li>
-</ul>
+  </button>
+</div>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}}
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                             | Commentaires      |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------- |
+| {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}} | {{Spec2('CSS4 Images')}} | Reporté pour CSS4 |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.image.element")}}
+
+## Voir aussi
+
+- {{domxref("document.mozSetImageElement()")}}
+- {{cssxref("_image", "image()")}}
+- {{cssxref("image-set", "image-set()")}}
+- {{cssxref("&lt;image&gt;")}}
+- {{cssxref("&lt;gradient&gt;")}}
+- {{cssxref("element()")}}
+- {{cssxref("cross-fade")}}
+- {{domxref("document.mozSetImageElement()")}}
diff --git a/files/fr/web/css/empty-cells/index.md b/files/fr/web/css/empty-cells/index.md
index dc25ad57ab..a94bde5b3e 100644
--- a/files/fr/web/css/empty-cells/index.md
+++ b/files/fr/web/css/empty-cells/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/empty-cells
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>empty-cells</code></strong> définit la façon dont l'agent utilisateur doit afficher les bordures et l'arrière-plan des cellules d'un tableau ({{HTMLElement("table")}}) qui n'ont aucun contenu visible.</p>
+La propriété **`empty-cells`** définit la façon dont l'agent utilisateur doit afficher les bordures et l'arrière-plan des cellules d'un tableau ({{HTMLElement("table")}}) qui n'ont aucun contenu visible.
 
-<div>{{EmbedInteractiveExample("pages/css/empty-cells.html")}}</div>
+{{EmbedInteractiveExample("pages/css/empty-cells.html")}}
 
-<p>Cette propriété est uniquement appliquée lorsque <code>border-collapse</code> vaut <code>separate</code>.</p>
+Cette propriété est uniquement appliquée lorsque `border-collapse` vaut `separate`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec mot-clé */
+```css
+/* Valeurs avec mot-clé */
 empty-cells: show;
 empty-cells: hide;
 
@@ -25,52 +26,52 @@ empty-cells: hide;
 empty-cells: inherit;
 empty-cells: initial;
 empty-cells: unset;
-</pre>
+```
 
-<p>Cette propriété se définit avec l'un des mots-clés suivants.</p>
+Cette propriété se définit avec l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>show</code></dt>
- <dd>Un mot-clé indiquant que les bordures et l'arrière-plan doivent être dessinés comme pour les cellules normales.</dd>
- <dt><code>hide</code></dt>
- <dd>Un mot-clé indiquant qu'aucune bordure ou arrière-plan ne doit être dessiné.</dd>
-</dl>
+- `show`
+  - : Un mot-clé indiquant que les bordures et l'arrière-plan doivent être dessinés comme pour les cellules normales.
+- `hide`
+  - : Un mot-clé indiquant qu'aucune bordure ou arrière-plan ne doit être dessiné.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table class="table_1"&gt;
-    &lt;tr&gt;
-        &lt;td&gt;Jean&lt;/td&gt;
-        &lt;td&gt;Biche&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-        &lt;td&gt;Alice&lt;/td&gt;
-        &lt;td&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-&lt;/table&gt;
-&lt;table class="table_2"&gt;
-    &lt;tr&gt;
-        &lt;td&gt;Jean&lt;/td&gt;
-        &lt;td&gt;Biche&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-        &lt;td&gt;Alice&lt;/td&gt;
-        &lt;td&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-&lt;/table&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">.table_1 {
+## Exemples
+
+### HTML
+
+```html
+<table class="table_1">
+    <tr>
+        <td>Jean</td>
+        <td>Biche</td>
+    </tr>
+    <tr>
+        <td>Alice</td>
+        <td></td>
+    </tr>
+</table>
+<table class="table_2">
+    <tr>
+        <td>Jean</td>
+        <td>Biche</td>
+    </tr>
+    <tr>
+        <td>Alice</td>
+        <td></td>
+    </tr>
+</table>
+```
+
+### CSS
+
+```css
+.table_1 {
   empty-cells: show;
 }
 .table_2 {
@@ -81,33 +82,20 @@ td, th {
   border: 1px solid #999;
   padding: 0.5rem;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '100%', '200')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '100%', '200')}}
+
+## Spécifications
+
+| Spécification                                                                        | État                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}} | {{Spec2('CSS2.1')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.empty-cells")}}</p>
+{{Compat("css.properties.empty-cells")}}
diff --git a/files/fr/web/css/env()/index.md b/files/fr/web/css/env()/index.md
index d155dcdd77..2cdb018289 100644
--- a/files/fr/web/css/env()/index.md
+++ b/files/fr/web/css/env()/index.md
@@ -10,29 +10,30 @@ tags:
   - env()
 translation_of: Web/CSS/env()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <strong><code>env()</code></strong> peut être utilisée afin d'insérer la valeur d'une variable d'environnement dans une règle. Les variables d'environnement sont globales pour un document donné, à la différence des <a href="/fr/docs/Web/CSS/--*">propriétés personnalisées</a>. Les variables d'environnement sont définies au niveau de l'agent utilisateur et non par l'utilisateur/le concepteur.</p>
+La fonction CSS **`env()`** peut être utilisée afin d'insérer la valeur d'une variable d'environnement dans une règle. Les variables d'environnement sont globales pour un document donné, à la différence des [propriétés personnalisées](/fr/docs/Web/CSS/--*). Les variables d'environnement sont définies au niveau de l'agent utilisateur et non par l'utilisateur/le concepteur.
 
-<p><code>env()</code> peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction <code><a href="/fr/docs/Web/CSS/var()">var()</a></code>.</p>
+`env()` peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction [`var()`](</fr/docs/Web/CSS/var()>).
 
-<pre class="brush: css">body {
+```css
+body {
   padding:
     env(safe-area-inset-top, 20px)
     env(safe-area-inset-right, 20px)
     env(safe-area-inset-bottom, 20px)
     env(safe-area-inset-left, 20px);
-}</pre>
+}
+```
 
-<p>La fonction <code>env()</code> peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une <a href="/fr/docs/Web/CSS/@media">requête média</a>) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs.</p>
+La fonction `env()` peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une [requête média](/fr/docs/Web/CSS/@media)) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs.
 
-<div class="note">
-<p><strong>Note :</strong> Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (<em>viewport</em>) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils.</p>
-</div>
+> **Note :** Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (_viewport_) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Utilisation des quatre zones sûres */
+```css
+/* Utilisation des quatre zones sûres */
 env(safe-area-inset-top)
 env(safe-area-inset-right)
 env(safe-area-inset-bottom)
@@ -43,41 +44,40 @@ env(safe-area-inset-top, 20px);
 env(safe-area-inset-right, 1em);
 env(safe-area-inset-bottom, 0.5vh);
 env(safe-area-inset-left, 1.4rem);
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>safe-area-inset-top</code>, <code>safe-area-inset-right</code>, <code>safe-area-inset-bottom</code>, <code>safe-area-inset-left</code></dt>
- <dd>Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (<em>viewport</em>) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage.</dd>
-</dl>
+- `safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left`
+  - : Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (_viewport_) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage.
 
-<div class="note">
-<p><strong>Note :</strong> À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse.</p>
-</div>
+> **Note :** À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<p>Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonctionnelle <code>env()</code> afin de fournir une valeur de recours lorsque la variable d'environnement n'est pas disponible.</p>
+Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonctionnelle `env()` afin de fournir une valeur de recours lorsque la variable d'environnement n'est pas disponible.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  Si la fonction &lt;code&gt;env()&lt;/code&gt; est prise en charge dans votre
+```html
+<p>
+  Si la fonction <code>env()</code> est prise en charge dans votre
   navigateur, le texte de ce paragraphe aura 50 pixels de padding avec
   la bordure gauche mais pas la droite / basse et haute.
-  En effet, le code CSS associé est équivalent à &lt;code&gt;padding: 0 0 0 50px&lt;/code&gt;
+  En effet, le code CSS associé est équivalent à <code>padding: 0 0 0 50px</code>
   car les noms des propriétés CSS associées aux agents utilisateurs sont
   sensibles à la casse (contrairement aux autres propriétés).
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 300px;
   border: 2px solid red;
   padding:
@@ -85,15 +85,17 @@ env(safe-area-inset-left, 1.4rem);
     env(safe-area-inset-right, 50px)
     env(safe-area-inset-bottom, 50px)
     env(SAFE-AREA-INSET-LEFT, 50px);
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h3 id="Exemples_de_valeurs">Exemples de valeurs</h3>
+### Exemples de valeurs
 
-<pre class="brush: css">/* zéro pour les agents utilisateurs rectangulaires */
+```css
+/* zéro pour les agents utilisateurs rectangulaires */
 padding: env(safe-area-inset-bottom, 50px);
 
 /* 50px car les propriétés de l'agent sont sensibles à la casse */
@@ -106,43 +108,26 @@ padding: env(x, 50px 20px);
 /* ignorée car '50px, 20px' n'est pas une valeur de padding correcte
    et que x n'est pas une variable d'environnement */
 padding: env(x, 50px, 20px);
-</pre>
-
-<p>Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}</td>
-   <td>{{Spec2("CSS3 Environment Variables")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.custom-property.env")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{CSSxRef("var", "var(…)")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Variables">Les propriétés personnalisées et la cascade</a></li>
- <li><a href="/fr/docs/Web/CSS/--*">Les propriétés personnalisées (--*)</a></li>
- <li><a href="/fr/docs/Web/CSS/Les_variables_CSS">Utiliser les propriétés CSS personnalisées</a></li>
- <li>{{CSSxRef("@viewport/viewport-fit", "viewport-fit (@viewport)")}}</li>
-</ul>
+```
+
+Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide.
+
+> **Note :** Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}.
+
+## Spécifications
+
+| Spécification                                                                                | État                                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Environment Variables", "#env-function", "env()")}} | {{Spec2("CSS3 Environment Variables")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.custom-property.env")}}
+
+## Voir aussi
+
+- {{CSSxRef("var", "var(…)")}}
+- [Les propriétés personnalisées et la cascade](/fr/docs/Web/CSS/CSS_Variables)
+- [Les propriétés personnalisées (--\*)](/fr/docs/Web/CSS/--*)
+- [Utiliser les propriétés CSS personnalisées](/fr/docs/Web/CSS/Les_variables_CSS)
+- {{CSSxRef("@viewport/viewport-fit", "viewport-fit (@viewport)")}}
diff --git a/files/fr/web/css/filter-function/blur()/index.md b/files/fr/web/css/filter-function/blur()/index.md
index c181809d64..f84ab4ee0c 100644
--- a/files/fr/web/css/filter-function/blur()/index.md
+++ b/files/fr/web/css/filter-function/blur()/index.md
@@ -8,31 +8,29 @@ tags:
   - Reference
 translation_of: Web/CSS/filter-function/blur()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <strong><code>blur()</code></strong> permet d'appliquer <a href="https://en.wikipedia.org/wiki/Gaussian_blur">une flou gaussien</a> sur l'image d'entrée. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+La fonction CSS **`blur()`** permet d'appliquer [une flou gaussien](https://en.wikipedia.org/wiki/Gaussian_blur) sur l'image d'entrée. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-blur.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">blur(<em>rayon</em>)</pre>
+    blur(rayon)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>rayon</code></dt>
- <dd>Le rayon d'application du flou, défini par une longueur CSS ({{cssxref("&lt;length&gt;")}}). Cela définit l'écart-type de la fonction gaussienne appliquée (c'est-à-dire le nombre de pixels qui se mélangeront). Ainsi, plus la valeur est grande, plus le flou sera prononcé. Si on utilise la longueur nulle <code>0</code>, l'image ne sera pas modifiée. La valeur utilisée par défaut lors d'une interpolation est <code>0</code>.</dd>
-</dl>
+- `rayon`
+  - : Le rayon d'application du flou, défini par une longueur CSS ({{cssxref("&lt;length&gt;")}}). Cela définit l'écart-type de la fonction gaussienne appliquée (c'est-à-dire le nombre de pixels qui se mélangeront). Ainsi, plus la valeur est grande, plus le flou sera prononcé. Si on utilise la longueur nulle `0`, l'image ne sera pas modifiée. La valeur utilisée par défaut lors d'une interpolation est `0`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">blur(0);        /* Aucun effet */
+```css
+blur(0);        /* Aucun effet */
 blur(8px);      /* Un flou avec un rayon de 8px */
-blur(1.17rem);  /* Un flou avec un rayon de 1.17rem */</pre>
+blur(1.17rem);  /* Un flou avec un rayon de 1.17rem */
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
diff --git a/files/fr/web/css/filter-function/brightness()/index.md b/files/fr/web/css/filter-function/brightness()/index.md
index 3d3b983c25..340e04ede2 100644
--- a/files/fr/web/css/filter-function/brightness()/index.md
+++ b/files/fr/web/css/filter-function/brightness()/index.md
@@ -8,32 +8,30 @@ tags:
   - Reference
 translation_of: Web/CSS/filter-function/brightness()
 ---
-<div>{{cssref}}</div>
+{{cssref}}
 
-<p>La fonction CSS <strong><code>brightness()</code></strong> applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+La fonction CSS **`brightness()`** applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-brightness.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">brightness(<em>multiplicateur</em>)</pre>
+    brightness(multiplicateur)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>multiplicateur</code></dt>
- <dd>L'amplification de la clarté de l'image, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à <code>100%</code> assombrira l'image alors qu'une valeur supérieure à <code>100%</code> la rendra plus claire. Une valeur de <code>0%</code> permettra d'obtenir une image complètement noire et une valeur de <code>100%</code> laissera l'image inchangée. La valeur par défaut utilisée lors de l'interpolation est <code>1</code>.</dd>
-</dl>
+- `multiplicateur`
+  - : L'amplification de la clarté de l'image, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à `100%` assombrira l'image alors qu'une valeur supérieure à `100%` la rendra plus claire. Une valeur de `0%` permettra d'obtenir une image complètement noire et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée lors de l'interpolation est `1`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">brightness(0%)   /* Complètement noir */
+```css
+brightness(0%)   /* Complètement noir */
 brightness(0.4)  /* 40% de la clarté */
 brightness(1)    /* Aucun effet */
-brightness(200%) /* Double la clarté */</pre>
+brightness(200%) /* Double la clarté */
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
diff --git a/files/fr/web/css/filter-function/contrast()/index.md b/files/fr/web/css/filter-function/contrast()/index.md
index 84c66f25d3..820534ce48 100644
--- a/files/fr/web/css/filter-function/contrast()/index.md
+++ b/files/fr/web/css/filter-function/contrast()/index.md
@@ -8,32 +8,30 @@ tags:
   - Reference
 translation_of: Web/CSS/filter-function/contrast()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <code><strong>contrast()</strong></code> permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+La fonction CSS **`contrast()`** permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-contrast.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">contrast(<em>multiplicateur</em>)</pre>
+    contrast(multiplicateur)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>multiplicateur</code></dt>
- <dd>La modification de contraste à appliquer à l'image, exprimée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à <code>100%</code> réduira le contraste et une valeur supérieure à <code>100%</code> accentuera le contraste. Une valeur de <code>0%</code> permettra d'obtenir une image complètement grise et une valeur de <code>100%</code> laissera l'image inchangée. La valeur par défaut utilisée pour les interpolations est <code>1</code>.</dd>
-</dl>
+- `multiplicateur`
+  - : La modification de contraste à appliquer à l'image, exprimée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à `100%` réduira le contraste et une valeur supérieure à `100%` accentuera le contraste. Une valeur de `0%` permettra d'obtenir une image complètement grise et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée pour les interpolations est `1`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">contrast(0);     /* Completely gray */
+```css
+contrast(0);     /* Completely gray */
 contrast(65%);   /* 65% contrast */
 contrast(1);     /* No effect */
-contrast(200%);  /* Double contrast */</pre>
+contrast(200%);  /* Double contrast */
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
diff --git a/files/fr/web/css/filter-function/drop-shadow()/index.md b/files/fr/web/css/filter-function/drop-shadow()/index.md
index a39ea431ef..4e50f4fc99 100644
--- a/files/fr/web/css/filter-function/drop-shadow()/index.md
+++ b/files/fr/web/css/filter-function/drop-shadow()/index.md
@@ -8,53 +8,50 @@ tags:
   - Type
 translation_of: Web/CSS/filter-function/drop-shadow()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <strong><code>drop-shadow()</code></strong> permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+La fonction CSS **`drop-shadow()`** permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
 
-<p>En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné dans une couleur donnée et fusionné sous l'image.</p>
+En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné dans une couleur donnée et fusionné sous l'image.
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonction s'apparente à la propriété {{cssxref("box-shadow")}}. La propriété <code>box-shadow</code> permet de créer une ombre rectangulaire sous <strong>la boîte entière</strong> d'un élément. En revanche, la fonction <code>drop-shadow()</code> permet de créer un ombre qui épouse la forme (le canal alpha) de <strong>l'image même</strong>.</p>
-</div>
+> **Note :** Cette fonction s'apparente à la propriété {{cssxref("box-shadow")}}. La propriété `box-shadow` permet de créer une ombre rectangulaire sous **la boîte entière** d'un élément. En revanche, la fonction `drop-shadow()` permet de créer un ombre qui épouse la forme (le canal alpha) de **l'image même**.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">drop-shadow(<em>décalage-x</em>, <em>décalage-y</em>, <em>rayon-flou</em>, <em>rayon-étalement</em>, <em>couleur</em>)</pre>
+    drop-shadow(décalage-x, décalage-y, rayon-flou, rayon-étalement, couleur)
 
-<p>La fonction <code>drop-shadow()</code> accepte un paramètre de type <code>&lt;shadow&gt;</code> (défini avec la propriété {{cssxref("box-shadow")}}), mais où le mot-clé <code>inset</code> n'est pas autorisé.</p>
+La fonction `drop-shadow()` accepte un paramètre de type `<shadow>` (défini avec la propriété {{cssxref("box-shadow")}}), mais où le mot-clé `inset` n'est pas autorisé.
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>décalage-x</code> <code>décalage-y</code></dt>
- <dd>Deux longueurs ({{cssxref("&lt;length&gt;")}}) qui déterminent le décalage de l'ombre sous l'image. <code>décalage-x</code> indique la distance horizontale (les valeurs négatives décalent l'ombre vers la gauche et les valeurs positives la décalent vers la droite). <code>décalage-y</code> indique la distance verticale (les valeurs négatives décalent l'ombre vers le haut et les valeurs positives vers le bas). Si les deux valeurs sont égales à <code>0</code>, l'ombre est directement placée sous l'image.</dd>
- <dt><code>rayon-flou</code> {{optional_inline}}</dt>
- <dd>Une longueur ({{cssxref("&lt;length&gt;")}}) qui représente le rayon du flou. Plus la valeur est élevée, plus l'ombre sera grande et floue. La valeur par défaut est <code>0</code> ce qui correspond à un contour net, sans flou. Il n'est pas possible d'utiliser des valeurs négatives</dd>
- <dt><code>rayon-étalement</code>{{optional_inline}}</dt>
- <dd>Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("&lt;length&gt;")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est <code>0</code> : l'ombre a alors la même taille que l'image.
- <div class="warning">
-   <p><strong>Attention :</strong> Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.</p></div>
- </dd>
- <dt><code>couleur</code>{{optional_inline}}</dt>
- <dd>La couleur de l'ombre, indiquée sous la forme d'une valeur {{cssxref("&lt;color&gt;")}}. La valeur par défaut dépend du navigateur. Pour Firefox et Internet Explorer, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée alors que les navigateurs basés sur WebKit utiliseront une ombre transparente par défaut.</dd>
-</dl>
+- `décalage-x` `décalage-y`
+  - : Deux longueurs ({{cssxref("&lt;length&gt;")}}) qui déterminent le décalage de l'ombre sous l'image. `décalage-x` indique la distance horizontale (les valeurs négatives décalent l'ombre vers la gauche et les valeurs positives la décalent vers la droite). `décalage-y` indique la distance verticale (les valeurs négatives décalent l'ombre vers le haut et les valeurs positives vers le bas). Si les deux valeurs sont égales à `0`, l'ombre est directement placée sous l'image.
+- `rayon-flou` {{optional_inline}}
+  - : Une longueur ({{cssxref("&lt;length&gt;")}}) qui représente le rayon du flou. Plus la valeur est élevée, plus l'ombre sera grande et floue. La valeur par défaut est `0` ce qui correspond à un contour net, sans flou. Il n'est pas possible d'utiliser des valeurs négatives
+- `rayon-étalement`{{optional_inline}}
 
-<h2 id="Exemples">Exemples</h2>
+  - : Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("&lt;length&gt;")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est `0` : l'ombre a alors la même taille que l'image.
 
-<pre class="brush: css">/* Une ombre noire avec un flou de 10px de rayon. */
+    > **Attention :** Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.
+
+- `couleur`{{optional_inline}}
+  - : La couleur de l'ombre, indiquée sous la forme d'une valeur {{cssxref("&lt;color&gt;")}}. La valeur par défaut dépend du navigateur. Pour Firefox et Internet Explorer, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée alors que les navigateurs basés sur WebKit utiliseront une ombre transparente par défaut.
+
+## Exemples
+
+```css
+/* Une ombre noire avec un flou de 10px de rayon. */
 drop-shadow(16px 16px 10px black)
 
 /* Une ombre rouge avec un flou de 1rem de rayon et de .3rem d'étalement */
 /* Attention, à l'heure actuelle, ce type d'ombre n'est pas pris en charge */
 /* par l'ensemble des navigateurs */
-drop-shadow(.5rem .5rem 1rem .3rem #e23)</pre>
+drop-shadow(.5rem .5rem 1rem .3rem #e23)
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>La propriété CSS {{cssxref("box-shadow")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
+- La propriété CSS {{cssxref("box-shadow")}}
diff --git a/files/fr/web/css/filter-function/grayscale()/index.md b/files/fr/web/css/filter-function/grayscale()/index.md
index 90c6abfb8e..37bdd67c93 100644
--- a/files/fr/web/css/filter-function/grayscale()/index.md
+++ b/files/fr/web/css/filter-function/grayscale()/index.md
@@ -8,31 +8,29 @@ tags:
   - Reference
 translation_of: Web/CSS/filter-function/grayscale()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <code><strong>grayscale()</strong></code> convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+La fonction CSS **`grayscale()`** convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">grayscale(<em>multiplicateur</em>)</pre>
+    grayscale(multiplicateur)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>multiplicateur</code></dt>
- <dd>L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Avec une valeur égale à <code>100%</code>, l'image obtenue sera complètement en niveaux de gris. Avec une valeur égale à <code>0%</code>, l'image source restera inchangée. Les valeurs comprises entre <code>0%</code> et <code>100%</code> auront un effet intermédiaire (progression linéaire). Dans le cas d'une interpolation, la valeur par défaut utilisée est <code>0</code>.</dd>
-</dl>
+- `multiplicateur`
+  - : L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Avec une valeur égale à `100%`, l'image obtenue sera complètement en niveaux de gris. Avec une valeur égale à `0%`, l'image source restera inchangée. Les valeurs comprises entre `0%` et `100%` auront un effet intermédiaire (progression linéaire). Dans le cas d'une interpolation, la valeur par défaut utilisée est `0`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">grayscale(0)     /* Aucun effet */
+```css
+grayscale(0)     /* Aucun effet */
 grayscale(.7)    /* Converti à 70% en niveaux de gris */
-grayscale(100%)  /* Uniquement en niveaux de gris */</pre>
+grayscale(100%)  /* Uniquement en niveaux de gris */
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
diff --git a/files/fr/web/css/filter-function/hue-rotate()/index.md b/files/fr/web/css/filter-function/hue-rotate()/index.md
index b6d4eb4938..c212084dd4 100644
--- a/files/fr/web/css/filter-function/hue-rotate()/index.md
+++ b/files/fr/web/css/filter-function/hue-rotate()/index.md
@@ -8,34 +8,31 @@ tags:
   - Reference
 translation_of: Web/CSS/filter-function/hue-rotate()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <strong><code>hue-rotate()</code></strong> permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+La fonction CSS **`hue-rotate()`** permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.
 
-<div>{ {EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}</div>
+{ {EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">hue-rotate(<em>angle</em>)</pre>
+    hue-rotate(angle)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>angle</code></dt>
- <dd>L'angle de rotation sur le cercle des couleurs, exprimé avec une valeur de type {{cssxref("&lt;angle&gt;")}}. Une valeur de <code>0deg</code> laissera l'image inchangée. La valeur utilisée par défaut pour une interpolation sera <code>0</code>. Bien qu'il n'y ait pas de valeur maximale, la valeur de l'angle est toujours ramenée entre <code>360deg</code> et <code>0deg</code>.</dd>
-</dl>
+- `angle`
+  - : L'angle de rotation sur le cercle des couleurs, exprimé avec une valeur de type {{cssxref("&lt;angle&gt;")}}. Une valeur de `0deg` laissera l'image inchangée. La valeur utilisée par défaut pour une interpolation sera `0`. Bien qu'il n'y ait pas de valeur maximale, la valeur de l'angle est toujours ramenée entre `360deg` et `0deg`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">hue-rotate(-90deg);  /* Correspond à une rotation de 270deg */
+```css
+hue-rotate(-90deg);  /* Correspond à une rotation de 270deg */
 hue-rotate(0deg);    /* Sans effet */
 hue-rotate(90deg);   /* Rotation de 90deg */
 hue-rotate(.5turn);  /* Rotation de 180deg */
 hue-rotate(405deg);  /* Correspond à une rotation de 45deg */
-</pre>
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
diff --git a/files/fr/web/css/filter-function/index.md b/files/fr/web/css/filter-function/index.md
index 23761cc504..83e3e6df0e 100644
--- a/files/fr/web/css/filter-function/index.md
+++ b/files/fr/web/css/filter-function/index.md
@@ -7,63 +7,44 @@ tags:
   - Type
 translation_of: Web/CSS/filter-function
 ---
-<div>{{CSSRef}}</div>
-
-<p>Le type de donnée <code><strong>&lt;filter-function&gt;</strong></code> représente un effet graphique qui peut modifier l'apparence d'une image. Il est notamment utilisé avec les propriétés {{cssxref("filter")}} et {{cssxref("backdrop-filter")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Une valeur de type <code>&lt;filter-function&gt;</code> se construit avec l'une des fonctions listées ci-après. Chaque fonction utilise un argument et si celui-ci est invalide, aucun filtre n'est appliqué.</p>
-
-<dl>
- <dt>{{cssxref("filter-function/blur", "blur()")}}</dt>
- <dd>Ajoute un flou sur l'image.</dd>
- <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt>
- <dd>Rend l'image plus claire ou plus sombre.</dd>
- <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt>
- <dd>Augmente ou diminue le contraste de l'image.</dd>
- <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt>
- <dd>Applique une ombre portée derrière l'image.</dd>
- <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt>
- <dd>Convertit l'image en niveaux de gris.</dd>
- <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​​​​​​​​</dt>
- <dd>Modifie la teinte globale de l'image.</dd>
- <dt>{{cssxref("filter-function/invert", "invert()")}}</dt>
- <dd>Inverse les couleurs de l'image.</dd>
- <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt>
- <dd>Rend l'image transparente.</dd>
- <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt>
- <dd>Sursature ou désature l'image.</dd>
- <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt>
- <dd>Convertit l'image en sépia.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;')}}</td>
-   <td>{{Spec2('Filters 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés qui utilisent ce type de donnée :
-  <ul>
-   <li>{{cssxref("filter")}}</li>
-   <li>{{cssxref("backdrop-filter")}}</li>
-  </ul>
- </li>
-</ul>
+{{CSSRef}}
+
+Le type de donnée **`<filter-function>`** représente un effet graphique qui peut modifier l'apparence d'une image. Il est notamment utilisé avec les propriétés {{cssxref("filter")}} et {{cssxref("backdrop-filter")}}.
+
+## Syntaxe
+
+Une valeur de type `<filter-function>` se construit avec l'une des fonctions listées ci-après. Chaque fonction utilise un argument et si celui-ci est invalide, aucun filtre n'est appliqué.
+
+- {{cssxref("filter-function/blur", "blur()")}}
+  - : Ajoute un flou sur l'image.
+- {{cssxref("filter-function/brightness", "brightness()")}}
+  - : Rend l'image plus claire ou plus sombre.
+- {{cssxref("filter-function/contrast", "contrast()")}}
+  - : Augmente ou diminue le contraste de l'image.
+- {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
+  - : Applique une ombre portée derrière l'image.
+- {{cssxref("filter-function/grayscale", "grayscale()")}}
+  - : Convertit l'image en niveaux de gris.
+- {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​​​​​​​​
+  - : Modifie la teinte globale de l'image.
+- {{cssxref("filter-function/invert", "invert()")}}
+  - : Inverse les couleurs de l'image.
+- {{cssxref("filter-function/opacity", "opacity()")}}
+  - : Rend l'image transparente.
+- {{cssxref("filter-function/saturate", "saturate()")}}
+  - : Sursature ou désature l'image.
+- {{cssxref("filter-function/sepia", "sepia()")}}
+  - : Convertit l'image en sépia.
+
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;')}} | {{Spec2('Filters 1.0')}} | Définition initiale. |
+
+## Voir aussi
+
+- Les propriétés qui utilisent ce type de donnée :
+
+  - {{cssxref("filter")}}
+  - {{cssxref("backdrop-filter")}}
diff --git a/files/fr/web/css/filter-function/invert()/index.md b/files/fr/web/css/filter-function/invert()/index.md
index 040d4f17b6..507207a2d5 100644
--- a/files/fr/web/css/filter-function/invert()/index.md
+++ b/files/fr/web/css/filter-function/invert()/index.md
@@ -8,31 +8,29 @@ tags:
   - Reference
 translation_of: Web/CSS/filter-function/invert()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <strong><code>invert()</code></strong> permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+La fonction CSS **`invert()`** permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type {{cssxref("&lt;filter-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-invert.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-invert.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">invert(<em>multiplicateur</em>)</pre>
+    invert(multiplicateur)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>multiplicateur</code></dt>
- <dd>L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Avec <code>100%</code>, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de <code>0%</code> ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est <code>0</code>.</dd>
-</dl>
+- `multiplicateur`
+  - : L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Avec `100%`, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de `0%` ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est `0`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">invert(0);     /* Aucun effet */
+```css
+invert(0);     /* Aucun effet */
 invert(.6);    /* Inversion à 60% */
-invert(100%);  /* Négatif de l'image originale */</pre>
+invert(100%);  /* Négatif de l'image originale */
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
diff --git a/files/fr/web/css/filter-function/opacity()/index.md b/files/fr/web/css/filter-function/opacity()/index.md
index 5bea0891bf..94fdf38c7b 100644
--- a/files/fr/web/css/filter-function/opacity()/index.md
+++ b/files/fr/web/css/filter-function/opacity()/index.md
@@ -8,36 +8,32 @@ tags:
   - Reference
 translation_of: Web/CSS/filter-function/opacity()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <strong><code>opacity()</code></strong> permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+La fonction CSS **`opacity()`** permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.
 
-<div>{ {EmbedInteractiveExample("pages/css/function-opacity.html")}}</div>
+{ {EmbedInteractiveExample("pages/css/function-opacity.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonction est proche de la propriété {{cssxref("opacity")}} mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances.</p>
-</div>
+> **Note :** Cette fonction est proche de la propriété {{cssxref("opacity")}} mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">opacity(<em>multiplicateur</em>)</pre>
+    opacity(multiplicateur)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>multiplicateur</code></dt>
- <dd>L'intensité de l'opacité, indiquée comme un nombre ({{cssxref("&lt;number&gt;")}}) ou comme un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une  valeur de <code>0%</code> entraînera une image complètement transparente. Une valeur de <code>100%</code> laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera <code>1</code>.</dd>
-</dl>
+- `multiplicateur`
+  - : L'intensité de l'opacité, indiquée comme un nombre ({{cssxref("&lt;number&gt;")}}) ou comme un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une  valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">opacity(0%);   /* Complètement transparente */
+```css
+opacity(0%);   /* Complètement transparente */
 opacity(50%);  /* 50% transparent */
-opacity(1);    /* Aucun effet */</pre>
+opacity(1);    /* Aucun effet */
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
- <li>La propriété CSS {{cssxref("opacity")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
+- La propriété CSS {{cssxref("opacity")}}
diff --git a/files/fr/web/css/filter-function/saturate()/index.md b/files/fr/web/css/filter-function/saturate()/index.md
index 148cb8c934..a695458598 100644
--- a/files/fr/web/css/filter-function/saturate()/index.md
+++ b/files/fr/web/css/filter-function/saturate()/index.md
@@ -8,32 +8,30 @@ tags:
   - Reference
 translation_of: Web/CSS/filter-function/saturate()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <strong><code>saturate()</code></strong> permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+La fonction CSS **`saturate()`** permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-saturate.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-saturate.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">saturate(<em>multiplicateur</em>)</pre>
+    saturate(multiplicateur)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>multiplicateur</code></dt>
- <dd>L'intensité de la modification sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à <code>100%</code> réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de <code>0%</code> désaturera complètement l'image alors qu'une valeur de <code>100%</code> laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est <code>1</code>.</dd>
-</dl>
+- `multiplicateur`
+  - : L'intensité de la modification sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à `100%` réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de `0%` désaturera complètement l'image alors qu'une valeur de `100%` laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est `1`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">saturate(0);     /* Complètement sous-saturée */
+```css
+saturate(0);     /* Complètement sous-saturée */
 saturate(.4);    /* Sous-saturée à 40% */
 saturate(100%);  /* Aucun effet */
-saturate(200%);  /* Saturation doublée */</pre>
+saturate(200%);  /* Saturation doublée */
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
diff --git a/files/fr/web/css/filter-function/sepia()/index.md b/files/fr/web/css/filter-function/sepia()/index.md
index 993dba725f..684423073f 100644
--- a/files/fr/web/css/filter-function/sepia()/index.md
+++ b/files/fr/web/css/filter-function/sepia()/index.md
@@ -8,31 +8,29 @@ tags:
   - Reference
 translation_of: Web/CSS/filter-function/sepia()
 ---
-<div>{{cssref}}</div>
+{{cssref}}
 
-<p>La fonction CSS <strong><code>sepia()</code></strong> convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+La fonction CSS **`sepia()`** convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-sepia.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-sepia.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">sepia(<em>multiplicateur</em>)</pre>
+    sepia(multiplicateur)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>multiplicateur</code></dt>
- <dd>L'intensité de la conversion indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur de <code>100%</code> permttra d'obtenir une image complètement sépia tandis qu'une valeur de <code>0%</code> laissera l'image inchangée. Les valeurs entre <code>0%</code> et <code>100%</code> représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera <code>0</code>.</dd>
-</dl>
+- `multiplicateur`
+  - : L'intensité de la conversion indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur de `100%` permttra d'obtenir une image complètement sépia tandis qu'une valeur de `0%` laissera l'image inchangée. Les valeurs entre `0%` et `100%` représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera `0`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">sepia(0);     /* Aucun effet */
+```css
+sepia(0);     /* Aucun effet */
 sepia(.65);   /* 65% de sépia */
-sepia(100%);  /* Complètement sépia */</pre>
+sepia(100%);  /* Complètement sépia */
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
diff --git a/files/fr/web/css/filter/index.md b/files/fr/web/css/filter/index.md
index ac1de9b8e8..004eb1fd9c 100644
--- a/files/fr/web/css/filter/index.md
+++ b/files/fr/web/css/filter/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/filter
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>filter</code></strong> permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.</p>
+La propriété **`filter`** permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.
 
-<p>Plusieurs fonctions sont inclues dans le standard CSS et permettent d'obtenir des effets prédéfinis. Il est également possible d'utiliser un filtre SVG via une URL référençant <a href="/fr/docs/Web/SVG/Element/filter">un élément SVG <code>filter</code></a>.</p>
+Plusieurs fonctions sont inclues dans le standard CSS et permettent d'obtenir des effets prédéfinis. Il est également possible d'utiliser un filtre SVG via une URL référençant [un élément SVG `filter`](/fr/docs/Web/SVG/Element/filter).
 
-<div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div>
+{{EmbedInteractiveExample("pages/css/filter.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* URL vers un filtre SVG */
+```css
+/* URL vers un filtre SVG */
 filter: url("filters.svg#filter-id");
 
 /* Fonctions de filtre */
@@ -42,88 +43,94 @@ filter: none;
 filter: inherit;
 filter: initial;
 filter: unset;
-</pre>
+```
 
-<p>Avec une fonction, on utilisera la forme suivante :</p>
+Avec une fonction, on utilisera la forme suivante :
 
-<pre class="syntaxbox">filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
-</pre>
+    filter: <filter-function> [<filter-function>]* | none
 
-<p>En utilisant un élément SVG {{SVGElement("filter")}}, on utilisera la forme suivante :</p>
+En utilisant un élément SVG {{SVGElement("filter")}}, on utilisera la forme suivante :
 
-<pre class="syntaxbox">filter: url(file.svg#filter-element-id)
-</pre>
+    filter: url(file.svg#filter-element-id)
 
-<h3 id="Interpolation">Interpolation</h3>
+### Interpolation
 
-<p>Si les deux filtres possèdent chacun une liste de même longueur (sans {{cssxref("&lt;url&gt;")}}, chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut <code>none</code>, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise un interpolation discrète.</p>
+Si les deux filtres possèdent chacun une liste de même longueur (sans {{cssxref("&lt;url&gt;")}}, chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut `none`, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise un interpolation discrète.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voici un rapide exemple de filtre fonctionnel. Chaque fonction est illustrée en détail par la suite.</p>
+Voici un rapide exemple de filtre fonctionnel. Chaque fonction est illustrée en détail par la suite.
 
-<pre class="brush: css">.mydiv { filter: grayscale(50%) }
+```css
+.mydiv { filter: grayscale(50%) }
 
 /* on applique un niveau de gris à 50% */
 /* et un flou dont le rayon vaut 10px  */
 img {
   filter: grayscale(0.5) blur(10px);
-}</pre>
+}
+```
 
-<p>Voici un rapide exemple de filtre utilisant une ressource SVG :</p>
+Voici un rapide exemple de filtre utilisant une ressource SVG :
 
-<pre class="brush: css">.target { filter: url(#c1); }
+```css
+.target { filter: url(#c1); }
 
 .mydiv { filter: url(commonfilters.xml#large-blur) }
-</pre>
-
-<h2 id="Fonctions_prédéfinies">Fonctions prédéfinies</h2>
-
-<p>Pour utiliser la propriété CSS <code>filter</code>, on utilisera <code>none</code> ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra <code>none</code>. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34).</p>
-
-<h3 id="url"><code>url()</code></h3>
-
-<p>La fonction <code>url()</code> prend comme argument l'emplacement d'un fichier XML qui définit le filtre SVG à appliquer. L'URL peut faire référence à une ancre d'un élément spécifique.</p>
-
-<pre class="brush: css">filter: url(resources.svg#c1)
-</pre>
-
-<h3 id="blur"><code>blur()</code></h3>
-
-<p>Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type {{cssxref("&lt;length&gt;")}} mais la fonction n'accepte pas de valeurs exprimées en pourcentages.</p>
-
-<pre class="brush: css">filter: blur(5px)
-</pre>
-
-<pre class="brush: html hidden">  &lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg id="img3" viewbox="0 0 233 176"&gt;
-  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" &gt;
-    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
-  &lt;/filter&gt;
-  &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<pre class="brush: css hidden">html {
+```
+
+## Fonctions prédéfinies
+
+Pour utiliser la propriété CSS `filter`, on utilisera `none` ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra `none`. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34).
+
+### `url()`
+
+La fonction `url()` prend comme argument l'emplacement d'un fichier XML qui définit le filtre SVG à appliquer. L'URL peut faire référence à une ancre d'un élément spécifique.
+
+```css
+filter: url(resources.svg#c1)
+```
+
+### `blur()`
+
+Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type {{cssxref("&lt;length&gt;")}} mais la fonction n'accepte pas de valeurs exprimées en pourcentages.
+
+```css
+filter: blur(5px)
+```
+
+```html hidden
+  <table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form.jpg" id="img1" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form.jpg" id="img2" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" >
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+  </filter>
+  <image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" />
+</svg><div></td>
+      <td><img alt="Test_Form_s.jpg" id="img4" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -164,66 +171,72 @@ table.standard-table td {
 #img3 {
   height:100%;
 }
-</pre>
-
-<pre class="brush: svg">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
-    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
-  &lt;/filter&gt;
-&lt;/svg&gt;</pre>
-
-<p>{{EmbedLiveSample('blur','100%','236px','')}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("filter-function/blur()", "blur()")}} pour plus d'informations.</p>
-</div>
-
-<h3 id="brightness"><code>brightness()</code></h3>
-
-<p>La fonction permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal <code>0%</code> créera une image totalement noire et une valeur de <code>100%</code> conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à <code>100%</code> afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est <code>1</code>.</p>
-
-<pre class="brush: css">filter: brightness(0.5)</pre>
-
-<pre class="brush: svg">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
- &lt;filter id="brightness"&gt;
-    &lt;feComponentTransfer&gt;
-        &lt;feFuncR type="linear" slope="[amount]"/&gt;
-        &lt;feFuncG type="linear" slope="[amount]"/&gt;
-        &lt;feFuncB type="linear" slope="[amount]"/&gt;
-    &lt;/feComponentTransfer&gt;
-  &lt;/filter&gt;
-&lt;/svg&gt;</pre>
-
-<pre class="brush: html hidden">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"&gt;
- &lt;filter id="brightness"&gt;
-    &lt;feComponentTransfer&gt;
-        &lt;feFuncR type="linear" slope="2"/&gt;
-        &lt;feFuncG type="linear" slope="2"/&gt;
-        &lt;feFuncB type="linear" slope="2"/&gt;
-    &lt;/feComponentTransfer&gt;
-  &lt;/filter&gt;
-  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css hidden">html {
+```
+
+```svg
+<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>
+```
+
+{{EmbedLiveSample('blur','100%','236px','')}}
+
+> **Note :** Voir {{cssxref("filter-function/blur()", "blur()")}} pour plus d'informations.
+
+### `brightness()`
+
+La fonction permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal `0%` créera une image totalement noire et une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à `100%` afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est `1`.
+
+```css
+filter: brightness(0.5)
+```
+
+```svg
+<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+ <filter id="brightness">
+    <feComponentTransfer>
+        <feFuncR type="linear" slope="[amount]"/>
+        <feFuncG type="linear" slope="[amount]"/>
+        <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form.jpg" id="img1" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form.jpg" id="img2" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217">
+ <filter id="brightness">
+    <feComponentTransfer>
+        <feFuncR type="linear" slope="2"/>
+        <feFuncG type="linear" slope="2"/>
+        <feFuncB type="linear" slope="2"/>
+    </feComponentTransfer>
+  </filter>
+  <image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" />
+</svg><div></td>
+      <td><img alt="Test_Form_s.jpg" id="img4" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -266,61 +279,64 @@ table.standard-table td {
 #img3 {
   height:100%;
 }
-</pre>
-
-<p>{{EmbedLiveSample('brightness','100%','231px','')}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("filter-function/brightness()", "brightness()")}} pour plus d'informations.</p>
-</div>
-
-<h3 id="contrast"><code>contrast()</code></h3>
-
-<p>Cette fonction permet d'ajuster le contraste de l'image d'entrée. Une valeur de <code>0%</code> créera une image entièrement grise. Une valeur de <code>100%</code> conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est <code>1</code>.</p>
-
-<pre class="brush: css">filter: contrast(200%)
-</pre>
-
-<pre class="brush: svg">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;filter id="contrast"&gt;
-    &lt;feComponentTransfer&gt;
-      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
-      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
-      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
-    &lt;/feComponentTransfer&gt;
-  &lt;/filter&gt;
-&lt;/svg&gt;</pre>
-
-<pre class="brush: html hidden">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"&gt;
- &lt;filter id="contrast"&gt;
-    &lt;feComponentTransfer&gt;
-      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
-      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
-      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
-    &lt;/feComponentTransfer&gt;
-  &lt;/filter&gt;
-  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css hidden">html {
+```
+
+{{EmbedLiveSample('brightness','100%','231px','')}}
+
+> **Note :** Voir {{cssxref("filter-function/brightness()", "brightness()")}} pour plus d'informations.
+
+### `contrast()`
+
+Cette fonction permet d'ajuster le contraste de l'image d'entrée. Une valeur de `0%` créera une image entièrement grise. Une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est `1`.
+
+```css
+filter: contrast(200%)
+```
+
+```svg
+<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form_3.jpeg" id="img1" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_3.jpg" id="img2" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151">
+ <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="2" intercept="-0.5"/>
+      <feFuncG type="linear" slope="2" intercept="-0.5"/>
+      <feFuncB type="linear" slope="2" intercept="-0.5"/>
+    </feComponentTransfer>
+  </filter>
+  <image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" />
+</svg><div></td>
+      <td><img alt="Test_Form_s.jpg" id="img4" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -363,96 +379,98 @@ table.standard-table td {
 #img3 {
   height:100%;
 }
-</pre>
-
-<p>{{EmbedLiveSample('contrast','100%','203px','')}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("filter-function/contrast()", "contrast()")}} pour plus d'informations.</p>
-</div>
-
-<h3 id="drop-shadow"><code>drop-shadow()</code></h3>
-
-<p>Cette fonction permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type {{cssxref("&lt;shadow&gt;")}} (définie dans la spécification CSS3 sur les arrière-plans), une exception : le mot-clé <code>inset</code> n'est pas autorisée. Cette fonction est semblable à la propriété {{cssxref("box-shadow")}} plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleurs performances. Les paramètres de l'argument <code>&lt;shadow&gt;</code> sont les suivants :</p>
-
-<dl>
- <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(nécessaire)</small></dt>
- <dd>Deux valeurs {{cssxref("&lt;length&gt;")}} qui indiquent le décalage de l'ombre portée. <code>&lt;offset-x&gt;</code> définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. <code>&lt;offset-y&gt;</code> définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page {{cssxref("&lt;length&gt;")}} pour les différentes unités utilisables.<br>
- Si les deux valeurs sont nulles, l'ombre sera exactement placée sous l'élément (et pourra servir à générer un effet de flou si <code>&lt;blur-radius&gt;</code> et/ou <code>&lt;spread-radius&gt;</code> sont utilisés).</dd>
- <dt><code>&lt;blur-radius&gt;</code> <small>(optionnel)</small></dt>
- <dd>Une troisième valeur de type {{cssxref("&lt;length&gt;")}}. Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisée. La valeur par défaut est <code>0</code>, le bord de l'ombre sera droit.</dd>
- <dt><code>&lt;spread-radius&gt;</code> <small>(optionnel)</small></dt>
- <dd>Un quatrième valeur de type {{cssxref("&lt;length&gt;")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément). Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.</dd>
- <dt><code>&lt;color&gt;</code> <small>(optionnel)</small></dt>
- <dd>Voir {{cssxref("&lt;color&gt;")}} pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété {{cssxref("color")}} est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile).</dd>
-</dl>
-
-<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre>
-
-<pre class="brush: svg">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
- &lt;filter id="drop-shadow"&gt;
-    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
-    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
-    &lt;feFlood flood-color="[color]"/&gt;
-    &lt;feComposite in2="offsetblur" operator="in"/&gt;
-    &lt;feMerge&gt;
-      &lt;feMergeNode/&gt;
-      &lt;feMergeNode in="SourceGraphic"/&gt;
-    &lt;/feMerge&gt;
-  &lt;/filter&gt;
-&lt;/svg&gt;</pre>
-
-<pre class="brush: html hidden">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"&gt;
- &lt;filter id="drop-shadow"&gt;
-    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="5"/&gt;
-    &lt;feOffset dx="16" dy="16"/&gt;
-    &lt;feMerge&gt;
-      &lt;feMergeNode/&gt;
-      &lt;feMergeNode in="SourceGraphic"/&gt;
-    &lt;/feMerge&gt;
- &lt;/filter&gt;
- &lt;image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Original image" id="img11" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Live example" id="img12" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;
-        &lt;div class="svg-container"&gt;
-          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"&gt;
-            &lt;filter id="drop-shadow2"&gt;
-              &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4"/&gt;
-              &lt;feOffset dx="8" dy="10"/&gt;
-              &lt;feMerge&gt;
-                &lt;feMergeNode/&gt;
-                &lt;feMergeNode in="SourceGraphic"/&gt;
-              &lt;/feMerge&gt;
-            &lt;/filter&gt;
-            &lt;image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" filter="url(#drop-shadow2)" width="213px" height="161px" /&gt;
-          &lt;/svg&gt;
-        &lt;div&gt;
-      &lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css hidden">html {
+```
+
+{{EmbedLiveSample('contrast','100%','203px','')}}
+
+> **Note :** Voir {{cssxref("filter-function/contrast()", "contrast()")}} pour plus d'informations.
+
+### `drop-shadow()`
+
+Cette fonction permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type {{cssxref("&lt;shadow&gt;")}} (définie dans la spécification CSS3 sur les arrière-plans), une exception : le mot-clé `inset` n'est pas autorisée. Cette fonction est semblable à la propriété {{cssxref("box-shadow")}} plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleurs performances. Les paramètres de l'argument `<shadow>` sont les suivants :
+
+- `<offset-x>` `<offset-y>` (nécessaire)
+  - : Deux valeurs {{cssxref("&lt;length&gt;")}} qui indiquent le décalage de l'ombre portée. `<offset-x>` définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. `<offset-y>` définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page {{cssxref("&lt;length&gt;")}} pour les différentes unités utilisables.
+    Si les deux valeurs sont nulles, l'ombre sera exactement placée sous l'élément (et pourra servir à générer un effet de flou si `<blur-radius>` et/ou `<spread-radius>` sont utilisés).
+- `<blur-radius>` (optionnel)
+  - : Une troisième valeur de type {{cssxref("&lt;length&gt;")}}. Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisée. La valeur par défaut est `0`, le bord de l'ombre sera droit.
+- `<spread-radius>` (optionnel)
+  - : Un quatrième valeur de type {{cssxref("&lt;length&gt;")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est `0` (l'ombre aura la même taille que l'élément). Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.
+- `<color>` (optionnel)
+  - : Voir {{cssxref("&lt;color&gt;")}} pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété {{cssxref("color")}} est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile).
+
+```css
+filter: drop-shadow(16px 16px 10px black)
+```
+
+```svg
+<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form_4.jpeg" id="img1" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_4.jpg" id="img2" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+    <feOffset dx="16" dy="16"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+ </filter>
+ <image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" />
+</svg><div></td>
+      <td><img alt="Test_Form_4_s.jpg" id="img4" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td>
+    </tr>
+    <tr>
+      <td><img alt="Test_Form_4 distorded border - Original image" id="img11" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_4 distorded border - Live example" id="img12" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
+      <td>
+        <div class="svg-container">
+          <svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187">
+            <filter id="drop-shadow2">
+              <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
+              <feOffset dx="8" dy="10"/>
+              <feMerge>
+                <feMergeNode/>
+                <feMergeNode in="SourceGraphic"/>
+              </feMerge>
+            </filter>
+            <image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" filter="url(#drop-shadow2)" width="213px" height="161px" />
+          </svg>
+        <div>
+      </td>
+      <td><img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -508,50 +526,52 @@ table.standard-table td {
 #img3, #img13 {
   height:100%;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('drop-shadow','100%','300px','')}}</p>
+{{EmbedLiveSample('drop-shadow','100%','300px','')}}
 
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} pour plus d'informations.</p>
-</div>
+> **Note :** Voir {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} pour plus d'informations.
 
-<h3 id="grayscale"><code>grayscale()</code></h3>
+### `grayscale()`
 
-<p>L'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de <code>100%</code> sera complètement en niveaux de gris. <code>0%</code> conservera l'image telle quelle. La valeur par défaut du paramètre est <code>0</code>.</p>
+L'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de `100%` sera complètement en niveaux de gris. `0%` conservera l'image telle quelle. La valeur par défaut du paramètre est `0`.
 
-<pre class="brush: css">filter: grayscale(100%)</pre>
+```css
+filter: grayscale(100%)
+```
 
-<pre class="brush: html hidden">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"&gt;
- &lt;filter id="grayscale"&gt;
-    &lt;feColorMatrix type="matrix"
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form_5.jpeg" id="img1" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_5.jpg" id="img2" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184">
+ <filter id="grayscale">
+    <feColorMatrix type="matrix"
                values="0.2126 0.7152 0.0722 0 0
                        0.2126 0.7152 0.0722 0 0
                        0.2126 0.7152 0.0722 0 0
-                       0 0 0 1 0"/&gt;
-  &lt;/filter&gt;
-  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css hidden">html {
+                       0 0 0 1 0"/>
+  </filter>
+  <image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" />
+</svg><div></td>
+      <td><img alt="Test_Form_5_s.jpg" id="img4" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -594,47 +614,49 @@ table.standard-table td {
 #img3 {
   height:100%;
 }
-</pre>
-
-<p>{{EmbedLiveSample('grayscale','100%','209px','')}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("filter-function/grayscale()", "grayscale()")}} pour plus d'informations.</p>
-</div>
-
-<h3 id="hue-rotate"><code>hue-rotate()</code></h3>
-
-<p>Cette fonction applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de <code>0deg</code> conservera l'image telle quelle. La valeur par défaut du paramètre est <code>0deg</code>. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à <code>360deg</code> est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée.</p>
-
-<pre class="brush: css">filter: hue-rotate(90deg)</pre>
-
-<pre class="brush: html hidden">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"&gt;
- &lt;filter id="hue-rotate"&gt;
-    &lt;feColorMatrix type="hueRotate"
-               values="90"/&gt;
-  &lt;/filter&gt;
-  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css hidden">html {
+```
+
+{{EmbedLiveSample('grayscale','100%','209px','')}}
+
+> **Note :** Voir {{cssxref("filter-function/grayscale()", "grayscale()")}} pour plus d'informations.
+
+### `hue-rotate()`
+
+Cette fonction applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de `0deg` conservera l'image telle quelle. La valeur par défaut du paramètre est `0deg`. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à `360deg` est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée.
+
+```css
+filter: hue-rotate(90deg)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form_6.jpeg" id="img1" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_6.jpg" id="img2" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190">
+ <filter id="hue-rotate">
+    <feColorMatrix type="hueRotate"
+               values="90"/>
+  </filter>
+  <image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" />
+</svg><div></td>
+      <td><img alt="Test_Form_6_s.jpg" id="img4" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -677,57 +699,60 @@ table.standard-table td {
 #img3 {
   height:100%;
 }
-</pre>
-</div>
-
-<pre class="brush: html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;filter id="svgHueRotate" &gt;
-    &lt;feColorMatrix type="hueRotate" values="[angle]" /&gt;
-  &lt;filter /&gt;
-&lt;/svg&gt;</pre>
-
-<p>{{EmbedLiveSample('hue-rotate','100%','221px','')}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} pour plus d'informations.</p>
-</div>
-
-<h3 id="invert"><code>invert()</code></h3>
-
-<p>Cette fonction permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de <code>100%</code> inversera complètement les couleurs (tel un négatif) et une valeur <code>0%</code> conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est <code>0</code>.</p>
-
-<pre class="brush: css">filter: invert(100%)</pre>
-
-<pre class="brush: html hidden">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"&gt;
- &lt;filter id="invert"&gt;
-    &lt;feComponentTransfer&gt;
-        &lt;feFuncR type="table" tableValues="1 0"/&gt;
-        &lt;feFuncG type="table" tableValues="1 0"/&gt;
-        &lt;feFuncB type="table" tableValues="1 0"/&gt;
-    &lt;/feComponentTransfer&gt;
- &lt;/filter&gt;
- &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css hidden">html {
+```
+
+```html
+<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgHueRotate" >
+    <feColorMatrix type="hueRotate" values="[angle]" />
+  <filter />
+</svg>
+```
+
+{{EmbedLiveSample('hue-rotate','100%','221px','')}}
+
+> **Note :** Voir {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} pour plus d'informations.
+
+### `invert()`
+
+Cette fonction permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de `100%` inversera complètement les couleurs (tel un négatif) et une valeur `0%` conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est `0`.
+
+```css
+filter: invert(100%)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form_7.jpeg" id="img1" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_7.jpg" id="img2" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276">
+ <filter id="invert">
+    <feComponentTransfer>
+        <feFuncR type="table" tableValues="1 0"/>
+        <feFuncG type="table" tableValues="1 0"/>
+        <feFuncB type="table" tableValues="1 0"/>
+    </feComponentTransfer>
+ </filter>
+ <image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" />
+</svg><div></td>
+      <td><img alt="Test_Form_7_s.jpg" id="img4" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -770,48 +795,50 @@ table.standard-table td {
 #img3 {
   height:100%;
 }
-</pre>
-
-<p>{{EmbedLiveSample('invert','100%','407px','')}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("filter-function/invert()", "invert()")}} pour plus d'informations.</p>
-</div>
-
-<h3 id="opacity"><code>opacity()</code></h3>
-
-<p>Cette fonction permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de <code>0%</code> rendra l'image complètement transparente et une valeur de <code>100%</code> conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est <code>1</code>. Cette fonction est proche de la propriété {{cssxref("opacity")}}, toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances.</p>
-
-<pre class="brush: css">filter: opacity(50%)</pre>
-
-<pre class="brush: html hidden">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"&gt;
- &lt;filter id="opacity"&gt;
-    &lt;feComponentTransfer&gt;
-        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
-    &lt;/feComponentTransfer&gt;
- &lt;/filter&gt;
- &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css hidden">html {
+```
+
+{{EmbedLiveSample('invert','100%','407px','')}}
+
+> **Note :** Voir {{cssxref("filter-function/invert()", "invert()")}} pour plus d'informations.
+
+### `opacity()`
+
+Cette fonction permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de `0%` rendra l'image complètement transparente et une valeur de `100%` conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est `1`. Cette fonction est proche de la propriété {{cssxref("opacity")}}, toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances.
+
+```css
+filter: opacity(50%)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form_14.jpeg" id="img1" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_14.jpg" id="img2" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183">
+ <filter id="opacity">
+    <feComponentTransfer>
+        <feFuncA type="table" tableValues="0 0.5">
+    </feComponentTransfer>
+ </filter>
+ <image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" />
+</svg><div></td>
+      <td><img alt="Test_Form_14_s.jpg" id="img4" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -854,47 +881,49 @@ table.standard-table td {
 #img3 {
   height:100%;
 }
-</pre>
-
-<p>{{EmbedLiveSample('opacity','100%','210px','')}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("filter-function/opacity()", "opacity()")}} pour plus d'informations.</p>
-</div>
-
-<h3 id="saturate"><code>saturate()</code></h3>
-
-<p>L'image d'entrée est saturée. La valeur de l'argument indique la force de la saturation. Une valeur de <code>0%</code> fera que l'image sera totalement désaturée et une valeur de <code>100%</code> conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à <code>100%</code> pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est <code>1</code>.</p>
-
-<pre class="brush: css">filter: saturate(200%)</pre>
-
-<pre class="brush: html hidden">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"&gt;
- &lt;filter id="saturate"&gt;
-    &lt;feColorMatrix type="saturate"
-               values="2"/&gt;
- &lt;/filter&gt;
- &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css hidden">html {
+```
+
+{{EmbedLiveSample('opacity','100%','210px','')}}
+
+> **Note :** Voir {{cssxref("filter-function/opacity()", "opacity()")}} pour plus d'informations.
+
+### `saturate()`
+
+L'image d'entrée est saturée. La valeur de l'argument indique la force de la saturation. Une valeur de `0%` fera que l'image sera totalement désaturée et une valeur de `100%` conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à `100%` pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est `1`.
+
+```css
+filter: saturate(200%)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form_9.jpeg" id="img1" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_9.jpg" id="img2" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239">
+ <filter id="saturate">
+    <feColorMatrix type="saturate"
+               values="2"/>
+ </filter>
+ <image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" />
+</svg><div></td>
+      <td><img alt="Test_Form_9_s.jpg" id="img4" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -937,50 +966,52 @@ table.standard-table td {
 #img3 {
   height:100%;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('saturate','100%','332px','')}}</p>
+{{EmbedLiveSample('saturate','100%','332px','')}}
 
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("filter-function/saturate()", "saturate()")}} pour plus d'informations.</p>
-</div>
+> **Note :** Voir {{cssxref("filter-function/saturate()", "saturate()")}} pour plus d'informations.
 
-<h3 id="sepia"><code>sepia()</code></h3>
+### `sepia()`
 
-<p>L'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de <code>0%</code>, l'image d'entrée sera inchangée. Les valeurs comprises entre <code>0%</code> et <code>100%</code> appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est <code>0</code>.</p>
+L'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de `0%`, l'image d'entrée sera inchangée. Les valeurs comprises entre `0%` et `100%` appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est `0`.
 
-<pre class="brush: css">filter: sepia(100%)</pre>
+```css
+filter: sepia(100%)
+```
 
-<pre class="brush: html hidden">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"&gt;
- &lt;filter id="sepia"&gt;
-    &lt;feColorMatrix type="matrix"
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form_12.jpeg" id="img1" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_12.jpg" id="img2" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194">
+ <filter id="sepia">
+    <feColorMatrix type="matrix"
                values="0.393 0.769 0.189 0 0
                        0.349 0.686 0.168 0 0
                        0.272 0.534 0.131 0 0
-                       0 0 0 1 0"/&gt;
- &lt;/filter&gt;
- &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css hidden">html {
+                       0 0 0 1 0"/>
+ </filter>
+ <image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" />
+</svg><div></td>
+      <td><img alt="Test_Form_12_s.jpg" id="img4" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -1023,39 +1054,41 @@ table.standard-table td {
 #img3 {
   height:100%;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('sepia','100%','229px','')}}</p>
+{{EmbedLiveSample('sepia','100%','229px','')}}
 
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("filter-function/sepia()", "sepia()")}} pour plus d'informations.</p>
-</div>
+> **Note :** Voir {{cssxref("filter-function/sepia()", "sepia()")}} pour plus d'informations.
 
-<h2 id="Enchaîner_les_fonctions">Enchaîner les fonctions</h2>
+## Enchaîner les fonctions
 
-<p>On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image :</p>
+On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image :
 
-<pre class="brush: css">filter: contrast(175%) brightness(103%)</pre>
+```css
+filter: contrast(175%) brightness(103%)
+```
 
-<pre class="brush: html hidden">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img alt="Test_Form_8.jpeg" id="img1" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_8.jpg" id="img2" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td>
+      <td><img alt="Test_Form_8_s.jpg" id="img4" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
 
-<pre class="brush: css hidden">html {
+```css hidden
+html {
   height:100%;
 }
 body {
@@ -1099,41 +1132,26 @@ table.standard-table td {
 #img3 {
   height:100%;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Enchaîner_les_fonctions','100%','209px','')}}</p>
+{{EmbedLiveSample('Enchaîner_les_fonctions','100%','209px','')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td>
-   <td>{{Spec2('Filters 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                             | Commentaires         |
+| ---------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Filters 1.0', '#FilterProperty', 'filter')}} | {{Spec2('Filters 1.0')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.filter")}}</p>
+{{Compat("css.properties.filter")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Applying_SVG_effects_to_HTML_content">Appliquer des effets SVG sur du contenu HTML</a></li>
- <li>La propriété {{cssxref("mask")}}</li>
- <li><a href="/fr/docs/Web/SVG">SVG</a></li>
- <li><a href="https://www.html5rocks.com/en/tutorials/filters/understanding-css/">Un article de HTML5 Rocks : <em>Understanding CSS filters </em>(en anglais)</a></li>
- <li><a href="https://cssgenerator.org/filter-css-generator.html">Générateur de filtres CSS</a></li>
-</ul>
+- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Applying_SVG_effects_to_HTML_content)
+- La propriété {{cssxref("mask")}}
+- [SVG](/fr/docs/Web/SVG)
+- [Un article de HTML5 Rocks : _Understanding CSS filters_ (en anglais)](https://www.html5rocks.com/en/tutorials/filters/understanding-css/)
+- [Générateur de filtres CSS](https://cssgenerator.org/filter-css-generator.html)
diff --git a/files/fr/web/css/filter_effects/index.md b/files/fr/web/css/filter_effects/index.md
index d1865662cc..ce091b133d 100644
--- a/files/fr/web/css/filter_effects/index.md
+++ b/files/fr/web/css/filter_effects/index.md
@@ -8,50 +8,33 @@ tags:
   - Reference
 translation_of: Web/CSS/Filter_Effects
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><em><strong>Filter Effects</strong></em> ou « module des effets de filtre » (ou plus communément « filtres CSS ») est un module de la spécification CSS qui définit une façon de traiter le rendu d'un élément avant que celui-ci soit affiché dans le document.</p>
+**_Filter Effects_** ou « module des effets de filtre » (ou plus communément « filtres CSS ») est un module de la spécification CSS qui définit une façon de traiter le rendu d'un élément avant que celui-ci soit affiché dans le document.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{cssxref("backdrop-filter")}}</li>
- <li>{{cssxref("filter")}}</li>
-</ul>
+- {{cssxref("backdrop-filter")}}
+- {{cssxref("filter")}}
 
-<h3 id="Types_de_données">Types de données</h3>
+### Types de données
 
-<ul>
- <li>{{cssxref("&lt;filter-function&gt;")}}</li>
-</ul>
+- {{cssxref("&lt;filter-function&gt;")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td>
-   <td>{{ Spec2('Filters 1.0') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Filters 1.0', '#FilterProperty', 'filter')}} | {{ Spec2('Filters 1.0') }} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="backdrop-filter"><code>backdrop-filter</code></h3>
+### `backdrop-filter`
 
-<p>{{Compat("css.properties.backdrop-filter")}}</p>
+{{Compat("css.properties.backdrop-filter")}}
 
-<h3 id="filter"><code>filter</code></h3>
+### `filter`
 
-<p>{{Compat("css.properties.filter")}}</p>
+{{Compat("css.properties.filter")}}
diff --git a/files/fr/web/css/fit-content/index.md b/files/fr/web/css/fit-content/index.md
index 822f7d15ea..9774d75c30 100644
--- a/files/fr/web/css/fit-content/index.md
+++ b/files/fr/web/css/fit-content/index.md
@@ -9,44 +9,44 @@ tags:
   - Web
 translation_of: Web/CSS/fit-content
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La fonction CSS <strong><code>fit-content()</code></strong> permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule  <code>min(<var>taille maximale</var>, max(<var>taille minimale</var>, <var>argument</var>))</code>.</p>
+La fonction CSS **`fit-content()`** permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule  `min(taille maximale, max(taille minimale, argument))`.
 
-<pre class="brush: css no-line-numbers">/* Valeurs de type &lt;length&gt; */
+```css
+/* Valeurs de type <length> */
 fit-content(200px)
 fit-content(5cm)
 fit-content(30vw)
 fit-content(100ch)
 
-/* Valeurs de type &lt;percentage&gt; */
+/* Valeurs de type <percentage> */
 fit-content(40%)
-</pre>
+```
 
-<p>Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> et où la taille minimale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#auto">auto</a></code> et qui est calculée de façon similaire à <code>auto</code> (i.e. <code><a href="/fr/docs/Web/CSS/minmax()">minmax(auto, max-content)</a></code>), sauf que la taille de la piste est ramenée à <var>argument</var> si celui-ci est supérieur à <code>auto</code>.</p>
+Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par [`max-content`](/fr/docs/Web/CSS/grid-template-columns#max-content) et où la taille minimale est définie par [`auto`](/fr/docs/Web/CSS/grid-template-columns#auto) et qui est calculée de façon similaire à `auto` (i.e. [`minmax(auto, max-content)`](</fr/docs/Web/CSS/minmax()>)), sauf que la taille de la piste est ramenée à _argument_ si celui-ci est supérieur à `auto`.
 
-<p>Elle peut également être utilisée pour définir la taille d'une boîte avec {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}} où la taille maximale fait référence à la taille maximale du contenu et où la taille minimale fait référence à la taille minimale du contenu.</p>
+Elle peut également être utilisée pour définir la taille d'une boîte avec {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}} où la taille maximale fait référence à la taille maximale du contenu et où la taille minimale fait référence à la taille minimale du contenu.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une longueur (valeur de type {{cssxref("&lt;length&gt;")}}) exprimée de façon absolue.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage (valeur de type {{cssxref("&lt;percentage&gt;")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.</dd>
-</dl>
+- `<length>`
+  - : Une longueur (valeur de type {{cssxref("&lt;length&gt;")}}) exprimée de façon absolue.
+- `<percentage>`
+  - : Un pourcentage (valeur de type {{cssxref("&lt;percentage&gt;")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   display: grid;
   grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
   grid-gap: 5px;
@@ -57,51 +57,36 @@ fit-content(40%)
   padding: 10px;
 }
 
-#container &gt; div {
+#container > div {
   background-color: #8ca0ff;
   padding: 5px;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;Item as wide as the content.&lt;/div&gt;
-  &lt;div&gt;
+```html
+<div id="container">
+  <div>Item as wide as the content.</div>
+  <div>
     Item with more text in it. Because the contents of it are
     wider than the maximum width, it is clamped at 300 pixels.
-  &lt;/div&gt;
-  &lt;div&gt;Flexible item&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%", 200)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}</td>
-   <td>{{Spec2("CSS3 Sizing")}}</td>
-   <td>Définition de la fonction pour les dimensions de boîte avec les propriétés  {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}</td>
-   <td>{{Spec2("CSS Grid")}}</td>
-   <td>Définition initiale, la fonction peut être utilisée pour définir la taille d'une piste au sein d'une grille CSS.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-template-columns.fit-content")}}</p>
+  </div>
+  <div>Flexible item</div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%", 200)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires                                                                                                                                                                                                                                                                      |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}} | {{Spec2("CSS3 Sizing")}} | Définition de la fonction pour les dimensions de boîte avec les propriétés  {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}. |
+| {{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}     | {{Spec2("CSS Grid")}}     | Définition initiale, la fonction peut être utilisée pour définir la taille d'une piste au sein d'une grille CSS.                                                                                                                                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-template-columns.fit-content")}}
diff --git a/files/fr/web/css/flex-basis/index.md b/files/fr/web/css/flex-basis/index.md
index 03d16b111d..63769f6da2 100644
--- a/files/fr/web/css/flex-basis/index.md
+++ b/files/fr/web/css/flex-basis/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/flex-basis
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>flex-basis</code></strong> détermine la base de flexibilité utilisée comme taille initiale principale pour un élément flexible. Cette propriété détermine la taille de la boîte de contenu sauf si une autre boîte est visée par {{cssxref("box-sizing")}}.</p>
+La propriété **`flex-basis`** détermine la base de flexibilité utilisée comme taille initiale principale pour un élément flexible. Cette propriété détermine la taille de la boîte de contenu sauf si une autre boîte est visée par {{cssxref("box-sizing")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div>
+{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> Dans le cas où <code>flex-basis</code> (avec une valeur différente de <code>auto</code>) et <code>width</code> (ou <code>height</code> si <code>flex-direction: column</code>) sont définis pour un élément, c'est <code>flex-basis</code> qui a la priorité.</p>
-</div>
+> **Note :** Dans le cas où `flex-basis` (avec une valeur différente de `auto`) et `width` (ou `height` si `flex-direction: column`) sont définis pour un élément, c'est `flex-basis` qui a la priorité.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* On définit une largeur */
+```css
+/* On définit une largeur */
 flex-basis: 10em;
 flex-basis: 3px;
 flex-basis: auto;
@@ -39,53 +38,52 @@ flex-basis: content;
 flex-basis: inherit;
 flex-basis: initial;
 flex-basis: unset;
-</pre>
+```
 
-<p>La propriété <code>flex-basis</code> est définie grâce au mot-clé <code><a href="#content">content</a></code> ou grâce à une valeur de type <code><a href="#width">&lt;'width'&gt;</a></code>.</p>
+La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content) ou grâce à une valeur de type [`<'width'>`](#width).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'width'&gt;</code></dt>
- <dd>Un longueur absolue (type {{cssxref("&lt;length&gt;")}} ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})relatif à la taille principale du conteneur flexible ou encore le mot-clé <code>auto</code>. Les valeurs négatives ne sont pas autorisées. La valeur par défaut est <code>auto</code>.</dd>
- <dt><code>content</code></dt>
- <dd>Le dimensionnement se fera de façon automatique selon le contenu de l'élément flexible. <div class="note"><p><strong>Note :</strong> Cette valeur n'était pas définie par la première version de la spécification sur les boîtes flexibles. Aussi, certaines anciennes implémentations se basant sur cette version de la spécification ne prendront pas cette valeur en charge. Un effet équivalent peut être obtenu en réglant la taille principale ({{cssxref("width")}} ou {{cssxref("height")}}) avec <code>auto</code>.</p></div>
+- `<'width'>`
+  - : Un longueur absolue (type {{cssxref("&lt;length&gt;")}} ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})relatif à la taille principale du conteneur flexible ou encore le mot-clé `auto`. Les valeurs négatives ne sont pas autorisées. La valeur par défaut est `auto`.
+- `content`
 
- <div class="note"><p><strong>Note :</strong> Voici un rapide historique pour cette propriété :
+  - : Le dimensionnement se fera de façon automatique selon le contenu de l'élément flexible.
 
- <ul>
-  <li>Au début, <code>flex-basis:auto</code> signifiait « se référer à ma propriété <code>width</code> ou <code>height</code> »</li>
-  <li>Ensuite, <code>flex-basis:auto</code> a été modifiée pour indiquer un dimensionnement automatique et le mot-clé <code>main-size</code> fut introduit pour faire référence à la propriété <code>width</code> ou <code>height</code>. L'implémentation dans Gecko a été suivie avec le bug {{bug("1032922")}}.</li>
-  <li>Cette modification a été annulée avec le bug {{bug("1093316")}} afin qu'<code>auto</code> fasse à nouveau référence à la propriété <code>height</code> ou <code>width</code>. Le mot-clé <code>content</code> a été introduit pour déclencher un dimensionnement automatique (c'est le bug {{bug("1105111")}} qui couvre cette implémentation).</li>
- </ul>
-</p></div>
- </dd>
-</dl>
+    > **Note :** Cette valeur n'était pas définie par la première version de la spécification sur les boîtes flexibles. Aussi, certaines anciennes implémentations se basant sur cette version de la spécification ne prendront pas cette valeur en charge. Un effet équivalent peut être obtenu en réglant la taille principale ({{cssxref("width")}} ou {{cssxref("height")}}) avec `auto`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    > **Note :** Voici un rapide historique pour cette propriété :
+    >
+    > - Au début, `flex-basis:auto` signifiait « se référer à ma propriété `width` ou `height` »
+    > - Ensuite, `flex-basis:auto` a été modifiée pour indiquer un dimensionnement automatique et le mot-clé `main-size` fut introduit pour faire référence à la propriété `width` ou `height`. L'implémentation dans Gecko a été suivie avec le bug {{bug("1032922")}}.
+    > - Cette modification a été annulée avec le bug {{bug("1093316")}} afin qu'`auto` fasse à nouveau référence à la propriété `height` ou `width`. Le mot-clé `content` a été introduit pour déclencher un dimensionnement automatique (c'est le bug {{bug("1105111")}} qui couvre cette implémentation).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul class="container"&gt;
-  &lt;li class="flex flex1"&gt;1: flex-basis test&lt;/li&gt;
-  &lt;li class="flex flex2"&gt;2: flex-basis test&lt;/li&gt;
-  &lt;li class="flex flex3"&gt;3: flex-basis test&lt;/li&gt;
-  &lt;li class="flex flex4"&gt;4: flex-basis test&lt;/li&gt;
-  &lt;li class="flex flex5"&gt;5: flex-basis test&lt;/li&gt;
-&lt;/ul&gt;
+```html
+<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
 
-&lt;ul class="container"&gt;
-  &lt;li class="flex flex6"&gt;6: flex-basis test&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.container {
+```css
+.container {
   font-family: arial, sans-serif;
   margin: 0;
   padding: 0;
@@ -163,41 +161,26 @@ flex-basis: unset;
 .flex6:after {
   content: 'fill';
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '860', '360')}}</p>
+{{EmbedLiveSample('Exemples', '860', '360')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.flex-basis")}}</p>
+{{Compat("css.properties.flex-basis")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("width")}}</li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
-</ul>
+- {{cssxref("width")}}
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- Guide sur les boîtes flexibles : _[Contrôler les proportions des boîtes flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_
diff --git a/files/fr/web/css/flex-direction/index.md b/files/fr/web/css/flex-direction/index.md
index 68b9b2d921..aba2fa317d 100644
--- a/files/fr/web/css/flex-direction/index.md
+++ b/files/fr/web/css/flex-direction/index.md
@@ -7,22 +7,23 @@ tags:
   - Reference
 translation_of: Web/CSS/flex-direction
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>flex-direction</code></strong> définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments (normale ou inversée).</p>
+La propriété **`flex-direction`** définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments (normale ou inversée).
 
-<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>
+{{EmbedInteractiveExample("pages/css/flex-direction.html")}}
 
-<p>On notera que les valeurs <code>row</code> et <code>row-reverse</code> sont impactées par la direction du conteneur. Si {{htmlattrxref("dir")}} vaut <code>ltr</code>, <code>row</code> représente l'axe horizontal allant de la gauche vers la droite et <code>row-reverse</code> représente le même axe allant de la droite vers la gauche. Si <code>dir</code> vaut <code>rtl</code>, <code>row</code> correspondra à l'axe horizontal orienté de la droite vers la gauche et <code>row-reverse</code> de la gauche vers la droite.</p>
+On notera que les valeurs `row` et `row-reverse` sont impactées par la direction du conteneur. Si {{htmlattrxref("dir")}} vaut `ltr`, `row` représente l'axe horizontal allant de la gauche vers la droite et `row-reverse` représente le même axe allant de la droite vers la gauche. Si `dir` vaut `rtl`, `row` correspondra à l'axe horizontal orienté de la droite vers la gauche et `row-reverse` de la gauche vers la droite.
 
-<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+Pour plus d'informations, voir la page [Utiliser les boîtes flexibles (_flexbox_) CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* La direction suit une ligne */
+```css
+/* La direction suit une ligne */
 flex-direction: row;
 
-/* Semblable à &lt;row&gt; mais dans */
+/* Semblable à <row> mais dans */
 /* la direction opposée        */
 flex-direction: row-reverse;
 
@@ -30,7 +31,7 @@ flex-direction: row-reverse;
 /* empilées                 */
 flex-direction: column;
 
-/* Semblable à &lt;column&gt; mais dans */
+/* Semblable à <column> mais dans */
 /* la direction opposée           */
 flex-direction: column-reverse;
 
@@ -38,46 +39,46 @@ flex-direction: column-reverse;
 flex-direction: inherit;
 flex-direction: initial;
 flex-direction: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>row</code></dt>
- <dd>L'axe principal du conteneur flexible suit la direction du texte. Les points <strong>main-start</strong> et <strong>main-end</strong> vont dans la même direction que le contenu.</dd>
- <dt><code>row-reverse</code></dt>
- <dd>L'axe principal du conteneur flexible suit la direction du texte. Les points <strong>main-start</strong> et <strong>main-end</strong> vont dans la direction opposée au contenu.</dd>
- <dt><code>column</code></dt>
- <dd>L'axe principal du conteneur flexible suit l'axe de bloc (perpendiculaire à la direction du texte). Les points <strong>main-start</strong> et <strong>main-end</strong> correspondent aux points <strong>before</strong> et <strong>after</strong> de {{cssxref("writing-mode")}}.</dd>
- <dt><code>column-reverse</code></dt>
- <dd>Se comporte comme <code>column</code> mais <strong>main-start</strong> et <strong>main-end</strong> sont échangés.</dd>
-</dl>
+- `row`
+  - : L'axe principal du conteneur flexible suit la direction du texte. Les points **main-start** et **main-end** vont dans la même direction que le contenu.
+- `row-reverse`
+  - : L'axe principal du conteneur flexible suit la direction du texte. Les points **main-start** et **main-end** vont dans la direction opposée au contenu.
+- `column`
+  - : L'axe principal du conteneur flexible suit l'axe de bloc (perpendiculaire à la direction du texte). Les points **main-start** et **main-end** correspondent aux points **before** et **after** de {{cssxref("writing-mode")}}.
+- `column-reverse`
+  - : Se comporte comme `column` mais **main-start** et **main-end** sont échangés.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;h4&gt;Un exemple avec column-reverse&lt;/h4&gt;
-&lt;div id="content"&gt;
-    &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
-    &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
-    &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
-&lt;/div&gt;
-&lt;h4&gt;Un exemple avec row-reverse&lt;/h4&gt;
-&lt;div id="content1"&gt;
-    &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
-    &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
-    &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">#content {
+## Exemples
+
+### HTML
+
+```html
+<h4>Un exemple avec column-reverse</h4>
+<div id="content">
+    <div class="box" style="background-color:red;">A</div>
+    <div class="box" style="background-color:lightblue;">B</div>
+    <div class="box" style="background-color:yellow;">C</div>
+</div>
+<h4>Un exemple avec row-reverse</h4>
+<div id="content1">
+    <div class="box" style="background-color:red;">A</div>
+    <div class="box" style="background-color:lightblue;">B</div>
+    <div class="box" style="background-color:yellow;">C</div>
+</div>
+```
+
+### CSS
+
+```css
+#content {
   width: 200px;
   height: 200px;
   border: 1px solid #c3c3c3;
@@ -96,51 +97,35 @@ flex-direction: unset;
 .box {
   width: 50px;
   height: 50px;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '', '300')}}</p>
+{{EmbedLiveSample('Exemples', '', '300')}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Lorsqu'on utilise <code>flex-direction</code> avec les valeurs <code>row-reverse</code> ou <code>column-reverse</code>, on crée une déconnexion entre la présentation visuelle du contenu et l'ordre du DOM. Cela aura un impact négatif pour les utilisateurs qui naviguent à l'aide d'outils d'assistance tels que les les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct pour la lecture.</p>
+Lorsqu'on utilise `flex-direction` avec les valeurs `row-reverse` ou `column-reverse`, on crée une déconnexion entre la présentation visuelle du contenu et l'ordre du DOM. Cela aura un impact négatif pour les utilisateurs qui naviguent à l'aide d'outils d'assistance tels que les les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct pour la lecture.
 
-<ul>
- <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Les boîtes flexibles et la déconnexion par rapport à la navigation au clavier, Tink (en anglais)</a></li>
- <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">L'importance de l'ordre de la source, Adrian Roselli (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles 1.3 du WCAG</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Comprendre les critères de réussite 1.3.2 WCAG 2.0, W3C (en anglais)</a></li>
-</ul>
+- [Les boîtes flexibles et la déconnexion par rapport à la navigation au clavier, Tink (en anglais)](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
+- [L'importance de l'ordre de la source, Adrian Roselli (en anglais)](http://adrianroselli.com/2015/09/source-order-matters.html)
+- [Comprendre les règles 1.3 du WCAG](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- [Comprendre les critères de réussite 1.3.2 WCAG 2.0, W3C (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.flex-direction")}}</p>
+{{Compat("css.properties.flex-direction")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base</a></em></li>
- <li>Guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li>
-</ul>
+- Guide CSS sur les boîtes flexibles : _[Concepts de base](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_
+- Guide CSS sur les boîtes flexibles : _[Ordonner les éléments flexibles](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items)_
diff --git a/files/fr/web/css/flex-flow/index.md b/files/fr/web/css/flex-flow/index.md
index f6fd1b2c4b..7a3070eff2 100644
--- a/files/fr/web/css/flex-flow/index.md
+++ b/files/fr/web/css/flex-flow/index.md
@@ -7,28 +7,29 @@ tags:
   - Reference
 translation_of: Web/CSS/flex-flow
 ---
-<div>{{ CSSRef}}</div>
+{{ CSSRef}}
 
-<p>La propriété CSS <strong><code>flex-flow</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> pour les propriétés {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}}.</p>
+La propriété CSS **`flex-flow`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) pour les propriétés {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div>
+{{EmbedInteractiveExample("pages/css/flex-flow.html")}}
 
-<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+Pour plus d'informations, voir la page [Utiliser les boîtes flexibles (_flexbox_) CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* flex-flow: &lt;'flex-direction'&gt; */
+```css
+/* flex-flow: <'flex-direction'> */
 flex-flow: row;
 flex-flow: row-reverse;
 flex-flow: column;
 flex-flow: column-reverse;
 
-/* flex-flow: &lt;'flex-wrap'&gt; */
+/* flex-flow: <'flex-wrap'> */
 flex-flow: nowrap;
 flex-flow: wrap;
 flex-flow: wrap-reverse;
 
-/* flex-flow: &lt;'flex-direction'&gt; et &lt;'flex-wrap'&gt; */
+/* flex-flow: <'flex-direction'> et <'flex-wrap'> */
 flex-flow: row nowrap;
 flex-flow: column wrap;
 flex-flow: column-reverse wrap-reverse;
@@ -37,19 +38,20 @@ flex-flow: column-reverse wrap-reverse;
 flex-flow: inherit;
 flex-flow: initial;
 flex-flow: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Voir {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} pour plus d'informations sur les valeurs que peuvent prendre ces deux propriétés.</p>
+Voir {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} pour plus d'informations sur les valeurs que peuvent prendre ces deux propriétés.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:css">element {
+```css
+element {
 
   /* L'axe principal sera la direction de bloc  */
   /* et on commencera par le bas (main-start et */
@@ -59,36 +61,21 @@ flex-flow: unset;
   flex-flow: column-reverse wrap;
 
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.flex-flow")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.flex-flow")}}
+
+## Voir aussi
+
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- Guide sur les boîtes flexibles : _[Ordonner les éléments flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_
diff --git a/files/fr/web/css/flex-grow/index.md b/files/fr/web/css/flex-grow/index.md
index a90ebf2a8e..deafc4b484 100644
--- a/files/fr/web/css/flex-grow/index.md
+++ b/files/fr/web/css/flex-grow/index.md
@@ -7,62 +7,63 @@ tags:
   - Reference
 translation_of: Web/CSS/flex-grow
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>flex-grow</code></strong> définit le facteur d'expansion d'un élément flexible selon sa dimension principale. Elle indique la quantité d'espace restant que l'élément devrait consommer dans un conteneur flexible relativement à la taille des autres éléments du même conteneur.</p>
+La propriété CSS **`flex-grow`** définit le facteur d'expansion d'un élément flexible selon sa dimension principale. Elle indique la quantité d'espace restant que l'élément devrait consommer dans un conteneur flexible relativement à la taille des autres éléments du même conteneur.
 
-<p>La dimension principale correspond à la hauteur ou à la largeur de l'élément selon la valeur de {{cssxref("flex-direction")}}.</p>
+La dimension principale correspond à la hauteur ou à la largeur de l'élément selon la valeur de {{cssxref("flex-direction")}}.
 
-<p>L'espace restant qui est réparti correspond à la taille du conteneur flexible moins la somme des tailles des éléments flexibles. Si tous les éléments voisins possèdent le même facteur d'expansion, ils recevront tous la même part d'espace.</p>
+L'espace restant qui est réparti correspond à la taille du conteneur flexible moins la somme des tailles des éléments flexibles. Si tous les éléments voisins possèdent le même facteur d'expansion, ils recevront tous la même part d'espace.
 
-<p>La plupart du temps <code>flex-grow</code> est utilisé avec les autres propriétés flexibles {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. On pourra utiliser la propriété raccourcie {{cssxref("flex")}} afin de s'assurer que toutes les valeurs des propriétés flexibles auront été définies.</p>
+La plupart du temps `flex-grow` est utilisé avec les autres propriétés flexibles {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. On pourra utiliser la propriété raccourcie {{cssxref("flex")}} afin de s'assurer que toutes les valeurs des propriétés flexibles auront été définies.
 
-<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
+{{EmbedInteractiveExample("pages/css/flex-grow.html")}}
 
-<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+Pour plus d'informations, voir la page [Utiliser les boîtes flexibles (_flexbox_) CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">flex-grow: 2;
+```css
+flex-grow: 2;
 flex-grow: 0.6;
 
 /* Valeurs globales */
 flex-shrink: inherit;
 flex-shrink: initial;
 flex-shrink: unset;
-</pre>
+```
 
-<p>La propriété <code>flex-grow</code> se définit avec une valeur de type <code><a href="#number">&lt;number&gt;</a></code>.</p>
+La propriété `flex-grow` se définit avec une valeur de type [`<number>`](#number).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Un nombre (type {{cssxref("&lt;number&gt;")}} qui correspond au facteur de grossissement utilisé. Plus la valeur est élevée, plus l'élément sera étendu si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est 0.</dd>
-</dl>
+- `<number>`
+  - : Un nombre (type {{cssxref("&lt;number&gt;")}} qui correspond au facteur de grossissement utilisé. Plus la valeur est élevée, plus l'élément sera étendu si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est 0.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;h4&gt;A,B,C et F ont flex-shrink:1 . D et E ont flex-grow:1 .&lt;/h4&gt;
-&lt;div id="content"&gt;
-  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
-  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
-  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
-  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
-  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
-  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<h4>A,B,C et F ont flex-shrink:1 . D et E ont flex-grow:1 .</h4>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#content {
+```css
+#content {
   display: flex;
 
   justify-content: space-around;
@@ -79,41 +80,26 @@ flex-shrink: unset;
   flex-grow: 1;
   border: 3px solid rgba(0,0,0,.2);
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '700px', '300px')}}</p>
+{{EmbedLiveSample('Exemples', '700px', '300px')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.flex-grow")}}</p>
+{{Compat("css.properties.flex-grow")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://css-tricks.com/flex-grow-is-weird/"><code>flex-grow</code> est étrange ?</a> un article (en anglais) écrit par Manuel Matuzovic sur CSS-Tricks et qui illustre le fonctionnement de <code>flex-grow</code></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
-</ul>
+- [`flex-grow` est étrange ?](https://css-tricks.com/flex-grow-is-weird/) un article (en anglais) écrit par Manuel Matuzovic sur CSS-Tricks et qui illustre le fonctionnement de `flex-grow`
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_
+- Guide sur les boîtes flexibles : _[Contrôler les proportions des boîtes flexibles le long de l'axe principal](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal)_
diff --git a/files/fr/web/css/flex-shrink/index.md b/files/fr/web/css/flex-shrink/index.md
index c3c04c7657..2032bf417f 100644
--- a/files/fr/web/css/flex-shrink/index.md
+++ b/files/fr/web/css/flex-shrink/index.md
@@ -7,20 +7,21 @@ tags:
   - Reference
 translation_of: Web/CSS/flex-shrink
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>flex-shrink</code></strong> définit le facteur de rétrécissement d'un élément flexible. Si la taille de l'ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteur <code>flex-shrink</code>.</p>
+La propriété **`flex-shrink`** définit le facteur de rétrécissement d'un élément flexible. Si la taille de l'ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteur `flex-shrink`.
 
-<p><code>flex-shrink</code> est généralement utilisé avec les propriétés {{cssxref("flex-grow")}} et {{cssxref("flex-basis")}}. Elle est souvent définie grâce à la propriété raccourcie {{cssxref("flex")}}.</p>
+`flex-shrink` est généralement utilisé avec les propriétés {{cssxref("flex-grow")}} et {{cssxref("flex-basis")}}. Elle est souvent définie grâce à la propriété raccourcie {{cssxref("flex")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div>
+{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
 
-<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+Pour plus d'informations, voir la page [Utiliser les boîtes flexibles (_flexbox_) CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs numériques */
-/* Type &lt;number&gt;      */
+```css
+/* Valeurs numériques */
+/* Type <number>      */
 flex-shrink: 2;
 flex-shrink: 0.6;
 
@@ -28,38 +29,38 @@ flex-shrink: 0.6;
 flex-shrink: inherit;
 flex-shrink: initial;
 flex-shrink: unset;
-</pre>
+```
 
-<p>La propriété <code>flex-shrink</code> est définie grâce à une valeur de type <code><a href="#number">&lt;number&gt;</a></code>.</p>
+La propriété `flex-shrink` est définie grâce à une valeur de type [`<number>`](#number).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Un nombre (type {{cssxref("&lt;number&gt;")}}) qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est <code>1</code>.</dd>
-</dl>
+- `<number>`
+  - : Un nombre (type {{cssxref("&lt;number&gt;")}}) qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est `1`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.&lt;/p&gt;
-&lt;div id="content"&gt;
-  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
-  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
-  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
-  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
-  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<p>A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#content {
+```css
+#content {
   display: flex;
   width: 500px;
 }
@@ -76,40 +77,25 @@ flex-shrink: unset;
 .box1 {
   flex-shrink: 2;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', 500, 300)}}</p>
+{{EmbedLiveSample('Exemples', 500, 300)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                             | Commentaires         |
+| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.flex-shrink")}}</p>
+{{Compat("css.properties.flex-shrink")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
-</ul>
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_
+- Guide sur les boîtes flexibles : _[Contrôler les proportions des boîtes flexibles le long de l'axe principal](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal)_
diff --git a/files/fr/web/css/flex-wrap/index.md b/files/fr/web/css/flex-wrap/index.md
index 004f6f8e6f..606e97356d 100644
--- a/files/fr/web/css/flex-wrap/index.md
+++ b/files/fr/web/css/flex-wrap/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/flex-wrap
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>flex-wrap</code></strong> indique si les éléments flexibles sont contraints à être disposés sur une seule ligne ou s'ils peuvent être affichés sur plusieurs lignes avec un retour automatique. Si le retour à la ligne est autorisé, la propriété permet également de contrôler la direction dans laquelle les lignes sont empilées.</p>
+La propriété **`flex-wrap`** indique si les éléments flexibles sont contraints à être disposés sur une seule ligne ou s'ils peuvent être affichés sur plusieurs lignes avec un retour automatique. Si le retour à la ligne est autorisé, la propriété permet également de contrôler la direction dans laquelle les lignes sont empilées.
 
-<div>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</div>
+{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}
 
-<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+Pour plus d'informations, voir la page [Utiliser les boîtes flexibles (_flexbox_) CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 flex-wrap: nowrap; /* Valeur par défaut */
 flex-wrap: wrap;
 flex-wrap: wrap-reverse;
@@ -26,54 +27,54 @@ flex-wrap: wrap-reverse;
 flex-wrap: inherit;
 flex-wrap: initial;
 flex-wrap: unset;
-</pre>
+```
 
-<p>La propriété <code>flex-wrap</code> peut être défini grâce à l'un des mots-clés suivants.</p>
+La propriété `flex-wrap` peut être défini grâce à l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>nowrap</code></dt>
- <dd>Les éléments flexibles sont disposés sur une seule ligne. Cela peut entraîner un dépassement du conteneur. La ligne <strong>cross-start</strong> est équivalente à <strong>start</strong> ou à <strong>before</strong> selon la valeur de {{cssxref("flex-direction")}}. Cette valeur est la valeur par défaut.</dd>
- <dt><code>wrap</code></dt>
- <dd>Les éléments flexibles sont disposé sur plusieurs lignes. La ligne <strong>cross-start</strong> est équivalente à  <strong>start</strong> ou <strong>before</strong> en fonction de la valeur de <code>flex-direction</code> et la ligne <strong>cross-end</strong> est à l'opposée <strong>cross-start</strong>.</dd>
- <dt><code>wrap-reverse</code></dt>
- <dd>Se comporte comme <code>wrap</code> mais <strong>cross-start</strong> et <strong>cross-end</strong> sont permutées.</dd>
-</dl>
+- `nowrap`
+  - : Les éléments flexibles sont disposés sur une seule ligne. Cela peut entraîner un dépassement du conteneur. La ligne **cross-start** est équivalente à **start** ou à **before** selon la valeur de {{cssxref("flex-direction")}}. Cette valeur est la valeur par défaut.
+- `wrap`
+  - : Les éléments flexibles sont disposé sur plusieurs lignes. La ligne **cross-start** est équivalente à  **start** ou **before** en fonction de la valeur de `flex-direction` et la ligne **cross-end** est à l'opposée **cross-start**.
+- `wrap-reverse`
+  - : Se comporte comme `wrap` mais **cross-start** et **cross-end** sont permutées.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;h4&gt;Un exemple de flex-wrap:wrap &lt;/h4&gt;
-&lt;div class="contenu"&gt;
-  &lt;div class="rouge"&gt;1&lt;/div&gt;
-  &lt;div class="vert"&gt;2&lt;/div&gt;
-  &lt;div class="bleu"&gt;3&lt;/div&gt;
-&lt;/div&gt;
+```html
+<h4>Un exemple de flex-wrap:wrap </h4>
+<div class="contenu">
+  <div class="rouge">1</div>
+  <div class="vert">2</div>
+  <div class="bleu">3</div>
+</div>
 
-&lt;h4&gt;Un exemple de flex-wrap:nowrap &lt;/h4&gt;
-&lt;div class="contenu1"&gt;
-  &lt;div class="rouge"&gt;1&lt;/div&gt;
-  &lt;div class="vert"&gt;2&lt;/div&gt;
-  &lt;div class="bleu"&gt;3&lt;/div&gt;
-&lt;/div&gt;
+<h4>Un exemple de flex-wrap:nowrap </h4>
+<div class="contenu1">
+  <div class="rouge">1</div>
+  <div class="vert">2</div>
+  <div class="bleu">3</div>
+</div>
 
-&lt;h4&gt;Un exemple de flex-wrap:wrap-reverse &lt;/h4&gt;
-&lt;div class="contenu2"&gt;
-  &lt;div class="rouge"&gt;1&lt;/div&gt;
-  &lt;div class="vert"&gt;2&lt;/div&gt;
-  &lt;div class="bleu"&gt;3&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+<h4>Un exemple de flex-wrap:wrap-reverse </h4>
+<div class="contenu2">
+  <div class="rouge">1</div>
+  <div class="vert">2</div>
+  <div class="bleu">3</div>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.contenu,
+```css
+.contenu,
 .contenu1,
 .contenu2 {
     color: #fff;
@@ -111,41 +112,25 @@ flex-wrap: unset;
     display: flex;
     flex-wrap: wrap-reverse;
 }
+```
 
-</pre>
+### Résultat
 
-<h3 id="Résultat">Résultat</h3>
+{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}}
 
-<p>{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}}</p>
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
+| Spécification                                                                        | État                             | Commentaires |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}} | {{Spec2('CSS3 Flexbox')}} |              |
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+{{cssinfo}}
 
-<p>{{cssinfo}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.properties.flex-wrap")}}
 
-<p>{{Compat("css.properties.flex-wrap")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Maîtriser le retour à la ligne des éléments flexibles</a></em></li>
-</ul>
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- Guide sur les boîtes flexibles : _[Maîtriser le retour à la ligne des éléments flexibles](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)_
diff --git a/files/fr/web/css/flex/index.md b/files/fr/web/css/flex/index.md
index 2214dc0f6f..a2d14125d5 100644
--- a/files/fr/web/css/flex/index.md
+++ b/files/fr/web/css/flex/index.md
@@ -7,62 +7,64 @@ tags:
   - Reference
 translation_of: Web/CSS/flex
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>flex</code></strong> est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.</p>
+La propriété **`flex`** est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.
 
-<p>Les propriétés détaillées correspondantes à cette propriété raccourcie sont {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}.</p>
+Les propriétés détaillées correspondantes à cette propriété raccourcie sont {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}.
 
-<p>Les éléments flexibles peuvent être étirés ou réduits pour utiliser un espace proportionnel à leur coefficient de grossissement ou de rétrécissement afin de ne pas dépasser d'un conteneur.</p>
+Les éléments flexibles peuvent être étirés ou réduits pour utiliser un espace proportionnel à leur coefficient de grossissement ou de rétrécissement afin de ne pas dépasser d'un conteneur.
 
-<div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div>
+{{EmbedInteractiveExample("pages/css/flex.html")}}
 
-<h2 id="description">Description</h2>
+## Description
 
-<p>Pour la plupart des cas, on utilisera une des valeurs suivantes : <code>auto</code>, <code>initial</code>, <code>none</code> ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :</p>
+Pour la plupart des cas, on utilisera une des valeurs suivantes : `auto`, `initial`, `none` ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :
 
-<pre class="hidden brush: html">&lt;div class="flex-container"&gt;
+```html hidden
+<div class="flex-container">
 
-   &lt;div class="item auto"&gt;auto&lt;/div&gt;
-   &lt;div class="item auto"&gt;auto&lt;/div&gt;
-   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   <div class="item auto">auto</div>
+   <div class="item auto">auto</div>
+   <div class="item auto">auto</div>
 
-&lt;/div&gt;
+</div>
 
-&lt;div class="flex-container"&gt;
+<div class="flex-container">
 
-   &lt;div class="item auto"&gt;auto&lt;/div&gt;
-   &lt;div class="item initial"&gt;initial&lt;/div&gt;
-   &lt;div class="item initial"&gt;initial&lt;/div&gt;
+   <div class="item auto">auto</div>
+   <div class="item initial">initial</div>
+   <div class="item initial">initial</div>
 
-&lt;/div&gt;
+</div>
 
-&lt;div class="flex-container"&gt;
+<div class="flex-container">
 
-   &lt;div class="item auto"&gt;auto&lt;/div&gt;
-   &lt;div class="item auto"&gt;auto&lt;/div&gt;
-   &lt;div class="item none"&gt;none&lt;/div&gt;
+   <div class="item auto">auto</div>
+   <div class="item auto">auto</div>
+   <div class="item none">none</div>
 
-&lt;/div&gt;
+</div>
 
-&lt;div class="flex-container"&gt;
+<div class="flex-container">
 
-   &lt;div class="item initial"&gt;initial&lt;/div&gt;
-   &lt;div class="item none"&gt;none&lt;/div&gt;
-   &lt;div class="item none"&gt;none&lt;/div&gt;
+   <div class="item initial">initial</div>
+   <div class="item none">none</div>
+   <div class="item none">none</div>
 
-&lt;/div&gt;
+</div>
 
-&lt;div class="flex-container"&gt;
+<div class="flex-container">
 
-   &lt;div class="item four"&gt;4&lt;/div&gt;
-   &lt;div class="item two"&gt;2&lt;/div&gt;
-   &lt;div class="item one"&gt;1&lt;/div&gt;
+   <div class="item four">4</div>
+   <div class="item two">2</div>
+   <div class="item one">1</div>
 
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<pre class="hidden brush: css">* {
+```css hidden
+* {
   box-sizing: border-box;
 }
 
@@ -107,17 +109,18 @@ translation_of: Web/CSS/flex
 .one {
   flex: 1;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("description", "100%","370")}}</p>
+{{EmbedLiveSample("description", "100%","370")}}
 
-<p>Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p>
+Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer {{cssxref("min-width")}} ou {{cssxref("min-height")}}.
 
-<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" title="CSS/Using_CSS_flexible_boxes">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a> pour plus d'informations.</p>
+Voir la page [Utiliser les boîtes flexibles (_flexbox_) CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox "CSS/Using_CSS_flexible_boxes") pour plus d'informations.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de base */
+```css
+/* Valeurs de base */
 flex: auto;
 flex: initial;
 flex: none;
@@ -145,146 +148,122 @@ flex: 2 2 10%;
 flex: inherit;
 flex: initial;
 flex: unset;
-</pre>
-
-<p>La propriété <code>flex</code> peut être définie avec une, deux ou trois valeurs.</p>
-
-<ul>
- <li><strong>Avec une valeur</strong>, la syntaxe doit être :
-
-  <ul>
-   <li>un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#grow">&lt;flex-grow&gt;</a></code></li>
-   <li>ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis">&lt;flex-basis&gt;</a></code></li>
-   <li>ou le mot-clé <code><a href="#none">none</a></code>.</li>
-  </ul>
- </li>
- <li><strong>Avec deux valeurs</strong>
-  <ul>
-   <li>la première doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) qui correspond à la valeur de <code><a href="#grow">&lt;flex-grow&gt;</a></code>.</li>
-   <li>la seconde valeur doit être :
-    <ul>
-     <li>un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#shrink">&lt;flex-shrink&gt;</a></code></li>
-     <li>ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis">&lt;flex-basis&gt;</a></code></li>
-    </ul>
-   </li>
-  </ul>
- </li>
- <li><strong>Avec trois valeurs</strong>
-  <ul>
-   <li>la première valeur doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#grow">&lt;flex-grow&gt;</a></code></li>
-   <li>la deuxième valeur doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#shrink">&lt;flex-shrink&gt;</a></code></li>
-   <li>la troisième valeur doit être une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis">&lt;flex-basis&gt;</a></code></li>
-  </ul>
- </li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code> mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "<code>flex: 1 1 auto</code>".</dd>
- <dt><code>initial</code></dt>
- <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code>. Ce comportement est équivalent à la valeur par défaut (<code>0 1 auto</code>). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "<code>flex: 0 1 auto</code>".</dd>
- <dt><code>none</code></dt>
- <dd>L'élément est dimensionné par rapport à ses propriétés <code>width</code> et <code>height</code>. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "<code>flex: 0 0 auto</code>".</dd>
- <dt><code>&lt;'flex-grow'&gt;</code></dt>
- <dd>Voir {{cssxref("flex-grow")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd>
- <dt><code>&lt;'flex-shrink'&gt;</code></dt>
- <dd>Voir {{cssxref("flex-shrink")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd>
- <dt><code>&lt;'flex-basis'&gt;</code></dt>
- <dd>Voir {{cssxref("flex-basis")}}. Une valeur valide pour {{cssxref("width")}} et {{cssxref("height")}}. La valeur par défaut est <code>0</code>.</dd>
-</dl>
-
-<div class="note">
-  <p><strong>Note :</strong> Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, <code>flex-basis</code> vaudra 0. Pour plus d'informations, voir <a href="https://drafts.csswg.org/css-flexbox/#flex-common">le brouillon de spécification du module des boîtes flexibles</a>.</p>
-</div>
+```
+
+La propriété `flex` peut être définie avec une, deux ou trois valeurs.
+
+- **Avec une valeur**, la syntaxe doit être :
+
+  - un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de [`<flex-grow>`](#grow)
+  - ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de [`<flex-basis>`](#basis)
+  - ou le mot-clé [`none`](#none).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- **Avec deux valeurs**
+
+  - la première doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) qui correspond à la valeur de [`<flex-grow>`](#grow).
+  - la seconde valeur doit être :
+
+    - un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de [`<flex-shrink>`](#shrink)
+    - ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de [`<flex-basis>`](#basis)
+
+- **Avec trois valeurs**
+
+  - la première valeur doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de [`<flex-grow>`](#grow)
+  - la deuxième valeur doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de [`<flex-shrink>`](#shrink)
+  - la troisième valeur doit être une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de [`<flex-basis>`](#basis)
+
+### Valeurs
+
+- `auto`
+  - : L'élément est dimensionné selon ses propriétés `width` et `height` mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "`flex: 1 1 auto`".
+- `initial`
+  - : L'élément est dimensionné selon ses propriétés `width` et `height`. Ce comportement est équivalent à la valeur par défaut (`0 1 auto`). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "`flex: 0 1 auto`".
+- `none`
+  - : L'élément est dimensionné par rapport à ses propriétés `width` et `height`. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "`flex: 0 0 auto`".
+- `<'flex-grow'>`
+  - : Voir {{cssxref("flex-grow")}}. Les valeurs négatives sont interdites et la valeur par défaut est `1`.
+- `<'flex-shrink'>`
+  - : Voir {{cssxref("flex-shrink")}}. Les valeurs négatives sont interdites et la valeur par défaut est `1`.
+- `<'flex-basis'>`
+  - : Voir {{cssxref("flex-basis")}}. Une valeur valide pour {{cssxref("width")}} et {{cssxref("height")}}. La valeur par défaut est `0`.
+
+> **Note :** Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, `flex-basis` vaudra 0. Pour plus d'informations, voir [le brouillon de spécification du module des boîtes flexibles](https://drafts.csswg.org/css-flexbox/#flex-common).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#flex-container {
+```css
+#flex-container {
 	display: flex;
 	flex-direction: row;
 }
 
-#flex-container &gt; .flex-item {
+#flex-container > .flex-item {
 	flex: auto;
 }
 
-#flex-container &gt; .raw-item {
+#flex-container > .raw-item {
 	width: 5rem;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="flex-container"&gt;
-    &lt;div class="flex-item" id="flex"&gt;Boîte flexible (cliquer pour passer à la boîte « normale »)&lt;/div&gt;
-    &lt;div class="raw-item" id="raw"&gt;Boîte « normale » &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div id="flex-container">
+    <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div>
+    <div class="raw-item" id="raw">Boîte « normale » </div>
+</div>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var flex = document.getElementById("flex");
+```js
+var flex = document.getElementById("flex");
 var raw = document.getElementById("raw");
 flex.addEventListener("click", function() {
 	raw.style.display = raw.style.display == "none" ? "block" : "none";
 });
-</pre>
+```
 
-<pre class="brush: css">#flex-container {
+```css
+#flex-container {
 	width: 100%;
 	font-family: Consolas, Arial, sans-serif;
 }
 
-#flex-container &gt; div {
+#flex-container > div {
 	border: 1px solid #f00;
 	padding: 1rem;
 }
 
-#flex-container &gt; .raw-item {
+#flex-container > .raw-item {
 	border: 1px solid #000;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples','100%','60')}}</p>
+{{EmbedLiveSample('Exemples','100%','60')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.flex")}}</p>
+{{Compat("css.properties.flex")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
-</ul>
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- Guide sur les boîtes flexibles : _[Contrôler les proportions des boîtes flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_
diff --git a/files/fr/web/css/flex_value/index.md b/files/fr/web/css/flex_value/index.md
index 0c0bd73128..9392f894be 100644
--- a/files/fr/web/css/flex_value/index.md
+++ b/files/fr/web/css/flex_value/index.md
@@ -9,45 +9,31 @@ tags:
   - Web
 translation_of: Web/CSS/flex_value
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>&lt;flex&gt;</code></strong> permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité <code>fr</code>. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres.</p>
+Le type de donnée [CSS](/fr/docs/Web/CSS) **`<flex>`** permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité `fr`. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Le type de donnée <code>&lt;flex&gt;</code> est défini par un nombre ({{cssxref("&lt;number&gt;")}} suivi de l'unité <code>fr</code>. L'unité <code>fr</code> représente une <strong>fr</strong>action de l'espace restant dans le conteneur en grille. Comme pour les autres dimensions, il n'y a pas d'espace entre la valeur et l'unité.</p>
+Le type de donnée `<flex>` est défini par un nombre ({{cssxref("&lt;number&gt;")}} suivi de l'unité `fr`. L'unité `fr` représente une **fr**action de l'espace restant dans le conteneur en grille. Comme pour les autres dimensions, il n'y a pas d'espace entre la valeur et l'unité.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">1fr    /* Utilisation d'une valeur entière */
+```css
+1fr    /* Utilisation d'une valeur entière */
 2.5fr  /* Utilisation d'une valeur flottante */
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Grid", "#typedef-flex", "&lt;flex&gt;")}}</td>
-   <td>{{Spec2("CSS Grid")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.flex")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Le mode de disposition en grille (CSS Grid)</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaire         |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("CSS Grid", "#typedef-flex", "&lt;flex&gt;")}} | {{Spec2("CSS Grid")}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.flex")}}
+
+## Voir aussi
+
+- [Le mode de disposition en grille (CSS Grid)](/fr/docs/Web/CSS/CSS_Grid_Layout)
diff --git a/files/fr/web/css/float/index.md b/files/fr/web/css/float/index.md
index e814524cfb..e70d65e8bb 100644
--- a/files/fr/web/css/float/index.md
+++ b/files/fr/web/css/float/index.md
@@ -7,90 +7,39 @@ tags:
   - Reference
 translation_of: Web/CSS/float
 ---
-<div>{{CSSRef}}</div>
-
-<p>La propriété <strong><code>float</code></strong> indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (<em>inline</em>) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au <a href="/fr/docs/Web/CSS/position#positionnement_absolu">positionnement absolu</a>).</p>
-
-<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div>
-
-<p>Un <strong>élément flottant</strong> est un élément pour lequel <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de <code>float</code> est différente de <code>none</code>.</p>
-
-<p><code>float</code> implique l'utilisation d'une disposition en bloc, cette propriété modifie donc la valeur de {{cssxref("display")}} dans certains cas :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><a href="/fr/docs/Web/CSS/specified_value">Valeur spécifiée</a></th>
-   <th scope="col"><a href="/fr/docs/Web/CSS/computed_value">Valeur calculée</a></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>inline</code></td>
-   <td><code>block</code></td>
-  </tr>
-  <tr>
-   <td><code>inline-block</code></td>
-   <td><code>block</code></td>
-  </tr>
-  <tr>
-   <td><code>inline-table</code></td>
-   <td><code>table</code></td>
-  </tr>
-  <tr>
-   <td><code>table-row</code></td>
-   <td><code>block</code></td>
-  </tr>
-  <tr>
-   <td><code>table-row-group</code></td>
-   <td><code>block</code></td>
-  </tr>
-  <tr>
-   <td><code>table-column</code></td>
-   <td><code>block</code></td>
-  </tr>
-  <tr>
-   <td><code>table-column-group</code></td>
-   <td><code>block</code></td>
-  </tr>
-  <tr>
-   <td><code>table-cell</code></td>
-   <td><code>block</code></td>
-  </tr>
-  <tr>
-   <td><code>table-caption</code></td>
-   <td><code>block</code></td>
-  </tr>
-  <tr>
-   <td><code>table-header-group</code></td>
-   <td><code>block</code></td>
-  </tr>
-  <tr>
-   <td><code>table-footer-group</code></td>
-   <td><code>block</code></td>
-  </tr>
-  <tr>
-   <td><code>inline-flex</code></td>
-   <td><code>flex</code></td>
-  </tr>
-  <tr>
-   <td><code>inline-grid</code></td>
-   <td><code>grid</code></td>
-  </tr>
-  <tr>
-   <td><em>autre</em></td>
-   <td><em>inchangée</em></td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-  <p><strong>Note :</strong>Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet {{domxref("HTMLElement.style")}}, la plupart des navigateurs récents permettra d'utiliser <code>float</code> mais il faudra utiliser <code>cssFloat</code> (attention à la casse) pour les navigateurs plus anciens. Pour Internet Explorer 8 et les versions antérieures, elle était appelée <code>styleFloat</code>. Le terme <code>float</code> étant réservé en JavaScript, ce cas de figure était une exception à la règle qui définit que le nom de la propriété DOM est une version <a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a> de la propriété CSS construite avec des tirets. De même, <code>class</code> sera échappée en <code>className</code> et le <code>for</code> des éléments &lt;label&gt; sera converti en <code>htmlFor</code>).</p>
-</div>
+{{CSSRef}}
+
+La propriété **`float`** indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (_inline_) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au [positionnement absolu](/fr/docs/Web/CSS/position#positionnement_absolu)).
+
+{{EmbedInteractiveExample("pages/css/float.html")}}
+
+Un **élément flottant** est un élément pour lequel [la valeur calculée](/fr/docs/Web/CSS/computed_value) de `float` est différente de `none`.
+
+`float` implique l'utilisation d'une disposition en bloc, cette propriété modifie donc la valeur de {{cssxref("display")}} dans certains cas :
 
-<h2 id="Syntaxe">Syntaxe</h2>
+| [Valeur spécifiée](/fr/docs/Web/CSS/specified_value) | [Valeur calculée](/fr/docs/Web/CSS/computed_value) |
+| ---------------------------------------------------- | -------------------------------------------------- |
+| `inline`                                             | `block`                                            |
+| `inline-block`                                       | `block`                                            |
+| `inline-table`                                       | `table`                                            |
+| `table-row`                                          | `block`                                            |
+| `table-row-group`                                    | `block`                                            |
+| `table-column`                                       | `block`                                            |
+| `table-column-group`                                 | `block`                                            |
+| `table-cell`                                         | `block`                                            |
+| `table-caption`                                      | `block`                                            |
+| `table-header-group`                                 | `block`                                            |
+| `table-footer-group`                                 | `block`                                            |
+| `inline-flex`                                        | `flex`                                             |
+| `inline-grid`                                        | `grid`                                             |
+| _autre_                                              | _inchangée_                                        |
 
-<pre class="brush:css">float: left;
+> **Note :**Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet {{domxref("HTMLElement.style")}}, la plupart des navigateurs récents permettra d'utiliser `float` mais il faudra utiliser `cssFloat` (attention à la casse) pour les navigateurs plus anciens. Pour Internet Explorer 8 et les versions antérieures, elle était appelée `styleFloat`. Le terme `float` étant réservé en JavaScript, ce cas de figure était une exception à la règle qui définit que le nom de la propriété DOM est une version [CamelCase](https://fr.wikipedia.org/wiki/CamelCase) de la propriété CSS construite avec des tirets. De même, `class` sera échappée en `className` et le `for` des éléments \<label> sera converti en `htmlFor`).
+
+## Syntaxe
+
+```css
+float: left;
 float: right;
 float: none;
 float: inline-start;
@@ -99,32 +48,32 @@ float: inline-end;
 /* Valeurs globales */
 float: inherit;
 float: initial;
-float: unset;</pre>
+float: unset;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>left</code></dt>
- <dd>Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient.</dd>
- <dt><code>right</code></dt>
- <dd>Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient.</dd>
- <dt><code>none</code></dt>
- <dd>Un mot-clé indiquant que l'élément ne doit pas flotter</dd>
- <dt><code>inline-start</code></dt>
- <dd>Un mot-clé indiquant que l'élément doit flotter du côté du début du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord gauche ; pour les scripts RTL, c'est le bord droit.</dd>
- <dt><code>inline-end</code></dt>
- <dd>Un mot-clé indiquant que l'élément doit flotter du côté de la fin du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord droit ; pour les scripts RTL, c'est le bord gauche.</dd>
-</dl>
+- `left`
+  - : Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient.
+- `right`
+  - : Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient.
+- `none`
+  - : Un mot-clé indiquant que l'élément ne doit pas flotter
+- `inline-start`
+  - : Un mot-clé indiquant que l'élément doit flotter du côté du début du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord gauche ; pour les scripts RTL, c'est le bord droit.
+- `inline-end`
+  - : Un mot-clé indiquant que l'élément doit flotter du côté de la fin du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord droit ; pour les scripts RTL, c'est le bord gauche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   border: solid red;
   max-width: 70ex;
 }
@@ -132,91 +81,68 @@ float: unset;</pre>
 h4 {
   float: left;
   margin: 0;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;h4&gt;Coucou !&lt;/h4&gt;
+```html
+<div>
+  <h4>Coucou !</h4>
   Voici du texte. Voici du texte. Voici du texte.
   Voici du texte. Voici du texte. Voici du texte.
   Voici du texte. Voici du texte. Voici du texte.
   Voici du texte. Voici du texte. Voici du texte.
-&lt;/div&gt;</pre>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Le_positionnement_des_éléments_flottants">Le positionnement des éléments flottants</h2>
+## Le positionnement des éléments flottants
 
-<p>Comme évoqué ci-avant, lorsqu'un élément flotte, il est retiré du flux normal du document et il est décalé vers la droite ou vers la gauche jusqu'à ce qu'il touche le bord de son conteneur <em>ou un autre élément flottant</em>.</p>
+Comme évoqué ci-avant, lorsqu'un élément flotte, il est retiré du flux normal du document et il est décalé vers la droite ou vers la gauche jusqu'à ce qu'il touche le bord de son conteneur _ou un autre élément flottant_.
 
-<p>Dans l'image suivante, on voit trois carrés rouges. Deux flottent à gauche et un flotte à droite. On voit que le deuxième carré à gauche est placé à droite du premier. Si on ajoutait d'autres carrés, ils s'empileraient sur la gauche jusqu'à remplir le conteneur, ensuite, on passerait sur une autre ligne.</p>
+Dans l'image suivante, on voit trois carrés rouges. Deux flottent à gauche et un flotte à droite. On voit que le deuxième carré à gauche est placé à droite du premier. Si on ajoutait d'autres carrés, ils s'empileraient sur la gauche jusqu'à remplir le conteneur, ensuite, on passerait sur une autre ligne.
 
-<p><img src="floats.png"></p>
+![](floats.png)
 
-<h2 id="Dégager_des_éléments_du_flottement">Dégager des éléments du flottement</h2>
+## Dégager des éléments du flottement
 
-<p>Dans l'illustration précédente, les éléments flottants sont verticalement plus courts que le texte sur lequel ils flottent. Cependant, si le texte n'était pas aussi long et ne dépassait pas des blocs, on pourrait avoir des effets indésirables. Par exemple, si le paragraphe ne contenait que « Lorem ipsum dolor sit amet » et était suivi d'un autre titre (semblable à « Floats Example »), le deuxième titre apparaîtrait entre les boîtes rouges. Or, la plupart du temps, on veut que le titre soit aligné tout à gauche. Pour cela, il faut dégager (<em>clear</em>) l'élément.</p>
+Dans l'illustration précédente, les éléments flottants sont verticalement plus courts que le texte sur lequel ils flottent. Cependant, si le texte n'était pas aussi long et ne dépassait pas des blocs, on pourrait avoir des effets indésirables. Par exemple, si le paragraphe ne contenait que « Lorem ipsum dolor sit amet » et était suivi d'un autre titre (semblable à « Floats Example »), le deuxième titre apparaîtrait entre les boîtes rouges. Or, la plupart du temps, on veut que le titre soit aligné tout à gauche. Pour cela, il faut dégager (_clear_) l'élément.
 
-<p>Pour cela, on pourra utiliser la propriété {{cssxref("clear")}} sur ce deuxième titre afin de s'assurer qu'il est aligné à gauche :</p>
+Pour cela, on pourra utiliser la propriété {{cssxref("clear")}} sur ce deuxième titre afin de s'assurer qu'il est aligné à gauche :
 
-<pre class="brush:css">h2.deuxiemeTitre { clear: both; }
-</pre>
+```css
+h2.deuxiemeTitre { clear: both; }
+```
 
-<p>Cela dit, cette méthode fonctionne uniquement s'il n'y a pas d'autres éléments dans le même <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a> pour lesquels on voudrait que l'élément apparaisse à droite. Par exemple, si l'élément <code>H2</code> est entourée de barres latérales à gauche et à droite et qu'on utilise <code>clear</code>, le titre apparaîtra alors en bas, sous les barres, plutôt qu'entre elles.</p>
+Cela dit, cette méthode fonctionne uniquement s'il n'y a pas d'autres éléments dans le même [contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context) pour lesquels on voudrait que l'élément apparaisse à droite. Par exemple, si l'élément `H2` est entourée de barres latérales à gauche et à droite et qu'on utilise `clear`, le titre apparaîtra alors en bas, sous les barres, plutôt qu'entre elles.
 
-<p>Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en bloc au conteneur des éléments flottants. Pour reprendre l'exemple précédent, on voit que toutes les boîtes rouges sont dans un élément {{HTMLElement("p")}}. On peut alors utiliser {{cssxref("overflow")}} avec <code>hidden</code> ou <code>auto</code> afin que l'élément s'agrandisse pour les contenir, sans les faire tomber en bas :</p>
+Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en bloc au conteneur des éléments flottants. Pour reprendre l'exemple précédent, on voit que toutes les boîtes rouges sont dans un élément {{HTMLElement("p")}}. On peut alors utiliser {{cssxref("overflow")}} avec `hidden` ou `auto` afin que l'élément s'agrandisse pour les contenir, sans les faire tomber en bas :
 
-<pre class="brush:css">p.avecBoitesRouges { overflow: hidden; height: auto; }
-</pre>
+```css
+p.avecBoitesRouges { overflow: hidden; height: auto; }
+```
 
-<div class="note">
-  <p><strong>Note :</strong> En utilisant <code>overflow</code>: <code>scroll</code> on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons <code>auto</code> pour <code>height</code> afin d'indiquer que le conteneur doit s'agrandir si nécessaire.</p></div>
+> **Note :** En utilisant `overflow`: `scroll` on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons `auto` pour `height` afin d'indiquer que le conteneur doit s'agrandir si nécessaire.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>Les valeurs <code>inline-start</code> et <code>inline-end</code> sont ajoutées.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Introduction de nouvelles valeurs, pas encore clairement définies.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                             | Commentaires                                                       |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------ |
+| {{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}} | {{Spec2('CSS Logical Properties')}} | Les valeurs `inline-start` et `inline-end` sont ajoutées.          |
+| {{SpecName('CSS3 Box', '#float', 'float')}}                                         | {{Spec2('CSS3 Box')}}                     | Introduction de nouvelles valeurs, pas encore clairement définies. |
+| {{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}             | {{Spec2('CSS2.1')}}                         | Aucune modification.                                               |
+| {{SpecName('CSS1', '#float', 'float')}}                                             | {{Spec2('CSS1')}}                         | Définition initiale.                                               |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.float")}}</p>
+{{Compat("css.properties.float")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">Le contexte de formatage des blocs</a></li>
-</ul>
+- [Le contexte de formatage des blocs](/fr/docs/Web/Guide/CSS/Block_formatting_context)
diff --git a/files/fr/web/css/font-family/index.md b/files/fr/web/css/font-family/index.md
index 7761699259..8b69af29d3 100644
--- a/files/fr/web/css/font-family/index.md
+++ b/files/fr/web/css/font-family/index.md
@@ -7,26 +7,26 @@ tags:
   - Reference
 translation_of: Web/CSS/font-family
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-family</code></strong> permet de définir une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé.</p>
+La propriété **`font-family`** permet de définir une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé.
 
-<div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-family.html")}}
 
-<p>Les valeurs sont séparées par des virgules, indiquant chacune une police alternative. Le moteur choisira la première valeur pour laquelle la police correspondante est installée sur l'ordinateur ou qui peut être téléchargée via la règle @ {{cssxref("@font-face")}} définie.</p>
+Les valeurs sont séparées par des virgules, indiquant chacune une police alternative. Le moteur choisira la première valeur pour laquelle la police correspondante est installée sur l'ordinateur ou qui peut être téléchargée via la règle @ {{cssxref("@font-face")}} définie.
 
-<p>Pour fixer <code>font-family</code> et d'autres propriétés liées aux polices de caractères, on pourra utiliser la propriété raccourcie {{cssxref("font")}}.</p>
+Pour fixer `font-family` et d'autres propriétés liées aux polices de caractères, on pourra utiliser la propriété raccourcie {{cssxref("font")}}.
 
-<p>Les auteurs doivent toujours inclure une famille de police générique dans cette liste car il n'y a aucune certitude qu'une police donnée aura été installée sur l'ordinateur ni qu'elle pourra être téléchargée grâce à {{cssxref("@font-face")}}. L'utilisation d'une famille de police générique permet au navigateur d'utiliser une police acceptable en recours si besoin.</p>
+Les auteurs doivent toujours inclure une famille de police générique dans cette liste car il n'y a aucune certitude qu'une police donnée aura été installée sur l'ordinateur ni qu'elle pourra être téléchargée grâce à {{cssxref("@font-face")}}. L'utilisation d'une famille de police générique permet au navigateur d'utiliser une police acceptable en recours si besoin.
 
-<div class="note">
-  <p><strong>Note :</strong> La propriété <code>font-family</code> définit une liste de police, ordonnée par priorité, de la plus haute à la plus basse. La sélection de la police ne se fait pas pour l'ensemble du texte mais<strong> caractère par caractère</strong>. Ainsi si une police ne dispose pas du caractère à représenter, ce sera la police suivante qui sera utilisée pour représenter le caractère. Pour Internet Explorer, cela ne fonctionne pas avec la version 6 et les version antérieures.</p>
-  <p>Les propriétés {{cssxref("font-style")}}, {{cssxref("font-variant")}} et {{cssxref("font-size")}} permettront d'influencer le choix en fonction du style, de la variante ou de la taille disponible parmi les polices de la liste.</p>
-</div>
+> **Note :** La propriété `font-family` définit une liste de police, ordonnée par priorité, de la plus haute à la plus basse. La sélection de la police ne se fait pas pour l'ensemble du texte mais **caractère par caractère**. Ainsi si une police ne dispose pas du caractère à représenter, ce sera la police suivante qui sera utilisée pour représenter le caractère. Pour Internet Explorer, cela ne fonctionne pas avec la version 6 et les version antérieures.
+>
+> Les propriétés {{cssxref("font-style")}}, {{cssxref("font-variant")}} et {{cssxref("font-size")}} permettront d'influencer le choix en fonction du style, de la variante ou de la taille disponible parmi les polices de la liste.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Un nom de police suivi d'un nom de famille générique */
+```css
+/* Un nom de police suivi d'un nom de famille générique */
 font-family: "Gill Sans Extrabold", sans-serif;
 font-family: "Goudy Bookletter 1911", sans-serif;
 
@@ -45,79 +45,81 @@ font-family: fangsong;
 font-family: inherit;
 font-family: initial;
 font-family: unset;
-</pre>
-
-<p>La propriété <code>font-family</code> permet de lister différentes familles de police, séparées par des virgules. Chaque nom de famille est une valeur <code><a href="#family-name">&lt;family-name&gt;</a></code> ou <code><a href="#generic-name">&lt;generic-name&gt;</a></code>.</p>
-
-<p>Dans l'exemple suivant, on liste deux familles de police, la première utilise une valeur <code>&lt;family-name&gt;</code> et la seconde utilise une valeur <code>&lt;generic-name&gt;</code> :</p>
-
-<pre class="brush: css;">font-family: Gill Sans Extrabold, sans-serif;</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;family-name&gt;</code></dt>
- <dd>Le nom d'une famille de polices ; par exemple « Times » ou « Helvetica » sont des noms de famille de polices. Les noms de familles qui comportent des blancs doivent être encadrées par des doubles quotes (").</dd>
- <dt><code>&lt;generic-name&gt;</code></dt>
- <dd>
- <p>Les noms de famille génériques sont utilisés comme mécanisme de secours pour conserver l'intention de mise en forme de l'auteur lorsqu'aucune des polices indiquées n'est disponible. Les noms de famille génériques sont des mots-clés et ne doivent pas être encadrés par des doubles quotes. Un nom de famille générique devrait être utilisé comme dernier élément de la liste des noms. Les mots-clés suivants sont définis :</p>
-
- <dl>
-  <dt><code>serif</code></dt>
-  <dd>Les caractères possèdent des <a href="https://fr.wikipedia.org/wiki/Empattement_(typographie)">empattements</a>.<br>
-  Voici des exemples de polices avec empattement : Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.</dd>
-  <dt><code>sans-serif</code></dt>
-  <dd>Les caractères n'ont pas d'empattement, leurs extrémités sont anguleuses.<br>
-  Voici des exemples de polices correspondantes : "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.</dd>
-  <dt><code>monospace</code></dt>
-  <dd>Tous les caractères mesurent la même largeur, on dit que la police est à <a href="https://fr.wikipedia.org/wiki/Chasse_(typographie)">chasse</a> fixe.<br>
-  Les polices "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace sont à chasse fixe.</dd>
-  <dt><code>cursive</code></dt>
-  <dd>Les caractères des polices cursives possèdent des extrémités permettant de les joindre les uns aux autres, partiellement ou complètement. Cela donne un résultat semblable à l'écriture manuelle au crayon plutôt qu'à des caractères d'imprimerie.<br>
-  Voici quelques exemples de polices cursives : "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.</dd>
-  <dt><code>fantasy</code></dt>
-  <dd>Les polices fantaisie sont des polices décoratives pour lesquelles les caractères sont représentées de façon légère.<br>
-  Les polices suivantes sont des exemples de cette famille : Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.</dd>
-  <dt><code>system-ui</code></dt>
-  <dd>Les glyphes utilisés sont ceux de l'interface utilisateur par défaut pour le système d'exploitation de la plateforme. Les variantes typographiques différant grandement d'une région à l'autre, cette famille générique est utilisée pour les polices qui ne correspondent pas aux autres familles génériques.</dd>
-  <dt><code>math</code></dt>
-  <dd>Une police utilisée pour les mise en forme relatives aux mathématiques comme les indices, les exposants, les accolades sur plusieurs lignes, etc.</dd>
-  <dt><code>emoji</code></dt>
-  <dd>Une police conçue spécifiquement pour l'affichage des emoji.</dd>
-  <dt><code>fangsong</code></dt>
-  <dd>Un style de caractères chinois particulier se situant entre le style serif Song et la forme cursive Kai. Ce style est généralement utilisé pour les documents officiels du gouvernement.</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Validité_des_noms_de_famille">Validité des noms de famille</h3>
-
-<p>Les noms de famille de polices doivent être encadrés par des doubles ou doivent former une série d'un ou plusieurs identifiants valides. Cela signifie que les signes de ponctuation et les chiffres débutant chaque fragment doivent être échappés pour les noms de famille qui ne sont pas encadrés par des quotes.</p>
-
-<p>Les déclarations suivantes sont valides :</p>
-
-<pre class="brush:css">font-family: "Gill Sans Extrabold", sans-serif;
-font-family: "Goudy Bookletter 1911", sans-serif;</pre>
-
-<p>Et ces déclarations sont <strong>invalides </strong>:</p>
-
-<pre class="brush:css example-bad">font-family: Goudy Bookletter 1911, sans-serif;
+```
+
+La propriété `font-family` permet de lister différentes familles de police, séparées par des virgules. Chaque nom de famille est une valeur [`<family-name>`](#family-name) ou [`<generic-name>`](#generic-name).
+
+Dans l'exemple suivant, on liste deux familles de police, la première utilise une valeur `<family-name>` et la seconde utilise une valeur `<generic-name>` :
+
+```css
+font-family: Gill Sans Extrabold, sans-serif;
+```
+
+### Valeurs
+
+- `<family-name>`
+  - : Le nom d'une famille de polices ; par exemple « Times » ou « Helvetica » sont des noms de famille de polices. Les noms de familles qui comportent des blancs doivent être encadrées par des doubles quotes (").
+- `<generic-name>`
+
+  - : Les noms de famille génériques sont utilisés comme mécanisme de secours pour conserver l'intention de mise en forme de l'auteur lorsqu'aucune des polices indiquées n'est disponible. Les noms de famille génériques sont des mots-clés et ne doivent pas être encadrés par des doubles quotes. Un nom de famille générique devrait être utilisé comme dernier élément de la liste des noms. Les mots-clés suivants sont définis :
+
+    - `serif`
+      - : Les caractères possèdent des [empattements](<https://fr.wikipedia.org/wiki/Empattement_(typographie)>).
+        Voici des exemples de polices avec empattement : Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
+    - `sans-serif`
+      - : Les caractères n'ont pas d'empattement, leurs extrémités sont anguleuses.
+        Voici des exemples de polices correspondantes : "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
+    - `monospace`
+      - : Tous les caractères mesurent la même largeur, on dit que la police est à [chasse](<https://fr.wikipedia.org/wiki/Chasse_(typographie)>) fixe.
+        Les polices "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace sont à chasse fixe.
+    - `cursive`
+      - : Les caractères des polices cursives possèdent des extrémités permettant de les joindre les uns aux autres, partiellement ou complètement. Cela donne un résultat semblable à l'écriture manuelle au crayon plutôt qu'à des caractères d'imprimerie.
+        Voici quelques exemples de polices cursives : "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
+    - `fantasy`
+      - : Les polices fantaisie sont des polices décoratives pour lesquelles les caractères sont représentées de façon légère.
+        Les polices suivantes sont des exemples de cette famille : Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
+    - `system-ui`
+      - : Les glyphes utilisés sont ceux de l'interface utilisateur par défaut pour le système d'exploitation de la plateforme. Les variantes typographiques différant grandement d'une région à l'autre, cette famille générique est utilisée pour les polices qui ne correspondent pas aux autres familles génériques.
+    - `math`
+      - : Une police utilisée pour les mise en forme relatives aux mathématiques comme les indices, les exposants, les accolades sur plusieurs lignes, etc.
+    - `emoji`
+      - : Une police conçue spécifiquement pour l'affichage des emoji.
+    - `fangsong`
+      - : Un style de caractères chinois particulier se situant entre le style serif Song et la forme cursive Kai. Ce style est généralement utilisé pour les documents officiels du gouvernement.
+
+### Validité des noms de famille
+
+Les noms de famille de polices doivent être encadrés par des doubles ou doivent former une série d'un ou plusieurs identifiants valides. Cela signifie que les signes de ponctuation et les chiffres débutant chaque fragment doivent être échappés pour les noms de famille qui ne sont pas encadrés par des quotes.
+
+Les déclarations suivantes sont valides :
+
+```css
+font-family: "Gill Sans Extrabold", sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+```
+
+Et ces déclarations sont **invalides** :
+
+```css example-bad
+font-family: Goudy Bookletter 1911, sans-serif;
 font-family: Red/Black, sans-serif;
 font-family: "Lucida" Grande, sans-serif;
 font-family: Ahem!, sans-serif;
 font-family: test@foo, sans-serif;
 font-family: #POUND, sans-serif;
-font-family: Hawaii 5-0, sans-serif;</pre>
+font-family: Hawaii 5-0, sans-serif;
+```
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css;">.exempleserif {
+```css
+.exempleserif {
   font-family: Times, "Times New Roman", Georgia, serif;
 }
 
@@ -148,82 +150,59 @@ font-family: Hawaii 5-0, sans-serif;</pre>
 .exemplefangsong {
   font-family: fangsong;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exempleserif"&gt;
+```html
+<div class="exempleserif">
 Voici un exemple de police avec empattement (serif).
-&lt;/div&gt;
+</div>
 
-&lt;div class="exemplesansserif"&gt;
+<div class="exemplesansserif">
 Voici un exemple de police sans empattement (sans-serif).
-&lt;/div&gt;
+</div>
 
-&lt;div class="exemplemonospace"&gt;
+<div class="exemplemonospace">
 Voici un exemple de police à chasse fixe (monospace).
-&lt;/div&gt;
+</div>
 
-&lt;div class="exemplecursive"&gt;
+<div class="exemplecursive">
 Voici un exemple de police cursive.
-&lt;/div&gt;
+</div>
 
-&lt;div class="exemplefantasy"&gt;
+<div class="exemplefantasy">
 Voici un exemple de police fantaisie.
-&lt;/div&gt;
+</div>
 
-&lt;div class="exemplemath"&gt;
+<div class="exemplemath">
 Voici un exemple de police mathématique.
-&lt;/div&gt;
+</div>
 
-&lt;div class="exempleemoji"&gt;
+<div class="exempleemoji">
 Voici un exemple de police emoji.
-&lt;/div&gt;
+</div>
 
-&lt;div class="exemplefangsong"&gt;
+<div class="exemplefangsong">
 Voici un exemple de police fangsong.
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples',600,120)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#generic-font-families', 'generic font families')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td>Ajout de nouvelles familles génériques dont : <code>system-ui</code>, <code>emoji</code>, <code>math</code> et <code>fangsong</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#font-family', 'font-family')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.font-family")}}</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples',600,120)}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires                                                                              |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Fonts', '#generic-font-families', 'generic font families')}} | {{Spec2('CSS4 Fonts')}} | Ajout de nouvelles familles génériques dont : `system-ui`, `emoji`, `math` et `fangsong`. |
+| {{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}                     | {{Spec2('CSS3 Fonts')}} | Aucune modification significative.                                                        |
+| {{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}         | {{Spec2('CSS2.1')}}         | Aucune modification significative.                                                        |
+| {{SpecName('CSS1', '#font-family', 'font-family')}}                                     | {{Spec2('CSS1')}}         | Définition initiale.                                                                      |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.font-family")}}
diff --git a/files/fr/web/css/font-feature-settings/index.md b/files/fr/web/css/font-feature-settings/index.md
index 3297622581..4b3b8cae1b 100644
--- a/files/fr/web/css/font-feature-settings/index.md
+++ b/files/fr/web/css/font-feature-settings/index.md
@@ -7,20 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/font-feature-settings
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-feature-settings</code></strong> permet de contrôler les fonctionnalités typographiques des polices OpenType.</p>
+La propriété **`font-feature-settings`** permet de contrôler les fonctionnalités typographiques des polices OpenType.
 
-<div>{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}
 
-<div class="note">
-  <p><strong>Note :</strong> Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie {{cssxref("font-variant")}} ou l'une des propriétés détaillées correspondantes parmi {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.</p>
-  <p>Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.</p>
-</div>
+> **Note :** Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie {{cssxref("font-variant")}} ou l'une des propriétés détaillées correspondantes parmi {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.
+>
+> Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* On utilise le réglage par défaut */
+```css
+/* On utilise le réglage par défaut */
 font-feature-settings: normal;
 
 /* On définit la valeur des étiquettes OpenType */
@@ -33,25 +33,24 @@ font-feature-settings: "smcp", "swsh" 2;
 font-feature-settings: inherit;
 font-feature-settings: initial;
 font-feature-settings: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Le texte est disposé en utilisant les réglages par défaut.</dd>
- <dt><code>&lt;feature-tag-value&gt;</code></dt>
- <dd>Lors du rendu du texte, l'étiquette de fonctionnalité OpenType est passée au moteur afin d'activer ou de désactiver certaines fonctionnalités de la police. L'étiquette est toujours une chaîne (type {{cssxref("&lt;string&gt;")}}) de 4 caractères ASCII. Si la chaîne contient plus ou moins de 4 caractères ou contient des caractères en dehors de l'intervalle U+20 - U+7E, la déclaration sera considérée comme invalide.<br>
- La valeur associée à l'étiquette est un entier positif. Les deux mots-clés <code>on</code> et <code>off</code> sont des synonymes respectifs des valeurs <code>1</code> et <code>0</code>. Si aucune valeur n'est donnée pour une étiquette, la valeur par défaut sera <code>1</code>. Pour les fonctionnalités OpenType qui ne sont pas booléennees, la valeur implique qu'un glyphe donné soit sélectionné.</dd>
-</dl>
+- `normal`
+  - : Le texte est disposé en utilisant les réglages par défaut.
+- `<feature-tag-value>`
+  - : Lors du rendu du texte, l'étiquette de fonctionnalité OpenType est passée au moteur afin d'activer ou de désactiver certaines fonctionnalités de la police. L'étiquette est toujours une chaîne (type {{cssxref("&lt;string&gt;")}}) de 4 caractères ASCII. Si la chaîne contient plus ou moins de 4 caractères ou contient des caractères en dehors de l'intervalle U+20 - U+7E, la déclaration sera considérée comme invalide.
+    La valeur associée à l'étiquette est un entier positif. Les deux mots-clés `on` et `off` sont des synonymes respectifs des valeurs `1` et `0`. Si aucune valeur n'est donnée pour une étiquette, la valeur par défaut sera `1`. Pour les fonctionnalités OpenType qui ne sont pas booléennees, la valeur implique qu'un glyphe donné soit sélectionné.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:css">/* on utilise les glyphes alternatifs en small-cap */
+```css
+/* on utilise les glyphes alternatifs en small-cap */
 .smallcaps { font-feature-settings: "smcp" on; }
 
 /* on convertit les majuscules et minuscules en petites
@@ -82,36 +81,21 @@ td.tabular { font-feature-settings: "tnum"; }
   font-family: Gabriola; /* Windows 7 et Mac OS */
   font-feature-settings: "ss07";
 }
-</pre>
-
-<h2 id="Spécificat​ions">Spécificat​ions</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.font-feature-settings")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://www.microsoft.com/typography/otspec/featurelist.htm">La liste des fonctionnalités OpenType</a></li>
- <li><a href="https://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx"><em>Using the whole font</em>, un article MSDN en anglais</a></li>
-</ul>
+```
+
+## Spécificat​ions
+
+| Spécification                                                                                                    | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.font-feature-settings")}}
+
+## Voir aussi
+
+- [La liste des fonctionnalités OpenType](https://www.microsoft.com/typography/otspec/featurelist.htm)
+- [_Using the whole font_, un article MSDN en anglais](https://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx)
diff --git a/files/fr/web/css/font-kerning/index.md b/files/fr/web/css/font-kerning/index.md
index b6870b4104..bc3fe72aa0 100644
--- a/files/fr/web/css/font-kerning/index.md
+++ b/files/fr/web/css/font-kerning/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/font-kerning
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-kerning</code></strong> contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est <em>bien crénée</em>, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.<img alt="Exemple pour font-kerning" src="font-kerning.png"></p>
+La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est *bien crénée*, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.![Exemple pour font-kerning](font-kerning.png)
 
-<pre class="brush:css  no-line-numbers">font-kerning: auto;
+```css
+font-kerning: auto;
 font-kerning: normal;
 font-kerning: none;
 
@@ -19,30 +20,29 @@ font-kerning: none;
 font-kerning: inherit;
 font-kerning: initial;
 font-kerning: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Ce mot-clé laisse au navigateur le choix d'utiliser ou non le crénage. Quand la taille de la police est petite, le crénage de la police peut avoir l'air étrange et les navigateurs le désactiveront. C'est la valeur par défaut.</dd>
- <dt><code>normal</code></dt>
- <dd>Ce mot-clé force l'application du crénage.</dd>
- <dt><code>none</code></dt>
- <dd>Ce mot-clé empêche le navigateur d'utiliser l'information de crénage stockée dans la police.</dd>
-</dl>
+- `auto`
+  - : Ce mot-clé laisse au navigateur le choix d'utiliser ou non le crénage. Quand la taille de la police est petite, le crénage de la police peut avoir l'air étrange et les navigateurs le désactiveront. C'est la valeur par défaut.
+- `normal`
+  - : Ce mot-clé force l'application du crénage.
+- `none`
+  - : Ce mot-clé empêche le navigateur d'utiliser l'information de crénage stockée dans la police.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#nokern, #kern {
+```css
+#nokern, #kern {
   font-size: 2rem;
   font-family: serif;
 }
@@ -51,17 +51,21 @@ font-kerning: unset;
 }
 #kern {
   font-kerning: normal;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="kern"&gt;&lt;/div&gt;
-&lt;div id="nokern"&gt;&lt;/div&gt;
-&lt;textarea id="input"&gt;AV T. ij&lt;/textarea&gt;</pre>
+```html
+<div id="kern"></div>
+<div id="nokern"></div>
+<textarea id="input">AV T. ij</textarea>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var input  = document.getElementById('input'),
+```js
+var input  = document.getElementById('input'),
     kern   = document.getElementById('kern'),
     nokern = document.getElementById('nokern');
 input.addEventListener('keyup', function() {
@@ -70,45 +74,30 @@ input.addEventListener('keyup', function() {
 });
 kern.textContent = input.value; /* On initialise le contenu */
 nokern.textContent = input.value;
-</pre>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.font-kerning")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("font-variant")}}</li>
- <li>{{cssxref("font-variant-position")}}</li>
- <li>{{cssxref("font-variant-east-asian")}}</li>
- <li>{{cssxref("font-variant-caps")}}</li>
- <li>{{cssxref("font-variant-ligatures")}}</li>
- <li>{{cssxref("font-variant-numeric")}}</li>
- <li>{{cssxref("font-variant-alternates")}}</li>
- <li>{{cssxref("font-synthesis")}}</li>
- <li>{{cssxref("letter-spacing")}}.</li>
-</ul>
+```
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaire         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.font-kerning")}}
+
+## Voir aussi
+
+- {{cssxref("font-variant")}}
+- {{cssxref("font-variant-position")}}
+- {{cssxref("font-variant-east-asian")}}
+- {{cssxref("font-variant-caps")}}
+- {{cssxref("font-variant-ligatures")}}
+- {{cssxref("font-variant-numeric")}}
+- {{cssxref("font-variant-alternates")}}
+- {{cssxref("font-synthesis")}}
+- {{cssxref("letter-spacing")}}.
diff --git a/files/fr/web/css/font-language-override/index.md b/files/fr/web/css/font-language-override/index.md
index 928e30555e..97225330f3 100644
--- a/files/fr/web/css/font-language-override/index.md
+++ b/files/fr/web/css/font-language-override/index.md
@@ -7,103 +7,90 @@ tags:
   - Reference
 translation_of: Web/CSS/font-language-override
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-language-override</code></strong> permet de contrôler l'utilisation des glyphes spécifiques à une langue pour une police.</p>
+La propriété **`font-language-override`** permet de contrôler l'utilisation des glyphes spécifiques à une langue pour une police.
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 font-language-override: normal;
 
-/* &lt;string&gt; values */
+/* <string> values */
 font-language-override: "ENG";  /* Use English glyphs */
 font-language-override: "TRK";  /* Use Turkish glyphs */
 /* Valeurs globales */
 font-language-override: initial;
 font-language-override: inherit;
 font-language-override: unset;
-</pre>
+```
 
-<p>Par défaut, les navigateurs utilisent l'attribut global {{htmlattrxref("lang")}} pour déterminer la langue du texte d'un élément. Grâce à cette information, certains glyphes spéciaux, conçus pour cette langue, peuvent être utilisés. Ainsi, de nombreuses polices possèdent un caractère spécial pour la ligature <code>fi</code> afin que le point du <code>i</code> fusionne avec le caractère précédent. Cette ligature ne devrait pas être utilisée en turc, car il existe deux formes pour le i, avec et sans point : <code>i</code> et <code>ı</code>.</p>
+Par défaut, les navigateurs utilisent l'attribut global {{htmlattrxref("lang")}} pour déterminer la langue du texte d'un élément. Grâce à cette information, certains glyphes spéciaux, conçus pour cette langue, peuvent être utilisés. Ainsi, de nombreuses polices possèdent un caractère spécial pour la ligature `fi` afin que le point du `i` fusionne avec le caractère précédent. Cette ligature ne devrait pas être utilisée en turc, car il existe deux formes pour le i, avec et sans point : `i` et `ı`.
 
-<p>Quelques fois, l'auteur d'un document peut vouloir surcharger la langue. Ainsi, si la fonte ne sait pas que la langue azérie possède un i sans point, comme le turc, on pourra utiliser <code>font-language-override</code> pour forcer l'utilisation des glyphes turcs qui seront plus adaptés que les glyphes par défaut.</p>
+Quelques fois, l'auteur d'un document peut vouloir surcharger la langue. Ainsi, si la fonte ne sait pas que la langue azérie possède un i sans point, comme le turc, on pourra utiliser `font-language-override` pour forcer l'utilisation des glyphes turcs qui seront plus adaptés que les glyphes par défaut.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Cette propriété est définie avec le mot-clé <code>normal</code> ou avec une chaîne de caractères (<code>&lt;string&gt;</code>).</p>
+Cette propriété est définie avec le mot-clé `normal` ou avec une chaîne de caractères (`<string>`).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Ce mot-clé force l'utilisation des glyphes de la langue définie pour cette police.</dd>
- <dt><code>&lt;string&gt;</code></dt>
- <dd>Cette chaîne de caractère force le navigateur à utiliser les glyphes de la langue correspondante. Les valeurs qui peuvent être utilisées sont <a href="https://www.microsoft.com/typography/otspec/languagetags.htm">les valeurs du système de langue OpenType</a>.</dd>
-</dl>
+- `normal`
+  - : Ce mot-clé force l'utilisation des glyphes de la langue définie pour cette police.
+- `<string>`
+  - : Cette chaîne de caractère force le navigateur à utiliser les glyphes de la langue correspondante. Les valeurs qui peuvent être utilisées sont [les valeurs du système de langue OpenType](https://www.microsoft.com/typography/otspec/languagetags.htm).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p.para1 {
+```css
+p.para1 {
   font-language-override: normal;
 }
 
 p.para2 {
   font-language-override: "DAN";
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="para1"&gt;Réglage par défaut.&lt;/p&gt;
-&lt;p class="para2"&gt;
-  Un paragraphe pour lequel  &lt;code&gt;font-language-override&lt;/code&gt;
+```html
+<p class="para1">Réglage par défaut.</p>
+<p class="para2">
+  Un paragraphe pour lequel  <code>font-language-override</code>
   cible le danois
-&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '600')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-language-override', 'font-language-override')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.font-language-override")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("font-variant")}}</li>
- <li>{{cssxref("font-variant-position")}}</li>
- <li>{{cssxref("font-variant-east-asian")}}</li>
- <li>{{cssxref("font-variant-caps")}}</li>
- <li>{{cssxref("font-variant-ligatures")}}</li>
- <li>{{cssxref("font-variant-numeric")}}</li>
- <li>{{cssxref("font-variant-alternates")}}</li>
- <li>{{cssxref("font-synthesis")}}</li>
- <li>{{cssxref("font-kerning")}}</li>
-</ul>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '600')}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-language-override', 'font-language-override')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.font-language-override")}}
+
+## Voir aussi
+
+- {{cssxref("font-variant")}}
+- {{cssxref("font-variant-position")}}
+- {{cssxref("font-variant-east-asian")}}
+- {{cssxref("font-variant-caps")}}
+- {{cssxref("font-variant-ligatures")}}
+- {{cssxref("font-variant-numeric")}}
+- {{cssxref("font-variant-alternates")}}
+- {{cssxref("font-synthesis")}}
+- {{cssxref("font-kerning")}}
diff --git a/files/fr/web/css/font-optical-sizing/index.md b/files/fr/web/css/font-optical-sizing/index.md
index 8ec9caeaf0..05abd409e2 100644
--- a/files/fr/web/css/font-optical-sizing/index.md
+++ b/files/fr/web/css/font-optical-sizing/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/font-optical-sizing
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>font-optical-sizing</code></strong> permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille.  Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique.</p>
+La propriété CSS **`font-optical-sizing`** permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille.  Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique.
 
-<p>Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (<em>serifs</em>) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais.</p>
+Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (_serifs_) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais.
 
-<div class="note">
-<p><strong>Note :</strong> L'axe de variation pour la taille optique est représenté par <code>opsz</code> dans {{cssxref("font-variation-settings")}}.</p>
-</div>
+> **Note :** L'axe de variation pour la taille optique est représenté par `opsz` dans {{cssxref("font-variation-settings")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 font-optical-sizing: none;
 font-optical-sizing: auto; /* valeur initiale */
 
@@ -27,26 +26,25 @@ font-optical-sizing: auto; /* valeur initiale */
 font-optical-sizing: inherit;
 font-optical-sizing: initial;
 font-optical-sizing: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>L'agent utilisateur ne modifiera pas la forme des glyphes pour une vue optimale.</dd>
- <dt><code>auto</code></dt>
- <dd>L'agent utilisateur modifiera la forme des glyphes pour une vue optimale.</dd>
-</dl>
+- `none`
+  - : L'agent utilisateur ne modifiera pas la forme des glyphes pour une vue optimale.
+- `auto`
+  - : L'agent utilisateur modifiera la forme des glyphes pour une vue optimale.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
     src: url('AmstelvarAlpha-VF.ttf');
     font-family:'Amstelvar';
     font-style: normal;
@@ -59,42 +57,30 @@ p {
 
 .no-optical-sizing {
   font-optical-sizing: none;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="optical-sizing"&gt;Ce paragraphe est dimensionné pour une meilleure
- lecture. C'est le comportement par défaut.&lt;/p&gt;
+```html
+<p class="optical-sizing">Ce paragraphe est dimensionné pour une meilleure
+ lecture. C'est le comportement par défaut.</p>
 
-&lt;p class="no-optical-sizing"&gt;Ce paragraphe n'est pas adapté pour une
+<p class="no-optical-sizing">Ce paragraphe n'est pas adapté pour une
  meilleure lecture. Vous devriez voir une différence avec les navigateurs
- qui prennent en charge cette fonctionnalité.&lt;/p&gt;</pre>
-
-<div class="note">
-<p><strong>Note :</strong> La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre <a href="https://github.com/TypeNetwork/Amstelvar/releases">en téléchargement sur GitHub</a>.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.font-optical-sizing")}}</p>
+ qui prennent en charge cette fonctionnalité.</p>
+```
+
+> **Note :** La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre [en téléchargement sur GitHub](https://github.com/TypeNetwork/Amstelvar/releases).
+
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}} | {{Spec2('CSS4 Fonts')}} |              |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.font-optical-sizing")}}
diff --git a/files/fr/web/css/font-size-adjust/index.md b/files/fr/web/css/font-size-adjust/index.md
index 19af669501..f7157b1a86 100644
--- a/files/fr/web/css/font-size-adjust/index.md
+++ b/files/fr/web/css/font-size-adjust/index.md
@@ -7,84 +7,86 @@ tags:
   - Reference
 translation_of: Web/CSS/font-size-adjust
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-size-adjust</code></strong> permet de choisir une taille de police selon la taille des caractères en minuscules plutôt que selon la taille des majuscules.</p>
+La propriété **`font-size-adjust`** permet de choisir une taille de police selon la taille des caractères en minuscules plutôt que selon la taille des majuscules.
 
-<pre class="brush:css  no-line-numbers">/* On utilise la taille de fonte définie */
+```css
+/* On utilise la taille de fonte définie */
 font-size-adjust: none;
 
 /* On utilise une fonte pour laquelle
    les minuscules font la moitié de la
    taille définie */
-/* Type &lt;number&gt; */
+/* Type <number> */
 font-size-adjust: 0.5;
 
 /* Valeurs globales */
 font-size-adjust: inherit;
 font-size-adjust: initial;
 font-size-adjust: unset;
-</pre>
+```
 
-<p>Cela est particulièrement utile lorsque la lisibilité des fontes, notamment celles de petite taille, est déterminée par la taille des minuscules plutôt que par celle des majuscules.</p>
+Cela est particulièrement utile lorsque la lisibilité des fontes, notamment celles de petite taille, est déterminée par la taille des minuscules plutôt que par celle des majuscules.
 
-<p>La lisibilité peut devenir un problème lorsque la première police indiquée par {{cssxref("font-family")}} n'est pas disponible et que la police de remplacement possède un facteur de forme très différent (ce facteur correspond au ratio de la taille des minuscules sur la taille de la fonte).</p>
+La lisibilité peut devenir un problème lorsque la première police indiquée par {{cssxref("font-family")}} n'est pas disponible et que la police de remplacement possède un facteur de forme très différent (ce facteur correspond au ratio de la taille des minuscules sur la taille de la fonte).
 
-<p>Pour utiliser cette propriété d'une façon compatible avec les navigateurs qui ne prennent pas en charge <code>font-size-adjust</code>, on définira le facteur par lequel on multiplie la valeur de la propriété {{Cssxref("font-size")}}. Cela signifie généralement que la propriété doit correspondre au facteur de forme de la première fonte. Ainsi, lorsqu'une feuille de style définit :</p>
+Pour utiliser cette propriété d'une façon compatible avec les navigateurs qui ne prennent pas en charge `font-size-adjust`, on définira le facteur par lequel on multiplie la valeur de la propriété {{Cssxref("font-size")}}. Cela signifie généralement que la propriété doit correspondre au facteur de forme de la première fonte. Ainsi, lorsqu'une feuille de style définit :
 
-<pre class="brush: css">font-size: 14px;
+```css
+font-size: 14px;
 font-size-adjust: 0.5;
-</pre>
+```
 
-<p>On indique en fait que les minuscules de la fonte utilisée doivent mesurer <code>7px</code> de haut (0.5 × 14px).</p>
+On indique en fait que les minuscules de la fonte utilisée doivent mesurer `7px` de haut (0.5 × 14px).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>La taille de la fonte est uniquement choisie grâce à la propriété {{cssxref("font-size")}}.</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>
- <p>La taille de la fonte est choisie afin que les minuscules (selon la taille horizontale de la fonte) mesurent X fois {{cssxref("font-size")}}.</p>
+- `none`
+  - : La taille de la fonte est uniquement choisie grâce à la propriété {{cssxref("font-size")}}.
+- `<number>`
 
- <p>Le nombre indiqué (cf. le type {{cssxref("&lt;number&gt;")}}) devrait la plupart du temps correspondre au facteur de forme de la première fonte listée avec {{cssxref("font-family")}}. Cela permet d'obtenir le même résultat dans les différents navigateurs, qu'ils supportent <code>font-size-adjust</code> ou non.</p>
+  - : La taille de la fonte est choisie afin que les minuscules (selon la taille horizontale de la fonte) mesurent X fois {{cssxref("font-size")}}.
 
- <p><code>0</code> entraînera une haute nulle pour le texte (qui sera donc caché). Pour d'anciens navigateurs, comme Firefox avant la version 40, <code>0</code> était géré comme <code>none</code>.</p>
- </dd>
-</dl>
+    Le nombre indiqué (cf. le type {{cssxref("&lt;number&gt;")}}) devrait la plupart du temps correspondre au facteur de forme de la première fonte listée avec {{cssxref("font-family")}}. Cela permet d'obtenir le même résultat dans les différents navigateurs, qu'ils supportent `font-size-adjust` ou non.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    `0` entraînera une haute nulle pour le texte (qui sera donc caché). Pour d'anciens navigateurs, comme Firefox avant la version 40, `0` était géré comme `none`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Exemples pour &lt;code&gt;font-size-adjust&lt;/code&gt;&lt;/p&gt;
+```html
+<p>Exemples pour <code>font-size-adjust</code></p>
 
-&lt;p class="times"&gt;
+<p class="times">
   Voici la fonte Times sur 10 px,
   difficile à lire en petit.
-&lt;/p&gt;
+</p>
 
-&lt;p class="verdana"&gt;
+<p class="verdana">
   Voici la fonte Verdana sur 10px,
   plus lisible car sans empattement
   (serif).
-&lt;/p&gt;
+</p>
 
-&lt;p class="adjtimes"&gt;
+<p class="adjtimes">
   et voilà le texte ajusté pour
   avoir le même facteur de forme
   qu'avec Verdana.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.times {
+```css
+.times {
   font-family: Times, serif;
   font-size: 10 px;
 }
@@ -98,41 +100,26 @@ font-size-adjust: 0.5;
   font-family: Times, serif;
   font-size-adjust: 0.58;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '500', '300')}}</p>
+{{EmbedLiveSample('Exemples', '500', '300')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
 
-<p>La propriété CSS <code>font-size-adjust</code> fut initialement définie avec CSS 2 mais a été abandonnée dans CSS 2.1. Elle a de nouveau été définie avec CSS 3.</p>
+La propriété CSS `font-size-adjust` fut initialement définie avec CSS 2 mais a été abandonnée dans CSS 2.1. Elle a de nouveau été définie avec CSS 3.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-size-adjust")}}</p>
+{{Compat("css.properties.font-size-adjust")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144885">Un billet de David Baron sur <code>font-size-adjust</code> (en anglais)</a></li>
-</ul>
+- [Un billet de David Baron sur `font-size-adjust` (en anglais)](https://bugzilla.mozilla.org/show_bug.cgi?id=1144885)
diff --git a/files/fr/web/css/font-size/index.md b/files/fr/web/css/font-size/index.md
index 09160e80d0..0512e7882f 100644
--- a/files/fr/web/css/font-size/index.md
+++ b/files/fr/web/css/font-size/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/font-size
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-size</code></strong> définit la taille de fonte utilisée pour le texte. La modification de cette taille peut entraîner la modification de la taille d'autres éléments car elle est utilisée pour calculer les valeurs des longueurs relatives (type {{cssxref("&lt;length&gt;")}}) (par exemple exprimées avec les unités <code>em</code> ou <code>ex</code>).</p>
+La propriété **`font-size`** définit la taille de fonte utilisée pour le texte. La modification de cette taille peut entraîner la modification de la taille d'autres éléments car elle est utilisée pour calculer les valeurs des longueurs relatives (type {{cssxref("&lt;length&gt;")}}) (par exemple exprimées avec les unités `em` ou `ex`).
 
-<div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-size.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs dont la taille est absolue */
+```css
+/* Valeurs dont la taille est absolue */
 font-size: xx-small;
 font-size: x-small;
 font-size: small;
@@ -29,129 +30,132 @@ font-size: larger;
 font-size: smaller;
 
 /* Valeurs de longueurs */
-/* Type &lt;length&gt;        */
+/* Type <length>        */
 font-size: 12px;
 font-size: 0.8em;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt;        */
+/* Type <percentage>        */
 font-size: 80%;
 
 /* Valeurs globales */
 font-size: inherit;
 font-size: initial;
 font-size: unset;
-</pre>
-
-<p>La propriété <code>font-size</code> peut être définie de deux façons :</p>
-
-<ul>
- <li>Comme un mot-clé désignant <a href="#absolue">une taille absolue</a> ou <a href="#relative">une taille relative</a></li>
- <li>Comme une valeur de type <code>&lt;length&gt;</code> ou de <code>&lt;percentage&gt;</code></li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></dt>
- <dd>Un ensemble de mots-clés désignant des valeurs absolues basées sur la taille par défaut de l'utilisateur (qui vaut <code>medium</code>). Le comportement est analogue à ce qu'on obtient en utilisant le code HTML <code>&lt;font size="1"&gt;</code> à <code>&lt;font size="7"&gt;</code> lorsque la taille par défaut de l'utilisateur vaut <code>&lt;font size="4"&gt;</code>.</dd>
- <dt><code>larger, smaller</code></dt>
- <dd>La taille de la fonte est plus grande (<code>larger</code>) ou plus petite (<code>smaller</code>) que celle de l'élément parent. Le ratio d'agrandissement/réduction est le même que celui qui sépare les mots-clés présentés avant.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une longueur positive (type {{cssxref("&lt;length&gt;")}} ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}). Lorsque les valeurs sont exprimées avec les unités <code>em</code> ou <code>ex</code>, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de <code>0.5em</code> indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est <code>rem</code>, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine <code>html</code>.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Les valeurs exprimées en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) sont proportionnelles à la taille de fonte de l'élément parent.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Il est généralement préférable d'utiliser des valeurs relatives à la taille par défaut choisie par l'utilisateur.</p>
-</div>
+```
+
+La propriété `font-size` peut être définie de deux façons :
+
+- Comme un mot-clé désignant [une taille absolue](#absolue) ou [une taille relative](#relative)
+- Comme une valeur de type `<length>` ou de `<percentage>`
+
+### Valeurs
+
+- `xx-small, x-small, small, medium, large, x-large, xx-large`
+  - : Un ensemble de mots-clés désignant des valeurs absolues basées sur la taille par défaut de l'utilisateur (qui vaut `medium`). Le comportement est analogue à ce qu'on obtient en utilisant le code HTML `<font size="1">` à `<font size="7">` lorsque la taille par défaut de l'utilisateur vaut `<font size="4">`.
+- `larger, smaller`
+  - : La taille de la fonte est plus grande (`larger`) ou plus petite (`smaller`) que celle de l'élément parent. Le ratio d'agrandissement/réduction est le même que celui qui sépare les mots-clés présentés avant.
+- `<length>`
+  - : Une longueur positive (type {{cssxref("&lt;length&gt;")}} ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}). Lorsque les valeurs sont exprimées avec les unités `em` ou `ex`, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de `0.5em` indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est `rem`, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine `html`.
+- `<percentage>`
+  - : Les valeurs exprimées en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) sont proportionnelles à la taille de fonte de l'élément parent.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+> **Note :** Il est généralement préférable d'utiliser des valeurs relatives à la taille par défaut choisie par l'utilisateur.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Les_différentes_approches">Les différentes approches</h2>
+## Les différentes approches
 
-<p>Plusieurs méthodes existent pour définir la taille de fonte utilisée : des mots-clés ou des valeurs numériques exprimées en pixels ou en ems. Selon les besoins, on utilisera une méthode différente.</p>
+Plusieurs méthodes existent pour définir la taille de fonte utilisée : des mots-clés ou des valeurs numériques exprimées en pixels ou en ems. Selon les besoins, on utilisera une méthode différente.
 
-<h3 id="Les_mots-clés">Les mots-clés</h3>
+### Les mots-clés
 
-<p>Les mots-clés sont une méthode simple et efficace pour déterminer la taille de fonte à utiliser. En utilisant un mot-clé sur l'élément {{HTMLElement("body")}}, on peut définir des tailles relatives sur toute la page et réduire ou augmenter la taille de la fonte en conséquence.</p>
+Les mots-clés sont une méthode simple et efficace pour déterminer la taille de fonte à utiliser. En utilisant un mot-clé sur l'élément {{HTMLElement("body")}}, on peut définir des tailles relatives sur toute la page et réduire ou augmenter la taille de la fonte en conséquence.
 
-<h3 id="Les_pixels">Les pixels</h3>
+### Les pixels
 
-<p>L'utilisation des pixels (<code>px</code>) permet d'obtenir un résultat statique, absolu et indépendant du système d'exploitation et du navigateur. Cependant, cette méthode est déconseillée car elle n'est pas accessible. Ainsi, les utilisateurs ne peuvent pas adapter la taille du texte avec leurs réglages si besoin.</p>
+L'utilisation des pixels (`px`) permet d'obtenir un résultat statique, absolu et indépendant du système d'exploitation et du navigateur. Cependant, cette méthode est déconseillée car elle n'est pas accessible. Ainsi, les utilisateurs ne peuvent pas adapter la taille du texte avec leurs réglages si besoin.
 
-<h3 id="Les_ems">Les ems</h3>
+### Les ems
 
-<p>On peut également définir la taille de la fonte en <code>em</code>. La taille d'une valeur exprimée en <code>em</code> est dynamique. Lorsqu'on définit la propriété <code>font-size</code>, un <code>em</code> est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit <code>font-size</code> avec une valeur de <code>20px</code> sur l'élément <code>body</code>, <code>1em</code> correspondra à <code>20px</code> et <code>2em</code> à <code>40px</code>. Ici, la valeur 2 est un facteur multiplicateur de la taille.</p>
+On peut également définir la taille de la fonte en `em`. La taille d'une valeur exprimée en `em` est dynamique. Lorsqu'on définit la propriété `font-size`, un `em` est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit `font-size` avec une valeur de `20px` sur l'élément `body`, `1em` correspondra à `20px` et `2em` à `40px`. Ici, la valeur 2 est un facteur multiplicateur de la taille.
 
-<p>Pour calculer une équivalence entre <code>em</code> et un résultat exprimé en pixels, on peut utiliser cette formule :</p>
+Pour calculer une équivalence entre `em` et un résultat exprimé en pixels, on peut utiliser cette formule :
 
-<pre class="brush: css">em = taille visée en px / font-size du parent en pixels</pre>
+```css
+em = taille visée en px / font-size du parent en pixels
+```
 
-<p>Ainsi, si la taille <code>font-size</code> de <code>body</code> vaut <code>1em</code> et que l'échelle par défaut du navigateur indique <code>1em</code> = <code>16px</code> et qu'on souhaite obtenir une <code>font-size</code> équivalente à <code>12px</code>, on pourra utiliser la valeur <code>0.75em</code> (car 12/16 = 0.75). De même, si on veut une taille analogue à <code>10px</code>, on utilisera <code>0.625em</code> (10/16 = 0.625).</p>
+Ainsi, si la taille `font-size` de `body` vaut `1em` et que l'échelle par défaut du navigateur indique `1em` = `16px` et qu'on souhaite obtenir une `font-size` équivalente à `12px`, on pourra utiliser la valeur `0.75em` (car 12/16 = 0.75). De même, si on veut une taille analogue à `10px`, on utilisera `0.625em` (10/16 = 0.625).
 
-<p>L'unité <code>em</code> est très utile car elle s'adapte automatiquement à la taille de fonte choisie par l'utilisateur.</p>
+L'unité `em` est très utile car elle s'adapte automatiquement à la taille de fonte choisie par l'utilisateur.
 
-<p>Un autre aspect important est la <strong>composition</strong> des valeurs exprimées avec cette unité. Si on prend le fragment HTML suivant :</p>
+Un autre aspect important est la **composition** des valeurs exprimées avec cette unité. Si on prend le fragment HTML suivant :
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;span&gt;
+```html
+<div>
+  <span>
     Extérieur
-      &lt;span&gt;Intérieur&lt;/span&gt;
+      <span>Intérieur</span>
     Extérieur
-  &lt;/span&gt;
-&lt;/div&gt;
-</pre>
+  </span>
+</div>
+```
 
-<p>Et qu'on applique la feuille de style suivante :</p>
+Et qu'on applique la feuille de style suivante :
 
-<pre class="brush: css">body {
+```css
+body {
   font-size: 62.5%;
 }
 span {
   font-size: 1.6em;
-}</pre>
+}
+```
 
-<p>On obtiendra le résultat suivant :</p>
+On obtiendra le résultat suivant :
 
-<p>{{EmbedLiveSample("Les_ems", 400, 40)}}</p>
+{{EmbedLiveSample("Les_ems", 400, 40)}}
 
-<p>Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de <code>font-size</code> pour le bloc <code>span</code> vaut <code>1.6em</code> et cette valeur est relative à la valeur de <code>font-size</code> pour son élément parent, elle-même relative à la valeur de <code>font-size</code> pour son élément parent. C'est ce qu'on appelle <strong>la composition</strong>.</p>
+Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de `font-size` pour le bloc `span` vaut `1.6em` et cette valeur est relative à la valeur de `font-size` pour son élément parent, elle-même relative à la valeur de `font-size` pour son élément parent. C'est ce qu'on appelle **la composition**.
 
-<h3 id="Les_rems">Les rems</h3>
+### Les rems
 
-<p>L'unité <code>rem</code> a été conçue pour régler les problèmes engendrés par la composition. Les valeurs exprimées en <code>rem</code> sont relatives à l'élément {{HTMLElement("html")}} et pas à l'élément parent. Autrement dit, cette unité permet d'exprimer une taille relative sans être impacté par la taille de l'élément parent, court-circuitant ainsi la composition.</p>
+L'unité `rem` a été conçue pour régler les problèmes engendrés par la composition. Les valeurs exprimées en `rem` sont relatives à l'élément {{HTMLElement("html")}} et pas à l'élément parent. Autrement dit, cette unité permet d'exprimer une taille relative sans être impacté par la taille de l'élément parent, court-circuitant ainsi la composition.
 
-<p>La feuille de style qui suit ressemble fortement à celle utilisée dans l'exemple précédent, on a simplement remplacé l'unité par <code>rem</code>.</p>
+La feuille de style qui suit ressemble fortement à celle utilisée dans l'exemple précédent, on a simplement remplacé l'unité par `rem`.
 
-<pre class="brush: css">html {
+```css
+html {
   font-size: 62.5%;
 }
 span {
   font-size: 1.6rem;
 }
-</pre>
+```
 
-<p>On utilisera le même fragment de HTML :</p>
+On utilisera le même fragment de HTML :
 
-<pre class="brush: html">&lt;span&gt;
+```html
+<span>
   Extérieur
-    &lt;span&gt;Intérieur&lt;/span&gt;
+    <span>Intérieur</span>
   Extérieur
-&lt;/span&gt;</pre>
+</span>
+```
 
-<p>{{EmbedLiveSample("Les_rems", 400, 40)}}</p>
+{{EmbedLiveSample("Les_rems", 400, 40)}}
 
-<p>Dans cet exemple, si la taille par défaut du navigateur vaut <code>16px</code>, tous les mots seront affichés avec une hauteur de <code>16px</code>.</p>
+Dans cet exemple, si la taille par défaut du navigateur vaut `16px`, tous les mots seront affichés avec une hauteur de `16px`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Premiers_exemples">Premiers exemples</h3>
+### Premiers exemples
 
-<pre class="brush: css">/* Le paragraphe sera écrit avec une grande */
+```css
+/* Le paragraphe sera écrit avec une grande */
 /* fonte.                                   */
 p { font-size: xx-large }
 
@@ -162,13 +166,14 @@ h1 { font-size: 250% }
 /* Le texte contenu dans des éléments span */
 /* mesurera 16px                           */
 span { font-size: 16px; }
-</pre>
+```
 
-<h3 id="Démonstration">Démonstration</h3>
+### Démonstration
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.small {
+```css
+.small {
   font-size: xx-small;
 }
 .larger {
@@ -180,59 +185,36 @@ span { font-size: 16px; }
 .percent {
   font-size: 200%;
 }
-</pre>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;h1 class="small"&gt;Petit H1&lt;/h1&gt;
-&lt;h1 class="larger"&gt;H1 plus grand&lt;/h1&gt;
-&lt;h1 class="point"&gt;H1 de 24 points&lt;/h1&gt;
-&lt;h1 class="percent"&gt;H1 à 200%&lt;/h1&gt;</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample('Démonstration','600','200')}}</p>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Les unités <code>em</code> et <code>ex</code> pour la propriété {{Cssxref("font-size")}} sont relatives à la taille de la fonte de l'élément parent. Pour les autres propriétés, en utilisant ces unités, on aura une valeur relative à la taille de fonte de l'élément courant. Cela signifie que les valeurs exprimées en <code>em</code> ou en pourcents ont le même comportement pour {{cssxref("font-size")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>font-size</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.font-size")}}</p>
+```
+
+#### HTML
+
+```html
+<h1 class="small">Petit H1</h1>
+<h1 class="larger">H1 plus grand</h1>
+<h1 class="point">H1 de 24 points</h1>
+<h1 class="percent">H1 à 200%</h1>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Démonstration','600','200')}}
+
+## Notes
+
+Les unités `em` et `ex` pour la propriété {{Cssxref("font-size")}} sont relatives à la taille de la fonte de l'élément parent. Pour les autres propriétés, en utilisant ces unités, on aura une valeur relative à la taille de fonte de l'élément courant. Cela signifie que les valeurs exprimées en `em` ou en pourcents ont le même comportement pour {{cssxref("font-size")}}.
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                            |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------- |
+| {{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}             | {{Spec2('CSS3 Fonts')}}         | Aucune modification.                    |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}     | {{Spec2('CSS3 Transitions')}} | `font-size` peut désormais être animée. |
+| {{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}} | {{Spec2('CSS2.1')}}                 | Aucune modification.                    |
+| {{SpecName('CSS1', '#font-size', 'font-size')}}                         | {{Spec2('CSS1')}}                 | Définition initiale.                    |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.font-size")}}
diff --git a/files/fr/web/css/font-smooth/index.md b/files/fr/web/css/font-smooth/index.md
index f70c9d9e4f..c12ea354ac 100644
--- a/files/fr/web/css/font-smooth/index.md
+++ b/files/fr/web/css/font-smooth/index.md
@@ -8,64 +8,53 @@ tags:
   - Reference
 translation_of: Web/CSS/font-smooth
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>font-smooth</code></strong> permet de contrôler l'application d'algorithmes anti-crénelage (<em>anti-aliasing</em>) sur le rendu des fontes de caractères.</p>
+La propriété **`font-smooth`** permet de contrôler l'application d'algorithmes anti-crénelage (_anti-aliasing_) sur le rendu des fontes de caractères.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeurs avec mot-clé */
+```css
+/* Valeurs avec mot-clé */
 font-smooth: auto;
 font-smooth: never;
 font-smooth: always;
 
-/* Valeurs de type &lt;length&gt; */
+/* Valeurs de type <length> */
 font-smooth: 2em;
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Webkit implémente <strong><code>-webkit-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p>
+> **Note :** Webkit implémente **`-webkit-font-smoothing`** avec d'autres valeurs, **là aussi c'est une propriété non-standard qui ne devrait pas être utilisée**.
+>
+> - `auto` : c'est le navigateur qui décide la meilleure approche
+> - `none` - l'anti-crénelage est désactivé.
+> - `antialiased `- lisse les caractères au niveau du pixel (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.
+> - `subpixel-antialiased` - sur la plupart des affichages non-Retina, cela donnera le texte le plus lisse.
 
-<ul>
- <li><code>auto</code> : c'est le navigateur qui décide la meilleure approche</li>
- <li><code>none</code> - l'anti-crénelage est désactivé.</li>
- <li><code>antialiased </code> - lisse les caractères au niveau du pixel (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.</li>
- <li><code>subpixel-antialiased</code> - sur la plupart des affichages non-Retina, cela donnera le texte le plus lisse.</li>
-</ul>
-</div>
+> **Note :** Firefox implémente **`-moz-osx-font-smoothing`** avec d'autres valeurs, **là aussi c'est une propriété non-standard qui ne devrait pas être utilisée**.
+>
+> - `auto` - le choix est laissé au navigateur. Cela correspond généralement à `grayscale`.
+> - `grayscale` - On applique un anti-crénelage par niveau de gris (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.
 
-<div class="note">
-<p><strong>Note :</strong> Firefox implémente <strong><code>-moz-osx-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p>
+## Spécifications
 
-<ul>
- <li><code>auto</code> - le choix est laissé au navigateur. Cela correspond généralement à <code>grayscale</code>.</li>
- <li><code>grayscale</code> - On applique un anti-crénelage par niveau de gris (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.</li>
-</ul>
-</div>
+Bien que mentionnée dans les premiers brouillons pour [CSS3 Fonts](https://www.w3.org/TR/WD-font/#font-smooth), `font-smooth` a été retirée de cette spécification et ne fait plus partie du standard.
 
-<h2 id="Spécifications">Spécifications</h2>
 
-<p>Bien que mentionnée dans les premiers brouillons pour <a href="https://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts</a>, <code>font-smooth</code> a été retirée de cette spécification et ne fait plus partie du standard.</p>
 
-<p> </p>
+- Valeur initiale : `auto`
+- S'applique à tous les éléments et au contenu généré
+- Héritée : oui
+- Valeurs relatives : par rapport à la taille de police utilisée sur l'élément parent
+- Type de média : Visuel
+- Valeur calculée : comme la valeur définie
 
-<ul>
- <li>Valeur initiale : <code>auto</code></li>
- <li>S'applique à tous les éléments et au contenu généré</li>
- <li>Héritée : oui</li>
- <li>Valeurs relatives : par rapport à la taille de police utilisée sur l'élément parent</li>
- <li>Type de média : Visuel</li>
- <li>Valeur calculée : comme la valeur définie</li>
-</ul>
 
-<p> </p>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-smooth")}}</p>
+{{Compat("css.properties.font-smooth")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/">Il faut arrêter de vouloir « réparer » le lissage des fontes – UsabilityPost (en anglais)</a></li>
-</ul>
+- [Il faut arrêter de vouloir « réparer » le lissage des fontes – UsabilityPost (en anglais)](https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/)
diff --git a/files/fr/web/css/font-stretch/index.md b/files/fr/web/css/font-stretch/index.md
index 12889ebfbd..e90bc46dfa 100644
--- a/files/fr/web/css/font-stretch/index.md
+++ b/files/fr/web/css/font-stretch/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/font-stretch
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-stretch</code></strong> permet de choisir entre la forme normale, condensée ou étendue d'une police.</p>
+La propriété **`font-stretch`** permet de choisir entre la forme normale, condensée ou étendue d'une police.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 font-stretch: ultra-condensed;
 font-stretch: extra-condensed;
 font-stretch: condensed;
@@ -31,185 +32,185 @@ font-stretch: 200%;
 font-stretch: inherit;
 font-stretch: initial;
 font-stretch: unset;
-</pre>
+```
 
-<p>Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes <em>condensées</em>) et d'autres pour lesquelles les caractères sont plus amples (fontes <em>étendues</em>).</p>
+Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes _condensées_) et d'autres pour lesquelles les caractères sont plus amples (fontes _étendues_).
 
-<p><code>font-stretch</code> permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet.</p>
+`font-stretch` permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet.
 
-<p>Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices.</p>
+Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("&lt;percentage&gt;")}}).</p>
+Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("&lt;percentage&gt;")}}).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Permet de choisir une fonte normale.</dd>
- <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
- <dd>Permet de choisir une fonte plus resserrée que la normale, <code>ultra-condensed</code> correspond à la forme la plus condensée.</dd>
- <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
- <dd>Permet de choisir une fonte plus étendue que la normale, <code>ultra-expanded</code> correspond à la forme la plus étirée.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette  propriété.</dd>
-</dl>
+- `normal`
+  - : Permet de choisir une fonte normale.
+- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`
+  - : Permet de choisir une fonte plus resserrée que la normale, `ultra-condensed` correspond à la forme la plus condensée.
+- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`
+  - : Permet de choisir une fonte plus étendue que la normale, `ultra-expanded` correspond à la forme la plus étirée.
+- `<percentage>`
+  - : Une valeur de type {{cssxref("&lt;percentage&gt;")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette  propriété.
 
-<p>Dans les anciennes versions de la spécification de <code>font-stretch</code>, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification <em>CSS Fonts</em> de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article).</p>
+Dans les anciennes versions de la spécification de `font-stretch`, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification _CSS Fonts_ de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article).
 
+### Correspondance entre les mots-clés et les valeurs numériques
 
-
-<h3 id="Correspondance_entre_les_mots-clés_et_les_valeurs_numériques">Correspondance entre les mots-clés et les valeurs numériques</h3>
-
-<p>Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages :</p>
+Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages :
 
 <table class="fullwidth-table standard-table">
- <thead>
-  <tr>
-   <th scope="col">Mot-clé</th>
-   <th scope="col">Pourcentage</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>ultra-condensed</code></td>
-   <td>50%</td>
-  </tr>
-  <tr>
-   <td><code>extra-condensed</code></td>
-   <td>62.5%</td>
-  </tr>
-  <tr>
-   <td><code>condensed</code></td>
-   <td>75%</td>
-  </tr>
-  <tr>
-   <td><code>semi-condensed</code></td>
-   <td>87.5%</td>
-  </tr>
-  <tr>
-   <td><code>normal</code></td>
-   <td>100%</td>
-  </tr>
-  <tr>
-   <td><code>semi-expanded</code></td>
-   <td>112.5%</td>
-  </tr>
-  <tr>
-   <td><code>expanded</code></td>
-   <td>125%</td>
-  </tr>
-  <tr>
-   <td><code>extra-expanded</code></td>
-   <td>150%</td>
-  </tr>
-  <tr>
-   <td><code>ultra-expanded</code></td>
-   <td>200%</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Mot-clé</th>
+      <th scope="col">Pourcentage</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>ultra-condensed</code></td>
+      <td>50%</td>
+    </tr>
+    <tr>
+      <td><code>extra-condensed</code></td>
+      <td>62.5%</td>
+    </tr>
+    <tr>
+      <td><code>condensed</code></td>
+      <td>75%</td>
+    </tr>
+    <tr>
+      <td><code>semi-condensed</code></td>
+      <td>87.5%</td>
+    </tr>
+    <tr>
+      <td><code>normal</code></td>
+      <td>100%</td>
+    </tr>
+    <tr>
+      <td><code>semi-expanded</code></td>
+      <td>112.5%</td>
+    </tr>
+    <tr>
+      <td><code>expanded</code></td>
+      <td>125%</td>
+    </tr>
+    <tr>
+      <td><code>extra-expanded</code></td>
+      <td>150%</td>
+    </tr>
+    <tr>
+      <td><code>ultra-expanded</code></td>
+      <td>200%</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Sélection_de_la_fonte">Sélection de la fonte</h3>
+### Sélection de la fonte
 
-<p>La fonte sélectionnée pour une valeur <code>font-stretch</code> dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%.</p>
+La fonte sélectionnée pour une valeur `font-stretch` dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%.
 
-<p>Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes :</p>
+Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="row"></th>
-   <th scope="col">50%</th>
-   <th scope="col">62.5%</th>
-   <th scope="col">75%</th>
-   <th scope="col">87.5%</th>
-   <th scope="col">100%</th>
-   <th scope="col">112.5%</th>
-   <th scope="col">125%</th>
-   <th scope="col">150%</th>
-   <th scope="col">200%</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">Helvetica Neue</th>
-   <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td>
-  </tr>
-  <tr>
-   <th scope="row">League Mono Variable</th>
-   <td><img alt="" src="screenshot_2018-06-06_example_page.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page1.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page2.png"></td>
-   <td><img alt="" src="screenshot_2018-06-06_example_page3.png"></td>
-   <td><img alt="" src="l-100.png"></td>
-   <td><img alt="" src="l-112.5.png"></td>
-   <td><img alt="" src="l-125.png"></td>
-   <td><img alt="" src="l-150.png"></td>
-   <td><img alt="" src="l-200.png"></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="row"></th>
+      <th scope="col">50%</th>
+      <th scope="col">62.5%</th>
+      <th scope="col">75%</th>
+      <th scope="col">87.5%</th>
+      <th scope="col">100%</th>
+      <th scope="col">112.5%</th>
+      <th scope="col">125%</th>
+      <th scope="col">150%</th>
+      <th scope="col">200%</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Helvetica Neue</th>
+      <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+    </tr>
+    <tr>
+      <th scope="row">League Mono Variable</th>
+      <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page2.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page3.png" /></td>
+      <td><img alt="" src="l-100.png" /></td>
+      <td><img alt="" src="l-112.5.png" /></td>
+      <td><img alt="" src="l-125.png" /></td>
+      <td><img alt="" src="l-150.png" /></td>
+      <td><img alt="" src="l-200.png" /></td>
+    </tr>
+  </tbody>
 </table>
 
-<ul>
- <li>Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de <code>font-stretch</code> inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale.</li>
- <li><a href="https://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de <code>font-stretch</code> selon les pourcentages choisis.</li>
-</ul>
+- Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de `font-stretch` inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale.
+- [League Mono Variable](https://tylerfinck.com/leaguemonovariable/) est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de `font-stretch` selon les pourcentages choisis.
 
-<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wdth</code> qui implémente ces largeurs variables.</p>
+Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wdth` qui implémente ces largeurs variables.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Avec_un_mot-clé">Avec un mot-clé</h3>
+### Avec un mot-clé
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="stretch"&gt;Le texte est plus étiré.&lt;/p&gt;
-&lt;p class="condensed"&gt;Le texte est plus resserré.&lt;/div&gt;</pre>
+```html
+<p class="stretch">Le texte est plus étiré.</p>
+<p class="condensed">Le texte est plus resserré.</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.stretch {
+```css
+.stretch {
   font-stretch: extra-expanded;
 }
 
 .condensed {
   font-stretch: condensed;
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Avec_un_mot-clé', '500')}}</p>
+{{EmbedLiveSample('Avec_un_mot-clé', '500')}}
 
-<h3 id="Avec_un_pourcentage">Avec un pourcentage</h3>
+### Avec un pourcentage
 
-<p>Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <code>&lt;percentage&gt;</code>.</p>
+Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs `<percentage>`.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;p class="condensed"&gt;an elephantine lizard&lt;/p&gt;
-  &lt;p class="normal"&gt;an elephantine lizard&lt;/p&gt;
-  &lt;p class="expanded"&gt;an elephantine lizard&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="container">
+  <p class="condensed">an elephantine lizard</p>
+  <p class="normal">an elephantine lizard</p>
+  <p class="expanded">an elephantine lizard</p>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">/*
+```css
+/*
 Cet exemple utilise la police League Mono Variable, développée par
 Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon
 la licence SIL Open Font, Version 1.1 :
@@ -240,43 +241,23 @@ http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
 .expanded {
   font-stretch: 200%;
 }
+```
 
-</pre>
+#### Résultat
 
-<h4 id="Résultat_2">Résultat</h4>
+{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}}
 
-<p>{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}}</p>
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
+| Spécification                                                                            | État                             | Commentaires                                                 |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------ |
+| {{SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}} | {{Spec2('CSS4 Fonts')}} | Ajout des valeurs `<percentage>` pour les polices variables. |
+| {{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale.                                         |
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td>Ajout des valeurs <code>&lt;percentage&gt;</code> pour les polices variables.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note :</strong> La propriété CSS <code>font-stretch</code> fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3.</p>
-</div>
+> **Note :** La propriété CSS `font-stretch` fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-stretch")}}</p>
+{{Compat("css.properties.font-stretch")}}
diff --git a/files/fr/web/css/font-style/index.md b/files/fr/web/css/font-style/index.md
index 69952fea4f..4978704f10 100644
--- a/files/fr/web/css/font-style/index.md
+++ b/files/fr/web/css/font-style/index.md
@@ -7,19 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/font-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>font-style</code></strong> permet de sélectionner une fonte italique (<code>italic</code>) ou (<code>oblique</code>) parmi celles listées par {{cssxref("font-family")}}.</p>
+La propriété** `font-style`** permet de sélectionner une fonte italique (`italic`) ou (`oblique`) parmi celles listées par {{cssxref("font-family")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-style.html")}}
 
-<p>La forme <strong>italique</strong> est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme <strong>oblique</strong> quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.</p>
+La forme **italique** est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme **oblique** quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>font-style</code> peut être définie avec l'un des mots-clés suivants.</p>
+La propriété `font-style` peut être définie avec l'un des mots-clés suivants.
 
-<pre class="brush:css no-line-numbers">font-style: normal;
+```css
+font-style: normal;
 font-style: italic;
 font-style: oblique;
 font-style: oblique 10deg;
@@ -28,53 +29,53 @@ font-style: oblique 10deg;
 font-style: inherit;
 font-style: initial;
 font-style: unset;
-</pre>
+```
 
-<p>La propriété <code>font-style</code> s'utilise avec un mot-clé parmi ceux qui suivent. Si ce mot-clé est <code>oblique</code>, il peut également être suivi de l' angle.</p>
+La propriété `font-style` s'utilise avec un mot-clé parmi ceux qui suivent. Si ce mot-clé est `oblique`, il peut également être suivi de l' angle.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Sélectionne une police qualifiée de <code>normal</code> parmi celles de {{cssxref("font-family")}}.</dd>
- <dt><code>italic</code></dt>
- <dd>Sélectionne une police qualifiée d'<code>italic</code>, s'il n'y a pas de version italique, une version <code>oblique</code> sera sélectionnée à la place.</dd>
- <dt><code>oblique</code></dt>
- <dd>Sélectionne une police qualifiée d'<code>oblique</code>, s'il n'y a pas de version oblique, une version <code>italic</code> sera sélectionnée à la place.</dd>
- <dt><code>oblique</code> <code>&lt;angle&gt;</code></dt>
- <dd>Sélectionne une police qualifiée d'<code>oblique</code> et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponible pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur <em>synthétisera</em> une police penchée en tournant les caractères d'une fonte normale.<br>
- L'angle indiqué (cf. {{cssxref("&lt;angle&gt;")}}) doit être compris entre <code>-90deg</code> et <code>90deg</code>. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera <code>14deg</code>. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne.</dd>
-</dl>
+- `normal`
+  - : Sélectionne une police qualifiée de `normal` parmi celles de {{cssxref("font-family")}}.
+- `italic`
+  - : Sélectionne une police qualifiée d'`italic`, s'il n'y a pas de version italique, une version `oblique` sera sélectionnée à la place.
+- `oblique`
+  - : Sélectionne une police qualifiée d'`oblique`, s'il n'y a pas de version oblique, une version `italic` sera sélectionnée à la place.
+- `oblique` `<angle>`
+  - : Sélectionne une police qualifiée d'`oblique` et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponible pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur _synthétisera_ une police penchée en tournant les caractères d'une fonte normale.
+    L'angle indiqué (cf. {{cssxref("&lt;angle&gt;")}}) doit être compris entre `-90deg` et `90deg`. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera `14deg`. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h3 id="Variable_fonts">Variable fonts</h3>
+### Variable fonts
 
-<p>Les polices variables permettent d'obtenir un contrôle fin sur la pente appliqué à la fonte. Pour cela, on pourra utiliser une police variable et <code>font-style</code> avec le mot-clé <code>oblique</code> suivi d'une valeur d'angle.</p>
+Les polices variables permettent d'obtenir un contrôle fin sur la pente appliqué à la fonte. Pour cela, on pourra utiliser une police variable et `font-style` avec le mot-clé `oblique` suivi d'une valeur d'angle.
 
-<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"slnt"</code> qui est utilisé afin d'implémenter les variations de pente. C'est l'axe <code>"ital"</code> qui est utilisé avec une valeur de 1 pour implémenter les fontes italiques. Voir {{cssxref("font-variation-settings")}}.</p>
+Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `"slnt"` qui est utilisé afin d'implémenter les variations de pente. C'est l'axe `"ital"` qui est utilisé avec une valeur de 1 pour implémenter les fontes italiques. Voir {{cssxref("font-variation-settings")}}.
 
-<p>Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe <em>CSS Fonts Level 4</em> qui permet d'utiliser <code>font-style: oblique</code> suivi d'un angle.</p>
+Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe _CSS Fonts Level 4_ qui permet d'utiliser `font-style: oblique` suivi d'un angle.
 
-<p>{{EmbedLiveSample("Variable_fonts", 1200, 180, "", "", "example-outcome-frame")}}</p>
+{{EmbedLiveSample("Variable_fonts", 1200, 180, "", "", "example-outcome-frame")}}
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;header&gt;
-    &lt;input type="range" id="slant" name="slant" min="-90" max="90" /&gt;
-    &lt;label for="slant"&gt;Slant&lt;/label&gt;
-&lt;/header&gt;
-&lt;div class="container"&gt;
-    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<header>
+    <input type="range" id="slant" name="slant" min="-90" max="90" />
+    <label for="slant">Slant</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">/*
-AmstelvarAlpha-VF is created by <span class="col-11 mr-2 text-gray-dark">David Berlow</span> (https://github.com/TypeNetwork/Amstelvar)
+```css
+/*
+AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
 and is used here under the terms of its license:
 https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
 */
@@ -97,10 +98,10 @@ label {
 .sample {
   font: 2rem 'AmstelvarAlpha', sans-serif;
 }
+```
 
-</pre>
-
-<pre class="brush: css hidden">html, body {
+```css hidden
+html, body {
   max-height: 100vh;
   max-width: 100vw;
   overflow: hidden;
@@ -119,15 +120,16 @@ header {
   flex-grow: 1;
 }
 
-.container &gt; p {
+.container > p {
   margin-top: 0;
   margin-bottom: 0;
 }
-</pre>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">let slantLabel = document.querySelector('label[for="slant"]');
+```js
+let slantLabel = document.querySelector('label[for="slant"]');
 let slantInput = document.querySelector('#slant');
 let sampleText = document.querySelector('.sample');
 
@@ -140,13 +142,14 @@ function update() {
 slantInput.addEventListener('input', update);
 
 update();
-</pre>
+```
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS_2">CSS</h3>
+### CSS
 
-<pre class="brush: css">.normal {
+```css
+.normal {
   font-style: normal;
 }
 
@@ -156,72 +159,44 @@ update();
 
 .oblique {
   font-style: oblique;
-}</pre>
+}
+```
 
-<h3 id="HTML_2">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="normal"&gt;Un paragraphe normale.&lt;/p&gt;
-&lt;p class="italic"&gt;Un paragraphe italique.&lt;/p&gt;
-&lt;p class="oblique"&gt;Un paragraphe oblique.&lt;/p&gt;
-</pre>
+```html
+<p class="normal">Un paragraphe normale.</p>
+<p class="italic">Un paragraphe italique.</p>
+<p class="oblique">Un paragraphe oblique.</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<div class="note">
-<p><strong>Note :</strong> Toutes les polices ne disposent pas nécessairement de formes pour <code>oblique</code> et <code>italic</code>, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :</p>
+> **Note :** Toutes les polices ne disposent pas nécessairement de formes pour `oblique` et `italic`, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :
+>
+> ![](screen_shot_2015-12-05_at_08.41.03.png)
 
-<p><img alt="" src="screen_shot_2015-12-05_at_08.41.03.png"></p>
-</div>
+## Accessibilité
+
+L'utilisation de grandes portions de textes avec `font-style: italic` peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des 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  | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/WCAG21/#visual-presentation)
+
+## Spécific​ations
+
+| Spécification                                                                                | État                             | Commentaires                                          |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}             | {{Spec2('CSS4 Fonts')}} | Permet d'indiquer un angle après le mot-clé `oblique` |
+|                                                                                              |                                  |                                                       |
+| {{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}             | {{Spec2('CSS3 Fonts')}} | Aucune modification.                                  |
+| {{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}} | {{Spec2('CSS2.1')}}         | Aucune modification.                                  |
+| {{SpecName('CSS1', '#font-style', 'font-style')}}                             | {{Spec2('CSS1')}}         | Définition initiale.                                  |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
 
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>L'utilisation de grandes portions de textes avec <code>font-style: italic</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>Understanding Success Criterion 1.4.8  | W3C Understanding WCAG 2.0 </em>(en anglais)</a></li>
-</ul>
-
-<h2 id="Spécific​ations">Spécific​ations</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td>Permet d'indiquer un angle après le mot-clé <code>oblique</code></td>
-  </tr>
-  <tr>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.font-style")}}</p>
+{{Compat("css.properties.font-style")}}
diff --git a/files/fr/web/css/font-synthesis/index.md b/files/fr/web/css/font-synthesis/index.md
index db3390cd3b..20c49bdc1b 100644
--- a/files/fr/web/css/font-synthesis/index.md
+++ b/files/fr/web/css/font-synthesis/index.md
@@ -10,11 +10,12 @@ tags:
   - 'recipe: css-property'
 translation_of: Web/CSS/font-synthesis
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-synthesis</code></strong> indique au navigateur s'il peut synthétiser la graisse ou la mise en italique des polices utilisées si ces variantes sont absentes.</p>
+La propriété **`font-synthesis`** indique au navigateur s'il peut synthétiser la graisse ou la mise en italique des polices utilisées si ces variantes sont absentes.
 
-<pre class="brush:css">font-synthesis: none;
+```css
+font-synthesis: none;
 font-synthesis: weight;
 font-synthesis: style;
 font-synthesis: weight style;
@@ -23,71 +24,57 @@ font-synthesis: weight style;
 font-synthesis: initial;
 font-synthesis: inherit;
 font-synthesis: unset;
-</pre>
+```
 
-<p>La plupart des polices occidentales incluent les variantes de graisse et d'italique mais certaines polices récentes ou utilisées pour le chinois, le japonais, le coréen ou d'autres scripts ont tendance à ne pas inclure ces éléments. La synthèse automatique du gras ou de l'italique par le navigateur peut réduire la lisibilité du texte et il est alors préférable de désactiver l'émulation du gras et de l'italique du navigateur.</p>
+La plupart des polices occidentales incluent les variantes de graisse et d'italique mais certaines polices récentes ou utilisées pour le chinois, le japonais, le coréen ou d'autres scripts ont tendance à ne pas inclure ces éléments. La synthèse automatique du gras ou de l'italique par le navigateur peut réduire la lisibilité du texte et il est alors préférable de désactiver l'émulation du gras et de l'italique du navigateur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Cette propriété peut prendre l'une des formes suivantes :</p>
+Cette propriété peut prendre l'une des formes suivantes :
 
-<ul>
- <li>le mot-clé <code>none</code></li>
- <li>le mot-clé <code>weight</code> ou le mot-clé <code>style</code></li>
- <li>la valeur <code>weight style</code></li>
-</ul>
+- le mot-clé `none`
+- le mot-clé `weight` ou le mot-clé `style`
+- la valeur `weight style`
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Ce mot-clé indique que la graisse ou l'italique ne doivent pas être synthétisés.</dd>
- <dt><code>weight</code></dt>
- <dd>Ce mot-clé indique qu'une fonte grasse peut être synthétisée si besoin.</dd>
- <dt><code>style</code></dt>
- <dd>Ce mot-clé indique qu'une fonte italique peut être synthétisée si besoin.</dd>
-</dl>
+- `none`
+  - : Ce mot-clé indique que la graisse ou l'italique ne doivent pas être synthétisés.
+- `weight`
+  - : Ce mot-clé indique qu'une fonte grasse peut être synthétisée si besoin.
+- `style`
+  - : Ce mot-clé indique qu'une fonte italique peut être synthétisée si besoin.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="syn"&gt;Ne me synthétisez pas !&lt;/div&gt;</pre>
+```html
+<div class="syn">Ne me synthétisez pas !</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.syn {font-synthesis: none;}
-</pre>
+```css
+.syn {font-synthesis: none;}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                             | Commentaires        |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-synthesis")}}</p>
+{{Compat("css.properties.font-synthesis")}}
diff --git a/files/fr/web/css/font-variant-alternates/index.md b/files/fr/web/css/font-variant-alternates/index.md
index 02f1d94305..f2112e8b33 100644
--- a/files/fr/web/css/font-variant-alternates/index.md
+++ b/files/fr/web/css/font-variant-alternates/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/font-variant-alternates
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-variant-alternates</code></strong> contrôle l'utilisation de glyphes alternatifs. Ces glyphes peuvent être référencé par les noms définis avec la règle @ {{cssxref("@font-feature-values")}}.</p>
+La propriété **`font-variant-alternates`** contrôle l'utilisation de glyphes alternatifs. Ces glyphes peuvent être référencé par les noms définis avec la règle @ {{cssxref("@font-feature-values")}}.
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 font-variant-alternates: normal;
 font-variant-alternates: historical-forms;
 
@@ -28,58 +29,57 @@ font-variant-alternates: swash(ident1) annotation(ident2);
 font-variant-alternates: initial;
 font-variant-alternates: inherit;
 font-variant-alternates: unset;
-</pre>
-
-<p>Ces règles @ définissent les noms associés aux valeurs OpenType pour les différents types de glyphes alternatifs (<code>stylistic</code>, <code>styleset</code>, <code>character-variant</code>, <code>swash</code>, <code>ornament</code> ou <code>annotation</code>). Ces propriétés permettent d'utiliser des noms adaptés (définis avec {{cssxref("@font-feature-values")}}) dans la feuille de style.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Cette propriété peut être définie selon deux formes :</p>
-
-<ul>
- <li>la première avec le mot-clé <code>normal</code></li>
- <li>la seconde avec un ou plusieurs mots-clés parmi ceux listés ci-aprés. S'il y a plusieurs mots-clés, ils sont séparés par des espaces. Les mots-clés peuvent être dans n'importe quel ordre.</li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>Ce mot-clé désactive l'utilisation de tels glyphes alternatifs.</dd>
- <dt><code>historical-forms</code></dt>
- <dd>Ce mot-clé active l'affichage de formes historiques, c'est-à-dire des glyphes communs par le passé qui ne sont plus utilisés aujourd'hui. Cette valeur correspond à la valeur OpenType <code>hist</code>.</dd>
- <dt><code>stylistic()</code></dt>
- <dd>Cette fonction active l'affichage de formes stylistiques alternatives. Le paramètre passé à la fonction est un nom spécifique à la fonte associé à un nombre. Elle correspond à la valeur OpenType <code>salt</code>, par exemple <code>salt 2</code>.</dd>
- <dt><code>styleset()</code></dt>
- <dd>Cette fonction active l'utilisation d'un ensemble de caractères d'un style alternatif. Le paramètre est un nom spécifique à la fonte, associé à un nombre. Elle correspond à la valeur OpenType <code>ssXY</code> (par exemple <code>ss02</code>).</dd>
- <dt><code>character-variant()</code></dt>
- <dd>Cette fonction active l'utilisation d'un ensemble de caractères stylistiques alternatifs. Elle est semblable à <code>styleset()</code> mais n'implique pas de cohérence entre les différents caractères. Avec cette valeur, les différents caractères peuvent avoir un style indépendant qui peut ne pas être cohérent. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond à la valeur OpenType <code>cvXY</code> (par exemple <code>cv02</code>).</dd>
- <dt><code>swash()</code></dt>
- <dd>Cette fonction active l'affichage des glypes <a href="https://fr.wikipedia.org/wiki/Lettre_orn%C3%A9e">pour les lettres ornées</a>. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType <code>swsh</code> et <code>cswh</code> (par exemple <code>swsh 2</code> ou <code>cswh 2</code>).</dd>
- <dt><code>ornaments()</code></dt>
- <dd>Cette fonction active l'affichage des ornements tels que les <a href="https://fr.wikipedia.org/wiki/Fleuron_(typographie)">fleurons</a> et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>ornm</code> (par exemple <code>ornm 2</code>).
- <div class="note">
-   <p><strong>Note :</strong> afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.</p></div>
- </dd>
- <dt><code>annotation()</code></dt>
- <dd>Cette fonction active l'affichage des annotations (telles que les chiffres entourés ou les caractères inversés). Le paramètre est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>nalt</code> (par exemple <code>nalt 2</code>).</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Ces règles @ définissent les noms associés aux valeurs OpenType pour les différents types de glyphes alternatifs (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament` ou `annotation`). Ces propriétés permettent d'utiliser des noms adaptés (définis avec {{cssxref("@font-feature-values")}}) dans la feuille de style.
+
+## Syntaxe
+
+Cette propriété peut être définie selon deux formes :
+
+- la première avec le mot-clé `normal`
+- la seconde avec un ou plusieurs mots-clés parmi ceux listés ci-aprés. S'il y a plusieurs mots-clés, ils sont séparés par des espaces. Les mots-clés peuvent être dans n'importe quel ordre.
+
+### Valeurs
+
+- `normal`
+  - : Ce mot-clé désactive l'utilisation de tels glyphes alternatifs.
+- `historical-forms`
+  - : Ce mot-clé active l'affichage de formes historiques, c'est-à-dire des glyphes communs par le passé qui ne sont plus utilisés aujourd'hui. Cette valeur correspond à la valeur OpenType `hist`.
+- `stylistic()`
+  - : Cette fonction active l'affichage de formes stylistiques alternatives. Le paramètre passé à la fonction est un nom spécifique à la fonte associé à un nombre. Elle correspond à la valeur OpenType `salt`, par exemple `salt 2`.
+- `styleset()`
+  - : Cette fonction active l'utilisation d'un ensemble de caractères d'un style alternatif. Le paramètre est un nom spécifique à la fonte, associé à un nombre. Elle correspond à la valeur OpenType `ssXY` (par exemple `ss02`).
+- `character-variant()`
+  - : Cette fonction active l'utilisation d'un ensemble de caractères stylistiques alternatifs. Elle est semblable à `styleset()` mais n'implique pas de cohérence entre les différents caractères. Avec cette valeur, les différents caractères peuvent avoir un style indépendant qui peut ne pas être cohérent. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond à la valeur OpenType `cvXY` (par exemple `cv02`).
+- `swash()`
+  - : Cette fonction active l'affichage des glypes [pour les lettres ornées](https://fr.wikipedia.org/wiki/Lettre_orn%C3%A9e). Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType `swsh` et `cswh` (par exemple `swsh 2` ou `cswh 2`).
+- `ornaments()`
+
+  - : Cette fonction active l'affichage des ornements tels que les [fleurons](<https://fr.wikipedia.org/wiki/Fleuron_(typographie)>) et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType `ornm` (par exemple `ornm 2`).
+
+    > **Note :** afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.
+
+- `annotation()`
+  - : Cette fonction active l'affichage des annotations (telles que les chiffres entourés ou les caractères inversés). Le paramètre est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType `nalt` (par exemple `nalt 2`).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;MDN c'est là !&lt;/p&gt;
-&lt;p class="variant"&gt;MDN c'est là !&lt;/p&gt;
-</pre>
+```html
+<p>MDN c'est là !</p>
+<p class="variant">MDN c'est là !</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@font-feature-values "Leitura Display Swashes" {
+```css
+@font-feature-values "Leitura Display Swashes" {
   @swash { fancy: 1 }
 }
 
@@ -90,35 +90,23 @@ p {
 .variant {
   font-family: Leitura Display Swashes;
   font-variant-alternates: swash(fancy);
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>Pour que cet exemple fonctionne, il faut avoir installé la fonte Open Type Leitura Display Swashes. Une version de test est disponible sur <a href="https://fontsgeek.com">fontsgeek.com</a>.</p>
+Pour que cet exemple fonctionne, il faut avoir installé la fonte Open Type Leitura Display Swashes. Une version de test est disponible sur [fontsgeek.com](https://fontsgeek.com).
 
-<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-alternates')}}</p>
+{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-alternates')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-variant-alternates")}}</p>
+{{Compat("css.properties.font-variant-alternates")}}
diff --git a/files/fr/web/css/font-variant-caps/index.md b/files/fr/web/css/font-variant-caps/index.md
index f182b3f024..7ad73cdda8 100644
--- a/files/fr/web/css/font-variant-caps/index.md
+++ b/files/fr/web/css/font-variant-caps/index.md
@@ -8,29 +8,28 @@ tags:
   - Reference
 translation_of: Web/CSS/font-variant-caps
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-variant-caps</code></strong> permet de contrôler les glyphes utilisés pour représenter les lettres en capitales. Les scripts peuvent avoir différents glyphes de différentes tailles pour les différentes représentations des capitales et cette propriété permet de choisir une de ces formes.</p>
+La propriété **`font-variant-caps`** permet de contrôler les glyphes utilisés pour représenter les lettres en capitales. Les scripts peuvent avoir différents glyphes de différentes tailles pour les différentes représentations des capitales et cette propriété permet de choisir une de ces formes.
 
-<div>{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}
 
-<p>Quand une fonte inclut des glyphes de lettres capitales avec différents corps (taille), cette propriété sélectionne la plus appropriée. Si les très petites capitales ne sont pas toutes présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes des capitales.</p>
+Quand une fonte inclut des glyphes de lettres capitales avec différents corps (taille), cette propriété sélectionne la plus appropriée. Si les très petites capitales ne sont pas toutes présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes des capitales.
 
-<p>Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite capitales.</p>
+Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite capitales.
 
-<h3 id="Règles_spécifiques_aux_langues">Règles spécifiques aux langues</h3>
+### Règles spécifiques aux langues
 
-<p>Les règles liées à chaque langue/locale sont prises en compte avec les valeurs. Par exemple :</p>
+Les règles liées à chaque langue/locale sont prises en compte avec les valeurs. Par exemple :
 
-<ul>
- <li>Pour les langues turques comme le turc (tr), l'azerbaidjanais (az), le tatare de Crimée (crh), le tatare de Volga et le Bashkir (ba), il y a deux types de i : avec ou sans le point et deux majuscules correspondantes <code>i</code>/<code>İ</code> et <code>ı</code>/<code>I</code>.</li>
- <li>En allemand (de), le caractère <code>ß</code> devient <code>ẞ</code> (U+1E9E) en majuscule.</li>
- <li>En grec (el), les voyelles perdent leur accent en majuscule lorsque tout le mot est en majuscule (<code>ά</code>/<code>Α</code>), sauf pour le êta disjonctif (<code>ή</code>/<code>Ή</code>). Les diphthongues avec un accent sur la première voyellle perdent l'accent et ajoutent une diacritique sur la deuxième voyelle (<code>άι</code>/<code>ΑΪ</code>).</li>
-</ul>
+- Pour les langues turques comme le turc (tr), l'azerbaidjanais (az), le tatare de Crimée (crh), le tatare de Volga et le Bashkir (ba), il y a deux types de i : avec ou sans le point et deux majuscules correspondantes `i`/`İ` et `ı`/`I`.
+- En allemand (de), le caractère `ß` devient `ẞ` (U+1E9E) en majuscule.
+- En grec (el), les voyelles perdent leur accent en majuscule lorsque tout le mot est en majuscule (`ά`/`Α`), sauf pour le êta disjonctif (`ή`/`Ή`). Les diphthongues avec un accent sur la première voyellle perdent l'accent et ajoutent une diacritique sur la deuxième voyelle (`άι`/`ΑΪ`).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 font-variant-caps: normal;
 font-variant-caps: small-caps;
 font-variant-caps: all-small-caps;
@@ -43,86 +42,72 @@ font-variant-caps: titling-caps;
 font-variant-caps: inherit;
 font-variant-caps: initial;
 font-variant-caps: unset;
-</pre>
-
-<p>La valeur de cette propriété peut être l'un des mots-clés définis ci-après.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>Ce mot-clé désactive l'utilisation des glyphes alternatifs.</dd>
- <dt><code>small-caps</code></dt>
- <dd>Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond à la valeur OpenType <code>smcp</code> ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.</dd>
- <dt><code>all-small-caps</code></dt>
- <dd>Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond aux valeurs OpenType <code>smcp</code> et <code>c2sc</code> ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.</dd>
- <dt><code>petite-caps</code></dt>
- <dd>Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond à la valeur OpenType <code>pcap</code> ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.</dd>
- <dt><code>all-petite-caps</code></dt>
- <dd>Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond aux valeurs OpenType <code>pcap </code>et <code>c2pc</code> ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.</dd>
- <dt><code>unicase</code></dt>
- <dd>Ce mot-clé active l'utilisation de petites capitales pour les majuscules. Il correspond à la valeur OpenType <code>unic</code>.</dd>
- <dt><code>titling-caps</code></dt>
- <dd>Ce mot-clé active l'utilisation de capitales spéciales pour les titres (à la fois pour les minuscules et majuscules). Généralement, les glyphes majuscules sont conçus pour utiliser les glyphes minuscules et ils apparaissent trop gras quand il y a un long fragment de texte utilisant de tels glyphes. L'objectif de ces glyphes spéciaux est d'éviter un tel effet. Ce mot-clé correspond à la valeur OpenType <code>titl</code> ; si la fonte ne supporte pas ce cas, le mot-clé n'aura pas d'action visible.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La valeur de cette propriété peut être l'un des mots-clés définis ci-après.
+
+### Valeurs
+
+- `normal`
+  - : Ce mot-clé désactive l'utilisation des glyphes alternatifs.
+- `small-caps`
+  - : Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond à la valeur OpenType `smcp` ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.
+- `all-small-caps`
+  - : Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond aux valeurs OpenType `smcp` et `c2sc` ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.
+- `petite-caps`
+  - : Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond à la valeur OpenType `pcap` ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.
+- `all-petite-caps`
+  - : Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond aux valeurs OpenType `pcap `et `c2pc` ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.
+- `unicase`
+  - : Ce mot-clé active l'utilisation de petites capitales pour les majuscules. Il correspond à la valeur OpenType `unic`.
+- `titling-caps`
+  - : Ce mot-clé active l'utilisation de capitales spéciales pour les titres (à la fois pour les minuscules et majuscules). Généralement, les glyphes majuscules sont conçus pour utiliser les glyphes minuscules et ils apparaissent trop gras quand il y a un long fragment de texte utilisant de tels glyphes. L'objectif de ces glyphes spéciaux est d'éviter un tel effet. Ce mot-clé correspond à la valeur OpenType `titl` ; si la fonte ne supporte pas ce cas, le mot-clé n'aura pas d'action visible.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.exemple {
+```css
+.exemple {
   font-variant-caps: small-caps;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   La Reine devint pourpre de colère et
   après l’avoir considérée un moment avec
   des yeux flamboyants comme ceux d’une
   bête fauve, elle se mit à crier :
-  « &lt;span class="exemple"&gt;Qu’on lui coupe la tête !&lt;/span&gt; »
-&lt;/p&gt;
-</pre>
+  « <span class="exemple">Qu’on lui coupe la tête !</span> »
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>L'utilisation de grandes portions de textes avec <code>font-style: all-small-caps</code> ou <code>font-style: all-petite-caps</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</p>
+L'utilisation de grandes portions de textes avec `font-style: all-small-caps` ou `font-style: all-petite-caps` peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.
 
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>W3C Understanding WCAG 2.1 </em>(en anglais)</a></li>
-</ul>
+- [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)
+- [_W3C Understanding WCAG 2.1_ (en anglais)](https://www.w3.org/TR/WCAG21/#visual-presentation)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-variant-caps")}}</p>
+{{Compat("css.properties.font-variant-caps")}}
diff --git a/files/fr/web/css/font-variant-east-asian/index.md b/files/fr/web/css/font-variant-east-asian/index.md
index 280c061758..d43b1fdb8c 100644
--- a/files/fr/web/css/font-variant-east-asian/index.md
+++ b/files/fr/web/css/font-variant-east-asian/index.md
@@ -7,131 +7,91 @@ tags:
   - Reference
 translation_of: Web/CSS/font-variant-east-asian
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-variant-east-asian</code></strong> contrôle l'utilisation des glyphes alternatifs pour les scripts japonais, chinois et d'Asie orientale.</p>
+La propriété **`font-variant-east-asian`** contrôle l'utilisation des glyphes alternatifs pour les scripts japonais, chinois et d'Asie orientale.
 
-<pre class="brush:css no-line-numbers">font-variant-east-asian: normal;
+```css
+font-variant-east-asian: normal;
 font-variant-east-asian: ruby;
-font-variant-east-asian: jis78;              /* &lt;east-asian-variant-values&gt; */
-font-variant-east-asian: jis83;              /* &lt;east-asian-variant-values&gt; */
-font-variant-east-asian: jis90;              /* &lt;east-asian-variant-values&gt; */
-font-variant-east-asian: jis04;              /* &lt;east-asian-variant-values&gt; */
-font-variant-east-asian: simplified;         /* &lt;east-asian-variant-values&gt; */
-font-variant-east-asian: traditional;        /* &lt;east-asian-variant-values&gt; */
-font-variant-east-asian: full-width;         /* &lt;east-asian-width-values&gt; */
-font-variant-east-asian: proportional-width; /* &lt;east-asian-width-values&gt; */
+font-variant-east-asian: jis78;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis83;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis90;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis04;              /* <east-asian-variant-values> */
+font-variant-east-asian: simplified;         /* <east-asian-variant-values> */
+font-variant-east-asian: traditional;        /* <east-asian-variant-values> */
+font-variant-east-asian: full-width;         /* <east-asian-width-values> */
+font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
 font-variant-east-asian: ruby full-width jis83;
 
 /* Valeurs globales */
 font-variant-east-asian: inherit;
 font-variant-east-asian: initial;
 font-variant-east-asian: unset;
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>Ce mot-clé désactive les glyphes alternatifs.</dd>
- <dt><code>ruby</code></dt>
- <dd>Ce mot-clé force l'utilisation de glyphes spécifiques pour les caractères ruby. Généralement, ceux-ci sont plus petits et légèrement plus gras pour améliorer le contraste. Ce mot-clé correspond aux valeurs OpenType <code>ruby</code>.</dd>
- <dt><code>&lt;east-asian-variant-values&gt;</code></dt>
- <dd>Ces valeurs définissent un ensemble de variantes de glypes logographiques à utiliser pour l'affichage. Les valeurs possibles sont :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <th>Mot-clé</th>
-    <th>Standard dans lequel sont définis les glyphs</th>
-    <th>Équivalent OpenType</th>
-   </tr>
-   <tr>
-    <td><code>jis78</code></td>
-    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0208#First_standard">JIS X 0208:1978</a></td>
-    <td><code>jp78</code></td>
-   </tr>
-   <tr>
-    <td><code>jis83</code></td>
-    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0208#Second_standard">JIS X 0208:1983</a></td>
-    <td><code>jp83</code></td>
-   </tr>
-   <tr>
-    <td><code>jis90</code></td>
-    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0208#Third_standard">JIS X 0208:1990</a></td>
-    <td><code>jp90</code></td>
-   </tr>
-   <tr>
-    <td><code>jis04</code></td>
-    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0213">JIS X 0213:2004</a></td>
-    <td><code>jp04</code></td>
-   </tr>
-   <tr>
-    <td><code>simplified</code></td>
-    <td>Aucun, ce sont les glyphes chinois simplifiés qui sont utilisés.</td>
-    <td><code>smpl</code></td>
-   </tr>
-   <tr>
-    <td><code>traditional</code></td>
-    <td>Aucun, ce sont les glyphes chinois traditionnels qui sont utilisés.</td>
-    <td><code>trad</code></td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><em>&lt;<em>east-asian-width-values</em></em>&gt;</dt>
- <dd>Ces valeurs permettent de contrôler le dimensionnement des symboles pour les caractères des langues d'Asie orientale. Deux valeurs sont possibles :
- <ul>
-  <li><code>proportional-width</code> qui active l'ensemble de caractères d'Asie orientale qui n'ont pas tous la même largeur. Elle correspond aux valeurs OpenType <code>pwid</code>.</li>
-  <li><code>full-width</code> qui active l'ensemble de caractères d'Asie orientale où les caractères ont tous la même taille et forme carrée. Elle correspond aux valeurs OpenType <code>fwid</code>.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Syntaxe
+
+### Valeurs
+
+- `normal`
+  - : Ce mot-clé désactive les glyphes alternatifs.
+- `ruby`
+  - : Ce mot-clé force l'utilisation de glyphes spécifiques pour les caractères ruby. Généralement, ceux-ci sont plus petits et légèrement plus gras pour améliorer le contraste. Ce mot-clé correspond aux valeurs OpenType `ruby`.
+- `<east-asian-variant-values>`
+
+  - : Ces valeurs définissent un ensemble de variantes de glypes logographiques à utiliser pour l'affichage. Les valeurs possibles sont :
+
+    | Mot-clé       | Standard dans lequel sont définis les glyphs                                | Équivalent OpenType |
+    | ------------- | --------------------------------------------------------------------------- | ------------------- |
+    | `jis78`       | [JIS X 0208:1978](https://en.wikipedia.org/wiki/JIS_X_0208#First_standard)  | `jp78`              |
+    | `jis83`       | [JIS X 0208:1983](https://en.wikipedia.org/wiki/JIS_X_0208#Second_standard) | `jp83`              |
+    | `jis90`       | [JIS X 0208:1990](https://en.wikipedia.org/wiki/JIS_X_0208#Third_standard)  | `jp90`              |
+    | `jis04`       | [JIS X 0213:2004](https://en.wikipedia.org/wiki/JIS_X_0213)                 | `jp04`              |
+    | `simplified`  | Aucun, ce sont les glyphes chinois simplifiés qui sont utilisés.            | `smpl`              |
+    | `traditional` | Aucun, ce sont les glyphes chinois traditionnels qui sont utilisés.         | `trad`              |
+
+- *<*east-asian-width-values\*\*>
+
+  - : Ces valeurs permettent de contrôler le dimensionnement des symboles pour les caractères des langues d'Asie orientale. Deux valeurs sont possibles :
+
+    - `proportional-width` qui active l'ensemble de caractères d'Asie orientale qui n'ont pas tous la même largeur. Elle correspond aux valeurs OpenType `pwid`.
+    - `full-width` qui active l'ensemble de caractères d'Asie orientale où les caractères ont tous la même taille et forme carrée. Elle correspond aux valeurs OpenType `fwid`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">exemple {
+```css
+exemple {
   font-variant-east-asian: ruby;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;!&lt;/p&gt;</pre>
+```html
+<p class="exemple">!</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<p>{{LiveSampleLink("Exemples","Lien vers l'exemple")}}</p>
+{{LiveSampleLink("Exemples","Lien vers l'exemple")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-variant-east-asian")}}</p>
+{{Compat("css.properties.font-variant-east-asian")}}
diff --git a/files/fr/web/css/font-variant-ligatures/index.md b/files/fr/web/css/font-variant-ligatures/index.md
index f22176a920..222c0f3140 100644
--- a/files/fr/web/css/font-variant-ligatures/index.md
+++ b/files/fr/web/css/font-variant-ligatures/index.md
@@ -7,80 +7,79 @@ tags:
   - Reference
 translation_of: Web/CSS/font-variant-ligatures
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-variant-ligatures</code></strong> contrôle quelles {{Glossary("ligatures")}} et {{Glossary("formes contextuelles")}} sont utilisées dans les éléments textuels auxquels elle s'applique. Ceci vise à harmoniser l'affichage du texte.</p>
+La propriété **`font-variant-ligatures`** contrôle quelles {{Glossary("ligatures")}} et {{Glossary("formes contextuelles")}} sont utilisées dans les éléments textuels auxquels elle s'applique. Ceci vise à harmoniser l'affichage du texte.
 
-<div>{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">font-variant-ligatures: normal;
+```css
+font-variant-ligatures: normal;
 font-variant-ligatures: none;
-font-variant-ligatures: common-ligatures;           /* &lt;common-lig-values&gt; */
-font-variant-ligatures: no-common-ligatures;        /* &lt;common-lig-values&gt; */
-font-variant-ligatures: discretionary-ligatures;    /* &lt;discretionary-lig-values&gt; */
-font-variant-ligatures: no-discretionary-ligatures; /* &lt;discretionary-lig-values&gt; */
-font-variant-ligatures: historical-ligatures;       /* &lt;historical-lig-values&gt; */
-font-variant-ligatures: no-historical-ligatures;    /* &lt;historical-lig-values&gt; */
-font-variant-ligatures: contextual;                 /* &lt;contextual-alt-values&gt; */
-font-variant-ligatures: no-contextual;              /* &lt;contextual-alt-values&gt; */
-font-variant-ligatures: contextual;                 /* &lt;no-historical-ligatures&gt; &lt;common-ligatures&gt; */
+font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
+font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
+font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
+font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
+font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
+font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
+font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
+font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
+font-variant-ligatures: contextual;                 /* <no-historical-ligatures> <common-ligatures> */
 
 /* Valeurs globales */
 font-variant-ligatures: inherit;
 font-variant-ligatures: initial;
 font-variant-ligatures: unset;
-</pre>
-
-<p>La valeur de cette propriété peut être l'un des mots-clés définis ci-après.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>Cette valeur active les ligatures et les formes contextuelles courantes pour un rendu correct. Les ligatures et formes activées dépendent de la police utilisée, de la langue et de certains scripts. C'est la valeur par défaut.</dd>
- <dt><code>none</code></dt>
- <dd>Cette valeur désactive toutes les ligatures et formes contextuelles, y compris celles couramment utilisées.</dd>
- <dt>&lt;common-lig-values&gt;</dt>
- <dd>Ces valeurs contrôlent les ligatures les plus courantes, comme <code>fi</code>, <code>ffi</code>, <code>th</code> et autres. Elles correspondent aux valeurs OpenType <code>liga</code> and <code>clig</code>. Deux valeurs sont possibles:
- <ul>
-  <li><code>common-ligatures</code> active ces ligatures. Notez que la valeur <code>normal</code> active ces ligatures.</li>
-  <li><code>no-common-ligatures</code> désactive ces ligatures.</li>
- </ul>
- </dd>
- <dt><em>&lt;discretionary-lig-values&gt;</em></dt>
- <dd>Ces valeurs contrôlent les ligatures spécifiques, spécifiques à la police et définies par le fondeur. Elles correspondent à la valeur OpenType <code>dlig</code>. Deux valeurs sont possibles:
- <ul>
-  <li><code>discretionary-ligatures</code> active ces ligatures.</li>
-  <li><code>no-discretionary-ligatures</code> désactive ces ligatures. Notez que la valeur <code>normal</code> désactive ces ligatures.</li>
- </ul>
- </dd>
- <dt><em>&lt;historical-lig-values&gt;</em></dt>
- <dd>Ces valeurs contrôlent les ligatures historiques, utilisées dans les livres anciens, comme l'allemand tz qui devient ß. Elles correspondent à la valeur OpenType <code>hlig</code>. Deux valeurs sont possibles:
- <ul>
-  <li><code>historical-ligatures</code> active ces ligatures.</li>
-  <li><code>no-historical-ligatures</code> désactive ces ligatures. Notez que la valeur <code>normal</code> désactive ces ligatures.</li>
- </ul>
- </dd>
- <dt><em>&lt;contextual-alt-values&gt;</em></dt>
- <dd>Ces valeurs contrôlent la manière dont les lettres s'adaptent à leur contexte, c'est-à-dire aux lettres qui les entourent. Elles correspondent à la valeur OpenType <code>calt</code>. Deux valeurs sont possibles:
- <ul>
-  <li><code>contextual</code> précise que des alternatives contextuelles peuvent être utilisées. Notez que la valeur <code>normal</code> active ces ligatures.</li>
-  <li><code>no-contextual</code> interdit leur utilisation.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La valeur de cette propriété peut être l'un des mots-clés définis ci-après.
+
+### Valeurs
+
+- `normal`
+  - : Cette valeur active les ligatures et les formes contextuelles courantes pour un rendu correct. Les ligatures et formes activées dépendent de la police utilisée, de la langue et de certains scripts. C'est la valeur par défaut.
+- `none`
+  - : Cette valeur désactive toutes les ligatures et formes contextuelles, y compris celles couramment utilisées.
+- \<common-lig-values>
+
+  - : Ces valeurs contrôlent les ligatures les plus courantes, comme `fi`, `ffi`, `th` et autres. Elles correspondent aux valeurs OpenType `liga` and `clig`. Deux valeurs sont possibles:
+
+    - `common-ligatures` active ces ligatures. Notez que la valeur `normal` active ces ligatures.
+    - `no-common-ligatures` désactive ces ligatures.
+
+- _\<discretionary-lig-values>_
+
+  - : Ces valeurs contrôlent les ligatures spécifiques, spécifiques à la police et définies par le fondeur. Elles correspondent à la valeur OpenType `dlig`. Deux valeurs sont possibles:
+
+    - `discretionary-ligatures` active ces ligatures.
+    - `no-discretionary-ligatures` désactive ces ligatures. Notez que la valeur `normal` désactive ces ligatures.
+
+- _\<historical-lig-values>_
+
+  - : Ces valeurs contrôlent les ligatures historiques, utilisées dans les livres anciens, comme l'allemand tz qui devient ß. Elles correspondent à la valeur OpenType `hlig`. Deux valeurs sont possibles:
+
+    - `historical-ligatures` active ces ligatures.
+    - `no-historical-ligatures` désactive ces ligatures. Notez que la valeur `normal` désactive ces ligatures.
+
+- _\<contextual-alt-values>_
+
+  - : Ces valeurs contrôlent la manière dont les lettres s'adaptent à leur contexte, c'est-à-dire aux lettres qui les entourent. Elles correspondent à la valeur OpenType `calt`. Deux valeurs sont possibles:
+
+    - `contextual` précise que des alternatives contextuelles peuvent être utilisées. Notez que la valeur `normal` active ces ligatures.
+    - `no-contextual` interdit leur utilisation.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">p {
+```css
+p {
   font-size: 2rem;
   font-family: Lora, serif;
 }
@@ -127,82 +126,70 @@ font-variant-ligatures: unset;
 .contextual {
   font-variant-ligatures: contextual;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"&gt;
-&lt;p class="normal"&gt;
-  normal&lt;br&gt;
+```html
+<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet">
+<p class="normal">
+  normal<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-&lt;p class="none"&gt;
-  none&lt;br&gt;
+</p>
+<p class="none">
+  none<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-&lt;p class="common-ligatures"&gt;
-  common-ligatures&lt;br&gt;
+</p>
+<p class="common-ligatures">
+  common-ligatures<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-&lt;p class="no-common-ligatures"&gt;
-  no-common-ligatures&lt;br&gt;
+</p>
+<p class="no-common-ligatures">
+  no-common-ligatures<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-&lt;p class="discretionary-ligatures"&gt;
-  discretionary-ligatures&lt;br&gt;
+</p>
+<p class="discretionary-ligatures">
+  discretionary-ligatures<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-&lt;p class="no-discretionary-ligatures"&gt;
-  no-discretionary-ligatures&lt;br&gt;
+</p>
+<p class="no-discretionary-ligatures">
+  no-discretionary-ligatures<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-&lt;p class="historical-ligatures"&gt;
-  historical-ligatures&lt;br&gt;
+</p>
+<p class="historical-ligatures">
+  historical-ligatures<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-&lt;p class="no-historical-ligatures"&gt;
-  no-historical-ligatures&lt;br&gt;
+</p>
+<p class="no-historical-ligatures">
+  no-historical-ligatures<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-&lt;p class="contextual"&gt;
-  contextual&lt;br&gt;
+</p>
+<p class="contextual">
+  contextual<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-&lt;p class="no-contextual"&gt;
-  no-contextual&lt;br&gt;
+</p>
+<p class="no-contextual">
+  no-contextual<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-&lt;p class="contextual"&gt;
-  contextual&lt;br&gt;
+</p>
+<p class="contextual">
+  contextual<br>
   if fi ff tf ft jf fj
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-ligatures')}}</p>
+{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-ligatures')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-variant-ligatures")}}</p>
+{{Compat("css.properties.font-variant-ligatures")}}
diff --git a/files/fr/web/css/font-variant-numeric/index.md b/files/fr/web/css/font-variant-numeric/index.md
index b76c7896db..ad8967a4dd 100644
--- a/files/fr/web/css/font-variant-numeric/index.md
+++ b/files/fr/web/css/font-variant-numeric/index.md
@@ -7,79 +7,90 @@ tags:
   - Reference
 translation_of: Web/CSS/font-variant-numeric
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-variant-numeric</code></strong> permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux.</p>
+La propriété **`font-variant-numeric`** permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux.
 
-<div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">font-variant-numeric: normal;
+```css
+font-variant-numeric: normal;
 font-variant-numeric: ordinal;
 font-variant-numeric: slashed-zero;
-font-variant-numeric: lining-nums;         /* &lt;numeric-figure-values&gt; */
-font-variant-numeric: oldstyle-nums;       /* &lt;numeric-figure-values&gt; */
-font-variant-numeric: proportional-nums;   /* &lt;numeric-spacing-values&gt; */
-font-variant-numeric: tabular-nums;        /* &lt;numeric-spacing-values&gt; */
-font-variant-numeric: diagonal-fractions;  /* &lt;numeric-fraction-values&gt; */
-font-variant-numeric: stacked-fractions;   /* &lt;numeric-fraction-values&gt; */
+font-variant-numeric: lining-nums;         /* <numeric-figure-values> */
+font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
+font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
+font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
+font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
+font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
 font-variant-numeric: oldstyle-nums stacked-fractions;
 
 /* Valeurs globales */
 font-variant-numeric: inherit;
 font-variant-numeric: initial;
 font-variant-numeric: unset;
-</pre>
-
-<p>La valeur de cette propriété peut être définie selon deux formes :</p>
-
-<ul>
- <li>la première avec le mot-clé <code>normal</code></li>
- <li>la seconde avec une ou plusieurs valeurs parmi celles définies ci-après, séparées par des espaces et dans n'importe quel ordre.</li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>Ce mot-clé désactive l'utilisation des glyphes alternatifs.</dd>
- <dt><code>ordinal</code></dt>
- <dd>Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1<sup>er</sup>, 2<sup>e</sup>, 3<sup>e</sup>, etc. Il correspond aux valeurs OpenType values <code>ordn</code>.</dd>
- <dt><code>slashed-zero</code></dt>
- <dd>Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs  OpenType <code>zero</code>.</dd>
- <dt><em>&lt;numeric-figure-values</em>&gt;</dt>
- <dd>Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées :
- <ul>
-  <li><code>lining-nums</code> permet d'activer l'ensemble de chiffres pour lequel tous les nombres sont apposés sur la ligne de base. Elle correspond aux valeurs OpenType <code>lnum</code>.</li>
-  <li><code>oldstyle-nums</code> permet d'activer l'ensemble de chiffres pour lequel certains nombres, comme 3, 4, 7, 9, ont un jambage. Elle correspond aux valleurs OpenType <code>onum</code>.</li>
- </ul>
- </dd>
- <dt><em>&lt;numeric-spacing-values</em>&gt;</dt>
- <dd>Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valelurs :
- <ul>
-  <li><code>proportional-nums</code> permet d'activer l'ensemble où les chiffres ne sont pas tous de la même taille. Elle correspond aux valeurs OpenType <code>pnum</code>.</li>
-  <li><code>tabular-nums</code> permet d'activer l'ensemble où les chiffres ont la même taille (ce qui leur permet d'être facilement alignés dans des tableaux). Elle correspond aux valeurs OpenType <code>tnum</code>.</li>
- </ul>
- </dd>
- <dt><em>&lt;numeric-fraction-values</em>&gt;</dt>
- <dd>Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions :
- <ul>
-  <li><code>diagonal-fractions</code> permet d'utiliser l'ensemble où le numérateur et le dénominateur sont plus petits et séparés par une barre oblique. Elle correspond aux valeurs OpenType <code>frac</code>.</li>
-  <li><code>stacked-fractions</code> permet d'utiliser l'ensemble où les chiffres du numérateur et du dénominateur sont plus petits et séparés par une ligne horizontale. Elle correspond aux valeurs OpenType <code>afrc</code>.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La valeur de cette propriété peut être définie selon deux formes :
+
+- la première avec le mot-clé `normal`
+- la seconde avec une ou plusieurs valeurs parmi celles définies ci-après, séparées par des espaces et dans n'importe quel ordre.
+
+### Valeurs
+
+- `normal`
+  - : Ce mot-clé désactive l'utilisation des glyphes alternatifs.
+- `ordinal`
+
+  - : Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1
+
+    <sup>er</sup>
+
+    , 2
+
+    <sup>e</sup>
+
+    , 3
+
+    <sup>e</sup>
+
+    , etc. Il correspond aux valeurs OpenType values `ordn`.
+
+- `slashed-zero`
+  - : Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs  OpenType `zero`.
+- _\<numeric-figure-values_>
+
+  - : Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées :
+
+    - `lining-nums` permet d'activer l'ensemble de chiffres pour lequel tous les nombres sont apposés sur la ligne de base. Elle correspond aux valeurs OpenType `lnum`.
+    - `oldstyle-nums` permet d'activer l'ensemble de chiffres pour lequel certains nombres, comme 3, 4, 7, 9, ont un jambage. Elle correspond aux valleurs OpenType `onum`.
+
+- _\<numeric-spacing-values_>
+
+  - : Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valelurs :
+
+    - `proportional-nums` permet d'activer l'ensemble où les chiffres ne sont pas tous de la même taille. Elle correspond aux valeurs OpenType `pnum`.
+    - `tabular-nums` permet d'activer l'ensemble où les chiffres ont la même taille (ce qui leur permet d'être facilement alignés dans des tableaux). Elle correspond aux valeurs OpenType `tnum`.
+
+- _\<numeric-fraction-values_>
+
+  - : Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions :
+
+    - `diagonal-fractions` permet d'utiliser l'ensemble où le numérateur et le dénominateur sont plus petits et séparés par une barre oblique. Elle correspond aux valeurs OpenType `frac`.
+    - `stacked-fractions` permet d'utiliser l'ensemble où les chiffres du numérateur et du dénominateur sont plus petits et séparés par une ligne horizontale. Elle correspond aux valeurs OpenType `afrc`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/*
+```css
+/*
 Cet exemple utilise la police Source Sans Pro OpenType développée par Adobe
 et utilisée ici sous les termes de la licence SIL Open Font en Version 1.1 :
 http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
@@ -96,37 +107,26 @@ http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
   font-variant-numeric: ordinal;
   font-family: "Source Sans Pro";
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="ordinal"&gt;Premier, deuxième, troisième, quatrième, cinquième&lt;/p&gt;</pre>
+```html
+<p class="ordinal">Premier, deuxième, troisième, quatrième, cinquième</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-variant-numeric")}}</p>
+{{Compat("css.properties.font-variant-numeric")}}
diff --git a/files/fr/web/css/font-variant-position/index.md b/files/fr/web/css/font-variant-position/index.md
index 8616d88374..78b9d97af8 100644
--- a/files/fr/web/css/font-variant-position/index.md
+++ b/files/fr/web/css/font-variant-position/index.md
@@ -7,13 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/font-variant-position
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-variant-position</code></strong> permet d'utiliser des glyphes de plus petite taille positionnés en exposant ou en indice par rapport à la ligne de base utilisée (qui reste la même).</p>
+La propriété **`font-variant-position`** permet d'utiliser des glyphes de plus petite taille positionnés en exposant ou en indice par rapport à la ligne de base utilisée (qui reste la même).
 
-<p>Généralement, les glyphes utilisés sont ceux utilisés pour les éléments HTML {{HTMLElement("sub")}} et {{HTMLElement("sup")}}.</p>
+Généralement, les glyphes utilisés sont ceux utilisés pour les éléments HTML {{HTMLElement("sub")}} et {{HTMLElement("sup")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 font-variant-position: normal;
 font-variant-position: sub;
 font-variant-position: super;
@@ -22,72 +23,61 @@ font-variant-position: super;
 font-variant-position: inherit;
 font-variant-position: initial;
 font-variant-position: unset;
-</pre>
+```
 
-<p>Lorsque ces glyphes alternatifs sont activés, si un caractère de l'ensemble concerné ne possède pas de glyphe correspondant, l'ensemble des caractères est affiché avec une méthode de secours qui synthétise ces glyphes.</p>
+Lorsque ces glyphes alternatifs sont activés, si un caractère de l'ensemble concerné ne possède pas de glyphe correspondant, l'ensemble des caractères est affiché avec une méthode de secours qui synthétise ces glyphes.
 
-<p>Ces glyphes alternatifs possèdent la même boîte em et la même ligne de base que le reste du texte. La modification est purement graphique et il n'y a pas d'impact sur la hauteur de ligne ou sur les autres caractéristiques liées aux boîtes.</p>
+Ces glyphes alternatifs possèdent la même boîte em et la même ligne de base que le reste du texte. La modification est purement graphique et il n'y a pas d'impact sur la hauteur de ligne ou sur les autres caractéristiques liées aux boîtes.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La valeur de cette propriété est définie grâce à l'un des mots-clés définis ci-après.</p>
+La valeur de cette propriété est définie grâce à l'un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Les glyphes alternatifs sont désactivés.</dd>
- <dt><code>sub</code></dt>
- <dd>Ce mot-clé permet d'utiliser les glyphes utilisés en indice.</dd>
- <dt><code>super</code></dt>
- <dd>Ce mot-clé permet d'utiliser les glyphes utilisés en exposant.</dd>
-</dl>
+- `normal`
+  - : Les glyphes alternatifs sont désactivés.
+- `sub`
+  - : Ce mot-clé permet d'utiliser les glyphes utilisés en indice.
+- `super`
+  - : Ce mot-clé permet d'utiliser les glyphes utilisés en exposant.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.exemple {
+```css
+.exemple {
   font-variant-position: super;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt; Alice &lt;span class="exemple"&gt;ne s’était pas fait le moindre mal.&lt;/span&gt;
+```html
+<p> Alice <span class="exemple">ne s’était pas fait le moindre mal.</span>
     Vite elle se remet sur ses pieds et regarde en l’air ; mais tout
     est noir là-haut. Elle voit devant elle un long passage et le Lapin
     Blanc qui court à toutes jambes.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-variant-position")}}</p>
+{{Compat("css.properties.font-variant-position")}}
diff --git a/files/fr/web/css/font-variant/index.md b/files/fr/web/css/font-variant/index.md
index 86e59df336..69a6f8120f 100644
--- a/files/fr/web/css/font-variant/index.md
+++ b/files/fr/web/css/font-variant/index.md
@@ -7,107 +7,85 @@ tags:
   - Reference
 translation_of: Web/CSS/font-variant
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font-variant</code></strong> est une propriété raccourcie représentant les propriétés : {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}} et {{cssxref("font-variant-east-asian")}}. On peut aussi utiliser les valeurs de la propriété <code>font-variant</code> définies avec CSS Level 2 (<code>normal</code> ou <code>small-caps</code>), en utilisant la propriété raccourcie {{cssxref("font")}}.</p>
+La propriété **`font-variant`** est une propriété raccourcie représentant les propriétés : {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}} et {{cssxref("font-variant-east-asian")}}. On peut aussi utiliser les valeurs de la propriété `font-variant` définies avec CSS Level 2 (`normal` ou `small-caps`), en utilisant la propriété raccourcie {{cssxref("font")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/font-variant.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-variant.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">font-variant: small-caps;
+```css
+font-variant: small-caps;
 font-variant: common-ligatures small-caps;
 
 /* Valeurs globales */
 font-variant: inherit;
 font-variant: initial;
 font-variant: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de <code>normal</code>. Ces propriétés sont {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, et {{cssxref("font-variant-east-asian")}}.</dd>
- <dt><code>none</code></dt>
- <dd>Définit la valeur de {{cssxref("font-variant-ligatures")}} comme étant <code>none</code> et les valeurs des autres propriétés à <code>normal</code>, leur valeur initiale.</dd>
- <dt>&lt;common-lig-values&gt;, &lt;discretionary-lig-values&gt;, &lt;historical-lig-values&gt;, &lt;contextual-alt-values&gt;</dt>
- <dd>Définit la valeur de la propriété {{cssxref("font-variant-ligatures")}}. Les valeurs possibles sont: <code>common-ligatures</code>,<code>no-common-ligatures</code>, <code>discretionary-ligatures</code>, <code>no-discretionary-ligatures</code>, <code>historical-ligatures</code>, <code>no-historical-ligatures</code>,<code>contextual</code>, et <code>no-contextual</code>.</dd>
- <dt><code>stylistic()</code>, <code>historical-forms</code>, <code>styleset()</code>, <code>character-variant()</code>, <code>swash()</code>, <code>ornaments()</code>, <code>annotation()</code></dt>
- <dd>Définit les mots-clés et fonctions relatives à la propriété {{cssxref("font-variant-alternates")}}.</dd>
- <dt><code>small-caps</code>, <code>all-small-caps</code>, <code>petite-caps</code>, <code>all-petite-caps</code>, <code>unicase</code>, <code>titling-caps</code></dt>
- <dd>Définit le mot-clé relatif à la propriété {{cssxref("font-variant-caps")}}.</dd>
- <dt><code>&lt;numeric-figure-values&gt;</code>, <code>&lt;numeric-spacing-values&gt;</code>, <code>&lt;numeric-fraction-values&gt;</code>, <code>ordinal</code>, <code>slashed-zero</code></dt>
- <dd>Définit la valeur de la propriété {{cssxref("font-variant-numeric")}}. Les valeurs possibles sont <code>lining-nums</code>,<code> oldstyle-nums</code>, <code>proportional-nums</code>, <code>tabular-nums</code>, <code>diagonal-fractions</code>, <code>stacked-fractions</code>, <code>ordinal</code>, et <code>slashed-zero.</code></dd>
- <dt><code>&lt;east-asian-variant-values&gt;</code>, <code>&lt;east-asian-width-values&gt;</code>, <code>ruby</code></dt>
- <dd>Définit la valeur de la propriété {{cssxref("font-variant-east-asian")}}. Les valeurs possibles sont: <code>jis78</code>, <code>jis83</code>,<code>jis90</code>, <code>jis04</code>, <code>simplified</code>, <code>traditional</code>, <code>full-width</code>, <code>proportional-width</code>, <code>ruby</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `normal`
+  - : Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de `normal`. Ces propriétés sont {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, et {{cssxref("font-variant-east-asian")}}.
+- `none`
+  - : Définit la valeur de {{cssxref("font-variant-ligatures")}} comme étant `none` et les valeurs des autres propriétés à `normal`, leur valeur initiale.
+- \<common-lig-values>, \<discretionary-lig-values>, \<historical-lig-values>, \<contextual-alt-values>
+  - : Définit la valeur de la propriété {{cssxref("font-variant-ligatures")}}. Les valeurs possibles sont: `common-ligatures`,`no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`,`contextual`, et `no-contextual`.
+- `stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()`
+  - : Définit les mots-clés et fonctions relatives à la propriété {{cssxref("font-variant-alternates")}}.
+- `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`
+  - : Définit le mot-clé relatif à la propriété {{cssxref("font-variant-caps")}}.
+- `<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero`
+  - : Définit la valeur de la propriété {{cssxref("font-variant-numeric")}}. Les valeurs possibles sont `lining-nums`,` oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, et `slashed-zero.`
+- `<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby`
+  - : Définit la valeur de la propriété {{cssxref("font-variant-east-asian")}}. Les valeurs possibles sont: `jis78`, `jis83`,`jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `ruby`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="normal"&gt;Firefox normal&lt;/p&gt;
-&lt;p class="small"&gt;Firefox petit&lt;/p&gt;
-</pre>
+```html
+<p class="normal">Firefox normal</p>
+<p class="small">Firefox petit</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p.normal {
+```css
+p.normal {
     font-variant: normal;
 }
 p.small {
     font-variant: small-caps;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>La propriété est désormais une propriété raccourcie pour les nouvelles propriétés  <code>font-variant-*</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#font-variant', 'font-variant')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.font-variant")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("text-transform")}}</li>
- <li>{{cssxref("text-combine-upright")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires                                                                                         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}         | {{Spec2('CSS3 Fonts')}} | La propriété est désormais une propriété raccourcie pour les nouvelles propriétés  `font-variant-*`. |
+| {{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}} | {{Spec2('CSS2.1')}}         | Aucun changement.                                                                                    |
+| {{SpecName('CSS1', '#font-variant', 'font-variant')}}                         | {{Spec2('CSS1')}}         | Définition initiale.                                                                                 |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.font-variant")}}
+
+## Voir aussi
+
+- {{cssxref("text-transform")}}
+- {{cssxref("text-combine-upright")}}
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/font-variation-settings/index.md b/files/fr/web/css/font-variation-settings/index.md
index b8ac748682..627a569119 100644
--- a/files/fr/web/css/font-variation-settings/index.md
+++ b/files/fr/web/css/font-variation-settings/index.md
@@ -7,24 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/font-variation-settings
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>font-variation-settings</code></strong> permet de contrôler les caractéristiques typographiques de bas niveau OpenType ou TrueType en utilisant les quatres lettres représentant les axes des caractéristiques qu'on souhaite faire varier, ainsi que les valeurs pour les variations associées.</p>
+La propriété CSS **`font-variation-settings`** permet de contrôler les caractéristiques typographiques de bas niveau OpenType ou TrueType en utilisant les quatres lettres représentant les axes des caractéristiques qu'on souhaite faire varier, ainsi que les valeurs pour les variations associées.
 
-<div>{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}
 
-<p>Cette propriété fonctionne à un niveau plus bas que {{cssxref("font-feature-settings")}} qui permet de définir les valeurs et les étiquettes (<em>tags</em>) pour les caractéristiques des polices.</p>
+Cette propriété fonctionne à un niveau plus bas que {{cssxref("font-feature-settings")}} qui permet de définir les valeurs et les étiquettes (_tags_) pour les caractéristiques des polices.
 
-<div class="note">
-  <p><strong>Note :</strong> Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.</p></div>
+> **Note :** Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.
 
-<div class="note">
-  <p><strong>Note :</strong> Les caractéristiques définies avec <code>font-variation-settings</code> l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. <code>font-weight</code>), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration <code>@font-face</code> inclut un intervalle <code>font-weight</code>.</p>
-</div>
+> **Note :** Les caractéristiques définies avec `font-variation-settings` l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. `font-weight`), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration `@font-face` inclut un intervalle `font-weight`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur pour les réglages par défaut */
+```css
+/* Valeur pour les réglages par défaut */
 font-variation-settings: normal;
 
 /* Utilisation des valeurs */
@@ -35,131 +33,104 @@ font-variation-settings: "XHGT" 0.7;
 font-variation-settings: inherit;
 font-variation-settings: initial;
 font-variation-settings: unset;
-</pre>
+```
 
-<p>La valeur de cette propriété peut être définie selon deux formes :</p>
+La valeur de cette propriété peut être définie selon deux formes :
 
-<ul>
- <li>Avec le mot-clé <code>normal</code></li>
- <li>Ou avec une chaîne de caractères (<code>&lt;string&gt;</code>) suivi d'un nombre (<code>&lt;number&gt;</code>). Ce motif peut être répété tant qu'une virgule sépare chacun des tuples.</li>
-</ul>
+- Avec le mot-clé `normal`
+- Ou avec une chaîne de caractères (`<string>`) suivi d'un nombre (`<number>`). Ce motif peut être répété tant qu'une virgule sépare chacun des tuples.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Le texte est disposé avec les caractéristiques par défaut.</dd>
- <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
- <dd>Lors de l'affichage du texte, les axes OpenType sont passés au moteur graphique afin d'activer ou de désactiver certaines fonctionnalités de la police. Chaque valeur est une chaîne de caractères (type {{cssxref("&lt;string&gt;")}}) avec quatre caractères ASCII, suivie par un nombre (type {{cssxref("number")}}) qui indique la valeur pour l'axe correspondant. Si la chaîne de caractères <code>&lt;string&gt;</code> a plus ou moins de 4 caractères et contient des caractères en dehors de l'intervalle U+20 - U+7E, la propriété sera considérée comme invalide. La valeur numérique <code>&lt;number&gt;</code> n'est pas nécessairement entière et positive, ce peut être un nombre décimal ou un nombre négatif.</dd>
-</dl>
+- `normal`
+  - : Le texte est disposé avec les caractéristiques par défaut.
+- `<string> <number>`
+  - : Lors de l'affichage du texte, les axes OpenType sont passés au moteur graphique afin d'activer ou de désactiver certaines fonctionnalités de la police. Chaque valeur est une chaîne de caractères (type {{cssxref("&lt;string&gt;")}}) avec quatre caractères ASCII, suivie par un nombre (type {{cssxref("number")}}) qui indique la valeur pour l'axe correspondant. Si la chaîne de caractères `<string>` a plus ou moins de 4 caractères et contient des caractères en dehors de l'intervalle U+20 - U+7E, la propriété sera considérée comme invalide. La valeur numérique `<number>` n'est pas nécessairement entière et positive, ce peut être un nombre décimal ou un nombre négatif.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Axes_enregistrés_et_axes_spécifiques">Axes enregistrés et axes spécifiques</h2>
+## Axes enregistrés et axes spécifiques
 
-<p>Les axes des polices variables sont rangés selon deux catégories : les axes <strong>enregistrés</strong> et les axes <strong>spécifiques</strong>.</p>
+Les axes des polices variables sont rangés selon deux catégories : les axes **enregistrés** et les axes **spécifiques**.
 
-<p>Les axes enregistrés représentent les variations les plus fréquemment utilisées. Si ces axes sont suffisamment fréquents pour avoir été standardisés, cela ne signifie pas qu'un créateur de police doive tous les gérer pour créer une police.</p>
+Les axes enregistrés représentent les variations les plus fréquemment utilisées. Si ces axes sont suffisamment fréquents pour avoir été standardisés, cela ne signifie pas qu'un créateur de police doive tous les gérer pour créer une police.
 
-<p>Voici la liste des axes enregistrés et les propriétés CSS correspondantes, qui permettent de jouer sur ces axes :</p>
+Voici la liste des axes enregistrés et les propriétés CSS correspondantes, qui permettent de jouer sur ces axes :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Étiquette pour l'axe</th>
-   <th scope="col">Propriété</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>"wght"</td>
-   <td>{{cssxref("font-weight")}}</td>
-  </tr>
-  <tr>
-   <td>"wdth"</td>
-   <td>{{cssxref("font-stretch")}}</td>
-  </tr>
-  <tr>
-   <td>"slnt" (slant)</td>
-   <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td>
-  </tr>
-  <tr>
-   <td>"ital"</td>
-   <td>{{cssxref("font-style")}}: <code>italic</code></td>
-  </tr>
-  <tr>
-   <td>"opsz"</td>
-   <td>
-    <p>{{cssxref("font-optical-sizing")}}</p>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Étiquette pour l'axe</th>
+      <th scope="col">Propriété</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>"wght"</td>
+      <td>{{cssxref("font-weight")}}</td>
+    </tr>
+    <tr>
+      <td>"wdth"</td>
+      <td>{{cssxref("font-stretch")}}</td>
+    </tr>
+    <tr>
+      <td>"slnt" (slant)</td>
+      <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td>
+    </tr>
+    <tr>
+      <td>"ital"</td>
+      <td>{{cssxref("font-style")}}: <code>italic</code></td>
+    </tr>
+    <tr>
+      <td>"opsz"</td>
+      <td><p>{{cssxref("font-optical-sizing")}}</p></td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Les axes spécifiques peuvent correspondre à n'importe quel axe que le concepteur de la police souhaite faire varier (ce peut par exemple être la hauteur des hampes et des jambages, la taille des empattements ou tout autre chose). N'importe quel axe peut être utilisé tant qu'il a une étiquette unique sur quatre caractères. Il est possible que, si des axes spécifiques deviennent majoritairement présents, ils soient intégrés parmi les axes enregistrés.</p>
+Les axes spécifiques peuvent correspondre à n'importe quel axe que le concepteur de la police souhaite faire varier (ce peut par exemple être la hauteur des hampes et des jambages, la taille des empattements ou tout autre chose). N'importe quel axe peut être utilisé tant qu'il a une étiquette unique sur quatre caractères. Il est possible que, si des axes spécifiques deviennent majoritairement présents, ils soient intégrés parmi les axes enregistrés.
 
-<div class="note">
-<p><strong>Note :</strong> Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.</p>
-</div>
+> **Note :** Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<div class="warning">
-<p><strong>Attention :</strong> Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.</p>
-</div>
+> **Attention :** Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.
 
-<h3 id="Graisse_(wght)">Graisse (<code>wght</code>)</h3>
+### Graisse (`wght`)
 
-<p>L'exemple suivant peut être édité afin de voir l'effet de la modification des valeurs pour la graisse du texte.</p>
+L'exemple suivant peut être édité afin de voir l'effet de la modification des valeurs pour la graisse du texte.
 
-<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div>
+{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
 
-<h3 id="Pente_(slnt)">Pente (<code>slnt</code>)</h3>
+### Pente (`slnt`)
 
-<p>L'exemple suivant peut être édite afin de voir l'effet de la modification des valeurs pour la pente (à ne pas confondre avec l'italique) du texte.</p>
+L'exemple suivant peut être édite afin de voir l'effet de la modification des valeurs pour la pente (à ne pas confondre avec l'italique) du texte.
 
-<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div>
+{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
 
-<h3 id="Autres_exemples">Autres exemples</h3>
+### Autres exemples
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Guide sur les polices variables</a></li>
- <li><a href="https://v-fonts.com">v-fonts.com</a></li>
- <li><a href="https://axis-praxis.org">axis-praxis.org</a></li>
-</ul>
+- [Guide sur les polices variables](/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)
+- [v-fonts.com](https://v-fonts.com)
+- [axis-praxis.org](https://axis-praxis.org)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}} | {{Spec2('CSS4 Fonts')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-variation-settings")}}</p>
+{{Compat("css.properties.font-variation-settings")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Guide sur les polices variables</a></li>
- <li><a href="https://www.microsoft.com/typography/otspec180/otvaroverview.htm">OpenType Font Variations Overview</a></li>
- <li><a href="https://www.microsoft.com/typography/otspec180/default.htm">OpenType specification</a></li>
- <li><a href="https://www.microsoft.com/typography/otspec/dvaraxisreg.htm">OpenType Design-Variation Axis Tag Registry</a></li>
-</ul>
+- [Guide sur les polices variables](/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)
+- [OpenType Font Variations Overview](https://www.microsoft.com/typography/otspec180/otvaroverview.htm)
+- [OpenType specification](https://www.microsoft.com/typography/otspec180/default.htm)
+- [OpenType Design-Variation Axis Tag Registry](https://www.microsoft.com/typography/otspec/dvaraxisreg.htm)
diff --git a/files/fr/web/css/font-weight/index.md b/files/fr/web/css/font-weight/index.md
index f31a368277..1ce9243e2f 100644
--- a/files/fr/web/css/font-weight/index.md
+++ b/files/fr/web/css/font-weight/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/font-weight
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>font-weight</code></strong> permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. {{cssxref("font-family")}}). Certaines fontes n'existent qu'avec les niveaux de graisses <code>normal</code> et <code>bold</code>.</p>
+La propriété CSS **`font-weight`** permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. {{cssxref("font-family")}}). Certaines fontes n'existent qu'avec les niveaux de graisses `normal` et `bold`.
 
-<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-weight.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 font-weight: normal;
 font-weight: bold;
 
@@ -43,182 +44,145 @@ font-weight: 1000;
 font-weight: inherit;
 font-weight: initial;
 font-weight: unset;
-</pre>
+```
 
-<p>La propriété <code>font-weight</code> peut être définie grâce à l'une des valeurs suivantes.</p>
+La propriété `font-weight` peut être définie grâce à l'une des valeurs suivantes.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Le niveau de graisse normal pour la fonte. Équivalent à la valeur <code>400</code>.</dd>
- <dt><code>bold</code></dt>
- <dd>Le texte est en gras. Équivalent à la valeur <code>700</code>.</dd>
- <dt><code>lighter</code></dt>
- <dd>On diminue la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte paraît plus fin.</dd>
- <dt><code>bolder</code></dt>
- <dd>On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras.</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Une valeur numérique (type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec <code>normal</code> et <code>bold</code>.</dd>
-</dl>
+- `normal`
+  - : Le niveau de graisse normal pour la fonte. Équivalent à la valeur `400`.
+- `bold`
+  - : Le texte est en gras. Équivalent à la valeur `700`.
+- `lighter`
+  - : On diminue la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte paraît plus fin.
+- `bolder`
+  - : On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras.
+- `<number>`
+  - : Une valeur numérique (type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec `normal` et `bold`.
 
-<p>Pour d'anciennes versions de la spécification, <code>font-weight</code> n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après).</p>
+Pour d'anciennes versions de la spécification, `font-weight` n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après).
 
-<p>Le module de spécification <em>CSS Fonts</em> de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleur précision quant aux tailles utilisables. On notera que cette fonctionnalité n'est pas encore prise en charge (à date de juin 2018) par tous les navigateurs.</p>
+Le module de spécification _CSS Fonts_ de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleur précision quant aux tailles utilisables. On notera que cette fonctionnalité n'est pas encore prise en charge (à date de juin 2018) par tous les navigateurs.
 
-<h3 id="Conversion_des_valeurs">Conversion des valeurs</h3>
+### Conversion des valeurs
 
-<p>Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée :</p>
+Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée :
 
-<ul>
- <li>Si un niveau supérieur à <code>500</code> est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte)</li>
- <li>Si un niveau inférieur à <code>400</code> est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire)</li>
- <li>Si un niveau égal à <code>400</code> est utilisé, <code>500</code> sera utilisé. Si <code>500</code> n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.</li>
- <li>Si un niveau égal à <code>500</code> est utilisé, <code>400</code> sera utilisé. Si <code>400</code> n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à <code>400</code>.</li>
-</ul>
+- Si un niveau supérieur à `500` est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte)
+- Si un niveau inférieur à `400` est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire)
+- Si un niveau égal à `400` est utilisé, `500` sera utilisé. Si `500` n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.
+- Si un niveau égal à `500` est utilisé, `400` sera utilisé. Si `400` n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à `400`.
 
-<p>Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement <code>normal</code> et <code>bold</code>, <code>100</code>-<code>500</code> seront considérés équivalents à <code>normal</code> et <code>600</code>-<code>900</code> à <code>bold</code>.</p>
+Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement `normal` et `bold`, `100`-`500` seront considérés équivalents à `normal` et `600`-`900` à `bold`.
 
-<h3 id="Signification_des_poids_relatifs">Signification des poids relatifs</h3>
+### Signification des poids relatifs
 
-<p>Lorsqu'on utilise les valeurs <code>lighter</code> ou <code>bolder</code>, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément :</p>
+Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th>Valeur héritée</th>
-   <th><code>bolder</code></th>
-   <th><code>lighter</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th>100</th>
-   <td>400</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>200</th>
-   <td>400</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>300</th>
-   <td>400</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>400</th>
-   <td>700</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>500</th>
-   <td>700</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>600</th>
-   <td>900</td>
-   <td>400</td>
-  </tr>
-  <tr>
-   <th>700</th>
-   <td>900</td>
-   <td>400</td>
-  </tr>
-  <tr>
-   <th>800</th>
-   <td>900</td>
-   <td>700</td>
-  </tr>
-  <tr>
-   <th>900</th>
-   <td>900</td>
-   <td>700</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th>Valeur héritée</th>
+      <th><code>bolder</code></th>
+      <th><code>lighter</code></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>100</th>
+      <td>400</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>200</th>
+      <td>400</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>300</th>
+      <td>400</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>400</th>
+      <td>700</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>500</th>
+      <td>700</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>600</th>
+      <td>900</td>
+      <td>400</td>
+    </tr>
+    <tr>
+      <th>700</th>
+      <td>900</td>
+      <td>400</td>
+    </tr>
+    <tr>
+      <th>800</th>
+      <td>900</td>
+      <td>700</td>
+    </tr>
+    <tr>
+      <th>900</th>
+      <td>900</td>
+      <td>700</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Correspondance_entre_les_valeurs_numériques_et_les_noms_communément_utilisés">Correspondance entre les valeurs numériques et les noms communément utilisés</h3>
+### Correspondance entre les valeurs numériques et les noms communément utilisés
 
-<p>Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (<em>NdT : les noms sont laissés en anglais car généralement utilisés tels quels</em>) :</p>
+Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (_NdT : les noms sont laissés en anglais car généralement utilisés tels quels_) :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Valeur</th>
-   <th scope="col">Nom communément utilisé</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>100</td>
-   <td><em>Thin (Hairline)</em></td>
-  </tr>
-  <tr>
-   <td>200</td>
-   <td><em>Extra Light (Ultra Light)</em></td>
-  </tr>
-  <tr>
-   <td>300</td>
-   <td><em>Light</em></td>
-  </tr>
-  <tr>
-   <td>400</td>
-   <td><em>Normal</em></td>
-  </tr>
-  <tr>
-   <td>500</td>
-   <td><em>Medium</em></td>
-  </tr>
-  <tr>
-   <td>600</td>
-   <td><em>Semi Bold (Demi Bold)</em></td>
-  </tr>
-  <tr>
-   <td>700</td>
-   <td><em>Bold</em></td>
-  </tr>
-  <tr>
-   <td>800</td>
-   <td><em>Extra Bold (Ultra Bold)</em></td>
-  </tr>
-  <tr>
-   <td>900</td>
-   <td><em>Black (Heavy)</em></td>
-  </tr>
- </tbody>
-</table>
+| Valeur | Nom communément utilisé     |
+| ------ | --------------------------- |
+| 100    | _Thin (Hairline)_           |
+| 200    | _Extra Light (Ultra Light)_ |
+| 300    | _Light_                     |
+| 400    | _Normal_                    |
+| 500    | _Medium_                    |
+| 600    | _Semi Bold (Demi Bold)_     |
+| 700    | _Bold_                      |
+| 800    | _Extra Bold (Ultra Bold)_   |
+| 900    | _Black (Heavy)_             |
 
-<h3 id="Interpolation">Interpolation</h3>
+### Interpolation
 
-<p>Une valeur <code>font-weight</code> est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure.</p>
+Une valeur `font-weight` est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure.
 
-<h3 id="Polices_variables">Polices variables</h3>
+### Polices variables
 
-<p>La plupart des polices possèdent des niveaux de graisses qui correspondent aux <a href="#communs">niveaux communément utilisés</a>. Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée.</p>
+La plupart des polices possèdent des niveaux de graisses qui correspondent aux [niveaux communément utilisés](#communs). Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée.
 
-<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wght</code> qui est utilisé afin d'implémenter les variations de largeur.</p>
+Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wght` qui est utilisé afin d'implémenter les variations de largeur.
 
-<p>Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification <em>CSS Fonts</em> de niveau 4.</p>
+Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification _CSS Fonts_ de niveau 4.
 
-<div>{{EmbedLiveSample("Polices_variables", 1200, 180, "", "", "example-outcome-frame")}}</div>
+{{EmbedLiveSample("Polices_variables", 1200, 180, "", "", "example-outcome-frame")}}
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;header&gt;
-    &lt;input type="range" id="weight" name="weight" min="1" max="1000" /&gt;
-    &lt;label for="weight"&gt;Weight&lt;/label&gt;
-&lt;/header&gt;
-&lt;div class="container"&gt;
-    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<header>
+    <input type="range" id="weight" name="weight" min="1" max="1000" />
+    <label for="weight">Weight</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">/*
+```css
+/*
 Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
 and is used here under the terms of its license:
 https://github.com/LettError/mutatorSans/blob/master/LICENSE
@@ -244,9 +208,10 @@ label {
   text-transform: uppercase;
   font: 1.5rem 'MutatorSans', sans-serif;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">html, body {
+```css hidden
+html, body {
   max-height: 100vh;
   max-width: 100vw;
   overflow: hidden;
@@ -265,15 +230,16 @@ header {
   flex-grow: 1;
 }
 
-.container &gt; p {
+.container > p {
   margin-top: 0;
   margin-bottom: 0;
 }
-</pre>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">let weightLabel = document.querySelector('label[for="weight"]');
+```js
+let weightLabel = document.querySelector('label[for="weight"]');
 let weightInput = document.querySelector('#weight');
 let sampleText = document.querySelector('.sample');
 
@@ -285,32 +251,34 @@ function update() {
 weightInput.addEventListener('input', update);
 
 update();
-</pre>
+```
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML_2">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Alice was beginning to get very tired of sitting by her sister on the
   bank, and of having nothing to do: once or twice she had peeped into the
   book her sister was reading, but it had no pictures or conversations in
   it, 'and what is the use of a book,' thought Alice 'without pictures or
   conversations?'
-&lt;/p&gt;
+</p>
 
-&lt;div&gt;I'm heavy&lt;br/&gt;
-  &lt;span&gt;I'm lighter&lt;/span&gt;
-&lt;/div&gt;
-</pre>
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+```
 
-<h3 id="CSS_2">CSS</h3>
+### CSS
 
-<pre class="brush:css">/* Le texte du paragraphe est gras. */
+```css
+/* Le texte du paragraphe est gras. */
 p {
   font-weight: bold;
 }
@@ -325,62 +293,32 @@ div {
    clair que le parent. */
 span {
   font-weight: lighter;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+{{EmbedLiveSample("Exemples","400","300")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p>
+Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec `font-weight` qui vaut `100` ou `200`, notamment [si le contraste entre le texte et l'arrière-plan est faible](/fr/docs/Web/CSS/color#accessibilité).
 
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [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 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td>Définition de <code>font-weight</code> qui précise que la propriété peut utiliser des valeurs comprises entre <code>1</code> et <code>1000</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>font-weight</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                     | Commentaires                                                                                                      |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}             | {{Spec2('CSS4 Fonts')}}         | Définition de `font-weight` qui précise que la propriété peut utiliser des valeurs comprises entre `1` et `1000`. |
+| {{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}             | {{Spec2('CSS3 Fonts')}}         | Aucun changement.                                                                                                 |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}         | {{Spec2('CSS3 Transitions')}} | `font-weight` peut désormais être animée.                                                                         |
+| {{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}} | {{Spec2('CSS2.1')}}                 | Aucun changement.                                                                                                 |
+| {{SpecName('CSS1', '#font-weight', 'font-weight')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                              |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-weight")}}</p>
+{{Compat("css.properties.font-weight")}}
diff --git a/files/fr/web/css/font/index.md b/files/fr/web/css/font/index.md
index 0b2d7f2356..15ddc96075 100644
--- a/files/fr/web/css/font/index.md
+++ b/files/fr/web/css/font/index.md
@@ -8,22 +8,21 @@ tags:
   - Reference
 translation_of: Web/CSS/font
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>font</code></strong> est :</p>
+La propriété **`font`** est :
 
-<ul>
- <li>une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}},  {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}</li>
- <li>ou une propriété permettant d'utiliser une police système pour la police de caractères d'un élément grâce à certains mots-clés spécifiques.</li>
-</ul>
+- une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}},  {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}
+- ou une propriété permettant d'utiliser une police système pour la police de caractères d'un élément grâce à certains mots-clés spécifiques.
 
-<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font.html")}}
 
-<p>Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies avec la propriété raccourcie sont définies avec leur valeur initiale, ce qui peut surcharger les valeurs définies précédemment avec les propriétés « détaillées ». Bien qu'elles ne puissent pas directement être paramétrées avec <code>font</code>, les propriétés détaillées, {{cssxref("font-size-adjust")}}, et {{cssxref("font-kerning")}} sont également réinitialisées avec leurs valeurs initiales.</p>
+Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies avec la propriété raccourcie sont définies avec leur valeur initiale, ce qui peut surcharger les valeurs définies précédemment avec les propriétés « détaillées ». Bien qu'elles ne puissent pas directement être paramétrées avec `font`, les propriétés détaillées, {{cssxref("font-size-adjust")}}, et {{cssxref("font-kerning")}} sont également réinitialisées avec leurs valeurs initiales.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* size | family */
+```css
+/* size | family */
 font: 2em "Open Sans", sans-serif;
 
 /* style | size | family */
@@ -44,96 +43,104 @@ font: icon;
 font: inherit;
 font: initial;
 font: unset;
-</pre>
-
-<p>La propriété <code>font</code> peut être définie avec un seul mot-clé (qui sélectionnera la police système à utiliser) ou comme propriété raccourcie pour paramétrer les différentes propriétés relatives aux polices.</p>
-
-<p>Si <code>font</code> est définie grâce à un mot-clé, ce mot-clé doit être : <a href="#keyword"><code>caption</code>, <code>icon</code>, <code>menu</code>, <code>message-box</code>, <code>small-caption</code> ou <code>status-bar</code></a>.</p>
-
-<p>Si <code>font</code> est définie comme une propriété raccourcie :</p>
-
-<ul>
- <li>La déclaration devra inclure des valeurs pour :
-  <ul>
-   <li>{{cssxref("&lt;font-size&gt;")}}</li>
-   <li>{{cssxref("&lt;font-family&gt;")}}</li>
-  </ul>
- </li>
- <li>La déclaration pourra éventuellement inclure des valeurs pour :
-  <ul>
-   <li>{{cssxref("&lt;font-style&gt;")}}</li>
-   <li>{{cssxref("&lt;font-variant&gt;")}}</li>
-   <li>{{cssxref("&lt;font-weight&gt;")}}</li>
-   <li>{{cssxref("&lt;font-stretch&gt;")}}</li>
-   <li>{{cssxref("&lt;line-height&gt;")}}</li>
-  </ul>
- </li>
- <li>Les valeurs pour <code>font-style</code>, <code>font-variant</code> et <code>font-weight</code> doivent précéder la valeur pour <code>font-size</code></li>
- <li>La valeur de <code>font-variant</code> ne peut utiliser que les valeurs définies en CSS 2.1 : <code>normal</code> et <code>small-caps</code></li>
- <li>La valeur de <code>font-stretch</code> ne peut être qu'un mot-clé.</li>
- <li>La valeur pour <code>line-height</code> doit immédiatement suivre la valeur pour <code>font-size</code>, séparée par une barre oblique (par exemple "<code>16px/3</code>")</li>
- <li>La valeur pour <code>font-family</code> doit être la dernière fournie.</li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;'font-style'&gt;</code></dt>
- <dd>Voir la propriété {{cssxref("font-style")}}.</dd>
- <dt><code>&lt;'font-variant'&gt;</code></dt>
- <dd>Voir la propriété {{cssxref("font-variant")}}.</dd>
- <dt><code>&lt;'font-weight'&gt;</code></dt>
- <dd>Voir la propriété {{cssxref("font-weight")}}.</dd>
- <dt><code>&lt;'font-stretch'&gt;</code></dt>
- <dd>Voir la propriété {{cssxref("font-stretch")}}.</dd>
- <dt><code>&lt;'font-size'&gt;</code></dt>
- <dd>Voir la propriété {{cssxref("font-size")}}.</dd>
- <dt><code>&lt;'line-height'&gt;</code></dt>
- <dd>Voir la propriété {{cssxref("line-height")}}.</dd>
- <dt><code>&lt;'font-family'&gt;</code></dt>
- <dd>Voir la propriété {{cssxref("font-family")}}.</dd>
- <dt>Polices système :<code>caption</code> <code>icon</code> <code>menu</code> <code>message-box</code> <code>small-caption</code> <code>status-bar</code></dt>
- <dd>Un mot-clé peut être utilisé pour indiquer une police système spécifique :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>caption</code></td>
-    <td>La police système utilisée pour les libellés des contrôles (par exemples les boutons, listes déroulantes, etc.).</td>
-   </tr>
-   <tr>
-    <td><code>icon</code></td>
-    <td>La police système utilisée pour les textes accompagnant les icônes.</td>
-   </tr>
-   <tr>
-    <td><code>menu</code></td>
-    <td>La police système utilisée pour les menus.</td>
-   </tr>
-   <tr>
-    <td><code>message-box</code></td>
-    <td>La police système utilisée dans les boîtes de dialogue.</td>
-   </tr>
-   <tr>
-    <td><code>small-caption</code></td>
-    <td>La police système utilisée pour les libellés des contrôles de petite taille.</td>
-   </tr>
-   <tr>
-    <td><code>status-bar</code></td>
-    <td>La police système utilisée dans les barres de statut de la fenêtre.</td>
-   </tr>
-  </tbody>
- </table>
- La plupart du temps, les navigateurs implémentent d'autres valeurs, préfixées. Par exemple, Gecko implémente <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code> and <code>-moz-field</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `font` peut être définie avec un seul mot-clé (qui sélectionnera la police système à utiliser) ou comme propriété raccourcie pour paramétrer les différentes propriétés relatives aux polices.
+
+Si `font` est définie grâce à un mot-clé, ce mot-clé doit être : [`caption`, `icon`, `menu`, `message-box`, `small-caption` ou `status-bar`](#keyword).
+
+Si `font` est définie comme une propriété raccourcie :
+
+- La déclaration devra inclure des valeurs pour :
+
+  - {{cssxref("&lt;font-size&gt;")}}
+  - {{cssxref("&lt;font-family&gt;")}}
+
+- La déclaration pourra éventuellement inclure des valeurs pour :
+
+  - {{cssxref("&lt;font-style&gt;")}}
+  - {{cssxref("&lt;font-variant&gt;")}}
+  - {{cssxref("&lt;font-weight&gt;")}}
+  - {{cssxref("&lt;font-stretch&gt;")}}
+  - {{cssxref("&lt;line-height&gt;")}}
+
+- Les valeurs pour `font-style`, `font-variant` et `font-weight` doivent précéder la valeur pour `font-size`
+- La valeur de `font-variant` ne peut utiliser que les valeurs définies en CSS 2.1 : `normal` et `small-caps`
+- La valeur de `font-stretch` ne peut être qu'un mot-clé.
+- La valeur pour `line-height` doit immédiatement suivre la valeur pour `font-size`, séparée par une barre oblique (par exemple "`16px/3`")
+- La valeur pour `font-family` doit être la dernière fournie.
+
+### Valeurs
+
+- `<'font-style'>`
+  - : Voir la propriété {{cssxref("font-style")}}.
+- `<'font-variant'>`
+  - : Voir la propriété {{cssxref("font-variant")}}.
+- `<'font-weight'>`
+  - : Voir la propriété {{cssxref("font-weight")}}.
+- `<'font-stretch'>`
+  - : Voir la propriété {{cssxref("font-stretch")}}.
+- `<'font-size'>`
+  - : Voir la propriété {{cssxref("font-size")}}.
+- `<'line-height'>`
+  - : Voir la propriété {{cssxref("line-height")}}.
+- `<'font-family'>`
+  - : Voir la propriété {{cssxref("font-family")}}.
+- Polices système :`caption` `icon` `menu` `message-box` `small-caption` `status-bar`
+
+  - : Un mot-clé peut être utilisé pour indiquer une police système spécifique :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>caption</code></td>
+          <td>
+            La police système utilisée pour les libellés des contrôles (par exemples
+            les boutons, listes déroulantes, etc.).
+          </td>
+        </tr>
+        <tr>
+          <td><code>icon</code></td>
+          <td>
+            La police système utilisée pour les textes accompagnant les icônes.
+          </td>
+        </tr>
+        <tr>
+          <td><code>menu</code></td>
+          <td>La police système utilisée pour les menus.</td>
+        </tr>
+        <tr>
+          <td><code>message-box</code></td>
+          <td>La police système utilisée dans les boîtes de dialogue.</td>
+        </tr>
+        <tr>
+          <td><code>small-caption</code></td>
+          <td>
+            La police système utilisée pour les libellés des contrôles de petite
+            taille.
+          </td>
+        </tr>
+        <tr>
+          <td><code>status-bar</code></td>
+          <td>
+            La police système utilisée dans les barres de statut de la fenêtre.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    La plupart du temps, les navigateurs implémentent d'autres valeurs, préfixées. Par exemple, Gecko implémente `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list` and `-moz-field`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* La corps de la police sera  12px */
+```css
+/* La corps de la police sera  12px */
 /* La hauteur de ligne 14px et la   */
 /* famille de polices sans-serif    */
 
@@ -162,71 +169,53 @@ font: unset;
 /* la barre de statut de la fenêtre.  */
 .statut {
   font: status-bar;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple1"&gt;
+```html
+<p class="exemple1">
   « Toujours aussi mouillée, » dit Alice tristement.
   « Je ne sèche que d’ennui. »
-&lt;/p&gt;
+</p>
 
-&lt;p class="exemple2"&gt;
+<p class="exemple2">
   « Dans ce cas, » dit le Dodo avec emphase, se
   dressant sur ses pattes, « je propose l’ajournement,
   et l’adoption immédiate de mesures énergiques. »
-&lt;/p&gt;
+</p>
 
-&lt;p class="gras_italique_serif"&gt;
+<p class="gras_italique_serif">
   « Parlez français, » dit l’Aiglon ; « je ne
   comprends pas la moitié de ces grands mots, et, qui
   plus est, je ne crois pas que vous les compreniez
   vous-même. » L’Aiglon baissa la tête pour cacher
   un sourire, et quelques-uns des autres oiseaux
   ricanèrent tout haut.
-&lt;/p&gt;
+</p>
 
-&lt;p class="statut"&gt;
+<p class="statut">
   « J’allais proposer, » dit le Dodo d’un ton vexé,
   « une course cocasse ; c’est ce que nous pouvons
   faire de mieux pour nous sécher. »
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","300","500")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-prop', 'font')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Prise en charge des valeurs de <code>font-stretch</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Prise en charge des mots-clés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#font', 'font')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.font")}}</p>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","300","500")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires                                   |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------- |
+| {{SpecName('CSS3 Fonts', '#font-prop', 'font')}}                         | {{Spec2('CSS3 Fonts')}} | Prise en charge des valeurs de `font-stretch`. |
+| {{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}} | {{Spec2('CSS2.1')}}         | Prise en charge des mots-clés.                 |
+| {{SpecName('CSS1', '#font', 'font')}}                                         | {{Spec2('CSS1')}}         | Définition initiale.                           |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.font")}}
diff --git a/files/fr/web/css/forced-color-adjust/index.md b/files/fr/web/css/forced-color-adjust/index.md
index 6ce5f780c3..eb8aa42f4d 100644
--- a/files/fr/web/css/forced-color-adjust/index.md
+++ b/files/fr/web/css/forced-color-adjust/index.md
@@ -1,60 +1,61 @@
 ---
 title: forced-color-adjust
 slug: Web/CSS/forced-color-adjust
+translation_of: Web/CSS/forced-color-adjust
 browser-compat: css.properties.forced-color-adjust
-translation_of: 'Web/CSS/forced-color-adjust'
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>forced-color-adjust</code></strong> permet aux auteurs de ne pas activer les modes de couleurs forcées sur certains éléments. Cela restaure la possibilité de contrôler ces valeurs en CSS.</p>
+La propriété CSS **`forced-color-adjust`** permet aux auteurs de ne pas activer les modes de couleurs forcées sur certains éléments. Cela restaure la possibilité de contrôler ces valeurs en CSS.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">forced-color-adjust: auto;
+```css
+forced-color-adjust: auto;
 forced-color-adjust: none;
 
 /* Valeurs globales */
 forced-color-adjust: inherit;
 forced-color-adjust: initial;
 forced-color-adjust: revert;
-forced-color-adjust: unset;</pre>
+forced-color-adjust: unset;
+```
 
-<p>La valeur de la propriété <code>forced-color-adjust</code> doit être l'un des mots-clés suivants.</p>
+La valeur de la propriété `forced-color-adjust` doit être l'un des mots-clés suivants.
 
-<h3 id="values">Valeurs</h3>
+### Valeurs
 
-<dl>
-	<dt><code>auto</code></dt>
-	<dd>En mode de couleurs forcées, les couleurs de l'élément sont définies par l'{{Glossary("user agent", "agent utilisateur")}}. C'est la valeur par défaut.</dd>
-	<dt><code><strong>none</strong></code></dt>
-	<dd>Même en mode de couleurs forcées, les couleurs de l'élément ne sont pas automatiquement définies par l'{{Glossary("user agent", "agent utilisateur")}}.</dd>
-</dl>
+- `auto`
+  - : En mode de couleurs forcées, les couleurs de l'élément sont définies par l'{{Glossary("user agent", "agent utilisateur")}}. C'est la valeur par défaut.
+- **`none`**
+  - : Même en mode de couleurs forcées, les couleurs de l'élément ne sont pas automatiquement définies par l'{{Glossary("user agent", "agent utilisateur")}}.
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Cette propriété ne devrait être utilisée que pour faire des modifications qui prendront en charge les pré-requis de couleurs et de contrastes. Par exemple, si vous savez que les optimisations de couleur faites par l'{{Glossary("user agent", "agent utilisateur")}} conduisent à une mauvaise expérience en mode contrasté ou en mode sombre. L'utilisation de cette propriété vous permettra alors de modifier le résultat dans ce mode pour proposer une meilleure expérience. <strong>Elle ne devrait pas être utilisée dans le but d'empêcher les choix de l'utilisateur d'être respectés</strong>.</p>
+Cette propriété ne devrait être utilisée que pour faire des modifications qui prendront en charge les pré-requis de couleurs et de contrastes. Par exemple, si vous savez que les optimisations de couleur faites par l'{{Glossary("user agent", "agent utilisateur")}} conduisent à une mauvaise expérience en mode contrasté ou en mode sombre. L'utilisation de cette propriété vous permettra alors de modifier le résultat dans ce mode pour proposer une meilleure expérience. **Elle ne devrait pas être utilisée dans le but d'empêcher les choix de l'utilisateur d'être respectés**.
 
-<p>Cette propriété est une version standard de la propriété <a href="https://docs.microsoft.com/en-us/previous-versions/hh771863%28v%3dvs.85%29"><code>-ms-high-contrast-adjust</code> (en anglais)</a>. La propriété préfixée peut être utilisée pour obtenir un résultat similaire sur Internet Explorer 10 et sur les versions EdgeHTML de Microsoft Edge.</p>
+Cette propriété est une version standard de la propriété [`-ms-high-contrast-adjust` (en anglais)](https://docs.microsoft.com/en-us/previous-versions/hh771863%28v%3dvs.85%29). La propriété préfixée peut être utilisée pour obtenir un résultat similaire sur Internet Explorer 10 et sur les versions EdgeHTML de Microsoft Edge.
 
-<h2 id="formal_definition">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="formal_syntax">Syntaxe formelle</h2>
+## Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="preserving_colors">Préserver les couleurs</h3>
+### Préserver les couleurs
 
-<p>Dans l'exemple ci-dessous, la première boîte utilise le jeu de couleur définit par l'utilisateur. Par exemple, dans le mode à forts contrastes sombre de Windows, cela donnera du texte blanc sur fond noir. La seconde boîte conservera quant à elle les couleurs du site définies par la classe <code>.box</code>.</p>
+Dans l'exemple ci-dessous, la première boîte utilise le jeu de couleur définit par l'utilisateur. Par exemple, dans le mode à forts contrastes sombre de Windows, cela donnera du texte blanc sur fond noir. La seconde boîte conservera quant à elle les couleurs du site définies par la classe `.box`.
 
-<p>En utilisant la fonctionnalité média <code><a href="/fr/docs/Web/CSS/@media/forced-colors">forced-colors</a></code>, vous pouvez ajouter n'importe qu'elle autre optimisation pour le mode de couleurs forcées aux côtés de la propriété <code>forced-color-adjust</code>.</p>
+En utilisant la fonctionnalité média [`forced-colors`](/fr/docs/Web/CSS/@media/forced-colors), vous pouvez ajouter n'importe qu'elle autre optimisation pour le mode de couleurs forcées aux côtés de la propriété `forced-color-adjust`.
 
-<h4 id="css">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.box {
+```css
+.box {
   border: 5px solid grey;
   background-color: #ccc;
   width: 300px;
@@ -66,36 +67,40 @@ forced-color-adjust: unset;</pre>
   .forced {
     forced-color-adjust: none;
   }
-}</pre>
+}
+```
+
+#### HTML
+
+```html
+<div class="box">
+  <p>Voici une boîte qui utilisera vos préférences de couleurs.</p>
+</div>
 
-<h4 id="html">HTML</h4>
+<div class="box forced">
+  <p>Voici une boîte qui conservera les couleurs définies par le site.</p>
+</div>
+```
 
-<pre class="brush: html">&lt;div class="box"&gt;
-  &lt;p&gt;Voici une boîte qui utilisera vos préférences de couleurs.&lt;/p&gt;
-&lt;/div&gt;
+#### Résultat
 
-&lt;div class="box forced"&gt;
-  &lt;p&gt;Voici une boîte qui conservera les couleurs définies par le site.&lt;/p&gt;
-&lt;/div&gt;</pre>
+{{EmbedLiveSample("preserving_colors", 640, 260)}}
 
-<h4 id="result">Résultat</h4>
+![L'exemple présenté ci-dessus affiche la première boîte avec un arrière-plan noir et la seconde avec un arrière-plan gris définit en CSS.](windows-high-contrast.jpg)
 
-<p>{{EmbedLiveSample("preserving_colors", 640, 260)}}</p>
+## Spécifications
 
-<img src="windows-high-contrast.jpg" alt="L'exemple présenté ci-dessus affiche la première boîte avec un arrière-plan noir et la seconde avec un arrière-plan gris définit en CSS.">
+{{Specifications}}
 
-<h2 id="specifications">Spécifications</h2>
+## Compatibilité des navigateurs
 
-<p>{{Specifications}}</p>
+{{Compat}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Voir aussi
 
-<p>{{Compat}}</p>
+- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
+- <i lang="en">Styling for Windows high contrast with standards for forced colors</i>
 
-<h2 id="see_also">Voir aussi</h2>
+  [<i lang="en">Styling for Windows high contrast with standards for forced colors</i> (en anglais)](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/)
 
-<ul>
-    <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
-    <li><a href="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/"><i lang="en">Styling for Windows high contrast with standards for forced colors</i> (en anglais)</a></li>
-	<li>{{cssxref("color-adjust")}}</li>
-</ul>
+- {{cssxref("color-adjust")}}
diff --git a/files/fr/web/css/frequency-percentage/index.md b/files/fr/web/css/frequency-percentage/index.md
index a09e6817fd..4b3f9f032d 100644
--- a/files/fr/web/css/frequency-percentage/index.md
+++ b/files/fr/web/css/frequency-percentage/index.md
@@ -7,42 +7,25 @@ tags:
   - Type
 translation_of: Web/CSS/frequency-percentage
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée <strong><code>&lt;frequency-percentage&gt;</code></strong> représente une valeur qui peut être une valeur de type {{Cssxref("frequency")}} ou une valeur de type {{Cssxref("percentage")}}.</p>
+Le type de donnée **`<frequency-percentage>`** représente une valeur qui peut être une valeur de type {{Cssxref("frequency")}} ou une valeur de type {{Cssxref("percentage")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Se référer à la documentation des types {{Cssxref("frequency")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.</p>
+Se référer à la documentation des types {{Cssxref("frequency")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.
 
-<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+## Utilisation avec `calc()`
 
-<p>Lorsqu'une valeur de type <code>&lt;frequency-percentage&gt;</code> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une fréquence et qu'il peut alors être utilisé dans une expression <code><a href="/fr/docs/Web/CSS/calc">calc()</a></code>.</p>
+Lorsqu'une valeur de type `<frequency-percentage>` peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une fréquence et qu'il peut alors être utilisé dans une expression [`calc()`](/fr/docs/Web/CSS/calc).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;frequency-percentage&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;frequency-percentage&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Définition du type <code>&lt;frequency-percentage&gt;</code>. Ajout de <code>calc()</code></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                             | Commentaires                                                   |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------- |
+| {{SpecName('CSS4 Values', '#mixed-percentages', '&lt;frequency-percentage&gt;')}} | {{Spec2('CSS4 Values')}} |                                                                |
+| {{SpecName('CSS3 Values', '#mixed-percentages', '&lt;frequency-percentage&gt;')}} | {{Spec2('CSS3 Values')}} | Définition du type `<frequency-percentage>`. Ajout de `calc()` |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.frequency-percentage")}}</p>
+{{Compat("css.types.frequency-percentage")}}
diff --git a/files/fr/web/css/frequency/index.md b/files/fr/web/css/frequency/index.md
index f59efc67ae..526c3fac8d 100644
--- a/files/fr/web/css/frequency/index.md
+++ b/files/fr/web/css/frequency/index.md
@@ -7,62 +7,51 @@ tags:
   - Type
 translation_of: Web/CSS/frequency
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée CSS <strong><code>&lt;frequency&gt;</code></strong> permet de représenter des fréquences (par exemple la hauteur d'une voie). Ce type n'est actuellement utilisé pour aucune propriété CSS.</p>
+Le type de donnée CSS **`<frequency>`** permet de représenter des fréquences (par exemple la hauteur d'une voie). Ce type n'est actuellement utilisé pour aucune propriété CSS.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une valeur de type <code>&lt;frequency&gt;</code> se compose d'une valeur {{cssxref("&lt;number&gt;")}} suivi immédiatement d'une unité de fréquence. Comme pour les autres dimensions CSS, il n'y a pas d'espace entre le nombre et le littéral de l'unité.</p>
+Une valeur de type `<frequency>` se compose d'une valeur {{cssxref("&lt;number&gt;")}} suivi immédiatement d'une unité de fréquence. Comme pour les autres dimensions CSS, il n'y a pas d'espace entre le nombre et le littéral de l'unité.
 
-<h3 id="Unités">Unités</h3>
+### Unités
 
-<dl>
- <dt><code>Hz</code></dt>
- <dd>Permet de représenter des fréquences exprimées en Hertz (par exemple <code>0Hz</code>, <code>1500Hz</code>, <code>10000Hz</code>)</dd>
- <dt><code>kHz</code></dt>
- <dd>Permet de représenter des fréquences exprimées en kilohertz (par exemple <code>0kHz</code>, <code>1.5kHz</code>, <code>10kHz</code>).</dd>
-</dl>
+- `Hz`
+  - : Permet de représenter des fréquences exprimées en Hertz (par exemple `0Hz`, `1500Hz`, `10000Hz`)
+- `kHz`
+  - : Permet de représenter des fréquences exprimées en kilohertz (par exemple `0kHz`, `1.5kHz`, `10kHz`).
 
-<p>Bien que la valeur nulle puisse être représentée avec le même littéral pour les deux unités, l'unité ne doit pas être absente sinon la valeur sera interprétée comme une valeur de longueur (type {{cssxref("length")}}) et ne représentera ni <code>0Hz</code> ni <code>0kHz</code>. Bien que les unités CSS soient insensibles à la casse, c'est une bonne pratique que d'utiliser un H majuscule pour <code>Hz</code> et <code>kHz</code> car selon le <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_international_d%27unit%C3%A9s">système international</a>, <a href="https://fr.wikipedia.org/wiki/Heinrich_Rudolf_Hertz">Hertz</a> est un nom de famille.</p>
+Bien que la valeur nulle puisse être représentée avec le même littéral pour les deux unités, l'unité ne doit pas être absente sinon la valeur sera interprétée comme une valeur de longueur (type {{cssxref("length")}}) et ne représentera ni `0Hz` ni `0kHz`. Bien que les unités CSS soient insensibles à la casse, c'est une bonne pratique que d'utiliser un H majuscule pour `Hz` et `kHz` car selon le [système international](https://fr.wikipedia.org/wiki/Syst%C3%A8me_international_d%27unit%C3%A9s), [Hertz](https://fr.wikipedia.org/wiki/Heinrich_Rudolf_Hertz) est un nom de famille.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Valeurs_valides">Valeurs valides</h3>
+### Valeurs valides
 
-<pre class="brush: css example-good">12Hz     Entier positif
+```css example-good
+12Hz     Entier positif
 4.3Hz    Flottant
 14KhZ    Unité insensible à la casse
 +0Hz     Zero avec un signe + et une unité
--0kHz    Zero avec un signe - et une unité</pre>
+-0kHz    Zero avec un signe - et une unité
+```
 
-<h3 id="Valeurs_invalides">Valeurs invalides</h3>
+### Valeurs invalides
 
-<pre class="brush: css example-bad">12.0     Cette valeur est un nombre pas une fréquence (il manque l'unité).
+```css example-bad
+12.0     Cette valeur est un nombre pas une fréquence (il manque l'unité).
 7 Hz     Aucun espace n'est autorisé entre le nombre et l'unité.
-0        Bien qu'un zéro puisse être utilisé sans unité pour une longueur, ce n'est pas le cas pour une fréquence.</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#frequency', '&lt;frequency&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Ce type de donnés fut initialement introduit avec la spécification <a href="https://www.w3.org/TR/CSS2/">CSS Niveau 2</a> pour le <a href="/fr/docs/Web/CSS/@media/aural">groupe de média aural</a> qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.frequency")}}</p>
+0        Bien qu'un zéro puisse être utilisé sans unité pour une longueur, ce n'est pas le cas pour une fréquence.
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Values', '#frequency', '&lt;frequency&gt;')}} | {{Spec2('CSS3 Values')}} | Définition initiale. |
+
+Ce type de donnés fut initialement introduit avec la spécification [CSS Niveau 2](https://www.w3.org/TR/CSS2/) pour le [groupe de média aural](/fr/docs/Web/CSS/@media/aural) qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.frequency")}}
diff --git a/files/fr/web/css/gap/index.md b/files/fr/web/css/gap/index.md
index a4e27262ac..e8142808f4 100644
--- a/files/fr/web/css/gap/index.md
+++ b/files/fr/web/css/gap/index.md
@@ -8,27 +8,26 @@ tags:
   - Reference
 translation_of: Web/CSS/gap
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>gap</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> pour {{cssxref("row-gap")}} et {{cssxref("column-gap")}} qui permet de définir les espaces entre les lignes et entre les colonnes d'une grille.</p>
+La propriété **`gap`** est [une propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) pour {{cssxref("row-gap")}} et {{cssxref("column-gap")}} qui permet de définir les espaces entre les lignes et entre les colonnes d'une grille.
 
-<div>{{EmbedInteractiveExample("pages/css/gap.html")}}</div>
+{{EmbedInteractiveExample("pages/css/gap.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> La propriété {{cssxref("grid-gap")}} a initialement été définie dans le module de spécification <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Cette version préfixée a été remplacée par <code>gap</code>. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.</p>
-</div>
+> **Note :** La propriété {{cssxref("grid-gap")}} a initialement été définie dans le module de spécification [CSS Grid Layout](/fr/docs/Web/CSS/CSS_Grid_Layout). Cette version préfixée a été remplacée par `gap`. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Une valeur de longueur */
-/* Type &lt;length&gt;          */
+```css
+/* Une valeur de longueur */
+/* Type <length>          */
 gap: 20px;
 gap: 1em;
 gap: 3vmin;
 gap: 0.5cm;
 
 /* Une valeur proportionnelle */
-/* Type &lt;percentage&gt;          */
+/* Type <percentage>          */
 gap: 16%;
 gap: 100%;
 
@@ -39,7 +38,7 @@ gap: 3vmin 2vmax;
 gap: 0.5cm 2mm;
 
 /* Une ou deux valeurs proportionnelles */
-/* Type &lt;percentage&gt;             */
+/* Type <percentage>             */
 gap: 16% 100%;
 gap: 21px 82%;
 
@@ -51,53 +50,53 @@ gap: calc(20px + 10%) calc(10% - 5px);
 gap: inherit;
 gap: initial;
 gap: unset;
-</pre>
+```
 
-<p>Cette propriété est définie avec une valeur <code>&lt;'row-gap'&gt;</code>, éventuellement suivi d'une valeur <code>&lt;'column-gap'&gt;</code>. Si <code>&lt;'column-gap'&gt;</code> n'est pas utilisée, la valeur utilisée sera la même que <code>&lt;'row-gap'&gt;</code>.</p>
+Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement suivi d'une valeur `<'column-gap'>`. Si `<'column-gap'>` n'est pas utilisée, la valeur utilisée sera la même que `<'row-gap'>`.
 
-<p><code>&lt;'row-gap'&gt;</code> et <code>&lt;'column-gap'&gt;</code> sont des valeurs de type <code>&lt;length&gt;</code> ou <code>&lt;percentage&gt;</code>.</p>
+`<'row-gap'>` et `<'column-gap'>` sont des valeurs de type `<length>` ou `<percentage>`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>La largeur de l'espace entre les lignes et/ou entre les colonnes (cf. {{cssxref("&lt;length&gt;")}} pour les valeurs utilisables).</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>La largeur de l'espace entre les lignes et/ou entre les colonnes en fonction de la taille de l'élément englobant (cf. {{cssxref("&lt;percentage&gt;")}} pour les valeurs utilisables).</dd>
-</dl>
+- `<length>`
+  - : La largeur de l'espace entre les lignes et/ou entre les colonnes (cf. {{cssxref("&lt;length&gt;")}} pour les valeurs utilisables).
+- `<percentage>`
+  - : La largeur de l'espace entre les lignes et/ou entre les colonnes en fonction de la taille de l'élément englobant (cf. {{cssxref("&lt;percentage&gt;")}} pour les valeurs utilisables).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Disposition_flexible">Disposition flexible</h3>
+### Disposition flexible
 
-<p>{{SeeCompatTable}}</p>
+{{SeeCompatTable}}
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html;">&lt;div id="flexbox"&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#flexbox {
+```css
+#flexbox {
   display: flex;
   flex-wrap: wrap;
   width: 300px;
   gap: 20px 5px;
 }
 
-#flexbox &gt; div {
+#flexbox > div {
   border: 1px solid green;
   background-color: lime;
   flex: 1 1 auto;
@@ -105,118 +104,108 @@ gap: unset;
   height: 50px;
 
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Disposition_flexible", "auto", "120px")}}</p>
+{{EmbedLiveSample("Disposition_flexible", "auto", "120px")}}
 
-<h3 id="Grilles_CSS">Grilles CSS</h3>
+### Grilles CSS
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html;">&lt;div id="grid"&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css hidden">#grid {
+```css hidden
+#grid {
   grid-gap: 20px 5px;
 }
-</pre>
+```
 
-<pre class="brush: css">#grid {
+```css
+#grid {
   display: grid;
   height: 200px;
   grid-template: repeat(3, 1fr) / repeat(3, 1fr);
   gap: 20px 5px;
 }
 
-#grid &gt; div {
+#grid > div {
   border: 1px solid green;
   background-color: lime;
 }
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Grilles_CSS", "auto", "120px")}}</p>
+{{EmbedLiveSample("Grilles_CSS", "auto", "120px")}}
 
-<h3 id="Multi-colonnes">Multi-colonnes</h3>
+### Multi-colonnes
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html;">&lt;p class="content-box"&gt;
+```html
+<p class="content-box">
   voici un texte en multi-colonne sur des colonnes avec
   une gouttière de 40 pixels créée grâce à la propriété
-  CSS &lt;code&gt;gap&lt;/code&gt;. Est-ce que c'est pas trop génial ?
-&lt;/p&gt;
-</pre>
+  CSS <code>gap</code>. Est-ce que c'est pas trop génial ?
+</p>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.content-box {
+```css
+.content-box {
   column-count: 3;
   gap: 40px;
 }
-</pre>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}
 
-<h4 id="Résultat_3">Résultat</h4>
+## Spécifications
 
-<p>{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}</p>
+| Spécification                                                                | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. |
 
-<h2 id="Spécifications">Spécifications</h2>
+{{cssinfo}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<p>{{cssinfo}}</p>
+### Prise en charge pour les dispositions flexibles
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.properties.gap.flex_context")}}
 
-<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+### Prise en charge pour les grilles CSS
 
-<p>{{Compat("css.properties.gap.flex_context")}}</p>
+{{Compat("css.properties.gap.grid_context")}}
 
-<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3>
+### Prise en charge pour les dispositions multi-colonnes
 
-<p>{{Compat("css.properties.gap.grid_context")}}</p>
+{{Compat("css.properties.gap.multicol_context")}}
 
-<h3 id="Prise_en_charge_pour_les_dispositions_multi-colonnes">Prise en charge pour les dispositions multi-colonnes</h3>
+## Voir aussi
 
-<p>{{Compat("css.properties.gap.multicol_context")}}</p>
+- Les versions standards, sans préfixe, des propriétés associées :
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+  - {{cssxref("row-gap")}},
+  - {{cssxref("column-gap")}},
 
-<ul>
- <li>Les versions standards, sans préfixe, des propriétés associées :
-  <ul>
-   <li>{{cssxref("row-gap")}},</li>
-   <li>{{cssxref("column-gap")}},</li>
-  </ul>
- </li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de base : les gouttières</a></li>
-</ul>
+- [Guide : les concepts de base : les gouttières](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières)
diff --git a/files/fr/web/css/general_sibling_combinator/index.md b/files/fr/web/css/general_sibling_combinator/index.md
index 683722db57..c74725ecf7 100644
--- a/files/fr/web/css/general_sibling_combinator/index.md
+++ b/files/fr/web/css/general_sibling_combinator/index.md
@@ -9,72 +9,58 @@ tags:
 translation_of: Web/CSS/General_sibling_combinator
 original_slug: Web/CSS/Sélecteurs_de_voisins_généraux
 ---
-<div>{{CSSRef("Selectors")}}</div>
+{{CSSRef("Selectors")}}
 
-<p>Le combinateur <code>~</code> permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.</p>
+Le combinateur `~` permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.
 
-<pre class="brush: css no-line-numbers">/* Parmi tous les éléments &lt;img&gt;, cibler tous
-   éléments &lt;p&gt; qui les suivent. */
+```css
+/* Parmi tous les éléments <img>, cibler tous
+   éléments <p> qui les suivent. */
 img ~ p {
   color: red;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">premier_element ~ second_element { <em>propriétés de style</em> }
-</pre>
+    premier_element ~ second_element { propriétés de style }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p ~ span {
+```css
+p ~ span {
   color: red;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;span&gt;Ici, ce n'est pas rouge.&lt;/span&gt;
-&lt;p&gt;Voici un paragraphe.&lt;/p&gt;
-&lt;code&gt;Un peu de code.&lt;/code&gt;
-&lt;span&gt;Et un autre span.&lt;/span&gt;
-&lt;code&gt;Encore du code&lt;/code&gt;
-&lt;span&gt;Ici aussi, c'est rouge&lt;/span&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 280, 120)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Ce combinateur est renommé en « <em>subsequent-sibling combinator</em> ».</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.general_sibling")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Sélecteur de voisin direct</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<span>Ici, ce n'est pas rouge.</span>
+<p>Voici un paragraphe.</p>
+<code>Un peu de code.</code>
+<span>Et un autre span.</span>
+<code>Encore du code</code>
+<span>Ici aussi, c'est rouge</span>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 280, 120)}}
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                 | Commentaires                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------ |
+| {{SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator')}} | {{Spec2('CSS4 Selectors')}} | Ce combinateur est renommé en « _subsequent-sibling combinator_ ». |
+| {{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}} | {{Spec2('CSS3 Selectors')}} | Définition initiale.                                               |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.general_sibling")}}
+
+## Voir aussi
+
+- [Sélecteur de voisin direct](/fr/docs/Web/CSS/Sélecteur_de_voisin_direct)
diff --git a/files/fr/web/css/gradient/index.md b/files/fr/web/css/gradient/index.md
index 99fc1e5279..9889e81e8d 100644
--- a/files/fr/web/css/gradient/index.md
+++ b/files/fr/web/css/gradient/index.md
@@ -7,120 +7,114 @@ tags:
   - Type
 translation_of: Web/CSS/gradient
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée CSS <strong><code>&lt;gradient&gt;</code></strong> permet de représenter une {{cssxref("&lt;image&gt;")}} contenant un dégradé entre deux ou plusieurs couleurs. Un dégradé CSS n'est pas une couleur CSS (type {{cssxref("&lt;color&gt;")}}) mais une image <a href="/fr/docs/Web/CSS/image">sans dimension intrinsèque</a> (elle n'a aucune taille naturelle ou ratio), sa taille réelle sera celle de l'élément auquel elle est appliquée.</p>
+Le type de donnée CSS **`<gradient>`** permet de représenter une {{cssxref("&lt;image&gt;")}} contenant un dégradé entre deux ou plusieurs couleurs. Un dégradé CSS n'est pas une couleur CSS (type {{cssxref("&lt;color&gt;")}}) mais une image [sans dimension intrinsèque](/fr/docs/Web/CSS/image) (elle n'a aucune taille naturelle ou ratio), sa taille réelle sera celle de l'élément auquel elle est appliquée.
 
-<div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div>
+{{EmbedInteractiveExample("pages/css/type-gradient.html")}}
 
-<p>Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé <code>transparent</code> dans d'anciens navigateurs).</p>
+Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé `transparent` dans d'anciens navigateurs).
 
-<h2 id="Les_types_de_dégradés">Les types de dégradés</h2>
+## Les types de dégradés
 
-<h3 id="Les_dégradés_linéaires">Les dégradés linéaires</h3>
+### Les dégradés linéaires
 
-<p>Ils sont générés à partir de la fonction {{cssxref("linear-gradient", "linear-gradient()")}} : la couleur évolue suivant un axe imaginaire :</p>
+Ils sont générés à partir de la fonction {{cssxref("linear-gradient", "linear-gradient()")}} : la couleur évolue suivant un axe imaginaire :
 
-<pre class="brush: html hidden">A rainbow made from a gradient
-</pre>
+```html hidden
+A rainbow made from a gradient
+```
 
-<pre class="brush: css">body {
+```css
+body {
   background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
   background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
   background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
   background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
   background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
-}</pre>
+}
+```
+
+{{EmbedLiveSample('Les_dégradés_linéaires', 600, 20)}}
 
-<p>{{EmbedLiveSample('Les_dégradés_linéaires', 600, 20)}}</p>
+### Les dégradés radiaux
 
-<h3 id="Les_dégradés_radiaux">Les dégradés radiaux</h3>
+Ils sont générés à partir de la fonction {{cssxref("radial-gradient", "radial-gradient()")}}. Plus on s'éloigne du point d'origine, plus la couleur varie par rapport à la couleur d'origine :
 
-<p>Ils sont générés à partir de la fonction {{cssxref("radial-gradient", "radial-gradient()")}}. Plus on s'éloigne du point d'origine, plus la couleur varie par rapport à la couleur d'origine :</p>
+```html hidden
+Radial gradient
 
-<pre class="brush: html hidden">Radial gradient
-  </pre>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
   background: radial-gradient(red, yellow, rgb(30, 144, 255));
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Les_dégradés_radiaux', 600, 20)}}</p>
+{{EmbedLiveSample('Les_dégradés_radiaux', 600, 20)}}
 
-<h3 id="Les_dégradés_répétés">Les dégradés répétés</h3>
+### Les dégradés répétés
 
-<p>Ce sont des dégradés linéaires de taille fixe ou des dégradés radiaux qui sont répétés autant que nécessaire pour remplir la boîte visée :</p>
+Ce sont des dégradés linéaires de taille fixe ou des dégradés radiaux qui sont répétés autant que nécessaire pour remplir la boîte visée :
 
-<pre class="brush: html hidden">Repeating gradient
-</pre>
+```html hidden
+Repeating gradient
+```
 
-<pre class="brush: css">body {
+```css
+body {
   background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
   background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
-}  </pre>
+}
+```
 
-<p>{{EmbedLiveSample('Les_dégradés_répétés', 600, 20)}}</p>
+{{EmbedLiveSample('Les_dégradés_répétés', 600, 20)}}
 
-<h4 id="Dégradé_conique">Dégradé conique</h4>
+#### Dégradé conique
 
-<p>Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction {{cssref("conic-gradient","conic-gradient()")}}.</p>
+Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction {{cssref("conic-gradient","conic-gradient()")}}.
 
-<pre class="brush: html hidden">&lt;div class="conic-gradient"&gt;Conic gradient&lt;/div&gt;
-</pre>
+```html hidden
+<div class="conic-gradient">Conic gradient</div>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   width: 200px;
   height: 200px;
-}</pre>
+}
+```
 
-<pre class="brush: css">.conic-gradient {
+```css
+.conic-gradient {
   background: conic-gradient(lightpink, white, powderblue);
 }
-</pre>
-
-<p>{{EmbedLiveSample('dégradé_conique', 240, 80)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Images', '#gradients', '&lt;gradient&gt;')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td>Ajout des dégradés coniques.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.image.gradient")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a></li>
- <li>{{cssxref("&lt;gradient&gt;")}}</li>
- <li>{{cssxref("conic-gradient", "conic-gradient()")}}</li>
- <li>{{cssxref("linear-gradient", "linear-gradient()")}}</li>
- <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li>
- <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
- <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
- <li><a href="/fr/docs/Web/CSS/Types_CSS">Les types de donnée en CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Les unités et valeurs en CSS</a></li>
- <li><a href="fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les unités et les valeurs</a></li>
-</ul>
+```
+
+{{EmbedLiveSample('dégradé_conique', 240, 80)}}
+
+## Spécifications
+
+| Spécification                                                                    | État                             | Commentaires                 |
+| -------------------------------------------------------------------------------- | -------------------------------- | ---------------------------- |
+| {{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}} | {{Spec2('CSS3 Images')}} | Définition initiale.         |
+| {{SpecName('CSS4 Images', '#gradients', '&lt;gradient&gt;')}} | {{Spec2('CSS4 Images')}} | Ajout des dégradés coniques. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.image.gradient")}}
+
+## Voir aussi
+
+- [Manipuler les dégradés CSS](/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS)
+- {{cssxref("&lt;gradient&gt;")}}
+- {{cssxref("conic-gradient", "conic-gradient()")}}
+- {{cssxref("linear-gradient", "linear-gradient()")}}
+- {{cssxref("radial-gradient", "radial-gradient()")}}
+- {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}
+- {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
+- [Les types de donnée en CSS](/fr/docs/Web/CSS/Types_CSS)
+- [Les unités et valeurs en CSS](/fr/docs/Web/CSS/Valeurs_et_unités_CSS)
+- [Introduction à CSS : les unités et les valeurs](fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units)
diff --git a/files/fr/web/css/grid-area/index.md b/files/fr/web/css/grid-area/index.md
index ba2cd9ed2e..58950b4c06 100644
--- a/files/fr/web/css/grid-area/index.md
+++ b/files/fr/web/css/grid-area/index.md
@@ -7,39 +7,40 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-area
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-area</code></strong> est une propriété raccourcie pour {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} et {{cssxref("grid-column-end")}} qui permet de définir la taille d'un objet de la grille et son emplacement via les bords de sa zone de grille.</p>
+La propriété **`grid-area`** est une propriété raccourcie pour {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} et {{cssxref("grid-column-end")}} qui permet de définir la taille d'un objet de la grille et son emplacement via les bords de sa zone de grille.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-area.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-area.html")}}
 
-<p>Si quatre valeurs <code>&lt;grid-line&gt;</code> sont fournies, la première sera appliquée à <code>grid-row-start</code>, la deuxième à <code>grid-column-start</code>, la troisième à <code>grid-row-end</code> et la quatrième à <code>grid-column-end</code>.</p>
+Si quatre valeurs `<grid-line>` sont fournies, la première sera appliquée à `grid-row-start`, la deuxième à `grid-column-start`, la troisième à `grid-row-end` et la quatrième à `grid-column-end`.
 
-<p>Lorsqu'il n'y a pas de valeur pour <code>grid-column-end</code>, si <code>grid-column-start</code> est un identifiant de zone ({{cssxref("&lt;custom-ident&gt;")}}, <code>grid-column-end</code> sera défini avec cet identifiant, sinon il sera défini avec <code>auto</code>.</p>
+Lorsqu'il n'y a pas de valeur pour `grid-column-end`, si `grid-column-start` est un identifiant de zone ({{cssxref("&lt;custom-ident&gt;")}}, `grid-column-end` sera défini avec cet identifiant, sinon il sera défini avec `auto`.
 
-<p>Lorsqu'il n'y a pas de valeur pour <code>grid-row-end</code>, si <code>grid-row-start</code> est un identifiant de zone, <code>grid-row-end</code> sera défini avec cet identifiant, sinon il sera défini avec <code>auto</code>.</p>
+Lorsqu'il n'y a pas de valeur pour `grid-row-end`, si `grid-row-start` est un identifiant de zone, `grid-row-end` sera défini avec cet identifiant, sinon il sera défini avec `auto`.
 
-<p>Lorsqu'il n'y  a pas de valeur pour <code>grid-column-start</code>, si <code>grid-row-start</code> est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront <code>auto</code>.</p>
+Lorsqu'il n'y  a pas de valeur pour `grid-column-start`, si `grid-row-start` est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront `auto`.
 
-<p>La propriété <code>grid-area</code> peut également prendre comme valeur un identifiant personnalisé ({{cssxref("&lt;custom-ident&gt;")}}) qui pourra être utilisé comme nom pour une zone de la grille placée grâce à la propriété {{cssxref("grid-template-areas")}}.</p>
+La propriété `grid-area` peut également prendre comme valeur un identifiant personnalisé ({{cssxref("&lt;custom-ident&gt;")}}) qui pourra être utilisé comme nom pour une zone de la grille placée grâce à la propriété {{cssxref("grid-template-areas")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 grid-area: auto;
 grid-area: auto / auto;
 grid-area: auto / auto / auto;
 grid-area: auto / auto / auto / auto;
 
-/* Valeurs de type &lt;custom-ident&gt; */
+/* Valeurs de type <custom-ident> */
 grid-area: une-zone-de-grille;
 grid-area: une-zone-de-grille / une-autre-zone;
 
-/* Forme : &lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;? */
+/* Forme : <integer> && <custom-ident>? */
 grid-area: une-zone-de-grille 4;
 grid-area: une-zone-de-grille 4 / 2 une-autre-zone;
 
-/* Forme span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ] */
+/* Forme span && [ <integer> || <custom-ident> ] */
 grid-area: span 3;
 grid-area: span 3 / span une-zone-de-grille;
 grid-area: 2 span / une-autre-zone span;
@@ -47,42 +48,47 @@ grid-area: 2 span / une-autre-zone span;
 /* Valeurs globales */
 grid-area: inherit;
 grid-area: initial;
-grid-area: unset;</pre>
+grid-area: unset;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
- <dt><code>&lt;custom-ident&gt;</code></dt>
- <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
- <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-area: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p></div>
+- `auto`
+  - : Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (_span_) automatique ou une taille par défaut de `1`.
+- `<custom-ident>`
 
- <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
- </dd>
- <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
- <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
- <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+  - : S'il existe une ligne nommée avec '\<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
 
- <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
- </dd>
- <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
- <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
- <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+    > **Note :** Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant `grid-area: foo;` cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne `foo-start` a été explicitement déclarée).
 
- <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
- </dd>
-</dl>
+    Sinon, la valeur est traitée comme si on avait utilisé `<custom-ident>` et la valeur `1`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- `<integer> && <custom-ident>?`
+
+  - : La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+
+    Si un nom est fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.
+
+    Si la valeur entière utilisée est `0`, la règle est invalide.
+
+- `span && [ <integer> || <custom-ident> ]`
+
+  - : Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+
+    Si un nom fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.
+
+    Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera `1`. Les entiers négatifs ou nuls sont invalides.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#grid {
+```css
+#grid {
   display: grid;
   height: 100px;
   grid-template: repeat(4, 1fr) / 50px 100px;
@@ -99,54 +105,42 @@ grid-area: unset;</pre>
 
 #item3 {
   background-color: blue;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="grid"&gt;
-  &lt;div id="item1"&gt;&lt;/div&gt;
-  &lt;div id="item2"&gt;&lt;/div&gt;
-  &lt;div id="item3"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%", "150px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-area")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-row")}}</li>
- <li>{{cssxref("grid-row-start")}}</li>
- <li>{{cssxref("grid-row-end")}}</li>
- <li>{{cssxref("grid-column")}}</li>
- <li>{{cssxref("grid-column-start")}}</li>
- <li>{{cssxref("grid-column-end")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Guide : les zones des grilles CSS</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/grid-template-areas/">les zones des grilles CSS (en anglais)</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%", "150px")}}
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-area")}}
+
+## Voir aussi
+
+- {{cssxref("grid-row")}}
+- {{cssxref("grid-row-start")}}
+- {{cssxref("grid-row-end")}}
+- {{cssxref("grid-column")}}
+- {{cssxref("grid-column-start")}}
+- {{cssxref("grid-column-end")}}
+- [Guide : les zones des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+- Tutoriel vidéo : [les zones des grilles CSS (en anglais)](https://gridbyexample.com/video/grid-template-areas/)
diff --git a/files/fr/web/css/grid-auto-columns/index.md b/files/fr/web/css/grid-auto-columns/index.md
index a993203277..2456688ecb 100644
--- a/files/fr/web/css/grid-auto-columns/index.md
+++ b/files/fr/web/css/grid-auto-columns/index.md
@@ -8,33 +8,34 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-auto-columns
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-auto-columns</code></strong> définit la taille d'une colonne de grille créée de façon implicite.</p>
+La propriété **`grid-auto-columns`** définit la taille d'une colonne de grille créée de façon implicite.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}
 
-<p>Si un élément de la grille est positionné sur une colonne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-columns")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des colonnes supplémentaires.</p>
+Si un élément de la grille est positionné sur une colonne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-columns")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des colonnes supplémentaires.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css  no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 grid-auto-columns: min-content;
 grid-auto-columns: max-content;
 grid-auto-columns: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 grid-auto-columns: 100px;
 grid-auto-columns: 20cm;
 grid-auto-columns: 50vmax;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt;        */
+/* Type <percentage>        */
 grid-auto-columns: 10%;
 grid-auto-columns: 33.3%;
 
-/* Valeurs &lt;flex&gt; */
+/* Valeurs <flex> */
 grid-auto-columns: 0.5fr;
 grid-auto-columns: 3fr;
 
@@ -60,41 +61,44 @@ grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
 grid-auto-columns: inherit;
 grid-auto-columns: initial;
 grid-auto-columns: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une longueur positive (cf. type {{cssxref("&lt;length&gt;")}}.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considérée comme <code>auto</code>.</dd>
- <dt><code>&lt;flex&gt;</code></dt>
- <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
- <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>).</p>
- </dd>
- <dt><code>max-content</code></dt>
- <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
- <dt><code>min-content</code></dt>
- <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille</dd>
- <dt><code>minmax(min, max)</code></dt>
- <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).</dd>
- <dt><code>fit-content(argument)</code></dt>
- <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée de façon semblable à <code>auto</code>, sauf qu'ici, la taille de la piste est écrétée à <em>argument</em> s'i elle est plus grande que le minimum <code>auto</code>.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+  - : Une longueur positive (cf. type {{cssxref("&lt;length&gt;")}}.
+- `<percentage>`
+  - : Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considérée comme `auto`.
+- `<flex>`
+
+  - : Une dimension positive dont l'unité `fr` indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec `<flex>` occupera une partie de l'espace restant en fonction de ce facteur.
+
+    Lorsque cette valeur apparaît en dehors de la notation `minmax()`, la valeur minimale `auto` est implicite (la valeur signifie `minmax(auto, <flex>)`).
+
+- `max-content`
+  - : Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
+- `min-content`
+  - : Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille
+- `minmax(min, max)`
+  - : Une notation fonctionnelle qui définit un intervalle de taille entre `min` et `max`. Si `max` est inférieur à `min`, `max` est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur `<flex>` qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).
+- `fit-content(argument)`
+  - : Cette notation représente la formule `min(max-content, max(auto, argument))` qui est calculée de façon semblable à `auto`, sauf qu'ici, la taille de la piste est écrétée à _argument_ s'i elle est plus grande que le minimum `auto`.
+- `auto`
+
+  - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
+
+    > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#grid {
+```css
+#grid {
   width: 100px;
   display: grid;
   grid-template-areas: "a a";
@@ -102,53 +106,41 @@ grid-auto-columns: unset;
   grid-auto-columns: 200px;
 }
 
-#grid &gt; div {
+#grid > div {
   background-color: lime;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="grid"&gt;
-  &lt;div id="item1"&gt;&lt;/div&gt;
-  &lt;div id="item2"&gt;&lt;/div&gt;
-  &lt;div id="item3"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "410px", "100px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-auto-columns")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-auto-rows")}}</li>
- <li>{{cssxref("grid-auto-flow")}}</li>
- <li>{{cssxref("grid")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "410px", "100px")}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-auto-columns")}}
+
+## Voir aussi
+
+- {{cssxref("grid-auto-rows")}}
+- {{cssxref("grid-auto-flow")}}
+- {{cssxref("grid")}}
+- [Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite](/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#dimensionner_les_lignes_de_la_grille_implicite)
+- Tutoriel vidéo : [Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)](https://gridbyexample.com/video/series-auto-placement-order/)
diff --git a/files/fr/web/css/grid-auto-flow/index.md b/files/fr/web/css/grid-auto-flow/index.md
index 1eb36acdc2..3e14e8cc58 100644
--- a/files/fr/web/css/grid-auto-flow/index.md
+++ b/files/fr/web/css/grid-auto-flow/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-auto-flow
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-auto-flow</code></strong> permet de contrôler la façon dont fonctionne l'algorithme de placement automatique. Celui-ci définit exactement comme les objets placés automatiquement s'inscrivent dans la grille.</p>
+La propriété **`grid-auto-flow`** permet de contrôler la façon dont fonctionne l'algorithme de placement automatique. Celui-ci définit exactement comme les objets placés automatiquement s'inscrivent dans la grille.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 grid-auto-flow: row;
 grid-auto-flow: column;
 grid-auto-flow: dense;
@@ -26,37 +27,35 @@ grid-auto-flow: column dense;
 grid-auto-flow: inherit;
 grid-auto-flow: initial;
 grid-auto-flow: unset;
-</pre>
+```
 
-<p>Cette propriété peut prendre deux formes :</p>
+Cette propriété peut prendre deux formes :
 
-<ul>
- <li>la première avec un seul mot-clé parmi : <code>row</code>, <code>column</code> ou <code>dense</code></li>
- <li>la seconde avec deux mots-clés : <code>row dense</code> ou <code>column dense</code>.</li>
-</ul>
+- la première avec un seul mot-clé parmi : `row`, `column` ou `dense`
+- la seconde avec deux mots-clés : `row dense` ou `column dense`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>row</code></dt>
- <dd>Les éléments sont organisés en remplissant chacune des lignes au fur et à mesure, quitte à en ajouter si besoin. Si aucune valeur entre <code>row</code> ou <code>column</code> n'est fournie, <code>row</code> sera la valeur par défaut.</dd>
- <dt><code>column</code></dt>
- <dd>Les éléments sont organisés en remplissant chacune des colonnes au fur et à mesure, quitte à en ajouter si besoin.</dd>
- <dt><code>dense</code></dt>
- <dd>L'algorithme de placement automatique utilisera une méthode de « regroupement dense » où il essaie de remplir les trous dans la grille si des éléments plus petits arrivent ensuite. De fait, on peut obtenir une impression de désordre alors qu'il s'agit simplement du comblement des espaces libres.
- <p>Si cette valeur est absente, le moteur utilisera un algorithme simple qui ne fait que se déplacer vers l'avant, sans revenir vers les espaces vides. De cette façon, les éléments apparaitront nécessairement dans l'ordre mais pourront laisser des trous.</p>
- </dd>
-</dl>
+- `row`
+  - : Les éléments sont organisés en remplissant chacune des lignes au fur et à mesure, quitte à en ajouter si besoin. Si aucune valeur entre `row` ou `column` n'est fournie, `row` sera la valeur par défaut.
+- `column`
+  - : Les éléments sont organisés en remplissant chacune des colonnes au fur et à mesure, quitte à en ajouter si besoin.
+- `dense`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : L'algorithme de placement automatique utilisera une méthode de « regroupement dense » où il essaie de remplir les trous dans la grille si des éléments plus petits arrivent ensuite. De fait, on peut obtenir une impression de désordre alors qu'il s'agit simplement du comblement des espaces libres.
+
+    Si cette valeur est absente, le moteur utilisera un algorithme simple qui ne fait que se déplacer vers l'avant, sans revenir vers les espaces vides. De cette façon, les éléments apparaitront nécessairement dans l'ordre mais pourront laisser des trous.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#grid {
+```css
+#grid {
   height: 200px;
   width: 200px;
   display: grid;
@@ -85,28 +84,31 @@ grid-auto-flow: unset;
 
 #item5 {
   background-color: aqua;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="grid"&gt;
-  &lt;div id="item1"&gt;&lt;/div&gt;
-  &lt;div id="item2"&gt;&lt;/div&gt;
-  &lt;div id="item3"&gt;&lt;/div&gt;
-  &lt;div id="item4"&gt;&lt;/div&gt;
-  &lt;div id="item5"&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;select id="direction" onchange="changeGridAutoFlow()"&gt;
-  &lt;option value="column"&gt;column&lt;/option&gt;
-  &lt;option value="row"&gt;row&lt;/option&gt;
-&lt;/select&gt;
-&lt;input id="dense" type="checkbox" onchange="changeGridAutoFlow()"&gt;
-&lt;label for="dense"&gt;dense&lt;/label&gt;
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js;">function changeGridAutoFlow() {
+}
+```
+
+### HTML
+
+```html
+<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+  <div id="item4"></div>
+  <div id="item5"></div>
+</div>
+<select id="direction" onchange="changeGridAutoFlow()">
+  <option value="column">column</option>
+  <option value="row">row</option>
+</select>
+<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
+<label for="dense">dense</label>
+```
+
+### JavaScript
+
+```js
+function changeGridAutoFlow() {
   var grid = document.getElementById("grid");
   var direction = document.getElementById("direction");
   var dense = document.getElementById("dense");
@@ -117,43 +119,29 @@ grid-auto-flow: unset;
   }
 
   grid.style.gridAutoFlow = gridAutoFlow;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "200px", "230px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-auto-flow")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-auto-rows")}}</li>
- <li>{{cssxref("grid-auto-columns")}}</li>
- <li>{{cssxref("grid")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">Guide : le placement automatique sur la grille</a></li>
- <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "200px", "230px")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-auto-flow")}}
+
+## Voir aussi
+
+- {{cssxref("grid-auto-rows")}}
+- {{cssxref("grid-auto-columns")}}
+- {{cssxref("grid")}}
+- [Guide : le placement automatique sur la grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS)
+- Tutoriel vidéo : [Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)](http://gridbyexample.com/video/series-auto-placement-order/)
diff --git a/files/fr/web/css/grid-auto-rows/index.md b/files/fr/web/css/grid-auto-rows/index.md
index 33e3e8721c..aa3ec3e501 100644
--- a/files/fr/web/css/grid-auto-rows/index.md
+++ b/files/fr/web/css/grid-auto-rows/index.md
@@ -7,33 +7,34 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-auto-rows
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-auto-rows</code></strong> définit la taille d'une ligne de grille créée de façon implicite.</p>
+La propriété **`grid-auto-rows`** définit la taille d'une ligne de grille créée de façon implicite.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}
 
-<p>Si un élément de la grille est positionné sur une ligne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-rows")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des lignes supplémentaires.</p>
+Si un élément de la grille est positionné sur une ligne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-rows")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des lignes supplémentaires.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 grid-auto-rows: min-content;
 grid-auto-rows: max-content;
 grid-auto-rows: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 grid-auto-rows: 100px;
 grid-auto-rows: 20cm;
 grid-auto-rows: 50vmax;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt;        */
+/* Type <percentage>        */
 grid-auto-rows: 10%;
 grid-auto-rows: 33.3%;
 
-/* Valeurs &lt;flex&gt; */
+/* Valeurs <flex> */
 grid-auto-rows: 0.5fr;
 grid-auto-rows: 3fr;
 
@@ -55,39 +56,42 @@ grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
 grid-auto-rows: inherit;
 grid-auto-rows: initial;
 grid-auto-rows: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une longueur positive (cf. type {{cssxref("&lt;length&gt;")}}.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considérée comme <code>auto</code>.</dd>
- <dt><code>&lt;flex&gt;</code></dt>
- <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
- <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>).</p>
- </dd>
- <dt><code>max-content</code></dt>
- <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
- <dt><code>min-content</code></dt>
- <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille</dd>
- <dt><code>minmax(min, max)</code></dt>
- <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+  - : Une longueur positive (cf. type {{cssxref("&lt;length&gt;")}}.
+- `<percentage>`
+  - : Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considérée comme `auto`.
+- `<flex>`
+
+  - : Une dimension positive dont l'unité `fr` indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec `<flex>` occupera une partie de l'espace restant en fonction de ce facteur.
+
+    Lorsque cette valeur apparaît en dehors de la notation `minmax()`, la valeur minimale `auto` est implicite (la valeur signifie `minmax(auto, <flex>)`).
+
+- `max-content`
+  - : Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
+- `min-content`
+  - : Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille
+- `minmax(min, max)`
+  - : Une notation fonctionnelle qui définit un intervalle de taille entre `min` et `max`. Si `max` est inférieur à `min`, `max` est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur `<flex>` qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).
+- `auto`
+
+  - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
+
+    > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#grid {
+```css
+#grid {
   width: 200px;
   display: grid;
   grid-template-areas: "a a";
@@ -95,53 +99,41 @@ grid-auto-rows: unset;
   grid-auto-rows: 100px;
 }
 
-#grid &gt; div {
+#grid > div {
   background-color: lime;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="grid"&gt;
-  &lt;div id="item1"&gt;&lt;/div&gt;
-  &lt;div id="item2"&gt;&lt;/div&gt;
-  &lt;div id="item3"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "210px", "210px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-auto-rows")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-auto-columns")}}</li>
- <li>{{cssxref("grid-auto-flow")}}</li>
- <li>{{cssxref("grid")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "210px", "210px")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-auto-rows")}}
+
+## Voir aussi
+
+- {{cssxref("grid-auto-columns")}}
+- {{cssxref("grid-auto-flow")}}
+- {{cssxref("grid")}}
+- [Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite](/fr/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#dimensionner_les_lignes_de_la_grille_implicite)
+- Tutoriel vidéo : [Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)](https://gridbyexample.com/video/series-auto-placement-order/)
diff --git a/files/fr/web/css/grid-column-end/index.md b/files/fr/web/css/grid-column-end/index.md
index d001f397c9..b650f7110c 100644
--- a/files/fr/web/css/grid-column-end/index.md
+++ b/files/fr/web/css/grid-column-end/index.md
@@ -7,25 +7,26 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-column-end
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-column-end</code></strong> définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de colonne donné.</p>
+La propriété **`grid-column-end`** définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de colonne donné.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-column-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-column-end.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 grid-column-end: auto;
 
-/* Valers &lt;custom-ident&gt; */
+/* Valers <custom-ident> */
 grid-column-end: somegridarea;
 
-/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs <integer> + <custom-ident> */
 grid-column-end: 2;
 grid-column-end: somegridarea 4;
 
-/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs span + <integer> + <custom-ident> */
 grid-column-end: span 3;
 grid-column-end: span somegridarea;
 grid-column-end: 5 somegridarea span;
@@ -34,49 +35,54 @@ grid-column-end: 5 somegridarea span;
 grid-column-end: inherit;
 grid-column-end: initial;
 grid-column-end: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut <code>1</code> s'il n'y a pas d'autres contraintes.</dd>
- <dt><code>&lt;custom-ident&gt;</code></dt>
- <dd>S'il existe une ligne nommée '&lt;custom-ident&gt;-end', cela placera l'élément sur la première ligne correspondante..
- <div class="note"><p><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, <code>grid-column-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec <code>foo-end</code>).</p></div>
+- `auto`
+  - : Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut `1` s'il n'y a pas d'autres contraintes.
+- `<custom-ident>`
 
- <p>Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <code>&lt;custom-ident&gt;</code> (cf. définition suivante).</p>
- </dd>
- <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
- <dd>Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position.
- <p>Un entier nul ne peut pas être utilisé (la règle est invalide).</p>
- </dd>
- <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
- <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que la fin de la colonne pour l'élément de la grille soit placé à n lignes du bord situé au début.
- <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+  - : S'il existe une ligne nommée '\<custom-ident>-end', cela placera l'élément sur la première ligne correspondante..
 
- <p>Si &lt;integer&gt; est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.</p>
+    > **Note :** Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, `grid-column-end: foo;` permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec `foo-end`).
 
- <p><code>&lt;custom-ident&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
- </dd>
-</dl>
+    Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- `<integer> && <custom-ident>?`
+
+  - : Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour \<custom-ident>, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position.
+
+    Un entier nul ne peut pas être utilisé (la règle est invalide).
+
+- `span && [ <integer> || <custom-ident> ]`
+
+  - : Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que la fin de la colonne pour l'élément de la grille soit placé à n lignes du bord situé au début.
+
+    Si un nom fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.
+
+    Si \<integer> est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.
+
+    `<custom-ident>` ne peut pas prendre la valeur `span`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;One&lt;/div&gt;
-  &lt;div class="box2"&gt;Two&lt;/div&gt;
-  &lt;div class="box3"&gt;Three&lt;/div&gt;
-  &lt;div class="box4"&gt;Four&lt;/div&gt;
-  &lt;div class="box5"&gt;Five&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
@@ -94,9 +100,10 @@ grid-column-end: unset;
   grid-row-start: 3;
   grid-row-end: 5;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -104,7 +111,7 @@ grid-column-end: unset;
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
@@ -118,43 +125,28 @@ grid-column-end: unset;
   background-color: #fff9db;
   padding: 1em;
 }
-</pre>
-
-<p>{{EmbedLiveSample('Exemples', '230', '420')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-column-end", "grid-column-end")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-column-end")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-column-start")}}</li>
- <li>{{cssxref("grid-column")}}</li>
- <li>{{cssxref("grid-row-start")}}</li>
- <li>{{cssxref("grid-row-end")}}</li>
- <li>{{cssxref("grid-row")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : le placement sur les lignes d'une grille</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li>
-</ul>
+```
+
+{{EmbedLiveSample('Exemples', '230', '420')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-column-end", "grid-column-end")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-column-end")}}
+
+## Voir aussi
+
+- {{cssxref("grid-column-start")}}
+- {{cssxref("grid-column")}}
+- {{cssxref("grid-row-start")}}
+- {{cssxref("grid-row-end")}}
+- {{cssxref("grid-row")}}
+- [Guide : le placement sur les lignes d'une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+- Tutoriel vidéo : [le placement sur les lignes (en anglais)](https://gridbyexample.com/video/series-line-based-placement/)
diff --git a/files/fr/web/css/grid-column-start/index.md b/files/fr/web/css/grid-column-start/index.md
index a836b66012..257bd97464 100644
--- a/files/fr/web/css/grid-column-start/index.md
+++ b/files/fr/web/css/grid-column-start/index.md
@@ -7,25 +7,26 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-column-start
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-column-start</code></strong> définit la position du début d'un élément (au sens des propriétés logiques <code>*-block-start</code>) en définissant la ligne ou la taille de fragment occupé sur la grille.</p>
+La propriété **`grid-column-start`** définit la position du début d'un élément (au sens des propriétés logiques `*-block-start`) en définissant la ligne ou la taille de fragment occupé sur la grille.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 grid-column-start: auto;
 
-/* Valeur &lt;custom-ident&gt; */
+/* Valeur <custom-ident> */
 grid-column-start: unezonedegrille;
 
-/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs <integer> + <custom-ident> */
 grid-column-start: 2;
 grid-column-start: unezonedegrille 4;
 
-/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs span + <integer> + <custom-ident> */
 grid-column-start: span 3;
 grid-column-start: span unezonedegrille;
 grid-column-start: span unezonedegrille 5;
@@ -34,61 +35,64 @@ grid-column-start: span unezonedegrille 5;
 grid-column-start: inherit;
 grid-column-start: initial;
 grid-column-start: unset;
-</pre>
+```
 
-<p>La valeur de cette propriété prend la forme d'une seule valeur <code>&lt;grid-line&gt;</code>. Une telle valeur peut être définie avec :</p>
+La valeur de cette propriété prend la forme d'une seule valeur `<grid-line>`. Une telle valeur peut être définie avec :
 
-<ul>
- <li>le mot-clé <code>auto</code></li>
- <li>ou une valeur <code>&lt;custom-ident&gt;</code></li>
- <li>ou une valeur <code>&lt;integer&gt;</code></li>
- <li>ou une valeur <code>&lt;custom-ident&gt;</code> et un <code>&lt;integer&gt;</code> séparés par un espace</li>
- <li>ou le mot-clé <code>span</code> avec une valeur <code>&lt;custom-ident&gt;</code> ou un <code>&lt;integer&gt;</code> ou les deux.</li>
-</ul>
+- le mot-clé `auto`
+- ou une valeur `<custom-ident>`
+- ou une valeur `<integer>`
+- ou une valeur `<custom-ident>` et un `<integer>` séparés par un espace
+- ou le mot-clé `span` avec une valeur `<custom-ident>` ou un `<integer>` ou les deux.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
- <dt><code>&lt;custom-ident&gt;</code></dt>
- <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
- <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p></div>
+- `auto`
+  - : Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (_span_) automatique ou une taille par défaut de `1`.
+- `<custom-ident>`
 
- <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
- </dd>
- <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
- <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
- <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+  - : S'il existe une ligne nommée avec '\<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
 
- <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
- </dd>
- <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
- <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
- <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+    > **Note :** Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant `grid-column-start: foo;` cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne `foo-start` a été explicitement déclarée).
 
- <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+    Sinon, la valeur est traitée comme si on avait utilisé `<custom-ident>` et la valeur `1`.
 
- <p><code>&lt;custom-ident</code><code>&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
- </dd>
-</dl>
+- `<integer> && <custom-ident>?`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+
+    Si un nom est fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.
+
+    Si la valeur entière utilisée est `0`, la règle est invalide.
+
+- `span && [ <integer> || <custom-ident> ]`
+
+  - : Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+
+    Si un nom fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.
+
+    Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera `1`. Les entiers négatifs ou nuls sont invalides.
+
+    ` <custom-ident``> ` ne peut pas prendre la valeur `span`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;One&lt;/div&gt;
-  &lt;div class="box2"&gt;Two&lt;/div&gt;
-  &lt;div class="box3"&gt;Three&lt;/div&gt;
-  &lt;div class="box4"&gt;Four&lt;/div&gt;
-  &lt;div class="box5"&gt;Five&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
@@ -106,9 +110,10 @@ grid-column-start: unset;
   grid-row-start: 3;
   grid-row-end: 5;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -116,7 +121,7 @@ grid-column-start: unset;
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
@@ -130,43 +135,28 @@ grid-column-start: unset;
   background-color: #fff9db;
   padding: 1em;
 }
-</pre>
-
-<p>{{EmbedLiveSample('Exemples', '230', '420')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-column-start", "grid-column-start")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-column-start")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-column-end")}}</li>
- <li>{{cssxref("grid-column")}}</li>
- <li>{{cssxref("grid-row-start")}}</li>
- <li>{{cssxref("grid-row-end")}}</li>
- <li>{{cssxref("grid-row")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : le placement sur les lignes d'une grille</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li>
-</ul>
+```
+
+{{EmbedLiveSample('Exemples', '230', '420')}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-column-start", "grid-column-start")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-column-start")}}
+
+## Voir aussi
+
+- {{cssxref("grid-column-end")}}
+- {{cssxref("grid-column")}}
+- {{cssxref("grid-row-start")}}
+- {{cssxref("grid-row-end")}}
+- {{cssxref("grid-row")}}
+- [Guide : le placement sur les lignes d'une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+- Tutoriel vidéo : [le placement sur les lignes (en anglais)](https://gridbyexample.com/video/series-line-based-placement/)
diff --git a/files/fr/web/css/grid-column/index.md b/files/fr/web/css/grid-column/index.md
index f66d2c735d..0a7ee0ef8b 100644
--- a/files/fr/web/css/grid-column/index.md
+++ b/files/fr/web/css/grid-column/index.md
@@ -7,29 +7,30 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-column
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-column</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> pour {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}}. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.</p>
+La propriété **`grid-column`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) pour {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}}. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-column.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-column.html")}}
 
-<p>Si deux valeurs <code><strong>&lt;grid-line&gt;</strong></code> sont utilisées pour la propriété, la valeur de <strong><code>grid-column-start</code></strong> sera définie avec la première valeur avant la barre oblique et la valeur de <strong><code>grid-column-end</code></strong> sera définie avec celle qui est située après la barre oblique.</p>
+Si deux valeurs **`<grid-line>`** sont utilisées pour la propriété, la valeur de **`grid-column-start`** sera définie avec la première valeur avant la barre oblique et la valeur de **`grid-column-end`** sera définie avec celle qui est située après la barre oblique.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 grid-column: auto;
 grid-column: auto / auto;
 
-/* Valeurs &lt;custom-ident&gt; */
+/* Valeurs <custom-ident> */
 grid-column: unezonedegrille;
 grid-column: unezonedegrille / unezonedegrille;
 
-/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs <integer> + <custom-ident> */
 grid-column: unezonedegrille 4;
 grid-column: 4 unezonedegrille / 6;
 
-/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs span + <integer> + <custom-ident> */
 grid-column: span 3;
 grid-column: span unezonedegrille;
 grid-column: 5 unezonedegrille span;
@@ -41,54 +42,56 @@ grid-column: 5 unezonedegrille span / 2 span;
 grid-column: inherit;
 grid-column: initial;
 grid-column: unset;
-</pre>
+```
 
-<p>Cette propriété est définie grâce à une ou deux valeurs <code>&lt;grid-line&gt;</code>. Si deux valeurs <code>&lt;grid-line&gt;</code> sont fournies, elles doivent être séparées par une barre oblique (/)</p>
+Cette propriété est définie grâce à une ou deux valeurs `<grid-line>`. Si deux valeurs `<grid-line>` sont fournies, elles doivent être séparées par une barre oblique (/)
 
-<p>Une valeur <code>&lt;grid-line&gt;</code> peut être définie avec :</p>
+Une valeur `<grid-line>` peut être définie avec :
 
-<ul>
- <li>le mot-clé <code>auto</code></li>
- <li>ou une valeur <code>&lt;custom-ident&gt;</code></li>
- <li>ou une valeur <code>&lt;integer&gt;</code></li>
- <li>ou une valeur <code>&lt;custom-ident&gt;</code> et un <code>&lt;integer&gt;</code> séparés par un espace</li>
- <li>ou le mot-clé <code>span</code> avec une valeur <code>&lt;custom-ident&gt;</code> ou un <code>&lt;integer&gt;</code> ou les deux.</li>
-</ul>
+- le mot-clé `auto`
+- ou une valeur `<custom-ident>`
+- ou une valeur `<integer>`
+- ou une valeur `<custom-ident>` et un `<integer>` séparés par un espace
+- ou le mot-clé `span` avec une valeur `<custom-ident>` ou un `<integer>` ou les deux.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
- <dt><code>&lt;custom-ident&gt;</code></dt>
- <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start'/'&lt;custom-ident&gt;-end', la première colonne correspondante contribue au placement de l'élément sur la grille.
- <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p></div>
+- `auto`
+  - : Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (_span_) automatique ou une taille par défaut de `1`.
+- `<custom-ident>`
 
- <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
- </dd>
- <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
- <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
- <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+  - : S'il existe une ligne nommée avec '\<custom-ident>-start'/'\<custom-ident>-end', la première colonne correspondante contribue au placement de l'élément sur la grille.
 
- <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
- </dd>
- <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
- <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
- <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+    > **Note :** Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant `grid-column-start: foo;` cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne `foo-start`/`foo-end` a été explicitement déclarée).
 
- <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
- </dd>
-</dl>
+    Sinon, la valeur est traitée comme si on avait utilisé `<custom-ident>` et la valeur `1`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- `<integer> && <custom-ident>?`
+
+  - : La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+
+    Si un nom est fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.
+
+    Si la valeur entière utilisée est `0`, la règle est invalide.
+
+- `span && [ <integer> || <custom-ident> ]`
+
+  - : Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+
+    Si un nom fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.
+
+    Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera `1`. Les entiers négatifs ou nuls sont invalides.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#grid {
+```css
+#grid {
   display: grid;
   height: 100px;
   grid-template-columns: repeat(6, 1fr);
@@ -107,57 +110,45 @@ grid-column: unset;
 #item3 {
   background-color: blue;
   grid-column: span 2 / 7;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="grid"&gt;
-  &lt;div id="item1"&gt;&lt;/div&gt;
-  &lt;div id="item2"&gt;&lt;/div&gt;
-  &lt;div id="item3"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", "100px")}}</p>
+{{EmbedLiveSample("Exemples", "100%", "100px")}}
 
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+## Prothèse d'émulation (_polyfill_)
 
-<p>IE11 ne prend pas en charge le placement automatique des objets sur la grille.Tous les objets finiront sur la première colonne / ligne si ceux-ci ne sont pas marqués avec les propriétés <code>-ms-</code>{{cssxref("grid-column")}} et <code>-ms-</code>{{cssxref("grid-row")}}. Pour effectuer cette annotation automatiquement, on peut utiliser du JavaScript (cf. <a href="https://github.com/motine/css_grid_annotator">ce dépôt</a>).</p>
+IE11 ne prend pas en charge le placement automatique des objets sur la grille.Tous les objets finiront sur la première colonne / ligne si ceux-ci ne sont pas marqués avec les propriétés `-ms-`{{cssxref("grid-column")}} et `-ms-`{{cssxref("grid-row")}}. Pour effectuer cette annotation automatiquement, on peut utiliser du JavaScript (cf. [ce dépôt](https://github.com/motine/css_grid_annotator)).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.grid-column")}}</p>
+{{Compat("css.properties.grid-column")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("grid-row")}}</li>
- <li>{{cssxref("grid-row-start")}}</li>
- <li>{{cssxref("grid-row-end")}}</li>
- <li>{{cssxref("grid-column-start")}}</li>
- <li>{{cssxref("grid-column-end")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : le placement sur les lignes d'une grille CSS</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li>
-</ul>
+- {{cssxref("grid-row")}}
+- {{cssxref("grid-row-start")}}
+- {{cssxref("grid-row-end")}}
+- {{cssxref("grid-column-start")}}
+- {{cssxref("grid-column-end")}}
+- [Guide : le placement sur les lignes d'une grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+- Tutoriel vidéo : [le placement sur les lignes (en anglais)](https://gridbyexample.com/video/series-line-based-placement/)
diff --git a/files/fr/web/css/grid-row-end/index.md b/files/fr/web/css/grid-row-end/index.md
index 5902383d70..375de17056 100644
--- a/files/fr/web/css/grid-row-end/index.md
+++ b/files/fr/web/css/grid-row-end/index.md
@@ -7,25 +7,26 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-row-end
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-row-end</code></strong> définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de ligne donné.</p>
+La propriété **`grid-row-end`** définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de ligne donné.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-row-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-row-end.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 grid-row-end: auto;
 
-/* Valeurs &lt;custom-ident&gt; */
+/* Valeurs <custom-ident> */
 grid-row-end: somegridarea;
 
-/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs <integer> + <custom-ident> */
 grid-row-end: 2;
 grid-row-end: somegridarea 4;
 
-/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs span + <integer> + <custom-ident> */
 grid-row-end: span 3;
 grid-row-end: span somegridarea;
 grid-row-end: 5 somegridarea span;
@@ -34,49 +35,54 @@ grid-row-end: 5 somegridarea span;
 grid-row-end: inherit;
 grid-row-end: initial;
 grid-row-end: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut <code>1</code> s'il n'y a pas d'autres contraintes.</dd>
- <dt><code>&lt;custom-ident&gt;</code></dt>
- <dd>S'il existe une ligne nommée '&lt;custom-ident&gt;-end', cela placera l'élément sur la première ligne correspondante..
- <div class="note"><p><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, <code>grid-row-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec <code>foo-end</code>).</p></div>
+- `auto`
+  - : Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut `1` s'il n'y a pas d'autres contraintes.
+- `<custom-ident>`
 
- <p>Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <code>&lt;custom-ident&gt;</code> (cf. définition suivante).</p>
+  - : S'il existe une ligne nommée '\<custom-ident>-end', cela placera l'élément sur la première ligne correspondante..
 
- <p><code>&lt;custom-ident</code><code>&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
- </dd>
- <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
- <dd>Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position.
- <p>Un entier nul ne peut pas être utilisé (la règle est invalide).</p>
- </dd>
- <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
- <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord situé au début.
- <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+    > **Note :** Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, `grid-row-end: foo;` permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec `foo-end`).
 
- <p>Si &lt;integer&gt; est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.</p>
- </dd>
-</dl>
+    Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    ` <custom-ident``> ` ne peut pas prendre la valeur `span`.
+
+- `<integer> && <custom-ident>?`
+
+  - : Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour \<custom-ident>, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position.
+
+    Un entier nul ne peut pas être utilisé (la règle est invalide).
+
+- `span && [ <integer> || <custom-ident> ]`
+
+  - : Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord situé au début.
+
+    Si un nom fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.
+
+    Si \<integer> est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;One&lt;/div&gt;
-  &lt;div class="box2"&gt;Two&lt;/div&gt;
-  &lt;div class="box3"&gt;Three&lt;/div&gt;
-  &lt;div class="box4"&gt;Four&lt;/div&gt;
-  &lt;div class="box5"&gt;Five&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
@@ -94,9 +100,10 @@ grid-row-end: unset;
   grid-row-start: 3;
   grid-row-end: 5;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -104,7 +111,7 @@ grid-row-end: unset;
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
@@ -118,43 +125,28 @@ grid-row-end: unset;
   background-color: #fff9db;
   padding: 1em;
 }
-</pre>
-
-<p>{{EmbedLiveSample('Exemples', '230', '420')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row-end", "grid-row-end")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-row-end")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-row-start")}}</li>
- <li>{{cssxref("grid-row")}}</li>
- <li>{{cssxref("grid-column-start")}}</li>
- <li>{{cssxref("grid-column-end")}}</li>
- <li>{{cssxref("grid-column")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li>
-</ul>
+```
+
+{{EmbedLiveSample('Exemples', '230', '420')}}
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires        |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-row-end", "grid-row-end")}} | {{Spec2("CSS3 Grid")}} | Définition initiale |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-row-end")}}
+
+## Voir aussi
+
+- {{cssxref("grid-row-start")}}
+- {{cssxref("grid-row")}}
+- {{cssxref("grid-column-start")}}
+- {{cssxref("grid-column-end")}}
+- {{cssxref("grid-column")}}
+- [Guide : Placer les éléments d'une grille sur les lignes](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+- Tutoriel vidéo : [le placement des éléments d'une grille sur les lignes (en anglais)](https://gridbyexample.com/video/series-line-based-placement/)
diff --git a/files/fr/web/css/grid-row-start/index.md b/files/fr/web/css/grid-row-start/index.md
index f39fc139e1..0c5fe98a34 100644
--- a/files/fr/web/css/grid-row-start/index.md
+++ b/files/fr/web/css/grid-row-start/index.md
@@ -7,25 +7,24 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-row-start
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-row-start</code></strong> définit le début de la position, sur une ligne, d'un élément placé sur la grille qui participe à une ligne, à un fragment de ligne ou rien (automatique). Par conséquent, cela définit également le début de la zone de la grille pour cet élément.</p>
+La propriété **`grid-row-start`** définit le début de la position, sur une ligne, d'un élément placé sur la grille qui participe à une ligne, à un fragment de ligne ou rien (automatique). Par conséquent, cela définit également le début de la zone de la grille pour cet élément.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}</div
+{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 grid-row-start: auto;
 
-/* Valeurs &lt;custom-ident&gt;*/
+/* Valeurs <custom-ident>*/
 grid-row-start: unezonedegrille;
 
-/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs <integer> + <custom-ident> */
 grid-row-start: 2;
 grid-row-start: unezonedegrille 4;
 
-/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs span + <integer> + <custom-ident> */
 grid-row-start: span 3;
 grid-row-start: span unezonedegrille;
 grid-row-start: 5 unezonedegrille span;
@@ -34,61 +33,64 @@ grid-row-start: 5 unezonedegrille span;
 grid-row-start: inherit;
 grid-row-start: initial;
 grid-row-start: unset;
-</pre>
+```
+
+La valeur de cette propriété prend la forme d'une seule valeur `<grid-line>`. Une telle valeur peut être définie avec :
+
+- le mot-clé `auto`
+- ou une valeur `<custom-ident>`
+- ou une valeur `<integer>`
+- ou une valeur `<custom-ident>` et un `<integer>` séparés par un espace
+- ou le mot-clé `span` avec une valeur `<custom-ident>` ou un `<integer>` ou les deux.
+
+### Valeurs
+
+- `auto`
+  - : Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (_span_) automatique ou une taille par défaut de `1`.
+- `<custom-ident>`
+
+  - : S'il existe une ligne nommée avec '\<custom-ident>-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
+
+    > **Note :** Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant `grid-row-start: foo;` cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne `foo-start` a été explicitement déclarée).
+
+    Sinon, la valeur est traitée comme si on avait utilisé `<custom-ident>` et la valeur `1`.
+
+- `<integer> && <custom-ident>?`
 
-<p>La valeur de cette propriété prend la forme d'une seule valeur <code>&lt;grid-line&gt;</code>. Une telle valeur peut être définie avec :</p>
+  - : La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
 
-<ul>
- <li>le mot-clé <code>auto</code></li>
- <li>ou une valeur <code>&lt;custom-ident&gt;</code></li>
- <li>ou une valeur <code>&lt;integer&gt;</code></li>
- <li>ou une valeur <code>&lt;custom-ident&gt;</code> et un <code>&lt;integer&gt;</code> séparés par un espace</li>
- <li>ou le mot-clé <code>span</code> avec une valeur <code>&lt;custom-ident&gt;</code> ou un <code>&lt;integer&gt;</code> ou les deux.</li>
-</ul>
+    Si un nom est fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.
 
-<h3 id="Valeurs">Valeurs</h3>
+    Si la valeur entière utilisée est `0`, la règle est invalide.
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
- <dt><code>&lt;custom-ident&gt;</code></dt>
- <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
- <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p></div>
+- `span && [ <integer> || <custom-ident> ]`
 
- <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
- </dd>
- <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
- <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
- <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+  - : Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
 
- <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
- </dd>
- <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
- <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
- <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+    Si un nom fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.
 
- <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+    Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera `1`. Les entiers négatifs ou nuls sont invalides.
 
- <p><code>&lt;custom-ident</code><code>&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
- </dd>
-</dl>
+    ` <custom-ident``> ` ne peut pas prendre la valeur `span`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;One&lt;/div&gt;
-  &lt;div class="box2"&gt;Two&lt;/div&gt;
-  &lt;div class="box3"&gt;Three&lt;/div&gt;
-  &lt;div class="box4"&gt;Four&lt;/div&gt;
-  &lt;div class="box5"&gt;Five&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
@@ -106,9 +108,10 @@ grid-row-start: unset;
   grid-row-start: 3;
   grid-row-end: 5;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -116,7 +119,7 @@ grid-row-start: unset;
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
@@ -130,43 +133,28 @@ grid-row-start: unset;
   background-color: #fff9db;
   padding: 1em;
 }
-</pre>
-
-<p>{{ EmbedLiveSample('Exemples', '230', '420') }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row-start", "grid-row-start")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-row-start")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-row-end")}}</li>
- <li>{{cssxref("grid-row")}}</li>
- <li>{{cssxref("grid-column-start")}}</li>
- <li>{{cssxref("grid-column-end")}}</li>
- <li>{{cssxref("grid-column")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li>
-</ul>
+```
+
+{{ EmbedLiveSample('Exemples', '230', '420') }}
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-row-start", "grid-row-start")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-row-start")}}
+
+## Voir aussi
+
+- {{cssxref("grid-row-end")}}
+- {{cssxref("grid-row")}}
+- {{cssxref("grid-column-start")}}
+- {{cssxref("grid-column-end")}}
+- {{cssxref("grid-column")}}
+- [Guide : Placer les éléments d'une grille sur les lignes](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+- Tutoriel vidéo : [le placement des éléments d'une grille sur les lignes (en anglais)](https://gridbyexample.com/video/series-line-based-placement/)
diff --git a/files/fr/web/css/grid-row/index.md b/files/fr/web/css/grid-row/index.md
index f4c5b0b205..32f43ef64b 100644
--- a/files/fr/web/css/grid-row/index.md
+++ b/files/fr/web/css/grid-row/index.md
@@ -7,29 +7,30 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-row
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-row</code></strong> est une propriété raccourcie pour {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.</p>
+La propriété **`grid-row`** est une propriété raccourcie pour {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-row.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-row.html")}}
 
-<p>Si deux valeurs <strong>&lt;grid-line&gt;</strong> sont utilisées pour la propriété, la valeur de <strong><code>grid-row-start</code></strong> sera définie avec la première valeur avant la barre oblique et la valeur de <strong><code>grid-row-end</code></strong> sera définie avec celle qui est située après la barre oblique.</p>
+Si deux valeurs **\<grid-line>** sont utilisées pour la propriété, la valeur de **`grid-row-start`** sera définie avec la première valeur avant la barre oblique et la valeur de **`grid-row-end`** sera définie avec celle qui est située après la barre oblique.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 grid-row: auto;
 grid-row: auto / auto;
 
-/* Valeurs &lt;custom-ident&gt; */
+/* Valeurs <custom-ident> */
 grid-row: unezonedegrille;
 grid-row: unezonedegrille / unezonedegrille;
 
-/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs <integer> + <custom-ident> */
 grid-row: unezonedegrille 4;
 grid-row: 4 unezonedegrille / 6;
 
-/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+/* Valeurs span + <integer> + <custom-ident> */
 grid-row: span 3;
 grid-row: span unezonedegrille;
 grid-row: 5 unezonedegrille span;
@@ -41,42 +42,46 @@ grid-row: 5 unezonedegrille span / 2 span;
 grid-row: inherit;
 grid-row: initial;
 grid-row: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
- <dt><code>&lt;custom-ident&gt;</code></dt>
- <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start'/'&lt;custom-ident&gt;-end', la première ligne correspondante contribue au placement de l'élément sur la grille.
- <div class="note"><p><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p></div>
+- `auto`
+  - : Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (_span_) automatique ou une taille par défaut de `1`.
+- `<custom-ident>`
 
- <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
- </dd>
- <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
- <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
- <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+  - : S'il existe une ligne nommée avec '\<custom-ident>-start'/'\<custom-ident>-end', la première ligne correspondante contribue au placement de l'élément sur la grille.
 
- <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
- </dd>
- <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
- <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
- <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+    > **Note :** Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant `grid-row-start: foo;` cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne `foo-start`/`foo-end` a été explicitement déclarée).
 
- <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
- </dd>
-</dl>
+    Sinon, la valeur est traitée comme si on avait utilisé `<custom-ident>` et la valeur `1`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- `<integer> && <custom-ident>?`
+
+  - : La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+
+    Si un nom est fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.
+
+    Si la valeur entière utilisée est `0`, la règle est invalide.
+
+- `span && [ <integer> || <custom-ident> ]`
+
+  - : Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+
+    Si un nom fourni pour \<custom-ident>, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.
+
+    Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera `1`. Les entiers négatifs ou nuls sont invalides.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#grid {
+```css
+#grid {
   display: grid;
   height: 200px;
   grid-template-columns: 200px;
@@ -96,53 +101,40 @@ grid-row: unset;
   background-color: blue;
   grid-row: span 2 / 7;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="grid"&gt;
-  &lt;div id="item1"&gt;&lt;/div&gt;
-  &lt;div id="item2"&gt;&lt;/div&gt;
-  &lt;div id="item3"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "200px", "200px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row", "grid-row")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-row")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-row-start")}}</li>
- <li>{{cssxref("grid-row-end")}}</li>
- <li>{{cssxref("grid-column")}}</li>
- <li>{{cssxref("grid-column-start")}}</li>
- <li>{{cssxref("grid-column-end")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li>
-</ul>
+```
+
+### HTML
+
+```html
+<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "200px", "200px")}}
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-row", "grid-row")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-row")}}
+
+## Voir aussi
+
+- {{cssxref("grid-row-start")}}
+- {{cssxref("grid-row-end")}}
+- {{cssxref("grid-column")}}
+- {{cssxref("grid-column-start")}}
+- {{cssxref("grid-column-end")}}
+- [Guide : Placer les éléments d'une grille sur les lignes](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+- Tutoriel vidéo : [le placement des éléments d'une grille sur les lignes (en anglais)](https://gridbyexample.com/video/series-line-based-placement/)
diff --git a/files/fr/web/css/grid-template-areas/index.md b/files/fr/web/css/grid-template-areas/index.md
index f773ecdb67..dfca09d8a0 100644
--- a/files/fr/web/css/grid-template-areas/index.md
+++ b/files/fr/web/css/grid-template-areas/index.md
@@ -7,21 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-template-areas
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-template-areas</code></strong> permet de définir des zones de grille nommées.</p>
+La propriété **`grid-template-areas`** permet de définir des zones de grille nommées.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}
 
-<p>Ces zones ne sont pas associées à un objet de la grille mais peuvent être utilisées avec les propriétés de placement : {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} et les méthodes de raccourci correspondantes {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.</p>
+Ces zones ne sont pas associées à un objet de la grille mais peuvent être utilisées avec les propriétés de placement : {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} et les méthodes de raccourci correspondantes {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 grid-template-areas: none;
 
 /* Valeurs de chaînes */
-/* Type &lt;string&gt;      */
+/* Type <string>      */
 grid-template-areas: "a b";
 grid-template-areas: "a b b"
                      "a c d";
@@ -30,35 +31,36 @@ grid-template-areas: "a b b"
 grid-template-areas: inherit;
 grid-template-areas: initial;
 grid-template-areas: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Le conteneur de grille ne définit aucune zone de grille nommée.</dd>
- <dt><code>&lt;string&gt;+</code></dt>
- <dd>Un ligne est créée pour chaque chaîne. Une colonne est créée pour chaque composant de la chaîne de caractères. Si on a un même composant réutilisé sur différentes lignes, cela créera une cellule sur les différentes lignes et colonnes. Il est nécessaire que ces cellules forment un rectangle, sinon, la déclaration est invalide. Voir {{cssxref("&lt;string&gt;")}} pour plus d'informations sur les valeurs de ce type.</dd>
-</dl>
+- `none`
+  - : Le conteneur de grille ne définit aucune zone de grille nommée.
+- `<string>+`
+  - : Un ligne est créée pour chaque chaîne. Une colonne est créée pour chaque composant de la chaîne de caractères. Si on a un même composant réutilisé sur différentes lignes, cela créera une cellule sur les différentes lignes et colonnes. Il est nécessaire que ces cellules forment un rectangle, sinon, la déclaration est invalide. Voir {{cssxref("&lt;string&gt;")}} pour plus d'informations sur les valeurs de ce type.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;section id="page"&gt;
-  &lt;header&gt;En-tête&lt;/header&gt;
-  &lt;nav&gt;Navigation&lt;/nav&gt;
-  &lt;main&gt;Zone principale&lt;/main&gt;
-  &lt;footer&gt;Pied de page&lt;/footer&gt;
-&lt;/section&gt;</pre>
+```html
+<section id="page">
+  <header>En-tête</header>
+  <nav>Navigation</nav>
+  <main>Zone principale</main>
+  <footer>Pied de page</footer>
+</section>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">#page {
+```css
+#page {
   display: grid;
   width: 100%;
   height: 250px;
@@ -69,62 +71,47 @@ grid-template-areas: unset;
   grid-template-columns: 150px 1fr;
 }
 
-#page &gt; header {
+#page > header {
   grid-area: head;
   background-color: #8ca0ff;
 }
 
-#page &gt; nav {
+#page > nav {
   grid-area: nav;
   background-color: #ffa08c;
 }
 
-#page &gt; main {
+#page > main {
   grid-area: main;
   background-color: #ffff64;
 }
 
-#page &gt; footer {
+#page > footer {
   grid-area: foot;
   background-color: #8cffa0;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemple", "100%", "250px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-template-areas")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-template-rows")}}</li>
- <li>{{cssxref("grid-template-columns")}}</li>
- <li>{{cssxref("grid-template")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Guide : les zones des grilles CSS</a></li>
- <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-areas/">les zones des grilles CSS (en anglais)</a></li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemple", "100%", "250px")}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-template-areas")}}
+
+## Voir aussi
+
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template")}}
+- [Guide : les zones des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille)
+- Tutoriel vidéo : [les zones des grilles CSS (en anglais)](http://gridbyexample.com/video/grid-template-areas/)
diff --git a/files/fr/web/css/grid-template-columns/index.md b/files/fr/web/css/grid-template-columns/index.md
index 6900f77183..a49dea50f8 100644
--- a/files/fr/web/css/grid-template-columns/index.md
+++ b/files/fr/web/css/grid-template-columns/index.md
@@ -7,18 +7,19 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-template-columns
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-template-columns</code></strong> définit les noms des lignes et les fonctions de taille (<em>track sizing</em>) pour les colonnes de la grille.</p>
+La propriété **`grid-template-columns`** définit les noms des lignes et les fonctions de taille (_track sizing_) pour les colonnes de la grille.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 grid-template-columns: none;
 
-/* Valeurs &lt;track-list&gt; */
+/* Valeurs <track-list> */
 grid-template-columns: 100px 1fr;
 grid-template-columns: [linename] 100px;
 grid-template-columns: [linename1] 100px [linename2 linename3];
@@ -26,7 +27,7 @@ grid-template-columns: minmax(100px, 1fr);
 grid-template-columns: fit-content(40%);
 grid-template-columns: repeat(3, 200px);
 
-/* Valeurs &lt;auto-track-list&gt; */
+/* Valeurs <auto-track-list> */
 grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
 grid-template-columns: minmax(100px, max-content)
                        repeat(auto-fill, 200px) 20%;
@@ -40,45 +41,49 @@ grid-template-columns: [linename1 linename2] 100px
 grid-template-columns: inherit;
 grid-template-columns: initial;
 grid-template-columns: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle colonne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-columns")}}.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un longueur positive. Voir {{cssxref("&lt;length&gt;")}}.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage positif (type {{cssxref("&lt;percentage&gt;")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme <code>auto</code>.</dd>
- <dt><code>&lt;flex&gt;</code></dt>
- <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
- <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>). Voir {{cssxref("&lt;flex&gt;")}}.</p>
- </dd>
- <dt><code>max-content</code></dt>
- <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
- <dt><code>min-content</code></dt>
- <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
- <dt>{{cssxref("minmax()","minmax(min, max)")}}</dt>
- <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div>
- </dd>
- <dt>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
- <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd>
- <dt>{{cssxref("repeat()","repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ], &lt;track-list&gt; )")}}</dt>
- <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `none`
+  - : Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle colonne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-columns")}}.
+- `<length>`
+  - : Un longueur positive. Voir {{cssxref("&lt;length&gt;")}}.
+- `<percentage>`
+  - : Un pourcentage positif (type {{cssxref("&lt;percentage&gt;")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme `auto`.
+- `<flex>`
+
+  - : Une dimension positive dont l'unité `fr` indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec `<flex>` occupera une partie de l'espace restant en fonction de ce facteur.
+
+    Lorsque cette valeur apparaît en dehors de la notation `minmax()`, la valeur minimale `auto` est implicite (la valeur signifie `minmax(auto, <flex>)`). Voir {{cssxref("&lt;flex&gt;")}}.
+
+- `max-content`
+  - : Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
+- `min-content`
+  - : Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.
+- {{cssxref("minmax()","minmax(min, max)")}}
+  - : Une notation fonctionnelle qui définit un intervalle de taille entre `min` et `max`. Si `max` est inférieur à `min`, `max` est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur `<flex>` qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum.
+- `auto`
+
+  - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
+
+    > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
+
+- {{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
+  - : Cette notation représente la formule `min(max-content, max(auto, argument))` qui est calculée comme pour `auto` (i.e. `minmax(auto, max-content)`) sauf que la taille de la piste est ramenée à _argument_ si elle est plus grande que le minimum fourni par `auto`.
+- {{cssxref("repeat()","repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ], &lt;track-list&gt; )")}}
+  - : Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">#grid {
+```css
+#grid {
   display: grid;
   width: 100%;
   grid-template-columns: 50px 1fr;
@@ -90,50 +95,38 @@ grid-template-columns: unset;
 
 #areaB {
   background-color: yellow;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="grid"&gt;
-  &lt;div id="areaA"&gt;A&lt;/div&gt;
-  &lt;div id="areaB"&gt;B&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", "20px")}}</p>
+{{EmbedLiveSample("Exemples", "100%", "20px")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.grid-template-columns")}}</p>
+{{Compat("css.properties.grid-template-columns")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("grid-template-rows")}}</li>
- <li>{{cssxref("grid-template-areas")}}</li>
- <li>{{cssxref("grid-template")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li>
-</ul>
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-template-areas")}}
+- {{cssxref("grid-template")}}
+- [Guide : les concepts de base pour les grilles CSS : les pistes](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes)
+- Tutoriel vidéo : [définir une grille (en anglais)](https://gridbyexample.com/video/series-define-a-grid/)
diff --git a/files/fr/web/css/grid-template-rows/index.md b/files/fr/web/css/grid-template-rows/index.md
index 7fd43b2d89..da2ad96e78 100644
--- a/files/fr/web/css/grid-template-rows/index.md
+++ b/files/fr/web/css/grid-template-rows/index.md
@@ -7,19 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-template-rows
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-template-rows</code></strong> définit les noms des lignes et les fonctions de taille (<em>track sizing</em>) pour les lignes de la grille.</p>
+La propriété **`grid-template-rows`** définit les noms des lignes et les fonctions de taille (_track sizing_) pour les lignes de la grille.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 grid-template-rows: none;
 
 /* Valeurs avec une liste de pistes */
-/* Type &lt;track-list&gt;                */
+/* Type <track-list>                */
 grid-template-rows: 100px 1fr;
 grid-template-rows: [linename] 100px;
 grid-template-rows: [linename1] 100px [linename2 linename3];
@@ -27,7 +28,7 @@ grid-template-rows: minmax(100px, 1fr);
 grid-template-rows: fit-content(40%);
 grid-template-rows: repeat(3, 200px);
 
-/* Valeurs &lt;auto-track-list&gt; */
+/* Valeurs <auto-track-list> */
 grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
 grid-template-rows: minmax(100px, max-content)
                        repeat(auto-fill, 200px) 20%;
@@ -42,47 +43,51 @@ grid-template-rows: [linename1 linename2] 100px
 grid-template-rows: inherit;
 grid-template-rows: initial;
 grid-template-rows: unset;
-</pre>
-
-<p>Cette propriété peut être définie avec le mot-clé <code>none</code> ou avec une valeur de type <code>&lt;track-list&gt;</code> ou avec une valeur de type <code>&lt;auto-track-list&gt;</code>.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle ligne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-rows")}}.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un longueur positive (type {{cssxref("&lt;length&gt;")}}).</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage positif (type {{cssxref("&lt;percentage&gt;")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme <code>auto</code>.</dd>
- <dt><code>&lt;flex&gt;</code></dt>
- <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
- <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>). Voir {{cssxref("&lt;flex_value&gt;")}}.</p>
- </dd>
- <dt><code>max-content</code></dt>
- <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
- <dt><code>min-content</code></dt>
- <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
- <dt>{{cssxref("minmax()", "minmax(min, max)")}}</dt>
- <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. Cette notation est invalide en tant que minimum.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. <div class="note"><p><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p></div>
- </dd>
- <dt>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
- <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd>
- <dt>{{cssxref("repeat()","repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ], &lt;track-list&gt; )")}}</dt>
- <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses lignes pour lesquelles on réutilise un motif.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Cette propriété peut être définie avec le mot-clé `none` ou avec une valeur de type `<track-list>` ou avec une valeur de type `<auto-track-list>`.
+
+### Valeurs
+
+- `none`
+  - : Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle ligne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-rows")}}.
+- `<length>`
+  - : Un longueur positive (type {{cssxref("&lt;length&gt;")}}).
+- `<percentage>`
+  - : Un pourcentage positif (type {{cssxref("&lt;percentage&gt;")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme `auto`.
+- `<flex>`
+
+  - : Une dimension positive dont l'unité `fr` indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec `<flex>` occupera une partie de l'espace restant en fonction de ce facteur.
+
+    Lorsque cette valeur apparaît en dehors de la notation `minmax()`, la valeur minimale `auto` est implicite (la valeur signifie `minmax(auto, <flex>)`). Voir {{cssxref("&lt;flex_value&gt;")}}.
+
+- `max-content`
+  - : Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
+- `min-content`
+  - : Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.
+- {{cssxref("minmax()", "minmax(min, max)")}}
+  - : Une notation fonctionnelle qui définit un intervalle de taille entre `min` et `max`. Si `max` est inférieur à `min`, `max` est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur `<flex>` qui définit le facteur de flexibilité de la piste. Cette notation est invalide en tant que minimum.
+- `auto`
+
+  - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.
+
+    > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
+
+- {{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
+  - : Cette notation représente la formule `min(max-content, max(auto, argument))` qui est calculée comme pour `auto` (i.e. `minmax(auto, max-content)`) sauf que la taille de la piste est ramenée à _argument_ si elle est plus grande que le minimum fourni par `auto`.
+- {{cssxref("repeat()","repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ], &lt;track-list&gt; )")}}
+  - : Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses lignes pour lesquelles on réutilise un motif.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">#grid {
+```css
+#grid {
   display: grid;
   height: 100px;
   grid-template-rows: 30px 1fr;
@@ -94,50 +99,38 @@ grid-template-rows: unset;
 
 #areaB {
   background-color: yellow;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="grid"&gt;
-  &lt;div id="areaA"&gt;A&lt;/div&gt;
-  &lt;div id="areaB"&gt;B&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "40px", "100px")}}</p>
+{{EmbedLiveSample("Exemples", "40px", "100px")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.grid-template-rows")}}</p>
+{{Compat("css.properties.grid-template-rows")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("grid-template-columns")}}</li>
- <li>{{cssxref("grid-template-areas")}}</li>
- <li>{{cssxref("grid-template")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li>
-</ul>
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-areas")}}
+- {{cssxref("grid-template")}}
+- [Guide : les concepts de base pour les grilles CSS : les pistes](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes)
+- Tutoriel vidéo : [définir une grille (en anglais)](https://gridbyexample.com/video/series-define-a-grid/)
diff --git a/files/fr/web/css/grid-template/index.md b/files/fr/web/css/grid-template/index.md
index 55dceb4931..24be99d5ae 100644
--- a/files/fr/web/css/grid-template/index.md
+++ b/files/fr/web/css/grid-template/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/grid-template
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>grid-template</code></strong> est une <a href="/fr/docs/Web/CSS/Shorthand_properties">propriété raccourcie</a> permettant de définir les colonnes, grilles et zones d'une grille.</p>
+La propriété **`grid-template`** est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) permettant de définir les colonnes, grilles et zones d'une grille.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-template.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-template.html")}}
 
-<p>Les propriétés détaillées sont {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}.</p>
+Les propriétés détaillées sont {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 grid-template: none;
 
 /* Valeurs utilisant grid-template-rows / grid-template-columns */
@@ -39,32 +40,32 @@ grid-template: [header-top] "a a a"     [header-bottom]
 grid-template: inherit;
 grid-template: initial;
 grid-template: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Un mot-clé qui applique <code>none</code> sur les trois propriétés détaillées et qui indique qu'il n'y a pas de grille explicite. Il n'y a pas de zone de grille nommée. Les lignes et les colonnes seront générées de façon implicite et leurs tailles seront déterminées par les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.</dd>
- <dt><code>&lt;'grid-template-rows'&gt; / &lt;'grid-template-columns'&gt;</code></dt>
- <dd>Voir {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}} pour les valeurs définies. {{cssxref("grid-template-areas")}} recevra la valeur <code>none</code>.</dd>
- <dt><code>[ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ / &lt;track-list&gt; ]?</code></dt>
- <dd>{{cssxref("grid-template-areas")}} est définie avec les chaînes listées, {{cssxref("grid-template-rows")}} est définie avec les tailles de piste suivant chaque chaîne (<code>auto</code> sera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille. {{cssxref("grid-template-columns")}} sera définie avec la valeur listée après la barre oblique (ou <code>none</code> sinon).
- <div class="note"><p><strong>Note :</strong> La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).</p></div>
- </dd>
-</dl>
+- `none`
+  - : Un mot-clé qui applique `none` sur les trois propriétés détaillées et qui indique qu'il n'y a pas de grille explicite. Il n'y a pas de zone de grille nommée. Les lignes et les colonnes seront générées de façon implicite et leurs tailles seront déterminées par les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.
+- `<'grid-template-rows'> / <'grid-template-columns'>`
+  - : Voir {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}} pour les valeurs définies. {{cssxref("grid-template-areas")}} recevra la valeur `none`.
+- `[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <track-list> ]?`
 
-<div class="note"><p><strong>Note :</strong> La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser <code>grid</code> (plutôt que <code>grid-template</code>) pour empêcher les valeurs de suivre la cascade de façon séparée.</p></div>
+  - : {{cssxref("grid-template-areas")}} est définie avec les chaînes listées, {{cssxref("grid-template-rows")}} est définie avec les tailles de piste suivant chaque chaîne (`auto` sera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille. {{cssxref("grid-template-columns")}} sera définie avec la valeur listée après la barre oblique (ou `none` sinon).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    > **Note :** La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).
+
+> **Note :** La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser `grid` (plutôt que `grid-template`) pour empêcher les valeurs de suivre la cascade de façon séparée.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">#page {
+```css
+#page {
   display: grid;
   width: 100%;
   height: 200px;
@@ -92,53 +93,41 @@ main {
 footer {
   background-color: red;
   grid-column: foot;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush:html">&lt;section id="page"&gt;
-  &lt;header&gt;En-tête&lt;/header&gt;
-  &lt;nav&gt;Navigation&lt;/nav&gt;
-  &lt;main&gt;Zone principale&lt;/main&gt;
-  &lt;footer&gt;Bas de page&lt;/footer&gt;
-&lt;/section&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%", "200px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-template")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-template-rows")}}</li>
- <li>{{cssxref("grid-template-areas")}}</li>
- <li>{{cssxref("grid-template-columns")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#les_propri%c3%a9t%c3%a9s_raccourcies_pour_les_grilles_css">Guide : Les zones de grilles et les propriétés raccourcies</a></li>
- <li>Tutoriel vidéo : <a href="https://gridbyexample.com/video/grid-template-shorthand/">les propriétés raccourcies pour les zones de grille (en anglais)</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<section id="page">
+  <header>En-tête</header>
+  <nav>Navigation</nav>
+  <main>Zone principale</main>
+  <footer>Bas de page</footer>
+</section>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%", "200px")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-template")}}
+
+## Voir aussi
+
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-template-areas")}}
+- {{cssxref("grid-template-columns")}}
+- [Guide : Placer les éléments d'une grille sur les lignes](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+- [Guide : Les zones de grilles et les propriétés raccourcies](/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#les_propri%c3%a9t%c3%a9s_raccourcies_pour_les_grilles_css)
+- Tutoriel vidéo : [les propriétés raccourcies pour les zones de grille (en anglais)](https://gridbyexample.com/video/grid-template-shorthand/)
diff --git a/files/fr/web/css/grid/index.md b/files/fr/web/css/grid/index.md
index 721ff66aa8..f895ea8928 100644
--- a/files/fr/web/css/grid/index.md
+++ b/files/fr/web/css/grid/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/grid
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>grid</strong></code> est une propriété raccourcie qui permet de définir toutes les propriétés liées aux grilles CSS, qu'elles soient explicites ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}), implicites ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} et {{cssxref("grid-auto-flow")}}).</p>
+La propriété **`grid`** est une propriété raccourcie qui permet de définir toutes les propriétés liées aux grilles CSS, qu'elles soient explicites ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}), implicites ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} et {{cssxref("grid-auto-flow")}}).
 
-<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid.html")}}
 
-<div class="note">
-  <p><strong>Note :</strong> Une seule déclaration <code>grid</code> permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.</p>
-</div>
+> **Note :** Une seule déclaration `grid` permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs &lt;'grid-template'&gt; */
+```css
+/* Valeurs <'grid-template'> */
 grid: none;
 grid: "a" 100px "b" 1fr;
 grid: [linename1] "a" 100px [linename2];
@@ -28,15 +27,15 @@ grid: "a" minmax(100px, max-content) "b" 20%;
 grid: 100px / 200px;
 grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
 
-/* &lt;'grid-template-rows'&gt; /
-   [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;? values */
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
 grid: 200px / auto-flow;
 grid: 30% / auto-flow dense;
 grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
 grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
 
-/* [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? /
-   &lt;'grid-template-columns'&gt; values */
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> values */
 grid: auto-flow / 200px;
 grid: auto-flow dense / 30%;
 grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
@@ -45,94 +44,82 @@ grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
 /* Valeurs globales */
 grid: inherit;
 grid: initial;
-grid: unset;</pre>
+grid: unset;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Pour plus de détails, voir les pages de chacune des propriétés : {{cssxref("grid-template")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}.</p>
+Pour plus de détails, voir les pages de chacune des propriétés : {{cssxref("grid-template")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}.
 
-<dl>
- <dt><code>&lt;'grid-template'&gt;</code></dt>
- <dd>Définit {{cssxref("grid-template")}}, ce qui inclut {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-areas")}}.</dd>
- <dt><code>&lt;'grid-auto-flow'&gt;</code></dt>
- <dd>Définit {{cssxref("grid-auto-flow")}} qui indique le fonctionnement de l'algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.</dd>
- <dt><code>&lt;'grid-auto-rows'&gt;</code></dt>
- <dd>Définit {{cssxref("grid-auto-rows")}} qui indique la taille des pistes créées pour les lignes de façon implicite.</dd>
- <dt><code>&lt;'grid-auto-columns'&gt;</code></dt>
- <dd>Définit {{cssxref("grid-auto-columns")}} qui indique la taille des pistes créées pour les colonnes de façon implicite.</dd>
-</dl>
+- `<'grid-template'>`
+  - : Définit {{cssxref("grid-template")}}, ce qui inclut {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-areas")}}.
+- `<'grid-auto-flow'>`
+  - : Définit {{cssxref("grid-auto-flow")}} qui indique le fonctionnement de l'algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.
+- `<'grid-auto-rows'>`
+  - : Définit {{cssxref("grid-auto-rows")}} qui indique la taille des pistes créées pour les lignes de façon implicite.
+- `<'grid-auto-columns'>`
+  - : Définit {{cssxref("grid-auto-columns")}} qui indique la taille des pistes créées pour les colonnes de façon implicite.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   display: grid;
   grid: repeat(2, 60px) / auto-flow 80px;
 }
 
-#container &gt; div {
+#container > div {
   background-color: #8ca0ff;
   width: 50px;
   height: 50px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%", 150)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}</td>
-   <td>{{Spec2("CSS3 Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("grid-template")}}</li>
- <li>{{cssxref("grid-template-rows")}}</li>
- <li>{{cssxref("grid-template-columns")}}</li>
- <li>{{cssxref("grid-template-areas")}}</li>
- <li>{{cssxref("grid-auto-columns")}}</li>
- <li>{{cssxref("grid-auto-rows")}}</li>
- <li>{{cssxref("grid-auto-flow")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Guide : Placer les éléments d'une grille sur les lignes</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#les_propri%c3%a9t%c3%a9s_raccourcies_pour_les_grilles_css">Guide : Les zones de grilles et les propriétés raccourcies</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%", 150)}}
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid", "grid")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid")}}
+
+## Voir aussi
+
+- {{cssxref("grid-template")}}
+- {{cssxref("grid-template-rows")}}
+- {{cssxref("grid-template-columns")}}
+- {{cssxref("grid-template-areas")}}
+- {{cssxref("grid-auto-columns")}}
+- {{cssxref("grid-auto-rows")}}
+- {{cssxref("grid-auto-flow")}}
+- [Guide : Placer les éléments d'une grille sur les lignes](/fr/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+- [Guide : Les zones de grilles et les propriétés raccourcies](/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#les_propri%c3%a9t%c3%a9s_raccourcies_pour_les_grilles_css)
diff --git a/files/fr/web/css/hanging-punctuation/index.md b/files/fr/web/css/hanging-punctuation/index.md
index 02e0d2bafc..29e4113d9c 100644
--- a/files/fr/web/css/hanging-punctuation/index.md
+++ b/files/fr/web/css/hanging-punctuation/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/hanging-punctuation
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>hanging-punctuation</code></strong> indique si un signe de ponctuation se situant au début ou à la fin d'une ligne de texte doit rester sur cette ligne, quitte à sortir de la boîte qui représente la ligne.</p>
+La propriété **`hanging-punctuation`** indique si un signe de ponctuation se situant au début ou à la fin d'une ligne de texte doit rester sur cette ligne, quitte à sortir de la boîte qui représente la ligne.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 hanging-punctuation: none;
 hanging-punctuation: first;
 hanging-punctuation: last;
@@ -34,52 +35,46 @@ hanging-punctuation: first allow-end last;
 hanging-punctuation: inherit;
 hanging-punctuation: initial;
 hanging-punctuation: unset;
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Cette propriété peut être définie grâce à une, deux ou trois valeurs :</p>
-
-<ul>
- <li>Avec une valeur : on utilisera l'un des mots-clés de la liste ci-après</li>
- <li>Avec deux valeurs :
-  <ul>
-   <li>le mot-clé <code>first</code> avec un des mots-clés parmi : <code>last</code>, <code>allow-end</code> ou <code>force-end</code></li>
-   <li>ou le mot-clé <code>last</code> avec un des mots-clés parmi : <code>last</code>, <code>allow-end</code> ou <code>force-end</code></li>
-  </ul>
- </li>
- <li>Avec trois valeurs :
-  <ul>
-   <li><code>first</code>, <code>allow-end</code> et <code>last</code></li>
-   <li>ou <code>first</code>, <code>force-end</code> et <code>last</code></li>
-  </ul>
- </li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>Aucun caractère ne reste suspendu sur la ligne.</dd>
- <dt><code>first</code></dt>
- <dd>Une parenthèse ou des guillemets ouvrants au début de la première ligne d'un texte restent sur la ligne.</dd>
- <dt><code>last</code></dt>
- <dd>Une parenthèse ou des guillemets fermants à la fin de la dernière ligne d'un texte restent sur la ligne.</dd>
- <dt><code>force-end</code></dt>
- <dd>Un point ou une virgule en fin de ligne restera sur cette ligne.</dd>
- <dt><code>allow-end</code></dt>
- <dd>Un point ou une virgule en fin de ligne restera sur cette ligne si la justification du texte ne laisse pas l'espace nécessaire.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Syntaxe
+
+Cette propriété peut être définie grâce à une, deux ou trois valeurs :
+
+- Avec une valeur : on utilisera l'un des mots-clés de la liste ci-après
+- Avec deux valeurs :
+
+  - le mot-clé `first` avec un des mots-clés parmi : `last`, `allow-end` ou `force-end`
+  - ou le mot-clé `last` avec un des mots-clés parmi : `last`, `allow-end` ou `force-end`
+
+- Avec trois valeurs :
+
+  - `first`, `allow-end` et `last`
+  - ou `first`, `force-end` et `last`
+
+### Valeurs
+
+- `none`
+  - : Aucun caractère ne reste suspendu sur la ligne.
+- `first`
+  - : Une parenthèse ou des guillemets ouvrants au début de la première ligne d'un texte restent sur la ligne.
+- `last`
+  - : Une parenthèse ou des guillemets fermants à la fin de la dernière ligne d'un texte restent sur la ligne.
+- `force-end`
+  - : Un point ou une virgule en fin de ligne restera sur cette ligne.
+- `allow-end`
+  - : Un point ou une virgule en fin de ligne restera sur cette ligne si la justification du texte ne laisse pas l'espace nécessaire.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Curabitur dignissim nunc
    mauris, et sollicitudin est scelerisque
@@ -88,40 +83,30 @@ hanging-punctuation: unset;
    ornare commodo sodales. Class aptent
    taciti sociosqu ad litora torquent per
    conubia nostra, per inceptos himenaeos.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   hanging-punctuation: first;
   margin: .5rem;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemple')}}</p>
+{{EmbedLiveSample('Exemple')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#hanging-punctuation-property', 'hanging-punctuation')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('CSS3 Text', '#hanging-punctuation-property', 'hanging-punctuation')}} | {{Spec2('CSS3 Text')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.hanging-punctuation")}}</p>
+{{Compat("css.properties.hanging-punctuation")}}
diff --git a/files/fr/web/css/height/index.md b/files/fr/web/css/height/index.md
index e1e0f46885..f1f59aef85 100644
--- a/files/fr/web/css/height/index.md
+++ b/files/fr/web/css/height/index.md
@@ -7,73 +7,72 @@ tags:
   - Reference
 translation_of: Web/CSS/height
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>height</code></strong> définit la hauteur de la boîte de contenu d'un élément. <a href="/fr/docs/CSS/box_model#content">La boîte de contenu</a> est à l'intérieur de la boîte de remplissage (<em>padding</em>) qui est à l'intérieur de la boîte de bordure qui est elle-même à l'intérieur de la boîte de marge de l'élément. Si la propriété {{cssxref("box-sizing")}} vaut <code>border-box</code>, cette propriété détermine la hauteur de <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">la boîte de marge</a>.</p>
+La propriété **`height`** définit la hauteur de la boîte de contenu d'un élément. [La boîte de contenu](/fr/docs/CSS/box_model#content) est à l'intérieur de la boîte de remplissage (_padding_) qui est à l'intérieur de la boîte de bordure qui est elle-même à l'intérieur de la boîte de marge de l'élément. Si la propriété {{cssxref("box-sizing")}} vaut `border-box`, cette propriété détermine la hauteur de [la boîte de marge](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes).
 
-<div>{{EmbedInteractiveExample("pages/css/height.html")}}</div>
+{{EmbedInteractiveExample("pages/css/height.html")}}
 
-<p>Les propriétés {{cssxref("min-height")}} et {{cssxref("max-height")}} surchargent la propriété <code>height</code>.</p>
+Les propriétés {{cssxref("min-height")}} et {{cssxref("max-height")}} surchargent la propriété `height`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 height: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 height: 120px;
 height: 10em;
 
 /* Valeurs relatives proportionnelles  */
-/* Type &lt;percentage&gt;                   */
+/* Type <percentage>                   */
 height: 75%;
 
 /* Valeurs globales */
 height: inherit;
 height: initial;
 height: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de longueur absolue. Voir la page {{cssxref("&lt;length&gt;")}} pour les unités qui peuvent être utilisées.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>La valeur exprimée correspond à un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) de la hauteur du bloc englobant.</dd>
- <dt><code>border-box </code>{{experimental_inline}}</dt>
- <dd>Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de bordure de l'élément.</dd>
- <dt><code>content-box</code> {{experimental_inline}}</dt>
- <dd>Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de contenu de l'élément</dd>
- <dt><code>auto</code></dt>
- <dd>Le navigateur calculera une valeur et sélectionnera une hauteur pour l'élément ciblé.</dd>
- <dt><code>fill</code> {{experimental_inline}}</dt>
- <dd>Utilise la taille <code>fill-available</code> dans l'axe du sens de lecture ou la taille <code>fill-available</code> dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.</dd>
- <dt><code>max-content</code> {{experimental_inline}}</dt>
- <dd>La hauteur intrinsèque préférrée.</dd>
- <dt><code>min-content</code> {{experimental_inline}}</dt>
- <dd>La hauteur intrinsèque minimale.</dd>
- <dt><code>available</code> {{experimental_inline}}</dt>
- <dd>La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (<em>padding</em>) vertical.</dd>
- <dt><code>fit-content</code> {{experimental_inline}}</dt>
- <dd>La plus grande des valeurs entre :
- <ul>
-  <li>La hauteur minimale intrinsèque.</li>
-  <li>Le minimum entre la hauteur intrinsèque préférrée et la hauteur disponible</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+  - : Une valeur de longueur absolue. Voir la page {{cssxref("&lt;length&gt;")}} pour les unités qui peuvent être utilisées.
+- `<percentage>`
+  - : La valeur exprimée correspond à un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) de la hauteur du bloc englobant.
+- `border-box `{{experimental_inline}}
+  - : Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de bordure de l'élément.
+- `content-box` {{experimental_inline}}
+  - : Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de contenu de l'élément
+- `auto`
+  - : Le navigateur calculera une valeur et sélectionnera une hauteur pour l'élément ciblé.
+- `fill` {{experimental_inline}}
+  - : Utilise la taille `fill-available` dans l'axe du sens de lecture ou la taille `fill-available` dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.
+- `max-content` {{experimental_inline}}
+  - : La hauteur intrinsèque préférrée.
+- `min-content` {{experimental_inline}}
+  - : La hauteur intrinsèque minimale.
+- `available` {{experimental_inline}}
+  - : La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (_padding_) vertical.
+- `fit-content` {{experimental_inline}}
+
+  - : La plus grande des valeurs entre :
+
+    - La hauteur minimale intrinsèque.
+    - Le minimum entre la hauteur intrinsèque préférrée et la hauteur disponible
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 250px;
   margin-bottom: 5px;
   border: 3px solid #999999;
@@ -94,82 +93,55 @@ height: unset;
 #child {
   height: 50%;
   width: 75%;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="red"&gt;
-  &lt;span&gt;Je mesure 50 pixels de haut.&lt;/span&gt;
-&lt;/div&gt;
-&lt;div id="green"&gt;
-  &lt;span&gt;Et moi je mesure 25 pixels de haut.&lt;/span&gt;
-&lt;/div&gt;
-&lt;div id="parent"&gt;
-  &lt;div id="child"&gt;
-    &lt;span&gt;Je suis moitié moins haut que mon parent.&lt;/span&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemple')}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>height</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>height</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Ajout de la prise en charge des valeurs de type {{cssxref("&lt;length&gt;")}} et précision sur les éléments auxquels la propriété s'applique.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.height")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li>
- <li>{{cssxref("width")}}</li>
- <li>{{cssxref("box-sizing")}}</li>
- <li>{{cssxref("min-height")}}</li>
- <li>{{cssxref("max-height")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div id="red">
+  <span>Je mesure 50 pixels de haut.</span>
+</div>
+<div id="green">
+  <span>Et moi je mesure 25 pixels de haut.</span>
+</div>
+<div id="parent">
+  <div id="child">
+    <span>Je suis moitié moins haut que mon parent.</span>
+  </div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemple')}}
+
+## Accessibilité
+
+Veiller à s'assurer que les éléments ciblés avec une règle utilisant `height` ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter 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, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                                                                                                                                             |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}         | {{Spec2('CSS3 Sizing')}}         | Ajout des mots-clés `max-content`, `min-content`, `available`, `fit-content`.                                                                            |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}             | {{Spec2('CSS3 Transitions')}} | `height` peut désormais être animée.                                                                                                                     |
+| {{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}} | {{Spec2('CSS2.1')}}                 | Ajout de la prise en charge des valeurs de type {{cssxref("&lt;length&gt;")}} et précision sur les éléments auxquels la propriété s'applique. |
+| {{SpecName('CSS1', '#height', 'height')}}                                     | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                     |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.height")}}
+
+## Voir aussi
+
+- [Le modèle de boîtes](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte)
+- {{cssxref("width")}}
+- {{cssxref("box-sizing")}}
+- {{cssxref("min-height")}}
+- {{cssxref("max-height")}}
diff --git a/files/fr/web/css/hyphens/index.md b/files/fr/web/css/hyphens/index.md
index 3dbfafaf66..a9afc02707 100644
--- a/files/fr/web/css/hyphens/index.md
+++ b/files/fr/web/css/hyphens/index.md
@@ -7,21 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/hyphens
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>hyphens</code></strong> indique au navigateur comment gérer les traits d'union lors des sauts de ligne. Grâce à elle, on peut empêcher l'utilisation des traits d'union en fin de ligne, contrôler quand ils sont ajoutés ou laisser le navigateur décider.</p>
+La propriété **`hyphens`** indique au navigateur comment gérer les traits d'union lors des sauts de ligne. Grâce à elle, on peut empêcher l'utilisation des traits d'union en fin de ligne, contrôler quand ils sont ajoutés ou laisser le navigateur décider.
 
-<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>
+{{EmbedInteractiveExample("pages/css/hyphens.html")}}
 
-<p>Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut <code><a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a></code> et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code>.</p>
+Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes/lang) et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut [`xml:lang`](/fr/docs/Web/SVG/Attribute/xml:lang).
 
-<div class="note">
-  <p><strong>Note :</strong> Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.</p>
-</div>
+> **Note :** Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 hyphens: none;
 hyphens: manual;
 hyphens: auto;
@@ -30,45 +29,40 @@ hyphens: auto;
 hyphens: inherit;
 hyphens: initial;
 hyphens: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Les mots ne sont pas coupés en fin de ligne et ce même si les caractères invitent à une coupe. Les lignes se termineront uniquement sur des blancs.</dd>
- <dt><code>manual</code></dt>
- <dd>Les mots sont coupés là où des caractères invitant à un saut de ligne sont présents. Voir la section suivante pour plus de détails.</dd>
- <dt><code>auto</code></dt>
- <dd>Le navigateur est libre de couper les mots là où il l'estime approprié selon les règles qu'il choisit. Les emplacements de coupe suggérés par certains caractères devraient être privilégiés par rapport aux coupes automatiques.</dd>
-</dl>
+- `none`
+  - : Les mots ne sont pas coupés en fin de ligne et ce même si les caractères invitent à une coupe. Les lignes se termineront uniquement sur des blancs.
+- `manual`
+  - : Les mots sont coupés là où des caractères invitant à un saut de ligne sont présents. Voir la section suivante pour plus de détails.
+- `auto`
+  - : Le navigateur est libre de couper les mots là où il l'estime approprié selon les règles qu'il choisit. Les emplacements de coupe suggérés par certains caractères devraient être privilégiés par rapport aux coupes automatiques.
 
-<div class="note">
-  <p><strong>Note :</strong> Le comportement défini par <code>auto</code> dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML <code>lang</code> pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.</p>
-</div>
+> **Note :** Le comportement défini par `auto` dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML `lang` pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Suggérer_des_emplacements_de_coupe_pour_les_lignes">Suggérer des emplacements de coupe pour les lignes</h2>
+## Suggérer des emplacements de coupe pour les lignes
 
-<p>Deux caractères Unicode peuvent être utilisés manuellement pour indiquer des emplacement où effectuer des sauts de ligne :</p>
+Deux caractères Unicode peuvent être utilisés manuellement pour indiquer des emplacement où effectuer des sauts de ligne :
 
-<dl>
- <dt>U+2010 (HYPHEN)</dt>
- <dd>Un trait d'union « dur » qui indique un emplacement indiqué pour un saut de ligne. Même si la ligne n'est pas coupée à cet endroit, le trait d'union est affiché.</dd>
- <dt>U+00AD (SOFT HYPHEN)</dt>
- <dd>Un trait d'union « doux ». Ce caractère n'est pas affichée de façon visible. Il indique au navigateur un emplacement où effectuer le saut de ligne si nécessaire. En HTML, on peut utiliser l'entité <code>&amp;shy;</code> pour insérer ce caractère.</dd>
-</dl>
+- U+2010 (HYPHEN)
+  - : Un trait d'union « dur » qui indique un emplacement indiqué pour un saut de ligne. Même si la ligne n'est pas coupée à cet endroit, le trait d'union est affiché.
+- U+00AD (SOFT HYPHEN)
+  - : Un trait d'union « doux ». Ce caractère n'est pas affichée de façon visible. Il indique au navigateur un emplacement où effectuer le saut de ligne si nécessaire. En HTML, on peut utiliser l'entité `&shy;` pour insérer ce caractère.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on crée trois classes CSS pour illustrer chacune des configurations possibles pour la propriété <code>hyphens</code>.</p>
+Dans cet exemple, on crée trois classes CSS pour illustrer chacune des configurations possibles pour la propriété `hyphens`.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 55px;
   border: 1px solid black;
  }
@@ -86,54 +80,41 @@ p.auto {
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;code&gt;none&lt;/code&gt;: aucun trait d'union, dépassement si nécessaire
-    &lt;p lang="en" class="none"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
-  &lt;/li&gt;
-  &lt;li&gt;&lt;code&gt;manual&lt;/code&gt;: un trait d'union uniquement à &amp;amp;hyphen; ou &amp;amp;shy; (si nécessaire)
-    &lt;p lang="en" class="manual"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
-  &lt;/li&gt;
-  &lt;li&gt;&lt;code&gt;auto&lt;/code&gt;: un trait d'union où l'algorithme l'estime nécessaire
-    &lt;p lang="en" class="auto"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%", "490'")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}</td>
-   <td>{{Spec2("CSS3 Text")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.hyphens")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+}
+```
+
+### HTML
 
+```html
 <ul>
- <li>{{cssxref("content")}}</li>
+  <li><code>none</code>: aucun trait d'union, dépassement si nécessaire
+    <p lang="en" class="none">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>manual</code>: un trait d'union uniquement à &amp;hyphen; ou &amp;shy; (si nécessaire)
+    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>auto</code>: un trait d'union où l'algorithme l'estime nécessaire
+    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
+  </li>
 </ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%", "490'")}}
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}} | {{Spec2("CSS3 Text")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.hyphens")}}
+
+## Voir aussi
+
+- {{cssxref("content")}}
diff --git a/files/fr/web/css/id_selectors/index.md b/files/fr/web/css/id_selectors/index.md
index ee74a72867..63096c058a 100644
--- a/files/fr/web/css/id_selectors/index.md
+++ b/files/fr/web/css/id_selectors/index.md
@@ -9,78 +9,55 @@ tags:
 translation_of: Web/CSS/ID_selectors
 original_slug: Web/CSS/Sélecteurs_d_ID
 ---
-<div>{{CSSRef("Selectors")}}</div>
+{{CSSRef("Selectors")}}
 
-<p>Un sélecteur d'identifiant (<em>ID selector</em>) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut {{htmlattrxref("ID")}}. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.</p>
+Un sélecteur d'identifiant (_ID selector_) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut {{htmlattrxref("ID")}}. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.
 
-<pre class="brush: css no-line-numbers">/* L'élément avec l'identifiant id="demo" */
+```css
+/* L'élément avec l'identifiant id="demo" */
 #demo {
   border: red 2px solid;
-}</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
+}
+```
 
-<pre class="syntaxbox">#valeur_identifiant { <em>déclarations</em> }</pre>
+## Syntaxe
 
-<div class="note">
-<p><strong>Note :</strong> Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}:</p>
+    #valeur_identifiant { déclarations }
 
-<pre class="syntaxbox">[id=valeur_identifiant] { <em>déclarations</em> }</pre>
-</div>
+> **Note :** Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}:
+>
+>     [id=valeur_identifiant] { déclarations }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#identifie {
+```css
+#identifie {
   background-color: blue;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;span id="identifie"&gt;Voici un span avec du texte.&lt;/span&gt;
-&lt;span&gt;Et un autre (mais sans identifiant).&lt;/span&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td>
-   <td>{{Spec2("CSS3 Selectors")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.id")}}</p>
+```
+
+### HTML
+
+```html
+<span id="identifie">Voici un span avec du texte.</span>
+<span>Et un autre (mais sans identifiant).</span>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 200, 50)}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}         | {{Spec2("CSS4 Selectors")}} |                      |
+| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}         | {{Spec2("CSS3 Selectors")}} |                      |
+| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | {{Spec2("CSS2.1")}}             |                      |
+| {{SpecName("CSS1", "#id-as-selector", "ID selectors")}}                     | {{Spec2("CSS1")}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.id")}}
diff --git a/files/fr/web/css/image-orientation/index.md b/files/fr/web/css/image-orientation/index.md
index 1e5b7e4b90..af3f7d39c3 100644
--- a/files/fr/web/css/image-orientation/index.md
+++ b/files/fr/web/css/image-orientation/index.md
@@ -8,16 +8,15 @@ tags:
   - Reference
 translation_of: Web/CSS/image-orientation
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>image-orientation</code></strong> décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction <code>rotate</code>.</p>
+La propriété **`image-orientation`** décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction `rotate`.
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être <code>from-image</code>).</p>
-</div>
+> **Attention :** Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être `from-image`).
 
-<pre class="brush:css no-line-numbers">/* Valeurs d'angle */
-/* Type &lt;angle&gt;    */
+```css
+/* Valeurs d'angle */
+/* Type <angle>    */
 image-orientation: 0deg;
 image-orientation: 6.4deg;     /* Arrondie à 0deg */
 image-orientation: -90deg;     /* Équivalent à 270deg, la
@@ -37,98 +36,80 @@ image-orientation: 90deg flip; /* Rotation de 90deg, puis
 image-orientation: inherit;
 image-orientation: initial;
 image-orientation: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>from-image</code></dt>
- <dd>Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée.</dd>
- <dt><code>&lt;angle&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche.</dd>
- <dt><code>flip</code></dt>
- <dd>L'image est retournée horizontalement (comme une réflexion) après que la rotation d'angle indiqué par le premier paramètre ait été appliquée. Si aucun argument d'angle n'a été fourni, la valeur <code>0deg</code> sera utilisée.</dd>
-</dl>
+- `from-image`
+  - : Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée.
+- `<angle>`
+  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche.
+- `flip`
+  - : L'image est retournée horizontalement (comme une réflexion) après que la rotation d'angle indiqué par le premier paramètre ait été appliquée. Si aucun argument d'angle n'a été fourni, la valeur `0deg` sera utilisée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger un orientation erronée. C'est pour cette raison que la valeur est arrondie au quart de tour le plus proche.</p>
+Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger un orientation erronée. C'est pour cette raison que la valeur est arrondie au quart de tour le plus proche.
 
-<p>De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait. <code>image-orientation</code> ne modifie que les images, il faudrait apporter les modifications au niveau de la disposition.</p>
+De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait. `image-orientation` ne modifie que les images, il faudrait apporter les modifications au niveau de la disposition.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#image {
+```css
+#image {
   /* Peut-être modifiée dans l'exemple */
   image-orientation: flip;
 }
-</pre>
-
-<pre class="brush: html hidden">&lt;img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
-    alt="Orientation déterminée à partir de l'image"/&gt;
-&lt;select id="imageOrientation"&gt;
-  &lt;option value="from-image"&gt;from-image&lt;/option&gt;
-  &lt;option value="90deg"&gt;90deg&lt;/option&gt;
-  &lt;option value="flip" selected&gt;flip&lt;/option&gt;
-&lt;/select&gt;
-</pre>
-
-<pre class="brush: js hidden">var imageOrientation = document.getElementById("imageOrientation");
+```
+
+```html hidden
+<img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="Orientation déterminée à partir de l'image"/>
+<select id="imageOrientation">
+  <option value="from-image">from-image</option>
+  <option value="90deg">90deg</option>
+  <option value="flip" selected>flip</option>
+</select>
+```
+
+```js hidden
+var imageOrientation = document.getElementById("imageOrientation");
 imageOrientation.addEventListener("change", function (evt) {
   document.getElementById("image").style.imageOrientation = evt.target.value;
 });
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%", 240)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td>Ajout des mots-clés <code>from-image</code> et <code>flip</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.image-orientation")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("object-fit")}}</li>
- <li>{{cssxref("object-position")}}</li>
- <li>{{cssxref("image-orientation")}}</li>
- <li>{{cssxref("image-rendering")}}</li>
- <li>{{cssxref("image-resolution")}}</li>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("rotate")}}</li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%", 240)}}
+
+## Spécifications
+
+| Spécification                                                                                | État                             | Commentaires                                |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------- |
+| {{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}} | {{Spec2('CSS4 Images')}} | Ajout des mots-clés `from-image` et `flip`. |
+| {{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}} | {{Spec2('CSS3 Images')}} | Définition initiale.                        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.image-orientation")}}
+
+## Voir aussi
+
+- {{cssxref("object-fit")}}
+- {{cssxref("object-position")}}
+- {{cssxref("image-orientation")}}
+- {{cssxref("image-rendering")}}
+- {{cssxref("image-resolution")}}
+- {{cssxref("transform")}}
+- {{cssxref("rotate")}}
diff --git a/files/fr/web/css/image-rendering/index.md b/files/fr/web/css/image-rendering/index.md
index d0aef4a32e..c5e83f68db 100644
--- a/files/fr/web/css/image-rendering/index.md
+++ b/files/fr/web/css/image-rendering/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/image-rendering
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>image-rendering</code></strong> fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments fils.</p>
+La propriété **`image-rendering`** fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments fils.
 
-<p>L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes que la taille naturelle de l'image ou si l'utilisateur interagit en zoomant par exemple. Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. Si, par exemple, la taille naturelle de l'image est <code>100px</code> par <code>100px</code> et que l'auteur indique les dimensions <code>200px</code> par <code>200px</code> (ou <code>50px</code> par <code>50px</code>), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple).</p>
+L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes que la taille naturelle de l'image ou si l'utilisateur interagit en zoomant par exemple. Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. Si, par exemple, la taille naturelle de l'image est `100px` par `100px` et que l'auteur indique les dimensions `200px` par `200px` (ou `50px` par `50px`), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/*Valeurs avec un mot-clé*/
+```css
+/*Valeurs avec un mot-clé*/
 image-rendering: auto;
 image-rendering: crisp-edges;
 image-rendering: pixelated;
@@ -24,36 +25,33 @@ image-rendering: pixelated;
 image-rendering: inherit;
 image-rendering: initial;
 image-rendering: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code><strong>auto</strong></code></dt>
- <dd>L'image devrait être redimensionnée grâce à un algorithme qui optimise l'apparence de l'image. Les algorithmes de redimensionnement « doux » comme l'interpolation bilinéaire, sont acceptables. Ces algorithmes sont destinés à être utilisés sur des images comme des photos. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire.</dd>
- <dt><code><strong>crisp-edges</strong></code></dt>
- <dd>L'algorithme utilisé doit avant tout préserver le contraste et les bords de l'image, il ne doit pas ajouter de couleur intermédiaire ou de flou. Cette valeur est conçue pour être utilisée sur du <em>pixel art</em>. Les algorithmes éligibles sont par exemple l'interpolation au plus proche voisin, les familles d'algorithmes 2×SaI et <a href="https://en.wikipedia.org/wiki/Hqx">hqx</a>.</dd>
- <dt><code>high-quality</code>{{Experimental_inline}}</dt>
- <dd>Cette valeur est proche de <code>smooth</code> mais favorise un redimensionnement avec une qualité élevée. Si les ressources du système sont limitées, ce sont les images ciblées avec <code>high-quality</code> qui devraient être priorisées par rapport aux autres s'il est nécessaire de dégrader la qualité.</dd>
- <dt><code><strong>pixelated</strong></code></dt>
- <dd>Lorsque l'image est agrandie c'est l'algorithme « du plus proche voisin » qui doit être utilisé afin que l'image apparaisse comme composée de grands pixels. Lorsque l'image est réduite, le comportement est le même que <code>auto</code>.</dd>
- <dt><code>smooth</code>{{Experimental_inline}}</dt>
- <dd>L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos.</dd>
-</dl>
+- **`auto`**
+  - : L'image devrait être redimensionnée grâce à un algorithme qui optimise l'apparence de l'image. Les algorithmes de redimensionnement « doux » comme l'interpolation bilinéaire, sont acceptables. Ces algorithmes sont destinés à être utilisés sur des images comme des photos. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire.
+- **`crisp-edges`**
+  - : L'algorithme utilisé doit avant tout préserver le contraste et les bords de l'image, il ne doit pas ajouter de couleur intermédiaire ou de flou. Cette valeur est conçue pour être utilisée sur du _pixel art_. Les algorithmes éligibles sont par exemple l'interpolation au plus proche voisin, les familles d'algorithmes 2×SaI et [hqx](https://en.wikipedia.org/wiki/Hqx).
+- `high-quality`{{Experimental_inline}}
+  - : Cette valeur est proche de `smooth` mais favorise un redimensionnement avec une qualité élevée. Si les ressources du système sont limitées, ce sont les images ciblées avec `high-quality` qui devraient être priorisées par rapport aux autres s'il est nécessaire de dégrader la qualité.
+- **`pixelated`**
+  - : Lorsque l'image est agrandie c'est l'algorithme « du plus proche voisin » qui doit être utilisé afin que l'image apparaisse comme composée de grands pixels. Lorsque l'image est réduite, le comportement est le même que `auto`.
+- `smooth`{{Experimental_inline}}
+  - : L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos.
 
-<div class="note">
-  <p><strong>Note :</strong> Les valeurs <code>optimizeQuality</code> et <code>optimizeSpeed</code> qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de <code>smooth</code> et <code>pixelated</code>.</p>
-</div>
+> **Note :** Les valeurs `optimizeQuality` et `optimizeSpeed` qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de `smooth` et `pixelated`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.pixels_petits {
+```css
+.pixels_petits {
   height: 50px;
   width: 50px;
 }
@@ -74,54 +72,38 @@ image-rendering: unset;
 .contraste {
   image-rendering: crisp-edges;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Avec &lt;code&gt;auto&lt;/code&gt; :&lt;/p&gt;
-&lt;img class="pixels_petits defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
-&lt;img class="pixels_grands defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
-&lt;img class="chapeau_petit defaut" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/&gt;
+```html
+<p>Avec <code>auto</code> :</p>
+<img class="pixels_petits defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
+<img class="pixels_grands defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
+<img class="chapeau_petit defaut" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/>
 
-&lt;p&gt;Avec &lt;code&gt;crisp-edges&lt;/code&gt; :&lt;/p&gt;
-&lt;img class="pixels_petits contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
-&lt;img class="pixels_grands contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
-&lt;img class="chapeau_petit contraste" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/&gt;
-</pre>
+<p>Avec <code>crisp-edges</code> :</p>
+<img class="pixels_petits contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
+<img class="pixels_grands contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
+<img class="chapeau_petit contraste" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+{{EmbedLiveSample("Exemples","100%","100%")}}
 
-<div class="note">
-<p><strong>Note :</strong> En pratique, les règles <code>pixelated</code> et <code>crisp-edges</code> peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et <em>vice versa</em>). Si besoin, un {{HTMLElement("canvas")}} peut fournir <a href="http://phrogz.net/tmp/canvas_image_zoom.html">une alternative pour les valeurs <code>crisp-edge</code> et <code>optimize-contrast</code></a> via la manipulation manuelle des données de l'image ou avec <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code>.</p>
-</div>
+> **Note :** En pratique, les règles `pixelated` et `crisp-edges` peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et _vice versa_). Si besoin, un {{HTMLElement("canvas")}} peut fournir [une alternative pour les valeurs `crisp-edge` et `optimize-contrast`](http://phrogz.net/tmp/canvas_image_zoom.html) via la manipulation manuelle des données de l'image ou avec [`imageSmoothingEnabled`](/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}} | {{Spec2('CSS3 Images')}} | Définition initiale. |
 
-<div class="note">
-<p><strong>Note :</strong> Cette valeur était, initialement, proche de la propriété SVG <code>image-rendering</code>. Cependant, ces valeurs ont « divergé » et sont assez différentes désormais.</p>
-</div>
+> **Note :** Cette valeur était, initialement, proche de la propriété SVG `image-rendering`. Cependant, ces valeurs ont « divergé » et sont assez différentes désormais.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.image-rendering")}}</p>
+{{Compat("css.properties.image-rendering")}}
diff --git a/files/fr/web/css/image/index.md b/files/fr/web/css/image/index.md
index ae7382c629..4f8d315317 100644
--- a/files/fr/web/css/image/index.md
+++ b/files/fr/web/css/image/index.md
@@ -8,105 +8,63 @@ tags:
   - Type
 translation_of: Web/CSS/image
 ---
-<div>{{CSSRef}}</div>
-
-<p>Le type de donnée CSS <strong><code>&lt;image&gt;</code></strong> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("&lt;url&gt;")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("&lt;gradient&gt;")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element()")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade()")}}.</p>
-
-<p>Les images peuvent être utilisées pour de nombreuses propriétés CSS dont, par exemple, {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} et {{cssxref("cursor")}}.</p>
-
-<h2 id="Les_types_d'images">Les types d'images</h2>
-
-<p>Le CSS permet de manipuler différentes sortes d'images :</p>
-
-<ul>
- <li>les images avec des <em>dimensions intrinsèques</em>, qui ont une taille propre, comme une image au format JPEG ou PNG (ou dans un autre <a href="https://fr.wikipedia.org/wiki/Image_matricielle">format matriciel</a>) qui possède des dimensions fixes.</li>
- <li>les images avec <em>plusieurs dimensions intrinsèques</em>, qui existent sous différentes dimensions dans un même fichier, comme certains formats .ico. Dans ce cas, les dimensions intrinsèques seront celles de la plus grande image en surface, et ayant le ratio le plus proche de la boîte englobante.</li>
- <li>les images sans dimensions intrinsèques avec un <em>ratio intrinsèque</em>, entre la largeur et sa hauteur, comme certaines <a href="https://fr.wikipedia.org/wiki/Image_vectorielle">images vectorielles</a>, au format SVG par exemple.</li>
- <li>les images n'ayant <em>ni dimensions intrinsèques, ni ratio intrisèque</em>, comme un dégradé CSS par exemple.</li>
-</ul>
-
-<p>Le CSS détermine la <em>taille concrète de l'objet</em> en utilisant ces <em>dimensions intrinsèques</em>, la <em>taille spécifiée</em> définie par les propriétés CSS comme {{cssxref("width")}}, {{cssxref("height")}} ou {{cssxref("background-size")}}, et la <em>taille par défaut de l'objet</em> définie en fonction de la propriété utilisée :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Type d'objet</th>
-   <th scope="col">Taille par défaut de l'objet</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{cssxref("background-image")}}</td>
-   <td>La taille de la zone de positionnement de l'arrière-plan</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("list-style-image")}}</td>
-   <td>La taille d'un caractère de <code>1em</code></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("border-image-source")}}</td>
-   <td>La taille de la zone de bordure de l'élément</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("cursor")}}</td>
-   <td>La dimension correspondant à la taille d'un curseur sur le système utilisé</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("mask-image")}}</td>
-   <td>?</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("shape-outside")}}</td>
-   <td>?</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("mask-border-source")}}</td>
-   <td>?</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("symbols()")}} pour <code>@counter-style</code></td>
-   <td>Une fonctionnalité en cours de discussion. Si elle est prise en charge, la taille utilisée sera celle des curseurs utilisés par le système.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("content")}} avec les pseudo-éléments {{cssxref("::after")}} et {{cssxref("::before")}}</td>
-   <td>Un rectangle de <code>300px</code><code> × 150px</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>La taille concrète de l'objet est calculée selon l'algorithme suivant :</p>
-
-<ul>
- <li>si la taille spécifié définit à la fois la largeur et la hauteur, ces valeurs sont utilisées comme la taille concrète de l'élément.</li>
- <li>si la taille spécifiée définit soit la hauteur soit la largeur, la valeur manquante est déterminée grâce au ratio intrinsèque s'il existe ou les dimensions intrisèques si la valeur spécifiée y correspond ou la taille par défaut de l'objet pour la dimension manquante.</li>
- <li>si la taille spécifiée ne définit ni hauteur ni largeur, la taille concrète de l'objet est calculée de manière à ce que le ratio intrinsèque soit conservé et que la taille par défaut de l'objet ne soit pas dépassée. Si l'image n'a pas de ratio intrinsèque, le ratio intrinsèque de l'objet auquel il s'applique est utilisé ; si l'objet n'en possède pas, la hauteur ou la largeur manquante est prise depuis la taille par défaut de l'objet.</li>
-</ul>
-
-<p>Les images peuvent être utilisées pour de nombreuses propriétés CSS comme {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} ou {{cssxref("cursor")}}.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section <a href="/fr/docs/Web/CSS/image#compatibilit.c3.a9_des_navigateurs">compatibilité des navigateurs</a> pour une liste explicative.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Un type de donnée CSS <code>&lt;image&gt;</code> peut représenter un type parmi les suivants :</p>
-
-<ul>
- <li>une image dénotée par le type de donnée CSS {{cssxref("&lt;url&gt;")}} et la fonction <code>url()</code> ;</li>
- <li>une valeur CSS {{cssxref("&lt;gradient&gt;")}} (représentant un dégradé) ;</li>
- <li>une partie de la page, définie par la fonction {{cssxref("element()")}} ;</li>
- <li>une image, un fragment d'image ou une couleur définie grâce à la fonction {{cssxref("image()")}} ;</li>
- <li>une fusion de deux ou plusieurs images avec la fonction {{cssxref("cross-face")}}</li>
- <li>une image choisie parmi un ensemble d'images (selon leurs résolutions, l'appareil et la connexion utilisés) grâce à la fonction {{cssxref("image-set()")}}.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Voici des exemples valides d'images :</p>
-
-<pre class="brush:css example-good">url(test.jpg)              /* La fonction url() fonctionne tant que test.jpg est bien une image */
-linear-gradient(blue, red) /* Un dégradé (&lt;gradient&gt;) */
+{{CSSRef}}
+
+Le type de donnée CSS **`<image>`** représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("&lt;url&gt;")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("&lt;gradient&gt;")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element()")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade()")}}.
+
+Les images peuvent être utilisées pour de nombreuses propriétés CSS dont, par exemple, {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} et {{cssxref("cursor")}}.
+
+## Les types d'images
+
+Le CSS permet de manipuler différentes sortes d'images :
+
+- les images avec des _dimensions intrinsèques_, qui ont une taille propre, comme une image au format JPEG ou PNG (ou dans un autre [format matriciel](https://fr.wikipedia.org/wiki/Image_matricielle)) qui possède des dimensions fixes.
+- les images avec _plusieurs dimensions intrinsèques_, qui existent sous différentes dimensions dans un même fichier, comme certains formats .ico. Dans ce cas, les dimensions intrinsèques seront celles de la plus grande image en surface, et ayant le ratio le plus proche de la boîte englobante.
+- les images sans dimensions intrinsèques avec un _ratio intrinsèque_, entre la largeur et sa hauteur, comme certaines [images vectorielles](https://fr.wikipedia.org/wiki/Image_vectorielle), au format SVG par exemple.
+- les images n'ayant _ni dimensions intrinsèques, ni ratio intrisèque_, comme un dégradé CSS par exemple.
+
+Le CSS détermine la _taille concrète de l'objet_ en utilisant ces _dimensions intrinsèques_, la _taille spécifiée_ définie par les propriétés CSS comme {{cssxref("width")}}, {{cssxref("height")}} ou {{cssxref("background-size")}}, et la _taille par défaut de l'objet_ définie en fonction de la propriété utilisée :
+
+| Type d'objet                                                                                                           | Taille par défaut de l'objet                                                                                                                |
+| ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{cssxref("background-image")}}                                                                               | La taille de la zone de positionnement de l'arrière-plan                                                                                    |
+| {{cssxref("list-style-image")}}                                                                               | La taille d'un caractère de `1em`                                                                                                           |
+| {{cssxref("border-image-source")}}                                                                           | La taille de la zone de bordure de l'élément                                                                                                |
+| {{cssxref("cursor")}}                                                                                           | La dimension correspondant à la taille d'un curseur sur le système utilisé                                                                  |
+| {{cssxref("mask-image")}}                                                                                       | ?                                                                                                                                           |
+| {{cssxref("shape-outside")}}                                                                                   | ?                                                                                                                                           |
+| {{cssxref("mask-border-source")}}                                                                           | ?                                                                                                                                           |
+| {{cssxref("symbols()")}} pour `@counter-style`                                                                 | Une fonctionnalité en cours de discussion. Si elle est prise en charge, la taille utilisée sera celle des curseurs utilisés par le système. |
+| {{cssxref("content")}} avec les pseudo-éléments {{cssxref("::after")}} et {{cssxref("::before")}} | Un rectangle de ` 300px`` × 150px  `                                                                                                        |
+
+La taille concrète de l'objet est calculée selon l'algorithme suivant :
+
+- si la taille spécifié définit à la fois la largeur et la hauteur, ces valeurs sont utilisées comme la taille concrète de l'élément.
+- si la taille spécifiée définit soit la hauteur soit la largeur, la valeur manquante est déterminée grâce au ratio intrinsèque s'il existe ou les dimensions intrisèques si la valeur spécifiée y correspond ou la taille par défaut de l'objet pour la dimension manquante.
+- si la taille spécifiée ne définit ni hauteur ni largeur, la taille concrète de l'objet est calculée de manière à ce que le ratio intrinsèque soit conservé et que la taille par défaut de l'objet ne soit pas dépassée. Si l'image n'a pas de ratio intrinsèque, le ratio intrinsèque de l'objet auquel il s'applique est utilisé ; si l'objet n'en possède pas, la hauteur ou la largeur manquante est prise depuis la taille par défaut de l'objet.
+
+Les images peuvent être utilisées pour de nombreuses propriétés CSS comme {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} ou {{cssxref("cursor")}}.
+
+> **Note :** tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section [compatibilité des navigateurs](/fr/docs/Web/CSS/image#compatibilit.c3.a9_des_navigateurs) pour une liste explicative.
+
+## Syntaxe
+
+Un type de donnée CSS `<image>` peut représenter un type parmi les suivants :
+
+- une image dénotée par le type de donnée CSS {{cssxref("&lt;url&gt;")}} et la fonction `url()` ;
+- une valeur CSS {{cssxref("&lt;gradient&gt;")}} (représentant un dégradé) ;
+- une partie de la page, définie par la fonction {{cssxref("element()")}} ;
+- une image, un fragment d'image ou une couleur définie grâce à la fonction {{cssxref("image()")}} ;
+- une fusion de deux ou plusieurs images avec la fonction {{cssxref("cross-face")}}
+- une image choisie parmi un ensemble d'images (selon leurs résolutions, l'appareil et la connexion utilisés) grâce à la fonction {{cssxref("image-set()")}}.
+
+## Exemples
+
+Voici des exemples valides d'images :
+
+```css example-good
+url(test.jpg)              /* La fonction url() fonctionne tant que test.jpg est bien une image */
+linear-gradient(blue, red) /* Un dégradé (<gradient>) */
 element(#colonne3)         /* Utilisation d'un élément de la page via la fonction element(),
                               si colonne3 est bien un identifiant CSS existant. */
 image(ltr 'arrow.png#xywh=0,0,16,16', red)
@@ -121,69 +79,48 @@ cross-fade(20% url(vingt.png), url(quatrevingt.png));
                               restants. */
 image-set('test.jpg' 1x, 'text-2x.jpg' 2x);
                            /* Un ensemble d'images avec différentes résolutions. */
-</pre>
+```
 
-<p>Voici des exemples invalides :</p>
+Voici des exemples invalides :
 
-<pre class="brush:css example-bad">nourl.jpg            /* Le fichier de l'image doit être ciblé via la fonction url(). */
+```css example-bad
+nourl.jpg            /* Le fichier de l'image doit être ciblé via la fonction url(). */
 url(report.pdf)      /* Le fichier référencé par la fonction url() doit être une image. */
 element(#fakeid)     /* Ne fonctionne pas si 'fakeid' n'est pas un identifiant existant. */
 image(z.jpg#xy=0,0)  /* L'indicateur de fragment doit avoir la forme xywh=#,#,#,# */
 image-set('chat.jpg' 1x, 'chien.jpg' 1x) /* Chaque image doit avoir une résolution différente */
-</pre>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Les navigateurs ne fournissent pas d'information aux outils d'assistance pour les images d'arrière-plan. Cela est particulièrement important pour les lecteurs d'écran car ces derniers ne pourront pas annoncer la présence de ces informations aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre la règle 1.1 du WCAG</a></li>
- <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères pour 1.1.1, comprendre WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Images", "#typedef-image", "&lt;image&gt;")}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>Définition initiale. Avant <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, il n'existait pas de type défini de façon explicite pour les images. Celles-ci pouvaient uniquement être utilisées via la notation fonctionnelle <code>url()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS4 Images", "#typedef-image", "&lt;image&gt;")}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td>Ajout de {{cssxref("element()")}}, {{cssxref("image()")}}, {{cssxref("image-set()")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient", "repeating-conic-gradient()")}} et {{cssxref("image-resolution")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.image")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("&lt;gradient&gt;")}}
-  <ul>
-   <li><a href="/fr/docs/Web/Guide/CSS/Using_CSS_gradients">Manipuler les dégradés CSS</a></li>
-   <li>{{cssxref("linear-gradient","linear-gradient()")}}</li>
-   <li>{{cssxref("radial-gradient","radial-gradient()")}}</li>
-   <li>{{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}</li>
-   <li>{{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}</li>
-   <li>{{cssxref("conic-gradient")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("element()")}}</li>
- <li>{{CSSxRef("imagefunction", "image()")}}</li>
- <li>{{cssxref("image-set()")}}</li>
- <li>{{CSSxRef("cross-fade()")}}</li>
-</ul>
+```
+
+## Accessibilité
+
+Les navigateurs ne fournissent pas d'information aux outils d'assistance pour les images d'arrière-plan. Cela est particulièrement important pour les lecteurs d'écran car ces derniers ne pourront pas annoncer la présence de ces informations aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.
+
+- [Comprendre la règle 1.1 du WCAG](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [Comprendre les critères pour 1.1.1, comprendre WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires                                                                                                                                                                                                                                                                                       |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS3 Images", "#typedef-image", "&lt;image&gt;")}} | {{Spec2('CSS3 Images')}} | Définition initiale. Avant [CSS3](/fr/docs/Web/CSS/CSS3), il n'existait pas de type défini de façon explicite pour les images. Celles-ci pouvaient uniquement être utilisées via la notation fonctionnelle `url()`.                                                                                |
+| {{SpecName("CSS4 Images", "#typedef-image", "&lt;image&gt;")}} | {{Spec2('CSS4 Images')}} | Ajout de {{cssxref("element()")}}, {{cssxref("image()")}}, {{cssxref("image-set()")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient", "repeating-conic-gradient()")}} et {{cssxref("image-resolution")}}. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.image")}}
+
+## Voir aussi
+
+- {{cssxref("&lt;gradient&gt;")}}
+
+  - [Manipuler les dégradés CSS](/fr/docs/Web/Guide/CSS/Using_CSS_gradients)
+  - {{cssxref("linear-gradient","linear-gradient()")}}
+  - {{cssxref("radial-gradient","radial-gradient()")}}
+  - {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}
+  - {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}
+  - {{cssxref("conic-gradient")}}
+
+- {{cssxref("element()")}}
+- {{CSSxRef("imagefunction", "image()")}}
+- {{cssxref("image-set()")}}
+- {{CSSxRef("cross-fade()")}}
diff --git a/files/fr/web/css/ime-mode/index.md b/files/fr/web/css/ime-mode/index.md
index 341094417d..53fc8c1ae6 100644
--- a/files/fr/web/css/ime-mode/index.md
+++ b/files/fr/web/css/ime-mode/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/ime-mode
 ---
-<div>{{CSSRef}}{{obsolete_header}}</div>
+{{CSSRef}}{{obsolete_header}}
 
-<p>La propriété <strong><code>ime-mode</code></strong> contrôle l'état de l'éditeur de méthode d'entrée (IME) pour la saisie des champs textuels.</p>
+La propriété **`ime-mode`** contrôle l'état de l'éditeur de méthode d'entrée (IME) pour la saisie des champs textuels.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 ime-mode: auto;
 ime-mode: normal;
 ime-mode: active;
@@ -23,76 +24,59 @@ ime-mode: disabled;
 ime-mode: inherit;
 ime-mode: initial;
 ime-mode: unset;
-</pre>
+```
 
-<p>Selon la spécification :</p>
+Selon la spécification :
 
-<p>« <code>ime-mode</code> » est en quelques sortes une propriété implémentée par quelques navigateurs, qui pose problème et qui est officiellement rendue obsolète par cette spécification</p>
+« `ime-mode` » est en quelques sortes une propriété implémentée par quelques navigateurs, qui pose problème et qui est officiellement rendue obsolète par cette spécification
 
-<p>Aussi, la spécification indique aux agents utilisateurs de ne pas prendre en charge <code>ime-mode</code> et il est déconseillé d'utiliser cette propriété dans des feuilles de styles.</p>
+Aussi, la spécification indique aux agents utilisateurs de ne pas prendre en charge `ime-mode` et il est déconseillé d'utiliser cette propriété dans des feuilles de styles.
 
-<p>La propriété <code>ime-mode</code> est partiellement implémentée et de façon hétérogène entre les différents navigateurs. Elle est apparue sous la forme d'une extension Microsoft avec Internet Explorer 5 : {{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}.</p>
+La propriété `ime-mode` est partiellement implémentée et de façon hétérogène entre les différents navigateurs. Elle est apparue sous la forme d'une extension Microsoft avec Internet Explorer 5 : {{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Il n'est, en général, pas pertinent de modifier le mode IME d'un site. Cette propriété ne devrait être utilisée que pour des applications web privées ou pour annuler une modification de cette propriété par du code historique.</p>
-</div>
+> **Note :** Il n'est, en général, pas pertinent de modifier le mode IME d'un site. Cette propriété ne devrait être utilisée que pour des applications web privées ou pour annuler une modification de cette propriété par du code historique.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La valeur de cette propriété peut être l'un des mots-clés définis ci-après.</p>
+La valeur de cette propriété peut être l'un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Aucun changement n'est apporté à l'état de l'éditeur. C'est la valeur par défaut.</dd>
- <dt><code>normal</code></dt>
- <dd>L'état de l'IME devrait être normal. Cette valeur peut être utilisée via une feuille de style utilisateur pour surcharger la valeur indiquée par le document. <em>Cette valeur n'est pas prise en charge par Internet Explorer.</em></dd>
- <dt><code>active</code></dt>
- <dd>L'éditeur de méthode d'entrée est actif au début et la saisie utilise l'éditeur sauf si l'utilisateur le ferme. <em>Cette valeur n'est pas prise en charge sur Linux.</em></dd>
- <dt><code>inactive</code></dt>
- <dd>L'éditeur de méthode d'entrée est inactif au début et l'utilisateur peut l'activer si besoin.<em> Cette valeur n'est pas prise en charge sur Linux.</em></dd>
- <dt><code>disabled</code></dt>
- <dd>L'éditeur de méthode d'entrée est désactivé et ne peut pas être activé par l'utilisateur.</dd>
-</dl>
+- `auto`
+  - : Aucun changement n'est apporté à l'état de l'éditeur. C'est la valeur par défaut.
+- `normal`
+  - : L'état de l'IME devrait être normal. Cette valeur peut être utilisée via une feuille de style utilisateur pour surcharger la valeur indiquée par le document. _Cette valeur n'est pas prise en charge par Internet Explorer._
+- `active`
+  - : L'éditeur de méthode d'entrée est actif au début et la saisie utilise l'éditeur sauf si l'utilisateur le ferme. _Cette valeur n'est pas prise en charge sur Linux._
+- `inactive`
+  - : L'éditeur de méthode d'entrée est inactif au début et l'utilisateur peut l'activer si besoin. _Cette valeur n'est pas prise en charge sur Linux._
+- `disabled`
+  - : L'éditeur de méthode d'entrée est désactivé et ne peut pas être activé par l'utilisateur.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;input type="text" name="name" value="initial value" style="ime-mode: disabled"&gt;</pre>
+```html
+<input type="text" name="name" value="initial value" style="ime-mode: disabled">
+```
 
-<p>Cet exemple désactive l'IME pour un champ donné (par exemple pour saisir des données dans une base de données qui ne supporte pas certains jeux de caractères).</p>
+Cet exemple désactive l'IME pour un champ donné (par exemple pour saisir des données dans une base de données qui ne supporte pas certains jeux de caractères).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#input-method-editor', 'ime-mode')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Définition initiale. Rend <code>ime-mode</code> obsolète.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                 | Commentaires                                   |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------- |
+| {{SpecName('CSS3 Basic UI', '#input-method-editor', 'ime-mode')}} | {{Spec2('CSS3 Basic UI')}} | Définition initiale. Rend `ime-mode` obsolète. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.ime-mode")}}</p>
+{{Compat("css.properties.ime-mode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété Microsoft avec un suffixe propriétaire IE5 {{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}</li>
-</ul>
+- La propriété Microsoft avec un suffixe propriétaire IE5 {{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}
diff --git a/files/fr/web/css/index.md b/files/fr/web/css/index.md
index 17efcc84ae..d9f3ad85f8 100644
--- a/files/fr/web/css/index.md
+++ b/files/fr/web/css/index.md
@@ -10,78 +10,66 @@ tags:
   - Styles
 translation_of: Web/CSS
 ---
-<p>{{CSSRef}}</p>
-
-<p>CSS est l'un des langages principaux du <strong>Web ouvert</strong> et a été standardisé <a href="https://w3.org/Style/CSS/#specs">par le W3C</a>. Ce standard évolue sous forme de niveaux (<em>levels</em>), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, qui est découpé en modules plus petits, est en voie de standardisation.</p>
-
-<h2 id="Key_resources">Ressources principales</h2>
-
-<dl>
- <dt>Introduction à CSS</dt>
- <dd>Si vous débutez en développement web, n'hésitez pas à consulter l'article <a href="/fr/docs/Learn/Getting_started_with_the_web/CSS_basics">les bases de CSS</a> pour découvrir CSS, ce que c'est et comment l'utiliser.</dd>
- <dt>Tutoriels CSS</dt>
- <dd>Notre section <a href="/fr/docs/Learn/CSS">Apprendre le Web - CSS</a> contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.</dd>
- <dt>La référence CSS</dt>
- <dd><a href="/fr/docs/Web/CSS/Reference">Une référence exhaustive</a> destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.</dd>
-</dl>
-
-
-<h2 id="Tutoriels">Tutoriels</h2>
-
-<p>La section <a href="/fr/docs/Learn/CSS">Apprendre le Web</a> fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.</p>
-
-<dl>
- <dt><a href="/fr/docs/Learn/Getting_started_with_the_web/CSS_basics">Introduction à CSS</a></dt>
- <dd>Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.</dd>
- <dt><a href="/fr/docs/Learn/CSS/Styling_text">Mettre en forme le texte</a></dt>
- <dd>Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.</dd>
- <dt><a href="/fr/docs/Learn/CSS/Styling_boxes">Mettre en forme les boîtes</a></dt>
- <dd>Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définir des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes.</dd>
- <dt><a href="/fr/docs/Learn/CSS/CSS_layout">La disposition en CSS</a></dt>
- <dd>Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (<em>viewport</em>). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (<em>flexbox</em>).</dd>
-</dl>
-
-<h2 id="Références">Références</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></dt>
- <dd>Une référence exhaustive, destinée aux développeurs web expérimentés. Elle décrit les différentes propriétés et concepts qui composent CSS.</dd>
- <dt>Les concepts majeurs de CSS</dt>
- <dd>Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment :
- <ul>
-  <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">la syntaxe et les formes du langage</a></li>
-  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">la spécificité</a> et <a href="/fr/docs/Web/CSS/inheritance">l'héritage</a></li>
-  <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">les unités et valeurs CSS</a></li>
-  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le modèle de boîtes</a> et <a href="/fr/docs/CSS/margin_collapsing">la fusion des marges</a></li>
-  <li><a href="/fr/docs/Web/CSS/All_About_The_Containing_Block">le bloc conteneur</a></li>
-  <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">l'empilement</a> et <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">le contexte de formatage de blocs</a></li>
-  <li>les concepts de <a href="/fr/docs/Web/CSS/initial_value">valeur initiale</a>, <a href="/fr/docs/Web/CSS/computed_value">valeur calculée</a>, <a href="/fr/docs/Web/CSS/used_value">valeur utilisée</a> et <a href="/fr/docs/Web/CSS/actual_value">valeur réelle</a></li>
-  <li><a href="/fr/docs/Web/CSS/Shorthand_properties">Les propriétés raccourcies</a></li>
-  <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Les boîtes flexibles CSS (<em>flexbox</em>)</a></li>
-  <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">La grille CSS</a></li>
-  <li><a href="/fr/docs/Web/CSS/Media_Queries">Les <em>media queries</em> (requêtes media)</a></li>
-  <li><a href="/fr/docs/Web/CSS/animation">Les animations</a></li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Livre_de_recettes">Livre de recettes</h2>
-
-<p><a href="/fr/docs/Web/CSS/Layout_cookbook">Le livre de recettes de disposition CSS</a> contient différentes recettes pour mettre en place différentes dispositions courantes. En plus de fournir du code pouvant servir de point de départ, ces recettes illustrent les différentes façons dont les spécifications CSS liées à la disposition peuvent être utilisées ainsi que les choix à faire en tant que développeur.</p>
-
-<h2 id="Outils_de_développement_pour_CSS">Outils de développement pour CSS</h2>
-
-<ul>
- <li><a href="https://jigsaw.w3.org/css-validator/">Le service de validation CSS du W3C</a> permet de vérifier si une feuille de style CSS est valide.</li>
- <li><a href="/fr/docs/Tools">Les outils de développement Firefox</a> permettent de visualiser, d'éditer une feuille de style en direct grâce à <a href="/fr/docs/Tools/Page_Inspector">l'inspecteur</a> et à <a href="/fr/docs/Tools/Style_Editor">l'éditeur de styles</a>.</li>
- <li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">L'extension Web Developer</a> permet d'éditer le code CSS des sites visités à la volée.</li>
- <li><a href="/fr/docs/conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244">D'autres outils</a>, <a href="https://www.cssdebutant.com/">guide pour les débutants</a>.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Learn/CSS">La partie CSS de la section Apprendre le Web.</a></li>
- <li>Les langages web sur lesquels CSS est souvent utilisé : <a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/SVG">SVG</a>, {{Glossary("XHTML", "",1)}} et <a href="/fr/docs/Glossary/XML">XML</a>.</li>
- <li>Des technologies Mozilla qui emploient CSS : <a href="/fr/docs/Mozilla/Firefox">Firefox</a>, <a href="/fr/docs/Mozilla/Add-ons/Thèmes">les thèmes</a> et <a href="/fr/docs/Mozilla/Thunderbird">extensions Thunderbird</a>.</li>
-</ul>
+{{CSSRef}}
+
+CSS est l'un des langages principaux du **Web ouvert** et a été standardisé [par le W3C](https://w3.org/Style/CSS/#specs). Ce standard évolue sous forme de niveaux (_levels_), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et [CSS3](/fr/docs/Web/CSS/CSS3), qui est découpé en modules plus petits, est en voie de standardisation.
+
+## Ressources principales
+
+- Introduction à CSS
+  - : Si vous débutez en développement web, n'hésitez pas à consulter l'article [les bases de CSS](/fr/docs/Learn/Getting_started_with_the_web/CSS_basics) pour découvrir CSS, ce que c'est et comment l'utiliser.
+- Tutoriels CSS
+  - : Notre section [Apprendre le Web - CSS](/fr/docs/Learn/CSS) contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.
+- La référence CSS
+  - : [Une référence exhaustive](/fr/docs/Web/CSS/Reference) destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.
+
+## Tutoriels
+
+La section [Apprendre le Web](/fr/docs/Learn/CSS) fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.
+
+- [Introduction à CSS](/fr/docs/Learn/Getting_started_with_the_web/CSS_basics)
+  - : Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.
+- [Mettre en forme le texte](/fr/docs/Learn/CSS/Styling_text)
+  - : Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.
+- [Mettre en forme les boîtes](/fr/docs/Learn/CSS/Styling_boxes)
+  - : Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définir des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes.
+- [La disposition en CSS](/fr/docs/Learn/CSS/CSS_layout)
+  - : Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (_viewport_). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (_flexbox_).
+
+## Références
+
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
+  - : Une référence exhaustive, destinée aux développeurs web expérimentés. Elle décrit les différentes propriétés et concepts qui composent CSS.
+- Les concepts majeurs de CSS
+
+  - : Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment :
+
+    - [la syntaxe et les formes du langage](/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured)
+    - [la spécificité](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) et [l'héritage](/fr/docs/Web/CSS/inheritance)
+    - [les unités et valeurs CSS](/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS)
+    - [le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) et [la fusion des marges](/fr/docs/CSS/margin_collapsing)
+    - [le bloc conteneur](/fr/docs/Web/CSS/All_About_The_Containing_Block)
+    - [l'empilement](/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches) et [le contexte de formatage de blocs](/fr/docs/Web/Guide/CSS/Block_formatting_context)
+    - les concepts de [valeur initiale](/fr/docs/Web/CSS/initial_value), [valeur calculée](/fr/docs/Web/CSS/computed_value), [valeur utilisée](/fr/docs/Web/CSS/used_value) et [valeur réelle](/fr/docs/Web/CSS/actual_value)
+    - [Les propriétés raccourcies](/fr/docs/Web/CSS/Shorthand_properties)
+    - [Les boîtes flexibles CSS (_flexbox_)](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout)
+    - [La grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout)
+    - [Les _media queries_ (requêtes media)](/fr/docs/Web/CSS/Media_Queries)
+    - [Les animations](/fr/docs/Web/CSS/animation)
+
+## Livre de recettes
+
+[Le livre de recettes de disposition CSS](/fr/docs/Web/CSS/Layout_cookbook) contient différentes recettes pour mettre en place différentes dispositions courantes. En plus de fournir du code pouvant servir de point de départ, ces recettes illustrent les différentes façons dont les spécifications CSS liées à la disposition peuvent être utilisées ainsi que les choix à faire en tant que développeur.
+
+## Outils de développement pour CSS
+
+- [Le service de validation CSS du W3C](https://jigsaw.w3.org/css-validator/) permet de vérifier si une feuille de style CSS est valide.
+- [Les outils de développement Firefox](/fr/docs/Tools) permettent de visualiser, d'éditer une feuille de style en direct grâce à [l'inspecteur](/fr/docs/Tools/Page_Inspector) et à [l'éditeur de styles](/fr/docs/Tools/Style_Editor).
+- [L'extension Web Developer](https://addons.mozilla.org/en-US/firefox/addon/web-developer/) permet d'éditer le code CSS des sites visités à la volée.
+- [D'autres outils](/fr/docs/conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244), [guide pour les débutants](https://www.cssdebutant.com/).
+
+## Voir aussi
+
+- [La partie CSS de la section Apprendre le Web.](/fr/docs/Learn/CSS)
+- Les langages web sur lesquels CSS est souvent utilisé : [HTML](/fr/docs/Web/HTML), [SVG](/fr/docs/Web/SVG), {{Glossary("XHTML", "",1)}} et [XML](/fr/docs/Glossary/XML).
+- Des technologies Mozilla qui emploient CSS : [Firefox](/fr/docs/Mozilla/Firefox), [les thèmes](/fr/docs/Mozilla/Add-ons/Thèmes) et [extensions Thunderbird](/fr/docs/Mozilla/Thunderbird).
diff --git a/files/fr/web/css/inherit/index.md b/files/fr/web/css/inherit/index.md
index e750cb1d9e..f7ca974ecd 100644
--- a/files/fr/web/css/inherit/index.md
+++ b/files/fr/web/css/inherit/index.md
@@ -7,81 +7,60 @@ tags:
   - Reference
 translation_of: Web/CSS/inherit
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le mot-clé <strong><code>inherit</code></strong> est une valeur qui peut être utilisée pour qu'une propriété prenne <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de la propriété pour l'élément parent. Cette valeur peut être utilisée sur n'importe quelle propriété CSS, y compris sur la propriété raccourcie {{cssxref("all")}}.</p>
+Le mot-clé **`inherit`** est une valeur qui peut être utilisée pour qu'une propriété prenne [la valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de la propriété pour l'élément parent. Cette valeur peut être utilisée sur n'importe quelle propriété CSS, y compris sur la propriété raccourcie {{cssxref("all")}}.
 
-<p>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_héritées" title="en/CSS/inheritance">les propriétés héritées</a>, cela accentue le comportement par défaut et ce mot-clé n'est nécessaire que pour surcharger une autre règle.</p>
+Pour [les propriétés héritées](/fr/docs/Web/CSS/Héritage#Propriétés_héritées "en/CSS/inheritance"), cela accentue le comportement par défaut et ce mot-clé n'est nécessaire que pour surcharger une autre règle.
 
-<p>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_non_héritées" title="en/CSS/inheritance">les propriétés non-héritées</a>, cela permettra d'obtenir le comportement indiqué. Ce comportement a peu d'intérêt dans ces cas et mieux vaudra utiliser {{cssxref("initial")}} ou {{cssxref("unset")}}.</p>
+Pour [les propriétés non-héritées](/fr/docs/Web/CSS/Héritage#Propriétés_non_héritées "en/CSS/inheritance"), cela permettra d'obtenir le comportement indiqué. Ce comportement a peu d'intérêt dans ces cas et mieux vaudra utiliser {{cssxref("initial")}} ou {{cssxref("unset")}}.
 
-<p>L'héritage provient toujours de l'élément parent par rapport à l'arbre du document, même si cet élément n'est pas le bloc englobant.</p>
+L'héritage provient toujours de l'élément parent par rapport à l'arbre du document, même si cet élément n'est pas le bloc englobant.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   color: green;
 }
 
 .exemple {
   color: inherit;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Alice remarqua, avec quelque surprise, qu’en
+```html
+<p>Alice remarqua, avec quelque surprise, qu’en
    tombant sur le plancher les cailloux se changeaient
    en petits gâteaux, et une brillante idée lui
-   traversa l’esprit.&lt;/p&gt;
-&lt;p class="exemple"&gt;Elle avala un des gâteaux, et s’aperçut avec
-   joie qu’elle diminuait rapidement&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Cascade', '#inherit', 'inherit')}}</td>
-   <td>{{Spec2('CSS4 Cascade')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', "#common-keywords", "inherit")}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Aucun changement {{SpecName('CSS2.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit")}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.global_keywords.inherit")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Héritage">L'héritage</a></li>
- <li>La propriété {{cssxref("all")}}</li>
- <li>Les propriétés globales {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.</li>
- <li>La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou indéfinies.</li>
-</ul>
+   traversa l’esprit.</p>
+<p class="exemple">Elle avala un des gâteaux, et s’aperçut avec
+   joie qu’elle diminuait rapidement</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires                                  |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------- |
+| {{SpecName('CSS4 Cascade', '#inherit', 'inherit')}}                     | {{Spec2('CSS4 Cascade')}} | Aucun changement.                             |
+| {{SpecName('CSS3 Values', "#common-keywords", "inherit")}}             | {{Spec2('CSS3 Values')}} | Aucun changement {{SpecName('CSS2.1')}} |
+| {{SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit")}} | {{Spec2('CSS2.1')}}         | Définition initiale.                          |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.global_keywords.inherit")}}
+
+## Voir aussi
+
+- [L'héritage](/fr/docs/Web/CSS/Héritage)
+- La propriété {{cssxref("all")}}
+- Les propriétés globales {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.
+- La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou indéfinies.
diff --git a/files/fr/web/css/inheritance/index.md b/files/fr/web/css/inheritance/index.md
index 65f8e21a57..4e1d5e1331 100644
--- a/files/fr/web/css/inheritance/index.md
+++ b/files/fr/web/css/inheritance/index.md
@@ -8,70 +8,74 @@ tags:
 translation_of: Web/CSS/inheritance
 original_slug: Web/CSS/Héritage
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Pour <a href="fr/R%c3%a9f%c3%a9rence_CSS">chaque propriété CSS</a>, la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.</p>
+Pour [chaque propriété CSS](fr/R%c3%a9f%c3%a9rence_CSS), la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.
 
-<h2 id="Propriétés_héritées">Propriétés héritées</h2>
+## Propriétés héritées
 
-<p>Lorsqu'aucune valeur n'est spécifiée pour une<em> propriété héritée</em> sur un élément, l'élément récupère la <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a> de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> donnée via la spécification.</p>
+Lorsqu'aucune valeur n'est spécifiée pour une _propriété héritée_ sur un élément, l'élément récupère la [valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) donnée via la spécification.
 
-<p>Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style :</p>
+Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style :
 
-<pre class="brush: css"> p { color: green; }
-</pre>
+```css
+ p { color: green; }
+```
 
-<p>Sur le fragment HTML suivant :</p>
+Sur le fragment HTML suivant :
 
-<pre class="brush: html"> &lt;p&gt;Ce paragraphe contient du &lt;em&gt;texte mis en emphase text&lt;/em&gt;.&lt;/p&gt;
-</pre>
+```html
+ <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
+```
 
-<p>On obtient le résultat suivant :</p>
+On obtient le résultat suivant :
 
-<p>{{EmbedLiveSample("Propriétés_héritées")}}</p>
+{{EmbedLiveSample("Propriétés_héritées")}}
 
-<p>Les mots « texte mis en emphase » apparaîtront en vert, car l'élément <code>em</code> a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément <code>p</code>. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).</p>
+Les mots « texte mis en emphase » apparaîtront en vert, car l'élément `em` a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément `p`. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).
 
-<h2 id="Propriétés_non_héritées">Propriétés non héritées</h2>
+## Propriétés non héritées
 
-<p>Lorsqu'aucune valeur n'est définie pour un élément, pour une<em> propriété non héritée</em>, l'élément prendra <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> de cette propriété (telle qu'indiquée par la spécification).</p>
+Lorsqu'aucune valeur n'est définie pour un élément, pour une _propriété non héritée_, l'élément prendra [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) de cette propriété (telle qu'indiquée par la spécification).
 
-<p>Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style :</p>
+Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style :
 
-<pre class="brush: css"> p { border: medium solid; }
-</pre>
+```css
+ p { border: medium solid; }
+```
 
-<p>Sur le fragment de code HTML :</p>
+Sur le fragment de code HTML :
 
-<pre class="brush: html"> &lt;p&gt;Ce paragraphe contient du &lt;em&gt;texte mis en emphase text&lt;/em&gt;.&lt;/p&gt;
-</pre>
+```html
+ <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
+```
 
-<p>On obtient le résultat suivant :</p>
+On obtient le résultat suivant :
 
-<p>{{EmbedLiveSample("Propriétés_non_héritées")}}</p>
+{{EmbedLiveSample("Propriétés_non_héritées")}}
 
-<p>Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est <code>none</code>).</p>
+Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est `none`).
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.</p>
+Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.
 
-<p>Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés.</p>
+Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés.
 
-<p>Ainsi :</p>
+Ainsi :
 
-<pre class="brush: css">font: {
+```css
+font: {
   all: revert;
   font-size: 200%;
   font-weight: bold;
-}</pre>
+}
+```
 
-<p>permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras.</p>
+permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}</li>
- <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
-</ul>
+- {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}
+- [La notion de valeur calculée](/fr/docs/Web/CSS/Valeur_calculée)
+- [La notion de valeur initiale](/fr/docs/Web/CSS/Valeur_initiale)
diff --git a/files/fr/web/css/initial-letter-align/index.md b/files/fr/web/css/initial-letter-align/index.md
index 711fdbf890..b764aba02a 100644
--- a/files/fr/web/css/initial-letter-align/index.md
+++ b/files/fr/web/css/initial-letter-align/index.md
@@ -9,11 +9,12 @@ tags:
   - Reference
 translation_of: Web/CSS/initial-letter-align
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>initial-letter-align</code></strong> définit l'alignement des premières lettres d'un paragraphe lorsque celles-ci sont mises en avant grâce à {{cssxref("initial-letter")}} pour former une lettrine.</p>
+La propriété **`initial-letter-align`** définit l'alignement des premières lettres d'un paragraphe lorsque celles-ci sont mises en avant grâce à {{cssxref("initial-letter")}} pour former une lettrine.
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 initial-letter-align: auto;
 initial-letter-align: alphabetic;
 initial-letter-align: border-box;
@@ -25,78 +26,66 @@ initial-letter-align: ideographic;
 initial-letter-align: inherit;
 initial-letter-align: initial;
 initial-letter-align: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La valeur de cette propriété peut être l'un des mots-clés parmi ceux définis ci-après.</p>
+La valeur de cette propriété peut être l'un des mots-clés parmi ceux définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>L'agent utilisateur choisit la meilleure valeur par rapport à la langue du texte. Pour les langues occidentales, cela sera <code>alphabetic</code>, pour les langues hébraïques <code>hebrew</code>, pour les langues CJK <code>ideographic</code> et pour certaines langues indo-aryennes, cela correspondra à <code>hanging</code>.</dd>
- <dt><code>alphabetic</code></dt>
- <dd>La ligne de majuscule est alignée avec la ligne de majuscule de la première ligne de texte. La ligne de pied de la première lettre s'aligne avec la ligne de pied de la N-ième ligne.</dd>
- <dt><code>border-box</code></dt>
- <dd>C'est la boîte formée par la première lettre qui s'aligne avec la ligne de jambage de la première ligne de texte.</dd>
- <dt><code>hanging</code></dt>
- <dd>La ligne de jambage de la première lettre est alignée avec la ligne de jambage de la première ligne de texte.</dd>
- <dt><code>hebrew</code></dt>
- <dd>La ligne de jambage et la ligne de base alphabétique hébreuses du texte qui suit qui sont utilisées pour aligner la première lettre.</dd>
- <dt><code>ideographic</code></dt>
- <dd>La première lettre est centrée par rapport à la N-ième ligne utilisée pour la lettrine.</dd>
-</dl>
+- `auto`
+  - : L'agent utilisateur choisit la meilleure valeur par rapport à la langue du texte. Pour les langues occidentales, cela sera `alphabetic`, pour les langues hébraïques `hebrew`, pour les langues CJK `ideographic` et pour certaines langues indo-aryennes, cela correspondra à `hanging`.
+- `alphabetic`
+  - : La ligne de majuscule est alignée avec la ligne de majuscule de la première ligne de texte. La ligne de pied de la première lettre s'aligne avec la ligne de pied de la N-ième ligne.
+- `border-box`
+  - : C'est la boîte formée par la première lettre qui s'aligne avec la ligne de jambage de la première ligne de texte.
+- `hanging`
+  - : La ligne de jambage de la première lettre est alignée avec la ligne de jambage de la première ligne de texte.
+- `hebrew`
+  - : La ligne de jambage et la ligne de base alphabétique hébreuses du texte qui suit qui sont utilisées pour aligner la première lettre.
+- `ideographic`
+  - : La première lettre est centrée par rapport à la N-ième ligne utilisée pour la lettrine.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   initial-letter: 3 1;
   initial-letter-align: hanging;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   Tombe, tombe, tombe ! « Cette chute n’en finira
   donc pas ! Je suis curieuse de savoir combien de
   milles j’ai déjà faits, » dit-elle tout haut. « Je
   dois être bien près du centre de la terre. Voyons
   donc, cela serait à quatre mille milles de profondeur,
-  il me semble. » &lt;/p&gt;</pre>
+  il me semble. » </p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+{{EmbedLiveSample("Exemples","100%","100%")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Inline', '#aligning-initial-letter', 'initial-letter-align')}}</td>
-   <td>{{Spec2('CSS3 Inline')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Inline', '#aligning-initial-letter', 'initial-letter-align')}} | {{Spec2('CSS3 Inline')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.initial-letter-align")}}</p>
+{{Compat("css.properties.initial-letter-align")}}
diff --git a/files/fr/web/css/initial-letter/index.md b/files/fr/web/css/initial-letter/index.md
index be99d42123..4888679849 100644
--- a/files/fr/web/css/initial-letter/index.md
+++ b/files/fr/web/css/initial-letter/index.md
@@ -8,15 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/initial-letter
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>initial-letter</code></strong> permet de définir la mise en forme pour les lettrines (qu'elles soient abaissées, surélevées ou autre).</p>
+La propriété **`initial-letter`** permet de définir la mise en forme pour les lettrines (qu'elles soient abaissées, surélevées ou autre).
 
-<pre class="brush: css  no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 initial-letter: normal;
 
 /* Valeurs numériques            */
-/* Types &lt;number&gt; puis &lt;integer&gt; */
+/* Types <number> puis <integer> */
 initial-letter: 1.5;   /* La première lettre occupe 1.5 lignes */
 initial-letter: 3.0;   /* La première lettre occupe 3 lignes   */
 initial-letter: 3.0 2; /* La première lettre occupe 3 lignes et
@@ -26,70 +27,58 @@ initial-letter: 3.0 2; /* La première lettre occupe 3 lignes et
 initial-letter: inherit;
 initial-letter: initial;
 initial-letter: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La valeur de cette propriété peut être le mot-clé <code>normal</code> ou un nombre (<code>&lt;number&gt;</code>) éventuellement suivi d'un entier (<code>&lt;integer&gt;</code>).</p>
+La valeur de cette propriété peut être le mot-clé `normal` ou un nombre (`<number>`) éventuellement suivi d'un entier (`<integer>`).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Le texte se comporte de façon normale et on n'a pas de lettrines.</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Cet argument définit le facteur de taille appliqué pour calculer la taille de la première lettre par rapport à la taille de la ligne du texte. Les valeurs négatives ne sont pas autorisées.</dd>
- <dt><code>&lt;integer&gt;</code></dt>
- <dd>Cet argument définit le nombre de lignes dont s'enfoncera la lettrine vers le bas. La valeur utilisée doit être supérieure à 0. Si cet argument est absent, on dupliquera la valeur du premier argument, arrondi vers le bas à l'entier positif le plus proche.</dd>
-</dl>
+- `normal`
+  - : Le texte se comporte de façon normale et on n'a pas de lettrines.
+- `<number>`
+  - : Cet argument définit le facteur de taille appliqué pour calculer la taille de la première lettre par rapport à la taille de la ligne du texte. Les valeurs négatives ne sont pas autorisées.
+- `<integer>`
+  - : Cet argument définit le nombre de lignes dont s'enfoncera la lettrine vers le bas. La valeur utilisée doit être supérieure à 0. Si cet argument est absent, on dupliquera la valeur du premier argument, arrondi vers le bas à l'entier positif le plus proche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   -webkit-initial-letter: 3.0 2;
   initial-letter: 3.0 2;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   Un grand rosier se trouvait à l’entrée du jardin ;
   les roses qu’il portait étaient blanches, mais trois
   jardiniers étaient en train de les peindre en rouge.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Inline', '#sizing-drop-initials', 'initial-letter')}}</td>
-   <td>{{Spec2('CSS3 Inline')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Inline', '#sizing-drop-initials', 'initial-letter')}} | {{Spec2('CSS3 Inline')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.initial-letter")}}</p>
+{{Compat("css.properties.initial-letter")}}
diff --git a/files/fr/web/css/initial/index.md b/files/fr/web/css/initial/index.md
index 2409da98e9..4fbaf7f596 100644
--- a/files/fr/web/css/initial/index.md
+++ b/files/fr/web/css/initial/index.md
@@ -8,21 +8,20 @@ tags:
   - Reference
 translation_of: Web/CSS/initial
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le mot-clé <strong><code>initial</code></strong> applique la valeur initiale d'une propriété à un élément. La valeur initiale est fournie par le navigateur et peut être utilisée pour chaque propriété CSS. Cette propriété prendra alors <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> spécifiée pour cette la propriété.</p>
+Le mot-clé **`initial`** applique la valeur initiale d'une propriété à un élément. La valeur initiale est fournie par le navigateur et peut être utilisée pour chaque propriété CSS. Cette propriété prendra alors [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) spécifiée pour cette la propriété.
 
-<p>La propriété {{cssxref("all")}} peut être utilisée avec cette valeur afin de réinitialiser l'ensemble des propriétés CSS.</p>
+La propriété {{cssxref("all")}} peut être utilisée avec cette valeur afin de réinitialiser l'ensemble des propriétés CSS.
 
-<div class="note">
-<p><strong>Note :</strong> Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_héritées">les propriétés héritées</a>, la valeur initiale peut donner des résultats étranges et mieux vaudra utiliser les mots-clés {{cssxref("inherit")}}, {{cssxref("unset")}} ou {{cssxref("revert")}}. Attention également à ne pas confondre la valeur initiale avec la valeur décrite dans la feuille de style portée par le navigateur.</p>
-</div>
+> **Note :** Pour [les propriétés héritées](/fr/docs/Web/CSS/Héritage#Propriétés_héritées), la valeur initiale peut donner des résultats étranges et mieux vaudra utiliser les mots-clés {{cssxref("inherit")}}, {{cssxref("unset")}} ou {{cssxref("revert")}}. Attention également à ne pas confondre la valeur initiale avec la valeur décrite dans la feuille de style portée par le navigateur.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* On écrit le texte en rouge */
+```css
+/* On écrit le texte en rouge */
 .exemple {
   color: red;
 }
@@ -33,56 +32,39 @@ translation_of: Web/CSS/initial
 .exemple em {
   color: initial;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html"> &lt;p class="exemple"&gt;
+```html
+ <p class="exemple">
     Texte rouge
-       &lt;em&gt;
+       <em>
           ce texte est avec la couleur initiale (noire)
-       &lt;/em&gt;
+       </em>
     ce texte est rouge aussi
- &lt;/p&gt; </pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Cascade', '#initial', 'initial')}}</td>
-   <td>{{Spec2('CSS4 Cascade')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Cascade', '#initial', 'initial')}}</td>
-   <td>{{Spec2('CSS3 Cascade')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.global_keywords.initial")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
- <li>{{cssxref("inherit")}}</li>
- <li>{{cssxref("unset")}}</li>
- <li>{{cssxref("revert")}}</li>
- <li>{{cssxref("all")}}</li>
-</ul>
+ </p> 
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                        | État                             | Commentaires         |
+| -------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Cascade', '#initial', 'initial')}} | {{Spec2('CSS4 Cascade')}} | Aucun changement.    |
+| {{SpecName('CSS3 Cascade', '#initial', 'initial')}} | {{Spec2('CSS3 Cascade')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.global_keywords.initial")}}
+
+## Voir aussi
+
+- [La notion de valeur initiale](/fr/docs/Web/CSS/Valeur_initiale)
+- {{cssxref("inherit")}}
+- {{cssxref("unset")}}
+- {{cssxref("revert")}}
+- {{cssxref("all")}}
diff --git a/files/fr/web/css/initial_value/index.md b/files/fr/web/css/initial_value/index.md
index 7e11460792..83bed2e8e6 100644
--- a/files/fr/web/css/initial_value/index.md
+++ b/files/fr/web/css/initial_value/index.md
@@ -7,48 +7,27 @@ tags:
 translation_of: Web/CSS/initial_value
 original_slug: Web/CSS/Valeur_initiale
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <strong>valeur initiale</strong> d'une <a href="/fr/docs/Web/CSS/Reference">propriété CSS</a> est définie par la spécification et varie selon <a href="/fr/docs/Web/CSS/Héritage" title="en/CSS/inheritance">qu'une propriété est héritée ou non</a>.</p>
+La **valeur initiale** d'une [propriété CSS](/fr/docs/Web/CSS/Reference) est définie par la spécification et varie selon [qu'une propriété est héritée ou non](/fr/docs/Web/CSS/Héritage "en/CSS/inheritance").
 
-<ul>
- <li>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_héritées" title="en/CSS/inheritance#Inherited_properties">les propriétés héritées</a>, la valeur initiale est uniquement utilisée pour l'élément racine lorsqu'il n'y a pas <a href="/fr/docs/Web/CSS/Valeur_spécifiée">de valeur définie</a> pour cet élément.</li>
- <li>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_non_héritées">les propriétés non-héritées</a>, la valeur initiale est utilisée pour n'importe quel élément lorsque <a href="/fr/docs/Web/CSS/Valeur_spécifiée">la valeur n'est pas définie</a> pour cet élément.</li>
-</ul>
+- Pour [les propriétés héritées](/fr/docs/Web/CSS/Héritage#Propriétés_héritées "en/CSS/inheritance#Inherited_properties"), la valeur initiale est uniquement utilisée pour l'élément racine lorsqu'il n'y a pas [de valeur définie](/fr/docs/Web/CSS/Valeur_spécifiée) pour cet élément.
+- Pour [les propriétés non-héritées](/fr/docs/Web/CSS/Héritage#Propriétés_non_héritées), la valeur initiale est utilisée pour n'importe quel élément lorsque [la valeur n'est pas définie](/fr/docs/Web/CSS/Valeur_spécifiée) pour cet élément.
 
-<p>Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux auteurs d'utiliser cette valeur de façon explicite.</p>
+Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux auteurs d'utiliser cette valeur de façon explicite.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://drafts.csswg.org/css-cascade-4/#initial-values">CSS Cascade 4</a></td>
-   <td> </td>
-   <td>Définition formelle.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition implicite.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                     | Commentaires          |
+| ------------------------------------------------------------------------------------------------ | ------------------------ | --------------------- |
+| [CSS Cascade 4](https://drafts.csswg.org/css-cascade-4/#initial-values)                          |                          | Définition formelle.  |
+| {{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}} | {{Spec2("CSS2.1")}} | Définition implicite. |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">La notion de valeur définie</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">La notion de valeur utilisée</a></li>
- <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
- <li>{{cssxref("initial")}}</li>
-</ul>
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
+- [La notion de valeur définie](/fr/docs/Web/CSS/Valeur_spécifiée)
+- [La notion de valeur calculée](/fr/docs/Web/CSS/Valeur_calculée)
+- [La notion de valeur utilisée](/fr/docs/Web/CSS/Valeur_utilisée)
+- [La notion de valeur réelle](/fr/docs/Web/CSS/valeur_reelle)
+- {{cssxref("initial")}}
diff --git a/files/fr/web/css/inline-size/index.md b/files/fr/web/css/inline-size/index.md
index 074f18db37..8a7fc86bbe 100644
--- a/files/fr/web/css/inline-size/index.md
+++ b/files/fr/web/css/inline-size/index.md
@@ -9,23 +9,24 @@ tags:
   - Reference
 translation_of: Web/CSS/inline-size
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>inline-size</code></strong> définit la taille verticale ou horizontale d'un élément de bloc selon son mode d'écriture. Selon la valeur de {{cssxref("writing-mode")}}, cette propriété correspond à {{cssxref("width")}} quand le mode d'écriture n'est pas vertical ou à {{cssxref("height")}} sinon.</p>
+La propriété **`inline-size`** définit la taille verticale ou horizontale d'un élément de bloc selon son mode d'écriture. Selon la valeur de {{cssxref("writing-mode")}}, cette propriété correspond à {{cssxref("width")}} quand le mode d'écriture n'est pas vertical ou à {{cssxref("height")}} sinon.
 
-<div>{{EmbedInteractiveExample("pages/css/inline-size.html")}}</div>
+{{EmbedInteractiveExample("pages/css/inline-size.html")}}
 
-<p>Cette propriété est à rapprocher de {{cssxref("block-size")}} qui définit l'autre dimension de l'élément.</p>
+Cette propriété est à rapprocher de {{cssxref("block-size")}} qui définit l'autre dimension de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 inline-size: 300px;
 inline-size: 25em;
 
 /* Valeurs proportionnelles relatives */
-/* Type &lt;percentage&gt;                  */
+/* Type <percentage>                  */
 inline-size: 75%;
 
 /* Valeurs avec un mot-clé */
@@ -41,68 +42,55 @@ inline-size: auto;
 inline-size: inherit;
 inline-size: initial;
 inline-size: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>inline-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("width")}} et {{cssxref("height")}}.</p>
+La propriété `inline-size` peut prendre les mêmes valeurs que les propriétés {{cssxref("width")}} et {{cssxref("height")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   writing-mode: vertical-rl;
   background-color: yellow;
   inline-size: 110px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-</pre>
+```html
+<p class="exemple">Texte d'exemple</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.inline-size")}}</p>
+{{Compat("css.properties.inline-size")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("width")}}</li>
-   <li>{{cssxref("height")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}</li>
-</ul>
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("width")}}
+  - {{cssxref("height")}}
+
+- {{cssxref("writing-mode")}}
diff --git a/files/fr/web/css/inline_formatting_context/index.md b/files/fr/web/css/inline_formatting_context/index.md
index d03ca3d9dc..174de01846 100644
--- a/files/fr/web/css/inline_formatting_context/index.md
+++ b/files/fr/web/css/inline_formatting_context/index.md
@@ -7,58 +7,52 @@ tags:
 translation_of: Web/CSS/Inline_formatting_context
 original_slug: Web/CSS/Contexte_de_formatage_en_ligne
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (<em>inline formatting context</em>).</p>
+Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (_inline formatting context_).
 
-<h2 id="Concepts-clés">Concepts-clés</h2>
+## Concepts-clés
 
-<p>Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :</p>
+Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :
 
-<ul>
- <li>Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.</li>
- <li>Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.</li>
-</ul>
+- Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.
+- Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.
 
-<p>Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns <a href="/fr/docs/Web/CSS/Block_formatting_context">un contexte de formatage de bloc</a> au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.</p>
+Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns [un contexte de formatage de bloc](/fr/docs/Web/CSS/Block_formatting_context) au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.
 
-<p>{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}
 
-<p>Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (<em>line box</em>). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.</p>
+Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (_line box_). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.
 
-<p>Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (<em>padding</em>) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément ({{HTMLElement("span")}}) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur <code>&lt;span&gt;</code> est coupée au passage à la ligne.</p>
+Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (_padding_) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément ({{HTMLElement("span")}}) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur `<span>` est coupée au passage à la ligne.
 
-<p>{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}
 
-<p>Les marges, les bordures et le remplissage (<em>padding</em>) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne <code>&lt;span&gt;</code> qui a été ajouté.</p>
+Les marges, les bordures et le remplissage (_padding_) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne `<span>` qui a été ajouté.
 
-<p>{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}</p>
+{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}
 
-<div class="note">
-<p><strong>Note :</strong> Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">les propriétés et les valeurs logiques en CSS</a>.</p>
-</div>
+> **Note :** Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir [les propriétés et les valeurs logiques en CSS](/fr/docs/Web/CSS/CSS_Logical_Properties).
 
-<h2 id="Alignement_sur_la_direction_de_bloc_block">Alignement sur la direction de bloc (<em>block</em>)</h2>
+## Alignement sur la direction de bloc (_block_)
 
-<p>Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriété {{cssxref("vertical-align")}}. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical, <code>vertical-align</code> ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliser <code>vertical-align</code> afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur <code>top</code> mais vous pouvez le modifier en utilisant <code>middle</code>, <code>bottom</code> ou encore <code>baseline</code>.</p>
+Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriété {{cssxref("vertical-align")}}. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical, `vertical-align` ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliser `vertical-align` afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur `top` mais vous pouvez le modifier en utilisant `middle`, `bottom` ou encore `baseline`.
 
-<p>{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}</p>
+{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}
 
-<h2 id="Alignement_le_long_de_la_direction_en_ligne_inline">Alignement le long de la direction en ligne (<em>inline</em>)</h2>
+## Alignement le long de la direction en ligne (_inline_)
 
-<p>S'il reste de l'espace le long de la direction en ligne, la propriété {{cssxref("text-align")}} permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur de <code>text-align</code> afin d'utiliser <code>end</code>.</p>
+S'il reste de l'espace le long de la direction en ligne, la propriété {{cssxref("text-align")}} permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur de `text-align` afin d'utiliser `end`.
 
-<p>{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}</p>
+{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}
 
-<h2 id="Effets_du_flottement_float">Effets du flottement (<code>float</code>)</h2>
+## Effets du flottement (`float`)
 
-<p>Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant ({{cssxref("float")}}) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.</p>
+Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant ({{cssxref("float")}}) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.
 
-<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Le contexte de formatage en bloc</a></li>
- <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Le modèle de formatage visuel</a></li>
-</ul>
+- [Le contexte de formatage en bloc](/fr/docs/Web/CSS/Block_formatting_context)
+- [Le modèle de formatage visuel](/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle)
diff --git a/files/fr/web/css/inset-block-end/index.md b/files/fr/web/css/inset-block-end/index.md
index d0316ea909..b25e191d87 100644
--- a/files/fr/web/css/inset-block-end/index.md
+++ b/files/fr/web/css/inset-block-end/index.md
@@ -9,22 +9,21 @@ tags:
 translation_of: Web/CSS/inset-block-end
 original_slug: inset-block-end
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>inset-block-end</code></strong> définit la fin du décalage logique en bloc (<em>block</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`inset-block-end`** définit la fin du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-block-end</code>. Firefox 63 a mis à jour le nom de la propriété afin de s'accorder avec les modifications apportées à la spécification.</p>
-</div>
+> **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-block-end`. Firefox 63 a mis à jour le nom de la propriété afin de s'accorder avec les modifications apportées à la spécification.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 inset-block-end: 3px;
 inset-block-end: 2.4em;
 
 /* Valeurs relatives à la largeur */
 /* du bloc englobant              */
-/* Type &lt;percentage&gt;              */
+/* Type <percentage>              */
 inset-block-end: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -34,32 +33,34 @@ inset-block-end: auto;
 inset-block-end: inherit;
 inset-block-end: initial;
 inset-block-end: unset;
-</pre>
+```
 
-<p>Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.</p>
+Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>inset-block-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+La propriété `inset-block-end` peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte pour l'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -70,56 +71,40 @@ inset-block-end: unset;
   position: relative;
   inset-block-end: 20px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.inset-block-end")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("top")}}</li>
-   <li>{{cssxref("right")}}</li>
-   <li>{{cssxref("bottom")}}</li>
-   <li>{{cssxref("left")}}</li>
-  </ul>
- </li>
- <li>Les autres propriétés qui définissent les décalages logiques
-  <ul>
-   <li>{{cssxref("inset-block-start")}}</li>
-   <li>{{cssxref("inset-inline-start")}}</li>
-   <li>{{cssxref("inset-inline-end")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}</li>
- <li>{{cssxref("direction")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                                           | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.inset-block-end")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("top")}}
+  - {{cssxref("right")}}
+  - {{cssxref("bottom")}}
+  - {{cssxref("left")}}
+
+- Les autres propriétés qui définissent les décalages logiques
+
+  - {{cssxref("inset-block-start")}}
+  - {{cssxref("inset-inline-start")}}
+  - {{cssxref("inset-inline-end")}}
+
+- {{cssxref("writing-mode")}}
+- {{cssxref("direction")}}
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/inset-block-start/index.md b/files/fr/web/css/inset-block-start/index.md
index c57cbf2906..bc2066dafc 100644
--- a/files/fr/web/css/inset-block-start/index.md
+++ b/files/fr/web/css/inset-block-start/index.md
@@ -9,22 +9,21 @@ tags:
 translation_of: Web/CSS/inset-block-start
 original_slug: inset-block-start
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>inset-block-start</code></strong> définit le début du décalage logique en bloc (<em>block</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`inset-block-start`** définit le début du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-block-start</code>. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.</p>
-</div>
+> **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-block-start`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 inset-block-start: 3px;
 inset-block-start: 2.4em;
 
 /* Valeurs relatives à la largeur */
 /* du bloc englobant              */
-/* Type &lt;percentage&gt;              */
+/* Type <percentage>              */
 inset-block-start: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -34,30 +33,32 @@ inset-block-start: auto;
 inset-block-start: inherit;
 inset-block-start: initial;
 inset-block-start: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>inset-block-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+La propriété `inset-block-start` peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte pour l'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -68,56 +69,40 @@ inset-block-start: unset;
   position: relative;
   inset-block-start: 20px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.inset-block-start")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("top")}}</li>
-   <li>{{cssxref("right")}}</li>
-   <li>{{cssxref("bottom")}}</li>
-   <li>{{cssxref("left")}}</li>
-  </ul>
- </li>
- <li>Les propriétés qui définissent les autres décalages logiques
-  <ul>
-   <li>{{cssxref("inset-block-end")}}</li>
-   <li>{{cssxref("offset-inline-end")}}</li>
-   <li>{{cssxref("offset-inline-start")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}</li>
- <li>{{cssxref("direction")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.inset-block-start")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("top")}}
+  - {{cssxref("right")}}
+  - {{cssxref("bottom")}}
+  - {{cssxref("left")}}
+
+- Les propriétés qui définissent les autres décalages logiques
+
+  - {{cssxref("inset-block-end")}}
+  - {{cssxref("offset-inline-end")}}
+  - {{cssxref("offset-inline-start")}}
+
+- {{cssxref("writing-mode")}}
+- {{cssxref("direction")}}
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/inset-block/index.md b/files/fr/web/css/inset-block/index.md
index f46956bb2f..c545bea997 100644
--- a/files/fr/web/css/inset-block/index.md
+++ b/files/fr/web/css/inset-block/index.md
@@ -9,19 +9,20 @@ tags:
   - Reference
 translation_of: Web/CSS/inset-block
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>inset-block</code></strong> définit le décalage d'un élément par rapport au début et à la fin de l'axe de bloc de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à {{cssxref("top")}} et {{cssxref("bottom")}} ou à {{cssxref("right")}} et {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`inset-block`** définit le décalage d'un élément par rapport au début et à la fin de l'axe de bloc de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à {{cssxref("top")}} et {{cssxref("bottom")}} ou à {{cssxref("right")}} et {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 inset-block: 3px 10px;
 inset-block: 2.4em 3em;
 inset-block: 10px; /* La valeur est appliquée des deux côtés */
 
 /* Les valeurs en pourcentage sont relatives à la */
 /* largeur ou à la hauteur du bloc englobant */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 inset-block: 10% 5%;
 
 /* Valeur avec un mot-clé */
@@ -31,25 +32,26 @@ inset-block: auto;
 inset-block: inherit;
 inset-block: initial;
 inset-block: unset;
-</pre>
+```
 
-<p>Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique {{cssxref("inset-inline")}} qui est une propriété raccourcie pour {{cssxref("inset-inline-start")}}, and {{cssxref("inset-inline-end")}}.</p>
+Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique {{cssxref("inset-inline")}} qui est une propriété raccourcie pour {{cssxref("inset-inline-start")}}, and {{cssxref("inset-inline-end")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>inset-block</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+La propriété `inset-block` peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -60,47 +62,34 @@ inset-block: unset;
   position: relative;
   inset-block: 20px 50px;
   background-color: #c8c800;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+```
 
-<h3 id="Exemples_2">Exemples</h3>
+### Exemples
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.inset-block")}}</p>
+{{Compat("css.properties.inset-block")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}</li>
- <li>Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}
+- Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/inset-inline-end/index.md b/files/fr/web/css/inset-inline-end/index.md
index ca4748f255..2371e342bf 100644
--- a/files/fr/web/css/inset-inline-end/index.md
+++ b/files/fr/web/css/inset-inline-end/index.md
@@ -9,22 +9,21 @@ tags:
 translation_of: Web/CSS/inset-inline-end
 original_slug: inset-inline-end
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>inset-inline-end</code></strong> définit la fin du décalage logique en ligne (<em>inline</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`inset-inline-end`** définit la fin du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-inline-end</code>. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.</p>
-</div>
+> **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-inline-end`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 inset-inline-end: 3px;
 inset-inline-end: 2.4em;
 
 /* Valeurs relatives à la largeur */
 /* du bloc englobant              */
-/* Type &lt;percentage&gt;              */
+/* Type <percentage>              */
 inset-inline-end: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -34,32 +33,34 @@ inset-inline-end: auto;
 inset-inline-end: inherit;
 inset-inline-end: initial;
 inset-inline-end: unset;
-</pre>
+```
 
-<p>Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.</p>
+Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>inset-inline-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+La propriété `inset-inline-end` peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte pour l'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -70,56 +71,39 @@ inset-inline-end: unset;
   position: relative;
   inset-inline-end: 20px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.inset-inline-end")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("top")}}</li>
-   <li>{{cssxref("right")}}</li>
-   <li>{{cssxref("bottom")}}</li>
-   <li>{{cssxref("left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}</li>
- <li>{{cssxref("direction")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
- <li>Les propriétés qui définissent les autres décalages :
-  <ul>
-   <li>{{cssxref("inset-block-start")}},</li>
-   <li>{{cssxref("inset-block-end")}},</li>
-   <li>{{cssxref("inset-inline-start")}}</li>
-  </ul>
- </li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                                           | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.inset-inline-end")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("top")}}
+  - {{cssxref("right")}}
+  - {{cssxref("bottom")}}
+  - {{cssxref("left")}}
+
+- {{cssxref("writing-mode")}}
+- {{cssxref("direction")}}
+- {{cssxref("text-orientation")}}
+- Les propriétés qui définissent les autres décalages :
+
+  - {{cssxref("inset-block-start")}},
+  - {{cssxref("inset-block-end")}},
+  - {{cssxref("inset-inline-start")}}
diff --git a/files/fr/web/css/inset-inline-start/index.md b/files/fr/web/css/inset-inline-start/index.md
index 29f820c98f..a9b9356153 100644
--- a/files/fr/web/css/inset-inline-start/index.md
+++ b/files/fr/web/css/inset-inline-start/index.md
@@ -9,22 +9,21 @@ tags:
 translation_of: Web/CSS/inset-inline-start
 original_slug: inset-inline-start
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>inset-inline-start</code></strong> définit le début du décalage logique en ligne (<em>inline</em>) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`inset-inline-start`** définit le début du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Avant Firefox 63, cette propriété était implémentée avec le nom <code>offset-inline-start</code>. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.</p>
-</div>
+> **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-inline-start`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 inset-inline-start: 3px;
 inset-inline-start: 2.4em;
 
 /* Valeurs relatives à la largeur */
 /* du bloc englobant              */
-/* Type &lt;percentage&gt;              */
+/* Type <percentage>              */
 inset-inline-start: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -34,32 +33,34 @@ inset-inline-start: auto;
 inset-inline-start: inherit;
 inset-inline-start: initial;
 inset-inline-start: unset;
-</pre>
+```
 
-<p>Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}} qui permettent de définir les autres décalages de l'élément.</p>
+Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}} qui permettent de définir les autres décalages de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>inset-inline-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+La propriété `inset-inline-start` peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte pour l'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -70,50 +71,35 @@ inset-inline-start: unset;
   position: relative;
   inset-inline-start: 20px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.inset-inline-start")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("top")}}</li>
-   <li>{{cssxref("right")}}</li>
-   <li>{{cssxref("bottom")}}</li>
-   <li>{{cssxref("left")}}</li>
-  </ul>
- </li>
- <li>Les autres propriétés qui définissent les autres décalages : {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}}</li>
- <li>{{cssxref("writing-mode")}}</li>
- <li>{{cssxref("direction")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                                           | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.inset-inline-start")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("top")}}
+  - {{cssxref("right")}}
+  - {{cssxref("bottom")}}
+  - {{cssxref("left")}}
+
+- Les autres propriétés qui définissent les autres décalages : {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}}
+- {{cssxref("writing-mode")}}
+- {{cssxref("direction")}}
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/inset-inline/index.md b/files/fr/web/css/inset-inline/index.md
index c187579f40..bd8758ada6 100644
--- a/files/fr/web/css/inset-inline/index.md
+++ b/files/fr/web/css/inset-inline/index.md
@@ -9,19 +9,20 @@ tags:
   - Reference
 translation_of: Web/CSS/inset-inline
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>inset-inline</code></strong> définit le décalage d'un élément par rapport au début et à la fin de l'axe en ligne de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à {{cssxref("top")}} et {{cssxref("bottom")}} ou à {{cssxref("right")}} et {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`inset-inline`** définit le décalage d'un élément par rapport au début et à la fin de l'axe en ligne de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à {{cssxref("top")}} et {{cssxref("bottom")}} ou à {{cssxref("right")}} et {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 inset-inline: 3px 10px;
 inset-inline: 2.4em 3em;
 inset-inline: 10px; /* La valeur est appliquée des deux côtés */
 
 /* Les valeurs en pourcentage sont relatives à la */
 /* largeur ou à la hauteur du bloc englobant */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 inset-inline: 10% 5%;
 
 /* Valeur avec un mot-clé */
@@ -31,25 +32,26 @@ inset-inline: auto;
 inset-inline: inherit;
 inset-inline: initial;
 inset-inline: unset;
-</pre>
+```
 
-<p>Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique {{cssxref("inset-block")}} qui est une propriété raccourcie pour {{cssxref("inset-block-start")}}, and {{cssxref("inset-block-end")}}.</p>
+Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique {{cssxref("inset-block")}} qui est une propriété raccourcie pour {{cssxref("inset-block-start")}}, and {{cssxref("inset-block-end")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>inset-inline</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+La propriété `inset-inline` peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -60,47 +62,34 @@ inset-inline: unset;
   position: relative;
   inset-inline: 20px 50px;
   background-color: #c8c800;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+```
 
-<h3 id="Exemples_2">Exemples</h3>
+### Exemples
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.inset-inline")}}</p>
+{{Compat("css.properties.inset-inline")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}</li>
- <li>Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}
+- Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/inset/index.md b/files/fr/web/css/inset/index.md
index f6d1511b40..ed01bc9bbf 100644
--- a/files/fr/web/css/inset/index.md
+++ b/files/fr/web/css/inset/index.md
@@ -9,12 +9,13 @@ tags:
   - Reference
 translation_of: Web/CSS/inset
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>inset</code></strong> définit les décalages physiques d'un élément. Bien qu'elle fasse partie de la spécification sur les propriétés logiques, sa valeur ne dépend pas du mode d'écriture de l'élément, de sa direction ou de l'orientation du texte. La syntaxe de cette propriété suit la même structure que {{cssxref("margin")}}, <code>inset</code> est une propriété raccourcie permettant de définir les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et/ou {{cssxref("left")}}.</p>
+La propriété **`inset`** définit les décalages physiques d'un élément. Bien qu'elle fasse partie de la spécification sur les propriétés logiques, sa valeur ne dépend pas du mode d'écriture de l'élément, de sa direction ou de l'orientation du texte. La syntaxe de cette propriété suit la même structure que {{cssxref("margin")}}, `inset` est une propriété raccourcie permettant de définir les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et/ou {{cssxref("left")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueurs */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueurs */
+/* Type <length> */
 inset: 10px; /* la valeur est appliquée à l'ensemble des côtés */
 inset: 4px 8px; /* haut/bas gauche/droit */
 inset: 5px 15px 10px; /* haut gauche/droit bas */
@@ -30,24 +31,24 @@ inset: auto;
 inset: inherit;
 inset: initial;
 inset: unset;
+```
 
-</pre>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+### Valeurs
 
-<h3 id="Valeurs">Valeurs</h3>
+La propriété `inset` prend les mêmes valeurs que la propriété {{cssxref("left")}}.
 
-<p>La propriété <code>inset</code> prend les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 150px;
   height: 120px;
@@ -59,55 +60,41 @@ inset: unset;
   position: absolute;
   inset: 20px 40px 30px 10px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;span class="texteExemple"&gt;Texte d'exemple&lt;/span&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.inset")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété raccourcie physique {{cssxref("margin")}}</li>
- <li>Les propriétés physiques détaillées :
-  <ul>
-   <li>{{cssxref("top")}},</li>
-   <li>{{cssxref("right")}},</li>
-   <li>{{cssxref("bottom")}},</li>
-   <li>{{cssxref("left")}}</li>
-  </ul>
- </li>
- <li>Les propriétés utilisées pour les autres propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <span class="texteExemple">Texte d'exemple</span>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.inset")}}
+
+## Voir aussi
+
+- La propriété raccourcie physique {{cssxref("margin")}}
+- Les propriétés physiques détaillées :
+
+  - {{cssxref("top")}},
+  - {{cssxref("right")}},
+  - {{cssxref("bottom")}},
+  - {{cssxref("left")}}
+
+- Les propriétés utilisées pour les autres propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/integer/index.md b/files/fr/web/css/integer/index.md
index c0fe723597..6b35f764da 100644
--- a/files/fr/web/css/integer/index.md
+++ b/files/fr/web/css/integer/index.md
@@ -7,87 +7,60 @@ tags:
   - Type
 translation_of: Web/CSS/integer
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée CSS <strong><code>&lt;integer&gt;</code></strong> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat()")}}. Ce type est un sous-type de {{cssxref("number")}}.</p>
+Le type de donnée CSS **`<integer>`** permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat()")}}. Ce type est un sous-type de {{cssxref("number")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Un entier se compose d'un ou de plusieurs chiffres, de 0 à 9, éventuellement précédés par un seul signe <code>+</code> ou <code>-</code>. Il n'y a pas d'unité pour ce type de donnée.</p>
+Un entier se compose d'un ou de plusieurs chiffres, de 0 à 9, éventuellement précédés par un seul signe `+` ou `-`. Il n'y a pas d'unité pour ce type de donnée.
 
-<p>Toutes les valeurs de type <code>&lt;integer&gt;</code> sont également des valeurs de type {{cssxref("&lt;number&gt;")}}, bien que l'inverse ne soit pas vrai.</p>
+Toutes les valeurs de type `<integer>` sont également des valeurs de type {{cssxref("&lt;number&gt;")}}, bien que l'inverse ne soit pas vrai.
 
-<div class="note">
-  <p><strong>Note :</strong> Il n'y a pas de bornes à l'ensemble des valeurs de type <code>&lt;entier&gt;</code> valides. Opera supporte des valeurs jusqu'à 2^15-1, IE jusqu'à 2^20-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-2^27</sup>-1; 2^27</sup>-1] <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a> mais d'autres valeurs comme 2^24-1 et 2^30-1 ont aussi été proposées <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. Le dernier brouillon ne fait plus apparaître de limite.</p>
-</div>
+> **Note :** Il n'y a pas de bornes à l'ensemble des valeurs de type `<entier>` valides. Opera supporte des valeurs jusqu'à 2^15-1, IE jusqu'à 2^20-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était \[-2^27-1; 2^27-1] [#](https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html) mais d'autres valeurs comme 2^24-1 et 2^30-1 ont aussi été proposées [#](https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html) [#](https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html). Le dernier brouillon ne fait plus apparaître de limite.
 
-<h2 id="Interpolation">Interpolation</h2>
+## Interpolation
 
-<p>Les valeurs du type <code>&lt;entier&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction <a href="https://fr.wikipedia.org/wiki/Partie_enti%C3%A8re_et_partie_fractionnaire#Fonction_partie_enti.C3.A8re">partie entière</a>. La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation")}} associée à l'animation.</p>
+Les valeurs du type `<entier>` peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction [partie entière](https://fr.wikipedia.org/wiki/Partie_enti%C3%A8re_et_partie_fractionnaire#Fonction_partie_enti.C3.A8re). La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation")}} associée à l'animation.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ces valeurs sont des entiers valides :</p>
+Ces valeurs sont des entiers valides :
 
-<pre class="brush: css">12          Entier positif (sans le signe + à l'avant)
+```css
+12          Entier positif (sans le signe + à l'avant)
 +123        Entier positif (avec le signe + à l'avant)
 -456        Entier négatif
 0           Zéro
 +0          Zéro, avec un signe + à l'avant
 -0          Zéro, avec un signe - à l'avant (bien qu'étrange, cette valeur est acceptée)
-</pre>
+```
 
-<p>Ces valeurs sont des entiers non valides :</p>
+Ces valeurs sont des entiers non valides :
 
-<pre class="brush: css example-bad">12.0        Ceci est un {{cssxref("&lt;number&gt;")}}, pas un &lt;entier&gt;, bien qu'il représente un entier
-12.         Le point ne peut pas faire partie d'un &lt;entier&gt;
+```css example-bad
+12.0        Ceci est un {{cssxref("&lt;number&gt;")}}, pas un <entier>, bien qu'il représente un entier
+12.         Le point ne peut pas faire partie d'un <entier>
 +---12      Un seul +/- à l'avant est accepté
 ten         Les lettres ne sont pas acceptées
 _5          Les caractères spéciaux ne sont pas acceptés
 \35         Les caractères Unicode échappés ne sont pas acceptés, même s'ils sont un entier (ici : 5)
 \4E94       Les chiffres non-arabes ne sont pas acceptés, même échappés (ici : le 5 japonais, 五)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#integers', '&lt;integer&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Aucune modification depuis la spécification CSS de niveau 2 (première révision)</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition implicite.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '', '&lt;integer&gt;')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition implicite.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.integer")}}</p>
-
-<h2 id="Voir_aussi"> Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("&lt;number&gt;")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires                                                                    |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Values', '#integers', '&lt;integer&gt;')}}         | {{Spec2('CSS4 Values')}} | Aucune modification significative.                                              |
+| {{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}         | {{Spec2('CSS3 Values')}} | Aucune modification depuis la spécification CSS de niveau 2 (première révision) |
+| {{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}} | {{Spec2('CSS2.1')}}         | Définition implicite.                                                           |
+| {{SpecName('CSS1', '', '&lt;integer&gt;')}}                                 | {{Spec2('CSS1')}}         | Définition implicite.                                                           |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.integer")}}
+
+##  Voir aussi
+
+- {{cssxref("&lt;number&gt;")}}
diff --git a/files/fr/web/css/isolation/index.md b/files/fr/web/css/isolation/index.md
index 3805c54c08..df078f89d1 100644
--- a/files/fr/web/css/isolation/index.md
+++ b/files/fr/web/css/isolation/index.md
@@ -8,17 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/isolation
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>isolation</code></strong> indique que l'élément crée un nouveau contexte d'empilement (<em>stacking context</em>).</p>
+La propriété **`isolation`** indique que l'élément crée un nouveau contexte d'empilement (_stacking context_).
 
-<div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div>
+{{EmbedInteractiveExample("pages/css/isolation.html")}}
 
-<p>Cette propriété s'avère particulièrement utile avec {{cssxref("mix-blend-mode")}} afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.</p>
+Cette propriété s'avère particulièrement utile avec {{cssxref("mix-blend-mode")}} afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec mots-clés */
+```css
+/* Valeurs avec mots-clés */
 isolation: auto;
 isolation: isolate;
 
@@ -26,28 +27,27 @@ isolation: isolate;
 isolation: inherit;
 isolation: initial;
 isolation: unset;
-</pre>
+```
 
-<p>La propriété <code>isolation</code> est définie avec l'un des mots-clés suivants.</p>
+La propriété `isolation` est définie avec l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé uniquement si une propriété appliquée à l'élément le rend nécessaire.</dd>
- <dt><code>isolate</code></dt>
- <dd>Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé.</dd>
-</dl>
+- `auto`
+  - : Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé uniquement si une propriété appliquée à l'élément le rend nécessaire.
+- `isolate`
+  - : Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.a {
+```css
+.a {
   background-color: rgb(0,255,0);
 }
 #b {
@@ -66,53 +66,40 @@ isolation: unset;
 }
 #e {
   isolation: isolate;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="b" class="a"&gt;
-  &lt;div id="d"&gt;
-    &lt;div class="a c"&gt;auto&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div id="e"&gt;
-    &lt;div class="a c"&gt;isolate&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 230, 230)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compositing', '#isolation', 'Isolation')}}</td>
-   <td>{{Spec2('Compositing')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.isolation")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
- <li>{{cssxref("mix-blend-mode")}}</li>
- <li>{{cssxref("background-blend-mode")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div id="b" class="a">
+  <div id="d">
+    <div class="a c">auto</div>
+  </div>
+  <div id="e">
+    <div class="a c">isolate</div>
+  </div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 230, 230)}}
+
+## Spécifications
+
+| Spécification                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('Compositing', '#isolation', 'Isolation')}} | {{Spec2('Compositing')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.isolation")}}
+
+## Voir aussi
+
+- {{cssxref("&lt;blend-mode&gt;")}}
+- {{cssxref("mix-blend-mode")}}
+- {{cssxref("background-blend-mode")}}
diff --git a/files/fr/web/css/justify-content/index.md b/files/fr/web/css/justify-content/index.md
index 548aba3f62..1375e696b0 100644
--- a/files/fr/web/css/justify-content/index.md
+++ b/files/fr/web/css/justify-content/index.md
@@ -8,19 +8,20 @@ tags:
   - flexbox
 translation_of: Web/CSS/justify-content
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>justify-content</code></strong> indique la façon dont l'espace doit être réparti entre et autour des éléments selon <a href="/fr/docs/Web/CSS/CSS_Box_Alignment#Concepts_majeurs_et_terminologie">l'axe principal</a> d'un conteneur flexible ou selon l'axe en ligne lorsque le conteneur est une grille.</p>
+La propriété CSS **`justify-content`** indique la façon dont l'espace doit être réparti entre et autour des éléments selon [l'axe principal](/fr/docs/Web/CSS/CSS_Box_Alignment#Concepts_majeurs_et_terminologie) d'un conteneur flexible ou selon l'axe en ligne lorsque le conteneur est une grille.
 
-<p>L'exemple suivant illustre le fonctionnement des valeurs de cette propriété au sein d'une grille CSS.</p>
+L'exemple suivant illustre le fonctionnement des valeurs de cette propriété au sein d'une grille CSS.
 
-<div>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</div>
+{{EmbedInteractiveExample("pages/css/justify-content.html")}}
 
-<p>L'alignement est appliqué après que les longueurs et les marges automatiques ont été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel {{cssxref("flex-grow")}} est différent de <code>0</code>, <code>justify-content</code> n'aura aucun effet car il n'y aura plus d'espace disponible.</p>
+L'alignement est appliqué après que les longueurs et les marges automatiques ont été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel {{cssxref("flex-grow")}} est différent de `0`, `justify-content` n'aura aucun effet car il n'y aura plus d'espace disponible.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Alignement « géométrique » */
+```css
+/* Alignement « géométrique » */
 justify-content: center;     /* Éléments groupés au centre */
 justify-content: start;      /* Éléments groupés au début */
 justify-content: end;        /* Éléments groupés à la fin */
@@ -60,139 +61,122 @@ justify-content: unsafe center;
 justify-content: inherit;
 justify-content: initial;
 justify-content: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>start</code></dt>
- <dd>Les éléments sont regroupés au début du conteneur selon l'axe principal. Le bord du premier élément est aligné avec le bord du conteneur.</dd>
- <dt><code>end</code></dt>
- <dd>Les éléments sont regroupés à la fin du conteneur selon l'axe principal. Le bord du dernier élément est aligné avec le bord du conteneur.</dd>
- <dt><code>flex-start</code></dt>
- <dd>Les éléments sont regroupés vers le début du conteneur, selon l'axe principal et le sens du conteneur flexible.<br>
- Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de <code>start</code>.</dd>
- <dt><code>flex-end</code></dt>
- <dd>Les éléments sont regroupés vers la fin du conteneur, selon l'axe principal et le sens du conteneur flexible.<br>
- Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de <code>end</code>.</dd>
- <dt><code>center</code></dt>
- <dd>Les éléments sont regroupés au centre du conteneur selon l'axe principal.</dd>
- <dt><code>left</code></dt>
- <dd>Les éléments sont regroupés vers le bord gauche du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de <code>start</code>.</dd>
- <dt><code>right</code></dt>
- <dd>Les éléments sont regroupés vers le bord droit du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de <code>start</code>.</dd>
- <dt><code>normal</code></dt>
- <dd>Les éléments sont groupés sur leur position par défaut, comme si <code>justify-content</code> n'avait pas été utilisé. Cette valeur se comporte comme <code>stretch</code> dans les conteneurs de grille et les conteneurs flexibles.</dd>
- <dt><code>space-between</code></dt>
- <dd>Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est aussi aligné sur le bord de l'élément.</dd>
- <dt><code>space-around</code></dt>
- <dd>Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. L'espace entre le bord du conteneur et le premier élément et l'espace entre le dernier élément et le bord du conteneur représente la moitié de l'espace entre deux éléments.</dd>
- <dt><code>space-evenly</code></dt>
- <dd>Les éléments sont espacés équitablement. L'espace utilisé entre chaque élément, entre le bord du conteneur et le premier élément, et entre le dernier élément et le bord du conteneur est le même.</dd>
- <dt><code>stretch</code></dt>
- <dd>Si la somme des tailles des éléments sur l'axe principal est inférieure à la taille du conteneur, tous les éléments dimensionnés avec <code>auto</code> sont agrandis avec le même supplément, tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités analogues). Ainsi, l'ensemble des éléments remplit exactement le conteneur sur l'axe principal.<br>
- La valeur <code>stretch</code> n'est pas prise en charge pour les boîtes flexibles (<em>flexbox</em>)</dd>
- <dt><code>safe</code></dt>
- <dd>Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Si le mot-clé choisi indique que le dépassement de l'objet entraîne la perte de donnée, alors l'élément sera plutôt aligné avec la valeur <code>start</code>.</dd>
- <dt><code>unsafe</code></dt>
- <dd>Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Quelle que soit la situation de dépassement ou les contraintes de taille, la valeur utilisée pour l'alignement est respectée.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `start`
+  - : Les éléments sont regroupés au début du conteneur selon l'axe principal. Le bord du premier élément est aligné avec le bord du conteneur.
+- `end`
+  - : Les éléments sont regroupés à la fin du conteneur selon l'axe principal. Le bord du dernier élément est aligné avec le bord du conteneur.
+- `flex-start`
+  - : Les éléments sont regroupés vers le début du conteneur, selon l'axe principal et le sens du conteneur flexible.
+    Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de `start`.
+- `flex-end`
+  - : Les éléments sont regroupés vers la fin du conteneur, selon l'axe principal et le sens du conteneur flexible.
+    Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de `end`.
+- `center`
+  - : Les éléments sont regroupés au centre du conteneur selon l'axe principal.
+- `left`
+  - : Les éléments sont regroupés vers le bord gauche du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de `start`.
+- `right`
+  - : Les éléments sont regroupés vers le bord droit du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de `start`.
+- `normal`
+  - : Les éléments sont groupés sur leur position par défaut, comme si `justify-content` n'avait pas été utilisé. Cette valeur se comporte comme `stretch` dans les conteneurs de grille et les conteneurs flexibles.
+- `space-between`
+  - : Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est aussi aligné sur le bord de l'élément.
+- `space-around`
+  - : Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. L'espace entre le bord du conteneur et le premier élément et l'espace entre le dernier élément et le bord du conteneur représente la moitié de l'espace entre deux éléments.
+- `space-evenly`
+  - : Les éléments sont espacés équitablement. L'espace utilisé entre chaque élément, entre le bord du conteneur et le premier élément, et entre le dernier élément et le bord du conteneur est le même.
+- `stretch`
+  - : Si la somme des tailles des éléments sur l'axe principal est inférieure à la taille du conteneur, tous les éléments dimensionnés avec `auto` sont agrandis avec le même supplément, tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités analogues). Ainsi, l'ensemble des éléments remplit exactement le conteneur sur l'axe principal.
+    La valeur `stretch` n'est pas prise en charge pour les boîtes flexibles (_flexbox_)
+- `safe`
+  - : Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Si le mot-clé choisi indique que le dépassement de l'objet entraîne la perte de donnée, alors l'élément sera plutôt aligné avec la valeur `start`.
+- `unsafe`
+  - : Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Quelle que soit la situation de dépassement ou les contraintes de taille, la valeur utilisée pour l'alignement est respectée.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   display: flex;
   /* Cette valeur peut être changée dans l'exemple */
   justify-content: space-between;
 }
 
-#container &gt; div {
+#container > div {
   width: 100px;
   height: 100px;
   background: linear-gradient(-45deg, #788cff, #b4c8ff);
 }
-</pre>
-
-<pre class="brush: html hidden">&lt;div id="container"&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;select id="justifyContent"&gt;
-  &lt;option value="start"&gt;start&lt;/option&gt;
-  &lt;option value="end"&gt;end&lt;/option&gt;
-  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
-  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
-  &lt;option value="center"&gt;center&lt;/option&gt;
-  &lt;option value="left"&gt;left&lt;/option&gt;
-  &lt;option value="right"&gt;right&lt;/option&gt;
-  &lt;option value="baseline"&gt;baseline&lt;/option&gt;
-  &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
-  &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
-  &lt;option value="space-between" selected&gt;space-between&lt;/option&gt;
-  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
-  &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
-  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
-&lt;/select&gt;</pre>
-
-<pre class="brush: js hidden">var justifyContent = document.getElementById("justifyContent");
+```
+
+```html hidden
+<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+<select id="justifyContent">
+  <option value="start">start</option>
+  <option value="end">end</option>
+  <option value="flex-start">flex-start</option>
+  <option value="flex-end">flex-end</option>
+  <option value="center">center</option>
+  <option value="left">left</option>
+  <option value="right">right</option>
+  <option value="baseline">baseline</option>
+  <option value="first baseline">first baseline</option>
+  <option value="last baseline">last baseline</option>
+  <option value="space-between" selected>space-between</option>
+  <option value="space-around">space-around</option>
+  <option value="space-evenly">space-evenly</option>
+  <option value="stretch">stretch</option>
+</select>
+```
+
+```js hidden
+var justifyContent = document.getElementById("justifyContent");
 justifyContent.addEventListener("change", function (evt) {
   document.getElementById("container").style.justifyContent =
       evt.target.value;
 });
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", 140)}}</p>
+{{EmbedLiveSample("Exemples", "100%", 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}</td>
-   <td>{{Spec2('CSS3 Box Alignment')}}</td>
-   <td>Ajout des valeurs <code>space-evenly, [ first | last ]? baseline</code>, <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code>, <code>safe</code> et <code>unsafe</code>.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                     | Commentaires                                                                                                        |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}         | {{Spec2('CSS3 Flexbox')}}         | Définition initiale.                                                                                                |
+| {{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}} | {{Spec2('CSS3 Box Alignment')}} | Ajout des valeurs `space-evenly, [ first \| last ]? baseline`, `start`, `end`, `left`, `right`, `safe` et `unsafe`. |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+### Prise en charge pour les dispositions flexibles
 
-<p>{{Compat("css.properties.justify-content.flex_context")}}</p>
+{{Compat("css.properties.justify-content.flex_context")}}
 
-<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+### Prise en charge pour les grilles
 
-<p>{{Compat("css.properties.justify-content.grid_context")}}</p>
+{{Compat("css.properties.justify-content.grid_context")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
- <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
-</ul>
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_
+- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible)_
+- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)_
+- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)
diff --git a/files/fr/web/css/justify-items/index.md b/files/fr/web/css/justify-items/index.md
index 419349d270..74301a9778 100644
--- a/files/fr/web/css/justify-items/index.md
+++ b/files/fr/web/css/justify-items/index.md
@@ -7,25 +7,24 @@ tags:
   - Reference
 translation_of: Web/CSS/justify-items
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>justify-items</code></strong> définit la valeur par défaut de {{cssxref("justify-self")}} pour tous les éléments d'une boîte et permet ainsi de définir le comportement par défaut pour la justification des éléments d'une boîte le long de l'axe en ligne (c'est-à-dire l'axe correspondant au sens d'écriture).</p>
+La propriété CSS **`justify-items`** définit la valeur par défaut de {{cssxref("justify-self")}} pour tous les éléments d'une boîte et permet ainsi de définir le comportement par défaut pour la justification des éléments d'une boîte le long de l'axe en ligne (c'est-à-dire l'axe correspondant au sens d'écriture).
 
-<div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div>
+{{EmbedInteractiveExample("pages/css/justify-items.html")}}
 
-<p>L'effet de cette propriété sera différent selon le type de disposition utilisé :</p>
+L'effet de cette propriété sera différent selon le type de disposition utilisé :
 
-<ul>
- <li>Pour les dispositions de bloc : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant.</li>
- <li>Pour les éléments positionnés de façon absolue : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant en prenant en compte les valeurs de décalage par rapport au haut, à la gauche, au bas et à la droite.</li>
- <li>Pour les cellules de tableau, cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau">en savoir plus</a>).</li>
- <li>Pour les dispositions flexibles (<em>flexbox</em>), cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">en savoir plus</a>).</li>
- <li>Pour les grilles, cette propriété aligne l'élément sur la zone de la grille à laquelle il appartient selon l'axe en ligne (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">en savoir plus</a>).</li>
-</ul>
+- Pour les dispositions de bloc : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant.
+- Pour les éléments positionnés de façon absolue : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant en prenant en compte les valeurs de décalage par rapport au haut, à la gauche, au bas et à la droite.
+- Pour les cellules de tableau, cette propriété est ignorée ([en savoir plus](/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau)).
+- Pour les dispositions flexibles (_flexbox_), cette propriété est ignorée ([en savoir plus](/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox)).
+- Pour les grilles, cette propriété aligne l'élément sur la zone de la grille à laquelle il appartient selon l'axe en ligne ([en savoir plus](/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille)).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Mots-clés de base */
+```css
+/* Mots-clés de base */
 justify-items: auto;
 justify-items: normal;
 justify-items: stretch;
@@ -59,81 +58,76 @@ justify-items: legacy center;
 justify-items: inherit;
 justify-items: initial;
 justify-items: unset;
-</pre>
-
-<p>Cette propriété peut être définie selon trois formes différentes :</p>
-
-<ul>
- <li>Grâce à un mot-clé : <code>normal</code>, <code>auto</code> ou <code>stretch</code>.</li>
- <li>Relativement à la ligne de base : dans ce cas, on a le mot-clé <code>baseline</code> éventuellement suivi de <code>first</code> ou de <code>last</code></li>
- <li>Grâce à un positionnement :
-  <ul>
-   <li>Un mot-clé parmi : <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code> ou <code>right</code></li>
-   <li>Puis éventuellement <code>safe</code> ou <code>unsafe</code></li>
-  </ul>
- </li>
- <li>Grâce à un alignement tel que précédemment spécifié : le mot-clé<code> legacy</code> suivi de <code>left</code> ou de <code>right</code>.</li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>La valeur utilisée est celle de la propriété <code>justify-items</code> pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, <code>auto</code> sera synonyme de <code>normal</code>.</dd>
- <dt><code>normal</code></dt>
- <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
- <ul>
-  <li>Pour une disposition en bloc, <code>normal</code> est synonyme de <code>start</code>.</li>
-  <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li>
-  <li>Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li>
-  <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li>
-  <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li>
- </ul>
- </dd>
- <dt><code>start</code></dt>
- <dd>Les éléments sont regroupés vers le début du conteneur pour l'axe en ligne.</dd>
- <dt><code>end</code></dt>
- <dd>Les éléments sont regroupés vers la fin du conteneur pour l'axe en ligne.</dd>
- <dt><code>flex-start</code></dt>
- <dd>Les éléments sont regroupés vers le début du conteneur flexible pour l'axe en ligne.<br>
- Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd>
- <dt><code>flex-end</code></dt>
- <dd>Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe en ligne.<br>
- Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd>
- <dt><code>self-start</code></dt>
- <dd>Les éléments sont alignés sur le bord du conteneur au début de l'axe en ligne.</dd>
- <dt><code>self-end</code></dt>
- <dd>Les éléments sont alignés sur le bord du conteneur à la fin de l'axe en ligne.</dd>
- <dt><code>center</code></dt>
- <dd>Les éléments sont regroupés au centre du conteneur dans le sens de l'axe en ligne.</dd>
- <dt><code>left</code></dt>
- <dd>Les éléments sont alignés vers la gauche du conteneur dans le sens de l'axe en ligne.</dd>
- <dt><code>right</code></dt>
- <dd>Les éléments sont alignés vers la droite du conteneur dans le sens de l'axe en ligne.</dd>
- <dt><code>baseline<br>
- first baseline</code><br>
- <code>last baseline</code></dt>
- <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
- Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
- <dt><code>stretch</code></dt>
- <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
- <dt><code>safe</code></dt>
- <dd>Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur <code>start</code> avait été utilisée.</dd>
- <dt><code>unsafe</code></dt>
- <dd>Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.</dd>
- <dt><code>legacy</code></dt>
- <dd>La valeur est héritée par les éléments descendants de la boîte. Si un élément descendant a <code>justify-self: auto</code>, le mot-clé <code>legacy</code> ne sera pas pris en compte mais uniquement la valeur <code>left</code>, <code>right</code>, ou <code>center</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Cette propriété peut être définie selon trois formes différentes :
+
+- Grâce à un mot-clé : `normal`, `auto` ou `stretch`.
+- Relativement à la ligne de base : dans ce cas, on a le mot-clé `baseline` éventuellement suivi de `first` ou de `last`
+- Grâce à un positionnement :
+
+  - Un mot-clé parmi : `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left` ou `right`
+  - Puis éventuellement `safe` ou `unsafe`
+
+- Grâce à un alignement tel que précédemment spécifié : le mot-clé` legacy` suivi de `left` ou de `right`.
+
+### Valeurs
+
+- `auto`
+  - : La valeur utilisée est celle de la propriété `justify-items` pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, `auto` sera synonyme de `normal`.
+- `normal`
+
+  - : Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
+
+    - Pour une disposition en bloc, `normal` est synonyme de `start`.
+    - Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme `start` pour les boîtes des éléments remplacés ou comme `stretch` pour les autres boîtes positionnées de façon absolue.
+    - Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.
+    - Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée*.*
+    - Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de `stretch`, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de `start`.
+
+- `start`
+  - : Les éléments sont regroupés vers le début du conteneur pour l'axe en ligne.
+- `end`
+  - : Les éléments sont regroupés vers la fin du conteneur pour l'axe en ligne.
+- `flex-start`
+  - : Les éléments sont regroupés vers le début du conteneur flexible pour l'axe en ligne.
+    Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `start`.
+- `flex-end`
+  - : Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe en ligne.
+    Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `end`.
+- `self-start`
+  - : Les éléments sont alignés sur le bord du conteneur au début de l'axe en ligne.
+- `self-end`
+  - : Les éléments sont alignés sur le bord du conteneur à la fin de l'axe en ligne.
+- `center`
+  - : Les éléments sont regroupés au centre du conteneur dans le sens de l'axe en ligne.
+- `left`
+  - : Les éléments sont alignés vers la gauche du conteneur dans le sens de l'axe en ligne.
+- `right`
+  - : Les éléments sont alignés vers la droite du conteneur dans le sens de l'axe en ligne.
+- `baseline first baseline`
+  `last baseline`
+  - : Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.
+    Si `first baseline` n'est pas prise en charge, la valeur correspondra à `start`, si `last baseline` n'est pas prise en charge, la valeur correspondra à `end`.
+- `stretch`
+  - : Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.
+- `safe`
+  - : Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur `start` avait été utilisée.
+- `unsafe`
+  - : Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.
+- `legacy`
+  - : La valeur est héritée par les éléments descendants de la boîte. Si un élément descendant a `justify-self: auto`, le mot-clé `legacy` ne sera pas pris en compte mais uniquement la valeur `left`, `right`, ou `center`.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -141,16 +135,17 @@ justify-items: unset;
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(3,100px);
@@ -176,59 +171,45 @@ justify-items: unset;
 .item4 {
   grid-area: d;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '500', '500')}}</p>
+{{EmbedLiveSample('Exemples', '500', '500')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. |
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+### Prise en charge pour les dispositions flexibles
 
-<p>{{Compat("css.properties.justify-items.flex_context")}}</p>
+{{Compat("css.properties.justify-items.flex_context")}}
 
-<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3>
+### Prise en charge pour les grilles CSS
 
-<p>{{Compat("css.properties.justify-items.grid_context")}}</p>
+{{Compat("css.properties.justify-items.grid_context")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li>
- <li>La propriété {{cssxref("justify-self")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
- <li>La propriété raccourcie {{CSSxRef("place-items")}}</li>
- <li>La propriété {{CSSxRef("align-items")}}</li>
-</ul>
+- [L'alignement des boîtes avec les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)
+- La propriété {{cssxref("justify-self")}}
+- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)
+- La propriété raccourcie {{CSSxRef("place-items")}}
+- La propriété {{CSSxRef("align-items")}}
diff --git a/files/fr/web/css/justify-self/index.md b/files/fr/web/css/justify-self/index.md
index 7537fad71c..9bace72a4f 100644
--- a/files/fr/web/css/justify-self/index.md
+++ b/files/fr/web/css/justify-self/index.md
@@ -7,25 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/justify-self
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>justify-self</code></strong> définit la façon dont une boîte est alignée sur l'axe en ligne du conteneur.</p>
+La propriété CSS **`justify-self`** définit la façon dont une boîte est alignée sur l'axe en ligne du conteneur.
 
-<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div
+{{EmbedInteractiveExample("pages/css/justify-self.html")}}L'effet de cette propriété varie selon le mode de disposition utilisé :
 
-<p>L'effet de cette propriété varie selon le mode de disposition utilisé :</p>
+- Pour les dispositions de bloc : elle permet d'aligner un élément sur l'axe en ligne par rapport à son bloc englobant.
+- Pour les éléments positionnés de façon absolue : elle permet d'aligner un élément dans le bloc englobant par rapport à l'axe en ligne en prenant en compte les valeurs de décalage pour les côtés haut, gauche, bas et droit.
+- Pour les dispositions des cellules de tableau : cette propriété est ignorée ([en savoir plus](/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau)).
+- Pour les dispositions flexibles : cette propriété est ignorée ([en savoir plus](/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox)).
+- Pour les dispositions avec les grilles : cette propriété permet d'aligner un objet sur l'axe en ligne sur la zone de grille à laquelle il appartient ([en savoir plus](/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille)).
 
-<ul>
- <li>Pour les dispositions de bloc : elle permet d'aligner un élément sur l'axe en ligne par rapport à son bloc englobant.</li>
- <li>Pour les éléments positionnés de façon absolue : elle permet d'aligner un élément dans le bloc englobant par rapport à l'axe en ligne en prenant en compte les valeurs de décalage pour les côtés haut, gauche, bas et droit.</li>
- <li>Pour les dispositions des cellules de tableau : cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau">en savoir plus</a>).</li>
- <li>Pour les dispositions flexibles : cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">en savoir plus</a>).</li>
- <li>Pour les dispositions avec les grilles : cette propriété permet d'aligner un objet sur l'axe en ligne sur la zone de grille à laquelle il appartient (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">en savoir plus</a>).</li>
-</ul>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">/* Mots-clés de base */
+```css
+/* Mots-clés de base */
 justify-self: auto;
 justify-self: normal;
 justify-self: stretch;
@@ -54,78 +51,72 @@ justify-self: unsafe center;
 justify-self: inherit;
 justify-self: initial;
 justify-self: unset;
-</pre>
-
-<p>Cette propriété peut être définie selon trois formes différentes :</p>
-
-<ul>
- <li>Grâce à un mot-clé : <code>normal</code>, <code>auto</code> ou <code>stretch</code>.</li>
- <li>Relativement à la ligne de base : dans ce cas, on a le mot-clé <code>baseline</code> éventuellement suivi de <code>first</code> ou de <code>last</code></li>
- <li>Grâce à un positionnement :
-  <ul>
-   <li>Un mot-clé parmi : <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code> ou <code>right</code></li>
-   <li>Puis éventuellement <code>safe</code> ou <code>unsafe</code></li>
-  </ul>
- </li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>La valeur utilisée est celle de la propriété <code>justify-items</code> définie pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, <code>auto</code> sera synonyme de <code>normal</code>.</dd>
- <dt><code>normal</code></dt>
- <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
- <ul>
-  <li>Pour une disposition en bloc, <code>normal</code> est synonyme de <code>start</code>.</li>
-  <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li>
-  <li>Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li>
-  <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li>
-  <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li>
- </ul>
- </dd>
- <dt><code>start</code></dt>
- <dd>L'élément est aligné vers le début du conteneur pour l'axe en ligne.</dd>
- <dt><code>end</code></dt>
- <dd>L'élément est aligné vers la fin du conteneur pour l'axe en ligne.</dd>
- <dt><code>flex-start</code></dt>
- <dd>L'élément est aligné vers le début du conteneur flexible pour l'axe en ligne.<br>
- Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd>
- <dt><code>flex-end</code></dt>
- <dd>L'élément est aligné vers la fin du conteneur flexible pour l'axe en ligne.<br>
- Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd>
- <dt><code>self-start</code></dt>
- <dd>L'élément est aligné sur le bord du conteneur au début de l'axe en ligne.</dd>
- <dt><code>self-end</code></dt>
- <dd>L'élément est aligné sur le bord du conteneur à la fin de l'axe en ligne.</dd>
- <dt><code>center</code></dt>
- <dd>L'élément est aligné au centre du conteneur dans le sens de l'axe en ligne.</dd>
- <dt><code>left</code></dt>
- <dd>L'élément est aligné vers la gauche du conteneur dans le sens de l'axe en ligne.</dd>
- <dt><code>right</code></dt>
- <dd>L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne.</dd>
- <dt><code>baseline<br>
- first baseline</code><br>
- <code>last baseline</code></dt>
- <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
- Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
- <dt><code>stretch</code></dt>
- <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
- <dt><code>safe</code></dt>
- <dd>Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur <code>start</code> avait été utilisée.</dd>
- <dt><code>unsafe</code></dt>
- <dd>Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Cette propriété peut être définie selon trois formes différentes :
+
+- Grâce à un mot-clé : `normal`, `auto` ou `stretch`.
+- Relativement à la ligne de base : dans ce cas, on a le mot-clé `baseline` éventuellement suivi de `first` ou de `last`
+- Grâce à un positionnement :
+
+  - Un mot-clé parmi : `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left` ou `right`
+  - Puis éventuellement `safe` ou `unsafe`
+
+### Valeurs
+
+- `auto`
+  - : La valeur utilisée est celle de la propriété `justify-items` définie pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, `auto` sera synonyme de `normal`.
+- `normal`
+
+  - : Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
+
+    - Pour une disposition en bloc, `normal` est synonyme de `start`.
+    - Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme `start` pour les boîtes des éléments remplacés ou comme `stretch` pour les autres boîtes positionnées de façon absolue.
+    - Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.
+    - Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée*.*
+    - Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de `stretch`, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de `start`.
+
+- `start`
+  - : L'élément est aligné vers le début du conteneur pour l'axe en ligne.
+- `end`
+  - : L'élément est aligné vers la fin du conteneur pour l'axe en ligne.
+- `flex-start`
+  - : L'élément est aligné vers le début du conteneur flexible pour l'axe en ligne.
+    Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `start`.
+- `flex-end`
+  - : L'élément est aligné vers la fin du conteneur flexible pour l'axe en ligne.
+    Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `end`.
+- `self-start`
+  - : L'élément est aligné sur le bord du conteneur au début de l'axe en ligne.
+- `self-end`
+  - : L'élément est aligné sur le bord du conteneur à la fin de l'axe en ligne.
+- `center`
+  - : L'élément est aligné au centre du conteneur dans le sens de l'axe en ligne.
+- `left`
+  - : L'élément est aligné vers la gauche du conteneur dans le sens de l'axe en ligne.
+- `right`
+  - : L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne.
+- `baseline first baseline`
+  `last baseline`
+  - : Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.
+    Si `first baseline` n'est pas prise en charge, la valeur correspondra à `start`, si `last baseline` n'est pas prise en charge, la valeur correspondra à `end`.
+- `stretch`
+  - : Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.
+- `safe`
+  - : Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur `start` avait été utilisée.
+- `unsafe`
+  - : Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css hidden">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -133,16 +124,17 @@ justify-self: unset;
   background-color: #fff4e6;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
   border: 2px solid #ffa94d;
   border-radius: 5px;
   background-color: #ffd8a8;
   padding: 1em;
   color: #d9480f;
 }
-</pre>
+```
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(2, 100px);
   grid-template-rows: repeat(2,100px);
@@ -157,57 +149,43 @@ justify-self: unset;
 .item3 {
   justify-self: end;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
-  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
-  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
-  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '300', '300')}}</p>
+{{EmbedLiveSample('Exemples', '300', '300')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-slef', 'justify-self')}}</td>
-   <td>{{Spec2('CSS3 Box Alignment')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Box Alignment', '#propdef-justify-slef', 'justify-self')}} | {{Spec2('CSS3 Box Alignment')}} | Définition initiale. |
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Prise_en_charge_pour_les_dispositions_flexiblesflexbox">Prise en charge pour les dispositions flexibles/<em>flexbox</em></h3>
+### Prise en charge pour les dispositions flexibles/_flexbox_
 
-<p>{{Compat("css.properties.justify-self.flex_context")}}</p>
+{{Compat("css.properties.justify-self.flex_context")}}
 
-<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3>
+### Prise en charge pour les grilles CSS
 
-<p>{{Compat("css.properties.justify-self.grid_context")}}</p>
+{{Compat("css.properties.justify-self.grid_context")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li>
- <li>La propriété {{cssxref("justify-items")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
-</ul>
+- [L'alignement des boîtes avec les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)
+- La propriété {{cssxref("justify-items")}}
+- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)
diff --git a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.md b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.md
index 395d6d0e69..b86cd42074 100644
--- a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.md
+++ b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.md
@@ -7,42 +7,38 @@ tags:
 translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
 original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La navigation avec un fil d'Ariane (<em>breadcrumb</em>) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.</p>
+La navigation avec un fil d'Ariane (_breadcrumb_) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.
 
-<p><img alt="Links displayed inline with separators" src="breadcrumb-navigation.png"></p>
+![Links displayed inline with separators](breadcrumb-navigation.png)
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p>Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.</p>
+Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.
 
-<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+## Exemple appliqué
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">Télécharger cet exemple</a></p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html)
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<p>L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.</p>
+L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>On utilise ici les attributs <code>aria-label</code> et <code>aria-current</code> afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.</p>
+On utilise ici les attributs `aria-label` et `aria-current` afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Boîtes_flexibles">Boîtes flexibles</h3>
+### Boîtes flexibles
 
-<p>{{Compat("css.properties.flex")}}</p>
+{{Compat("css.properties.flex")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Les boîtes flexibles CSS</a></li>
- <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">Fournir un fil d'Ariane</a></li>
- <li><a href="https://tink.uk/using-the-aria-current-attribute/">Utiliser l'attribut <code>aria-current</code></a></li>
-</ul>
+- [Les boîtes flexibles CSS](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
+- [Fournir un fil d'Ariane](https://www.w3.org/TR/WCAG20-TECHS/G65.html)
+- [Utiliser l'attribut `aria-current`](https://tink.uk/using-the-aria-current-attribute/)
diff --git a/files/fr/web/css/layout_cookbook/card/index.md b/files/fr/web/css/layout_cookbook/card/index.md
index 7e92b24421..eea4811054 100644
--- a/files/fr/web/css/layout_cookbook/card/index.md
+++ b/files/fr/web/css/layout_cookbook/card/index.md
@@ -9,72 +9,68 @@ tags:
 translation_of: Web/CSS/Layout_cookbook/Card
 original_slug: Web/CSS/Layout_cookbook/Carte
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Dans ce guide, nous verrons comment créer des cartes (<em>cards</em> en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.</p>
+Dans ce guide, nous verrons comment créer des cartes (_cards_ en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.
 
-<p><img alt="Three card components in a row" src="cards.png"></p>
+![Three card components in a row](cards.png)
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p>Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.</p>
+Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.
 
-<p>Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.</p>
+Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.
 
-<p>Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.</p>
+Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.
 
-<h2 id="Recette">Recette</h2>
+## Recette
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html">Télécharger cet exemple</a>.</p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html).
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<p>Chaque carte est organisée en utilisant <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une grille CSS</a> bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :</p>
+Chaque carte est organisée en utilisant [une grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :
 
-<pre class="brush: css">.card {
+```css
+.card {
   display: grid;
   grid-template-rows: max-content 200px 1fr;
-}</pre>
+}
+```
 
-<p>La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de <code>1fr</code>. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.</p>
+La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de `1fr`. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.
 
-<p>Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.</p>
+Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.
 
-<div class="note">
-<p><strong>Note :</strong> Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (<em>subgrid</em>), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.</p>
-</div>
+> **Note :** Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (_subgrid_), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.
 
-<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+## Méthodes alternatives
 
-<p>On pourrait également utiliser <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.</p>
+On pourrait également utiliser [les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.
 
-<p>Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser <a href="/fr/docs/Web/CSS/CSS_Columns">une disposition multi-colonnes</a> où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).</p>
+Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser [une disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns) où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).
 
-<p>Voir <a href="/fr/docs/Web/CSS/Layout_cookbook/Column_layouts">la recette sur les colonnes</a> pour observer ces méthodes en action.</p>
+Voir [la recette sur les colonnes](/fr/docs/Web/CSS/Layout_cookbook/Column_layouts) pour observer ces méthodes en action.
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article <a href="https://inclusive-components.design/cards/"><em>Inclusive Components: Card</em> (en anglais)</a>, écrit par Heydon Pickering, pour des explications détaillées à ce propos.</p>
+Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article [_Inclusive Components: Card_ (en anglais)](https://inclusive-components.design/cards/), écrit par Heydon Pickering, pour des explications détaillées à ce propos.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.
 
-<h3 id="grid-template-columns">grid-template-columns</h3>
+### grid-template-columns
 
-<p>{{Compat("css.properties.grid-template-columns")}}</p>
+{{Compat("css.properties.grid-template-columns")}}
 
-<h3 id="grid-template-rows">grid-template-rows</h3>
+### grid-template-rows
 
-<p>{{Compat("css.properties.grid-template-rows")}}</p>
+{{Compat("css.properties.grid-template-rows")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}}</li>
- <li><a href="https://inclusive-components.design/cards/"><em>Inclusive Components: Card</em> (en anglais)</a></li>
-</ul>
+- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}}
+- [_Inclusive Components: Card_ (en anglais)](https://inclusive-components.design/cards/)
diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.md b/files/fr/web/css/layout_cookbook/center_an_element/index.md
index 713d277510..13c7c36aa0 100644
--- a/files/fr/web/css/layout_cookbook/center_an_element/index.md
+++ b/files/fr/web/css/layout_cookbook/center_an_element/index.md
@@ -11,48 +11,44 @@ tags:
 translation_of: Web/CSS/Layout_cookbook/Center_an_element
 original_slug: Web/CSS/Layout_cookbook/Centrer_un_element
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (<em>flexbox</em>), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification <em>Box Alignment</em>.</p>
+Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (_flexbox_), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification _Box Alignment_.
 
-<p><img alt="an element centered inside a larger box" src="cookbook-center.png"></p>
+![an element centered inside a larger box](cookbook-center.png)
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p>Centrer un élément à la fois horizontalement et verticalement dans un autre élément.</p>
+Centrer un élément à la fois horizontalement et verticalement dans un autre élément.
 
-<h2 id="Recette">Recette</h2>
+## Recette
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a></p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html)
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<p>Pour centrer une boîte dans une autre, on a donné au contenant une propriété <code>display: flex</code>.</p>
+Pour centrer une boîte dans une autre, on a donné au contenant une propriété `display: flex`.
 
-<p>Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur <code>center</code> pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur <code>center</code> pour centrer horizontalement.</p>
+Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur `center` pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur `center` pour centrer horizontalement.
 
-<p>À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.<br>
- Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.</p>
+À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.
+Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.</p>
+Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.
 
-<h3 id="align-items"><code>align-items</code></h3>
+### `align-items`
 
-<p>{{Compat("css.properties.align-items")}}</p>
+{{Compat("css.properties.align-items")}}
 
-<h3 id="justify-content"><code>justify-content</code></h3>
+### `justify-content`
 
-<p>{{Compat("css.properties.justify-content")}}</p>
+{{Compat("css.properties.justify-content")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Box alignment guide</a></li>
-</ul>
+- [L'alignement des boîtes avec Flexbox](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)
+- [CSS Box alignment guide](/fr/docs/Web/CSS/CSS_Box_Alignment)
diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.md b/files/fr/web/css/layout_cookbook/column_layouts/index.md
index 8dfa422ffd..a6c52ced06 100644
--- a/files/fr/web/css/layout_cookbook/column_layouts/index.md
+++ b/files/fr/web/css/layout_cookbook/column_layouts/index.md
@@ -10,119 +10,101 @@ tags:
 translation_of: Web/CSS/Layout_cookbook/Column_layouts
 original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.</p>
+Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.
 
-<p><img alt="three different styles of layouts which have two columns in the container." src="cookbook-multiple-columns.png"></p>
+![three different styles of layouts which have two columns in the container.](cookbook-multiple-columns.png)
 
-<h2 id="Prérequis">Prérequis</h2>
+## Prérequis
 
-<p>Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :</p>
+Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :
 
-<ul>
- <li>Un fil continu qui se divise en colonne, à la façon d'un journal papier.</li>
- <li>Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.</li>
- <li>Plusieurs lignes et colonnes qui sont alignées.</li>
-</ul>
+- Un fil continu qui se divise en colonne, à la façon d'un journal papier.
+- Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.
+- Plusieurs lignes et colonnes qui sont alignées.
 
-<h2 id="Les_«_recettes_»">Les « recettes »</h2>
+## Les « recettes »
 
-<p>Selon le scénario souhaité, on utilisera différentes méthodes de disposition.</p>
+Selon le scénario souhaité, on utilisera différentes méthodes de disposition.
 
-<h3 id="Un_fil_continu_de_contenu_-_Disposition_multi-colonnes">Un fil continu de contenu - Disposition multi-colonnes</h3>
+### Un fil continu de contenu - Disposition multi-colonnes
 
-<p>En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.</p>
+En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.
 
-<p>L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.</p>
+L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Télécharger cet exemple</a></p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html)
 
-<p>On utilisera une disposition multi-colonnes lorsque :</p>
+On utilisera une disposition multi-colonnes lorsque :
 
-<ul>
- <li>On souhaite organiser le texte à la façon d'un journal imprimé</li>
- <li>On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes</li>
- <li>Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.</li>
-</ul>
+- On souhaite organiser le texte à la façon d'un journal imprimé
+- On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes
+- Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.
 
-<h3 id="Une_seule_ligne_fragmentée_en_cellules_de_même_taille_—_Utilisation_des_boîtes_flexibles">Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles</h3>
+### Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles
 
-<p>Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur <code>row</code>. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.</p>
+Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur `row`. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.
 
-<p>À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.</p>
+À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Télécharger cet exemple</a></p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html)
 
-<p>Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur <code>wrap</code> sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.</p>
+Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur `wrap` sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Télécharger cet exemple</a></p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html)
 
-<p>On utilisera les boîtes flexibles pour :</p>
+On utilisera les boîtes flexibles pour :
 
-<ul>
- <li>Organiser des lignes ou colonnes d'objets indépendantes</li>
- <li>Aligner les objets sur l'axe orthogonal au sens de lecture</li>
- <li>Les cas où l'alignement d'une ligne sur l'autre n'est pas important</li>
-</ul>
+- Organiser des lignes ou colonnes d'objets indépendantes
+- Aligner les objets sur l'axe orthogonal au sens de lecture
+- Les cas où l'alignement d'une ligne sur l'autre n'est pas important
 
-<h3 id="Aligner_des_objets_en_lignes_et_colonnes_—_Utilisation_d'une_grille">Aligner des objets en lignes et colonnes — Utilisation d'une grille</h3>
+### Aligner des objets en lignes et colonnes — Utilisation d'une grille
 
-<p>Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.</p>
+Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Télécharger cet exemple</a></p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html)
 
-<p>On utiliser les grilles CSS lorsque :</p>
+On utiliser les grilles CSS lorsque :
 
-<ul>
- <li>On a des éléments/objets à organiser sur plusieurs lignes et colonnes</li>
- <li>On souhaite pouvoir aligner les éléments sur les deux axes</li>
-</ul>
+- On a des éléments/objets à organiser sur plusieurs lignes et colonnes
+- On souhaite pouvoir aligner les éléments sur les deux axes
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.
 
-<h3 id="column-width">column-width</h3>
+### column-width
 
-<p>{{Compat("css.properties.column-width")}}</p>
+{{Compat("css.properties.column-width")}}
 
-<h3 id="column-rule">column-rule</h3>
+### column-rule
 
-<p>{{Compat("css.properties.column-rule")}}</p>
+{{Compat("css.properties.column-rule")}}
 
-<h3 id="flex">flex</h3>
+### flex
 
-<p>{{Compat("css.properties.flex")}}</p>
+{{Compat("css.properties.flex")}}
 
-<h3 id="flex-wrap">flex-wrap</h3>
+### flex-wrap
 
-<p>{{Compat("css.properties.flex-wrap")}}</p>
+{{Compat("css.properties.flex-wrap")}}
 
-<h3 id="grid-template-columns">grid-template-columns</h3>
+### grid-template-columns
 
-<p>{{Compat("css.properties.grid-template-columns")}}</p>
+{{Compat("css.properties.grid-template-columns")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Columns">Guide pour les dispositions multi-colonnes</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Guide pour les boîtes flexibles (<em>flexbox</em>)</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Guide pour les grilles CSS</a></li>
-</ul>
+- [Guide pour les dispositions multi-colonnes](/fr/docs/Web/CSS/CSS_Columns)
+- [Guide pour les boîtes flexibles (_flexbox_)](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout)
+- [Guide pour les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout)
diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md
index ac5e39c3e9..769108c896 100644
--- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md
+++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md
@@ -7,57 +7,52 @@ tags:
 translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template
 original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<div class="note">
-  <p><strong>Note :</strong> Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.</p>
-  <p><em>Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.</em>
-</p></div>
+> **Note :** Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.
+>
+> _Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle._
 
-<p><em>Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.</em></p>
+_Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette._
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p><em>Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.</em></p>
+_Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire._
 
-<h2 id="Recette">Recette</h2>
+## Recette
 
-<p><em>Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.</em></p>
+_Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin._
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
 
-<p><em>Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.</em></p>
+_Il faut modifier le lien pour cibler la version téléchargeable de votre exemple._
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a>.</p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html).
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<p><em>Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.</em></p>
+_Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement._
 
-<h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2>
+## Méthodes de recours ou alternatives
 
-<p><em>S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.</em></p>
+_S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici._
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p><em>Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.</em></p>
+_Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette._
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.
 
-<p><em>Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant <code>align-items</code>.</em></p>
+_Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant `align-items`._
 
-<h3 id="align-items">align-items</h3>
+### align-items
 
-<p>{{Compat("css.properties.align-items")}}</p>
+{{Compat("css.properties.align-items")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><em>Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}</em></li>
- <li><em>Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte</em></li>
- <li><em>Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail.</em></li>
-</ul>
+- _Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}_
+- _Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte_
+- _Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail._
diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md
index e5a16b419a..62d542e3ef 100644
--- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md
+++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md
@@ -9,97 +9,85 @@ tags:
 translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe
 original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.</p>
+Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.
 
-<h2 id="Qu'est-ce_qu'une_«_bonne_»_recette">Qu'est-ce qu'une « bonne » recette ?</h2>
+## Qu'est-ce qu'une « bonne » recette ?
 
-<p><strong>Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web.</strong> Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.</p>
+**Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web.** Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.
 
-<div class="note">
-<p><strong>Note :</strong> Quant à la traduction et aux recettes en anglais, une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.</p>
-</div>
+> **Note :** Quant à la traduction et aux recettes en anglais, une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.
 
-<h2 id="Les_étapes_pour_la_publication">Les étapes pour la publication</h2>
+## Les étapes pour la publication
 
-<p>Une recette se décompose comme suit :</p>
+Une recette se décompose comme suit :
 
-<ol>
- <li>Un exemple interactif, stocké <a href="https://github.com/mdn/css-examples">sur le dépôt GitHub des exemples CSS</a></li>
- <li>Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.</li>
- <li>Une page MDN, rattachée à la section <a href="/fr/docs/Web/CSS/Layout_cookbook">Livre de recettes CSS</a> qui contient :
-  <ol>
-   <li>Les spécifications sommaires</li>
-   <li>La recette</li>
-   <li>Les choix effectués</li>
-   <li>Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)</li>
-   <li>Les points relatifs à l'accessibilité</li>
-   <li>La compatibilité des navigateurs</li>
-   <li>D'éventuelles ressources additionnelles</li>
-  </ol>
- </li>
-</ol>
+1.  Un exemple interactif, stocké [sur le dépôt GitHub des exemples CSS](https://github.com/mdn/css-examples)
+2.  Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.
+3.  Une page MDN, rattachée à la section [Livre de recettes CSS](/fr/docs/Web/CSS/Layout_cookbook) qui contient :
 
-<h3 id="1._Construire_le_motif">1. Construire le motif</h3>
+    1.  Les spécifications sommaires
+    2.  La recette
+    3.  Les choix effectués
+    4.  Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)
+    5.  Les points relatifs à l'accessibilité
+    6.  La compatibilité des navigateurs
+    7.  D'éventuelles ressources additionnelles
 
-<p>Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.</p>
+### 1. Construire le motif
 
-<p>Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.</p>
+Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.
 
-<h3 id="2._Créer_un_exemple_interactif">2. Créer un exemple interactif</h3>
+Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.
 
-<p>Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.</p>
+### 2. Créer un exemple interactif
 
-<p>Créez un <em>fork</em> du <a href="https://github.com/mdn/css-examples">dépôt des exemples CSS</a> puis étudiez le dossier <code>css-cookbook</code>. Ce dernier contient un fichier <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html">cookbook-template.html</a> dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire <code>css-cookbook</code> avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.</p>
+Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.
 
-<p>Voici les quelques éléments importants.</p>
+Créez un _fork_ du [dépôt des exemples CSS](https://github.com/mdn/css-examples) puis étudiez le dossier `css-cookbook`. Ce dernier contient un fichier [cookbook-template.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html) dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire `css-cookbook` avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.
 
-<p>Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.</p>
+Voici les quelques éléments importants.
 
-<p>Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.</p>
+Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.
 
-<p>Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe <code>preview</code> puis dans l'élément <code>textarea</code> <code>playable-html</code>.</p>
+Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.
 
-<p>Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  <code>playable-css</code>.</p>
+Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe `preview` puis dans l'élément `textarea` `playable-html`.
 
-<p>Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> qui est utilisé sur la page <a href="/fr/docs/Web/CSS/Layout_cookbook/Center_an_element">Comment centrer un élément</a>.</p>
+Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  `playable-css`.
 
-<p>Si vous avez créé un <em>fork</em> du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.</p>
+Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter [center.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html) qui est utilisé sur la page [Comment centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Center_an_element).
 
-<h4 id="Quelques_conseils">Quelques conseils</h4>
+Si vous avez créé un _fork_ du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.
 
-<ol>
- <li>N'indentez pas le code CSS et HTML à l'intérieur des <code>textarea</code> par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> par exemple).</li>
- <li>Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.</li>
- <li>Vous pouvez ajuster la hauteur des <code>textarea</code> en modifiant la hauteur dans les styles <em>inline</em>/en incise.</li>
-</ol>
+#### Quelques conseils
 
-<h3 id="3._Créer_une_version_téléchargeable">3. Créer une version téléchargeable</h3>
+1.  N'indentez pas le code CSS et HTML à l'intérieur des `textarea` par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir [center.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html) par exemple).
+2.  Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.
+3.  Vous pouvez ajuster la hauteur des `textarea` en modifiant la hauteur dans les styles _inline_/en incise.
 
-<p>L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant <code>--download</code> au nom. Ainsi, <code>center.html</code> possède une version téléchargeable intitulée <code>center--download.html</code>. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à <code>body</code> et qui sont dans la feuille de style intégrée. Vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html">cookbook-template--download.html</a> comme exemple et point de départ.</p>
+### 3. Créer une version téléchargeable
 
-<h3 id="4._Réaliser_une_pull_request_avec_votre_exemple">4. Réaliser une <em>pull request</em> avec votre exemple</h3>
+L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant `--download` au nom. Ainsi, `center.html` possède une version téléchargeable intitulée `center--download.html`. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à `body` et qui sont dans la feuille de style intégrée. Vous pouvez consulter [cookbook-template--download.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html) comme exemple et point de départ.
 
-<p>Ouvrez une <em>pull request</em> depuis votre <em>fork</em> vers le <a href="https://github.com/mdn/css-examples">dépôt des exemples CSS</a>. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la <em>pull request</em>, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.</p>
+### 4. Réaliser une _pull request_ avec votre exemple
 
-<h3 id="5._Créer_la_page_sur_MDN">5. Créer la page sur MDN</h3>
+Ouvrez une _pull request_ depuis votre _fork_ vers le [dépôt des exemples CSS](https://github.com/mdn/css-examples). Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la _pull request_, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.
 
-<p>Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et <a href="/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">des permissions pour la création de page</a>. Vous pourrez alors créer une page comme sous-page de la section. <a href="/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Cette page modèle pourra vous servir de point de départ pour votre contenu</a>.</p>
+### 5. Créer la page sur MDN
 
-<p>Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.</p>
+Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et [des permissions pour la création de page](/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions). Vous pourrez alors créer une page comme sous-page de la section. [Cette page modèle pourra vous servir de point de départ pour votre contenu](/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template).
 
-<div class="note">
-<p><strong>Note :</strong> Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">la page modèle en français</a>.</p>
-</div>
+Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.
 
-<p>Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.</p>
+> **Note :** Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter [la page modèle en français](/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template).
 
-<p>Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur <a href="https://discourse.mozilla.org/c/mdn">le forum Discourse de MDN</a> ou à venir <a href="/fr/docs/MDN/Rejoindre_la_communauté/Conversations#Chat_sur_IRC">discuter sur IRC</a> (ces deux canaux sont principalement anglophones).</p>
+Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur [le forum Discourse de MDN](https://discourse.mozilla.org/c/mdn) ou à venir [discuter sur IRC](/fr/docs/MDN/Rejoindre_la_communauté/Conversations#Chat_sur_IRC) (ces deux canaux sont principalement anglophones).
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Page modèle d'une recette</a></li>
- <li><a href="https://github.com/mdn/css-examples">Dépôt git des exemples CSS</a></li>
-</ul>
+## Voir aussi
+
+- [Page modèle d'une recette](/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template)
+- [Dépôt git des exemples CSS](https://github.com/mdn/css-examples)
diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.md b/files/fr/web/css/layout_cookbook/grid_wrapper/index.md
index 249e8fa898..c48dd59563 100644
--- a/files/fr/web/css/layout_cookbook/grid_wrapper/index.md
+++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.md
@@ -7,33 +7,32 @@ tags:
   - Recette
 translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.</p>
+Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p>Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.</p>
+Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.
 
-<h2 id="Recette">Recette</h2>
+## Recette
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">Télécharger cet exemple</a>.</p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html).
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<p>Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.</p>
+Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.
 
-<p>Les deux colonnes extérieures ont une taille maximale de <code>1fr</code>, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.</p>
+Les deux colonnes extérieures ont une taille maximale de `1fr`, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.
 
-<h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2>
+## Méthodes de recours ou alternatives
 
-<p>Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir <code>max-width</code> et des marges horzontales avec <code>auto</code> afin que le contenu soit centré horizontalement :</p>
+Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir `max-width` et des marges horzontales avec `auto` afin que le contenu soit centré horizontalement :
 
-<pre class="brush: css">.grid {
+```css
+.grid {
   max-width: 1200px;
   margin: 0 auto; // on centre le conteneur en horizontal
   display: grid;
@@ -47,33 +46,34 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
     max-width: none;
     margin: 0;
   }
-}</pre>
+}
+```
 
-<p>Pour qu'un élément soit isolé et colle au bord du <em>viewport</em>, on peut utiliser cette astuce de <a href="https://una.im/">Una Kravets</a> :</p>
+Pour qu'un élément soit isolé et colle au bord du _viewport_, on peut utiliser cette astuce de [Una Kravets](https://una.im/) :
 
-<pre class="brush: css">.item {
+```css
+.item {
   width: 100vw;
   margin-left: 50%;
   transform: translate3d(-50%, 0, 0);
-}</pre>
+}
+```
 
-<p>On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.</p>
+On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">les grilles CSS et l'accessibilité</a> pour plus de détails).</p>
+Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir [les grilles CSS et l'accessibilité](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility) pour plus de détails).
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="grid-template-columns"><code>grid-template-columns</code></h3>
+### `grid-template-columns`
 
-<p>{{Compat("css.properties.grid-template-columns")}}</p>
+{{Compat("css.properties.grid-template-columns")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{Cssxref("grid-template-columns")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS sur MDN</a></li>
- <li>Article :<a href="https://css-irl.info/more-flexibility-with-minmax/"> Les grilles CSS, plus de flexibilité avec <code>minmax()</code> (en anglais)</a></li>
- <li>Article : <a href="https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/">Isoler des éléments sur une grille CSS (en anglais)</a></li>
-</ul>
\ No newline at end of file
+- {{Cssxref("grid-template-columns")}}
+- [Les grilles CSS sur MDN](/fr/docs/Web/CSS/CSS_Grid_Layout)
+- Article :[ Les grilles CSS, plus de flexibilité avec `minmax()` (en anglais)](https://css-irl.info/more-flexibility-with-minmax/)
+- Article : [Isoler des éléments sur une grille CSS (en anglais)](https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/)
diff --git a/files/fr/web/css/layout_cookbook/index.md b/files/fr/web/css/layout_cookbook/index.md
index f3debbc018..9a7a809a9d 100644
--- a/files/fr/web/css/layout_cookbook/index.md
+++ b/files/fr/web/css/layout_cookbook/index.md
@@ -7,78 +7,27 @@ tags:
   - recettes
 translation_of: Web/CSS/Layout_cookbook
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.</p>
+Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.
 
-<div class="note">
-<p><strong>Note :</strong> Si vous débutez en CSS, nous vous conseillons de consulter <a href="/fr/docs/Apprendre/CSS/CSS_layout">notre module sur l'apprentissage de la disposition en CSS</a>. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.</p>
-</div>
+> **Note :** Si vous débutez en CSS, nous vous conseillons de consulter [notre module sur l'apprentissage de la disposition en CSS](/fr/docs/Apprendre/CSS/CSS_layout). Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.
 
-<h2 id="Les_recettes">Les recettes</h2>
+## Les recettes
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Recette</th>
-   <th scope="col">Description</th>
-   <th scope="col">Méthodes de disposition utilisées</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Media_objects">Objets avec média</a></td>
-   <td>Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page).</td>
-   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}}</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">Colonnes</a></td>
-   <td>Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu.</td>
-   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, <a href="/fr/docs/Web/CSS/CSS_Columns">Disposition multi-colonnes</a>, <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element">Centrer un élément</a></td>
-   <td>Comment centrer un élément horizontalement et verticalement.</td>
-   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant">Bas de page adhérant</a></td>
-   <td>Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (<em>viewport</em>) lorsque le contenu est plus petit que la zone ou le conteneur.</td>
-   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée">Navigation segmentée</a></td>
-   <td>Un motif de navigation où certains liens sont séparés des autres.</td>
-   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb">Navigation avec un fil d'Ariane (<em>breadcrumb</em>)</a></td>
-   <td>Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages.</td>
-   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs">Liste de groupes avec indicateurs</a></td>
-   <td>Afficher une liste d'éléments avec chacun un indicateur numérique.</td>
-   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td>
-   <td>Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple).</td>
-   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Carte">Carte</a></td>
-   <td>Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes.</td>
-   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Envelopper une grille (<em>grid wrapper</em>)</a></td>
-   <td>Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords.</td>
-   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></td>
-  </tr>
- </tbody>
-</table>
+| Recette                                                                                                  | Description                                                                                                                                                              | Méthodes de disposition utilisées                                                                                                                                    |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Objets avec média](/fr/docs/Web/CSS/Layout_cookbook/Media_objects)                                      | Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page). | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}} |
+| [Colonnes](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes)                                     | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu.                          | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout)     |
+| [Centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element)                                | Comment centrer un élément horizontalement et verticalement.                                                                                                             | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment)                                                     |
+| [Bas de page adhérant](/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant)                            | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (_viewport_) lorsque le contenu est plus petit que la zone ou le conteneur.             | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout)                                                                 |
+| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée)                            | Un motif de navigation où certains liens sont séparés des autres.                                                                                                        | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}}                                                                                    |
+| [Navigation avec un fil d'Ariane (_breadcrumb_)](/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages.                                                                             | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout)                                                                                                                  |
+| [Liste de groupes avec indicateurs](/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs)     | Afficher une liste d'éléments avec chacun un indicateur numérique.                                                                                                       | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment)                                                     |
+| [Pagination](/fr/docs/Web/CSS/Layout_cookbook/Pagination)                                                | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple).                                                       | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment)                                                     |
+| [Carte](/fr/docs/Web/CSS/Layout_cookbook/Carte)                                                          | Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes.                                                                          | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout)                                                                                                                      |
+| [Envelopper une grille (_grid wrapper_)](/fr/docs/Web/CSS/Layout_cookbook/Grid_wrapper)                  | Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords.                                                           | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout)                                                                                                                      |
 
-<h2 id="Contribuer_en_créant_une_recette">Contribuer en créant une recette</h2>
+## Contribuer en créant une recette
 
-<p>MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribuer_à_une_recette">Voir cette page</a> pour un modèle ainsi que les règles à suivre pour créer votre propre exemple.</p>
+MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! [Voir cette page](/fr/docs/Web/CSS/Layout_cookbook/Contribuer_à_une_recette) pour un modèle ainsi que les règles à suivre pour créer votre propre exemple.
diff --git a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.md b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.md
index 98a8a06891..d840eda9cf 100644
--- a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.md
+++ b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.md
@@ -8,47 +8,43 @@ tags:
 translation_of: Web/CSS/Layout_cookbook/List_group_with_badges
 original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (<em>badge</em>).</p>
+Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (_badge_).
 
-<p><img alt="A list of items with a badge indicating a count displayed to the right of the text." src="list-group-badges.png"></p>
+![A list of items with a badge indicating a count displayed to the right of the text.](list-group-badges.png)
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p>Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.</p>
+Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.
 
-<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+## Exemple appliqué
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}
 
-<div class="note">
-  <p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">Télécharger l'exemple</a>.</p>
-</div>
+> **Note :** [Télécharger l'exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html).
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<p>Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.</p>
+Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.
 
-<p>Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété <code>justify-content</code> avec la valeur <code>space-between</code>. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.</p>
+Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété `justify-content` avec la valeur `space-between`. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.
 
-<p>Pour aligner le contenu horizontalement, on utilise la propriété <code>align-items</code> afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser <code>align-items: flex-start</code> à la place.</p>
+Pour aligner le contenu horizontalement, on utilise la propriété `align-items` afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser `align-items: flex-start` à la place.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.</p>
+Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.
 
-<h3 id="justify-content">justify-content</h3>
+### justify-content
 
-<p>{{Compat("css.properties.justify-content")}}</p>
+{{Compat("css.properties.justify-content")}}
 
-<h3 id="align-items">align-items</h3>
+### align-items
 
-<p>{{Compat("css.properties.align-items")}}</p>
+{{Compat("css.properties.align-items")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Alignement des boîtes avec les boîtes flexibles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></li>
-</ul>
+- [Alignement des boîtes avec les boîtes flexibles](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox)
+- [Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)
diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.md b/files/fr/web/css/layout_cookbook/media_objects/index.md
index 8c2ca3ae1e..ecab120c44 100644
--- a/files/fr/web/css/layout_cookbook/media_objects/index.md
+++ b/files/fr/web/css/layout_cookbook/media_objects/index.md
@@ -7,81 +7,68 @@ tags:
   - Recette
 translation_of: Web/CSS/Layout_cookbook/Media_objects
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p>
+Le motif _Media Object_ (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. [Intitulé ainsi par Nicole Sullivan](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/), cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).
 
-<p><img alt="" src="media-object.png"></p>
+![](media-object.png)
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p>Voici ce qu'on souhaite obtenir :</p>
+Voici ce qu'on souhaite obtenir :
 
-<ul>
- <li>Un empilement des deux zones sur mobile et deux colonnes sur ordinateur</li>
- <li>L'image peut être à gauche ou à droite</li>
- <li>L'image peut être petite ou grande</li>
- <li>Les objets avec média peuvent être imbriqués</li>
- <li>L'objet avec média devrait dégager l'espace pour le contenu, quel que soit le côté le plus grand.</li>
-</ul>
+- Un empilement des deux zones sur mobile et deux colonnes sur ordinateur
+- L'image peut être à gauche ou à droite
+- L'image peut être petite ou grande
+- Les objets avec média peuvent être imbriqués
+- L'objet avec média devrait dégager l'espace pour le contenu, quel que soit le côté le plus grand.
 
-<h2 id="Recette">Recette</h2>
+## Recette
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html).
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<p>On a ici choisi d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une grille</a> pour réaliser cet objet. cela permet de contrôler les deux dimensions lorsqu'on en a besoin. Ainsi, si on a besoin d'un pied de page avec un contenu au dessus, le pied de page peut être poussé sous l'objet.</p>
+On a ici choisi d'utiliser [une grille](/fr/docs/Web/CSS/CSS_Grid_Layout) pour réaliser cet objet. cela permet de contrôler les deux dimensions lorsqu'on en a besoin. Ainsi, si on a besoin d'un pied de page avec un contenu au dessus, le pied de page peut être poussé sous l'objet.
 
-<p>La grille permet également d'utiliser {{cssxref("fit-content")}} pour la piste contenant l'image. En utilisant <code>fit-content</code> avec une taille maximale de 200 pixels, lorsqu'on a une petite image (une icône), la piste est réduite à la taille de cette image. Si l'image est plus grande, la piste ne sera pas plus large que 200 pixels, de plus, l'image ayant {{cssxref("max-width ")}} avec 100%, elle sera redimensionnée afin de pouvoir tenir dans la colonne.</p>
+La grille permet également d'utiliser {{cssxref("fit-content")}} pour la piste contenant l'image. En utilisant `fit-content` avec une taille maximale de 200 pixels, lorsqu'on a une petite image (une icône), la piste est réduite à la taille de cette image. Si l'image est plus grande, la piste ne sera pas plus large que 200 pixels, de plus, l'image ayant {{cssxref("max-width ")}} avec 100%, elle sera redimensionnée afin de pouvoir tenir dans la colonne.
 
-<p>En utilisant {{cssxref("grid-template-areas")}} pour dessiner la disposition, on peut voir le motif dans la feuille de style CSS. La grille est définie lorsqu'on a <code>max-width</code> qui vaut au moins 500 pixels et on a donc un empilement pour les plus petits écrans.</p>
+En utilisant {{cssxref("grid-template-areas")}} pour dessiner la disposition, on peut voir le motif dans la feuille de style CSS. La grille est définie lorsqu'on a `max-width` qui vaut au moins 500 pixels et on a donc un empilement pour les plus petits écrans.
 
-<p>En ajoutant une classe <code>media-flip</code>, on fournit une disposition alternative qui permet de changer le côté sur lequel l'image est affichée.</p>
+En ajoutant une classe `media-flip`, on fournit une disposition alternative qui permet de changer le côté sur lequel l'image est affichée.
 
-<p>Lorsqu'on imbrique un objet dans un autre, il faut le placer dans la deuxième piste en mode normal et sur la première lorsqu'on choisit d'inverser le côté de l'image.</p>
+Lorsqu'on imbrique un objet dans un autre, il faut le placer dans la deuxième piste en mode normal et sur la première lorsqu'on choisit d'inverser le côté de l'image.
 
-<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+## Méthodes alternatives
 
-<p>Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.</p>
+Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html).
 
-<p>Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.</p>
+Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.
 
-<p>En revanche, il faudra retirer les marges appliquées aux objets et les largeurs superflues pour la grille (la propriété {{cssxref("gap")}} permet de contrôler l'espace entre et les pistes gèrent le reste du dimensionnement).</p>
+En revanche, il faudra retirer les marges appliquées aux objets et les largeurs superflues pour la grille (la propriété {{cssxref("gap")}} permet de contrôler l'espace entre et les pistes gèrent le reste du dimensionnement).
 
-<ul>
-</ul>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.
 
-<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+### grid-template-areas
 
-<h3 id="grid-template-areas">grid-template-areas</h3>
+{{Compat("css.properties.grid-template-areas")}}
 
-<p>{{Compat("css.properties.grid-template-areas")}}</p>
+### float
 
-<h3 id="float">float</h3>
+{{Compat("css.properties.float")}}
 
-<p>{{Compat("css.properties.float")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">L'amélioration progressive et les grilles CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Utiliser les zones nommées des grilles</a></li>
- <li><code><a href="/fr/docs/Web/CSS/fit-content">fit-content</a></code></li>
- <li><code><a href="/fr/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li>
-</ul>
-
-<p> </p>
+- [Les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout)
+- [L'amélioration progressive et les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
+- [Utiliser les zones nommées des grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+- [`fit-content`](/fr/docs/Web/CSS/fit-content)
+- [`grid-template-areas`](/fr/docs/Web/CSS/grid-template-areas)
diff --git a/files/fr/web/css/layout_cookbook/pagination/index.md b/files/fr/web/css/layout_cookbook/pagination/index.md
index eacc793faa..e9c268fc39 100644
--- a/files/fr/web/css/layout_cookbook/pagination/index.md
+++ b/files/fr/web/css/layout_cookbook/pagination/index.md
@@ -8,72 +8,69 @@ tags:
   - flexbox
 translation_of: Web/CSS/Layout_cookbook/Pagination
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).</p>
+Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).
 
-<p><img alt="Links to sets of pages in a paged listing" src="pagination.png"></p>
+![Links to sets of pages in a paged listing](pagination.png)
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p>Pour cette méthode de navigation, les éléments sont généralement affichés sur une ligne. Afin de s'assurer que la pagination est compréhensible pour les utilisateurs d'outils d'assistance, on balise les éléments dans une liste avec un élément {{htmlelement("nav")}} et on utilise CSS afin d'organiser visuellement l'ensemble sur une ligne.</p>
+Pour cette méthode de navigation, les éléments sont généralement affichés sur une ligne. Afin de s'assurer que la pagination est compréhensible pour les utilisateurs d'outils d'assistance, on balise les éléments dans une liste avec un élément {{htmlelement("nav")}} et on utilise CSS afin d'organiser visuellement l'ensemble sur une ligne.
 
-<p>Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu.</p>
+Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu.
 
-<h2 id="Recette">Recette</h2>
+## Recette
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">Télécharger cet exemple</a>.</p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html).
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<p>Pour obtenir ce résultat, on utilise <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> avec une conteneur flexible imbriqué dans un autre. L'élément {{htmlelement("nav")}} est utilisé comme conteneur flexible afin de pouvoir en centrer le contenu grâce à la propriété {{cssxref("justify-content")}}.</p>
+Pour obtenir ce résultat, on utilise [les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) avec une conteneur flexible imbriqué dans un autre. L'élément {{htmlelement("nav")}} est utilisé comme conteneur flexible afin de pouvoir en centrer le contenu grâce à la propriété {{cssxref("justify-content")}}.
 
-<p>La liste est elle-même un conteneur flexible qui permet d'organiser ces éléments sur une lignes. Pour espacer les éléments, on utilise la propriété {{cssxref("margin")}} pour espacer les éléments entre eux.</p>
+La liste est elle-même un conteneur flexible qui permet d'organiser ces éléments sur une lignes. Pour espacer les éléments, on utilise la propriété {{cssxref("margin")}} pour espacer les éléments entre eux.
 
-<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+## Méthodes alternatives
 
-<p>Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implémentée par les navigateurs, celle-ci pourra être utilisée à la place des marges pour espacer les éléments flexibles.</p>
+Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implémentée par les navigateurs, celle-ci pourra être utilisée à la place des marges pour espacer les éléments flexibles.
 
-<pre class="brush: css">.pagination {
+```css
+.pagination {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   column-gap: 2px;
 }
-</pre>
+```
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Il est nécessaire qu'une personne utilisant un lecteur d'écran comprenne comment la navigation fonctionne et que cliquer sur un lien envoie vers une autre page. Aussi, on ajoute <code>aria-label="pagination"</code> sur l'élément <code>&lt;nav&gt;</code>.</p>
+Il est nécessaire qu'une personne utilisant un lecteur d'écran comprenne comment la navigation fonctionne et que cliquer sur un lien envoie vers une autre page. Aussi, on ajoute `aria-label="pagination"` sur l'élément `<nav>`.
 
-<p>On a également ajouté du contenu qui pourra être lu par le lecteur d'écran mais qui est masqué visuellement et on a ajouter l'attribut <code>aria-hidden</code> sur les flèches de pagination.</p>
+On a également ajouté du contenu qui pourra être lu par le lecteur d'écran mais qui est masqué visuellement et on a ajouter l'attribut `aria-hidden` sur les flèches de pagination.
 
-<p>Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité.</p>
+Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.
 
-<h3 id="justify-content">justify-content</h3>
+### justify-content
 
-<p>{{Compat("css.properties.justify-content")}}</p>
+{{Compat("css.properties.justify-content")}}
 
-<h3 id="column-gap_in_Flex_layout">column-gap in Flex layout</h3>
+### column-gap in Flex layout
 
-<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
+{{Compat("css.properties.column-gap.flex_context")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{Cssxref("justify-content")}}</li>
- <li>{{Cssxref("column-gap")}}</li>
- <li><em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html">Know your ARIA: 'Hidden' vs 'None'</a></em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html"> (en anglais)</a></li>
- <li><a href="https://webaim.org/techniques/css/invisiblecontent/#techniques">Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)</a></li>
- <li><a href="https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939">Écrire du CSS sans oublier l'accessibilité (en anglais)</a></li>
- <li><a href="https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">Guide stylistique d'accessibilité : la pagination</a></li>
-</ul>
+- {{Cssxref("justify-content")}}
+- {{Cssxref("column-gap")}}
+- _[Know your ARIA: 'Hidden' vs 'None'](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html)_[ (en anglais)](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html)
+- [Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)](https://webaim.org/techniques/css/invisiblecontent/#techniques)
+- [Écrire du CSS sans oublier l'accessibilité (en anglais)](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939)
+- [Guide stylistique d'accessibilité : la pagination](https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination)
diff --git a/files/fr/web/css/layout_cookbook/split_navigation/index.md b/files/fr/web/css/layout_cookbook/split_navigation/index.md
index aec75bcde2..e2faf7e235 100644
--- a/files/fr/web/css/layout_cookbook/split_navigation/index.md
+++ b/files/fr/web/css/layout_cookbook/split_navigation/index.md
@@ -8,40 +8,36 @@ tags:
 translation_of: Web/CSS/Layout_cookbook/Split_Navigation
 original_slug: Web/CSS/Layout_cookbook/Navigation_segmentée
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.</p>
+Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.
 
-<p><img alt="Items separated into two groups." src="split-navigation.png"></p>
+![Items separated into two groups.](split-navigation.png)
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p>Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.</p>
+Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.
 
-<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+## Exemple appliqué
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html">Télécharger cet exemple</a>.</p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html).
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<p>Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.</p>
+Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.
 
-<p>Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et <em>pousse</em> le bloc au milieu.</p>
+Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et _pousse_ le bloc au milieu.
 
-<p>Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe <code>push</code> à n'importe quel élément de la liste.</p>
+Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe `push` à n'importe quel élément de la liste.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h4 id="Boîtes_flexibles">Boîtes flexibles</h4>
+#### Boîtes flexibles
 
-<p>{{Compat("css.properties.flex")}}</p>
+{{Compat("css.properties.flex")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Le module de spécification <em>CSS Flexible Box Layout</em></a></li>
-</ul>
+- [Le module de spécification _CSS Flexible Box Layout_](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
diff --git a/files/fr/web/css/layout_cookbook/sticky_footers/index.md b/files/fr/web/css/layout_cookbook/sticky_footers/index.md
index 096d514add..cdaf787770 100644
--- a/files/fr/web/css/layout_cookbook/sticky_footers/index.md
+++ b/files/fr/web/css/layout_cookbook/sticky_footers/index.md
@@ -8,67 +8,59 @@ tags:
 translation_of: Web/CSS/Layout_cookbook/Sticky_footers
 original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (<em>viewport</em>) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.</p>
+Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (_viewport_) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.
 
-<p><img alt="A sticky footer pushed to the bottom of a box" src="cookbook-footer.png"></p>
+![A sticky footer pushed to the bottom of a box](cookbook-footer.png)
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p>Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :</p>
+Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :
 
-<ul>
- <li>Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit</li>
- <li>Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.</li>
-</ul>
+- Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit
+- Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.
 
-<h2 id="Recette">Recette</h2>
+## Recette
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">Télécharger cet exemple</a></p>
-</div>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html)
 
-<div class="note">
-<p><strong>Note :</strong> Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec <code>min-height: 100%</code> afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur <code>100vh</code> sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.</p>
-</div>
+> **Note :** Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec `min-height: 100%` afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur `100vh` sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<p>Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément <code>.wrapper</code> a une hauteur minimale de <code>100%</code>, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.</p>
+Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément `.wrapper` a une hauteur minimale de `100%`, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.
 
-<p>Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste <code>1fr</code> et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec <code>1fr</code>, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.</p>
+Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste `1fr` et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec `1fr`, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.
 
-<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+## Méthodes alternatives
 
-<p>Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (<em>flexbox</em>) pour avoir une note de bas de page adhérante.</p>
+Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (_flexbox_) pour avoir une note de bas de page adhérante.
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}
 
-<p>On commence de la même façon mais on utilise <code>display:flex</code> plutôt que <code>display:grid</code> sur <code>.wrapper</code>. On définit <code>flex-direction</code> avec la valeur <code>column</code> afin d'avoir une organisation verticale. Pour le contenu principal, on utilise <code>flex-grow: 1</code> et pour les deux autres éléments, on utilise <code>flex-shrink: 0</code>. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.</p>
+On commence de la même façon mais on utilise `display:flex` plutôt que `display:grid` sur `.wrapper`. On définit `flex-direction` avec la valeur `column` afin d'avoir une organisation verticale. Pour le contenu principal, on utilise `flex-grow: 1` et pour les deux autres éléments, on utilise `flex-shrink: 0`. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h4 id="grid-template-rows">grid-template-rows</h4>
+#### grid-template-rows
 
-<p>{{Compat("css.properties.grid-template-rows")}}</p>
+{{Compat("css.properties.grid-template-rows")}}
 
-<h4 id="flex-direction">flex-direction</h4>
+#### flex-direction
 
-<p>{{Compat("css.properties.flex-direction")}}</p>
+{{Compat("css.properties.flex-direction")}}
 
-<h4 id="flex-grow">flex-grow</h4>
+#### flex-grow
 
-<p>{{Compat("css.properties.flex-grow")}}</p>
+{{Compat("css.properties.flex-grow")}}
 
-<h4 id="flex-shrink">flex-shrink</h4>
+#### flex-shrink
 
-<p>{{Compat("css.properties.flex-shrink")}}</p>
+{{Compat("css.properties.flex-shrink")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Les concepts de base des grilles CSS</a></li>
-</ul>
+- [Les concepts de base des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
diff --git a/files/fr/web/css/layout_mode/index.md b/files/fr/web/css/layout_mode/index.md
index 34d2b37905..a9850ddf8e 100644
--- a/files/fr/web/css/layout_mode/index.md
+++ b/files/fr/web/css/layout_mode/index.md
@@ -7,20 +7,16 @@ tags:
 translation_of: Web/CSS/Layout_mode
 original_slug: Web/CSS/Mode_de_mise_en_page
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Un <strong>mode de disposition CSS</strong> (<em>layout mode</em>), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :</p>
+Un **mode de disposition CSS** (_layout mode_), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :
 
-<ul>
- <li><em><a href="/fr/docs/Web/CSS/CSS_Flow_Layout">Le flux normal (</a></em><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">normal flow</a><em><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">)</a></em> : tous les éléments font partie du flux normal par défaut. Le flux normal inclut la disposition en bloc qui permet d'organiser les boîtes comme les paragraphes et la disposition en ligne qui permet d'organiser les éléments en ligne comme le texte.</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Table"><em>La disposition en tableau (</em>Table layout<em>)</em></a> : cette disposition est conçue pour organiser des tableaux.</li>
- <li><em>La disposition flottante (</em>Float layout<em>)</em> : cette disposition est conçue pour positionner des éléments à gauche ou à droite du reste du contenu en flux normal et qui évolue « autour » de ces éléments.</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Positioning"><em>La disposition positionnée (</em>Positioned layout<em>)</em></a> : cette disposition est conçue afin de positionner des éléments sans interaction avec les autres.</li>
- <li><a href="/fr/docs/Web/CSS/Colonnes_CSS"><em>La disposition en colonnes (</em>Multi-column layout<em>)</em></a> : cette disposition permet d'organiser le contenu en colonnes, comme on peut le voir dans les journaux.</li>
- <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox"><em>La disposition avec les boîtes flexibles (flexbox) (</em>flexible box layout<em>)</em></a> : cette disposition permet d'organiser des pages complexes qui peuvent être redimensionnées facilement.</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout"><em>La disposition en grille (</em>Grid layout<em>)</em></a> : cette disposition permet d'organiser les éléments relativement à une grille fixe.</li>
-</ul>
+- _[Le flux normal (](/fr/docs/Web/CSS/CSS_Flow_Layout)_[normal flow](/en-US/docs/Web/CSS/CSS_Flow_Layout)_[)](/en-US/docs/Web/CSS/CSS_Flow_Layout)_ : tous les éléments font partie du flux normal par défaut. Le flux normal inclut la disposition en bloc qui permet d'organiser les boîtes comme les paragraphes et la disposition en ligne qui permet d'organiser les éléments en ligne comme le texte.
+- [*La disposition en tableau (*Table layout*)*](/fr/docs/Web/CSS/CSS_Table) : cette disposition est conçue pour organiser des tableaux.
+- *La disposition flottante (*Float layout*)* : cette disposition est conçue pour positionner des éléments à gauche ou à droite du reste du contenu en flux normal et qui évolue « autour » de ces éléments.
+- [*La disposition positionnée (*Positioned layout*)*](/fr/docs/Web/CSS/CSS_Positioning) : cette disposition est conçue afin de positionner des éléments sans interaction avec les autres.
+- [*La disposition en colonnes (*Multi-column layout*)*](/fr/docs/Web/CSS/Colonnes_CSS) : cette disposition permet d'organiser le contenu en colonnes, comme on peut le voir dans les journaux.
+- [*La disposition avec les boîtes flexibles (flexbox) (*flexible box layout*)*](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox) : cette disposition permet d'organiser des pages complexes qui peuvent être redimensionnées facilement.
+- [*La disposition en grille (*Grid layout*)*](/fr/docs/Web/CSS/CSS_Grid_Layout) : cette disposition permet d'organiser les éléments relativement à une grille fixe.
 
-<div class="note">
-<p><strong>Note :</strong> <a href="/fr/docs/Web/CSS/Reference">Les propriétés CSS</a> ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.</p>
-</div>
+> **Note :** [Les propriétés CSS](/fr/docs/Web/CSS/Reference) ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.
diff --git a/files/fr/web/css/left/index.md b/files/fr/web/css/left/index.md
index f7a4ed2eb0..89cbfda374 100644
--- a/files/fr/web/css/left/index.md
+++ b/files/fr/web/css/left/index.md
@@ -7,32 +7,33 @@ tags:
   - Reference
 translation_of: Web/CSS/left
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>left</code></strong> permet de définir une partie de la position des éléments positionnés. Elle n'a aucun effet pour les éléments non-positionnés.</p>
+La propriété **`left`** permet de définir une partie de la position des éléments positionnés. Elle n'a aucun effet pour les éléments non-positionnés.
 
-<div>{{EmbedInteractiveExample("pages/css/left.html")}}</div>
+{{EmbedInteractiveExample("pages/css/left.html")}}
 
-<p>Pour les éléments positionnés de façon absolue (ceux pour lesquels {{cssxref("position")}}<code>: absolute</code> ou <code>position: fixed</code>), elle définit la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc englobant (le bloc englobant étant l'ancêtre par rapport auquel l'élément est positionné de façon relative).</p>
+Pour les éléments positionnés de façon absolue (ceux pour lesquels {{cssxref("position")}}`: absolute` ou `position: fixed`), elle définit la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc englobant (le bloc englobant étant l'ancêtre par rapport auquel l'élément est positionné de façon relative).
 
-<p>Pour les éléments positionnés grâce à {{cssxref("position")}}<code>: relative</code>, c'est le décalage ajouté à gauche de l'élément (qui est donc déplacé vers la droite de sa position normale).</p>
+Pour les éléments positionnés grâce à {{cssxref("position")}}`: relative`, c'est le décalage ajouté à gauche de l'élément (qui est donc déplacé vers la droite de sa position normale).
 
-<p>Pour les éléments positionnés grâce à {{cssxref("position")}}<code>: sticky</code>, cette propriété se comportera comme avec <code>relative</code> lorsque l'élément fait partie de la zone d'affichage (<em>viewport</em>) et comme avec <code>fixed</code> lorsque l'élément est en dehors de la zone d'affichage.</p>
+Pour les éléments positionnés grâce à {{cssxref("position")}}`: sticky`, cette propriété se comportera comme avec `relative` lorsque l'élément fait partie de la zone d'affichage (_viewport_) et comme avec `fixed` lorsque l'élément est en dehors de la zone d'affichage.
 
-<p>Lorsque {{cssxref("position")}}<code>: static</code>, la propriété <code>left</code> n'a aucun effet.</p>
+Lorsque {{cssxref("position")}}`: static`, la propriété `left` n'a aucun effet.
 
-<p>Si les deux propriétés <code>left</code> et {{cssxref("right")}} sont définies et que l'élément ne peut pas s'étendre afin de satisfaire ces contraintes, la position de l'élément est « sur-définie ». Dans ce cas, la valeur <code>left</code> aura la priorité si le conteneur est orienté de gauche à droite (dans ce cas, la valeur calculée de <code>right</code> vaudra <code>-left</code>) et si le conteneur est orienté de droite à gauche, c'est la valeur <code>right</code> qui aura la priorité (auquel cas, la valeur calculée de <code>left</code> vaudra <code>-right</code>).</p>
+Si les deux propriétés `left` et {{cssxref("right")}} sont définies et que l'élément ne peut pas s'étendre afin de satisfaire ces contraintes, la position de l'élément est « sur-définie ». Dans ce cas, la valeur `left` aura la priorité si le conteneur est orienté de gauche à droite (dans ce cas, la valeur calculée de `right` vaudra `-left`) et si le conteneur est orienté de droite à gauche, c'est la valeur `right` qui aura la priorité (auquel cas, la valeur calculée de `left` vaudra `-right`).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 left: 3px;
 left: 2.4em;
 
 /* Valeurs proportionnelles à   */
 /* la largeur du bloc englobant */
-/* Type &lt;percentage&gt;            */
+/* Type <percentage>            */
 left: 10%;
 
 /* Valeur avec un mot-clé */
@@ -42,40 +43,38 @@ left: auto;
 left: inherit;
 left: initial;
 left: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de longueur qui peut être positive, nulle ou négative et qui représente :
- <ul>
-  <li>La distance au bord gauche du bloc englobant <em>pour les éléments positionnés de façon absolue</em></li>
-  <li>Le décalage vers la gauche qui est appliqué à l'élément par rapport à sa position normale dans le flux <em>pour les éléments positionnés de façon relative</em>.</li>
- </ul>
-
- <p>Pour plus d'informations sur les valeurs possibles, voir {{cssxref("&lt;length&gt;")}}.</p>
- </dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} par rapport à la largeur du bloc englobant.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui représente :
- <ul>
-  <li>Pour les éléments positionnés de façon absolue : la position de l'élément selon la valeur de la propriété {{cssxref("right")}}, on considère <code>width: auto</code> comme une largeur basée sur le contenu.</li>
-  <li>Pour les éléments positionnés de façon relative : le décalage à gauche de l'élément par rapport à sa position initiale selon la valeur de la propriété {{cssxref("right")}}. SI <code>right</code> vaut également <code>auto</code>, il n'y a aucun décalage.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+
+  - : Une valeur de longueur qui peut être positive, nulle ou négative et qui représente :
+
+    - La distance au bord gauche du bloc englobant _pour les éléments positionnés de façon absolue_
+    - Le décalage vers la gauche qui est appliqué à l'élément par rapport à sa position normale dans le flux _pour les éléments positionnés de façon relative_.
+
+    Pour plus d'informations sur les valeurs possibles, voir {{cssxref("&lt;length&gt;")}}.
+
+- `<percentage>`
+  - : Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} par rapport à la largeur du bloc englobant.
+- `auto`
+
+  - : Un mot-clé qui représente :
+
+    - Pour les éléments positionnés de façon absolue : la position de l'élément selon la valeur de la propriété {{cssxref("right")}}, on considère `width: auto` comme une largeur basée sur le contenu.
+    - Pour les éléments positionnés de façon relative : le décalage à gauche de l'élément par rapport à sa position initiale selon la valeur de la propriété {{cssxref("right")}}. SI `right` vaut également `auto`, il n'y a aucun décalage.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#wrap {
+```css
+#wrap {
   width: 700px;
   margin: 0 auto;
   background: #5C5C5C;
@@ -122,93 +121,73 @@ pre {
   bottom:10px;
   right:20px;
   background-color:#FFC7E4;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="wrap"&gt;
-  &lt;div id="exemple_1"&gt;
-    &lt;pre&gt;
+```html
+<div id="wrap">
+  <div id="exemple_1">
+    <pre>
       position: absolute;
       left: 20px;
       top: 20px;
-    &lt;/pre&gt;
-    &lt;p&gt;Le seul élément englobant pour ce div est la fenêtre principale. Elle se positionne par rapport à elle.&lt;/p&gt;
-  &lt;/div&gt;
+    </pre>
+    <p>Le seul élément englobant pour ce div est la fenêtre principale. Elle se positionne par rapport à elle.</p>
+  </div>
 
-  &lt;div id="exemple_2"&gt;
-    &lt;pre&gt;
+  <div id="exemple_2">
+    <pre>
       position: relative;
       top: 0;
       right: 0;
-    &lt;/pre&gt;
-    &lt;p&gt;La position est relative par rapport aux voisins.&lt;/p&gt;
-  &lt;/div&gt;
+    </pre>
+    <p>La position est relative par rapport aux voisins.</p>
+  </div>
 
-  &lt;div id="exemple_3"&gt;
-    &lt;pre&gt;
+  <div id="exemple_3">
+    <pre>
       float: right;
       position: relative;
       top: 20px;
       left: 20px;
-    &lt;/pre&gt;
-    &lt;p&gt;La position est relative par rapport au div voisin mais on le retire du flux.&lt;/p&gt;
+    </pre>
+    <p>La position est relative par rapport au div voisin mais on le retire du flux.</p>
 
-    &lt;div id="exemple_4"&gt;
-      &lt;pre&gt;
+    <div id="exemple_4">
+      <pre>
         position: absolute;
         bottom: 10px;
         right: 20px;
-      &lt;/pre&gt;
-      &lt;p&gt;La position est absolue à l'intérieur d'un parent positionné de façon relative.&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples',1200,650)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>left</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}</td>
-   <td>{{Spec2('CSS3 Positioning')}}</td>
-   <td>Décrit le comportement pour le positionnement adhérent (<em>sticky</em>).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.left")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("position")}}</li>
- <li>{{cssxref("right")}}</li>
- <li>{{cssxref("bottom")}}</li>
- <li>{{cssxref("top")}}</li>
-</ul>
+      </pre>
+      <p>La position est absolue à l'intérieur d'un parent positionné de façon relative.</p>
+    </div>
+  </div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples',1200,650)}}
+
+## Spécifications
+
+| Spécification                                                                    | État                                     | Commentaires                                                       |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------ |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'left')}} | {{Spec2('CSS3 Transitions')}} | `left` peut désormais être animée.                                 |
+| {{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}     | {{Spec2('CSS3 Positioning')}} | Décrit le comportement pour le positionnement adhérent (_sticky_). |
+| {{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.left")}}
+
+## Voir aussi
+
+- {{cssxref("position")}}
+- {{cssxref("right")}}
+- {{cssxref("bottom")}}
+- {{cssxref("top")}}
diff --git a/files/fr/web/css/length-percentage/index.md b/files/fr/web/css/length-percentage/index.md
index 149f8bd787..6bb7ca51ff 100644
--- a/files/fr/web/css/length-percentage/index.md
+++ b/files/fr/web/css/length-percentage/index.md
@@ -7,47 +7,31 @@ tags:
   - Type
 translation_of: Web/CSS/length-percentage
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée <strong><code>&lt;length-percentage&gt;</code></strong> représente une valeur qui peut être une valeur de type {{Cssxref("length")}} ou une valeur de type {{Cssxref("percentage")}}.</p>
+Le type de donnée **`<length-percentage>`** représente une valeur qui peut être une valeur de type {{Cssxref("length")}} ou une valeur de type {{Cssxref("percentage")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Se référer à la documentation des types {{Cssxref("length")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles pour chacun de ces types.</p>
+Se référer à la documentation des types {{Cssxref("length")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles pour chacun de ces types.
 
-<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+## Utilisation avec `calc()`
 
-<p>Lorsqu'une valeur de type <code>&lt;length-percentage&gt;</code> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc()", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :</p>
+Lorsqu'une valeur de type `<length-percentage>` peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc()", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :
 
-<pre class="brush:css example-good">width: 200px;
+```css example-good
+width: 200px;
 width: 20%;
 width: calc(100% - 200px);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Définition du type <code>&lt;length-percentage&gt;</code>. Ajout de <code>calc()</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.length-percentage")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires                                                |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------- |
+| {{SpecName('CSS4 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}} | {{Spec2('CSS4 Values')}} |                                                             |
+| {{SpecName('CSS3 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}} | {{Spec2('CSS3 Values')}} | Définition du type `<length-percentage>`. Ajout de `calc()` |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.length-percentage")}}
diff --git a/files/fr/web/css/length/index.md b/files/fr/web/css/length/index.md
index 8cf016dcb5..363ca4388e 100644
--- a/files/fr/web/css/length/index.md
+++ b/files/fr/web/css/length/index.md
@@ -8,175 +8,173 @@ tags:
   - Type de donnée
 translation_of: Web/CSS/length
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de données CSS <strong><code>&lt;length&gt;</code></strong> correspond à une mesure de distance.</p>
-
-<p>De nombreuses propriétés CSS utilisent des valeurs de longueurs. Entre autres, on pourra énumérer {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("font-size")}}, {{cssxref("border-width")}}, {{cssxref("text-shadow")}}, …</p>
-
-<p>Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, pour d'autres, elles sont autorisées.</p>
-
-<p>On notera que bien que les valeurs {{cssxref("&lt;percentage&gt;")}} soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs <code>&lt;length&gt;</code>, ce sont bien deux types distincts. Voir {{cssxref("&lt;length-percentage&gt;")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Une longueur est un nombre (type {{cssxref("&lt;number&gt;")}}) immédiatement suivi d'une unité de longueur (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>…). Comme toutes les dimensions CSS, il n'y aucun espace entre le nombre et l'unité. L'unité est optionnelle pour la valeur nulle.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Certaines propriétés permettent d'utiliser des longueurs négatives alors que d'autres n'acceptent que des valeurs positives.</p>
-</div>
-
-<h3 id="Unités">Unités</h3>
-
-<h4 id="Unités_de_longueur_relatives">Unités de longueur relatives</h4>
-
-<p>Les longueurs relatives permettent d'indiquer une longueur basée sur la taille d'un caractère dans une police donnée, sur la taille de l'élément parent ou sur la taille de la zone d'affichage (<em>viewport</em>). Les unités associées permettent d'indiquer à quelle taille elles se rapportent.</p>
-
-<h5 id="Longueurs_liées_à_la_police">Longueurs liées à la police</h5>
-
-<p>Les unités relatives aux polices de caractères permettent d'obtenir des longueurs basées sur la taille d'un caractère ou la caractéristique de la police utilisée pour l'élément courant ou pour un élément parent.</p>
-
-<dl>
- <dt><code>cap</code></dt>
- <dd>Cette unité représente la taille nominale d'une lettre capitale pour la police ({{cssxref("font")}}) de l'élément.</dd>
- <dt><code>ch</code></dt>
- <dd>Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle. Dans les cas où il est impossible ou trop complexe de déterminer la taille du glyphe pour « 0 », on prend l'hypothèse que celui-ci mesure 0.5em de large sur 1em de haut.</dd>
- <dt><code>em</code></dt>
- <dd>
- <p>Cette unité représente la {{cssxref("font-size")}} calculée de l'élément. Si utilisée avec la propriété {{cssxref("font-size")}}, elle représente la taille de police <em>héritée</em> de l'élément.</p>
-
- <div class="note">
- <p><strong>Note :</strong> Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm/">rythme vertical de la page</a>, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en <strong>em</strong>.</p>
- </div>
- </dd>
- <dt><code>ex</code></dt>
- <dd>Cette unité représente la <a href="https://fr.wikipedia.org/wiki/Hauteur_d%27x">hauteur d'x</a> de la {{cssxref("font")}} de l'élément. Il peut s'agir généralement de la hauteur des lettres bas de casse de la police. <code>1ex ≈ 0.5em</code> dans de nombreuses polices.</dd>
- <dt><code>ic</code></dt>
- <dd>Cette unité représente la largeur entre le début du caractère “水” (U+6C34) et le début du caractère suivant selon la police utilisée et après que les transformations qui modifient la taille des caractères aient été appliquées.</dd>
- <dt><code>lh</code></dt>
- <dd>Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}}, convertie en longueur absolue, de l'élément sur lequel elle est utilisée.</dd>
- <dt><code>rem</code></dt>
- <dd>
- <p>Cette unité représente la {{cssxref("font-size")}} de l'élément racine (par exemple la taille de la police de l'élément {{HTMLElement("html")}}). Quand utilisée avec {{cssxref("font-size")}} sur l'élément racine, elle représente sa valeur initiale.</p>
-
- <div class="note">
- <p><strong>Note :</strong> Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité <strong>em</strong>, mais la réalisation est un petit peu plus complexe.</p>
- </div>
- </dd>
- <dt><code>rlh</code></dt>
- <dd>Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}} de l'élément racine, convertie en longueur absolue. Lorsque cette unité est utilisée pour les propriétés {{cssxref("font-size")}} ou {{cssxref("line-height")}} de l'élément racine, l'unité <code>rlh</code> fait référence aux valeurs initiales des propriétés.</dd>
-</dl>
-
-<h5 id="Longueurs_liées_au_viewport">Longueurs liées au <em>viewport</em></h5>
-
-<p>Les longueurs liées au <em>viewport</em> définissent une longueur relative à la taille du <em>viewport</em>, qui correspond à la partie visible du document.</p>
-
-<p>Dans un bloc de déclaration {{cssxref("@page")}}, l'utilisation des longueurs liées au <em>viewport</em> sont invalides et la déclaration sera ignorée.</p>
-
-<dl>
- <dt><code>vb</code></dt>
- <dd>1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.</dd>
- <dt><code>vh</code></dt>
- <dd>1/100<sup>e</sup> de la hauteur du <em>viewport</em>.</dd>
- <dt><code>vi</code></dt>
- <dd>1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.</dd>
- <dt><code>vw</code></dt>
- <dd>1/100<sup>e</sup> de la largeur du <em>viewport</em>.</dd>
- <dt><code>vmin</code></dt>
- <dd>1/100<sup>e</sup> du côté le plus petit du <em>viewport</em>.</dd>
- <dt><code>vmax</code></dt>
- <dd>1/100<sup>e</sup> du côté le plus grand du <em>viewport</em>.</dd>
-</dl>
-
-<h4 id="Unités_de_longueur_absolues">Unités de longueur absolues</h4>
-
-<p>Les unités de longueur absolues représentent une mesure physique. Cela est réalisé en faisant correspondre une des unités à une unité physique et en définissant les autres relativement à elle. La correspondance est différente pour les périphériques basse-résolution, tels que les écrans, et pour les périphériques haute-résolution, comme les imprimantes.</p>
-
-<p>Pour les périphériques ayant un faible nombre de points par pouce, l’unité <strong>px</strong> représente le pixel de <em>référence physique</em> et les autres sont définies de façon relative à lui. Ainsi, <code>1in</code> est définit comme <code>96px</code>, ce qui équivaut à <code>72pt</code>. Sur de tels périphériques, cette définition à pour conséquence que la longueur exprimée en pouces (<code>in</code>), centimètres (<code>cm</code>) et millimètres (<code>mm</code>) ne correspondent pas forcément à la longueur de l’unité physique du même nom.</p>
-
-<p>Pour les périphériques ayant un nombre de points par pouce élevé, les pouces (<code>in</code>), centimètres (<code>cm</code>) et millimètres (<code>mm</code>) sont définis comme leur équivalent physique. Par conséquent, l’unité <strong>px</strong> est définie comme étant relavite à eux (1/96 de pouce).</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les utilisateurs peuvent augmenter la taille des polices pour des raisons d’accessibilité. Pour permettre des mises en page adaptées quelque soit la taille des polices, utilisez uniquement des unités de longueur quand les caractéristiques physiques du média de sortie sont connues, telles que les images matricielles (bitmap) et sinon, privilégiez les unités relatives telles que <code>em</code> et <code>rem</code> (notamment pour {{cssxref("font-size")}}).</p>
-</div>
-
-<dl>
- <dt><code>px</code></dt>
- <dd>Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspond à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.</dd>
- <dt><code>mm</code></dt>
- <dd>Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
- <dt><code>Q</code>{{experimental_inline}}</dt>
- <dd>Un quart de millimètre (1/40<sup>e</sup> de centimètre).</dd>
- <dt><code>cm</code></dt>
- <dd>Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
- <dt><code>in</code></dt>
- <dd>Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
- <dt><code>pt</code></dt>
- <dd>Un point pica (soit 1/72<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
- <dt><code>pc</code></dt>
- <dd>Un pica (soit 12 points, soit 1/6<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
- <dt><code>mozmm</code> {{non-standard_inline}}, retiré avec Firefox 59</dt>
- <dd>Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais peut être utile en particulier pour les terminaux mobiles.</dd>
-</dl>
-
-<h2 id="Unités_CSS_et_points_par_pouce">Unités CSS et points par pouce</h2>
-
-<div class="note">
-  <p><strong>Note :</strong> L’unité <code>in</code> ne représente pas un pouce physique de l’écran, mais <code>96px</code>. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à <code>96dpi</code>. Sur les périphériques dotés d’une plus grande densité de pixel, <code>1in</code> fera moins d’1 pouce physique. De la même manière, <code>mm</code>, <code>cm</code>, et <code>pt</code> ne sont pas des longueurs absolues.</p>
-</div>
-
-<p>Quelques exemples particuliers :</p>
-
-<ul>
- <li><code>1in</code> est toujours égal à <code>96px,</code></li>
- <li><code>3pt</code> est toujours égal à <code>4px</code>,</li>
- <li><code>25.4mm</code> est toujours égal à <code>96px.</code></li>
-</ul>
-
-<h2 id="Interpolation">Interpolation</h2>
-
-<p>Les valeurs du type <code>&lt;length&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation","",1)}} associée à l'animation.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#lengths', '&lt;length&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td>Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code> et <code>rlh</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Ajout des unités <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition explicite des unités <code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> (la définition était implicite pour CSS1)</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale. Définition implicite des unités <code>em</code>, <code>pt</code>, <code>pc</code> et <code>px</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.length")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Tutoriel sur les unités et valeurs CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Référence des unités et valeurs en CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Model">Modèle de boîtes CSS</a></li>
-</ul>
+Le type de données CSS **`<length>`** correspond à une mesure de distance.
+
+De nombreuses propriétés CSS utilisent des valeurs de longueurs. Entre autres, on pourra énumérer {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("font-size")}}, {{cssxref("border-width")}}, {{cssxref("text-shadow")}}, …
+
+Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, pour d'autres, elles sont autorisées.
+
+On notera que bien que les valeurs {{cssxref("&lt;percentage&gt;")}} soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs `<length>`, ce sont bien deux types distincts. Voir {{cssxref("&lt;length-percentage&gt;")}}.
+
+## Syntaxe
+
+Une longueur est un nombre (type {{cssxref("&lt;number&gt;")}}) immédiatement suivi d'une unité de longueur (`px`, `em`, `pc`, `in`, `mm`…). Comme toutes les dimensions CSS, il n'y aucun espace entre le nombre et l'unité. L'unité est optionnelle pour la valeur nulle.
+
+> **Note :** Certaines propriétés permettent d'utiliser des longueurs négatives alors que d'autres n'acceptent que des valeurs positives.
+
+### Unités
+
+#### Unités de longueur relatives
+
+Les longueurs relatives permettent d'indiquer une longueur basée sur la taille d'un caractère dans une police donnée, sur la taille de l'élément parent ou sur la taille de la zone d'affichage (_viewport_). Les unités associées permettent d'indiquer à quelle taille elles se rapportent.
+
+##### Longueurs liées à la police
+
+Les unités relatives aux polices de caractères permettent d'obtenir des longueurs basées sur la taille d'un caractère ou la caractéristique de la police utilisée pour l'élément courant ou pour un élément parent.
+
+- `cap`
+  - : Cette unité représente la taille nominale d'une lettre capitale pour la police ({{cssxref("font")}}) de l'élément.
+- `ch`
+  - : Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle. Dans les cas où il est impossible ou trop complexe de déterminer la taille du glyphe pour « 0 », on prend l'hypothèse que celui-ci mesure 0.5em de large sur 1em de haut.
+- `em`
+
+  - : Cette unité représente la {{cssxref("font-size")}} calculée de l'élément. Si utilisée avec la propriété {{cssxref("font-size")}}, elle représente la taille de police _héritée_ de l'élément.
+
+    > **Note :** Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le [rythme vertical de la page](http://24ways.org/2006/compose-to-a-vertical-rhythm/), même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en **em**.
+
+- `ex`
+  - : Cette unité représente la [hauteur d'x](https://fr.wikipedia.org/wiki/Hauteur_d%27x) de la {{cssxref("font")}} de l'élément. Il peut s'agir généralement de la hauteur des lettres bas de casse de la police. `1ex ≈ 0.5em` dans de nombreuses polices.
+- `ic`
+  - : Cette unité représente la largeur entre le début du caractère “水” (U+6C34) et le début du caractère suivant selon la police utilisée et après que les transformations qui modifient la taille des caractères aient été appliquées.
+- `lh`
+  - : Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}}, convertie en longueur absolue, de l'élément sur lequel elle est utilisée.
+- `rem`
+
+  - : Cette unité représente la {{cssxref("font-size")}} de l'élément racine (par exemple la taille de la police de l'élément {{HTMLElement("html")}}). Quand utilisée avec {{cssxref("font-size")}} sur l'élément racine, elle représente sa valeur initiale.
+
+    > **Note :** Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité **em**, mais la réalisation est un petit peu plus complexe.
+
+- `rlh`
+  - : Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}} de l'élément racine, convertie en longueur absolue. Lorsque cette unité est utilisée pour les propriétés {{cssxref("font-size")}} ou {{cssxref("line-height")}} de l'élément racine, l'unité `rlh` fait référence aux valeurs initiales des propriétés.
+
+##### Longueurs liées au _viewport_
+
+Les longueurs liées au _viewport_ définissent une longueur relative à la taille du _viewport_, qui correspond à la partie visible du document.
+
+Dans un bloc de déclaration {{cssxref("@page")}}, l'utilisation des longueurs liées au _viewport_ sont invalides et la déclaration sera ignorée.
+
+- `vb`
+  - : 1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.
+- `vh`
+
+  - : 1/100
+
+    <sup>e</sup>
+
+    de la hauteur du _viewport_.
+
+- `vi`
+  - : 1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.
+- `vw`
+
+  - : 1/100
+
+    <sup>e</sup>
+
+    de la largeur du _viewport_.
+
+- `vmin`
+
+  - : 1/100
+
+    <sup>e</sup>
+
+    du côté le plus petit du _viewport_.
+
+- `vmax`
+
+  - : 1/100
+
+    <sup>e</sup>
+
+    du côté le plus grand du _viewport_.
+
+#### Unités de longueur absolues
+
+Les unités de longueur absolues représentent une mesure physique. Cela est réalisé en faisant correspondre une des unités à une unité physique et en définissant les autres relativement à elle. La correspondance est différente pour les périphériques basse-résolution, tels que les écrans, et pour les périphériques haute-résolution, comme les imprimantes.
+
+Pour les périphériques ayant un faible nombre de points par pouce, l’unité **px** représente le pixel de _référence physique_ et les autres sont définies de façon relative à lui. Ainsi, `1in` est définit comme `96px`, ce qui équivaut à `72pt`. Sur de tels périphériques, cette définition à pour conséquence que la longueur exprimée en pouces (`in`), centimètres (`cm`) et millimètres (`mm`) ne correspondent pas forcément à la longueur de l’unité physique du même nom.
+
+Pour les périphériques ayant un nombre de points par pouce élevé, les pouces (`in`), centimètres (`cm`) et millimètres (`mm`) sont définis comme leur équivalent physique. Par conséquent, l’unité **px** est définie comme étant relavite à eux (1/96 de pouce).
+
+> **Note :** Les utilisateurs peuvent augmenter la taille des polices pour des raisons d’accessibilité. Pour permettre des mises en page adaptées quelque soit la taille des polices, utilisez uniquement des unités de longueur quand les caractéristiques physiques du média de sortie sont connues, telles que les images matricielles (bitmap) et sinon, privilégiez les unités relatives telles que `em` et `rem` (notamment pour {{cssxref("font-size")}}).
+
+- `px`
+  - : Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspond à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.
+- `mm`
+  - : Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
+- `Q`{{experimental_inline}}
+
+  - : Un quart de millimètre (1/40
+
+    <sup>e</sup>
+
+    de centimètre).
+
+- `cm`
+  - : Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
+- `in`
+  - : Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
+- `pt`
+
+  - : Un point pica (soit 1/72
+
+    <sup>e</sup>
+
+    de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
+
+- `pc`
+
+  - : Un pica (soit 12 points, soit 1/6
+
+    <sup>e</sup>
+
+    de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.
+
+- `mozmm` {{non-standard_inline}}, retiré avec Firefox 59
+  - : Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais peut être utile en particulier pour les terminaux mobiles.
+
+## Unités CSS et points par pouce
+
+> **Note :** L’unité `in` ne représente pas un pouce physique de l’écran, mais `96px`. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à `96dpi`. Sur les périphériques dotés d’une plus grande densité de pixel, `1in` fera moins d’1 pouce physique. De la même manière, `mm`, `cm`, et `pt` ne sont pas des longueurs absolues.
+
+Quelques exemples particuliers :
+
+- `1in` est toujours égal à `96px,`
+- `3pt` est toujours égal à `4px`,
+- `25.4mm` est toujours égal à `96px.`
+
+## Interpolation
+
+Les valeurs du type `<length>` peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("easing-function","fonction de temporisation","",1)}} associée à l'animation.
+
+## Spécifications
+
+| Spécification                                                                                | État                             | Commentaires                                                                                     |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS4 Values', '#lengths', '&lt;length&gt;')}}                 | {{Spec2('CSS4 Values')}} | Ajout des unités `vi`, `vb`, `ic`, `lh` et `rlh`.                                                |
+| {{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}                 | {{Spec2('CSS3 Values')}} | Ajout des unités `ch`, `rem`, `vw`, `vh`, `vmin`, `vmax`                                         |
+| {{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}} | {{Spec2('CSS2.1')}}         | Définition explicite des unités `em`, `pt`, `pc`, `px` (la définition était implicite pour CSS1) |
+| {{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}                     | {{Spec2('CSS1')}}         | Définition initiale. Définition implicite des unités `em`, `pt`, `pc` et `px`.                   |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.length")}}
+
+## Voir aussi
+
+- [Tutoriel sur les unités et valeurs CSS](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [Référence des unités et valeurs en CSS](/fr/docs/Web/CSS/CSS_Values_and_Units)
+- [Modèle de boîtes CSS](/fr/docs/Web/CSS/CSS_Box_Model)
diff --git a/files/fr/web/css/letter-spacing/index.md b/files/fr/web/css/letter-spacing/index.md
index dfd70ca730..838fa86fef 100644
--- a/files/fr/web/css/letter-spacing/index.md
+++ b/files/fr/web/css/letter-spacing/index.md
@@ -7,16 +7,17 @@ tags:
   - Reference
 translation_of: Web/CSS/letter-spacing
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>letter-spacing</code></strong> définit <a href="https://fr.wikipedia.org/wiki/Interlettre">l'interlettre</a> utilisée pour les caractères qui composent le texte.</p>
+La propriété **`letter-spacing`** définit [l'interlettre](https://fr.wikipedia.org/wiki/Interlettre) utilisée pour les caractères qui composent le texte.
 
-<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>
+{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 letter-spacing: 0.3em;
 letter-spacing: 3px;
 letter-spacing: .3px;
@@ -28,100 +29,68 @@ letter-spacing: normal;
 letter-spacing: inherit;
 letter-spacing: initial;
 letter-spacing: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>L'interlettre est dictée par la police utilisée. À la différence de 0, cette valeur permet à l'agent utilisateur de modifier l'espace entre les caractères afin de le justifier.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Cette valeur indique l'espace <strong>ajouté</strong> à l'espace par défaut. Les valeurs peuvent être négatives mais les limites imposées dépendent de l'implémentation du moteur. Les agents utilisateurs ne pourront plus augmenter ou réduire l'interlettre afin de justifier le texte. Pour les différentes unités possibles, se référer à la page {{cssxref("&lt;length&gt;")}}.</dd>
-</dl>
+- `normal`
+  - : L'interlettre est dictée par la police utilisée. À la différence de 0, cette valeur permet à l'agent utilisateur de modifier l'espace entre les caractères afin de le justifier.
+- `<length>`
+  - : Cette valeur indique l'espace **ajouté** à l'espace par défaut. Les valeurs peuvent être négatives mais les limites imposées dépendent de l'implémentation du moteur. Les agents utilisateurs ne pourront plus augmenter ou réduire l'interlettre afin de justifier le texte. Pour les différentes unités possibles, se référer à la page {{cssxref("&lt;length&gt;")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.premier    { letter-spacing: 0.4em; }
+```css
+.premier    { letter-spacing: 0.4em; }
 .deuxieme   { letter-spacing: 1em; }
 .troisieme  { letter-spacing: -0.05em; }
-.quatrieme  { letter-spacing: 6px; }</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p class="premier"&gt;Et voici l'interlettre&lt;/p&gt;
-&lt;p class="deuxieme"&gt;Et voici l'interlettre&lt;/p&gt;
-&lt;p class="troisieme"&gt;Et voici l'interlettre&lt;/p&gt;
-&lt;p class="quatrieme"&gt;Et voici l'interlettre&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 440, 185)}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Utiliser une valeur trop grande (positive ou négative) pour <code>letter-spacing</code> rendra les mots illisibles. Si une valeur positive trop importante est utilisée, les lettres seront trop éloignées les unes des autres et on ne pourra pas distinguer les mots. Si une valeur négative trop faible est employée, les lettres se chevaucheront et on ne pourra pas lire le texte.</p>
-
-<p>L'espacement doit être déterminé au cas par cas car chaque famille de polices utilise des caractères de largeurs différentes. Il n'existe pas de valeur unique qui permette de s'assurer que, quelle que soit la police utilisée, le texte soit lisible.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>letter-spacing</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td>Définition initiale pour SVG.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.letter-spacing")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("font-kerning")}}</li>
-</ul>
+.quatrieme  { letter-spacing: 6px; }
+```
+
+### HTML
+
+```html
+<p class="premier">Et voici l'interlettre</p>
+<p class="deuxieme">Et voici l'interlettre</p>
+<p class="troisieme">Et voici l'interlettre</p>
+<p class="quatrieme">Et voici l'interlettre</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 440, 185)}}
+
+## Accessibilité
+
+Utiliser une valeur trop grande (positive ou négative) pour `letter-spacing` rendra les mots illisibles. Si une valeur positive trop importante est utilisée, les lettres seront trop éloignées les unes des autres et on ne pourra pas distinguer les mots. Si une valeur négative trop faible est employée, les lettres se chevaucheront et on ne pourra pas lire le texte.
+
+L'espacement doit être déterminé au cas par cas car chaque famille de polices utilise des caractères de largeurs différentes. Il n'existe pas de valeur unique qui permette de s'assurer que, quelle que soit la police utilisée, le texte soit lisible.
+
+- [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, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+
+## Spécifications
+
+| Spécification                                                                                        | État                                     | Commentaires                                 |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------- |
+| {{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}     | {{Spec2('CSS3 Text')}}             | Aucune modification.                         |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}         | {{Spec2('CSS3 Transitions')}} | `letter-spacing` peut désormais être animée. |
+| {{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}} | {{Spec2('CSS2.1')}}                 | Aucune modification.                         |
+| {{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}} | {{Spec2('SVG1.1')}}                 | Définition initiale pour SVG.                |
+| {{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}                         | {{Spec2('CSS1')}}                 | Définition initiale.                         |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.letter-spacing")}}
+
+## Voir aussi
+
+- {{cssxref("font-kerning")}}
diff --git a/files/fr/web/css/line-break/index.md b/files/fr/web/css/line-break/index.md
index 7eb8a1e86d..76a7236cf3 100644
--- a/files/fr/web/css/line-break/index.md
+++ b/files/fr/web/css/line-break/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/line-break
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>line-break</code></strong> définit la façon dont les sauts de ligne sont gérés. Cette propriété affecte uniquement les textes en chinois, japonais ou coréen (CJK).</p>
+La propriété **`line-break`** définit la façon dont les sauts de ligne sont gérés. Cette propriété affecte uniquement les textes en chinois, japonais ou coréen (CJK).
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 line-break: auto;
 line-break: loose;
 line-break: normal;
@@ -21,48 +22,33 @@ line-break: strict;
 line-break: inherit;
 line-break: initial;
 line-break: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Les sauts de ligne sont gérés avec la règle par défaut.</dd>
- <dt><code>loose</code></dt>
- <dd>Les sauts de ligne sont appliqués afin d'obtenir des lignes courtes (comme pour un journal). L'agent utilisateur fixera une règle souple en fonction des conventions liées à la langue utilisée.</dd>
- <dt><code>normal</code></dt>
- <dd>L'agent utilisateur utilisera les règles normales liées à la langue utilisée</dd>
- <dt><code>strict</code></dt>
- <dd>L'agent utilisateur utilisera des règles strictes et passera à la ligne dès que ce sera nécessaire au vu des caractères du langage utilisé.</dd>
-</dl>
+- `auto`
+  - : Les sauts de ligne sont gérés avec la règle par défaut.
+- `loose`
+  - : Les sauts de ligne sont appliqués afin d'obtenir des lignes courtes (comme pour un journal). L'agent utilisateur fixera une règle souple en fonction des conventions liées à la langue utilisée.
+- `normal`
+  - : L'agent utilisateur utilisera les règles normales liées à la langue utilisée
+- `strict`
+  - : L'agent utilisateur utilisera des règles strictes et passera à la ligne dès que ce sera nécessaire au vu des caractères du langage utilisé.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('CSS3 Text', '#line-break-property', 'line-break')}} | {{Spec2('CSS3 Text')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.line-break")}}</p>
+{{Compat("css.properties.line-break")}}
diff --git a/files/fr/web/css/line-height-step/index.md b/files/fr/web/css/line-height-step/index.md
index c13c19867d..83db5a0e6f 100644
--- a/files/fr/web/css/line-height-step/index.md
+++ b/files/fr/web/css/line-height-step/index.md
@@ -8,34 +8,34 @@ tags:
   - Reference
 translation_of: Web/CSS/line-height-step
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété <strong><code>line-height-step</code></strong> définit le pas de hauteur des boîtes de ligne. Quand le pas est positif, les hauteurs des boîtes de ligne sont arrondies au pas le plus proche. Les valeurs négatives sont invalides.</p>
+La propriété **`line-height-step`** définit le pas de hauteur des boîtes de ligne. Quand le pas est positif, les hauteurs des boîtes de ligne sont arrondies au pas le plus proche. Les valeurs négatives sont invalides.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec une longueur */
+```css
+/* Valeurs avec une longueur */
 line-height-step: 18pt;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>line-height-step</code> peut être définie avec une valeur de type <code><a href="#&lt;length>">&lt;length&gt;</a></code>.</p>
+La propriété `line-height-step` peut être définie avec une valeur de type [`<length>`](#<length>).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>La longueur indiquée est utilisée pour calculer le « pas » pour la hauteur de la boîte de chaque ligne. Voir {{cssxref("&lt;length&gt;")}} pour plus d'informations sur ce type de valeur.</dd>
-</dl>
+- `<length>`
+  - : La longueur indiquée est utilisée pour calculer le « pas » pour la hauteur de la boîte de chaque ligne. Voir {{cssxref("&lt;length&gt;")}} pour plus d'informations sur ce type de valeur.
 
-<h3 id="Formal_syntax">Formal syntax</h3>
+### Formal syntax
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <code>&lt;h1&gt;</code> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).</p>
+Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément `<h1>` ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).
 
-<pre class="brush: css">:root {
+```css
+:root {
   font-size: 12pt;
   --my-grid: 18pt;
   line-height-step: var(--my-grid);
@@ -43,41 +43,27 @@ line-height-step: 18pt;
 h1 {
   font-size: 20pt;
   margin-top: calc(2 * var(--my-grid));
-}</pre>
+}
+```
 
-<p>Voici le résultat obtenu avec une capture d'écran :</p>
+Voici le résultat obtenu avec une capture d'écran :
 
-<p><img alt="How the line-height-step property affects the appearance of text." src="line-grid-center.png"></p>
+![How the line-height-step property affects the appearance of text.](line-grid-center.png)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Rhythmic Sizing', '#line-height-step', 'line-height-step')}}</td>
-   <td>{{Spec2('CSS Rhythmic Sizing')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS Rhythmic Sizing', '#line-height-step', 'line-height-step')}} | {{Spec2('CSS Rhythmic Sizing')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.line-height-step")}}</p>
+{{Compat("css.properties.line-height-step")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("font")}}</li>
- <li>{{cssxref("font-size")}}</li>
- <li>{{cssxref("line-height")}}</li>
-</ul>
+- {{cssxref("font")}}
+- {{cssxref("font-size")}}
+- {{cssxref("line-height")}}
diff --git a/files/fr/web/css/line-height/index.md b/files/fr/web/css/line-height/index.md
index 3c6f8fcb2d..8282f70b7f 100644
--- a/files/fr/web/css/line-height/index.md
+++ b/files/fr/web/css/line-height/index.md
@@ -7,20 +7,21 @@ tags:
   - Reference
 translation_of: Web/CSS/line-height
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>line-height</strong></code> définit la hauteur de la boîte d'une ligne.</p>
+La propriété **`line-height`** définit la hauteur de la boîte d'une ligne.
 
-<p>Sur les éléments de bloc, la propriété <strong><code>line-height</code></strong> indique la hauteur minimale des lignes au sein de l'élément. Sur les éléments en ligne qui ne sont pas <a href="/fr/docs/Web/CSS/Élément_remplacé">remplacés</a>, <strong><code>line-height</code></strong> indique la hauteur utilisée pour calculer la hauteur de la boîte d'une ligne.</p>
+Sur les éléments de bloc, la propriété **`line-height`** indique la hauteur minimale des lignes au sein de l'élément. Sur les éléments en ligne qui ne sont pas [remplacés](/fr/docs/Web/CSS/Élément_remplacé), **`line-height`** indique la hauteur utilisée pour calculer la hauteur de la boîte d'une ligne.
 
-<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div>
+{{EmbedInteractiveExample("pages/css/line-height.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 line-height: normal;
 
-/* Type &lt;number&gt; */
+/* Type <number> */
 /* S'il n'y a pas d'unité, cela
    représente un facteur multiplicateur
    de la taille de la police appliquée à
@@ -28,72 +29,69 @@ line-height: normal;
 line-height: 3.5;
 
 /* Valeur de longueur */
-/* Type &lt;length&gt;      */
+/* Type <length>      */
 line-height: 3em;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt;        */
+/* Type <percentage>        */
 line-height: 34%;
 
 /* Valeurs globales */
 line-height: inherit;
 line-height: initial;
 line-height: unset;
-</pre>
-
-<p>La propriété <code>line-height</code> peut être définie grâce :</p>
-
-<ul>
- <li>à un nombre (une valeur de type <code><a href="#number">&lt;number&gt;</a></code>)</li>
- <li>à une longueur (une valeur de type <code><a href="#length">&lt;length&gt;</a></code>)</li>
- <li>à un pourcentage (une valeur de type <code><a href="#percentage">&lt;percentage&gt;</a></code>)</li>
- <li>au mot-clé <code><a href="#normal">normal</a></code></li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2  selon la valeur de <code>font-family</code>.</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>La valeur utilisée est <strong>sans unité</strong> (type {{cssxref("&lt;number&gt;")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec <code>&lt;number&gt;</code>. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir <code>line-height</code> et éviter les effets de l'héritage.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>La valeur de longueur (type {{cssxref("&lt;length&gt;")}}) est utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites avec la page {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en <code>em</code> peuvent produire des résultats inattendus.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage (type {{cssxref("&lt;percentage&gt;")}}) indiqué, multiplié par la taille calculée de la police de l'élément. Voir la section Notes pour plus de précisions sur le comportement de ce type et des valeurs exprimées en <code>em</code>.</dd>
- <dt><code>-moz-block-height</code> {{non-standard_inline}}</dt>
- <dd>La hauteur de la ligne correspond à la hauteur du contenu pour le bloc courant.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `line-height` peut être définie grâce :
+
+- à un nombre (une valeur de type [`<number>`](#number))
+- à une longueur (une valeur de type [`<length>`](#length))
+- à un pourcentage (une valeur de type [`<percentage>`](#percentage))
+- au mot-clé [`normal`](#normal)
+
+### Valeurs
+
+- `normal`
+  - : Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2  selon la valeur de `font-family`.
+- `<number>`
+  - : La valeur utilisée est **sans unité** (type {{cssxref("&lt;number&gt;")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec `<number>`. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir `line-height` et éviter les effets de l'héritage.
+- `<length>`
+  - : La valeur de longueur (type {{cssxref("&lt;length&gt;")}}) est utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites avec la page {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en `em` peuvent produire des résultats inattendus.
+- `<percentage>`
+  - : La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage (type {{cssxref("&lt;percentage&gt;")}}) indiqué, multiplié par la taille calculée de la police de l'élément. Voir la section Notes pour plus de précisions sur le comportement de ce type et des valeurs exprimées en `em`.
+- `-moz-block-height` {{non-standard_inline}}
+  - : La hauteur de la ligne correspond à la hauteur du contenu pour le bloc courant.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">/* Toutes les règles qui suivent
+```css
+/* Toutes les règles qui suivent
    fourniront un résultat équivalent */
 
 div { line-height: 1.2;   font-size: 10pt }   /* number */
 div { line-height: 1.2em; font-size: 10pt }   /* length */
 div { line-height: 120%;  font-size: 10pt }   /* percentage */
-div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }</pre>
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }
+```
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<ul>
- <li>Plus souvent, on utilisera la propriété raccourcie {{cssxref("font")}} plutôt que <code>line-height</code>. Pour cette propriété raccourcie, il est cependant nécessaire d'avoir une valeur pour la propriété <code>font-family</code>.</li>
-</ul>
+- Plus souvent, on utilisera la propriété raccourcie {{cssxref("font")}} plutôt que `line-height`. Pour cette propriété raccourcie, il est cependant nécessaire d'avoir une valeur pour la propriété `font-family`.
 
-<h3 id="Gestion_de_l'héritage_et_valeurs_sans_unité">Gestion de l'héritage et valeurs sans unité</h3>
+### Gestion de l'héritage et valeurs sans unité
 
-<p>Dans cet exemple, on voit qu'il est préférable d'utiliser des valeurs de type {{cssxref("&lt;number&gt;")}} plutôt que des valeurs de longueur (type {{cssxref("&lt;length&gt;")}}.</p>
+Dans cet exemple, on voit qu'il est préférable d'utiliser des valeurs de type {{cssxref("&lt;number&gt;")}} plutôt que des valeurs de longueur (type {{cssxref("&lt;length&gt;")}}.
 
-<p>On utilisera deux éléments {{HTMLElement("div")}}. Le premier aura une bordure verte et une valeur sans unité. Le second aura une bordure rouge et une valeur de longueur</p>
+On utilisera deux éléments {{HTMLElement("div")}}. Le premier aura une bordure verte et une valeur sans unité. Le second aura une bordure rouge et une valeur de longueur
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.green {
+```css
+.green {
   line-height: 1.1;
   border: solid limegreen;
 }
@@ -110,74 +108,50 @@ h1 {
   vertical-align: top;
   font-size: 15px;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="box green"&gt;
- &lt;h1&gt;Avoid unexpected results by using unitless line-height&lt;/h1&gt;
+```html
+<div class="box green">
+ <h1>Avoid unexpected results by using unitless line-height</h1>
   length and percentage line-heights have poor inheritance behavior ...
-&lt;/div&gt;
+</div>
 
-&lt;div class="box red"&gt;
- &lt;h1&gt;Avoid unexpected results by using unitless line-height&lt;/h1&gt;
+<div class="box red">
+ <h1>Avoid unexpected results by using unitless line-height</h1>
   length and percentage line-heights have poor inheritance behavior ...
-&lt;/div&gt;
-
-&lt;!-- La première hauteur pour &lt;h1&gt; est calculée à partir de sa propre hauteur  (30px × 1.1) = <strong>33px</strong>  --&gt;
-&lt;!-- La hauteur du deuxième &lt;h1&gt; est basée sur la hauteur du div (15px × 1.1) = <strong>16.5px</strong> ... --&gt;
-</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Gestion_de_l'héritage_et_valeurs_sans_unité", '100%', '200', '')}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Il est nécessaire d'utiliser une valeur minimale de <code>1.5</code> pour la propriété <code>line-height</code> lorsqu'on l'applique sur le contenu des paragraphes principaux. Cela aidera les personnes ayant du mal à lire et les personnes dyslexiques. Utiliser une valeur sans unité permet de garantir une mise à l'échelle proportionnelle lorsqu'on zoome/dézoome.</p>
-
-<ul>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html"><em>Visual Presentation: Understanding SC 1.4.8, Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>line-height</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.line-height")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("font")}}</li>
- <li>{{cssxref("font-size")}}</li>
-</ul>
+</div>
+
+<!-- La première hauteur pour <h1> est calculée à partir de sa propre hauteur  (30px × 1.1) = 33px  -->
+<!-- La hauteur du deuxième <h1> est basée sur la hauteur du div (15px × 1.1) = 16.5px ... -->
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Gestion_de_l'héritage_et_valeurs_sans_unité", '100%', '200', '')}}
+
+## Accessibilité
+
+Il est nécessaire d'utiliser une valeur minimale de `1.5` pour la propriété `line-height` lorsqu'on l'applique sur le contenu des paragraphes principaux. Cela aidera les personnes ayant du mal à lire et les personnes dyslexiques. Utiliser une valeur sans unité permet de garantir une mise à l'échelle proportionnelle lorsqu'on zoome/dézoome.
+
+- [_Visual Presentation: Understanding SC 1.4.8, Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires                              |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}         | {{Spec2('CSS3 Transitions')}} | `line-height` peut désormais être animée. |
+| {{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}} | {{Spec2('CSS2.1')}}                 | Aucun changement.                         |
+| {{SpecName('CSS1', '#line-height', 'line-height')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                      |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.line-height")}}
+
+## Voir aussi
+
+- {{cssxref("font")}}
+- {{cssxref("font-size")}}
diff --git a/files/fr/web/css/list-style-image/index.md b/files/fr/web/css/list-style-image/index.md
index e5ede3240b..e0ef94d86c 100644
--- a/files/fr/web/css/list-style-image/index.md
+++ b/files/fr/web/css/list-style-image/index.md
@@ -7,21 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/list-style-image
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>list-style-image</code></strong> définit l'image utilisée comme puce devant les <a href="fr/HTML/%c3%89l%c3%a9ment/li">éléments de listes</a>. On peut également utiliser la propriété raccourcie {{cssxref("list-style")}}.</p>
+La propriété **`list-style-image`** définit l'image utilisée comme puce devant les [éléments de listes](fr/HTML/%c3%89l%c3%a9ment/li). On peut également utiliser la propriété raccourcie {{cssxref("list-style")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/list-style-image.html")}}</div>
+{{EmbedInteractiveExample("pages/css/list-style-image.html")}}
 
+> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}` : list-item``; `}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).
 
+## Syntaxe
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé*/
+```css
+/* Valeurs avec un mot-clé*/
 list-style-image: none;
 
 /*  Valeurs pointant vers une image */
@@ -31,76 +28,58 @@ list-style-image: url('starsolid.gif');
 list-style-image: inherit;
 list-style-image: initial;
 list-style-image: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>url</code></dt>
- <dd>Emplacement de l'image à utiliser comme puce (cf. {{cssxref("&lt;url&gt;")}} pour plus de détails sur les valeurs possibles pour ce type).</dd>
- <dt><code>none</code></dt>
- <dd>Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec {{cssxref("list-style-type")}} sera utilisé à la place.</dd>
-</dl>
+- `url`
+  - : Emplacement de l'image à utiliser comme puce (cf. {{cssxref("&lt;url&gt;")}} pour plus de détails sur les valeurs possibles pour ce type).
+- `none`
+  - : Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec {{cssxref("list-style-type")}} sera utilisé à la place.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">ul {
+```css
+ul {
   list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-    &lt;li&gt;Élément 1&lt;/li&gt;
-    &lt;li&gt;Élément 2&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<ul>
+    <li>Élément 1</li>
+    <li>Élément 2</li>
+</ul>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemple')}}</p>
+{{EmbedLiveSample('Exemple')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#propdef-list-style-image', 'list-style-image')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td>Propriété étendue pour supporter n'importe quel type {{cssxref("&lt;image&gt;")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires                                                                               |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS3 Lists', '#propdef-list-style-image', 'list-style-image')}}             | {{Spec2('CSS3 Lists')}} | Propriété étendue pour supporter n'importe quel type {{cssxref("&lt;image&gt;")}}. |
+| {{SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image')}} | {{Spec2('CSS2.1')}}         | Définition initiale.                                                                       |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.list-style-image")}}</p>
+{{Compat("css.properties.list-style-image")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("list-style")}}</li>
- <li>{{cssxref("list-style-type")}}</li>
- <li>{{cssxref("list-style-position")}}</li>
- <li>La fonction {{cssxref("url()", "url()")}}</li>
-</ul>
+- {{cssxref("list-style")}}
+- {{cssxref("list-style-type")}}
+- {{cssxref("list-style-position")}}
+- La fonction {{cssxref("url()", "url()")}}
diff --git a/files/fr/web/css/list-style-position/index.md b/files/fr/web/css/list-style-position/index.md
index 7b25c5bcc1..213038f27a 100644
--- a/files/fr/web/css/list-style-position/index.md
+++ b/files/fr/web/css/list-style-position/index.md
@@ -7,27 +7,23 @@ tags:
   - Reference
 translation_of: Web/CSS/list-style-position
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>list-style-position</code></strong> permet de définir la position du marqueur (cf. {{cssxref("::marker")}} de liste par rapport à la boîte principale.</p>
+La propriété **`list-style-position`** permet de définir la position du marqueur (cf. {{cssxref("::marker")}} de liste par rapport à la boîte principale.
 
-<div>{{EmbedInteractiveExample("pages/css/list-style-position.html")}}</div>
+{{EmbedInteractiveExample("pages/css/list-style-position.html")}}
 
-<p>Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie {{cssxref("list-style")}}.</p>
+Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie {{cssxref("list-style")}}.
 
-<div class="note">
-<p><strong>Note :</strong>
+> **Note :**
+>
+> - Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}` : list-item``; `). [Par défaut](https://www.w3.org/TR/html5/rendering.html#lists), cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).
+> - Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec `list-style-position: inside`. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir {{bug("36854")}} pour plus d'informations.
 
-<ul>
- <li>Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>). <a href="https://www.w3.org/TR/html5/rendering.html#lists">Par défaut</a>, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</li>
- <li>Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec <code>list-style-position: inside</code>. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir {{bug("36854")}} pour plus d'informations.</li>
-</ul>
-</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec mot-clé */
+```css
+/* Valeurs avec mot-clé */
 list-style-position: inside;
 list-style-position: outside;
 
@@ -35,28 +31,27 @@ list-style-position: outside;
 list-style-position: inherit;
 list-style-position: initial;
 list-style-position: unset;
-</pre>
+```
 
-<p>La propriété <code>list-style-position</code> est définie avec l'un des mots-clés suivants.</p>
+La propriété `list-style-position` est définie avec l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>inside</code></dt>
- <dd>La boîte du marqueur ({{cssxref("::marker")}}) est la première boîte en ligne (<em>inline</em>) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur.</dd>
- <dt><code>outside</code></dt>
- <dd>La boîte du marqueur ({{cssxref("::marker")}}) est en dehors de la boîte principale.</dd>
-</dl>
+- `inside`
+  - : La boîte du marqueur ({{cssxref("::marker")}}) est la première boîte en ligne (_inline_) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur.
+- `outside`
+  - : La boîte du marqueur ({{cssxref("::marker")}}) est en dehors de la boîte principale.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css;">.one {
+```css
+.one {
   list-style:square inside;
 }
 
@@ -68,68 +63,52 @@ list-style-position: unset;
 .three {
   list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
   list-style-position: inherit;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;ul class="one"&gt; Liste 1
-  &lt;li&gt;Élément 1-1&lt;/li&gt;
-  &lt;li&gt;Élément 1-2&lt;/li&gt;
-  &lt;li&gt;Élément 1-3&lt;/li&gt;
-  &lt;li&gt;Élément 1-4&lt;/li&gt;
-&lt;/ul&gt;
-&lt;ul class="two"&gt; Liste 2
-  &lt;li&gt;Élément 2-1&lt;/li&gt;
-  &lt;li&gt;Élément 2-2&lt;/li&gt;
-  &lt;li&gt;Élément 2-3&lt;/li&gt;
-  &lt;li&gt;Élément 2-4&lt;/li&gt;
-&lt;/ul&gt;
-&lt;ul class="three"&gt; Liste 3
-  &lt;li&gt;Élément 3-1&lt;/li&gt;
-  &lt;li&gt;Élément 3-2&lt;/li&gt;
-  &lt;li&gt;Élément 3-3&lt;/li&gt;
-  &lt;li&gt;Élément 3-4&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","420")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.list-style-position")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("list-style")}}</li>
- <li>{{cssxref("list-style-type")}}</li>
- <li>{{cssxref("list-style-image")}}</li>
- <li>{{cssxref("::marker")}}</li>
+}
+```
+
+### HTML
+
+```html
+<ul class="one"> Liste 1
+  <li>Élément 1-1</li>
+  <li>Élément 1-2</li>
+  <li>Élément 1-3</li>
+  <li>Élément 1-4</li>
+</ul>
+<ul class="two"> Liste 2
+  <li>Élément 2-1</li>
+  <li>Élément 2-2</li>
+  <li>Élément 2-3</li>
+  <li>Élément 2-4</li>
 </ul>
+<ul class="three"> Liste 3
+  <li>Élément 3-1</li>
+  <li>Élément 3-2</li>
+  <li>Élément 3-3</li>
+  <li>Élément 3-4</li>
+</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","420")}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}}             | {{Spec2('CSS3 Lists')}} | Aucun changement.    |
+| {{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}} | {{Spec2('CSS2.1')}}         | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.list-style-position")}}
+
+## Voir aussi
+
+- {{cssxref("list-style")}}
+- {{cssxref("list-style-type")}}
+- {{cssxref("list-style-image")}}
+- {{cssxref("::marker")}}
diff --git a/files/fr/web/css/list-style-type/index.md b/files/fr/web/css/list-style-type/index.md
index 0e684cba37..fd7205ffb8 100644
--- a/files/fr/web/css/list-style-type/index.md
+++ b/files/fr/web/css/list-style-type/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/list-style-type
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>list-style-type</code></strong> permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.).</p>
+La propriété** `list-style-type`** permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.).
 
-<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div
+{{EmbedInteractiveExample("pages/css/list-style-type.html")}}La [couleur](/fr/docs/Web/CSS/color_value) de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique.
 
-<p>La <a href="/fr/docs/Web/CSS/color_value">couleur</a> de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique.</p>
+Cette propriété s'applique aux éléments d'une liste (c'est-à-dire les éléments pour lesquels on a {{cssxref("display")}}`: list-item;`. Cela inclut par défaut les éléments {{HTMLElement("li")}} et {{HTMLElement("summary")}}. Il est possible de l'utiliser pour d'autres éléments si on utilise `display: list-item` sur ceux-ci. Cette propriété est héritée et on peut donc l'appliquer aux éléments parents (généralement {{HTMLElement("ol")}} ou {{HTMLElement("ul")}}) afin qu'elle s'applique à l'ensemble des éléments fils.
 
-<p>Cette propriété s'applique aux éléments d'une liste (c'est-à-dire les éléments pour lesquels on a {{cssxref("display")}}<code>: list-item;</code>. Cela inclut par défaut les éléments {{HTMLElement("li")}} et {{HTMLElement("summary")}}. Il est possible de l'utiliser pour d'autres éléments si on utilise <code>display: list-item</code> sur ceux-ci. Cette propriété est héritée et on peut donc l'appliquer aux éléments parents (généralement {{HTMLElement("ol")}} ou {{HTMLElement("ul")}}) afin qu'elle s'applique à l'ensemble des éléments fils.</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">/* Liste partielle des mots-clés utilisables */
+```css
+/* Liste partielle des mots-clés utilisables */
 list-style-type: disc;
 list-style-type: circle;
 list-style-type: square;
@@ -29,7 +28,7 @@ list-style-type: cjk-ideographic;
 list-style-type: kannada;
 
 /* Une chaîne de caractères */
-/* Type &lt;string&gt;            */
+/* Type <string>            */
 list-style-type: '-';
 
 /* Un identifiant correspondant à */
@@ -43,143 +42,140 @@ list-style-type: none;
 list-style-type: inherit;
 list-style-type: initial;
 list-style-type: unset;
-</pre>
-
-<p>La propriété <code>list-style-type</code> peut être définie grâce à :</p>
-
-<ul>
- <li>une valeur <code><a href="#custom-ident">&lt;custom-ident&gt;</a></code></li>
- <li>une valeur <code><a href="#symbol">symbols()</a></code></li>
- <li>une valeur <code><a href="#str">&lt;string&gt;</a></code></li>
- <li>au mot-clé <code><a href="#none*">none</a></code></li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
- <dd>Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :</dd>
- <dt>{{cssxref("symbols()")}}</dt>
- <dd>Définit un style de puce utilisé.</dd>
- <dt><code>none</code></dt>
- <dd>Aucun marqueur n'est affiché.</dd>
- <dt>{{cssxref("&lt;string&gt;")}}</dt>
- <dd>La chaîne de caractères indiquée sera utilisée comme puce</dd>
- <dt><code>disc</code></dt>
- <dd>Un disque plein (la valeur par défaut)</dd>
- <dt><code>circle</code></dt>
- <dd>Un cercle vide</dd>
- <dt><code>square</code></dt>
- <dd>Un carré plein</dd>
- <dt><code>decimal</code></dt>
- <dd>Des nombres décimaux, commençant par 1.</dd>
- <dt><code>cjk-decimal</code> {{experimental_inline}}</dt>
- <dd>Des nombres décimaux Han.</dd>
- <dt><code>decimal-leading-zero</code></dt>
- <dd>Des nombres décimaux complétés par des 0.</dd>
- <dt><code>lower-roman</code></dt>
- <dd>Des chiffres romains en minuscules.</dd>
- <dt><code>upper-roman</code></dt>
- <dd>Des chiffres romains en majuscules.</dd>
- <dt><code>lower-greek</code></dt>
- <dd>Des lettres grecques en minuscules.</dd>
- <dt><code>lower-alpha</code>, <code>lower-latin</code></dt>
- <dd>Des lettres ASCII en minuscules.</dd>
- <dt><code>upper-alpha</code>, <code>upper-latin</code></dt>
- <dd>Des lettres ASCII en majuscules.</dd>
- <dt><code>arabic-indic</code>, <code>-moz-arabic-indic</code></dt>
- <dd>Des nombres arabo-indiens.</dd>
- <dt><code>armenian</code></dt>
- <dd>La numérotation arménienne traditionnelle.</dd>
- <dt><code>bengali</code>, <code>-moz-bengali</code></dt>
- <dd>La numérotation bengali.</dd>
- <dt><code>cambodian</code>/<code>khmer</code></dt>
- <dd>La numérotation cambodgienne/khmer.</dd>
- <dt><code>cjk-earthly-branch</code>, <code>-moz-cjk-earthly-branch</code></dt>
- <dd>Des nombres ordinaux Han de la « branche terrestre ».</dd>
- <dt><code>cjk-heavenly-stem</code>, <code>-moz-cjk-heavenly-stem</code></dt>
- <dd>Des nombres ordinaux Han de la « souche céleste ».</dd>
- <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt>
- <dd>Identique à <code>trad-chinese-informal</code>.</dd>
- <dt><code>devanagari</code>, <code>-moz-devanagari</code></dt>
- <dd>La numérotation devanagari.</dd>
- <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt>
- <dd>La numérotation éthiopienne.</dd>
- <dt><code>georgian</code></dt>
- <dd>La numérotation géorgienne traditionnelle.</dd>
- <dt><code>gujarati</code>, <code>-moz-gujarati</code></dt>
- <dd>La numérotation gujarati.</dd>
- <dt><code>gurmukhi</code>, <code>-moz-gurmukhi</code></dt>
- <dd>La numérotation gurmukhi.</dd>
- <dt><code>hebrew</code> {{experimental_inline}}</dt>
- <dd>La numérotation hébraïque traditionnelle</dd>
- <dt><code>hiragana</code> {{experimental_inline}}</dt>
- <dd>Le lettrage lexicographique hiragana.</dd>
- <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt>
- <dd>Le lettrage {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} hiragana.</dd>
- <dt><code>japanese-formal</code> {{experimental_inline}}</dt>
- <dd>La numérotation japonaise formelle utilisée pour les documents financiers ou légaux. Les kanjis sont conçus afin de ne pas pouvoir être modifié pour ressembler à un autre.</dd>
- <dt><code>japanese-informal</code> {{experimental_inline}}</dt>
- <dd>La numérotation japonaise informelle.</dd>
- <dt><code>kannada</code>, <code>-moz-kannada</code></dt>
- <dd>La numérotation kannada.</dd>
- <dt><code>katakana</code> {{experimental_inline}}</dt>
- <dd>Le lettrage lexicographique katakana.</dd>
- <dt><code>katakana-iroha</code> {{experimental_inline}}</dt>
- <dd>Le lettrage {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} katakana.</dd>
- <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt>
- <dd>La numérotation coréenne hangul.</dd>
- <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt>
- <dd>La numérotation formelle coréenne Han.</dd>
- <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt>
- <dd>La numérotation coréenne hanja.</dd>
- <dt><code>lao</code>, <code>-moz-lao</code></dt>
- <dd>La numérotation laotienne.</dd>
- <dt><code>lower-armenian</code> {{experimental_inline}}*</dt>
- <dd>La numérotation arménienne en minuscules.</dd>
- <dt><code>malayalam</code>, <code>-moz-malayalam</code></dt>
- <dd>La numérotation Malayalam.</dd>
- <dt><code>mongolian</code> {{experimental_inline}}</dt>
- <dd>La numérotation mongolienne.</dd>
- <dt><code>myanmar</code>, <code>-moz-myanmar</code></dt>
- <dd>La numérotation birmane.</dd>
- <dt><code>oriya</code>, <code>-moz-oriya</code></dt>
- <dd>La numérotation Oriya.</dd>
- <dt><code>persian</code> {{experimental_inline}}, <code>-moz-persian</code></dt>
- <dd>La numérotation perse.</dd>
- <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt>
- <dd>La numérotation formelle en chinois simplifié.</dd>
- <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt>
- <dd>La numérotation informelle en chinois simplifié.</dd>
- <dt><code>tamil</code> {{experimental_inline}}, <code>-moz-tamil</code></dt>
- <dd>La numérotation tamoule.</dd>
- <dt><code>telugu</code>, <code>-moz-telugu</code></dt>
- <dd>La numérotation Telugu.</dd>
- <dt><code>thai</code>, <code>-moz-thai</code></dt>
- <dd>La numérotation thaïlandaise.</dd>
- <dt><code>tibetan</code> {{experimental_inline}}*</dt>
- <dd>La numérotation tibétaine.</dd>
- <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt>
- <dd>La numérotation formelle en chinois traditionnel.</dd>
- <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt>
- <dd>La numérotation informelle en chinois traditionnel.</dd>
- <dt><code>upper-armenian</code> {{experimental_inline}}*</dt>
- <dd>La numérotation arménienne traditionnelle en majuscules.</dd>
- <dt><code>disclosure-open</code> {{experimental_inline}}</dt>
- <dd>Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est déplié/révélé.</dd>
- <dt><code>disclosure-closed</code> {{experimental_inline}}</dt>
- <dd>Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est replié/masqué.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `list-style-type` peut être définie grâce à :
+
+- une valeur [`<custom-ident>`](#custom-ident)
+- une valeur [`symbols()`](#symbol)
+- une valeur [`<string>`](#str)
+- au mot-clé [`none`](#none*)
+
+### Valeurs
+
+- {{cssxref("custom-ident", "&lt;custom-ident&gt;")}}
+  - : Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :
+- {{cssxref("symbols()")}}
+  - : Définit un style de puce utilisé.
+- `none`
+  - : Aucun marqueur n'est affiché.
+- {{cssxref("&lt;string&gt;")}}
+  - : La chaîne de caractères indiquée sera utilisée comme puce
+- `disc`
+  - : Un disque plein (la valeur par défaut)
+- `circle`
+  - : Un cercle vide
+- `square`
+  - : Un carré plein
+- `decimal`
+  - : Des nombres décimaux, commençant par 1.
+- `cjk-decimal` {{experimental_inline}}
+  - : Des nombres décimaux Han.
+- `decimal-leading-zero`
+  - : Des nombres décimaux complétés par des 0.
+- `lower-roman`
+  - : Des chiffres romains en minuscules.
+- `upper-roman`
+  - : Des chiffres romains en majuscules.
+- `lower-greek`
+  - : Des lettres grecques en minuscules.
+- `lower-alpha`, `lower-latin`
+  - : Des lettres ASCII en minuscules.
+- `upper-alpha`, `upper-latin`
+  - : Des lettres ASCII en majuscules.
+- `arabic-indic`, `-moz-arabic-indic`
+  - : Des nombres arabo-indiens.
+- `armenian`
+  - : La numérotation arménienne traditionnelle.
+- `bengali`, `-moz-bengali`
+  - : La numérotation bengali.
+- `cambodian`/`khmer`
+  - : La numérotation cambodgienne/khmer.
+- `cjk-earthly-branch`, `-moz-cjk-earthly-branch`
+  - : Des nombres ordinaux Han de la « branche terrestre ».
+- `cjk-heavenly-stem`, `-moz-cjk-heavenly-stem`
+  - : Des nombres ordinaux Han de la « souche céleste ».
+- `cjk-ideographic`{{experimental_inline}}
+  - : Identique à `trad-chinese-informal`.
+- `devanagari`, `-moz-devanagari`
+  - : La numérotation devanagari.
+- `ethiopic-numeric` {{experimental_inline}}
+  - : La numérotation éthiopienne.
+- `georgian`
+  - : La numérotation géorgienne traditionnelle.
+- `gujarati`, `-moz-gujarati`
+  - : La numérotation gujarati.
+- `gurmukhi`, `-moz-gurmukhi`
+  - : La numérotation gurmukhi.
+- `hebrew` {{experimental_inline}}
+  - : La numérotation hébraïque traditionnelle
+- `hiragana` {{experimental_inline}}
+  - : Le lettrage lexicographique hiragana.
+- `hiragana-iroha` {{experimental_inline}}
+  - : Le lettrage {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} hiragana.
+- `japanese-formal` {{experimental_inline}}
+  - : La numérotation japonaise formelle utilisée pour les documents financiers ou légaux. Les kanjis sont conçus afin de ne pas pouvoir être modifié pour ressembler à un autre.
+- `japanese-informal` {{experimental_inline}}
+  - : La numérotation japonaise informelle.
+- `kannada`, `-moz-kannada`
+  - : La numérotation kannada.
+- `katakana` {{experimental_inline}}
+  - : Le lettrage lexicographique katakana.
+- `katakana-iroha` {{experimental_inline}}
+  - : Le lettrage {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} katakana.
+- `korean-hangul-formal` {{experimental_inline}}
+  - : La numérotation coréenne hangul.
+- `korean-hanja-formal` {{experimental_inline}}
+  - : La numérotation formelle coréenne Han.
+- `korean-hanja-informal` {{experimental_inline}}
+  - : La numérotation coréenne hanja.
+- `lao`, `-moz-lao`
+  - : La numérotation laotienne.
+- `lower-armenian` {{experimental_inline}}\*
+  - : La numérotation arménienne en minuscules.
+- `malayalam`, `-moz-malayalam`
+  - : La numérotation Malayalam.
+- `mongolian` {{experimental_inline}}
+  - : La numérotation mongolienne.
+- `myanmar`, `-moz-myanmar`
+  - : La numérotation birmane.
+- `oriya`, `-moz-oriya`
+  - : La numérotation Oriya.
+- `persian` {{experimental_inline}}, `-moz-persian`
+  - : La numérotation perse.
+- `simp-chinese-formal` {{experimental_inline}}
+  - : La numérotation formelle en chinois simplifié.
+- `simp-chinese-informal` {{experimental_inline}}
+  - : La numérotation informelle en chinois simplifié.
+- `tamil` {{experimental_inline}}, `-moz-tamil`
+  - : La numérotation tamoule.
+- `telugu`, `-moz-telugu`
+  - : La numérotation Telugu.
+- `thai`, `-moz-thai`
+  - : La numérotation thaïlandaise.
+- `tibetan` {{experimental_inline}}\*
+  - : La numérotation tibétaine.
+- `trad-chinese-formal` {{experimental_inline}}
+  - : La numérotation formelle en chinois traditionnel.
+- `trad-chinese-informal` {{experimental_inline}}
+  - : La numérotation informelle en chinois traditionnel.
+- `upper-armenian` {{experimental_inline}}\*
+  - : La numérotation arménienne traditionnelle en majuscules.
+- `disclosure-open` {{experimental_inline}}
+  - : Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est déplié/révélé.
+- `disclosure-closed` {{experimental_inline}}
+  - : Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est replié/masqué.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">ol.normal {
+```css
+ol.normal {
   list-style-type: upper-alpha;
 }
 
@@ -188,99 +184,115 @@ list-style-type: unset;
 ol.shortcut {
   list-style: upper-alpha;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ol class="normal"&gt;Liste 1
-  &lt;li&gt;Coucou&lt;/li&gt;
-  &lt;li&gt;Monde&lt;/li&gt;
-  &lt;li&gt;Comment ça va ?&lt;/li&gt;
-&lt;/ol&gt;
+```html
+<ol class="normal">Liste 1
+  <li>Coucou</li>
+  <li>Monde</li>
+  <li>Comment ça va ?</li>
+</ol>
 
-&lt;ol class="shortcut"&gt;Liste 2
-  &lt;li&gt;On a&lt;/li&gt;
-  &lt;li&gt;le&lt;/li&gt;
-  &lt;li&gt;même&lt;/li&gt;
-  &lt;li&gt;résultat&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
+<ol class="shortcut">Liste 2
+  <li>On a</li>
+  <li>le</li>
+  <li>même</li>
+  <li>résultat</li>
+</ol>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+{{EmbedLiveSample("Exemples","200","300")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Le lecteur d'écran <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> n'annonce pas, incorrectement, les listes non ordonnées lorsque <code>list-style-type:none</code> leur est appliqué. Pour pallier ce problème, on peut ajouter un <a href="https://fr.wikipedia.org/wiki/Espace_sans_chasse">espace sans chasse</a> comme <a href="/fr/docs/Web/CSS/content">pseudo-contenu</a> avant chaque élément de liste afin que la liste soit correctement annoncée.</p>
+Le lecteur d'écran [VoiceOver](https://help.apple.com/voiceover/info/guide/) n'annonce pas, incorrectement, les listes non ordonnées lorsque `list-style-type:none` leur est appliqué. Pour pallier ce problème, on peut ajouter un [espace sans chasse](https://fr.wikipedia.org/wiki/Espace_sans_chasse) comme [pseudo-contenu](/fr/docs/Web/CSS/content) avant chaque élément de liste afin que la liste soit correctement annoncée.
 
-<pre class="brush: css">ul {
+```css
+ul {
   list-style-type: none;
 }
 
 ul li::before {
   content: "\200B";
 }
-</pre>
+```
 
-<ul>
- <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver et <code>list-style-type: none</code> – Unfettered Thoughts (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
- <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 </a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">(en anglais)</a></li>
-</ul>
+- [VoiceOver et `list-style-type: none` – Unfettered Thoughts (en anglais)](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/)
+- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- _[Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 ](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)_[(en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Pour certains types, il est nécessaire d'avoir une police correspondante installée pour que l'affichage fonctionne.</li>
- <li>Pour des raisons historiques, <code>cjk-ideographic</code> est synonyme de <code>trad-chinese-informal</code>.</li>
-</ul>
+- Pour certains types, il est nécessaire d'avoir une police correspondante installée pour que l'affichage fonctionne.
+- Pour des raisons historiques, `cjk-ideographic` est synonyme de `trad-chinese-informal`.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#extending-css2', 'list-style-type')}}</td>
-   <td>{{Spec2("CSS3 Counter Styles")}}</td>
-   <td>Les compteurs CSS2.1 sont redéfinis.<br>
-    La syntaxe est étendue pour prendre en charge les règles <code>@counter-style</code>.<br>
-    Définition des types : <code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, <code>disclosure-open</code> et <code>disclosure-closed</code>.<br>
-    <code>&lt;counter-style&gt;</code> est étendu avec la notation fonctionnelle <code>symbols()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td>La syntaxe est modifiée pour prendre en charge les identifiants utilisés avec les règles <code>@counter-style</code>.<br>
-    Prise en charge du type <code>&lt;string&gt;</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>
-    <p>Définition initiale.</p>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{SpecName('CSS3 Counter Styles', '#extending-css2', 'list-style-type')}}
+      </td>
+      <td>{{Spec2("CSS3 Counter Styles")}}</td>
+      <td>
+        Les compteurs CSS2.1 sont redéfinis.<br />La syntaxe est étendue pour
+        prendre en charge les règles
+        <code>@counter-style</code>.<br />Définition des types :
+        <code>hebrew</code>, <code>cjk-ideographic</code>,
+        <code>hiragana</code>, <code>hiragana-iroha</code>,
+        <code>katakana</code>, <code>katakana-iroha</code>,
+        <code>japanese-formal</code>, <code>japanese-informal</code>,
+        <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,
+        <code>simp-chinese-formal</code>,
+        <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>,
+        <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>,
+        <code>cjk-decimal</code>, <code>ethiopic-numeric</code>,
+        <code>disclosure-open</code> et
+        <code>disclosure-closed</code>.<br /><code>&#x3C;counter-style></code>
+        est étendu avec la notation fonctionnelle <code>symbols()</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}
+      </td>
+      <td>{{Spec2('CSS3 Lists')}}</td>
+      <td>
+        La syntaxe est modifiée pour prendre en charge les identifiants utilisés
+        avec les règles <code>@counter-style</code>.<br />Prise en charge du
+        type <code>&#x3C;string></code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}
+      </td>
+      <td>{{Spec2('CSS2.1')}}</td>
+      <td><p>Définition initiale.</p></td>
+    </tr>
+  </tbody>
 </table>
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.list-style-type")}}</p>
+{{Compat("css.properties.list-style-type")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("list-style")}}</li>
- <li>{{cssxref("list-style-image")}}</li>
- <li>{{cssxref("list-style-position")}}</li>
-</ul>
+- {{cssxref("list-style")}}
+- {{cssxref("list-style-image")}}
+- {{cssxref("list-style-position")}}
diff --git a/files/fr/web/css/list-style/index.md b/files/fr/web/css/list-style/index.md
index 8022402371..f71aa35d3d 100644
--- a/files/fr/web/css/list-style/index.md
+++ b/files/fr/web/css/list-style/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/list-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>list-style</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de définir {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} et {{cssxref("list-style-position")}}.</p>
+La propriété **`list-style`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) qui permet de définir {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} et {{cssxref("list-style-position")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/list-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/list-style.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</p>
-</div>
+> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}` : list-item``; `}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Type */
+```css
+/* Type */
 list-style: square;
 
 /* Image */
@@ -40,112 +39,93 @@ list-style: none;
 list-style: inherit;
 list-style: initial;
 list-style: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si {{cssxref("list-style-type")}} et {{cssxref("list-style-image")}} sont tous les deux définis, <code>list-style-type</code> sera utilisé si l'image est indisponible.</p>
+Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si {{cssxref("list-style-type")}} et {{cssxref("list-style-image")}} sont tous les deux définis, `list-style-type` sera utilisé si l'image est indisponible.
 
-<dl>
- <dt><code>&lt;'list-style-type'&gt;</code></dt>
- <dd>Voir {{cssxref("list-style-type")}}</dd>
- <dt><code>&lt;'list-style-image'&gt;</code></dt>
- <dd>Voir {{cssxref("list-style-image")}}</dd>
- <dt><code>&lt;'list-style-position'&gt;</code></dt>
- <dd>Voir {{cssxref("list-style-position")}}</dd>
- <dt><code>none</code></dt>
- <dd>Aucun style n'est utilisé.</dd>
-</dl>
+- `<'list-style-type'>`
+  - : Voir {{cssxref("list-style-type")}}
+- `<'list-style-image'>`
+  - : Voir {{cssxref("list-style-image")}}
+- `<'list-style-position'>`
+  - : Voir {{cssxref("list-style-position")}}
+- `none`
+  - : Aucun style n'est utilisé.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.un {
+```css
+.un {
   list-style: circle;
 }
 
 .deux {
   list-style: square inside;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">Liste 1
-&lt;ul class="un"&gt;
-  &lt;li&gt;Élément 1&lt;/li&gt;
-  &lt;li&gt;Élément 2&lt;/li&gt;
-  &lt;li&gt;Élément 3&lt;/li&gt;
-&lt;/ul&gt;
+```html
+Liste 1
+<ul class="un">
+  <li>Élément 1</li>
+  <li>Élément 2</li>
+  <li>Élément 3</li>
+</ul>
 Liste 2
-&lt;ul class="deux"&gt;
-  &lt;li&gt;Élément A&lt;/li&gt;
-  &lt;li&gt;Élément B&lt;/li&gt;
-  &lt;li&gt;Élément C&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+<ul class="deux">
+  <li>Élément A</li>
+  <li>Élément B</li>
+  <li>Élément C</li>
+</ul>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples','auto', 220)}}</p>
+{{EmbedLiveSample('Exemples','auto', 220)}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Safari ne reconnait pas (incorrectement) les listes non ordonnées lorsque <code>list-style:none</code> leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans). Pour pallier ce problème, on peut ajouter un <a href="https://fr.wikipedia.org/wiki/Espace_sans_chasse">espace sans chasse</a> comme <a href="/fr/docs/Web/CSS/content">pseudo-contenu</a> avant chaque élément de liste afin que la liste soit correctement annoncée.</p>
+Safari ne reconnait pas (incorrectement) les listes non ordonnées lorsque `list-style:none` leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans). Pour pallier ce problème, on peut ajouter un [espace sans chasse](https://fr.wikipedia.org/wiki/Espace_sans_chasse) comme [pseudo-contenu](/fr/docs/Web/CSS/content) avant chaque élément de liste afin que la liste soit correctement annoncée.
 
-<pre class="brush: css">ul {
+```css
+ul {
   list-style: none;
 }
 
 ul li::before {
   content: "\200B";
 }
-</pre>
+```
 
-<ul>
- <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver et <code>list-style-type: none</code> – Unfettered Thoughts (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
- <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 </a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">(en anglais)</a></li>
-</ul>
+- [VoiceOver et `list-style-type: none` – Unfettered Thoughts (en anglais)](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/)
+- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- _[Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 ](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)_[(en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.list-style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("list-style-type")}}</li>
- <li>{{cssxref("list-style-image")}}</li>
- <li>{{cssxref("list-style-position")}}</li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}             | {{Spec2('CSS3 Lists')}} | Aucun changement.    |
+| {{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}} | {{Spec2('CSS2.1')}}         | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.list-style")}}
+
+## Voir aussi
+
+- {{cssxref("list-style-type")}}
+- {{cssxref("list-style-image")}}
+- {{cssxref("list-style-position")}}
diff --git a/files/fr/web/css/list_of_proprietary_css_features/index.md b/files/fr/web/css/list_of_proprietary_css_features/index.md
index 68f7371faa..0f9bdc4761 100644
--- a/files/fr/web/css/list_of_proprietary_css_features/index.md
+++ b/files/fr/web/css/list_of_proprietary_css_features/index.md
@@ -8,162 +8,144 @@ tags:
 translation_of: Web/CSS/List_of_Proprietary_CSS_Features
 original_slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires
 ---
-<p>{{CSSRef}}{{Draft}}</p>
+{{CSSRef}}{{Draft}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.</strong></p>
-</div>
+> **Note :** Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p>
+> **Attention :** Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :
+>
+> - [Les extensions Microsoft à CSS](/fr/docs/Web/CSS/Microsoft_Extensions)
+> - [Les extensions Mozilla à CSS](/fr/docs/Web/CSS/Mozilla_Extensions)
+> - [Les extensions WebKit à CSS](/fr/docs/Web/CSS/WebKit_Extensions)
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Microsoft_Extensions">Les extensions Microsoft à CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions">Les extensions Mozilla à CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/WebKit_Extensions">Les extensions WebKit à CSS</a></li>
-</ul>
-</div>
+Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir [Implémentation des fonctionnalités CSS à l'état de brouillon](/fr/docs/conflicting/Web/CSS/Mozilla_Extensions "en/CSS/Draft_Implementations_of_CSS_Features") pour une liste de ces dernières).
 
-<p>Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir <a href="/fr/docs/conflicting/Web/CSS/Mozilla_Extensions" title="en/CSS/Draft_Implementations_of_CSS_Features">Implémentation des fonctionnalités CSS à l'état de brouillon</a> pour une liste de ces dernières).</p>
+## Gecko
 
-<h2 id="Gecko">Gecko</h2>
+### Propriétés
 
-<h3 id="Propriétés">Propriétés</h3>
+- {{ Cssxref("-moz-force-broken-image-icon") }}
+- {{ Cssxref("-moz-image-region") }}
+- {{ Cssxref("margin-inline-end") }}
+- {{ Cssxref("margin-inline-start") }}
+- {{ Cssxref("-moz-orient") }}
+- {{ Cssxref("padding-inline-end") }}
+- {{ Cssxref("padding-inline-start") }}
+- {{ Cssxref("-moz-stack-sizing") }}
+- {{ Cssxref("-moz-window-shadow") }}
 
-<ul>
- <li>{{ Cssxref("-moz-force-broken-image-icon") }}</li>
- <li>{{ Cssxref("-moz-image-region") }}</li>
- <li>{{ Cssxref("margin-inline-end") }}</li>
- <li>{{ Cssxref("margin-inline-start") }}</li>
- <li>{{ Cssxref("-moz-orient") }}</li>
- <li>{{ Cssxref("padding-inline-end") }}</li>
- <li>{{ Cssxref("padding-inline-start") }}</li>
- <li>{{ Cssxref("-moz-stack-sizing") }}</li>
- <li>{{ Cssxref("-moz-window-shadow") }}</li>
-</ul>
+### Valeurs
 
-<h3 id="Valeurs">Valeurs</h3>
+#### {{ cssxref("background-image") }}
 
-<h4 id="cssxref(background-image)">{{ cssxref("background-image") }}</h4>
+- Portions d'images
 
-<ul>
- <li>Portions d'images
-  <ul>
-   <li>{{ cssxref("-moz-image-rect") }}</li>
-  </ul>
- </li>
-</ul>
+  - {{ cssxref("-moz-image-rect") }}
 
-<h3 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h3>
+### Pseudo-éléments et pseudo-classes
 
-<p>...</p>
+...
 
-<h3 id="Règles_At">Règles At</h3>
+### Règles At
 
-<p>...</p>
+...
 
-<h3 id="Requêtes_de_média">Requêtes de média</h3>
+### Requêtes de média
 
-<p>...</p>
+...
 
-<h3 id="Autres">Autres</h3>
+### Autres
 
-<p>...</p>
+...
 
-<h2 id="Opera">Opera</h2>
+## Opera
 
-<h3 id="Propriétés_2">Propriétés</h3>
+### Propriétés
 
-<p>...</p>
+...
 
-<h3 id="Valeurs_2">Valeurs</h3>
+### Valeurs
 
-<h4 id="cssxref(background-image)_2">{{ cssxref("background-image") }}</h4>
+#### {{ cssxref("background-image") }}
 
-<ul>
- <li>{{ cssxref("-o-double-rainbow") }}</li>
-</ul>
+- {{ cssxref("-o-double-rainbow") }}
 
-<h3 id="Pseudo-éléments_et_pseudo-classes_2">Pseudo-éléments et pseudo-classes</h3>
+### Pseudo-éléments et pseudo-classes
 
-<p>...</p>
+...
 
-<h3 id="Règles_At_2">Règles At</h3>
+### Règles At
 
-<p>...</p>
+...
 
-<h3 id="Requêtes_de_média_2">Requêtes de média</h3>
+### Requêtes de média
 
-<p>...</p>
+...
 
-<h3 id="Autres_2">Autres</h3>
+### Autres
 
-<p>...</p>
+...
 
-<h2 id="Trident_(IE)">Trident (IE)</h2>
+## Trident (IE)
 
-<h3 id="Propriétés_3">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{ cssxref("-ms-accelerator") }}</li>
-</ul>
+- {{ cssxref("-ms-accelerator") }}
 
-<h3 id="Valeurs_3">Valeurs</h3>
+### Valeurs
 
-<p>...</p>
+...
 
-<h3 id="Pseudo-éléments_et_pseudo-classes_3">Pseudo-éléments et pseudo-classes</h3>
+### Pseudo-éléments et pseudo-classes
 
-<p>...</p>
+...
 
-<h3 id="Règles_At_3">Règles At</h3>
+### Règles At
 
-<p>...</p>
+...
 
-<h3 id="Requêtes_de_média_3">Requêtes de média</h3>
+### Requêtes de média
 
-<p>...</p>
+...
 
-<h3 id="Autres_3">Autres</h3>
+### Autres
 
-<p>...</p>
+...
 
-<h2 id="WebKit">WebKit</h2>
+## WebKit
 
-<h3 id="Propriétés_4">Propriétés</h3>
+### Propriétés
 
-<ul>
- <li>{{ Cssxref("-webkit-box-reflect") }}</li>
- <li>{{ Cssxref("-webkit-mask") }}</li>
- <li>{{ Cssxref("-webkit-mask-attachment") }}</li>
- <li>{{ Cssxref("-webkit-mask-composite") }}</li>
- <li>{{ Cssxref("-webkit-mask-image") }}</li>
- <li>{{ Cssxref("-webkit-mask-origin") }}</li>
- <li>{{ Cssxref("-webkit-mask-repeat") }}</li>
- <li>{{ Cssxref("-webkit-tap-highlight-color") }}</li>
- <li>{{ Cssxref("-webkit-text-decorations-in-effect") }}</li>
- <li>{{ Cssxref("-webkit-text-stroke") }}</li>
- <li>{{ Cssxref("-webkit-text-stroke-color") }}</li>
- <li>{{ Cssxref("-webkit-text-stroke-width") }}</li>
- <li>{{ Cssxref("-webkit-touch-callout") }}</li>
-</ul>
+- {{ Cssxref("-webkit-box-reflect") }}
+- {{ Cssxref("-webkit-mask") }}
+- {{ Cssxref("-webkit-mask-attachment") }}
+- {{ Cssxref("-webkit-mask-composite") }}
+- {{ Cssxref("-webkit-mask-image") }}
+- {{ Cssxref("-webkit-mask-origin") }}
+- {{ Cssxref("-webkit-mask-repeat") }}
+- {{ Cssxref("-webkit-tap-highlight-color") }}
+- {{ Cssxref("-webkit-text-decorations-in-effect") }}
+- {{ Cssxref("-webkit-text-stroke") }}
+- {{ Cssxref("-webkit-text-stroke-color") }}
+- {{ Cssxref("-webkit-text-stroke-width") }}
+- {{ Cssxref("-webkit-touch-callout") }}
 
-<h3 id="Valeurs_4">Valeurs</h3>
+### Valeurs
 
-<p>...</p>
+...
 
-<h3 id="Pseudo-éléments_et_pseudo-classes_4">Pseudo-éléments et pseudo-classes</h3>
+### Pseudo-éléments et pseudo-classes
 
-<p>...</p>
+...
 
-<h3 id="Règles_At_4">Règles At</h3>
+### Règles At
 
-<p>...</p>
+...
 
-<h3 id="Requêtes_de_média_4">Requêtes de média</h3>
+### Requêtes de média
 
-<p>...</p>
+...
 
-<h3 id="Autres_4">Autres</h3>
+### Autres
 
-<p>...</p>
+...
diff --git a/files/fr/web/css/margin-block-end/index.md b/files/fr/web/css/margin-block-end/index.md
index 92547fd248..4729fd9213 100644
--- a/files/fr/web/css/margin-block-end/index.md
+++ b/files/fr/web/css/margin-block-end/index.md
@@ -8,18 +8,17 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-block-end
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>margin-block-end</code></strong> définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+La propriété **`margin-block-end`** définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}</div
+{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.
 
-<p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 margin-block-end: 10px;      /* Une longueur absolue */
 margin-block-end: 1em;       /* Une longueur relative à la taille du texte */
 margin-block-end: 5%;        /* Une largeur relative à la
@@ -30,21 +29,22 @@ margin-block-end: auto;
 
 /* Valeurs globales */
 margin-block-end: inherit;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>margin-block-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+La propriété `margin-block-end` peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -54,56 +54,42 @@ margin-block-end: inherit;
   writing-mode: vertical-lr;
   margin-block-end: 20px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block-end", "margin-block-end")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.margin-block-end")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("margin-top")}},</li>
-   <li>{{cssxref("margin-right")}},</li>
-   <li>{{cssxref("margin-bottom")}}</li>
-   <li>{{cssxref("margin-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}</li>
- <li>{{cssxref("direction")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-block-end", "margin-block-end")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.margin-block-end")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("margin-top")}},
+  - {{cssxref("margin-right")}},
+  - {{cssxref("margin-bottom")}}
+  - {{cssxref("margin-left")}}
+
+- {{cssxref("writing-mode")}}
+- {{cssxref("direction")}}
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/margin-block-start/index.md b/files/fr/web/css/margin-block-start/index.md
index a78bcd1869..4dc2eea34d 100644
--- a/files/fr/web/css/margin-block-start/index.md
+++ b/files/fr/web/css/margin-block-start/index.md
@@ -8,18 +8,19 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-block-start
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>margin-block-start</code></strong> définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+La propriété **`margin-block-start`** définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}
 
-<p>Cette propriété est à rapprocher de {{cssxref("margin-inline-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.</p>
+Cette propriété est à rapprocher de {{cssxref("margin-inline-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 margin-block-start: 10px;      /* Une longueur absolue */
 margin-block-start: 1em;       /* Une longueur relative à la taille du texte */
 margin-block-start: 5%;        /* Une largeur relative à la
@@ -30,21 +31,22 @@ margin-block-start: auto;
 
 /* Valeurs globales */
 margin-block-start: inherit;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>margin-block-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+La propriété `margin-block-start` peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -54,56 +56,42 @@ margin-block-start: inherit;
   writing-mode: vertical-lr;
   margin-block-start: 20px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.margin-block-start")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("margin-top")}},</li>
-   <li>{{cssxref("margin-right")}},</li>
-   <li>{{cssxref("margin-bottom")}}</li>
-   <li>{{cssxref("margin-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}</li>
- <li>{{cssxref("direction")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.margin-block-start")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("margin-top")}},
+  - {{cssxref("margin-right")}},
+  - {{cssxref("margin-bottom")}}
+  - {{cssxref("margin-left")}}
+
+- {{cssxref("writing-mode")}}
+- {{cssxref("direction")}}
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/margin-block/index.md b/files/fr/web/css/margin-block/index.md
index 558482254f..0e5ed13c26 100644
--- a/files/fr/web/css/margin-block/index.md
+++ b/files/fr/web/css/margin-block/index.md
@@ -9,12 +9,13 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-block
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>margin-block</code></strong> définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`margin-block`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 margin-block: 10px 20px;  /* Une longueur absolue */
 margin-block: 1em 2em;    /* Une longueur relative à la taille du texte */
 margin-block: 5% 2%;      /* Une longueur relative à la largeur ou hauteur du bloc englobant */
@@ -27,25 +28,26 @@ margin-block: auto;
 margin-block: inherit;
 margin-block: initial;
 margin-block: unset;
-</pre>
+```
 
-<p>Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-inline")}} qui correspond aux propriétés {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}.</p>
+Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-inline")}} qui correspond aux propriétés {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>margin-block</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+La propriété `margin-block` peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -55,47 +57,34 @@ margin-block: unset;
   writing-mode: vertical-rl;
   margin-block: 20px 40px;
   background-color: #c8c800;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.margin-block")}}</p>
+{{Compat("css.properties.margin-block")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li>
- <li>Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}
+- Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/margin-bottom/index.md b/files/fr/web/css/margin-bottom/index.md
index a984e60431..0fb9de985f 100644
--- a/files/fr/web/css/margin-bottom/index.md
+++ b/files/fr/web/css/margin-bottom/index.md
@@ -7,18 +7,19 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-bottom
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>margin-bottom</code></strong> définit la marge basse appliquée à un élément. On peut définir une marge négative qui rapprochera l'élément de ses voisins ou une marge positive qui l'en écartera..</p>
+La propriété **`margin-bottom`** définit la marge basse appliquée à un élément. On peut définir une marge négative qui rapprochera l'élément de ses voisins ou une marge positive qui l'en écartera..
 
-<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}
 
-<p>Cette propriété n'a aucun effet sur les éléments en ligne (<em>inline</em>) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p>
+Cette propriété n'a aucun effet sur les éléments en ligne (_inline_) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;     */
+```css
+/* Valeurs de longueur */
+/* Type <length>     */
 margin-bottom: 10px;    /* Une longueur absolue */
 margin-bottom: 1em;     /* Une longueur relative à la taille du texte */
 margin-bottom: 5%;      /* Une longueur relative à la
@@ -31,32 +32,31 @@ margin-bottom: auto;
 margin-bottom: inherit;
 margin-bottom: initial;
 margin-bottom: unset;
-</pre>
+```
 
-<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage</code><code>&gt;</code>). Cette valeur peut être nulle, positive ou négative.</p>
+La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<length>`) ou un pourcentage (` <percentage``> `). Cette valeur peut être nulle, positive ou négative.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("&lt;length&gt;")}}.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui est relative à la <strong>largeur</strong> du bloc englobant.</dd>
- <dt><code>auto</code></dt>
- <dd>Voir {{cssxref("margin")}}.</dd>
-</dl>
+- `<length>`
+  - : Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("&lt;length&gt;")}}.
+- `<percentage>`
+  - : Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui est relative à la **largeur** du bloc englobant.
+- `auto`
+  - : Voir {{cssxref("margin")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>Grâce à la feuille de style on définit la marge basse et la hauteur des différentes <code>div</code> :</p>
+Grâce à la feuille de style on définit la marge basse et la hauteur des différentes `div` :
 
-<pre class="brush: css">.box0 {
+```css
+.box0 {
   margin-bottom:1em;
   height:3em;
 }
@@ -69,12 +69,12 @@ margin-bottom: unset;
   border-width:1px 0;
   margin-bottom:2em;
 }
+```
 
-</pre>
+On ajoute quelques règles afin de mieux visualiser les effets obtenus :
 
-<p>On ajoute quelques règles afin de mieux visualiser les effets obtenus :</p>
-
-<pre class="brush: css">.container {
+```css
+.container {
   background-color:orange;
   width:320px;
   border:1px solid black;
@@ -82,56 +82,34 @@ margin-bottom: unset;
 div {
   width:320px;
   background-color:gold;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div class="container"&gt;
-&lt;div class="box0"&gt;Boîte 0&lt;/div&gt;
-&lt;div class="box1"&gt;Boîte 1&lt;/div&gt;
-&lt;div class="box2"&gt;La marge négative de 1 m'attire vers le haut&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples',350,200)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Pas de modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>margin-bottom</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>L'effet sur les éléments en ligne est supprimé.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.margin-bottom")}}</p>
+}
+```
+
+### HTML
+
+```html
+<div class="container">
+<div class="box0">Boîte 0</div>
+<div class="box1">Boîte 1</div>
+<div class="box2">La marge négative de 1 m'attire vers le haut</div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples',350,200)}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                                    |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------- |
+| {{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}             | {{Spec2('CSS3 Box')}}             | Pas de modification significative.              |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}} | {{Spec2('CSS3 Transitions')}} | `margin-bottom` peut désormais être animée.     |
+| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}} | {{Spec2('CSS2.1')}}                 | L'effet sur les éléments en ligne est supprimé. |
+| {{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}                     | {{Spec2('CSS1')}}                 | Définition initiale.                            |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.margin-bottom")}}
diff --git a/files/fr/web/css/margin-inline-end/index.md b/files/fr/web/css/margin-inline-end/index.md
index d5f5efa20b..bbe3597bf1 100644
--- a/files/fr/web/css/margin-inline-end/index.md
+++ b/files/fr/web/css/margin-inline-end/index.md
@@ -8,18 +8,19 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-inline-end
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>margin-inline-end</code></strong> définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+La propriété **`margin-inline-end`** définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}
 
-<p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.</p>
+Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 margin-inline-end: 10px;      /* Une longueur absolue */
 margin-inline-end: 1em;       /* Une longueur relative à la taille du texte */
 margin-inline-end: 5%;        /* Une largeur relative à la
@@ -30,21 +31,22 @@ margin-inline-end: auto;
 
 /* Valeurs globales */
 margin-inline-end: inherit;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>margin-inline-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+La propriété `margin-inline-end` peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -54,57 +56,43 @@ margin-inline-end: inherit;
   writing-mode: vertical-lr;
   margin-inline-end: 20px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.margin-inline-end")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("margin-top")}},</li>
-   <li>{{cssxref("margin-right")}},</li>
-   <li>{{cssxref("margin-bottom")}}</li>
-   <li>{{cssxref("margin-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("margin-inline-start")}}</li>
- <li>{{cssxref("writing-mode")}}</li>
- <li>{{cssxref("direction")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.margin-inline-end")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("margin-top")}},
+  - {{cssxref("margin-right")}},
+  - {{cssxref("margin-bottom")}}
+  - {{cssxref("margin-left")}}
+
+- {{cssxref("margin-inline-start")}}
+- {{cssxref("writing-mode")}}
+- {{cssxref("direction")}}
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/margin-inline-start/index.md b/files/fr/web/css/margin-inline-start/index.md
index 4a72562316..f457427a1c 100644
--- a/files/fr/web/css/margin-inline-start/index.md
+++ b/files/fr/web/css/margin-inline-start/index.md
@@ -8,18 +8,19 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-inline-start
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>margin-inline-start</code></strong> définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+La propriété **`margin-inline-start`** définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}
 
-<p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.</p>
+Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 margin-inline-start: 10px;      /* Une longueur absolue */
 margin-inline-start: 1em;       /* Une longueur relative à la taille du texte */
 margin-inline-start: 5%;        /* Une largeur relative à la
@@ -30,21 +31,22 @@ margin-inline-start: auto;
 
 /* Valeurs globales */
 margin-inline-start: inherit;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>margin-inline-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+La propriété `margin-inline-start` peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -54,57 +56,43 @@ margin-inline-start: inherit;
   writing-mode: vertical-lr;
   margin-inline-start: 20px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.margin-inline-start")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("margin-top")}},</li>
-   <li>{{cssxref("margin-right")}},</li>
-   <li>{{cssxref("margin-bottom")}}</li>
-   <li>{{cssxref("margin-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("margin-inline-end")}}</li>
- <li>{{cssxref("writing-mode")}}</li>
- <li>{{cssxref("direction")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.margin-inline-start")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("margin-top")}},
+  - {{cssxref("margin-right")}},
+  - {{cssxref("margin-bottom")}}
+  - {{cssxref("margin-left")}}
+
+- {{cssxref("margin-inline-end")}}
+- {{cssxref("writing-mode")}}
+- {{cssxref("direction")}}
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/margin-inline/index.md b/files/fr/web/css/margin-inline/index.md
index 0df8247fa6..9a374a5564 100644
--- a/files/fr/web/css/margin-inline/index.md
+++ b/files/fr/web/css/margin-inline/index.md
@@ -9,12 +9,13 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-inline
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>margin-inline</code></strong> définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`margin-inline`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 margin-inline: 10px 20px;  /* Une longueur absolue */
 margin-inline: 1em 2em;    /* Une longueur relative à la taille du texte */
 margin-inline: 5% 2%;      /* Une longueur relative à la largeur ou hauteur du bloc englobant */
@@ -27,25 +28,26 @@ margin-inline: auto;
 margin-inline: inherit;
 margin-inline: initial;
 margin-inline: unset;
-</pre>
+```
 
-<p>Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-block")}} qui correspond aux propriétés {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}.</p>
+Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-block")}} qui correspond aux propriétés {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>margin-inline</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+La propriété `margin-inline` peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -55,47 +57,34 @@ margin-inline: unset;
   writing-mode: vertical-rl;
   margin-inline: 20px 40px;
   background-color: #c8c800;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+{{EmbedLiveSample("Exemples", 140, 140)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.margin-inline")}}</p>
+{{Compat("css.properties.margin-inline")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li>
- <li>Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}
+- Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/margin-left/index.md b/files/fr/web/css/margin-left/index.md
index b0791c0906..e80263ac29 100644
--- a/files/fr/web/css/margin-left/index.md
+++ b/files/fr/web/css/margin-left/index.md
@@ -7,20 +7,21 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-left
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>margin-left</code></strong> d'un élément définit l'espace horizontal à gauche qui formera la marge à gauche de l'élément. On peut avoir une marge gauche négative qui rapproche l'élément de ses voisins ou une marge positive qui l'en écarte.</p>
+La propriété **`margin-left`** d'un élément définit l'espace horizontal à gauche qui formera la marge à gauche de l'élément. On peut avoir une marge gauche négative qui rapproche l'élément de ses voisins ou une marge positive qui l'en écarte.
 
-<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-left.html")}}
 
-<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"><em>la fusion de marges</em></a>.</p>
+Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle [_la fusion de marges_](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
 
-<p>Dans certains cas où les dimensions sont sur-contraintes (autrement dit quand <code>width</code>, <code>margin-left</code>, <code>border</code>, <code>padding</code>, la taille de la zone de contenu et <code>margin-right</code> sont toutes définies), <code>margin-left</code> est ignorée. La valeur calculée sera la même que si <code>auto</code> avait été utilisée.</p>
+Dans certains cas où les dimensions sont sur-contraintes (autrement dit quand `width`, `margin-left`, `border`, `padding`, la taille de la zone de contenu et `margin-right` sont toutes définies), `margin-left` est ignorée. La valeur calculée sera la même que si `auto` avait été utilisée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 margin-left: 10px;  /* Une longueur absolue */
 margin-left: 1em;   /* Une longueur absolue relative à la taille du texte */
 margin-left: 5%;    /* Une marge dont la taille est relative à la largeur
@@ -33,152 +34,162 @@ margin-left: auto;
 margin-left: inherit;
 margin-left: initial;
 margin-left: unset;
-</pre>
-
-<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>).</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur fixe, du type {{cssxref("&lt;length&gt;")}} : elle peut être exprimée en pixels (<code>px</code>) ou en fonction de la taille du texte (<code>em</code>) ou être relative à la taille de la zone d'affichage (<em>viewport</em>) (<code>vh</code>).</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}} relative à la largeur du bloc englobant.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également <code>auto</code>. Le tableau suivant précise les différents cas :
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Valeur de {{cssxref("display")}}</th>
-    <th scope="col">Valeur de {{cssxref("float")}}</th>
-    <th scope="col">Valeur de {{cssxref("position")}}</th>
-    <th scope="col">Valeur calculée pour <code>auto</code></th>
-    <th scope="col">Commentaires</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
-    <th><em>n'importe laquelle</em></th>
-    <th><code>static</code> ou <code>relative</code></th>
-    <td><code>0</code></td>
-    <td>Disposition en ligne</td>
-   </tr>
-   <tr>
-    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
-    <th><em>n'importe laquelle</em></th>
-    <th><code>static</code> ou <code>relative</code></th>
-    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.</td>
-    <td>Disposition en bloc</td>
-   </tr>
-   <tr>
-    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
-    <th><code>left</code> ou <code>right</code></th>
-    <th><code>static</code> ou <code>relative</code></th>
-    <td><code>0</code></td>
-    <td>Disposition en bloc avec les éléments flottants</td>
-   </tr>
-   <tr>
-    <th><em>n'importe quelle </em><code>table-*</code><em>, sauf </em><code>table-caption</code></th>
-    <th><em>n'importe laquelle</em></th>
-    <th><em>n'importe laquelle</em></th>
-    <td><code>0</code></td>
-    <td>Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.</td>
-   </tr>
-   <tr>
-    <th><em>n'importe laquelle, sauf <code>flex</code>,</em> <code>inline-flex</code><em>, ou </em><code>table-*</code></th>
-    <th><em>n'importe laquelle</em></th>
-    <th><em><code>fixed</code></em> ou <code>absolute</code></th>
-    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée.</td>
-    <td>Positionnement absolu.</td>
-   </tr>
-   <tr>
-    <th><code>flex</code>, <code>inline-flex</code></th>
-    <th><em>n'importe laquelle</em></th>
-    <th><em>n'importe laquelle</em></th>
-    <td><code>0</code>, sauf s'il reste de l'espace horizontal libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec <code>auto</code>.</td>
-    <td>Boîtes flexibles.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<length>`) ou un pourcentage (`<percentage>`).
+
+### Valeurs
+
+- `<length>`
+  - : Une valeur fixe, du type {{cssxref("&lt;length&gt;")}} : elle peut être exprimée en pixels (`px`) ou en fonction de la taille du texte (`em`) ou être relative à la taille de la zone d'affichage (_viewport_) (`vh`).
+- `<percentage>`
+  - : Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}} relative à la largeur du bloc englobant.
+- `auto`
+
+  - : Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également `auto`. Le tableau suivant précise les différents cas :
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <th scope="col">Valeur de {{cssxref("display")}}</th>
+          <th scope="col">Valeur de {{cssxref("float")}}</th>
+          <th scope="col">Valeur de {{cssxref("position")}}</th>
+          <th scope="col">Valeur calculée pour <code>auto</code></th>
+          <th scope="col">Commentaires</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>
+            <code>inline</code>, <code>inline-block</code>,
+            <code>inline-table</code>
+          </th>
+          <th><em>n'importe laquelle</em></th>
+          <th><code>static</code> ou <code>relative</code></th>
+          <td><code>0</code></td>
+          <td>Disposition en ligne</td>
+        </tr>
+        <tr>
+          <th>
+            <code>block</code>, <code>inline</code>, <code>inline-block</code>,
+            <code>block</code>, <code>table</code>, <code>inline-table</code>,
+            <code>list-item</code>, <code>table-caption</code>
+          </th>
+          <th><em>n'importe laquelle</em></th>
+          <th><code>static</code> ou <code>relative</code></th>
+          <td>
+            <code>0</code> sauf si <code>margin-left</code> et
+            <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la
+            valeur utilisée sera celle qui permet de centrer l'élément au sein de
+            l'élément parent.
+          </td>
+          <td>Disposition en bloc</td>
+        </tr>
+        <tr>
+          <th>
+            <code>block</code>, <code>inline</code>, <code>inline-block</code>,
+            <code>block</code>, <code>table</code>, <code>inline-table</code>,
+            <code>list-item</code>, <code>table-caption</code>
+          </th>
+          <th><code>left</code> ou <code>right</code></th>
+          <th><code>static</code> ou <code>relative</code></th>
+          <td><code>0</code></td>
+          <td>Disposition en bloc avec les éléments flottants</td>
+        </tr>
+        <tr>
+          <th>
+            <em>n'importe quelle </em><code>table-*</code><em>, sauf </em
+            ><code>table-caption</code>
+          </th>
+          <th><em>n'importe laquelle</em></th>
+          <th><em>n'importe laquelle</em></th>
+          <td><code>0</code></td>
+          <td>
+            Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser
+            {{cssxref("border-spacing")}} à la place.
+          </td>
+        </tr>
+        <tr>
+          <th>
+            <em>n'importe laquelle, sauf <code>flex</code>,</em>
+            <code>inline-flex</code><em>, ou </em><code>table-*</code>
+          </th>
+          <th><em>n'importe laquelle</em></th>
+          <th>
+            <em><code>fixed</code></em> ou <code>absolute</code>
+          </th>
+          <td>
+            <code>0</code> sauf si <code>margin-left</code> et
+            <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la
+            valeur utilisée sera celle qui permet de centrer la boîte de bordure
+            dans la zone de largeur disponible si elle fixée.
+          </td>
+          <td>Positionnement absolu.</td>
+        </tr>
+        <tr>
+          <th><code>flex</code>, <code>inline-flex</code></th>
+          <th><em>n'importe laquelle</em></th>
+          <th><em>n'importe laquelle</em></th>
+          <td>
+            <code>0</code>, sauf s'il reste de l'espace horizontal libre. Dans ce
+            cas, l'espace restant sera distribué de façon équitable entre toutes les
+            marges avec <code>auto</code>.
+          </td>
+          <td>Boîtes flexibles.</td>
+        </tr>
+      </tbody>
+    </table>
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   margin-left: 50%;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Un grand rosier se trouvait à l’entrée du jardin ;
+```html
+<p>Un grand rosier se trouvait à l’entrée du jardin ;
    les roses qu’il portait étaient blanches, mais
    trois jardiniers étaient en train de les peindre
    en rouge.
-&lt;/p&gt;
-&lt;p class=exemple&gt;
+</p>
+<p class=exemple>
   Alice s’avança pour les regarder, et, au moment où
   elle approchait, elle en entendit un qui disait :
   « Fais donc attention, Cinq, et ne m’éclabousse pas
   ainsi avec ta peinture. »
-&lt;/p&gt;
-&lt;p&gt;
+</p>
+<p>
   « Ce n’est pas de ma faute, » dit Cinq d’un ton
   bourru, « c’est Sept qui m’a poussé le coude. »
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Pas de modification significative depuis CSS 2.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>margin-left</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Le comportement de <code>margin-left</code> sur les éléments flexibles est défini.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>L'effet sur les éléments en ligne (<em>inline</em>) est retiré.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#margin-left', 'margin-left')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.margin-left")}}</p>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                                            |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------- |
+| {{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}                 | {{Spec2('CSS3 Box')}}             | Pas de modification significative depuis CSS 2.1.                       |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}} | {{Spec2('CSS3 Transitions')}} | `margin-left` peut désormais être animée.                               |
+| {{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}         | {{Spec2('CSS3 Flexbox')}}         | Le comportement de `margin-left` sur les éléments flexibles est défini. |
+| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}} | {{Spec2('CSS2.1')}}                 | L'effet sur les éléments en ligne (_inline_) est retiré.                |
+| {{SpecName('CSS1', '#margin-left', 'margin-left')}}                     | {{Spec2('CSS1')}}                 | Définition initiale.                                                    |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.margin-left")}}
diff --git a/files/fr/web/css/margin-right/index.md b/files/fr/web/css/margin-right/index.md
index cf82405f56..7bf9c09f0e 100644
--- a/files/fr/web/css/margin-right/index.md
+++ b/files/fr/web/css/margin-right/index.md
@@ -7,18 +7,19 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-right
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>margin-right</code></strong> d'un élément définit l'espace horizontal à droite qui formera la marge à droite. On peut avoir une marge droite négative.</p>
+La propriété **`margin-right`** d'un élément définit l'espace horizontal à droite qui formera la marge à droite. On peut avoir une marge droite négative.
 
-<div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-right.html")}}
 
-<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing"><em>la fusion de marges</em></a>.</p>
+Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle [_la fusion de marges_](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt;      */
+```css
+/* Valeur de longueur */
+/* Type <length>      */
 margin-right: 20px;        /* Une longueur absolue */
 margin-right: 1em;         /* Une longueur relative à la taille du texte */
 margin-right: 5%;          /* Une marge relative à la largeur
@@ -31,152 +32,162 @@ margin-right: auto;
 margin-right: inherit;
 margin-right: initial;
 margin-right: unset;
-</pre>
-
-<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>).</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur fixe, du type {{cssxref("&lt;length&gt;")}} : elle peut être exprimée en pixels (<code>px</code>) ou en fonction de la taille du texte (<code>em</code>) ou être relative à la taille de la zone d'affichage (<em>viewport</em>) (<code>vh</code>).</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}} relative à la largeur du bloc englobant.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également <code>auto</code>. Le tableau suivant précise les différents cas :
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Valeur de {{cssxref("display")}}</th>
-    <th scope="col">Valeur de {{cssxref("float")}}</th>
-    <th scope="col">Valeur de {{cssxref("position")}}</th>
-    <th scope="col">Valeur calculée pour <code>auto</code></th>
-    <th scope="col">Commentaires</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
-    <th><em>n'importe laquelle</em></th>
-    <th><code>static</code> ou <code>relative</code></th>
-    <td><code>0</code></td>
-    <td>Disposition en ligne</td>
-   </tr>
-   <tr>
-    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
-    <th><em>n'importe laquelle</em></th>
-    <th><code>static</code> ou <code>relative</code></th>
-    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.</td>
-    <td>Disposition en bloc</td>
-   </tr>
-   <tr>
-    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
-    <th><code>left</code> ou <code>right</code></th>
-    <th><code>static</code> ou <code>relative</code></th>
-    <td><code>0</code></td>
-    <td>Disposition en bloc avec les éléments flottants</td>
-   </tr>
-   <tr>
-    <th><em>n'importe quelle </em><code>table-*</code><em> sauf </em><code>table-caption</code></th>
-    <th><em>n'importe laquelle</em></th>
-    <th><em>n'importe laquelle</em></th>
-    <td><code>0</code></td>
-    <td>Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.</td>
-   </tr>
-   <tr>
-    <th><em>ni'mporte quelle autre sauf <code>flex</code>,</em> <code>inline-flex</code><em> ou </em><code>table-*</code></th>
-    <th><em>n'importe laquelle</em></th>
-    <th><em><code>fixed</code></em> ou <code>absolute</code></th>
-    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée.</td>
-    <td>Positionnement absolu.</td>
-   </tr>
-   <tr>
-    <th><code>flex</code>, <code>inline-flex</code></th>
-    <th><em>n'importe laquelle</em></th>
-    <th><em>n'importe laquelle</em></th>
-    <td><code>0</code>, sauf s'il reste de l'espace horizontal libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec <code>auto</code>.</td>
-    <td>Boîtes flexibles.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<length>`) ou un pourcentage (`<percentage>`).
+
+### Valeurs
+
+- `<length>`
+  - : Une valeur fixe, du type {{cssxref("&lt;length&gt;")}} : elle peut être exprimée en pixels (`px`) ou en fonction de la taille du texte (`em`) ou être relative à la taille de la zone d'affichage (_viewport_) (`vh`).
+- `<percentage>`
+  - : Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}} relative à la largeur du bloc englobant.
+- `auto`
+
+  - : Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également `auto`. Le tableau suivant précise les différents cas :
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <th scope="col">Valeur de {{cssxref("display")}}</th>
+          <th scope="col">Valeur de {{cssxref("float")}}</th>
+          <th scope="col">Valeur de {{cssxref("position")}}</th>
+          <th scope="col">Valeur calculée pour <code>auto</code></th>
+          <th scope="col">Commentaires</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>
+            <code>inline</code>, <code>inline-block</code>,
+            <code>inline-table</code>
+          </th>
+          <th><em>n'importe laquelle</em></th>
+          <th><code>static</code> ou <code>relative</code></th>
+          <td><code>0</code></td>
+          <td>Disposition en ligne</td>
+        </tr>
+        <tr>
+          <th>
+            <code>block</code>, <code>inline</code>, <code>inline-block</code>,
+            <code>block</code>, <code>table</code>, <code>inline-table</code>,
+            <code>list-item</code>, <code>table-caption</code>
+          </th>
+          <th><em>n'importe laquelle</em></th>
+          <th><code>static</code> ou <code>relative</code></th>
+          <td>
+            <code>0</code> sauf si <code>margin-left</code> et
+            <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la
+            valeur utilisée sera celle qui permet de centrer l'élément au sein de
+            l'élément parent.
+          </td>
+          <td>Disposition en bloc</td>
+        </tr>
+        <tr>
+          <th>
+            <code>block</code>, <code>inline</code>, <code>inline-block</code>,
+            <code>block</code>, <code>table</code>, <code>inline-table</code>,
+            <code>list-item</code>, <code>table-caption</code>
+          </th>
+          <th><code>left</code> ou <code>right</code></th>
+          <th><code>static</code> ou <code>relative</code></th>
+          <td><code>0</code></td>
+          <td>Disposition en bloc avec les éléments flottants</td>
+        </tr>
+        <tr>
+          <th>
+            <em>n'importe quelle </em><code>table-*</code><em> sauf </em
+            ><code>table-caption</code>
+          </th>
+          <th><em>n'importe laquelle</em></th>
+          <th><em>n'importe laquelle</em></th>
+          <td><code>0</code></td>
+          <td>
+            Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser
+            {{cssxref("border-spacing")}} à la place.
+          </td>
+        </tr>
+        <tr>
+          <th>
+            <em>ni'mporte quelle autre sauf <code>flex</code>,</em>
+            <code>inline-flex</code><em> ou </em><code>table-*</code>
+          </th>
+          <th><em>n'importe laquelle</em></th>
+          <th>
+            <em><code>fixed</code></em> ou <code>absolute</code>
+          </th>
+          <td>
+            <code>0</code> sauf si <code>margin-left</code> et
+            <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la
+            valeur utilisée sera celle qui permet de centrer la boîte de bordure
+            dans la zone de largeur disponible si elle fixée.
+          </td>
+          <td>Positionnement absolu.</td>
+        </tr>
+        <tr>
+          <th><code>flex</code>, <code>inline-flex</code></th>
+          <th><em>n'importe laquelle</em></th>
+          <th><em>n'importe laquelle</em></th>
+          <td>
+            <code>0</code>, sauf s'il reste de l'espace horizontal libre. Dans ce
+            cas, l'espace restant sera distribué de façon équitable entre toutes les
+            marges avec <code>auto</code>.
+          </td>
+          <td>Boîtes flexibles.</td>
+        </tr>
+      </tbody>
+    </table>
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   margin-right: 50%;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Un grand rosier se trouvait à l’entrée du jardin ;
+```html
+<p>Un grand rosier se trouvait à l’entrée du jardin ;
    les roses qu’il portait étaient blanches, mais
    trois jardiniers étaient en train de les peindre
    en rouge.
-&lt;/p&gt;
-&lt;p class=exemple&gt;
+</p>
+<p class=exemple>
   Alice s’avança pour les regarder, et, au moment où
   elle approchait, elle en entendit un qui disait :
   « Fais donc attention, Cinq, et ne m’éclabousse pas
   ainsi avec ta peinture. »
-&lt;/p&gt;
-&lt;p&gt;
+</p>
+<p>
   « Ce n’est pas de ma faute, » dit Cinq d’un ton
   bourru, « c’est Sept qui m’a poussé le coude. »
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-right')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Pas de changement significatif.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-right')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>margin-right</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Le comportement de <code>margin-right</code> est défini sur les éléments flexibles.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>L'effet sur les éléments en ligne (<em>inline</em>) est retiré.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#margin-right', 'margin-right')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.margin-right")}}</p>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                                                             |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------ |
+| {{SpecName('CSS3 Box', '#the-margin', 'margin-right')}}                     | {{Spec2('CSS3 Box')}}             | Pas de changement significatif.                                          |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-right')}}     | {{Spec2('CSS3 Transitions')}} | `margin-right` peut désormais être animée.                               |
+| {{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}             | {{Spec2('CSS3 Flexbox')}}         | Le comportement de `margin-right` est défini sur les éléments flexibles. |
+| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}} | {{Spec2('CSS2.1')}}                 | L'effet sur les éléments en ligne (_inline_) est retiré.                 |
+| {{SpecName('CSS1', '#margin-right', 'margin-right')}}                     | {{Spec2('CSS1')}}                 | Définition initiale                                                      |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.margin-right")}}
diff --git a/files/fr/web/css/margin-top/index.md b/files/fr/web/css/margin-top/index.md
index c122bc0e39..b447616e24 100644
--- a/files/fr/web/css/margin-top/index.md
+++ b/files/fr/web/css/margin-top/index.md
@@ -7,18 +7,19 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-top
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>margin-top</code></strong> définit l'espace vertical pour la marge appliquée en haut de l'élément. Une valeur négative peut être utilisée.</p>
+La propriété **`margin-top`** définit l'espace vertical pour la marge appliquée en haut de l'élément. Une valeur négative peut être utilisée.
 
-<div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-top.html")}}
 
-<p>Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (<em>inline</em>) tels que {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p>
+Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (_inline_) tels que {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 margin-top: 10px;  /* Une longueur absolue */
 margin-top: 1em;   /* Une longueur proportionnelle à la taille du texte */
 margin-top: 5%;    /* Une marge relative à la largeur */
@@ -31,30 +32,29 @@ margin-top: auto;
 margin-top: inherit;
 margin-top: initial;
 margin-top: unset;
-</pre>
+```
 
-<p>Le mot-clé <code>auto</code> ou une valeur de longueur (<code>&lt;length&gt;</code>) ou de pourcentage (<code>&lt;percentage&gt;</code>).</p>
+Le mot-clé `auto` ou une valeur de longueur (`<length>`) ou de pourcentage (`<percentage>`).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("&lt;length&gt;")}}.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui est relative à la <strong>largeur</strong> du bloc englobant.</dd>
- <dt><code>auto</code></dt>
- <dd>Voir {{cssxref("margin")}}.</dd>
-</dl>
+- `<length>`
+  - : Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("&lt;length&gt;")}}.
+- `<percentage>`
+  - : Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui est relative à la **largeur** du bloc englobant.
+- `auto`
+  - : Voir {{cssxref("margin")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: blue;
   background-clip: border-box;
   width: 50px;
@@ -64,58 +64,36 @@ margin-top: unset;
   margin-top: 3em;
   background-color: gold;
   background-clip: border-box;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;&lt;/div&gt;
-&lt;p class=exemple&gt;
+```html
+<div></div>
+<p class=exemple>
   C’est ce qui arriva en effet, et bien plus tôt
   qu’elle ne s’y attendait. Elle n’avait pas bu
   la moitié de la bouteille, que sa tête touchait
   au plafond et qu’elle fut forcée de se baisser
-  pour ne pas se casser le cou.&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Aucun changement significatif</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>margin-top</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>L'effet sur les éléments en ligne (<em>inline</em>) est retiré.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.margin-top")}}</p>
+  pour ne pas se casser le cou.</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                             |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------- |
+| {{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}                 | {{Spec2('CSS3 Box')}}             | Aucun changement significatif                            |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}} | {{Spec2('CSS3 Transitions')}} | `margin-top` peut désormais être animée.                 |
+| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}} | {{Spec2('CSS2.1')}}                 | L'effet sur les éléments en ligne (_inline_) est retiré. |
+| {{SpecName('CSS1', '#margin-top', 'margin-top')}}                         | {{Spec2('CSS1')}}                 | Définition initiale.                                     |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.margin-top")}}
diff --git a/files/fr/web/css/margin-trim/index.md b/files/fr/web/css/margin-trim/index.md
index fda619b033..a92f76fff5 100644
--- a/files/fr/web/css/margin-trim/index.md
+++ b/files/fr/web/css/margin-trim/index.md
@@ -9,56 +9,39 @@ tags:
   - Reference
 translation_of: Web/CSS/margin-trim
 ---
-<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{Draft}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>margin-trim</code></strong> permet à un conteneur de rogner les marges de ses éléments enfants qui sont adjacentes aux bords du conteneur.</p>
+La propriété **`margin-trim`** permet à un conteneur de rogner les marges de ses éléments enfants qui sont adjacentes aux bords du conteneur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Les marges ne sont pas rognées par le conteneur.</dd>
- <dt><code>in-flow</code></dt>
- <dd>
- <p>Pour les boîtes du conteneur et qui sont dans le flux, les marges sur l'axe de bloc et qui sont adjacentes aux bords du conteneur sont tronquées.</p>
+- `none`
+  - : Les marges ne sont pas rognées par le conteneur.
+- `in-flow`
 
- <p>Les marges fusionnées avec de telles marges sont également tronquées.</p>
- </dd>
- <dt><code>all</code></dt>
- <dd>Les marges des boîtes qui sont dans le flux et des boîtes flottantes coincidant avec le bord du conteneur sont tronquées.</dd>
-</dl>
+  - : Pour les boîtes du conteneur et qui sont dans le flux, les marges sur l'axe de bloc et qui sont adjacentes aux bords du conteneur sont tronquées.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    Les marges fusionnées avec de telles marges sont également tronquées.
+
+- `all`
+  - : Les marges des boîtes qui sont dans le flux et des boîtes flottantes coincidant avec le bord du conteneur sont tronquées.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box", "#margin-trim", "margin-trim")}}</td>
-   <td>{{Spec2("CSS3 Box")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName("CSS3 Box", "#margin-trim", "margin-trim")}} | {{Spec2("CSS3 Box")}} | Définition initiale. |
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.margin-trim")}}</p>
+{{Compat("css.properties.margin-trim")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{CSSxRef("margin")}}</li>
-</ul>
+- {{CSSxRef("margin")}}
diff --git a/files/fr/web/css/margin/index.md b/files/fr/web/css/margin/index.md
index 16beec5c1d..0838c9d3da 100644
--- a/files/fr/web/css/margin/index.md
+++ b/files/fr/web/css/margin/index.md
@@ -8,23 +8,22 @@ tags:
 translation_of: Web/CSS/margin
 translation_of_original: Web/CSS/margin-new
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>margin</code></strong> définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}.</p>
+La propriété **`margin`** définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}.
 
-<p>Il est possible d'utiliser des valeurs négatives pour chacun des côtés.</p>
+Il est possible d'utiliser des valeurs négatives pour chacun des côtés.
 
-<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin.html")}}
 
-<p>Les marges haute et basse n'ont aucun effet sur les élements en ligne (<em>inline</em>) qui ne sont pas <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">remplacés</a> (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).</p>
+Les marges haute et basse n'ont aucun effet sur les élements en ligne (_inline_) qui ne sont pas [remplacés](/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9) (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).
 
-<div class="note">
-<p><strong>Note :</strong> Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le <em>« remplissage »</em> ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.</p>
-</div>
+> **Note :** Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le _« remplissage »_ ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* La propriété s'applique aux quatre côtés */
+```css
+/* La propriété s'applique aux quatre côtés */
 margin: 1em;
 
 /* vertical | horizontal */
@@ -40,41 +39,38 @@ margin: 2px 1em 0 auto;
 margin: inherit;
 margin: initial;
 margin: unset;
-</pre>
+```
 
-<p>La propriété <code>margin</code> peut être définie grâce à une, deux, trois ou quatre valeurs. Chaque valeur est une valeur de type {{cssxref("&lt;length&gt;")}} ou de type {{cssxref("&lt;percentage&gt;")}} ou est le mot-clé <code><a href="#auto">auto</a></code>. Les valeurs négatives permette de dessiner l'élément plus près de ses voisins que ne l'aurait permis la valeur par défaut.</p>
+La propriété `margin` peut être définie grâce à une, deux, trois ou quatre valeurs. Chaque valeur est une valeur de type {{cssxref("&lt;length&gt;")}} ou de type {{cssxref("&lt;percentage&gt;")}} ou est le mot-clé [`auto`](#auto). Les valeurs négatives permette de dessiner l'élément plus près de ses voisins que ne l'aurait permis la valeur par défaut.
 
-<ul>
- <li>Avec <strong>une</strong> valeur, celle-ci définira la marge pour les quatre côtés de la boîte</li>
- <li>Avec <strong>deux</strong> valeurs, la première s'appliquera aux côtés haut et bas et la seconde aux côtés gauche et droit</li>
- <li>Avec <strong>trois</strong> valeurs, la première s'appliquera au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas</li>
- <li>Avec <strong>quatre</strong> valeurs, la première s'appliquera en haut, la deuxième à droite, la troisième en bas et la quatrième à gauche (ce qui correspond au sens des aiguilles d'une montre - c'est plus facile à mémoriser).</li>
-</ul>
+- Avec **une** valeur, celle-ci définira la marge pour les quatre côtés de la boîte
+- Avec **deux** valeurs, la première s'appliquera aux côtés haut et bas et la seconde aux côtés gauche et droit
+- Avec **trois** valeurs, la première s'appliquera au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas
+- Avec **quatre** valeurs, la première s'appliquera en haut, la deuxième à droite, la troisième en bas et la quatrième à gauche (ce qui correspond au sens des aiguilles d'une montre - c'est plus facile à mémoriser).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :</p>
+Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("&lt;length&gt;")}}.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur relative, exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}, à la <strong>largeur</strong> du bloc englobant. On peut utiliser des valeurs négatives.</dd>
- <dt><code>auto</code></dt>
- <dd><code>auto </code>est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, <code>div { width:50%;  margin:0 auto; }</code> permet de centrer un conteneur <code>div</code> horizontalement).</dd>
-</dl>
+- `<length>`
+  - : La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("&lt;length&gt;")}}.
+- `<percentage>`
+  - : Une valeur relative, exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}, à la **largeur** du bloc englobant. On peut utiliser des valeurs négatives.
+- `auto`
+  - : `auto `est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, `div { width:50%; margin:0 auto; }` permet de centrer un conteneur `div` horizontalement).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css; highlight:[2,7]">.ex1 {
+```css
+.ex1 {
   margin: auto;
   background: gold;
   width: 66%;
@@ -83,28 +79,32 @@ margin: unset;
   margin: 20px 0px 0 -20px;
   background: gold;
   width: 66%;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="ex1"&gt;
+```html
+<div class="ex1">
   margin:     auto;
   background: gold;
   width:      66%;
-&lt;/div&gt;
-&lt;div class="ex2"&gt;
+</div>
+<div class="ex2">
   margin:     20px 0px 0px -20px;
   background: gold;
   width:      66%;
-&lt;/div&gt;</pre>
+</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_simple')}}</p>
+{{EmbedLiveSample('Exemple_simple')}}
 
-<h3 id="Autres_exemples">Autres exemples</h3>
+### Autres exemples
 
-<pre class="brush: css">margin: 5%;                /* tous les côtés avec une marge de 5% */
+```css
+margin: 5%;                /* tous les côtés avec une marge de 5% */
 margin: 10px;              /* tous les côtés avec une marge de 10px */
 
 margin: 1.6em 20px;        /* haut et bas à 1.6em     */
@@ -121,64 +121,37 @@ margin: 1em auto;          /* marge de 1em en haut et en bas       */
 
 margin: auto;              /* boîte centrée horizontalement */
                            /* marge nulle en haut et en bas */
-</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<h3 id="Centrer_horizontalement">Centrer horizontalement</h3>
-
-<p>Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}<code>: flex; </code>{{cssxref("justify-content")}}<code>: center;</code>.</p>
-
-<p>Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser <code>margin: 0 auto </code>pour centrer un élément au sein de son parent.</p>
-
-<h3 id="Fusion_des_marges">Fusion des marges</h3>
-
-<p>Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">l'article sur la fusion des marges</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#margin', 'margin')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Aucun changement significatif.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>margin</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Retrait de l'effet sur les éléments en ligne (<em>inline</em>).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#margin', 'margin')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.margin")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Fusion des marges</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte CSS</a></li>
- <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li>
-</ul>
+```
+
+## Notes
+
+### Centrer horizontalement
+
+Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}`: flex; `{{cssxref("justify-content")}}`: center;`.
+
+Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser `margin: 0 auto `pour centrer un élément au sein de son parent.
+
+### Fusion des marges
+
+Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire [l'article sur la fusion des marges](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
+
+## Spécifications
+
+| Spécification                                                                        | État                                     | Commentaires                                             |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------------------------------------------- |
+| {{SpecName('CSS3 Box', '#margin', 'margin')}}                         | {{Spec2('CSS3 Box')}}             | Aucun changement significatif.                           |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin')}}     | {{Spec2('CSS3 Transitions')}} | `margin` peut désormais être animée.                     |
+| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin')}} | {{Spec2('CSS2.1')}}                 | Retrait de l'effet sur les éléments en ligne (_inline_). |
+| {{SpecName('CSS1', '#margin', 'margin')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                     |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.margin")}}
+
+## Voir aussi
+
+- [Fusion des marges](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
+- [Le modèle de boîte CSS](/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}
diff --git a/files/fr/web/css/mask-border-mode/index.md b/files/fr/web/css/mask-border-mode/index.md
index fbd6852427..d2e436a389 100644
--- a/files/fr/web/css/mask-border-mode/index.md
+++ b/files/fr/web/css/mask-border-mode/index.md
@@ -8,13 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-border-mode
 ---
-<div>{{cssref}}{{SeeCompatTable}}</div>
+{{cssref}}{{SeeCompatTable}}
 
-<p>La propriété CSS <strong><code>mask-border-mode</code></strong> indique le mode de fusion utilisé pour <a href="/fr/docs/Web/CSS/mask-border">le masque de bordure</a>.</p>
+La propriété CSS **`mask-border-mode`** indique le mode de fusion utilisé pour [le masque de bordure](/fr/docs/Web/CSS/mask-border).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 mask-border-mode: luminance;
 mask-border-mode: alpha;
 
@@ -22,42 +23,27 @@ mask-border-mode: alpha;
 mask-border-mode: inherit;
 mask-border-mode: initial;
 mask-border-mode: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>luminance</code></dt>
- <dd>Les valeurs de luminance proventant de l'image de masque sont utilisées pour le masque.</dd>
- <dt><code>alpha</code></dt>
- <dd>Les valeurs du canal alpha proventant de l'image de masque sont utilisées pour le masque.</dd>
-</dl>
+- `luminance`
+  - : Les valeurs de luminance proventant de l'image de masque sont utilisées pour le masque.
+- `alpha`
+  - : Les valeurs du canal alpha proventant de l'image de masque sont utilisées pour le masque.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#propdef-mask-border-mode", "mask-border-mode")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>TBD</p>
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#propdef-mask-border-mode", "mask-border-mode")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+TBD
diff --git a/files/fr/web/css/mask-border-outset/index.md b/files/fr/web/css/mask-border-outset/index.md
index 3174b76051..ad022aabc0 100644
--- a/files/fr/web/css/mask-border-outset/index.md
+++ b/files/fr/web/css/mask-border-outset/index.md
@@ -8,18 +8,19 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-border-outset
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété CSS <strong><code>mask-border-outset</code></strong> indique la distance entre le <a href="/fr/docs/Web/CSS/mask-border">masque de la bordure</a> et la boîte de la bordure.</p>
+La propriété CSS **`mask-border-outset`** indique la distance entre le [masque de la bordure](/fr/docs/Web/CSS/mask-border) et la boîte de la bordure.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeur de longueur */
+/* Type <length> */
 mask-border-outset: 1rem;
 
 /* Valeur numérique */
-/* Type &lt;number&gt; */
+/* Type <number> */
 mask-border-outset: 1.5;
 
 /* Décalage vertical | horizontal */
@@ -35,51 +36,34 @@ mask-border-outset: 7px 12px 14px 5px;
 mask-border-outset: inherit;
 mask-border-outset: initial;
 mask-border-outset: unset;
-</pre>
+```
 
-<p>La propriété <code>mask-border-outset</code> peut être utilisée avec une, deux, trois ou quatre valeurs. Chaque valeur peut être de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;number&gt;")}}. Les valeurs négatives ne sont pas autorisées.</p>
+La propriété `mask-border-outset` peut être utilisée avec une, deux, trois ou quatre valeurs. Chaque valeur peut être de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;number&gt;")}}. Les valeurs négatives ne sont pas autorisées.
 
-<ul>
- <li>Si une seule valeur est utilisée, c'est ce décalage qui est utilisé pour chaque côté.</li>
- <li>Lorsque deux valeurs sont utilisées, la première indique le décalage en haut et en bas et la seconde indique le décalage à gauche et à droite.</li>
- <li>Lorsque trois valeurs sont utilisées, la première indique le décalage avec le côté haut, la deuxième avec le côté gauche et le côté droit et la troisième le décalage avec le côté bas.</li>
- <li>Lorsque quatre valeurs sont indiquées, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans le sens des aiguilles d'une montre).</li>
-</ul>
+- Si une seule valeur est utilisée, c'est ce décalage qui est utilisé pour chaque côté.
+- Lorsque deux valeurs sont utilisées, la première indique le décalage en haut et en bas et la seconde indique le décalage à gauche et à droite.
+- Lorsque trois valeurs sont utilisées, la première indique le décalage avec le côté haut, la deuxième avec le côté gauche et le côté droit et la troisième le décalage avec le côté bas.
+- Lorsque quatre valeurs sont indiquées, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans le sens des aiguilles d'une montre).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>La distance, avec une dimension, pour le décalage du masque.</dd>
- <dt>{{cssxref("&lt;number&gt;")}}</dt>
- <dd>Le décalage du masque, exprimé comme un multiple de {{cssxref("border-width")}}.</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : La distance, avec une dimension, pour le décalage du masque.
+- {{cssxref("&lt;number&gt;")}}
+  - : Le décalage du masque, exprimé comme un multiple de {{cssxref("border-width")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#propdef-mask-border-outset", "mask-border-outset")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Compatiblité_des_navigateurs">Compatiblité des navigateurs</h2>
-
-<p>TBD</p>
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#propdef-mask-border-outset", "mask-border-outset")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatiblité des navigateurs
+
+TBD
diff --git a/files/fr/web/css/mask-border-repeat/index.md b/files/fr/web/css/mask-border-repeat/index.md
index dce62d1c3e..51ddcffa7d 100644
--- a/files/fr/web/css/mask-border-repeat/index.md
+++ b/files/fr/web/css/mask-border-repeat/index.md
@@ -8,13 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-border-repeat
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété CSS <strong><code>mask-border-repeat</code></strong> indique la façon dont les régions du bord du <a href="/fr/docs/Web/CSS/mask-border">masque</a> sont ajustées pour correspondre aux dimensions de la bordure de l'élément.</p>
+La propriété CSS **`mask-border-repeat`** indique la façon dont les régions du bord du [masque](/fr/docs/Web/CSS/mask-border) sont ajustées pour correspondre aux dimensions de la bordure de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 mask-border-repeat: stretch;
 mask-border-repeat: repeat;
 mask-border-repeat: round;
@@ -27,53 +28,36 @@ mask-border-repeat: round stretch;
 mask-border-repeat: inherit;
 mask-border-repeat: initial;
 mask-border-repeat: unset;
-</pre>
+```
 
-<p>La propriété <code>mask-border-repeat</code> peut être utilisée avec une ou deux valeurs parmi celles de la liste ci-après.</p>
+La propriété `mask-border-repeat` peut être utilisée avec une ou deux valeurs parmi celles de la liste ci-après.
 
-<ul>
- <li>Lorsqu'une seule valeur est fournie, le même comportement est utilisé pour les quatre côtés.</li>
- <li>Lorsque deux valeurs sont indiquées, la première valeur s'applique aux côtés haut et bas et la deuxième aux côtés gauche et droit.</li>
-</ul>
+- Lorsqu'une seule valeur est fournie, le même comportement est utilisé pour les quatre côtés.
+- Lorsque deux valeurs sont indiquées, la première valeur s'applique aux côtés haut et bas et la deuxième aux côtés gauche et droit.
 
-<h3 id="Values">Values</h3>
+### Values
 
-<dl>
- <dt><code>stretch</code></dt>
- <dd>Les bords de l'image source sont étirés afin de remplir l'espace entre chaque bordure.</dd>
- <dt><code>repeat</code></dt>
- <dd>Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. Les fragments répétés peuvent être rognés afin que le remplissage soit exact.</dd>
- <dt><code>round</code></dt>
- <dd>Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. Les fragments peuvent être étirés afin que le remplissage soit exact.</dd>
- <dt><code>space</code></dt>
- <dd>Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. L'espace supplémentaire est réparti entre les fragments répétés pour que le remplissage soit exact.</dd>
-</dl>
+- `stretch`
+  - : Les bords de l'image source sont étirés afin de remplir l'espace entre chaque bordure.
+- `repeat`
+  - : Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. Les fragments répétés peuvent être rognés afin que le remplissage soit exact.
+- `round`
+  - : Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. Les fragments peuvent être étirés afin que le remplissage soit exact.
+- `space`
+  - : Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. L'espace supplémentaire est réparti entre les fragments répétés pour que le remplissage soit exact.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#propdef-mask-border-repeat", "mask-border-repeat")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>TBD</p>
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#propdef-mask-border-repeat", "mask-border-repeat")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+TBD
diff --git a/files/fr/web/css/mask-border-slice/index.md b/files/fr/web/css/mask-border-slice/index.md
index c0b1482f6d..9809d2497f 100644
--- a/files/fr/web/css/mask-border-slice/index.md
+++ b/files/fr/web/css/mask-border-slice/index.md
@@ -8,27 +8,26 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-border-slice
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété CSS <strong><code>mask-border-slice</code></strong> permet de découper l'image source, fournie par {{cssxref("mask-border-source")}}, en différentes régions. Ces régions sont utilisées pour former les composants du <a href="/fr/docs/Web/CSS/mask-border">masque de la bordure</a>.</p>
+La propriété CSS **`mask-border-slice`** permet de découper l'image source, fournie par {{cssxref("mask-border-source")}}, en différentes régions. Ces régions sont utilisées pour former les composants du [masque de la bordure](/fr/docs/Web/CSS/mask-border).
 
-<p>Cette découpe permet d'obtenir neuf régions au total : quatre pour les coins, quatre pour les côtés et une région pour le centre. Cette découpe est effectuée selon 4 lignes qui sont écartées d'une certaine distance des bords de l'image.</p>
+Cette découpe permet d'obtenir neuf régions au total : quatre pour les coins, quatre pour les côtés et une région pour le centre. Cette découpe est effectuée selon 4 lignes qui sont écartées d'une certaine distance des bords de l'image.
 
-<p><a href="border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="border-image-slice.png"></a></p>
+[![The nine regions defined by the border-image or border-image-slice properties](border-image-slice.png)](border-image-slice.png)
 
-<p>Le diagramme ci-avant illustre l'emplacement de chaque région.</p>
+Le diagramme ci-avant illustre l'emplacement de chaque région.
 
-<ul>
- <li>Les zones de 1 à 4 sont les zones aux coins. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.</li>
- <li>Les zones 5 à 8 sont les zones de côtés. Ces zones peuvent être <a href="/fr/docs/Web/CSS/mask-border-repeat">répétées, redimensionnées, ou modifiées</a> afin que le masque de bordule final aient les mêmes dimensions que l'élément.</li>
- <li>La zone 9 est la zone centrale. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé <code>fill</code> est utilisé.</li>
-</ul>
+- Les zones de 1 à 4 sont les zones aux coins. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.
+- Les zones 5 à 8 sont les zones de côtés. Ces zones peuvent être [répétées, redimensionnées, ou modifiées](/fr/docs/Web/CSS/mask-border-repeat) afin que le masque de bordule final aient les mêmes dimensions que l'élément.
+- La zone 9 est la zone centrale. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé `fill` est utilisé.
 
-<p>Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et  {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final.</p>
+Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et  {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Une valeur pour tous les côtés */
+```css
+/* Une valeur pour tous les côtés */
 mask-border-slice: 30%;
 
 /* vertical | horizontal */
@@ -47,61 +46,42 @@ mask-border-slice: 10% fill 7 12;
 mask-border-slice: inherit;
 mask-border-slice: initial;
 mask-border-slice: unset;
-</pre>
+```
 
-<p>La propriété <code>mask-border-slice</code> peut être définie avec une, deux, trois ou quatre valeurs <code>&lt;number-percentage&gt;</code> qui représentent la distance entre le trait de coupe et le bord de l'image. Les valeurs négatives sont invalides et les valeurs supérieures à la dimension de l'image sur cet axe sont ramenées à <code>100%</code>.</p>
+La propriété `mask-border-slice` peut être définie avec une, deux, trois ou quatre valeurs `<number-percentage>` qui représentent la distance entre le trait de coupe et le bord de l'image. Les valeurs négatives sont invalides et les valeurs supérieures à la dimension de l'image sur cet axe sont ramenées à `100%`.
 
-<ul>
- <li>Lorsqu'une seule valeur est utilisée, les quatre traits de découpe se situent à la même distance de leurs côtés respectifs.</li>
- <li>Lorsque deux valeurs sont utilisées, la première valeur indique la distance des traits de coupe pour le côté haut et bas et la deuxième indique la distance des traits de coupe pour le côté droit et gauche.</li>
- <li>Lorsque trois positions sont utilisées, la première indique la distance pour le trait de coupe du côté haut, la deuxième indique la distance pour les traits de coupe des côtés droit et gauche et la troisième valeur indique la distance pour le trait de coupe par rapport au côté bas.</li>
- <li>Si 4 valeurs sont employées, elles indiquent respectivement les distances des traits de coupe par rapport aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).</li>
-</ul>
+- Lorsqu'une seule valeur est utilisée, les quatre traits de découpe se situent à la même distance de leurs côtés respectifs.
+- Lorsque deux valeurs sont utilisées, la première valeur indique la distance des traits de coupe pour le côté haut et bas et la deuxième indique la distance des traits de coupe pour le côté droit et gauche.
+- Lorsque trois positions sont utilisées, la première indique la distance pour le trait de coupe du côté haut, la deuxième indique la distance pour les traits de coupe des côtés droit et gauche et la troisième valeur indique la distance pour le trait de coupe par rapport au côté bas.
+- Si 4 valeurs sont employées, elles indiquent respectivement les distances des traits de coupe par rapport aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).
 
-<p>La valeur optionnelle <code>fill</code> peut être utilisée et placée à n'importe quel endroit de la déclaration.</p>
+La valeur optionnelle `fill` peut être utilisée et placée à n'importe quel endroit de la déclaration.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;number&gt;")}}</dt>
- <dd>Une valeur numérique représentant le décalage entre le trait de coupe et le bord de l'image. La valeur est exprimée en nombre de pixels pour les images matricielles (<em>bitmap</em>/<em>raster</em>) et en coordonnées pour les images vectorielles. Pour les images vecorielles, le nombre utilisé est relatif à la taille de l'élément et pas à la taille de l'image source. Dans ce dernier cas, il peut être préférable d'utiliser des valeurs en pourcentage.</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>Le décalage entre le trait de découpe et le bord de l'image, exprimé relativement à la taille de l'image source (pour les traits horizontaux, la distance est proportionnelle à la hauteur et pour les traits verticaux, la distance est proportionnelle à la largeur).</dd>
- <dt><code>fill</code></dt>
- <dd>La zone centrale est conservée ; sa largeur et sa hauteur correspondent aux dimensions utilisées pour les régions haute et gauche.</dd>
-</dl>
+- {{cssxref("&lt;number&gt;")}}
+  - : Une valeur numérique représentant le décalage entre le trait de coupe et le bord de l'image. La valeur est exprimée en nombre de pixels pour les images matricielles (_bitmap_/_raster_) et en coordonnées pour les images vectorielles. Pour les images vecorielles, le nombre utilisé est relatif à la taille de l'élément et pas à la taille de l'image source. Dans ce dernier cas, il peut être préférable d'utiliser des valeurs en pourcentage.
+- {{cssxref("&lt;percentage&gt;")}}
+  - : Le décalage entre le trait de découpe et le bord de l'image, exprimé relativement à la taille de l'image source (pour les traits horizontaux, la distance est proportionnelle à la hauteur et pour les traits verticaux, la distance est proportionnelle à la largeur).
+- `fill`
+  - : La zone centrale est conservée ; sa largeur et sa hauteur correspondent aux dimensions utilisées pour les régions haute et gauche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#propdef-mask-border-slice", "mask-border-slice")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#propdef-mask-border-slice", "mask-border-slice")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>TBD</p>
+TBD
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Shorthand_properties#quelques_cas_aux_limites_%c3%a9pineux">Description illustrée de la syntaxe pouvant couvrir de 1 à 4 valeurs</a></li>
-</ul>
+- [Description illustrée de la syntaxe pouvant couvrir de 1 à 4 valeurs](/fr/docs/Web/CSS/Shorthand_properties#quelques_cas_aux_limites_%c3%a9pineux)
diff --git a/files/fr/web/css/mask-border-source/index.md b/files/fr/web/css/mask-border-source/index.md
index 68cd550c2b..1776e8a34f 100644
--- a/files/fr/web/css/mask-border-source/index.md
+++ b/files/fr/web/css/mask-border-source/index.md
@@ -8,18 +8,19 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-border-source
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété CSS <strong><code>mask-border-source</code></strong> définit l'image à utiliser pour créer <a href="/fr/docs/Web/CSS/mask-border">le masque de bordure</a> d'un élément.</p>
+La propriété CSS **`mask-border-source`** définit l'image à utiliser pour créer [le masque de bordure](/fr/docs/Web/CSS/mask-border) d'un élément.
 
-<p>C'est la propriété {{cssxref("mask-border-slice")}} qui est utilisée afin de découper l'image en tranches/régions ensuite appliquées dynamiquement pour créer le masque final.</p>
+C'est la propriété {{cssxref("mask-border-slice")}} qui est utilisée afin de découper l'image en tranches/régions ensuite appliquées dynamiquement pour créer le masque final.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 mask-border-source: none;
 
-/* Valeurs de type &lt;image&gt; */
+/* Valeurs de type <image> */
 mask-border-source: url(image.jpg);
 mask-border-source: linear-gradient(to top, red, yellow);
 
@@ -27,46 +28,31 @@ mask-border-source: linear-gradient(to top, red, yellow);
 mask-border-source: inherit;
 mask-border-source: initial;
 mask-border-source: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Aucun masque de bordure n'est utilisé.</dd>
- <dt>{{cssxref("&lt;image&gt;")}}</dt>
- <dd>Une référence vers une image qu'on utilise pour le masque de la bordure.</dd>
-</dl>
+- `none`
+  - : Aucun masque de bordure n'est utilisé.
+- {{cssxref("&lt;image&gt;")}}
+  - : Une référence vers une image qu'on utilise pour le masque de la bordure.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voir la page {{cssxref("mask-border")}}.</p>
+Voir la page {{cssxref("mask-border")}}.
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#propdef-mask-border-source", "mask-border-source")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#propdef-mask-border-source", "mask-border-source")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>TBD</p>
+TBD
diff --git a/files/fr/web/css/mask-border-width/index.md b/files/fr/web/css/mask-border-width/index.md
index 9cd78bde87..a6a219a804 100644
--- a/files/fr/web/css/mask-border-width/index.md
+++ b/files/fr/web/css/mask-border-width/index.md
@@ -8,25 +8,26 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-border-width
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété CSS <strong><code>mask-border-width</code></strong> définit la largeur <a href="/fr/docs/Web/CSS/mask-border">du masque de bordure</a> d'un élément.</p>
+La propriété CSS **`mask-border-width`** définit la largeur [du masque de bordure](/fr/docs/Web/CSS/mask-border) d'un élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 mask-border-width: auto;
 
 /* Valeur de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 mask-border-width: 1rem;
 
 /* Valeur proportionnelle */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 mask-border-width: 25%;
 
 /* Valeur numérique */
-/* Type &lt;number&gt; */
+/* Type <number> */
 mask-border-width: 3;
 
 /* vertical | horizontal */
@@ -42,53 +43,36 @@ mask-border-width: 5% 2em 10% auto;
 mask-border-width: inherit;
 mask-border-width: initial;
 mask-border-width: unset;
-</pre>
+```
 
-<p>La propriété <code>mask-border-width</code> peut être définie avec une, deux, trois ou quatre valeurs parmi celles de la liste ci-après.</p>
+La propriété `mask-border-width` peut être définie avec une, deux, trois ou quatre valeurs parmi celles de la liste ci-après.
 
-<ul>
- <li>Lorsqu'une seule valeur est indiquée, elle est utilisée comme largeur pour les quatre côtés.</li>
- <li>Lorsque deux valeurs sont fournies, la première indique la largeur pour les côtés bas et haut et la deuxième la largeur pour les côtés gauche et droite.</li>
- <li>Lorsque trois valeurs sont fournies, la première est appliquée au côté haut, la deuxième au côté gauche et droit et la troisième au côté bas.</li>
- <li>Lorsque quatre valeurs sont fournies, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).</li>
-</ul>
+- Lorsqu'une seule valeur est indiquée, elle est utilisée comme largeur pour les quatre côtés.
+- Lorsque deux valeurs sont fournies, la première indique la largeur pour les côtés bas et haut et la deuxième la largeur pour les côtés gauche et droite.
+- Lorsque trois valeurs sont fournies, la première est appliquée au côté haut, la deuxième au côté gauche et droit et la troisième au côté bas.
+- Lorsque quatre valeurs sont fournies, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>La largeur du masque de bordure, indiquée avec une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}. Les pourcentages sont relatifs à la largeur de la zone de bordure pour les décalages horizontaux et à la hauteur de la zone de bordure pour les décalages verticaux. Cette valeur ne peut pas être négative.</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>La largeur du masque de bordure comme multiple de la largeur {{cssxref("border-width")}}. Cette valeur ne peut pas être négative.</dd>
- <dt><code>auto</code></dt>
- <dd>La largeur du masque de bordure est égale à la largeur ou à la hauteur intrinsèque de la valeur {{cssxref("mask-border-slice")}} correspondante. Si l'image ne possède pas de dimension intrinsèque, c'est la valeur <code>border-width</code> qui est utilisée à la place.</dd>
-</dl>
+- `<length-percentage>`
+  - : La largeur du masque de bordure, indiquée avec une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}. Les pourcentages sont relatifs à la largeur de la zone de bordure pour les décalages horizontaux et à la hauteur de la zone de bordure pour les décalages verticaux. Cette valeur ne peut pas être négative.
+- `<number>`
+  - : La largeur du masque de bordure comme multiple de la largeur {{cssxref("border-width")}}. Cette valeur ne peut pas être négative.
+- `auto`
+  - : La largeur du masque de bordure est égale à la largeur ou à la hauteur intrinsèque de la valeur {{cssxref("mask-border-slice")}} correspondante. Si l'image ne possède pas de dimension intrinsèque, c'est la valeur `border-width` qui est utilisée à la place.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition intiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>TBD</p>
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires        |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}} | {{Spec2("CSS Masks")}} | Définition intiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+TBD
diff --git a/files/fr/web/css/mask-border/index.md b/files/fr/web/css/mask-border/index.md
index f2faaaf334..6b765250be 100644
--- a/files/fr/web/css/mask-border/index.md
+++ b/files/fr/web/css/mask-border/index.md
@@ -4,15 +4,16 @@ slug: Web/CSS/mask-border
 translation_of: Web/CSS/mask-border
 browser-compat: css.properties.mask-border
 ---
-<div>{{cssref}}{{SeeCompatTable}}</div>
+{{cssref}}{{SeeCompatTable}}
 
-<p>La propriété CSS <strong><code>mask-border</code></strong> permet de créer un masque le long de la bordure d'un élément.</p>
+La propriété CSS **`mask-border`** permet de créer un masque le long de la bordure d'un élément.
 
-<p>Cette propriété est une propriété <a href="/fr/docs/Web/CSS/Shorthand_properties">raccourcie</a> pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur <a href="/fr/docs/Web/CSS/initial_value">valeur initiale</a>.</p>
+Cette propriété est une propriété [raccourcie](/fr/docs/Web/CSS/Shorthand_properties) pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur [valeur initiale](/fr/docs/Web/CSS/initial_value).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* source | slice */
+```css
+/* source | slice */
 mask-border: url('border-mask.png') 25;
 
 /* source | slice | repeat */
@@ -23,49 +24,50 @@ mask-border: url('border-mask.png') 25 / 35px;
 
 /* source | slice | width | outset | repeat | mode */
 mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;'mask-border-source'&gt;</code></dt>
- <dd>L'image source, pour plus d'informations, voir {{cssxref("mask-border-source")}}.</dd>
- <dt><code>&lt;'mask-border-slice'&gt;</code></dt>
- <dd>Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-slice")}}.</dd>
- <dt><code>&lt;'mask-border-width'&gt;</code></dt>
- <dd>La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-width")}}.</dd>
- <dt><code>&lt;'mask-border-outset'&gt;</code></dt>
- <dd>La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-outset")}}.</dd>
- <dt><code>&lt;'mask-border-repeat'&gt;</code></dt>
- <dd>Cette valeur indiique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir {{cssxref("mask-border-repeat")}}.</dd>
- <dt><code>&lt;'mask-border-mode'&gt;</code></dt>
- <dd>Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir {{cssxref("mask-border-mode")}}.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<'mask-border-source'>`
+  - : L'image source, pour plus d'informations, voir {{cssxref("mask-border-source")}}.
+- `<'mask-border-slice'>`
+  - : Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-slice")}}.
+- `<'mask-border-width'>`
+  - : La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-width")}}.
+- `<'mask-border-outset'>`
+  - : La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-outset")}}.
+- `<'mask-border-repeat'>`
+  - : Cette valeur indiique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir {{cssxref("mask-border-repeat")}}.
+- `<'mask-border-mode'>`
+  - : Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir {{cssxref("mask-border-mode")}}.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Image_matricielle_(bitmap)">Image matricielle (<em>bitmap</em>)</h3>
+### Image matricielle (_bitmap_)
 
-<p>Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :</p>
+Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :
 
-<p><img alt="" src="mask-border-diamonds.png"></p>
+![](mask-border-diamonds.png)
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div id="bitmap"&gt;
+```html
+<div id="bitmap">
   Cet élément est entouré d'un masque de bordure
   matriciel. C'est pas mal.
-&lt;/div&gt;</pre>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<p>Pour avoir un seul losange, on divise le carré en 3 (avec la valeur <code>30</code>). On utilise la valeur <code>round</code> pour que le masque soit réparti également de part et d'autre.</p>
+Pour avoir un seul losange, on divise le carré en 3 (avec la valeur `30`). On utilise la valeur `round` pour que le masque soit réparti également de part et d'autre.
 
-<pre class="brush: css">div {
+```css
+div {
   width: 200px;
   background-color: lavender;
   border: 18px solid salmon;
@@ -77,16 +79,16 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
     36px 18px    /* width */
     round;       /* repeat */
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Image_matricielle_(bitmap)")}}</p>
+{{EmbedLiveSample("Image_matricielle_(bitmap)")}}
 
-<h2 id="spécifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
\ No newline at end of file
+{{Compat}}
diff --git a/files/fr/web/css/mask-clip/index.md b/files/fr/web/css/mask-clip/index.md
index 9dad26fc80..fd5257c0ad 100644
--- a/files/fr/web/css/mask-clip/index.md
+++ b/files/fr/web/css/mask-clip/index.md
@@ -8,15 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-clip
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>mask-clip</code></strong> définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.</p>
+La propriété **`mask-clip`** définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;geometry-box&gt; */
+```css
+/* Valeurs de type <geometry-box> */
 mask-clip: content-box;
 mask-clip: padding-box;
 mask-clip: border-box;
@@ -42,42 +43,41 @@ mask-clip: view-box, fill-box, border-box;
 mask-clip: inherit;
 mask-clip: initial;
 mask-clip: unset;
-</pre>
-
-<h2 id="Syntaxe_2">Syntaxe</h2>
-
-<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>content-box</code></dt>
- <dd>La partie qui est « peinte » est rognée sur la boîte de contenu.</dd>
- <dt><code>padding-box</code></dt>
- <dd>La partie qui est « peinte » est rognée sur la boîte de <em>padding</em>.</dd>
- <dt><code>border-box</code></dt>
- <dd>La partie qui est « peinte » est rognée sur la boîte de bordure.</dd>
- <dt><code>margin-box</code></dt>
- <dd>La partie qui est « peinte » est rognée sur la boîte de marge.</dd>
- <dt><code>fill-box</code></dt>
- <dd>La partie qui est « peinte » est rognée sur la boîte contenant l'objet.</dd>
- <dt><code>stroke-box</code></dt>
- <dd>La partie qui est « peinte » est rognée sur la boîte contenant le contour.</dd>
- <dt><code>view-box</code></dt>
- <dd>C'est le <em>viewport</em> du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/viewBox">viewBox</a></code> est défini pour l'élément qui crée le <em>viewport</em>, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut <code>viewBox</code> et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut <code>viewBox</code>.</dd>
- <dt><code>no-clip</code></dt>
- <dd>La partie qui est « peinte » n'est pas rognée.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Syntaxe
+
+Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.
+
+### Valeurs
+
+- `content-box`
+  - : La partie qui est « peinte » est rognée sur la boîte de contenu.
+- `padding-box`
+  - : La partie qui est « peinte » est rognée sur la boîte de _padding_.
+- `border-box`
+  - : La partie qui est « peinte » est rognée sur la boîte de bordure.
+- `margin-box`
+  - : La partie qui est « peinte » est rognée sur la boîte de marge.
+- `fill-box`
+  - : La partie qui est « peinte » est rognée sur la boîte contenant l'objet.
+- `stroke-box`
+  - : La partie qui est « peinte » est rognée sur la boîte contenant le contour.
+- `view-box`
+  - : C'est le _viewport_ du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée le _viewport_, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut `viewBox`.
+- `no-clip`
+  - : La partie qui est « peinte » n'est pas rognée.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#masked {
+```css
+#masked {
   width: 100px;
   height: 100px;
   background-color: #8cffa0;
@@ -91,38 +91,26 @@ mask-clip: unset;
   -webkit-mask-clip: border;
   mask-clip: border-box;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
-</pre>
+```html
+<div id="masked"></div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "220px", "250px")}}</p>
+{{EmbedLiveSample("Exemples", "220px", "250px")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                         | Commentaires        |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}} | {{Spec2("CSS Masks")}} | Définition initiale |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.mask-clip")}}</p>
+{{Compat("css.properties.mask-clip")}}
diff --git a/files/fr/web/css/mask-composite/index.md b/files/fr/web/css/mask-composite/index.md
index 33b5bc3f26..1843872679 100644
--- a/files/fr/web/css/mask-composite/index.md
+++ b/files/fr/web/css/mask-composite/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-composite
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>mask-composite</code></strong> permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.</p>
+La propriété **`mask-composite`** permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé*/
+```css
+/* Valeurs avec un mot-clé*/
 mask-composite: add;
 mask-composite: subtract;
 mask-composite: intersect;
@@ -22,36 +23,35 @@ mask-composite: exclude;
 mask-composite: inherit;
 mask-composite: initial;
 mask-composite: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
+Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La couche du masque de l'élément est appelée <em>source</em> et les couches inférieures sont appelées <em>destination</em>.</p>
+La couche du masque de l'élément est appelée _source_ et les couches inférieures sont appelées _destination_.
 
-<dl>
- <dt><code>add</code></dt>
- <dd>La source est placée sur la destination.</dd>
- <dt><code>subtract</code></dt>
- <dd>La source est placée lorsque la destination est vide à cet endroit.</dd>
- <dt><code>intersect</code></dt>
- <dd>Les endroits de la source qui chevauchent la destination prennent le pas sur la destination.</dd>
- <dt><code>exclude</code></dt>
- <dd>Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.The non-overlapping regions of source and destination are combined.</dd>
-</dl>
+- `add`
+  - : La source est placée sur la destination.
+- `subtract`
+  - : La source est placée lorsque la destination est vide à cet endroit.
+- `intersect`
+  - : Les endroits de la source qui chevauchent la destination prennent le pas sur la destination.
+- `exclude`
+  - : Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.The non-overlapping regions of source and destination are combined.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#masked {
+```css
+#masked {
   width: 100px;
   height: 100px;
   background-color: #8cffa0;
@@ -63,47 +63,36 @@ mask-composite: unset;
   -webkit-mask-composite: add;
   mask-composite: add; /* peut-être modifiée dans la démo */
 }
-</pre>
-
-<pre class="brush: html hidden">&lt;div id="masked"&gt;
-&lt;/div&gt;
-&lt;select id="compositeMode"&gt;
-  &lt;option value="add"&gt;add&lt;/option&gt;
-  &lt;option value="subtract"&gt;subtract&lt;/option&gt;
-  &lt;option value="intersect"&gt;intersect&lt;/option&gt;
-  &lt;option value="exclude"&gt;exclude&lt;/option&gt;
-&lt;/select&gt;
-</pre>
-
-<pre class="brush: js hidden">var clipBox = document.getElementById("compositeMode");
+```
+
+```html hidden
+<div id="masked">
+</div>
+<select id="compositeMode">
+  <option value="add">add</option>
+  <option value="subtract">subtract</option>
+  <option value="intersect">intersect</option>
+  <option value="exclude">exclude</option>
+</select>
+```
+
+```js hidden
+var clipBox = document.getElementById("compositeMode");
 clipBox.addEventListener("change", function (evt) {
   document.getElementById("masked").style.maskClip = evt.target.value;
 });
-</pre>
-
-<p>{{EmbedLiveSample("Exemples", "200px", "200px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-mask-composite", "mask-composite")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.mask-composite")}}</p>
+```
+
+{{EmbedLiveSample("Exemples", "200px", "200px")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires        |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("CSS Masks", "#the-mask-composite", "mask-composite")}} | {{Spec2("CSS Masks")}} | Définition initiale |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.mask-composite")}}
diff --git a/files/fr/web/css/mask-image/index.md b/files/fr/web/css/mask-image/index.md
index fcd14e7d53..701f385f6b 100644
--- a/files/fr/web/css/mask-image/index.md
+++ b/files/fr/web/css/mask-image/index.md
@@ -8,19 +8,20 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-image
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>mask-image</code></strong> définit l'image qui sera utilisée comme masque pour un élément.</p>
+La propriété CSS **`mask-image`** définit l'image qui sera utilisée comme masque pour un élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 mask-image: none;
 
-/* Valeur de type &lt;mask-source&gt; */
+/* Valeur de type <mask-source> */
 mask-image: url(masks.svg#mask1);
 
-/* Valeurs de type &lt;image&gt; */
+/* Valeurs de type <image> */
 mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
 mask-image: image(url(mask.png), skyblue);
 
@@ -31,64 +32,51 @@ mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), tr
 mask-image: inherit;
 mask-image: initial;
 mask-image: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Le masque défini par ce mot-clé sera une image noire transparente.</dd>
- <dt><code>&lt;mask-source&gt;</code></dt>
- <dd>Une référence {{cssxref("&lt;url&gt;")}} vers un masque ({{SVGElement("mask")}}) ou une image CSS.</dd>
- <dt>{{cssxref("&lt;image&gt;")}}</dt>
- <dd>Une image utilisée pour le masque.</dd>
-</dl>
+- `none`
+  - : Le masque défini par ce mot-clé sera une image noire transparente.
+- `<mask-source>`
+  - : Une référence {{cssxref("&lt;url&gt;")}} vers un masque ({{SVGElement("mask")}}) ou une image CSS.
+- {{cssxref("&lt;image&gt;")}}
+  - : Une image utilisée pour le masque.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css;">#masked {
+```css
+#masked {
   width: 100px;
   height: 100px;
   background-color: #8cffa0;
   -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
   mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
-</pre>
+```html
+<div id="masked"></div>
+```
 
-<p>{{EmbedLiveSample("Exemples", "100px", "100px",'', '', 'hide-codepen-jsfiddle') }}</p>
+{{EmbedLiveSample("Exemples", "100px", "100px",'', '', 'hide-codepen-jsfiddle') }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-mask-image", "mask-image")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#the-mask-image", "mask-image")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.mask-image")}}</p>
+{{Compat("css.properties.mask-image")}}
diff --git a/files/fr/web/css/mask-mode/index.md b/files/fr/web/css/mask-mode/index.md
index f189643576..a6d59e866f 100644
--- a/files/fr/web/css/mask-mode/index.md
+++ b/files/fr/web/css/mask-mode/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-mode
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>mask-mode</code></strong> détermine si le masque défini par {{cssxref("mask-image")}} est considéré comme un masque de luminance ou un masque alpha (transparence).</p>
+La propriété **`mask-mode`** détermine si le masque défini par {{cssxref("mask-image")}} est considéré comme un masque de luminance ou un masque alpha (transparence).
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 mask-mode: alpha;
 mask-mode: luminance;
 mask-mode: match-source;
@@ -24,38 +25,36 @@ mask-mode: alpha, match-source;
 mask-mode: inherit;
 mask-mode: initial;
 mask-mode: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>mask-mode</code> est définie avec un ou plusieurs mots-clés parmi ceux de la liste suivante, séparés par des virgules.</p>
+La propriété `mask-mode` est définie avec un ou plusieurs mots-clés parmi ceux de la liste suivante, séparés par des virgules.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>alpha</code></dt>
- <dd>Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal de transparence) qui sont utilisées comme valeurs de masque.</dd>
- <dt><code>luminance</code></dt>
- <dd>Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque.</dd>
- <dt><code>match-source</code></dt>
- <dd>
- <p>Si la propriété {{cssxref("mask-image")}} est de type <code>&lt;mask-source&gt;</code>, les valeurs de luminance de l'image doivent être utilisée comme valeurs pour le masque.</p>
+- `alpha`
+  - : Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal de transparence) qui sont utilisées comme valeurs de masque.
+- `luminance`
+  - : Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque.
+- `match-source`
 
- <p>Si elle est de type {{cssxref("&lt;image&gt;")}}, ce seront les valeurs de transparence (canal alpha) qui seront utilisées.</p>
- </dd>
-</dl>
+  - : Si la propriété {{cssxref("mask-image")}} est de type `<mask-source>`, les valeurs de luminance de l'image doivent être utilisée comme valeurs pour le masque.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    Si elle est de type {{cssxref("&lt;image&gt;")}}, ce seront les valeurs de transparence (canal alpha) qui seront utilisées.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Alpha">Alpha</h3>
+### Alpha
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#masked {
+```css
+#masked {
   width: 100px;
   height: 100px;
   background: blue linear-gradient(red, blue);
@@ -66,22 +65,24 @@ mask-mode: unset;
   -webkit-mask-mode: alpha;
   mask-mode: alpha;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
-</pre>
+```html
+<div id="masked"></div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Alpha", "110px", "130px")}}</p>
+{{EmbedLiveSample("Alpha", "110px", "130px")}}
 
-<h3 id="Luminance">Luminance</h3>
+### Luminance
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#masked {
+```css
+#masked {
   width: 100px;
   height: 100px;
   background-color: #8cffa0;
@@ -92,38 +93,26 @@ mask-mode: unset;
   -webkit-mask-mode: luminance;
   mask-mode: luminance;
 }
-</pre>
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
-</pre>
+```html
+<div id="masked"></div>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Luminance", "110px", "130px")}}</p>
+{{EmbedLiveSample("Luminance", "110px", "130px")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.mask-mode")}}</p>
+{{Compat("css.properties.mask-mode")}}
diff --git a/files/fr/web/css/mask-origin/index.md b/files/fr/web/css/mask-origin/index.md
index 85bf81428e..20424606ee 100644
--- a/files/fr/web/css/mask-origin/index.md
+++ b/files/fr/web/css/mask-origin/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-origin
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>mask-origin</code></strong> permet de définir l'origine à partir de laquelle placer le masque.</p>
+La propriété **`mask-origin`** permet de définir l'origine à partir de laquelle placer le masque.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 mask-origin: content-box;
 mask-origin: padding-box;
 mask-origin: border-box;
@@ -34,48 +35,47 @@ mask-origin: view-box, fill-box, border-box;
 mask-origin: inherit;
 mask-origin: initial;
 mask-origin: unset;
-</pre>
-
-<p>Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via {{cssxref("mask-image")}}. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes <em>inline</em> ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles {{cssxref("box-decoration-break")}} agira pour déterminer la zone de positionnement du masque.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>content-box</code></dt>
- <dd>La position de la zone est relative à la boîte de contenu.</dd>
- <dt><code>padding-box</code></dt>
- <dd>La position de la zone est relative à la boîte de remplissage (<em>padding</em>). Pour les boîtes simples, <code>0 0</code> désigne le coin en haut à gauche de la bordure de cette boîte et <code>100% 100%</code> le coin en bas à droite.</dd>
- <dt><code>border-box</code></dt>
- <dd>La position de la zone est relative à la boîte de bordure.</dd>
- <dt><code>margin-box</code></dt>
- <dd>La position de la zone est relative à la boîte de marge.</dd>
- <dt><code>fill-box</code></dt>
- <dd>La position de la zone est relative à la boîte liée à l'objet (<em><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox">bounding box</a></em>).</dd>
- <dt><code>stroke-box</code></dt>
- <dd>La position de la zone est relative à la boîte de contour de l'objet (<em><a href="https://www.w3.org/TR/css-masking/#stroke-bounding-box">stroke bounding box</a></em>).</dd>
- <dt><code>view-box</code></dt>
- <dd>La zone d'affichage (<em>viewport</em>) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut {{svgattr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par <code>viewBox</code>. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de <code>viewBox</code>.</dd>
- <dt><code>content</code>{{non-standard_inline}}</dt>
- <dd>Synonyme de <code>content-box</code>.</dd>
- <dt><code>padding</code>{{non-standard_inline}}</dt>
- <dd>Synonyme de <code>padding-box</code>.</dd>
- <dt><code>border</code>{{non-standard_inline}}</dt>
- <dd>Synonyme de <code>border-box</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via {{cssxref("mask-image")}}. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes _inline_ ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles {{cssxref("box-decoration-break")}} agira pour déterminer la zone de positionnement du masque.
+
+## Syntaxe
+
+Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.
+
+### Valeurs
+
+- `content-box`
+  - : La position de la zone est relative à la boîte de contenu.
+- `padding-box`
+  - : La position de la zone est relative à la boîte de remplissage (_padding_). Pour les boîtes simples, `0 0` désigne le coin en haut à gauche de la bordure de cette boîte et `100% 100%` le coin en bas à droite.
+- `border-box`
+  - : La position de la zone est relative à la boîte de bordure.
+- `margin-box`
+  - : La position de la zone est relative à la boîte de marge.
+- `fill-box`
+  - : La position de la zone est relative à la boîte liée à l'objet (_[bounding box](https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox)_).
+- `stroke-box`
+  - : La position de la zone est relative à la boîte de contour de l'objet (_[stroke bounding box](https://www.w3.org/TR/css-masking/#stroke-bounding-box)_).
+- `view-box`
+  - : La zone d'affichage (_viewport_) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut {{svgattr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par `viewBox`. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de `viewBox`.
+- `content`{{non-standard_inline}}
+  - : Synonyme de `content-box`.
+- `padding`{{non-standard_inline}}
+  - : Synonyme de `padding-box`.
+- `border`{{non-standard_inline}}
+  - : Synonyme de `border-box`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#masked {
+```css
+#masked {
   width: 100px;
   height: 100px;
   margin: 10px;
@@ -87,56 +87,45 @@ mask-origin: unset;
   -webkit-mask-origin: border-box; /* À modifier dans le résultat. */
   mask-origin: border-box; /* À modifier dans le résultat. */
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="masked"&gt;
-&lt;/div&gt;
-&lt;select id="origin"&gt;
-  &lt;option value="content-box"&gt;content-box&lt;/option&gt;
-  &lt;option value="padding-box"&gt;padding-box&lt;/option&gt;
-  &lt;option value="border-box" selected&gt;border-box&lt;/option&gt;
-  &lt;option value="margin-box"&gt;margin-box&lt;/option&gt;
-  &lt;option value="fill-box"&gt;fill-box&lt;/option&gt;
-  &lt;option value="stroke-box"&gt;stroke-box&lt;/option&gt;
-  &lt;option value="view-box"&gt;view-box&lt;/option&gt;
-&lt;/select&gt;
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">var origin = document.getElementById("origin");
+```
+
+### HTML
+
+```html
+<div id="masked">
+</div>
+<select id="origin">
+  <option value="content-box">content-box</option>
+  <option value="padding-box">padding-box</option>
+  <option value="border-box" selected>border-box</option>
+  <option value="margin-box">margin-box</option>
+  <option value="fill-box">fill-box</option>
+  <option value="stroke-box">stroke-box</option>
+  <option value="view-box">view-box</option>
+</select>
+```
+
+### JavaScript
+
+```js
+var origin = document.getElementById("origin");
 origin.addEventListener("change", function (evt) {
   document.getElementById("masked").style.maskOrigin = evt.target.value;
 });
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 160, 200)}}</p>
+{{EmbedLiveSample("Exemples", 160, 200)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.mask-origin")}}</p>
+{{Compat("css.properties.mask-origin")}}
diff --git a/files/fr/web/css/mask-position/index.md b/files/fr/web/css/mask-position/index.md
index 43d8db0a4a..e249dbfe7b 100644
--- a/files/fr/web/css/mask-position/index.md
+++ b/files/fr/web/css/mask-position/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-position
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>mask-position</code></strong> indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété {{cssxref("mask-origin")}}.</p>
+La propriété **`mask-position`** indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété {{cssxref("mask-origin")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 mask-position: top;
 mask-position: bottom;
 mask-position: left;
@@ -20,11 +21,11 @@ mask-position: right;
 mask-position: center;
 
 /*  Valeurs en pourcentage */
-/* Type &lt;percentage&gt;       */
+/* Type <percentage>       */
 mask-position: 25% 75%;
 
 /* Valeurs en longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 mask-position: 0px 0px;
 mask-position: 1cm 2cm;
 mask-position: 10ch 8em;
@@ -36,26 +37,25 @@ mask-position: 0px 0px, center;
 mask-position: inherit;
 mask-position: initial;
 mask-position: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Une position CSS (type {{cssxref("&lt;position&gt;")}}) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.</dd>
-</dl>
+- `<position>`
+  - : Une position CSS (type {{cssxref("&lt;position&gt;")}}) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#wrapper {
+```css
+#wrapper {
   border: 1px solid black;
   width: 250px;
   height: 250px;
@@ -70,55 +70,44 @@ mask-position: unset;
   mask-position: top right; /* Can be changed in the live sample */
   margin-bottom: 10px;
 }
-</pre>
-
-<pre class="brush: html hidden">&lt;div id="wrapper"&gt;
-  &lt;div id="masked"&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;select id="maskPosition"&gt;
-  &lt;option value="top"&gt;top&lt;/option&gt;
-  &lt;option value="center"&gt;center&lt;/option&gt;
-  &lt;option value="bottom"&gt;bottom&lt;/option&gt;
-  &lt;option value="top right" selected&gt;top right&lt;/option&gt;
-  &lt;option value="center center"&gt;center center&lt;/option&gt;
-  &lt;option value="bottom left"&gt;bottom left&lt;/option&gt;
-  &lt;option value="10px 20px"&gt;10px 20px&lt;/option&gt;
-  &lt;option value="60% 20%"&gt;60% 20%&lt;/option&gt;
-&lt;/select&gt;
-</pre>
-
-<pre class="brush: js hidden">var maskPosition = document.getElementById("maskPosition");
+```
+
+```html hidden
+<div id="wrapper">
+  <div id="masked">
+  </div>
+</div>
+<select id="maskPosition">
+  <option value="top">top</option>
+  <option value="center">center</option>
+  <option value="bottom">bottom</option>
+  <option value="top right" selected>top right</option>
+  <option value="center center">center center</option>
+  <option value="bottom left">bottom left</option>
+  <option value="10px 20px">10px 20px</option>
+  <option value="60% 20%">60% 20%</option>
+</select>
+```
+
+```js hidden
+var maskPosition = document.getElementById("maskPosition");
 maskPosition.addEventListener("change", function (evt) {
   document.getElementById("masked").style.maskPosition = evt.target.value;
 });
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples",200,200)}}</p>
+{{EmbedLiveSample("Exemples",200,200)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-mask-position", "mask-position")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#the-mask-position", "mask-position")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.mask-position")}}</p>
+{{Compat("css.properties.mask-position")}}
diff --git a/files/fr/web/css/mask-repeat/index.md b/files/fr/web/css/mask-repeat/index.md
index 76dd23f6a1..ce97284400 100644
--- a/files/fr/web/css/mask-repeat/index.md
+++ b/files/fr/web/css/mask-repeat/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-repeat
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>mask-repeat</code></strong> définit la façon dont les images de masque sont répétées. Une image de masque peut être répétée horizontalement, verticalement, dans les deux directions ou pas du tout.</p>
+La propriété **`mask-repeat`** définit la façon dont les images de masque sont répétées. Une image de masque peut être répétée horizontalement, verticalement, dans les deux directions ou pas du tout.
 
-<pre class="brush:css no-line-numbers">/* Syntaxe avec une valeur */
+```css
+/* Syntaxe avec une valeur */
 mask-repeat: repeat-x;
 mask-repeat: repeat-y;
 mask-repeat: repeat;
@@ -32,84 +33,105 @@ mask-repeat: no-repeat round;
 mask-repeat: inherit;
 mask-repeat: initial;
 mask-repeat: unset;
-</pre>
-
-<p>Par défaut, les images répétées sont rognées aux limites de l'élément mais on peut également les adapter pour qu'elles soient également réparties sur l'élément : en les redimensionnant si nécessaire (<code>round</code>) ou en les espaçant (<code>space</code>).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Une ou plusieurs valeurs <code>&lt;repeat-style&gt;</code>, séparées par des virgules.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;repeat-style&gt;</code></dt>
- <dd>La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><strong>Valeur unique</strong></td>
-    <td><strong>Équivalent sur deux valeurs</strong></td>
-   </tr>
-   <tr>
-    <td><code>repeat-x</code></td>
-    <td><code>repeat no-repeat</code></td>
-   </tr>
-   <tr>
-    <td><code>repeat-y</code></td>
-    <td><code>no-repeat repeat</code></td>
-   </tr>
-   <tr>
-    <td><code>repeat</code></td>
-    <td><code>repeat repeat</code></td>
-   </tr>
-   <tr>
-    <td><code>space</code></td>
-    <td><code>space space</code></td>
-   </tr>
-   <tr>
-    <td><code>round</code></td>
-    <td><code>round round</code></td>
-   </tr>
-   <tr>
-    <td><code>no-repeat</code></td>
-    <td><code>no-repeat no-repeat</code></td>
-   </tr>
-  </tbody>
- </table>
- Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>repeat</code></td>
-    <td>L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée au masque. La dernière image sera rognée si nécessaire.</td>
-   </tr>
-   <tr>
-    <td><code>space</code></td>
-    <td>L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété {{cssxref("mask-position")}} est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où <code>space</code> est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.</td>
-   </tr>
-   <tr>
-    <td><code>round</code></td>
-    <td>L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant.</td>
-   </tr>
-   <tr>
-    <td><code>no-repeat</code></td>
-    <td>Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété {{cssxref("mask-position")}}.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Par défaut, les images répétées sont rognées aux limites de l'élément mais on peut également les adapter pour qu'elles soient également réparties sur l'élément : en les redimensionnant si nécessaire (`round`) ou en les espaçant (`space`).
+
+## Syntaxe
+
+Une ou plusieurs valeurs `<repeat-style>`, séparées par des virgules.
+
+### Valeurs
+
+- `<repeat-style>`
+
+  - : La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><strong>Valeur unique</strong></td>
+          <td><strong>Équivalent sur deux valeurs</strong></td>
+        </tr>
+        <tr>
+          <td><code>repeat-x</code></td>
+          <td><code>repeat no-repeat</code></td>
+        </tr>
+        <tr>
+          <td><code>repeat-y</code></td>
+          <td><code>no-repeat repeat</code></td>
+        </tr>
+        <tr>
+          <td><code>repeat</code></td>
+          <td><code>repeat repeat</code></td>
+        </tr>
+        <tr>
+          <td><code>space</code></td>
+          <td><code>space space</code></td>
+        </tr>
+        <tr>
+          <td><code>round</code></td>
+          <td><code>round round</code></td>
+        </tr>
+        <tr>
+          <td><code>no-repeat</code></td>
+          <td><code>no-repeat no-repeat</code></td>
+        </tr>
+      </tbody>
+    </table>
+
+    Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>repeat</code></td>
+          <td>
+            L'image est répétée autant de fois que nécessaire pour recouvrir la zone
+            dédiée au masque. La dernière image sera rognée si nécessaire.
+          </td>
+        </tr>
+        <tr>
+          <td><code>space</code></td>
+          <td>
+            L'image est répétée autant que possible sans rognage. La première et la
+            dernière image sont accolées aux bords de l'élément et des espaces sont
+            repartis de façon égale entre les images. La propriété
+            {{cssxref("mask-position")}} est ignorée sauf s'il n'y a qu'une
+            seule image qui puisse être affichée sans être rognée. Le seul cas où
+            <code>space</code> est utilisé et qu'une image est rognée se produit
+            lorsque l'image est trop grande pour être affichée.
+          </td>
+        </tr>
+        <tr>
+          <td><code>round</code></td>
+          <td>
+            L'image est répétée autant que possible et est étirée si nécessaire afin
+            qu'il n'y ait ni rognage ni espace restant.
+          </td>
+        </tr>
+        <tr>
+          <td><code>no-repeat</code></td>
+          <td>
+            Il n'y a aucune répétition de l'image (dès lors, il est possible que
+            toute la zone ne soit pas recouverte par cette image). La position de
+            l'image est définie grâce à la propriété
+            {{cssxref("mask-position")}}.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   height: 100px;
   width: 100px;
   background-color: rgb(128,128,128);
@@ -125,37 +147,27 @@ mask-repeat: unset;
   -webkit-mask-repeat: repeat-x;
   mask-repeat: repeat-x;
 
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;&lt;/div&gt;</pre>
+```html
+<div class="exemple"></div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+{{EmbedLiveSample("Exemples","200","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-mask-repeat", "mask-repeat")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#the-mask-repeat", "mask-repeat")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.mask-repeat")}}</p>
+{{Compat("css.properties.mask-repeat")}}
diff --git a/files/fr/web/css/mask-size/index.md b/files/fr/web/css/mask-size/index.md
index bad865b3cb..f96a19398b 100644
--- a/files/fr/web/css/mask-size/index.md
+++ b/files/fr/web/css/mask-size/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/mask-size
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>mask-size</code></strong> définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques.</p>
+La propriété **`mask-size`** définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques.
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 mask-size: cover;
 mask-size: contain;
 
@@ -43,70 +44,61 @@ mask-size: 6px, auto, contain;
 mask-size: inherit;
 mask-size: initial;
 mask-size: unset;
-</pre>
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après <code>mask-size</code>, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.</p>
-</div>
+> **Note :** Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après `mask-size`, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une ou plusieurs valeurs <code>&lt;bg-size&gt;</code>, séparées par des virgules. Une valeur <code>&lt;bg-size&gt;</code> peut être définie de trois façons :</p>
+Une ou plusieurs valeurs `<bg-size>`, séparées par des virgules. Une valeur `<bg-size>` peut être définie de trois façons :
 
-<ul>
- <li>avec le mot-clé <code><a href="#contain">contain</a></code></li>
- <li>avec le mot-clé <code><a href="#cover">cover</a></code></li>
- <li>avec des valeurs pour la hauteur et la largeur.</li>
-</ul>
+- avec le mot-clé [`contain`](#contain)
+- avec le mot-clé [`cover`](#cover)
+- avec des valeurs pour la hauteur et la largeur.
 
-<p>Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs :</p>
+Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs :
 
-<ul>
- <li>Si une seule valeur est fournie, elle servira à définir la largeur, la hauteur vaudra alors <code>auto</code></li>
- <li>Si deux valeurs sont fournies, la première définira la largeur et la seonde définira la hauteur.</li>
-</ul>
+- Si une seule valeur est fournie, elle servira à définir la largeur, la hauteur vaudra alors `auto`
+- Si deux valeurs sont fournies, la première définira la largeur et la seonde définira la hauteur.
 
-<p>Chaque valeur peut être une longueur (<code>&lt;length&gt;</code>), un pourcentage (<code>&lt;percentage&gt;</code>) ou <code>auto</code>.</p>
+Chaque valeur peut être une longueur (`<length>`), un pourcentage (`<percentage>`) ou `auto`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}} qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur de pourcentage ({{cssxref("&lt;percentage&gt;")}} qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par {{cssxref("mask-origin")}} par rapport à la taille  de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (<em>padding</em>) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions.</dd>
- <dt><code>contain</code></dt>
- <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le contenur. Par défaut, l'image est centrée sauf si {{cssxref("mask-position")}} indique un autre paramètre.</dd>
- <dt><code>cover</code></dt>
- <dd>Un mot-clé qui se comporte à l'inverse de <code>contain</code>. L'image est agrandie autant que possible et ses proportions sont conservées et elle couvre toute la surface du conteneur, si les dimensions du conteneur sont différentes, l'image est rognée sur les côtés (haut et bas ou droite et gauche).</dd>
-</dl>
+- `<length>`
+  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}} qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées.
+- `<percentage>`
+  - : Une valeur de pourcentage ({{cssxref("&lt;percentage&gt;")}} qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par {{cssxref("mask-origin")}} par rapport à la taille  de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (_padding_) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées.
+- `auto`
+  - : Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions.
+- `contain`
+  - : Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le contenur. Par défaut, l'image est centrée sauf si {{cssxref("mask-position")}} indique un autre paramètre.
+- `cover`
+  - : Un mot-clé qui se comporte à l'inverse de `contain`. L'image est agrandie autant que possible et ses proportions sont conservées et elle couvre toute la surface du conteneur, si les dimensions du conteneur sont différentes, l'image est rognée sur les côtés (haut et bas ou droite et gauche).
 
-<p>L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (<em>bitmap</em>) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, <em>de facto</em>, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques.</p>
+L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (_bitmap_) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, _de facto_, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques.
 
-<p>La taille de l'image affichée pour le masque est calculée de la façon suivante :</p>
+La taille de l'image affichée pour le masque est calculée de la façon suivante :
 
-<dl>
- <dt>Si les deux composants de <code>mask-size</code> sont définis et sont différents de <code>auto</code> :</dt>
- <dd>L'image est affichée avec la taille indiquée.</dd>
- <dt>Si <code>mask-size</code> vaut <code>contain</code> ou <code>cover</code> :</dt>
- <dd>L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrire toute la zone du masque. Si l'image ne possède pas de proportions intrinsèques, sa taille d'affichage sera la taille de la zone du masque.</dd>
- <dt>Si <code>mask-size</code> vaut <code>auto</code> ou <code>auto auto </code>:</dt>
- <dd>Si l'image possède deux dimensions intrinsèques, elle sera affichée avec cette taille. Si elle ne possède pas de dimensions intrinsèques ni de proportions intrinsèques, elle sera affichée à la taille de la zone du masque. Si elle n'a aucune dimension intrinsèque mais possède des proportions intrinsèques elle sera affichée comme si <code>contain</code> avait été utilisé. Si l'image possède une dimension intrinsèque et des proportions intrinsèques, sa taille sera déterminée grâce à ses informations. Si l'image possède une dimension intrinsèque mais aucune proportion intrinsèque, la dimension connue sera utilisée pour cet axe et la seconde sera celle de la zone pour le masque.</dd>
- <dt>Si <code>mask-size</code> possède un composant <code>auto</code> et un autre composant différent de <code>auto</code> :</dt>
- <dd>Si l'image possède des proportions intrinsèques, elle sera affichée avec la dimension connue et la deuxième sera calculée à partir de la proportion. Si l'image ne possède pas de proportions intrinsèques, la valeur définie sera utilisée pour l'axe correspondant et pour l'autre axe, on utilisera la dimension intrinsèque si elle est connue, sinon, on utilisera la dimension (sur cet axe) de la zone du masque.</dd>
-</dl>
+- Si les deux composants de `mask-size` sont définis et sont différents de `auto` :
+  - : L'image est affichée avec la taille indiquée.
+- Si `mask-size` vaut `contain` ou `cover` :
+  - : L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrire toute la zone du masque. Si l'image ne possède pas de proportions intrinsèques, sa taille d'affichage sera la taille de la zone du masque.
+- Si `mask-size` vaut `auto` ou `auto auto `:
+  - : Si l'image possède deux dimensions intrinsèques, elle sera affichée avec cette taille. Si elle ne possède pas de dimensions intrinsèques ni de proportions intrinsèques, elle sera affichée à la taille de la zone du masque. Si elle n'a aucune dimension intrinsèque mais possède des proportions intrinsèques elle sera affichée comme si `contain` avait été utilisé. Si l'image possède une dimension intrinsèque et des proportions intrinsèques, sa taille sera déterminée grâce à ses informations. Si l'image possède une dimension intrinsèque mais aucune proportion intrinsèque, la dimension connue sera utilisée pour cet axe et la seconde sera celle de la zone pour le masque.
+- Si `mask-size` possède un composant `auto` et un autre composant différent de `auto` :
+  - : Si l'image possède des proportions intrinsèques, elle sera affichée avec la dimension connue et la deuxième sera calculée à partir de la proportion. Si l'image ne possède pas de proportions intrinsèques, la valeur définie sera utilisée pour l'axe correspondant et pour l'autre axe, on utilisera la dimension intrinsèque si elle est connue, sinon, on utilisera la dimension (sur cet axe) de la zone du masque.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   height: 100px;
   width: 100px;
   background-color: rgb(128,128,128);
@@ -117,37 +109,27 @@ mask-size: unset;
   -webkit-mask-size: auto 50%;
   mask-size: auto 50%;
 
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="exemple"&gt;&lt;/div&gt;</pre>
+```html
+<div class="exemple"></div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples",200,200)}}</p>
+{{EmbedLiveSample("Exemples",200,200)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-mask-size", "mask-size")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Masks", "#the-mask-size", "mask-size")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.mask-size")}}</p>
+{{Compat("css.properties.mask-size")}}
diff --git a/files/fr/web/css/mask-type/index.md b/files/fr/web/css/mask-type/index.md
index d589c35f37..0e7e4ecdc5 100644
--- a/files/fr/web/css/mask-type/index.md
+++ b/files/fr/web/css/mask-type/index.md
@@ -8,11 +8,12 @@ tags:
   - SVG
 translation_of: Web/CSS/mask-type
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>mask-type</code></strong> définit si un masque sera utilisé comme un masque de <em>luminance</em> ou comme un masque de transparence (aussi appelé masque <em>alpha</em>). Cette propriété s'applique sur l'élément SVG {{SVGElement("mask")}}. Le comportement de cette propriété peut être surchargée par la propriété {{cssxref("mask-mode")}} qui définit sur quel élément le masque est appliqué. De façon générale, les masques alpha sont appliqués plus rapidement que les masques de luminance.</p>
+La propriété **`mask-type`** définit si un masque sera utilisé comme un masque de _luminance_ ou comme un masque de transparence (aussi appelé masque _alpha_). Cette propriété s'applique sur l'élément SVG {{SVGElement("mask")}}. Le comportement de cette propriété peut être surchargée par la propriété {{cssxref("mask-mode")}} qui définit sur quel élément le masque est appliqué. De façon générale, les masques alpha sont appliqués plus rapidement que les masques de luminance.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 mask-type: luminance;
 mask-type: alpha;
 
@@ -20,115 +21,106 @@ mask-type: alpha;
 mask-type: inherit;
 mask-type: initial;
 mask-type: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>mask-type</code> est définie avec un mot-clé parmi ceux définis ci-après.</p>
+La propriété `mask-type` est définie avec un mot-clé parmi ceux définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>luminance</code></dt>
- <dd>Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de luminance. Autrement dit, ce sont <a href="https://fr.wikipedia.org/wiki/Luminance_relative">les valeurs de luminance relatives</a> qui seront utilisées lorsque le masque sera appliqué.</dd>
- <dt><code>alpha</code></dt>
- <dd>Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de transparence. Autrement dit, ce sont les valeurs du <a href="https://fr.wikipedia.org/wiki/Canal_alpha">canal alpha</a> de l'image qui seront utilisées lorsque le masque sera appliqué.</dd>
-</dl>
+- `luminance`
+  - : Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de luminance. Autrement dit, ce sont [les valeurs de luminance relatives](https://fr.wikipedia.org/wiki/Luminance_relative) qui seront utilisées lorsque le masque sera appliqué.
+- `alpha`
+  - : Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de transparence. Autrement dit, ce sont les valeurs du [canal alpha](https://fr.wikipedia.org/wiki/Canal_alpha) de l'image qui seront utilisées lorsque le masque sera appliqué.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="setting_an_alpha_mask">Définir un masque alpha</h3>
+### Définir un masque alpha
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="redsquare"&gt;&lt;/div&gt;
-&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"&gt;
-  &lt;defs&gt;
-    &lt;mask id="m" maskContentUnits="objectBoundingBox"
-      style="mask-type:alpha"&gt;
-      &lt;rect x=".1" y=".1" width=".8" height=".8"
-          fill="red" fill-opacity="0.7"/&gt;
-    &lt;/mask&gt;
-  &lt;/defs&gt;
-&lt;/svg&gt;</pre>
+```html
+<div class="redsquare"></div>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
+  <defs>
+    <mask id="m" maskContentUnits="objectBoundingBox"
+      style="mask-type:alpha">
+      <rect x=".1" y=".1" width=".8" height=".8"
+          fill="red" fill-opacity="0.7"/>
+    </mask>
+  </defs>
+</svg>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.redsquare {
+```css
+.redsquare {
   height: 100px;
   width: 100px;
   background-color: rgb(128, 128, 128);
   border: solid 1px black;
   mask: url("#m");
-}</pre>
+}
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('setting_an_alpha_mask', '100%', '102')}}</p>
+{{EmbedLiveSample('setting_an_alpha_mask', '100%', '102')}}
 
-<h3 id="setting_a_luminance_mask">Définir un masque de luminance</h3>
+### Définir un masque de luminance
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="redsquare"&gt;&lt;/div&gt;
-&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"&gt;
-  &lt;defs&gt;
-    &lt;mask id="m" maskContentUnits="objectBoundingBox"
-      style="mask-type:luminance"&gt;
-      &lt;rect x=".1" y=".1" width=".8" height=".8"
-          fill="red" fill-opacity="0.7"/&gt;
-    &lt;/mask&gt;
-  &lt;/defs&gt;
-&lt;/svg&gt;</pre>
+```html
+<div class="redsquare"></div>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
+  <defs>
+    <mask id="m" maskContentUnits="objectBoundingBox"
+      style="mask-type:luminance">
+      <rect x=".1" y=".1" width=".8" height=".8"
+          fill="red" fill-opacity="0.7"/>
+    </mask>
+  </defs>
+</svg>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.redsquare {
+```css
+.redsquare {
   height: 100px;
   width: 100px;
   background-color: rgb(128, 128, 128);
   border: solid 1px black;
   mask: url("#m");
-}</pre>
+}
+```
 
-<h4 id="result_2">Result</h4>
+#### Result
 
-<p>{{EmbedLiveSample('setting_a_luminance_mask', '100%', '102')}}</p>
+{{EmbedLiveSample('setting_a_luminance_mask', '100%', '102')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Masks', '#the-mask-type', 'mask-type')}}</td>
-   <td>{{Spec2('CSS Masks')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('CSS Masks', '#the-mask-type', 'mask-type')}} | {{Spec2('CSS Masks')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.mask-type")}}</p>
+{{Compat("css.properties.mask-type")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("mask")}}</li>
- <li>{{cssxref("mask-mode")}}</li>
-</ul>
+- {{cssxref("mask")}}
+- {{cssxref("mask-mode")}}
diff --git a/files/fr/web/css/mask/index.md b/files/fr/web/css/mask/index.md
index 39988a8dc4..3b86121fda 100644
--- a/files/fr/web/css/mask/index.md
+++ b/files/fr/web/css/mask/index.md
@@ -8,21 +8,20 @@ tags:
   - SVG
 translation_of: Web/CSS/mask
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>mask</code></strong> permet de masquer un élément partiellement ou complètement en utilisant un masque apposé sur l'image ou en rognant l'image aux positions données. Cette propriété est une propriété raccourcie pour les propriétés {{cssxref("mask-image")}}, {{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-size")}} et {{cssxref("mask-composite ")}}.</p>
+La propriété **`mask`** permet de masquer un élément partiellement ou complètement en utilisant un masque apposé sur l'image ou en rognant l'image aux positions données. Cette propriété est une propriété raccourcie pour les propriétés {{cssxref("mask-image")}}, {{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-size")}} et {{cssxref("mask-composite ")}}.
 
-<div class="note">
-<p><strong>Note :</strong> La propriété raccourcie réinitialise également {{cssxref("mask-border")}} avec sa valeur initiale. Il est donc recommandé d'utiliser la propriété raccourcie à travers les feuilles de style plutôt que les propriétés raccourcies (sauf en cas d'héritage complexe).</p>
-</div>
+> **Note :** La propriété raccourcie réinitialise également {{cssxref("mask-border")}} avec sa valeur initiale. Il est donc recommandé d'utiliser la propriété raccourcie à travers les feuilles de style plutôt que les propriétés raccourcies (sauf en cas d'héritage complexe).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 mask: none;
 
 /* Valeurs d'image */
-/* Type &lt;image&gt;    */
+/* Type <image>    */
 mask: url(mask.png);                       /* Image matricielle utilisée comme masque */
 mask: url(masks.svg#star);                 /* Élément d'un SVG utilisé comme masque */
 
@@ -38,87 +37,69 @@ mask: url(masks.svg#star) exclude;         /* Élément d'un SVG utilisé comme
 mask: inherit;
 mask: initial;
 mask: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;mask-reference&gt;</code></dt>
- <dd>Cette valeur permet de définir l'image source pour le masque. Voir {{cssxref("mask-image")}}.</dd>
- <dt><code>&lt;masking-mode&gt;</code></dt>
- <dd>Cette valeur définit le mode du masque. Voir {{cssxref("mask-mode")}}.</dd>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Cette valeur définit la position de l'image du masque. Voir {{cssxref("mask-position")}}.</dd>
- <dt><code>&lt;bg-size&gt;</code></dt>
- <dd>Cette valeur définit la taille de l'image du masque. Voir {{cssxref("mask-size")}}.</dd>
- <dt><code>&lt;repeat-style&gt;</code></dt>
- <dd>Cette valeur définit le mode de répétition de l'image du masque. Voir {{cssxref("mask-repeat")}}.</dd>
- <dt><code>&lt;geometry-box&gt;</code></dt>
- <dd>Si une seule valeur <code>&lt;geometry-box&gt;</code> est fournie, elle définira les valeurs de {{cssxref("mask-origin")}} et {{cssxref("mask-clip")}}. Si deux valeurs sont fournies, la première sera utilisée pour définir {{cssxref("mask-origin")}} et la deuxième pour définir {{cssxref("mask-clip")}}.</dd>
- <dt><code>&lt;geometry-box&gt; | no-clip</code></dt>
- <dd>Cette valeur définit la zone qui est impactée par l'image du masque. Voir {{cssxref("mask-clip")}}.</dd>
- <dt><code>&lt;compositing-operator&gt;</code></dt>
- <dd>Cette valeur définit l'opération de composition qui est utilisée par rapport à la couche de masque actuelle. Voir {{cssxref("mask-composite")}}.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
-<p>{{csssyntax}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p class="exemple"&gt;Il y avait une table servie sous un arbre devant
+```
+
+### Valeurs
+
+- `<mask-reference>`
+  - : Cette valeur permet de définir l'image source pour le masque. Voir {{cssxref("mask-image")}}.
+- `<masking-mode>`
+  - : Cette valeur définit le mode du masque. Voir {{cssxref("mask-mode")}}.
+- `<position>`
+  - : Cette valeur définit la position de l'image du masque. Voir {{cssxref("mask-position")}}.
+- `<bg-size>`
+  - : Cette valeur définit la taille de l'image du masque. Voir {{cssxref("mask-size")}}.
+- `<repeat-style>`
+  - : Cette valeur définit le mode de répétition de l'image du masque. Voir {{cssxref("mask-repeat")}}.
+- `<geometry-box>`
+  - : Si une seule valeur `<geometry-box>` est fournie, elle définira les valeurs de {{cssxref("mask-origin")}} et {{cssxref("mask-clip")}}. Si deux valeurs sont fournies, la première sera utilisée pour définir {{cssxref("mask-origin")}} et la deuxième pour définir {{cssxref("mask-clip")}}.
+- `<geometry-box> | no-clip`
+  - : Cette valeur définit la zone qui est impactée par l'image du masque. Voir {{cssxref("mask-clip")}}.
+- `<compositing-operator>`
+  - : Cette valeur définit l'opération de composition qui est utilisée par rapport à la couche de masque actuelle. Voir {{cssxref("mask-composite")}}.
+
+### Syntaxe formelle
+
+{{csssyntax}}
+
+## Exemples
+
+### HTML
+
+```html
+<p class="exemple">Il y avait une table servie sous un arbre devant
  la maison, et le Lièvre y prenait le thé avec le Chapelier. Un Loir
  profondément endormi était assis entre les deux autres qui s’en
  servaient comme d’un coussin, le coude appuyé sur lui et causant
- par-dessus sa tête.&lt;/p&gt;
-</pre>
+ par-dessus sa tête.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple{
+```css
+.exemple{
   mask:url(https://developer.mozilla.org/static/img/favicon72.png) luminance 20%;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>Extension aux éléments HTML. La syntaxe est étendue et la propriété devient une propriété raccourcie pour les nouvelles propriétés <code>mask-*</code> définies avec cette spécification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.mask")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("clip-path")}}, {{cssxref("filter")}}</li>
- <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">Les formes CSS : "clipping" et "masking" – comment les utiliser (en anglais)</a></li>
- <li><a href="/fr/docs/Applying_SVG_effects_to_HTML_content">Appliquer des effets SVG à du contenu HTML</a></li>
- <li><a href="/fr/docs/Web/SVG">SVG</a></li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires                                                                                                                                                                   |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName("CSS Masks", "#the-mask", 'mask')}}                     | {{Spec2("CSS Masks")}} | Extension aux éléments HTML. La syntaxe est étendue et la propriété devient une propriété raccourcie pour les nouvelles propriétés `mask-*` définies avec cette spécification. |
+| {{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}} | {{Spec2('SVG1.1')}}     | Définition initiale.                                                                                                                                                           |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.mask")}}
+
+## Voir aussi
+
+- {{cssxref("clip-path")}}, {{cssxref("filter")}}
+- [Les formes CSS : "clipping" et "masking" – comment les utiliser (en anglais)](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
+- [Appliquer des effets SVG à du contenu HTML](/fr/docs/Applying_SVG_effects_to_HTML_content)
+- [SVG](/fr/docs/Web/SVG)
diff --git a/files/fr/web/css/math-style/index.md b/files/fr/web/css/math-style/index.md
index 10d505b534..c76e488be1 100644
--- a/files/fr/web/css/math-style/index.md
+++ b/files/fr/web/css/math-style/index.md
@@ -1,16 +1,17 @@
 ---
 title: math-style
 slug: Web/CSS/math-style
+translation_of: Web/CSS/math-style
 browser-compat: css.properties.math-style
-translation_of: 'Web/CSS/math-style'
 ---
-<p>{{MDNSidebar}}</p>
+{{MDNSidebar}}
 
-<p>La propriété <code>math-style</code> détermine si les équations MathML devraient être affichées en hauteur normale ou compacte.</p>
+La propriété `math-style` détermine si les équations MathML devraient être affichées en hauteur normale ou compacte.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 math-style: normal;
 math-style: compact;
 
@@ -19,38 +20,35 @@ math-sytle: inherit;
 math-style: initial;
 math-style: revert;
 math-style: unset;
-</pre>
+```
 
-<h3 id="values">Valeurs</h3>
+### Valeurs
 
-<dl>
-  <dt><code>normal</code></dt>
-  <dd>La valeur initiale, indiquant un rendu normal.</dd>
-  <dt><code>compact</code></dt>
-  <dd>La mise en page des éléments de l'équation est faite de manière à réduire la hauteur de l'ensemble.</dd>
-</dl>
+- `normal`
+  - : La valeur initiale, indiquant un rendu normal.
+- `compact`
+  - : La mise en page des éléments de l'équation est faite de manière à réduire la hauteur de l'ensemble.
 
-<h2 id="formal_definition">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="formal_syntax">Syntaxe formelle</h2>
+## Syntaxe formelle
 
-<p>{{CSSSyntax}}</p>
+{{CSSSyntax}}
 
-<h2 id="examples">Exemple</h2>
+## Exemple
 
-<h3 id="css">CSS</h3>
+### CSS
 
-<pre><em>math {
-  math-style: compact;
-}</em>
-</pre>
+    math {
+      math-style: compact;
+    }
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/css/max()/index.md b/files/fr/web/css/max()/index.md
index a660acc748..a5f9f8df2e 100644
--- a/files/fr/web/css/max()/index.md
+++ b/files/fr/web/css/max()/index.md
@@ -7,112 +7,101 @@ tags:
   - Reference
 translation_of: Web/CSS/max()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <code><strong>max</strong></code><strong><code>()</code></strong> permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction <code>max()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est autorisée.</p>
+La fonction CSS **`max`\*\***`()`\*\* permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction `max()` peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est autorisée.
 
-<pre class="brush: css no-line-numbers">/* property: max(expression<code class="css plain"> [, expression]</code>) */
+```css
+/* property: max(expression [, expression]) */
 width: max(10vw, 4em, 80px);
-</pre>
+```
 
-<p>Dans l'exemple précédent, la largeur mesurera au moins 80 pixels de large, sera plus large si la zone d'affichage (<em>viewport</em>) est plus large que 800 pixels ou si un <code>em</code> vaut plus que 20 pixels de large. Autrement dit, la valeur fournie <code>max()</code> est calculée comme un seuil et généralement, on aura un seuil minimal dans une expression <code>max()</code> (ce qui peut paraître contradictoire à juste titre).</p>
+Dans l'exemple précédent, la largeur mesurera au moins 80 pixels de large, sera plus large si la zone d'affichage (_viewport_) est plus large que 800 pixels ou si un `em` vaut plus que 20 pixels de large. Autrement dit, la valeur fournie `max()` est calculée comme un seuil et généralement, on aura un seuil minimal dans une expression `max()` (ce qui peut paraître contradictoire à juste titre).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La fonction <code>max()</code> prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus grand résultat des évaluations des expressions passées en arguments.</p>
+La fonction `max()` prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus grand résultat des évaluations des expressions passées en arguments.
 
-<p>Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec <code><a href="/fr/docs/Web/CSS/attr">attr()</a></code>). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("&lt;length&gt;")}}).</p>
+Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec [`attr()`](/fr/docs/Web/CSS/attr)). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("&lt;length&gt;")}}).
 
-<p>Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.</p>
+Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<ul>
- <li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
- <li>Il est possible d'imbriquer des fonctions <code>max()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
-</ul>
+- Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme `auto` si le tableau suit une disposition automatique ou fixée.
+- Il est possible d'imbriquer des fonctions `max()` et `min()` dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à `calc()`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Garantir_une_taille_minimale_pour_des_images">Garantir une taille minimale pour des images</h3>
+### Garantir une taille minimale pour des images
 
-<p><code>max()</code> permet de simplifier la définition d'une taille <strong>minimale</strong>, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les plus larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.</p>
+`max()` permet de simplifier la définition d'une taille **minimale**, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les plus larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.logo {
+```css
+.logo {
   width: max(50vw, 300px);
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"&gt;</pre>
+```html
+<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', 'auto', '60')}}</p>
+{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', 'auto', '60')}}
 
-<p>Avec cet exemple, le logo sera au moins large de 300 pixels et sera plus large afin d'occuper la moitié de la zone d'affichage si le <em>viewport</em> devient plus large que 600 pixels.</p>
+Avec cet exemple, le logo sera au moins large de 300 pixels et sera plus large afin d'occuper la moitié de la zone d'affichage si le _viewport_ devient plus large que 600 pixels.
 
-<h3 id="Fixer_une_taille_minimale_pour_une_police">Fixer une taille minimale pour une police</h3>
+### Fixer une taille minimale pour une police
 
-<p>On peut également utiliser <code>max()</code> pour définir la taille d'une police et fixer un seuil minimal pour garantir une certaine lisibilité.</p>
+On peut également utiliser `max()` pour définir la taille d'une police et fixer un seuil minimal pour garantir une certaine lisibilité.
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   font-size: 2rem;
 }
 h1.responsive {
   font-size: max(4vw, 2em, 2rem);
 }
-</pre>
+```
 
-<p>Avec ces règles, la valeur pour <code>font-size</code> vaudra au moins <code>2rems</code> ou deux fois la taille par défaut de la police sur la page.</p>
+Avec ces règles, la valeur pour `font-size` vaudra au moins `2rems` ou deux fois la taille par défaut de la police sur la page.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h1&gt;Ce texte est toujours lisible mais sa taille ne change pas.&lt;/h1&gt;
-&lt;h1 class="responsive"&gt;Ce texte est toujours lisible et s'adapte dans une certaine mesure.&lt;/h1&gt;
-</pre>
+```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>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Fixer_une_taille_minimale_pour_une_police', '700', '300')}}</p>
+{{EmbedLiveSample('Fixer_une_taille_minimale_pour_une_police', '700', '300')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#calc-notation', 'max()')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Values', '#calc-notation', 'max()')}} | {{Spec2('CSS4 Values')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.max")}}</p>
+{{Compat("css.types.max")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{CSSxRef("calc", "calc()")}}</li>
- <li>{{CSSxRef("clamp", "clamp()")}}</li>
- <li>{{CSSxRef("min", "min()")}}</li>
- <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs et unités en CSS</a></li>
-</ul>
+- {{CSSxRef("calc", "calc()")}}
+- {{CSSxRef("clamp", "clamp()")}}
+- {{CSSxRef("min", "min()")}}
+- [Valeurs et unités en CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units)
diff --git a/files/fr/web/css/max-block-size/index.md b/files/fr/web/css/max-block-size/index.md
index 099822388a..a176d02e7c 100644
--- a/files/fr/web/css/max-block-size/index.md
+++ b/files/fr/web/css/max-block-size/index.md
@@ -8,25 +8,26 @@ tags:
   - Reference
 translation_of: Web/CSS/max-block-size
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>max-block-size</code></strong> définit la taille maximale horizontale ou verticale d'un élément selon l'axe perpendiculaire (l'axe de bloc) au sens d'écriture indiqué par {{cssxref("writing-mode")}}. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, <code>max-block-size</code> fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément.</p>
+La propriété **`max-block-size`** définit la taille maximale horizontale ou verticale d'un élément selon l'axe perpendiculaire (l'axe de bloc) au sens d'écriture indiqué par {{cssxref("writing-mode")}}. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, `max-block-size` fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément.
 
-<p>La propriété {{cssxref("max-inline-size")}} peut être utilisée pour l'effet analogue selon l'axe en ligne (c'est-à-dire l'axe qui suit le sens d'écriture).</p>
+La propriété {{cssxref("max-inline-size")}} peut être utilisée pour l'effet analogue selon l'axe en ligne (c'est-à-dire l'axe qui suit le sens d'écriture).
 
-<p>Cette propriété est une propriété <em>logique</em> qui doit remplacer les propriétés <em>physiques</em> correspondantes (<code>max-height</code> ou <code>max-width</code>) si on souhaite que la disposition tienne compte du mode d'écriture de la page (que celui-ci soit horizontal ou vertical). Vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#Exemple">ces exemples</a> pour en savoir plus.</p>
+Cette propriété est une propriété _logique_ qui doit remplacer les propriétés _physiques_ correspondantes (`max-height` ou `max-width`) si on souhaite que la disposition tienne compte du mode d'écriture de la page (que celui-ci soit horizontal ou vertical). Vous pouvez consulter [ces exemples](/fr/docs/Web/CSS/writing-mode#Exemple) pour en savoir plus.
 
-<div>{{EmbedInteractiveExample("pages/css/max-block-size.html")}}</div>
+{{EmbedInteractiveExample("pages/css/max-block-size.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 max-block-size: 300px;
 max-block-size: 25em;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 max-block-size: 75%;
 
 /* Valeurs avec un mot-clé */
@@ -40,97 +41,67 @@ max-block-size: fill-available;
 max-block-size: inherit;
 max-block-size: initial;
 max-block-size: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>max-block-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.</p>
+La propriété `max-block-size` peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.
 
-<p>{{page("/fr/docs/Web/CSS/max-width", "Valeurs")}}</p>
+{{page("/fr/docs/Web/CSS/max-width", "Valeurs")}}
 
-<h3 id="Relation_avec_les_propriétés_physiques">Relation avec les propriétés physiques</h3>
+### Relation avec les propriétés physiques
 
-<p>La valeur de <code>writing-mode</code> détermine la propriété physique correspondant à <code>max-block-size</code> :</p>
+La valeur de `writing-mode` détermine la propriété physique correspondant à `max-block-size` :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Valeur pour <code>writing-mode</code></th>
-   <th scope="col">Propriété physique équivalente à <code>max-block-size</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>horizontal-tb</code>, <code>lr</code> {{deprecated_inline}}, <code>lr-tb</code> {{deprecated_inline}}, <code>rl</code> {{deprecated_inline}}, <code>rb</code> {{deprecated_inline}}, <code>rb-rl</code> {{deprecated_inline}}</td>
-   <td>{{cssxref("max-height")}}</td>
-  </tr>
-  <tr>
-   <td><code>vertical-rl</code>, <code>vertical-lr</code>, <code>sideways-rl</code> {{experimental_inline}}, <code>sideways-lr</code> {{experimental_inline}}, <code>tb</code> {{deprecated_inline}}, <code>tb-rl</code> {{deprecated_inline}}</td>
-   <td>{{cssxref("max-width")}}</td>
-  </tr>
- </tbody>
-</table>
+| Valeur pour `writing-mode`                                                                                                                                                                            | Propriété physique équivalente à `max-block-size` |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| `horizontal-tb`, `lr` {{deprecated_inline}}, `lr-tb` {{deprecated_inline}}, `rl` {{deprecated_inline}}, `rb` {{deprecated_inline}}, `rb-rl` {{deprecated_inline}}  | {{cssxref("max-height")}}                  |
+| `vertical-rl`, `vertical-lr`, `sideways-rl` {{experimental_inline}}, `sideways-lr` {{experimental_inline}}, `tb` {{deprecated_inline}}, `tb-rl` {{deprecated_inline}} | {{cssxref("max-width")}}                  |
 
-<div class="note">
-<p><strong>Note :</strong> Les valeurs <code>sideways-lr</code> et <code>sideways-rl</code> pour <code>writing-mode</code> ont été retirées de la spécification CSS Writing Modes Level 3 en fin de processus et pourraient être réintroduites dans la spécification Level 4.</p>
-</div>
+> **Note :** Les valeurs `sideways-lr` et `sideways-rl` pour `writing-mode` ont été retirées de la spécification CSS Writing Modes Level 3 en fin de processus et pourraient être réintroduites dans la spécification Level 4.
 
-<div class="note">
-<p><strong>Note :</strong> Les modes d'écriture <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>rb</code> et <code>rb-tl</code> ne sont plus autorisés pour les contextes {{Glossary("HTML")}} et peuvent uniquement être utilisés dans des contextes {{Glossary("SVG")}} 1.x.</p>
-</div>
+> **Note :** Les modes d'écriture `lr`, `lr-tb`, `rl`, `rb` et `rb-tl` ne sont plus autorisés pour les contextes {{Glossary("HTML")}} et peuvent uniquement être utilisés dans des contextes {{Glossary("SVG")}} 1.x.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   writing-mode: vertical-rl;
   background-color: yellow;
   block-size: 100%;
   max-block-size: 200px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-</pre>
+```html
+<p class="exemple">Texte d'exemple</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemple")}}</p>
+{{EmbedLiveSample("Exemple")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécifications                                                                                                   | État                                             | Commentaires        |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.max-block-size")}}</p>
+{{Compat("css.properties.max-block-size")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}</li>
- <li>{{cssxref("writing-mode")}}</li>
-</ul>
+- Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}
+- {{cssxref("writing-mode")}}
diff --git a/files/fr/web/css/max-height/index.md b/files/fr/web/css/max-height/index.md
index 1cbdfaca41..6e20a91a3a 100644
--- a/files/fr/web/css/max-height/index.md
+++ b/files/fr/web/css/max-height/index.md
@@ -7,22 +7,23 @@ tags:
   - Reference
 translation_of: Web/CSS/max-height
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>max-height</code></strong> est utilisée pour définir la hauteur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("height")}} de devenir supérieure à la valeur spécifiée par <code>max-height</code> (autrement dit, <code>max-height</code> est une borne supérieure pour <code>height</code>).</p>
+La propriété **`max-height`** est utilisée pour définir la hauteur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("height")}} de devenir supérieure à la valeur spécifiée par `max-height` (autrement dit, `max-height` est une borne supérieure pour `height`).
 
-<div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div>
+{{EmbedInteractiveExample("pages/css/max-height.html")}}
 
-<p>La valeur de <code>max-height</code> surcharge la valeur de {{cssxref("height")}} mais elle est surchargée par {{cssxref("min-height")}}.</p>
+La valeur de `max-height` surcharge la valeur de {{cssxref("height")}} mais elle est surchargée par {{cssxref("min-height")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt;      */
+```css
+/* Valeur de longueur */
+/* Type <length>      */
 max-height: 3.5em;
 
 /* Valeurs relatives */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 max-height: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -36,45 +37,46 @@ max-height: fill-available;
 max-height: inherit;
 max-height: initial;
 max-height: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>La hauteur maximale fixée, exprimée comme une valeur absolue. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>La hauteur maximale fixée, exprimée comme un fraction de la hauteur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type.</dd>
- <dt><code>none</code></dt>
- <dd>Il n'y pas de limite à la hauteur que peut prendre la boîte.</dd>
- <dt><code>max-content</code> {{experimental_inline}}</dt>
- <dd>La hauteur intrinsèque préférée.</dd>
- <dt><code>min-content</code> {{experimental_inline}}</dt>
- <dd>La hauteur intrinsèque minimale.</dd>
- <dt><code>fill-available</code>{{experimental_inline}}</dt>
- <dd>La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
- <dt><code>fit-content</code> {{experimental_inline}}</dt>
- <dd>Un synonyme pour <code>max-content</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+  - : La hauteur maximale fixée, exprimée comme une valeur absolue. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser.
+- `<percentage>`
+  - : La hauteur maximale fixée, exprimée comme un fraction de la hauteur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type.
+- `none`
+  - : Il n'y pas de limite à la hauteur que peut prendre la boîte.
+- `max-content` {{experimental_inline}}
+  - : La hauteur intrinsèque préférée.
+- `min-content` {{experimental_inline}}
+  - : La hauteur intrinsèque minimale.
+- `fill-available`{{experimental_inline}}
+  - : La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un ancien nom : `available`.
+- `fit-content` {{experimental_inline}}
+  - : Un synonyme pour `max-content`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala sit amet, consectetur adipisicing
-  &lt;p&gt;
+```html
+<div> Lorem ipsum tralala sit amet, consectetur adipisicing
+  <p>
      Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  &lt;/p&gt;
-&lt;/div&gt;</pre>
+  </p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   height: 250px;
   border: solid 1px red;
 }
@@ -82,61 +84,37 @@ max-height: unset;
 p {
   max-height: 30%;
   border: solid 1px blue;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>max-height</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#height-height-keywords', 'max-height')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>. Les deux brouillons de spécification CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ces spécifications ont été remplacées par celles-ci.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'max-height')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>max-height</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.max-height")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("height")}}</li>
- <li>{{cssxref("min-height")}}</li>
- <li>{{cssxref("box-sizing")}}</li>
- <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Accessibilité
+
+Veiller à s'assurer que les éléments ciblés avec une règle utilisant `max-height` ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter 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, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                                                                                                                                                                                                                                   |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Sizing', '#height-height-keywords', 'max-height')}} | {{Spec2('CSS3 Sizing')}}         | Ajout des mots-clés `max-content`, `min-content`, `fit-content` et `fill-available`. Les deux brouillons de spécification CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ces spécifications ont été remplacées par celles-ci. |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'max-height')}}     | {{Spec2('CSS3 Transitions')}} | `max-height` peut désormais être animée.                                                                                                                                                                                                       |
+| {{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                                                                                                                                                                                           |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.max-height")}}
+
+## Voir aussi
+
+- {{cssxref("height")}}
+- {{cssxref("min-height")}}
+- {{cssxref("box-sizing")}}
+- [Le modèle de boîtes](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte "en/CSS/box_model")
diff --git a/files/fr/web/css/max-inline-size/index.md b/files/fr/web/css/max-inline-size/index.md
index 9d99076ece..47c4a75ea1 100644
--- a/files/fr/web/css/max-inline-size/index.md
+++ b/files/fr/web/css/max-inline-size/index.md
@@ -8,21 +8,22 @@ tags:
   - Reference
 translation_of: Web/CSS/max-inline-size
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>max-inline-size</code></strong> définit la taille maximale horizontale ou verticale d'un élément en ligne (<em>inline</em>) selon le mode d'écriture utilisé. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, <code>max-inline-size</code> fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément. La propriété {{cssxref("max-block-size")}} peut être utilisée pour les blocs.</p>
+La propriété [CSS](/fr/docs/Web/CSS) **`max-inline-size`** définit la taille maximale horizontale ou verticale d'un élément en ligne (_inline_) selon le mode d'écriture utilisé. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, `max-inline-size` fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément. La propriété {{cssxref("max-block-size")}} peut être utilisée pour les blocs.
 
-<div>{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}</div>
+{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 max-inline-size: 300px;
 max-inline-size: 25em;
 
 /* Valeurs proportionnelles */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 max-inline-size: 75%;
 
 /* Valeurs avec un mot-clé */
@@ -36,64 +37,52 @@ max-inline-size: fill-available;
 max-inline-size: inherit;
 max-inline-size: initial;
 max-inline-size: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>max-inline-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.</p>
+La propriété `max-inline-size` peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   writing-mode: vertical-rl;
   background-color: yellow;
   block-size: 100%;
   max-inline-size: 200px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-</pre>
+```html
+<p class="exemple">Texte d'exemple</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemple")}}</p>
+{{EmbedLiveSample("Exemple")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécifications                                                                                                   | État                                             | Commentaires        |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.max-inline-size")}}</p>
+{{Compat("css.properties.max-inline-size")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}</li>
- <li>{{cssxref("writing-mode")}}</li>
-</ul>
+- Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}
+- {{cssxref("writing-mode")}}
diff --git a/files/fr/web/css/max-width/index.md b/files/fr/web/css/max-width/index.md
index b8ca12a219..330c750484 100644
--- a/files/fr/web/css/max-width/index.md
+++ b/files/fr/web/css/max-width/index.md
@@ -7,22 +7,21 @@ tags:
   - Reference
 translation_of: Web/CSS/max-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>max-width</code></strong> est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par <code>max-width</code> (autrement dit, <code>max-width</code> est une borne supérieur pour <code>width</code>).</p>
+La propriété **`max-width`** est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par `max-width` (autrement dit, `max-width` est une borne supérieur pour `width`).
 
-<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div
+{{EmbedInteractiveExample("pages/css/max-width.html")}}La valeur de `max-width` surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.
 
-<p>La valeur de <code>max-width</code> surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt;      */
+```css
+/* Valeur de longueur */
+/* Type <length>      */
 max-width: 3.5em;
 
 /* Valeurs relatives */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 max-width: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -36,47 +35,48 @@ max-width: fill-available;
 max-width: inherit;
 max-width: initial;
 max-width: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>La largeur minimale fixée. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.</dd>
- <dt><code>fill-available</code>{{experimental_inline}}</dt>
- <dd>La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
- <dt><code>fit-content</code> {{experimental_inline}}</dt>
- <dd>Un synonyme pour <code>max-content</code>.</dd>
- <dt><code>max-content</code> {{experimental_inline}}</dt>
- <dd>La largeur intrinsèque préférée.</dd>
- <dt><code>min-content</code> {{experimental_inline}}</dt>
- <dd>La largeur intrinsèque minimale.</dd>
- <dt><code>none</code></dt>
- <dd>Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+  - : La largeur minimale fixée. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.
+- `<percentage>`
+  - : La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.
+- `fill-available`{{experimental_inline}}
+  - : La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un ancien nom : `available`.
+- `fit-content` {{experimental_inline}}
+  - : Un synonyme pour `max-content`.
+- `max-content` {{experimental_inline}}
+  - : La largeur intrinsèque préférée.
+- `min-content` {{experimental_inline}}
+  - : La largeur intrinsèque minimale.
+- `none`
+  - : Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple_avec_un_tableau">Exemple simple avec un tableau</h3>
+### Exemple simple avec un tableau
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala sit amet, consectetur adipisicing
-  &lt;p&gt;
+```html
+<div> Lorem ipsum tralala sit amet, consectetur adipisicing
+  <p>
      Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  &lt;/p&gt;
-&lt;/div&gt;</pre>
+  </p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 250px;
   border: solid 1px red;
 }
@@ -84,63 +84,39 @@ max-width: unset;
 p {
   max-width: 60%;
   border: solid 1px blue;
-}</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Exemple_simple_avec_un_tableau","100%","100%")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>max-width</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>. Les deux brouillons de spécifications CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ont été remplacées par cette spécification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'max-width')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>max-width</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.max-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("width")}}</li>
- <li>{{cssxref("min-width")}}</li>
- <li>{{cssxref("min-height")}}</li>
- <li>{{cssxref("max-height")}}</li>
- <li>{{cssxref("box-sizing")}}</li>
- <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
-</ul>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Exemple_simple_avec_un_tableau","100%","100%")}}
+
+## Accessibilité
+
+Veiller à s'assurer que les éléments ciblés avec une règle utilisant `max-width` ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter 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, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}} | {{Spec2('CSS3 Sizing')}}         | Ajout des mots-clés `max-content`, `min-content`, `fit-content` et `fill-available`. Les deux brouillons de spécifications CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ont été remplacées par cette spécification. |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'max-width')}}     | {{Spec2('CSS3 Transitions')}} | `max-width` peut désormais être animée.                                                                                                                                                                                                |
+| {{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                                                                                                                                                                                   |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.max-width")}}
+
+## Voir aussi
+
+- {{cssxref("width")}}
+- {{cssxref("min-width")}}
+- {{cssxref("min-height")}}
+- {{cssxref("max-height")}}
+- {{cssxref("box-sizing")}}
+- [Le modèle de boîtes](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte "en/CSS/box_model")
diff --git a/files/fr/web/css/media_queries/index.md b/files/fr/web/css/media_queries/index.md
index 1acb40d913..b53dfe7249 100644
--- a/files/fr/web/css/media_queries/index.md
+++ b/files/fr/web/css/media_queries/index.md
@@ -9,77 +9,42 @@ tags:
 translation_of: Web/CSS/Media_Queries
 original_slug: Web/CSS/Requêtes_média
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les requêtes média, plus souvent appelées <strong><em>media queries,</em></strong> sont un outil de <em>responsive design</em> qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou <em>at-rule</em>) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.</p>
+Les requêtes média, plus souvent appelées **_media queries,_** sont un outil de _responsive design_ qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou _at-rule_) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.
 
-<p>De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.</p>
+De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.
 
-<p>De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.</p>
+De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.
 
-<p>Vous pouvez en découvrir plus dans l'article <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester des requêtes media</a>.</p>
+Vous pouvez en découvrir plus dans l'article [Tester des requêtes media](/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries).
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<h3 id="Règles">Règles @</h3>
+### Règles @
 
-<ul>
- <li>{{cssxref("@import")}}</li>
- <li>{{cssxref("@media")}}</li>
-</ul>
+- {{cssxref("@import")}}
+- {{cssxref("@media")}}
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Media_queries">Manipuler les requêtes média</a></dt>
- <dd>Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.</dd>
- <dt><a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">Tester les requêtes média</a></dt>
- <dd>Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).</dd>
- <dt><a href="/fr/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">Utiliser des requêtes média pour l'accessibilité</a></dt>
- <dd>Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.</dd>
-</dl>
+- [Manipuler les requêtes média](/fr/docs/Web/CSS/Media_queries)
+  - : Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.
+- [Tester les requêtes média](/fr/docs/Web/CSS/Media_Queries/Testing_media_queries)
+  - : Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).
+- [Utiliser des requêtes média pour l'accessibilité](/fr/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)
+  - : Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS5 Media Queries')}}</td>
-   <td>{{Spec2('CSS5 Media Queries')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Conditional')}}</td>
-   <td>{{Spec2('CSS3 Conditional')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | État                                     | Commentaires         |
+| ------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS5 Media Queries')}}     | {{Spec2('CSS5 Media Queries')}} |                      |
+| {{SpecName('CSS3 Conditional')}}     | {{Spec2('CSS3 Conditional')}} |                      |
+| {{SpecName('CSS4 Media Queries')}}     | {{Spec2('CSS4 Media Queries')}} |                      |
+| {{SpecName('CSS3 Media Queries')}}     | {{Spec2('CSS3 Media Queries')}} |                      |
+| {{SpecName('CSS2.1', 'media.html')}} | {{Spec2('CSS2.1')}}                 | Définition initiale. |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme selon que l'agent utilisateur prend ou non en charge certaines technologies CSS.</li>
-</ul>
+- La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme selon que l'agent utilisateur prend ou non en charge certaines technologies CSS.
diff --git a/files/fr/web/css/media_queries/testing_media_queries/index.md b/files/fr/web/css/media_queries/testing_media_queries/index.md
index a77f0c6f18..072c3e63c5 100644
--- a/files/fr/web/css/media_queries/testing_media_queries/index.md
+++ b/files/fr/web/css/media_queries/testing_media_queries/index.md
@@ -9,70 +9,73 @@ tags:
 translation_of: Web/CSS/Media_Queries/Testing_media_queries
 original_slug: Web/CSS/Requêtes_média/Tester_les_media_queries
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (<em>media query</em>) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.</p>
+Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (_media query_) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.
 
-<h2 id="Créer_une_liste_de_requêtes_média">Créer une liste de requêtes média</h2>
+## Créer une liste de requêtes média
 
-<p>Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}.</p>
+Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}.
 
-<p>Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :</p>
+Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :
 
-<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
-</pre>
+```js
+var mql = window.matchMedia("(orientation: portrait)");
+```
 
-<h2 id="Vérifier_le_résultat_d'une_requête">Vérifier le résultat d'une requête</h2>
+## Vérifier le résultat d'une requête
 
-<p>Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété <code>matches</code> qui représente les résultat de la requête :</p>
+Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété `matches` qui représente les résultat de la requête :
 
-<pre class="brush: js">if (mql.matches) {
+```js
+if (mql.matches) {
   /* La zone d'affichage/viewport est en portrait */
 } else {
   /* La zone d'affichage/viewport est en paysage */
 }
-</pre>
+```
 
-<h2 id="Recevoir_des_notifications_liées_à_la_requête">Recevoir des notifications liées à la requête</h2>
+## Recevoir des notifications liées à la requête
 
-<p>Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un <em>listener</em> plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode <code>addListener()</code> sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} :</p>
+Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un _listener_ plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode `addListener()` sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} :
 
-<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
+```js
+var mql = window.matchMedia("(orientation: portrait)");
 mql.addListener(handleOrientationChange);
 handleOrientationChange(mql);
-</pre>
+```
 
-<p>Ce code crée la liste de requêtes média qui teste l'orientation (l'objet <code>mql</code>) puis ajoute un <em>listener</em>. Une fois qu'on a ajouté le <em>listener</em>, on l'invoque une fois. Cela permet d'ajuster l'état initial du <em>listener</em> selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).</p>
+Ce code crée la liste de requêtes média qui teste l'orientation (l'objet `mql`) puis ajoute un _listener_. Une fois qu'on a ajouté le _listener_, on l'invoque une fois. Cela permet d'ajuster l'état initial du _listener_ selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).
 
-<p>La méthode <code>handleOrientationChange()</code> qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :</p>
+La méthode `handleOrientationChange()` qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :
 
-<pre class="brush: js">function handleOrientationChange(mql) {
+```js
+function handleOrientationChange(mql) {
   if (mql.matches) {
     /* La zone d'affichage/viewport est en portrait */
   } else {
     /* La zone d'affichage/viewport est en paysage */
   }
 }
-</pre>
+```
 
-<h2 id="Terminer_la_réception_des_notifications">Terminer la réception des notifications</h2>
+## Terminer la réception des notifications
 
-<p>Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser <code>removeListener()</code> sur l'objet  {{domxref("MediaQueryList") }} :</p>
+Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser `removeListener()` sur l'objet  {{domxref("MediaQueryList") }} :
 
-<pre class="brush: js">mql.removeListener(handleOrientationChange);
-</pre>
+```js
+mql.removeListener(handleOrientationChange);
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Interface_MediaQueryList">Interface <code>MediaQueryList</code></h3>
+### Interface `MediaQueryList`
 
-<p>{{Compat("api.MediaQueryList")}}</p>
+{{Compat("api.MediaQueryList")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries" title="CSS/Media queries">Les requêtes média (<em>media queries</em>)</a></li>
- <li>{{domxref("window.matchMedia()")}}</li>
- <li>{{domxref("MediaQueryList")}}</li>
- <li>{{domxref("MediaQueryListEvent")}}</li>
-</ul>
+- [Les requêtes média (_media queries_)](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries "CSS/Media queries")
+- {{domxref("window.matchMedia()")}}
+- {{domxref("MediaQueryList")}}
+- {{domxref("MediaQueryListEvent")}}
diff --git a/files/fr/web/css/media_queries/using_media_queries/index.md b/files/fr/web/css/media_queries/using_media_queries/index.md
index b87d5cba87..bb27b12759 100644
--- a/files/fr/web/css/media_queries/using_media_queries/index.md
+++ b/files/fr/web/css/media_queries/using_media_queries/index.md
@@ -4,376 +4,265 @@ slug: Web/CSS/Media_Queries/Using_media_queries
 translation_of: Web/CSS/Media_Queries/Using_media_queries
 original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 ---
-<div>{{CSSRef}}</div>
-
-<p><strong>Les requêtes média (<em>media queries</em>)</strong> permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (<em>viewport</em>) par exemple).</p>
-
-<p>Les requêtes média sont utilisées afin :</p>
-
-<ul>
- <li>D'appliquer certains styles de façon conditionnelle avec le <a href="/fr/docs/Web/CSS">CSS</a> grâce <a href="/fr/docs/Web/CSS/At-rule">aux règles @</a> <a href="/fr/docs/Web/CSS/@media"><code>@media</code></a> et <a href="/fr/docs/Web/CSS/@import"><code>@import</code></a>.</li>
- <li>De cibler certains médias pour les éléments <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a> et d'autres éléments <a href="/fr/docs/Web/HTML">HTML</a> grâce à l'attribut <code>media=</code>.</li>
- <li>De <a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">tester et surveiller l'état d'un média</a> grâce aux méthodes <a href="/fr/docs/Web/API/Window/matchMedia"><code>Window.matchMedia()</code></a> et <a href="/fr/docs/Web/API/MediaQueryList/addListener"><code>MediaQueryList.addListener()</code></a>.</li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Les exemples de cet article utilisent <code>@media</code> à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.</p>
-</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<p>Une requête média se compose d'un <em>type de média</em> optionnel et d'une ou plusieurs expressions de <em>caractéristiques de média</em>. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.</p>
-
-<p>Une requête média vaut <code>true</code> si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours <code>false</code>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'une feuille de style est attachée à un élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> comportant une requếte média, cette feuille de style <a href="http://scottjehl.github.com/CSS-Download-Tests/">sera toujours téléchargée</a>, même si la requête renvoie <code>false</code>. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas <code>true</code>.</p>
-</div>
-
-<h3 id="media_types">Types de média</h3>
-
-<p>Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques <code>not</code> ou <code>only</code>. Par défaut, le type de média utilisé est <code>all</code>.</p>
-
-<dl>
- <dt><code>all</code></dt>
- <dd>Correspond pour tous les appareils.</dd>
- <dt><code>print</code></dt>
- <dd>Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur <a href="/fr/docs/Web/CSS/Paged_Media">les médias paginés</a>.</dd>
- <dt><code>screen</code></dt>
- <dd>Correspond aux appareils dotés d'un écran.</dd>
- <dt><code>speech</code></dt>
- <dd>Correspond aux outils de synthèse vocale.</dd>
-</dl>
-
-<div class="note">
-  <p><strong>Note :</strong> Les types de média dépréciés CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="https://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</p>
-</div>
-
-<h3 id="media_features">Caractéristiques média (<i lang="en">media features</i>)</h3>
-
-<p>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.</p>
-
-<table>
- <thead>
-  <tr>
-   <th>Nom</th>
-   <th>Résumé</th>
-   <th>Notes</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{cssxref("@media/width","width")}}</td>
-   <td>La largeur de la zone d'affichage (<em>viewport</em>)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/height","height")}}</td>
-   <td>La hauteur de la zone d'affichage</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/aspect-ratio","aspect-ratio")}}</td>
-   <td>Le rapport largeur/hauteur de la zone d'affichage</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/orientation","orientation")}}</td>
-   <td>L'orientation la zone d'affichage</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/resolution","resolution")}}</td>
-   <td>La densité de pixel pour l'appareil d'affichage</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/scan","scan")}}</td>
-   <td>Le processus de scan de l'appareil d'affichage</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/grid","grid")}}</td>
-   <td>Le type d'écran de l'appareil : matriciel ou grille ?</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/update-frequency","update")}}</td>
-   <td>La fréquence de modification du contenu par l'appareil d'affichage</td>
-   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/overflow-block","overflow-block")}}</td>
-   <td>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</td>
-   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/overflow-inline","overflow-inline")}}</td>
-   <td>La possibilité de faire défiler (<em>scroll</em>) le contenu qui dépasse de la zone d'affichage sur l'axe en ligne</td>
-   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/color","color")}}</td>
-   <td>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)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/color-gamut","color-gamut")}}</td>
-   <td>Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichage</td>
-   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/color-index","color-index")}}</td>
-   <td>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)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/display-mode","display-mode")}}</td>
-   <td>Le mode d'affichage de l'application, tel qu'indiqué par la propriété <a href="/fr/docs/Web/Manifest#display"><code>display</code></a> du manifeste</td>
-   <td>Définie dans <a href="https://w3c.github.io/manifest/#the-display-mode-media-feature">la spécification pour les manifestes des applications web</a>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/monochrome","monochrome")}}</td>
-   <td>Le nombre de bits par pixel pour le <em>frame buffer</em> monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/inverted-colors","inverted-colors")}}</td>
-   <td>L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitation</td>
-   <td>Reportée au niveau 5 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/pointer","pointer")}}</td>
-   <td>La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précision</td>
-   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/hover","hover")}}</td>
-   <td>La capacité du mécanisme de saisie principal à survoler les éléments</td>
-   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/any-pointer","any-pointer")}}</td>
-   <td>La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précision</td>
-   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/any-hover","any-hover")}}</td>
-   <td>La capacité d'un des mécanismes de saisie à survoler les éléments</td>
-   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/light-level","light-level")}}</td>
-   <td>Le niveau de luminosité de l'environnement</td>
-   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td>
-   <td>L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.</td>
-   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td>
-   <td>L'utilisateur préfère que la transparence utilisée sur la page soit réduite.</td>
-   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td>
-   <td>L'utilisateur préfère que le contraste soit augmenté ou réduit entre des couleurs proches.</td>
-   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td>
-   <td>L'utilisateur préfère utiliser un thème clair ou un thème sombre.</td>
-   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td>
-   <td>Détecte si l'agent utilisateur restreint la palette de couleurs.</td>
-   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/scripting","scripting")}}</td>
-   <td>La disponibilité des fonctions de script (JavaScript par exemple)</td>
-   <td>Reportée au niveau 5 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/device-width","device-width")}} {{obsolete_inline}}</td>
-   <td>La largeur de la surface de rendu pour l'appareil d'affichage</td>
-   <td>Dépréciée par le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/device-height","device-height")}} {{obsolete_inline}}</td>
-   <td>La hauteur de la surface de rendu pour l'appareil d'affichage</td>
-   <td>Dépréciée par le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
-  <tr>
-   <td>{{cssxref("@media/device-aspect-ratio","device-aspect-ratio")}} {{obsolete_inline}}</td>
-   <td>Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichage</td>
-   <td>Dépréciée par le niveau 4 du module de spécification <em>Media Queries</em>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="logical_operators">Opérateurs logiques</h3>
-
-<p>Les opérateurs logiques <code>not</code>, <code>and</code> et <code>only</code> peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.</p>
-
-<h4 id="and"><code>and</code></h4>
+{{CSSRef}}
 
-<p>L'opérateur <code>and</code> permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.</p>
+**Les requêtes média (_media queries_)** permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (_viewport_) par exemple).
 
-<h4 id="not"><code>not</code></h4>
+Les requêtes média sont utilisées afin :
 
-<p>L'opérateur <code>not</code> est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie <code>true</code> si l'opérande renvoie <code>false</code>). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur <code>not</code> est utilisé, la requête doit nécessairement contenir un type de média.</p>
+- D'appliquer certains styles de façon conditionnelle avec le [CSS](/fr/docs/Web/CSS) grâce [aux règles @](/fr/docs/Web/CSS/At-rule) [`@media`](/fr/docs/Web/CSS/@media) et [`@import`](/fr/docs/Web/CSS/@import).
+- De cibler certains médias pour les éléments [`<style>`](/fr/docs/Web/HTML/Element/style), [`<link>`](/fr/docs/Web/HTML/Element/link), [`<source>`](/fr/docs/Web/HTML/Element/Source) et d'autres éléments [HTML](/fr/docs/Web/HTML) grâce à l'attribut `media=`.
+- De [tester et surveiller l'état d'un média](/fr/docs/Web/CSS/Media_Queries/Testing_media_queries) grâce aux méthodes [`Window.matchMedia()`](/fr/docs/Web/API/Window/matchMedia) et [`MediaQueryList.addListener()`](/fr/docs/Web/API/MediaQueryList/addListener).
 
-<div class="note">
-<p><strong>Note :</strong> Pour la spécification de niveau 3, l'opérateur <code>not</code> ne peut pas être utilisé afin de prendre l'opposé d'une expression de caractéristique de média, il ne peut servir qu'à l'échelle d'une requête média entière.</p>
-</div>
+> **Note :** Les exemples de cet article utilisent `@media` à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.
 
-<h4 id="only"><code>only</code></h4>
+## Syntaxe
 
-<p>L'opérateur <code>only</code> est utilisé afin d'appliquer un style uniquement si l'intégralité de la requête est vérifiée. Il permet d'empêcher les anciens navigateurs d'appliquer les styles concernés. Si on utilise pas <code>only</code>, un ancien navigateur interprètera <code>screen and (max-width: 500px)</code> comme <code>screen</code> uniquement (appliquant ainsi le style à tous les écrans). Si l'opérateur <code>only</code> est utilisé, la requête doit nécessairement contenir un type de média.</p>
+Une requête média se compose d'un _type de média_ optionnel et d'une ou plusieurs expressions de _caractéristiques de média_. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.
 
-<h4 id="virgule"><code>,</code> (virgule)</h4>
+Une requête média vaut `true` si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours `false`.
 
-<p>Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie <code>true</code>, toute la requête combinée renverra <code>true</code>. En ce sens, l'opérateur <code>,</code> agit comme un opérateur booléen <code>or</code>.</p>
+> **Note :** Lorsqu'une feuille de style est attachée à un élément [`<link>`](/fr/docs/Web/HTML/Element/link) comportant une requếte média, cette feuille de style [sera toujours téléchargée](http://scottjehl.github.com/CSS-Download-Tests/), même si la requête renvoie `false`. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas `true`.
 
-<h2 id="targeting_media_types">Cibler des types de média</h2>
+### Types de média
 
-<p>Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possible d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :</p>
+Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques `not` ou `only`. Par défaut, le type de média utilisé est `all`.
 
-<pre class="brush: css">@media print { ... }</pre>
+- `all`
+  - : Correspond pour tous les appareils.
+- `print`
+  - : Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur [les médias paginés](/fr/docs/Web/CSS/Paged_Media).
+- `screen`
+  - : Correspond aux appareils dotés d'un écran.
+- `speech`
+  - : Correspond aux outils de synthèse vocale.
 
-<p>Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :</p>
+> **Note :** Les types de média dépréciés CSS2.1 et [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) ont défini plusieurs types additionnels (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, and `aural`) qui ont ensuite été dépréciés avec [Media Queries 4](https://dev.w3.org/csswg/mediaqueries/#media-types). Ces types ne doivent donc plus être utilisés. Le type `aural` a été remplacé par le type `speech`.
 
-<pre class="brush: css">@media screen, print { ... }</pre>
+### Caractéristiques média (<i lang="en">media features</i>)
 
-<p>Pour une liste complète des types de média, voir <a href="#types">ci-avant</a>. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.</p>
+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.
 
-<h2 id="targeting_media_features">Cibler des caractéristiques média</h2>
+| 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")}} {{obsolete_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")}} {{obsolete_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")}} {{obsolete_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_.                                                                     |
 
-<p>Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :</p>
+### Opérateurs logiques
 
-<pre class="brush: css">@media (hover: hover) { ... }</pre>
+Les opérateurs logiques `not`, `and` et `only` peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.
 
-<p>De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par <code>min-</code> ou <code>max-</code> afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (<em>viewport</em>) soit inférieure à 1250px :</p>
+#### `and`
 
-<pre class="brush: css">@media (max-width: 1250px) { ... }</pre>
+L'opérateur `and` permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.
 
-<div class="note">
-<p><strong>Note :</strong> Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p>
-</div>
+#### `not`
 
-<p>Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou <code>none</code> pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :</p>
+L'opérateur `not` est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie `true` si l'opérande renvoie `false`). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur `not` est utilisé, la requête doit nécessairement contenir un type de média.
 
-<pre class="brush: css">@media (color) { ... }</pre>
+> **Note :** Pour la spécification de niveau 3, l'opérateur `not` ne peut pas être utilisé afin de prendre l'opposé d'une expression de caractéristique de média, il ne peut servir qu'à l'échelle d'une requête média entière.
 
-<p>Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront <code>false</code>. Ainsi, la requête suivante aura toujours la valeur <code>false</code> car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :</p>
+#### `only`
 
-<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+L'opérateur `only` est utilisé afin d'appliquer un style uniquement si l'intégralité de la requête est vérifiée. Il permet d'empêcher les anciens navigateurs d'appliquer les styles concernés. Si on utilise pas `only`, un ancien navigateur interprètera `screen and (max-width: 500px)` comme `screen` uniquement (appliquant ainsi le style à tous les écrans). Si l'opérateur `only` est utilisé, la requête doit nécessairement contenir un type de média.
 
-<p>Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis <a href="#caractéristiques">le tableau ci-dessus</a>.</p>
+#### `,` (virgule)
 
-<h2 id="creating_complex_media_queries">Créer des requêtes média complexes</h2>
+Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie `true`, toute la requête combinée renverra `true`. En ce sens, l'opérateur `,` agit comme un opérateur booléen `or`.
 
-<p>Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiliser les opérateurs logiques : <code>not</code>, <code>and</code>, <code>only</code> et la virgule (<code>,</code>) afin de combiner plusieurs requêtes média.</p>
+## Cibler des types de média
 
-<p>Dans l'exemple précédent, on a utilisé l'opérateur <code>and</code> afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur <code>not</code> permet d'obtenir la négation d'une requête média tandis que l'opérateur <code>only</code> empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.</p>
+Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possible d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :
 
-<div class="note">
-<p><strong>Note :</strong> Dans la plupart des cas, le type de média <code>all</code> est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs <code>not</code> ou <code>only</code>, il est nécessaire de fournir un type de média explicite.</p>
-</div>
+```css
+@media print { ... }
+```
 
-<h3 id="combining_multiple_types_or_features">Combiner plusieurs types ou caractéristiques</h3>
+Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :
 
-<p>Le mot-clé <code>and</code> permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :</p>
+```css
+@media screen, print { ... }
+```
 
-<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+Pour une liste complète des types de média, voir [ci-avant](#types). Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.
 
-<p>Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média <code>screen</code> :</p>
+## Cibler des caractéristiques média
 
-<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre>
+Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :
 
-<h3 id="testing_for_multiple_queries">Tester plusieurs requêtes</h3>
+```css
+@media (hover: hover) { ... }
+```
 
-<p>La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :</p>
+De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par `min-` ou `max-` afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (_viewport_) soit inférieure à 1250px :
 
-<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+```css
+@media (max-width: 1250px) { ... }
+```
 
-<p>Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée <code>true</code>.</p>
+> **Note :** Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.
 
-<h3 id="inverting_a_querys_meaning">Opérer une négation</h3>
+Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou `none` pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :
 
-<p>Le mot-clé <code>not</code> permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé <code>not</code> ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur <code>not</code> est évalué en dernier :</p>
+```css
+@media (color) { ... }
+```
 
-<pre class="brush: css">@media not all and (monochrome) { ... }
-</pre>
+Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront `false`. Ainsi, la requête suivante aura toujours la valeur `false` car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :
 
-<p>La requête précédente est donc équivalente à :</p>
+```css
+@media speech and (aspect-ratio: 11/5) { ... }
+```
 
-<pre class="brush: css">@media not (all and (monochrome)) { ... }
-</pre>
+Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis [le tableau ci-dessus](#caractéristiques).
 
-<p>Mais elle n'est pas équivalente à :</p>
+## Créer des requêtes média complexes
 
-<pre class="brush: css example-bad">@media (not all) and (monochrome) { ... }</pre>
+Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiliser les opérateurs logiques : `not`, `and`, `only` et la virgule (`,`) afin de combiner plusieurs requêtes média.
 
-<p>De même :</p>
+Dans l'exemple précédent, on a utilisé l'opérateur `and` afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur `not` permet d'obtenir la négation d'une requête média tandis que l'opérateur `only` empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.
 
-<pre class="brush: css">@media not screen and (color), print and (color) { ... }
-</pre>
+> **Note :** Dans la plupart des cas, le type de média `all` est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs `not` ou `only`, il est nécessaire de fournir un type de média explicite.
 
-<p>sera évaluée comme :</p>
+### Combiner plusieurs types ou caractéristiques
 
-<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre>
+Le mot-clé `and` permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :
 
-<h3 id="improving_compatibility_with_older_browsers">Améliorer la compatibilité avec les anciens navigateurs</h3>
+```css
+@media (min-width: 30em) and (orientation: landscape) { ... }
+```
 
-<p>Le mot-clé <code>only</code> empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes<em>.</em></p>
+Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média `screen` :
 
-<pre class="brush: css">@media only screen and (color) { ... }
-</pre>
+```css
+@media screen and (min-width: 30em) and (orientation: landscape) { ... }
+```
 
-<h2 id="syntax_improvements_in_level_4">Améliorations syntaxiques avec la spécification de niveau 4</h2>
+### Tester plusieurs requêtes
 
-<p>La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe <code>max-</code> pour les largeurs et écrire :</p>
+La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :
 
-<pre class="brush: css">@media (max-width: 30em) { ... }</pre>
+```css
+@media (min-height: 680px), screen and (orientation: portrait) { ... }
+```
 
-<p>Avec les requêtes média de niveau 4, on peut écrire :</p>
+Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée `true`.
 
-<pre class="brush: css">@media (width &lt;= 30em) { ... }</pre>
+### Opérer une négation
 
-<p>Si on utilise <code>min-</code> et <code>max-</code> conjointement, on peut tester l'appartenance d'une valeur à un intervalle :</p>
+Le mot-clé `not` permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé `not` ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur `not` est évalué en dernier :
 
-<pre class="brush: css">@media (min-width: 30em) and (max-width: 50em) { ... }</pre>
+```css
+@media not all and (monochrome) { ... }
+```
 
-<p>Avec les requêtes média de niveau 4, on peut écrire :</p>
+La requête précédente est donc équivalente à :
 
-<pre class="brush: css">@media (30em &lt;= width &lt;= 50em ) { ... }
-</pre>
+```css
+@media not (all and (monochrome)) { ... }
+```
 
-<p>Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs <code>and</code>, <code>not</code> et <code>or</code>.</p>
+Mais elle n'est pas équivalente à :
 
-<h3 id="negating_a_feature_with_not">Tester l'absence d'une caractéristique avec <code>not</code></h3>
+```css example-bad
+@media (not all) and (monochrome) { ... }
+```
 
-<p>On peut utiliser l'opérateur <code>not()</code> autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut <code>not(hover)</code> pour cibler les appareils qui ne permettent pas le survol d'un élément :</p>
+De même :
 
-<pre class="brush: css">@media (not(hover)) { ... }</pre>
+```css
+@media not screen and (color), print and (color) { ... }
+```
 
-<h3 id="testing_for_multiple_features_with_or">Tester plusieurs caractéristiques avec <code>or</code></h3>
+sera évaluée comme :
 
-<p>Il est possible d'utiliser l'opérateur <code>or</code> pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (<code>not (color)</code>) ou qui permettent de survoler les éléments (<code>hover</code>) :</p>
+```css
+@media (not (screen and (color))), print and (color) { ... }
+```
 
-<pre class="brush: css">@media (not (color)) or (hover) { ... }
-</pre>
+### Améliorer la compatibilité avec les anciens navigateurs
 
-<h2 id="see_also">Voir aussi</h2>
+Le mot-clé `only` empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes*.*
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">Tester des requêtes média en script</a></li>
- <li><a href="https://davidwalsh.name/animate-media-queries">Utiliser les animations CSS entre les requêtes média (en anglais)</a></li>
- <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions#caract%c3%a9ristiques">Les caractéristiques média spécifiques à Mozilla</a></li>
- <li><a href="/fr/docs/Web/CSS/WebKit_Extensions#caract%c3%a9ristiques_m%c3%a9dia">Les caractéristiques média spécifiques à WebKit</a></li>
-</ul>
+```css
+@media only screen and (color) { ... }
+```
+
+## Améliorations syntaxiques avec la spécification de niveau 4
+
+La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe `max-` pour les largeurs et écrire :
+
+```css
+@media (max-width: 30em) { ... }
+```
+
+Avec les requêtes média de niveau 4, on peut écrire :
+
+```css
+@media (width <= 30em) { ... }
+```
+
+Si on utilise `min-` et `max-` conjointement, on peut tester l'appartenance d'une valeur à un intervalle :
+
+```css
+@media (min-width: 30em) and (max-width: 50em) { ... }
+```
+
+Avec les requêtes média de niveau 4, on peut écrire :
+
+```css
+@media (30em <= width <= 50em ) { ... }
+```
+
+Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs `and`, `not` et `or`.
+
+### Tester l'absence d'une caractéristique avec `not`
+
+On peut utiliser l'opérateur `not()` autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut `not(hover)` pour cibler les appareils qui ne permettent pas le survol d'un élément :
+
+```css
+@media (not(hover)) { ... }
+```
+
+### Tester plusieurs caractéristiques avec `or`
+
+Il est possible d'utiliser l'opérateur `or` pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (`not (color)`) ou qui permettent de survoler les éléments (`hover`) :
+
+```css
+@media (not (color)) or (hover) { ... }
+```
+
+## Voir aussi
+
+- [Tester des requêtes média en script](/fr/docs/Web/CSS/Media_Queries/Testing_media_queries)
+- [Utiliser les animations CSS entre les requêtes média (en anglais)](https://davidwalsh.name/animate-media-queries)
+- [Les caractéristiques média spécifiques à Mozilla](/fr/docs/Web/CSS/Mozilla_Extensions#caract%c3%a9ristiques)
+- [Les caractéristiques média spécifiques à WebKit](/fr/docs/Web/CSS/WebKit_Extensions#caract%c3%a9ristiques_m%c3%a9dia)
diff --git a/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.md b/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.md
index 1086137f49..1ad73e7fca 100644
--- a/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.md
+++ b/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.md
@@ -8,37 +8,37 @@ tags:
 translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
 original_slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilité
 ---
-<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}</div>
+{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}
 
-<p><strong>Les requêtes média (<em>media queries</em>)</strong> peuvent être utilisées afin d'améliorer l'accessibilité d'un site web.</p>
+**Les requêtes média (_media queries_)** peuvent être utilisées afin d'améliorer l'accessibilité d'un site web.
 
-<h2 id="Réduction_de_mouvement_-_prefers-reduced-motion">Réduction de mouvement - <code>prefers-reduced-motion</code></h2>
+## Réduction de mouvement - `prefers-reduced-motion`
 
-<p>Le clignotement ou les animations rapides peuvent poser problème, notamment pour les personnes souffrant de troubles tels que le troubles de déficit de l'attention ou d'epilepsie, de migraines, etc.</p>
+Le clignotement ou les animations rapides peuvent poser problème, notamment pour les personnes souffrant de troubles tels que le troubles de déficit de l'attention ou d'epilepsie, de migraines, etc.
 
-<p>Cette méthode peut également améliorer l'expérience des utilisateurs en économisant l'énergie nécessaire à l'affichage de la page (avec une amélioration sensible pour les appareils avec une batterie faible ou qui ne sont pas particulièrement récents).</p>
+Cette méthode peut également améliorer l'expérience des utilisateurs en économisant l'énergie nécessaire à l'affichage de la page (avec une amélioration sensible pour les appareils avec une batterie faible ou qui ne sont pas particulièrement récents).
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<dl>
- <dt><code><dfn>no-preference</dfn></code></dt>
- <dd>Cette valeur indique que l'utilisateur n'a pas indiqué de préférence particulière dans le système.</dd>
- <dt><code><dfn>reduce</dfn></code></dt>
- <dd>Cette valeur indique que l'utilisateur a signalé au système qu'il préférait une interface minimisant la quantité de mouvement ou d'animation. Idéalement, tous les mouvements qui ne sont pas essentiles doivent être retirés.</dd>
-</dl>
+- `no-preference`
+  - : Cette valeur indique que l'utilisateur n'a pas indiqué de préférence particulière dans le système.
+- `reduce`
+  - : Cette valeur indique que l'utilisateur a signalé au système qu'il préférait une interface minimisant la quantité de mouvement ou d'animation. Idéalement, tous les mouvements qui ne sont pas essentiles doivent être retirés.
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<p>Cet exemple illustre comment éviter les animations inutiles en activant une préférence pour réduire les mouvements à l'écran.</p>
+Cet exemple illustre comment éviter les animations inutiles en activant une préférence pour réduire les mouvements à l'écran.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="animation"&gt;animated box&lt;/div&gt;
-</pre>
+```html
+<div class="animation">animated box</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.animation {
+```css
+.animation {
   -webkit-animation: vibrate 0.3s linear infinite both;
   animation: vibrate 0.3s linear infinite both;
 }
@@ -48,44 +48,37 @@ original_slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilit
     animation: none;
   }
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple")}}</p>
+{{EmbedLiveSample("Exemple")}}
 
-<h2 id="Mode_de_contraste_élevéNon-standard_inline">Mode de contraste élevé{{Non-standard_inline}}</h2>
+## Mode de contraste élevé{{Non-standard_inline}}
 
-<p>La caractéristique média <code><strong>-ms-high-contrast</strong></code> est <a href="/en-US/docs/Web/CSS/Microsoft_extensions">spécifique à Microsoft</a> mais permet d'indiquer si l'application est affichée avec un mode de contraste élevé et, si c'est le cas, quelle variation de couleur est utilisée.</p>
+La caractéristique média **`-ms-high-contrast`** est [spécifique à Microsoft](/en-US/docs/Web/CSS/Microsoft_extensions) mais permet d'indiquer si l'application est affichée avec un mode de contraste élevé et, si c'est le cas, quelle variation de couleur est utilisée.
 
-<p>Cela ne bénéficie pas seulement aux utilisateurs souffrant de troubles de la vision mais aussi aux personnes qui consultent le document avec une lumière ambiante importante (ex. sur un écran faiblement éclairé et en plein soleil).</p>
+Cela ne bénéficie pas seulement aux utilisateurs souffrant de troubles de la vision mais aussi aux personnes qui consultent le document avec une lumière ambiante importante (ex. sur un écran faiblement éclairé et en plein soleil).
 
-<h3 id="Syntaxe_2">Syntaxe</h3>
+### Syntaxe
 
-<p>La caractéristique média <strong><code>-ms-high-contrast</code></strong> peut être définie avec l'une des valeurs suivantes.</p>
+La caractéristique média **`-ms-high-contrast`** peut être définie avec l'une des valeurs suivantes.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>active</code></dt>
- <dd>
- <p>Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé, quelle que soit la variation de couleurs.</p>
- </dd>
- <dt><code>black-on-white</code></dt>
- <dd>
- <p>Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante noir sur blanc.</p>
- </dd>
- <dt><code>white-on-black</code></dt>
- <dd>
- <p>Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante blanc sur noir.</p>
- </dd>
-</dl>
+- `active`
+  - : Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé, quelle que soit la variation de couleurs.
+- `black-on-white`
+  - : Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante noir sur blanc.
+- `white-on-black`
+  - : Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante blanc sur noir.
 
-<h3 id="Exemple_2">Exemple</h3>
+### Exemple
 
-<p>Les déclarations suivantes s'appliqueront respectivement aux applications qui sont affichées avec un mode de contraste élevé, quelle que soit la variation de couleur (1), avec une dominante noir sur blanc (2), avec une dominante blanc sur noir (3).</p>
+Les déclarations suivantes s'appliqueront respectivement aux applications qui sont affichées avec un mode de contraste élevé, quelle que soit la variation de couleur (1), avec une dominante noir sur blanc (2), avec une dominante blanc sur noir (3).
 
-<pre class="brush: css">@media screen and (-ms-high-contrast: active) {
+```css
+@media screen and (-ms-high-contrast: active) {
   /* Toutes les règles appliquées en contraste élevé */
 }
 @media screen and (-ms-high-contrast: black-on-white) {
@@ -94,4 +87,4 @@ original_slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilit
 @media screen and (-ms-high-contrast: white-on-black) {
   div { background-image: url('image-wb.png'); }
 }
-</pre>
+```
diff --git a/files/fr/web/css/microsoft_extensions/index.md b/files/fr/web/css/microsoft_extensions/index.md
index e48424afce..6e41b719c7 100644
--- a/files/fr/web/css/microsoft_extensions/index.md
+++ b/files/fr/web/css/microsoft_extensions/index.md
@@ -8,104 +8,92 @@ tags:
 translation_of: Web/CSS/Microsoft_Extensions
 original_slug: Web/CSS/Extensions_CSS_Microsoft
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les applications Microsoft, telles que Edge ou Internet Explorer, prennent en charge différentes extensions à <strong><a href="/fr/docs/Web/CSS">CSS</a></strong>. Ces extensions sont préfixées par <code>-ms</code>.</p>
+Les applications Microsoft, telles que Edge ou Internet Explorer, prennent en charge différentes extensions à **[CSS](/fr/docs/Web/CSS)**. Ces extensions sont préfixées par `-ms`.
 
-<h2 id="Propriétés_spécifiques_à_Microsoft_(ne_pas_utiliser_sur_le_Web)">Propriétés spécifiques à Microsoft (ne pas utiliser sur le Web)</h2>
+## Propriétés spécifiques à Microsoft (ne pas utiliser sur le Web)
 
-<div class="note">
-<p><strong>Note :</strong> Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.</p>
-</div>
+> **Note :** Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.
 
-<ul>
- <li>{{CSSxRef("-ms-accelerator")}}</li>
- <li>{{CSSxRef("-ms-block-progression")}}</li>
- <li>{{CSSxRef("-ms-content-zoom-chaining")}}</li>
- <li>{{CSSxRef("-ms-content-zooming")}}</li>
- <li>{{CSSxRef("-ms-content-zoom-limit")}}</li>
- <li>{{CSSxRef("-ms-content-zoom-limit-max")}}</li>
- <li>{{CSSxRef("-ms-content-zoom-limit-min")}}</li>
- <li>{{CSSxRef("-ms-content-zoom-snap")}}</li>
- <li>{{CSSxRef("-ms-content-zoom-snap-points")}}</li>
- <li>{{CSSxRef("-ms-content-zoom-snap-type")}}</li>
- <li>{{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-ms-flow-from")}}</li>
- <li>{{CSSxRef("-ms-flow-into")}}</li>
- <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
- <li>{{CSSxRef("-ms-hyphenate-limit-chars")}}</li>
- <li>{{CSSxRef("-ms-hyphenate-limit-lines")}}</li>
- <li>{{CSSxRef("-ms-hyphenate-limit-zone")}}</li>
- <li>{{CSSxRef("-ms-ime-align")}}</li>
- <li>{{CSSxRef("-ms-overflow-style")}}</li>
- <li>{{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-ms-scroll-chaining")}}</li>
- <li>{{CSSxRef("-ms-scroll-limit")}}</li>
- <li>{{CSSxRef("-ms-scroll-limit-x-max")}}</li>
- <li>{{CSSxRef("-ms-scroll-limit-x-min")}}</li>
- <li>{{CSSxRef("-ms-scroll-limit-y-max")}}</li>
- <li>{{CSSxRef("-ms-scroll-limit-y-min")}}</li>
- <li>{{CSSxRef("-ms-scroll-rails")}}</li>
- <li>{{CSSxRef("-ms-scroll-snap-points-x")}}</li>
- <li>{{CSSxRef("-ms-scroll-snap-points-y")}}</li>
- <li>{{CSSxRef("-ms-scroll-snap-x")}}</li>
- <li>{{CSSxRef("-ms-scroll-snap-y")}}</li>
- <li>{{CSSxRef("-ms-scroll-translation")}}</li>
- <li>{{CSSxRef("-ms-text-autospace")}}</li>
- <li>{{CSSxRef("-ms-touch-select")}}</li>
- <li>{{CSSxRef("-ms-wrap-flow")}}</li>
- <li>{{CSSxRef("-ms-wrap-margin")}}</li>
- <li>{{CSSxRef("-ms-wrap-through")}}</li>
- <li>{{CSSxRef("zoom")}}</li>
-</ul>
+- {{CSSxRef("-ms-accelerator")}}
+- {{CSSxRef("-ms-block-progression")}}
+- {{CSSxRef("-ms-content-zoom-chaining")}}
+- {{CSSxRef("-ms-content-zooming")}}
+- {{CSSxRef("-ms-content-zoom-limit")}}
+- {{CSSxRef("-ms-content-zoom-limit-max")}}
+- {{CSSxRef("-ms-content-zoom-limit-min")}}
+- {{CSSxRef("-ms-content-zoom-snap")}}
+- {{CSSxRef("-ms-content-zoom-snap-points")}}
+- {{CSSxRef("-ms-content-zoom-snap-type")}}
+- {{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}
+- {{CSSxRef("-ms-flow-from")}}
+- {{CSSxRef("-ms-flow-into")}}
+- {{CSSxRef("-ms-high-contrast-adjust")}}
+- {{CSSxRef("-ms-hyphenate-limit-chars")}}
+- {{CSSxRef("-ms-hyphenate-limit-lines")}}
+- {{CSSxRef("-ms-hyphenate-limit-zone")}}
+- {{CSSxRef("-ms-ime-align")}}
+- {{CSSxRef("-ms-overflow-style")}}
+- {{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}
+- {{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}
+- {{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}
+- {{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}
+- {{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}
+- {{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}
+- {{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}
+- {{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}
+- {{CSSxRef("-ms-scroll-chaining")}}
+- {{CSSxRef("-ms-scroll-limit")}}
+- {{CSSxRef("-ms-scroll-limit-x-max")}}
+- {{CSSxRef("-ms-scroll-limit-x-min")}}
+- {{CSSxRef("-ms-scroll-limit-y-max")}}
+- {{CSSxRef("-ms-scroll-limit-y-min")}}
+- {{CSSxRef("-ms-scroll-rails")}}
+- {{CSSxRef("-ms-scroll-snap-points-x")}}
+- {{CSSxRef("-ms-scroll-snap-points-y")}}
+- {{CSSxRef("-ms-scroll-snap-x")}}
+- {{CSSxRef("-ms-scroll-snap-y")}}
+- {{CSSxRef("-ms-scroll-translation")}}
+- {{CSSxRef("-ms-text-autospace")}}
+- {{CSSxRef("-ms-touch-select")}}
+- {{CSSxRef("-ms-wrap-flow")}}
+- {{CSSxRef("-ms-wrap-margin")}}
+- {{CSSxRef("-ms-wrap-through")}}
+- {{CSSxRef("zoom")}}
 
-<h2 id="Pseudo-éléments">Pseudo-éléments</h2>
+## Pseudo-éléments
 
-<ul>
- <li>{{CSSxRef("::-ms-browse")}}</li>
- <li>{{CSSxRef("::-ms-check")}}</li>
- <li>{{CSSxRef("::-ms-clear")}}</li>
- <li>{{CSSxRef("::-ms-expand")}}</li>
- <li>{{CSSxRef("::-ms-fill")}}</li>
- <li>{{CSSxRef("::-ms-fill-lower")}}</li>
- <li>{{CSSxRef("::-ms-fill-upper")}}</li>
- <li>{{CSSxRef("::-ms-reveal")}}</li>
- <li>{{CSSxRef("::-ms-thumb")}}</li>
- <li>{{CSSxRef("::-ms-ticks-after")}}</li>
- <li>{{CSSxRef("::-ms-ticks-before")}}</li>
- <li>{{CSSxRef("::-ms-tooltip")}}</li>
- <li>{{CSSxRef("::-ms-track")}}</li>
- <li>{{CSSxRef("::-ms-value")}}</li>
-</ul>
+- {{CSSxRef("::-ms-browse")}}
+- {{CSSxRef("::-ms-check")}}
+- {{CSSxRef("::-ms-clear")}}
+- {{CSSxRef("::-ms-expand")}}
+- {{CSSxRef("::-ms-fill")}}
+- {{CSSxRef("::-ms-fill-lower")}}
+- {{CSSxRef("::-ms-fill-upper")}}
+- {{CSSxRef("::-ms-reveal")}}
+- {{CSSxRef("::-ms-thumb")}}
+- {{CSSxRef("::-ms-ticks-after")}}
+- {{CSSxRef("::-ms-ticks-before")}}
+- {{CSSxRef("::-ms-tooltip")}}
+- {{CSSxRef("::-ms-track")}}
+- {{CSSxRef("::-ms-value")}}
 
-<h2 id="Caractéristiques_média">Caractéristiques média</h2>
+## Caractéristiques média
 
-<ul>
- <li>{{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}</li>
-</ul>
+- {{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}
 
-<h2 id="API_DOM_relatives_à_CSS">API DOM relatives à CSS</h2>
+## API DOM relatives à CSS
 
-<ul>
- <li>{{DOMxRef("msContentZoomFactor")}}</li>
- <li>{{DOMxRef("msGetPropertyEnabled")}}</li>
- <li>{{DOMxRef("msGetRegionContent")}}</li>
- <li>{{DOMxRef("MSRangeCollection")}}</li>
- <li>{{DOMxRef("msRegionOverflow")}}</li>
-</ul>
+- {{DOMxRef("msContentZoomFactor")}}
+- {{DOMxRef("msGetPropertyEnabled")}}
+- {{DOMxRef("msGetRegionContent")}}
+- {{DOMxRef("MSRangeCollection")}}
+- {{DOMxRef("msRegionOverflow")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions de Mozilla à CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions de WebKit à CSS</a></li>
- <li><a href="/fr/docs/Web/API/Microsoft_API_extensions">Les extensions de Microsoft aux API</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Microsoft_JavaScript_extensions">Les extensions de Microsoft à JavaScript</a></li>
-</ul>
+- [Les extensions de Mozilla à CSS](/fr/docs/Web/CSS/Extensions_Mozilla)
+- [Les extensions de WebKit à CSS](/fr/docs/Web/CSS/Reference/Extensions_WebKit)
+- [Les extensions de Microsoft aux API](/fr/docs/Web/API/Microsoft_API_extensions)
+- [Les extensions de Microsoft à JavaScript](/fr/docs/Web/JavaScript/Microsoft_JavaScript_extensions)
diff --git a/files/fr/web/css/min()/index.md b/files/fr/web/css/min()/index.md
index ddcab65cd2..5060118985 100644
--- a/files/fr/web/css/min()/index.md
+++ b/files/fr/web/css/min()/index.md
@@ -7,63 +7,66 @@ tags:
   - Reference
 translation_of: Web/CSS/min()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <code><strong>min()</strong></code> permet d'obtenir la plus petite valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce minimum comme valeur d'une propriété CSS. La fonction <code>min()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est autorisée.</p>
+La fonction CSS **`min()`** permet d'obtenir la plus petite valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce minimum comme valeur d'une propriété CSS. La fonction `min()` peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est autorisée.
 
-<pre class="brush: css no-line-numbers">/* property: min(expression<code class="css plain"> [, expression]</code>) */
+```css
+/* property: min(expression [, expression]) */
 width: min(10vw, 4em, 80px);
-</pre>
+```
 
-<p>Dans l'exemple précédent, la largeur mesurera au plus 80 pixels de large, sera moins large si la zone d'affichage (<em>viewport</em>) est moins large que 800 pixels ou si un <code>em</code> vaut moins que 20 pixels de large. Autrement dit, la valeur fournie <code>min()</code> est calculée comme un seuil et généralement, on aura un seuil maximal dans une expression <code>min()</code> (ce qui peut paraître contradictoire à juste titre).</p>
+Dans l'exemple précédent, la largeur mesurera au plus 80 pixels de large, sera moins large si la zone d'affichage (_viewport_) est moins large que 800 pixels ou si un `em` vaut moins que 20 pixels de large. Autrement dit, la valeur fournie `min()` est calculée comme un seuil et généralement, on aura un seuil maximal dans une expression `min()` (ce qui peut paraître contradictoire à juste titre).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La fonction <code>min()</code> prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus petit résultat des évaluations des expressions passées en arguments.</p>
+La fonction `min()` prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus petit résultat des évaluations des expressions passées en arguments.
 
-<p>Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec {{CSSxRef("attr", "attr()")}}). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("&lt;length&gt;")}}).</p>
+Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec {{CSSxRef("attr", "attr()")}}). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("&lt;length&gt;")}}).
 
-<p>Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.</p>
+Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<ul>
- <li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
- <li>Il est possible d'imbriquer des fonctions <code>min()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
-</ul>
+- Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme `auto` si le tableau suit une disposition automatique ou fixée.
+- Il est possible d'imbriquer des fonctions `min()` et `min()` dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à `calc()`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Garantir_une_taille_maximale_pour_des_images">Garantir une taille maximale pour des images</h3>
+### Garantir une taille maximale pour des images
 
-<p><code>min()</code> permet de simplifier la définition d'une taille <strong>maximale</strong>, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les moins larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.</p>
+`min()` permet de simplifier la définition d'une taille **maximale**, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les moins larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.logo {
+```css
+.logo {
   width: min(50vw, 300px);
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"&gt;</pre>
+```html
+<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', '100%', '110')}}</p>
+{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', '100%', '110')}}
 
-<h3 id="Définir_une_taille_maximale_pour_un_champ_de_saisie_et_son_libellé">Définir une taille maximale pour un champ de saisie et son libellé</h3>
+### Définir une taille maximale pour un champ de saisie et son libellé
 
-<p>La fonction <code>min()</code> peut également être utilisée pour définir la taille maximale d'un contrôle dans un formulaire et permettre de réduire le champ et le libellé associé lorsque la largeur de l'écran diminue.</p>
+La fonction `min()` peut également être utilisée pour définir la taille maximale d'un contrôle dans un formulaire et permettre de réduire le champ et le libellé associé lorsque la largeur de l'écran diminue.
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">input, label {
+```css
+input, label {
   padding: 2px;
   box-sizing: border-box;
   display: inline-block;
@@ -76,63 +79,49 @@ form {
   border: 1px solid black;
   padding: 4px;
 }
-</pre>
+```
 
-<p>On a ici la règle qui s'applique au formulaire et qui occupe 100% de la largeur de son parent. On déclare avec <code>min()</code> que la largeur doit mesurer au plus 400 pixels ou 40% de la largeur du formulaire. Autrement dit, la taille la plus grande que pourra atteindre le champ et le libellé sera 400 pixels. La largeur la plus étroite sera nécessairement 40% (ce qui peut être tout petit sur l'affichage d'une montre par exemple).</p>
+On a ici la règle qui s'applique au formulaire et qui occupe 100% de la largeur de son parent. On déclare avec `min()` que la largeur doit mesurer au plus 400 pixels ou 40% de la largeur du formulaire. Autrement dit, la taille la plus grande que pourra atteindre le champ et le libellé sera 400 pixels. La largeur la plus étroite sera nécessairement 40% (ce qui peut être tout petit sur l'affichage d'une montre par exemple).
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label&gt;Saisir quelque chose :&lt;/label&gt;
-  &lt;input type="text"&gt;
-&lt;/form&gt;
-</pre>
+```html
+<form>
+  <label>Saisir quelque chose :</label>
+  <input type="text">
+</form>
+```
 
-<p>{{EmbedLiveSample("Définir_une_taille_maximale_pour_un_champ_de_saisie_et_son_libellé", '100%', '110')}}</p>
+{{EmbedLiveSample("Définir_une_taille_maximale_pour_un_champ_de_saisie_et_son_libellé", '100%', '110')}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Lorsqu'on utilise <code>min()</code> afin de contrôler la taille du texte, il faut s'assurer que le texte puisse toujours être suffisamment grand pour être lisible. Pour cela, on peut imbriquer l'appel à <code>min()</code> dans <code><a href="/fr/docs/Web/CSS/max">max()</a></code> utilisant <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a> en deuxième argument afin de garantir une lisibilité minimale :</p>
+Lorsqu'on utilise `min()` afin de contrôler la taille du texte, il faut s'assurer que le texte puisse toujours être suffisamment grand pour être lisible. Pour cela, on peut imbriquer l'appel à `min()` dans [`max()`](/fr/docs/Web/CSS/max) utilisant [une unité de longueur relative](/fr/docs/Web/CSS/length#Unités_de_longueur_relatives) en deuxième argument afin de garantir une lisibilité minimale :
 
-<pre class="brush: css">small {
+```css
+small {
   font-size: max(min(0.5vw, 0.5em), 1rem);
-}</pre>
-
-<p>On aura ainsi une taille minimale de <code>1rem</code> et la taille du texte qui se met à l'échelle si on zoome sur la page.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles 1.4 du WCAG</a> (MDN)</li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Comprendre le critère de réussite 1.4.4 du WCAG 2.0 (W3C)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#calc-notation', 'min()')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.min")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{CSSxRef("calc", "calc()")}}</li>
- <li>{{CSSxRef("clamp", "clamp()")}}</li>
- <li>{{CSSxRef("max", "max()")}}</li>
- <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs et unités en CSS</a></li>
-</ul>
+}
+```
+
+On aura ainsi une taille minimale de `1rem` et la taille du texte qui se met à l'échelle si on zoome sur la page.
+
+- [Comprendre les règles 1.4 du WCAG](/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) (MDN)
+- [Comprendre le critère de réussite 1.4.4 du WCAG 2.0 (W3C)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+
+## Spécifications
+
+| Spécification                                                            | État                             | Commentaires |
+| ------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('CSS4 Values', '#calc-notation', 'min()')}} | {{Spec2('CSS4 Values')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.min")}}
+
+## Voir aussi
+
+- {{CSSxRef("calc", "calc()")}}
+- {{CSSxRef("clamp", "clamp()")}}
+- {{CSSxRef("max", "max()")}}
+- [Valeurs et unités en CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units)
diff --git a/files/fr/web/css/min-block-size/index.md b/files/fr/web/css/min-block-size/index.md
index 81260b6760..3ce41af49e 100644
--- a/files/fr/web/css/min-block-size/index.md
+++ b/files/fr/web/css/min-block-size/index.md
@@ -8,24 +8,25 @@ tags:
   - Reference
 translation_of: Web/CSS/min-block-size
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>min-block-size</code></strong> définit la taille minimale horizontale ou verticale d'un élément de bloc (<em>block</em>) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété {{cssxref("min-width")}} ou {{cssxref("min-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}.</p>
+La propriété **`min-block-size`** définit la taille minimale horizontale ou verticale d'un élément de bloc (_block_) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété {{cssxref("min-width")}} ou {{cssxref("min-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/min-block-size.html")}}</div>
+{{EmbedInteractiveExample("pages/css/min-block-size.html")}}
 
-<p>Si le mode d'écriture est orienté verticalement, <code>min-block-size</code> fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne.</p>
+Si le mode d'écriture est orienté verticalement, `min-block-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 min-block-size: 100px;
 min-block-size: 5em;
 
 /* Valeurs proportionnelles à la */
 /* largeur du bloc englobant     */
-/* Type &lt;percentage&gt;             */
+/* Type <percentage>             */
 min-block-size: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -38,69 +39,56 @@ min-block-size: fill-available;
 min-block-size: inherit;
 min-block-size: initial;
 min-block-size: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>min-block-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p>
+La propriété `min-block-size` peut prendre les mêmes valeurs que les propriétés {{cssxref("min-width")}} ou {{cssxref("min-height")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   writing-mode: vertical-rl;
   background-color: yellow;
   block-size: 5%;
   min-block-size: 200px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-</pre>
+```html
+<p class="exemple">Texte d'exemple</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                                           | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.min-block-size")}}</p>
+{{Compat("css.properties.min-block-size")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques correspondantes
-  <ul>
-   <li>{{cssxref("min-width")}}</li>
-   <li>{{cssxref("min-height")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}</li>
-</ul>
+- Les propriétés physiques correspondantes
+
+  - {{cssxref("min-width")}}
+  - {{cssxref("min-height")}}
+
+- {{cssxref("writing-mode")}}
diff --git a/files/fr/web/css/min-height/index.md b/files/fr/web/css/min-height/index.md
index 8e1229db64..8a18f9726b 100644
--- a/files/fr/web/css/min-height/index.md
+++ b/files/fr/web/css/min-height/index.md
@@ -7,22 +7,23 @@ tags:
   - Reference
 translation_of: Web/CSS/min-height
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>min-height</code></strong> est utilisée afin de définir la hauteur minimale d'un élément. Elle empêche ainsi que la valeur de la propriété {{cssxref("height")}} devienne inférieure à <code>min-height</code>.</p>
+La propriété** `min-height`** est utilisée afin de définir la hauteur minimale d'un élément. Elle empêche ainsi que la valeur de la propriété {{cssxref("height")}} devienne inférieure à `min-height`.
 
-<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div>
+{{EmbedInteractiveExample("pages/css/min-height.html")}}
 
-<p>La valeur de la propriété <code>min-height</code> surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque <code>min-height</code> est supérieure.</p>
+La valeur de la propriété `min-height` surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque `min-height` est supérieure.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt;      */
+```css
+/* Valeur de longueur */
+/* Type <length>      */
 min-height: 3.5em;
 
 /* Valeur relative au bloc */
-/* Type &lt;percentage&gt;       */
+/* Type <percentage>       */
 min-height: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -35,41 +36,42 @@ min-height: fill-available;
 min-height: inherit;
 min-height: initial;
 min-height: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>La hauteur minimale exprimée de façon absolue. Voir la page {{cssxref("&lt;length&gt;")}} pour les différentes unités. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>La hauteur minimale exprimée de façon relative à la hauteur du bloc englobant grâce à une valeur de type {{cssxref("&lt;percentage&gt;")}}. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.</dd>
- <dt><code>max-content</code> {{experimental_inline}}</dt>
- <dd>La hauteur intrinsèque préférée.</dd>
- <dt><code>min-content</code> {{experimental_inline}}</dt>
- <dd>La hauteur intrinsèque minimale préférée.</dd>
- <dt><code>fill-available</code>{{experimental_inline}}</dt>
- <dd>La hauteur du bloc englobant moins celle de la marge verticale, de la bordure et du remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un mot-clé d'une ancienne version : <code>available</code>.</dd>
- <dt><code>fit-content</code> {{experimental_inline}}</dt>
- <dd>Selon la spécification CSS3 sur les boîtes (CSS3 Box), cette valeur est synonyme de <code>min-content.</code> La spécification CSS3 sur le dimensionnement (CSS3 Sizing) définit un algorithme plus complexe mais qui n'est implémenté par aucun navigateur, y compris de façon expérimentale.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+  - : La hauteur minimale exprimée de façon absolue. Voir la page {{cssxref("&lt;length&gt;")}} pour les différentes unités. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.
+- `<percentage>`
+  - : La hauteur minimale exprimée de façon relative à la hauteur du bloc englobant grâce à une valeur de type {{cssxref("&lt;percentage&gt;")}}. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.
+- `max-content` {{experimental_inline}}
+  - : La hauteur intrinsèque préférée.
+- `min-content` {{experimental_inline}}
+  - : La hauteur intrinsèque minimale préférée.
+- `fill-available`{{experimental_inline}}
+  - : La hauteur du bloc englobant moins celle de la marge verticale, de la bordure et du remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un mot-clé d'une ancienne version : `available`.
+- `fit-content` {{experimental_inline}}
+  - : Selon la spécification CSS3 sur les boîtes (CSS3 Box), cette valeur est synonyme de `min-content.` La spécification CSS3 sur le dimensionnement (CSS3 Sizing) définit un algorithme plus complexe mais qui n'est implémenté par aucun navigateur, y compris de façon expérimentale.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala
-&lt;p class="exemple"&gt;toto&lt;/p&gt;
+```html
+<div> Lorem ipsum tralala
+<p class="exemple">toto</p>
  Duis aute irure dolor in reprehender
-&lt;/div&gt;</pre>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   height: 150px;
   border: solid 1px red;
 }
@@ -78,61 +80,73 @@ min-height: unset;
   min-height: 70%;
   border: solid 1px blue;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#min-auto', 'min-height')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>
-    <p>Ajout du mot-clé <code>auto</code> et définition de ce mot-clé comme valeur initiale.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'min-height')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>min-height</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}
+      </td>
+      <td>{{Spec2('CSS3 Sizing')}}</td>
+      <td>
+        Ajout des mots-clés <code>max-content</code>, <code>min-content</code>,
+        <code>fit-content</code> et <code>fill-available</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('CSS3 Flexbox', '#min-auto', 'min-height')}}
+      </td>
+      <td>{{Spec2('CSS3 Flexbox')}}</td>
+      <td>
+        <p>
+          Ajout du mot-clé <code>auto</code> et définition de ce mot-clé comme
+          valeur initiale.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('CSS3 Transitions', '#animatable-css', 'min-height')}}
+      </td>
+      <td>{{Spec2('CSS3 Transitions')}}</td>
+      <td><code>min-height</code> peut désormais être animée.</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}
+      </td>
+      <td>{{Spec2('CSS2.1')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.min-height")}}</p>
+{{Compat("css.properties.min-height")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("width")}}</li>
- <li>{{cssxref("height")}}</li>
- <li>{{cssxref("max-height")}}</li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîtes</a></li>
- <li>{{cssxref("min-width")}}</li>
- <li>{{cssxref("box-sizing")}}</li>
- <li>{{cssxref("height")}}</li>
- <li>{{cssxref("max-height")}}</li>
-</ul>
+- {{cssxref("width")}}
+- {{cssxref("height")}}
+- {{cssxref("max-height")}}
+- [Le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+- {{cssxref("min-width")}}
+- {{cssxref("box-sizing")}}
+- {{cssxref("height")}}
+- {{cssxref("max-height")}}
diff --git a/files/fr/web/css/min-inline-size/index.md b/files/fr/web/css/min-inline-size/index.md
index 45112c237f..3b7bc6590d 100644
--- a/files/fr/web/css/min-inline-size/index.md
+++ b/files/fr/web/css/min-inline-size/index.md
@@ -9,24 +9,25 @@ tags:
   - Reference
 translation_of: Web/CSS/min-inline-size
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>min-inline-size</code></strong> définit la taille minimale horizontale ou verticale d'un élément en ligne (<em>inline</em>) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété {{cssxref("min-width")}} ou {{cssxref("min-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}.</p>
+La propriété **`min-inline-size`** définit la taille minimale horizontale ou verticale d'un élément en ligne (_inline_) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété {{cssxref("min-width")}} ou {{cssxref("min-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}</div>
+{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}
 
-<p>Si le mode d'écriture est orienté verticalement, <code>min-inline-size</code> fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs.</p>
+Si le mode d'écriture est orienté verticalement, `min-inline-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 min-inline-size: 100px;
 min-inline-size: 5em;
 
 /* Valeurs proportionnelles à la */
 /* largeur du bloc englobant     */
-/* Type &lt;percentage&gt;             */
+/* Type <percentage>             */
 min-inline-size: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -39,69 +40,56 @@ min-inline-size: fill-available;
 min-inline-size: inherit;
 min-inline-size: initial;
 min-inline-size: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>min-inline-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p>
+La propriété `min-inline-size` peut prendre les mêmes valeurs que les propriétés {{cssxref("min-width")}} ou {{cssxref("min-height")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   writing-mode: vertical-rl;
   background-color: yellow;
   block-size: 5%;
   min-inline-size: 200px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-</pre>
+```html
+<p class="exemple">Texte d'exemple</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                                           | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.min-inline-size")}}</p>
+{{Compat("css.properties.min-inline-size")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés physiques correspondantes
-  <ul>
-   <li>{{cssxref("min-width")}}</li>
-   <li>{{cssxref("min-height")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}}</li>
-</ul>
+- Les propriétés physiques correspondantes
+
+  - {{cssxref("min-width")}}
+  - {{cssxref("min-height")}}
+
+- {{cssxref("writing-mode")}}
diff --git a/files/fr/web/css/min-width/index.md b/files/fr/web/css/min-width/index.md
index 8421821e5e..b2b29ec525 100644
--- a/files/fr/web/css/min-width/index.md
+++ b/files/fr/web/css/min-width/index.md
@@ -7,22 +7,23 @@ tags:
   - Reference
 translation_of: Web/CSS/min-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>min-width</code></strong> est utilisée pour définir la largeur minimale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir inférieure à la valeur spécifiée par <code>min-width</code> (autrement dit, <code>min-width</code> est une borne inférieure pour <code>width</code>).</p>
+La propriété **`min-width`** est utilisée pour définir la largeur minimale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir inférieure à la valeur spécifiée par `min-width` (autrement dit, `min-width` est une borne inférieure pour `width`).
 
-<div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/min-width.html")}}
 
-<p>La valeur de <code>min-width</code> surcharge les valeurs de {{cssxref("max-width")}} et de {{cssxref("width")}} si elle est supérieure à l'une de ces propriétés.</p>
+La valeur de `min-width` surcharge les valeurs de {{cssxref("max-width")}} et de {{cssxref("width")}} si elle est supérieure à l'une de ces propriétés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt;      */
+```css
+/* Valeur de longueur */
+/* Type <length>      */
 min-width: 3.5em;
 
 /* Valeurs relatives */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 min-width: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -35,45 +36,46 @@ min-width: fill-available;
 min-width: inherit;
 min-width: initial;
 min-width: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>La largeur minimale. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>La largeur minimale, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.</dd>
- <dt><code>auto</code></dt>
- <dd>Définit une taille automatique minimale. Sauf si elle est définie par la disposition courante, la résolution de cette valeur sera 0. A des fins de rétro-compatibilité, la valeur résolue de ce mot-clé sera 0 pour l'ensemble des disposition CSS2 : bloc, en ligne, bloc-en ligne, disposition en tableau..</dd>
- <dt><code>max-content</code> {{experimental_inline}}</dt>
- <dd>La largeur intrinsèque préférée.</dd>
- <dt><code>min-content</code> {{experimental_inline}}</dt>
- <dd>La largeur intrinsèque minimale.</dd>
- <dt><code>fill-available</code>{{experimental_inline}}</dt>
- <dd>La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
- <dt><code>fit-content</code> {{experimental_inline}}</dt>
- <dd>La largeur calculée par <code>min(max-content, max(min-content, fill-available))</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+  - : La largeur minimale. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.
+- `<percentage>`
+  - : La largeur minimale, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.
+- `auto`
+  - : Définit une taille automatique minimale. Sauf si elle est définie par la disposition courante, la résolution de cette valeur sera 0. A des fins de rétro-compatibilité, la valeur résolue de ce mot-clé sera 0 pour l'ensemble des disposition CSS2 : bloc, en ligne, bloc-en ligne, disposition en tableau..
+- `max-content` {{experimental_inline}}
+  - : La largeur intrinsèque préférée.
+- `min-content` {{experimental_inline}}
+  - : La largeur intrinsèque minimale.
+- `fill-available`{{experimental_inline}}
+  - : La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un ancien nom : `available`.
+- `fit-content` {{experimental_inline}}
+  - : La largeur calculée par `min(max-content, max(min-content, fill-available))`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala sit amet, consectetur adipisicing
-  &lt;p&gt;
+```html
+<div> Lorem ipsum tralala sit amet, consectetur adipisicing
+  <p>
      Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  &lt;/p&gt;
-&lt;/div&gt;</pre>
+  </p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 250px;
   border: solid 1px red;
 }
@@ -81,58 +83,32 @@ min-width: unset;
 p {
   max-width: 60%;
   border: solid 1px blue;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Ajout du mot-clé <code>auto</code> qui est utilisé comme valeur initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'min-width')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>min-width</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.min-width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("width")}}</li>
- <li>{{cssxref("max-width")}}</li>
- <li>{{cssxref("min-height")}}</li>
- <li>{{cssxref("box-sizing")}}</li>
- <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                                                         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------ |
+| {{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}} | {{Spec2('CSS3 Sizing')}}         | Ajout des mots-clés `max-content`, `min-content`, `fit-content` et `fill-available`. |
+| {{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}         | {{Spec2('CSS3 Flexbox')}}         | Ajout du mot-clé `auto` qui est utilisé comme valeur initiale.                       |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'min-width')}}     | {{Spec2('CSS3 Transitions')}} | `min-width` peut désormais être animée.                                              |
+| {{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                                 |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.min-width")}}
+
+## Voir aussi
+
+- {{cssxref("width")}}
+- {{cssxref("max-width")}}
+- {{cssxref("min-height")}}
+- {{cssxref("box-sizing")}}
+- [Le modèle de boîtes](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte "en/CSS/box_model")
diff --git a/files/fr/web/css/minmax()/index.md b/files/fr/web/css/minmax()/index.md
index 5ca7fb623d..2ce690ff14 100644
--- a/files/fr/web/css/minmax()/index.md
+++ b/files/fr/web/css/minmax()/index.md
@@ -11,15 +11,16 @@ tags:
   - Web
 translation_of: Web/CSS/minmax()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/CSS_Functions">fonction CSS</a> <strong><code>minmax()</code></strong> définit un intervalle de taille supérieure ou égale à <var>min</var> et inférieure ou égale à <var>max</var>. Elle est utilisée avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>.</p>
+La [fonction CSS](/fr/docs/Web/CSS/CSS_Functions) **`minmax()`** définit un intervalle de taille supérieure ou égale à _min_ et inférieure ou égale à _max_. Elle est utilisée avec [les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout).
 
-<div>{{EmbedInteractiveExample("pages/css/function-minmax.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-minmax.html")}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs de type &lt;inflexible-breadth&gt;, &lt;track-breadth&gt;*/
+```css
+/* Valeurs de type <inflexible-breadth>, <track-breadth>*/
 minmax(200px, 1fr)
 minmax(400px, 50%)
 minmax(30%, 300px)
@@ -29,7 +30,7 @@ minmax(max-content, auto)
 minmax(auto, 300px)
 minmax(min-content, auto)
 
-/* Valeurs de type &lt;fixed-breadth&gt;, &lt;track-breadth&gt; */
+/* Valeurs de type <fixed-breadth>, <track-breadth> */
 minmax(200px, 1fr)
 minmax(30%, 300px)
 minmax(400px, 50%)
@@ -37,57 +38,54 @@ minmax(50%, min-content)
 minmax(300px, max-content)
 minmax(200px, auto)
 
-/* Valeurs de type &lt;inflexible-breadth&gt;, &lt;fixed-breadth&gt; */
+/* Valeurs de type <inflexible-breadth>, <fixed-breadth> */
 minmax(400px, 50%)
 minmax(30%, 300px)
 minmax(min-content, 200px)
 minmax(max-content, 200px)
 minmax(auto, 300px)
-</pre>
+```
 
-<p><code>minmax()</code> est une fonction qui prend deux paramètres, <em>min</em> et <em>max</em>.</p>
+`minmax()` est une fonction qui prend deux paramètres, _min_ et _max_.
 
-<p>Chaque paramètre peut être une longueur (type <code>&lt;length&gt;</code>), un pourcentage (type <code>&lt;percentage&gt;</code>), une valeur de type <code>&lt;flex&gt;</code> ou l'un des mots-clés <code>max-content</code>, <code>min-content</code>, ou <code>auto</code>.</p>
+Chaque paramètre peut être une longueur (type `<length>`), un pourcentage (type `<percentage>`), une valeur de type `<flex>` ou l'un des mots-clés `max-content`, `min-content`, ou `auto`.
 
-<p>Si <var>max</var> est supérieur à <var>min</var>, alors <var>max</var> sera ignoré et <code>minmax(min,max)</code> sera considéré comme <var>min</var>. Utilisée comme valeur maximale, une valeur de type {{cssxref("flex_value","&lt;flex&gt;")}} définit le facteur de flexibilité de la piste de la grille ; une telle valeur ne peut pas être utilisée comme minimum.</p>
+Si _max_ est supérieur à _min_, alors _max_ sera ignoré et `minmax(min,max)` sera considéré comme _min_. Utilisée comme valeur maximale, une valeur de type {{cssxref("flex_value","&lt;flex&gt;")}} définit le facteur de flexibilité de la piste de la grille ; une telle valeur ne peut pas être utilisée comme minimum.
 
-<h3 id="Values">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>Une longueur non-négative.</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>Un pourcentage non-négatif. Cette valeur est relative à la taille en incise (<i>inline</i>) du conteneur de grille pour les pistes en colonnes et relative à la taille en bloc du conteneur de grille pour les pistes en lignes. Si la taille du conteneur de grille dépend de la taille de ses pistes, cette valeur <code>&lt;percentage&gt;</code> sera traitée comme <code>auto</code>. L'agent utilisateur pourra ajuster les contributions à la piste de taille intrinsèques selon la taille du conteneur de grille et augmenter la taille finale de la piste d'une quantité minimale pour respecter le pourcentage.</dd>
- <dt>{{cssxref("&lt;flex&gt;")}}</dt>
- <dd>Une valeur non-négative avec l'unité <code>fr</code> qui indique le facteur de flexibilité/extensibilité de la piste. Chaque piste dimensionnée avec une valeur de type <code>&lt;flex&gt;</code> occupera une part de l'espace restant proportionnellement à son coefficient de flexibilité.</dd>
- <dt><code>max-content</code></dt>
- <dd>Représente la plus grande contribution max-content pour les objets de la grille qui occupent la piste.</dd>
- <dt><code>min-content</code></dt>
- <dd>Représente la plus grande contribution min-content pour les objets de la grille qui occupent la piste.</dd>
- <dt><code>auto</code></dt>
- <dd>Utilisée comme maximum, cette valeur agira comme <code>max-content</code>. Utilisée comme minimum, elle représentera la plus grande des tailles minimales (définies par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste.</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : Une longueur non-négative.
+- {{cssxref("&lt;percentage&gt;")}}
+  - : Un pourcentage non-négatif. Cette valeur est relative à la taille en incise (_inline_) du conteneur de grille pour les pistes en colonnes et relative à la taille en bloc du conteneur de grille pour les pistes en lignes. Si la taille du conteneur de grille dépend de la taille de ses pistes, cette valeur `<percentage>` sera traitée comme `auto`. L'agent utilisateur pourra ajuster les contributions à la piste de taille intrinsèques selon la taille du conteneur de grille et augmenter la taille finale de la piste d'une quantité minimale pour respecter le pourcentage.
+- {{cssxref("&lt;flex&gt;")}}
+  - : Une valeur non-négative avec l'unité `fr` qui indique le facteur de flexibilité/extensibilité de la piste. Chaque piste dimensionnée avec une valeur de type `<flex>` occupera une part de l'espace restant proportionnellement à son coefficient de flexibilité.
+- `max-content`
+  - : Représente la plus grande contribution max-content pour les objets de la grille qui occupent la piste.
+- `min-content`
+  - : Représente la plus grande contribution min-content pour les objets de la grille qui occupent la piste.
+- `auto`
+  - : Utilisée comme maximum, cette valeur agira comme `max-content`. Utilisée comme minimum, elle représentera la plus grande des tailles minimales (définies par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste.
 
-<h3 id="Formal_syntax">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h3 id="CSS_properties">Propriétés CSS associées</h3>
+### Propriétés CSS associées
 
-<p><code>minmax()</code> peut être utilisée pour les propriétés suivantes :</p>
+`minmax()` peut être utilisée pour les propriétés suivantes :
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
- <li><a href="/fr/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
- <li><a href="/fr/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
- <li><a href="/fr/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
-</ul>
+- [grid-template-columns](/fr/docs/Web/CSS/grid-template-columns)
+- [grid-template-rows](/fr/docs/Web/CSS/grid-template-rows)
+- [grid-auto-columns](/fr/docs/Web/CSS/grid-auto-columns)
+- [grid-auto-rows](/fr/docs/Web/CSS/grid-auto-rows)
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   display: grid;
   grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
   grid-gap: 5px;
@@ -98,58 +96,44 @@ minmax(auto, 300px)
   padding: 10px;
 }
 
-#container &gt; div {
+#container > div {
   background-color: #8ca0ff;
   padding: 5px;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;
+```html
+<div id="container">
+  <div>
     Aussi large que le contenu, large d'au plus 300 pixels.
-  &lt;/div&gt;
-  &lt;div&gt;
+  </div>
+  <div>
     Item flexible mais dont la largeur vaut au moins 200 pixels.
-  &lt;/div&gt;
-  &lt;div&gt;
+  </div>
+  <div>
     Item avec une largeur de 150 pixels.
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Result">Résultat</h3>
-
-<p>{{EmbedLiveSample("Examples", "100%", 200)}}</p>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
-   <td>{{Spec2("CSS Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>Guide sur les grilles CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#track_sizing_and_minmax()">Concepts de bases pour le dimensionnement des pistes avec minmax()</a></em></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Valeurs logiques, modes d'écriture et grilles CSS</a></li>
- <li>Tutoriel vidéo (en anglais) : <a href="http://gridbyexample.com/video/series-minmax/">Introduction à minmax()</a>
- </li>
-</ul>
+  </div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Examples", "100%", 200)}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}} | {{Spec2("CSS Grid")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-template-columns.minmax")}}
+
+## Voir aussi
+
+- Guide sur les grilles CSS : _[Concepts de bases pour le dimensionnement des pistes avec minmax()](</fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#track_sizing_and_minmax()>)_
+- [Valeurs logiques, modes d'écriture et grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
+- Tutoriel vidéo (en anglais) : [Introduction à minmax()](http://gridbyexample.com/video/series-minmax/)
diff --git a/files/fr/web/css/mix-blend-mode/index.md b/files/fr/web/css/mix-blend-mode/index.md
index 33029b3111..f2971d234b 100644
--- a/files/fr/web/css/mix-blend-mode/index.md
+++ b/files/fr/web/css/mix-blend-mode/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/mix-blend-mode
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>mix-blend-mode</code></strong> définit la façon dont le contenu d'un élément doit se mélanger avec le contenu de l'élément parent et avec son arrière-plan.</p>
+La propriété **`mix-blend-mode`** définit la façon dont le contenu d'un élément doit se mélanger avec le contenu de l'élément parent et avec son arrière-plan.
 
-<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div>
+{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;blend-mode&gt; */
+```css
+/* Valeurs de type <blend-mode> */
 mix-blend-mode: normal;
 mix-blend-mode: multiply;
 mix-blend-mode: screen;
@@ -37,432 +38,433 @@ mix-blend-mode: luminosity;
 mix-blend-mode: initial;
 mix-blend-mode: inherit;
 mix-blend-mode: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;blend-mode&gt;</code></dt>
- <dd>Indique comment la fusion des modes doit intervenir (cf. {{cssxref("&lt;blend-mode&gt;")}}).</dd>
-</dl>
+- `<blend-mode>`
+  - : Indique comment la fusion des modes doit intervenir (cf. {{cssxref("&lt;blend-mode&gt;")}}).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="exemples">Exemples</h2>
-
-<pre class="brush: html hidden">&lt;div class="grid"&gt;
-  &lt;div class="col"&gt;
-    &lt;div class="note"&gt;Blending in isolation (no blending with the background)&lt;/div&gt;
-    &lt;div class="row isolate"&gt;
-      &lt;div class="cell"&gt; normal
-        &lt;div class="container normal"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;defs&gt;
-                &lt;linearGradient id="red"&gt;
-                  &lt;stop offset="0"    stop-color="hsl(0,100%,50%)" /&gt;
-                  &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
-                &lt;/linearGradient&gt;
-                &lt;linearGradient id="green"&gt;
-                  &lt;stop offset="0"    stop-color="hsl(120,100%,50%)" /&gt;
-                  &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
-                &lt;/linearGradient&gt;
-                &lt;linearGradient id="blue"&gt;
-                  &lt;stop offset="0"    stop-color="hsl(240,100%,50%)" /&gt;
-                  &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
-                &lt;/linearGradient&gt;
-              &lt;/defs&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; multiply
-        &lt;div class="container multiply"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; darken
-        &lt;div class="container darken"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; screen
-        &lt;div class="container screen"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; lighten
-        &lt;div class="container lighten"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; overlay
-        &lt;div class="container overlay"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color-dodge
-        &lt;div class="container color-dodge"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color-burn
-        &lt;div class="container color-burn"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; hard-light
-        &lt;div class="container hard-light"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; soft-light
-        &lt;div class="container soft-light"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; difference
-        &lt;div class="container difference"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; exclusion
-        &lt;div class="container exclusion"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; hue
-        &lt;div class="container hue"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; saturation
-        &lt;div class="container saturation"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color
-        &lt;div class="container color"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; luminosity
-        &lt;div class="container luminosity"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div class="note"&gt;Blending globally (blend with the background)&lt;/div&gt;
-    &lt;div class="row"&gt;
-      &lt;div class="cell"&gt; normal
-        &lt;div class="container normal"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; multiply
-        &lt;div class="container multiply"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; darken
-        &lt;div class="container darken"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; screen
-        &lt;div class="container screen"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; lighten
-        &lt;div class="container lighten"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; overlay
-        &lt;div class="container overlay"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color-dodge
-        &lt;div class="container color-dodge"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color-burn
-        &lt;div class="container color-burn"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; hard-light
-        &lt;div class="container hard-light"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; soft-light
-        &lt;div class="container soft-light"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; difference
-        &lt;div class="container difference"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; exclusion
-        &lt;div class="container exclusion"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; hue
-        &lt;div class="container hue"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; saturation
-        &lt;div class="container saturation"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; color
-        &lt;div class="container color"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-      &lt;div class="cell"&gt; luminosity
-        &lt;div class="container luminosity"&gt;
-          &lt;div class="group"&gt;
-            &lt;div class="item firefox"&gt;&lt;/div&gt;
-            &lt;svg viewBox="0 0 150 150"&gt;
-              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
-            &lt;/svg&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: css hidden">html,body {
+## Exemples
+
+```html hidden
+<div class="grid">
+  <div class="col">
+    <div class="note">Blending in isolation (no blending with the background)</div>
+    <div class="row isolate">
+      <div class="cell"> normal
+        <div class="container normal">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <defs>
+                <linearGradient id="red">
+                  <stop offset="0"    stop-color="hsl(0,100%,50%)" />
+                  <stop offset="100%" stop-color="hsl(0,0%,100%)" />
+                </linearGradient>
+                <linearGradient id="green">
+                  <stop offset="0"    stop-color="hsl(120,100%,50%)" />
+                  <stop offset="100%" stop-color="hsl(120,0%,100%)" />
+                </linearGradient>
+                <linearGradient id="blue">
+                  <stop offset="0"    stop-color="hsl(240,100%,50%)" />
+                  <stop offset="100%" stop-color="hsl(240,0%,100%)" />
+                </linearGradient>
+              </defs>
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> multiply
+        <div class="container multiply">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> darken
+        <div class="container darken">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> screen
+        <div class="container screen">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> lighten
+        <div class="container lighten">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> overlay
+        <div class="container overlay">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color-dodge
+        <div class="container color-dodge">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color-burn
+        <div class="container color-burn">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> hard-light
+        <div class="container hard-light">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> soft-light
+        <div class="container soft-light">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> difference
+        <div class="container difference">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> exclusion
+        <div class="container exclusion">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> hue
+        <div class="container hue">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> saturation
+        <div class="container saturation">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color
+        <div class="container color">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> luminosity
+        <div class="container luminosity">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="note">Blending globally (blend with the background)</div>
+    <div class="row">
+      <div class="cell"> normal
+        <div class="container normal">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> multiply
+        <div class="container multiply">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> darken
+        <div class="container darken">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> screen
+        <div class="container screen">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> lighten
+        <div class="container lighten">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> overlay
+        <div class="container overlay">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color-dodge
+        <div class="container color-dodge">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color-burn
+        <div class="container color-burn">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> hard-light
+        <div class="container hard-light">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> soft-light
+        <div class="container soft-light">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> difference
+        <div class="container difference">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> exclusion
+        <div class="container exclusion">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> hue
+        <div class="container hue">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> saturation
+        <div class="container saturation">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> color
+        <div class="container color">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="cell"> luminosity
+        <div class="container luminosity">
+          <div class="group">
+            <div class="item firefox"></div>
+            <svg viewBox="0 0 150 150">
+              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
+              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```css hidden
+html,body {
   height: 100%;
   box-sizing: border-box;
   background: #EEE;
@@ -554,43 +556,51 @@ mix-blend-mode: unset;
 .hue .item         { mix-blend-mode: hue; }
 .saturation .item  { mix-blend-mode: saturation; }
 .color .item       { mix-blend-mode: color; }
-.luminosity .item  { mix-blend-mode: luminosity; }</pre>
+.luminosity .item  { mix-blend-mode: luminosity; }
+```
 
-<div>{{EmbedLiveSample("exemples", "100%", 1600, "", "", "example-outcome-frame")}}</div>
+{{EmbedLiveSample("exemples", "100%", 1600, "", "", "example-outcome-frame")}}
 
-<h3 id="Exemple_avec_SVG">Exemple avec SVG</h3>
+### Exemple avec SVG
 
-<h4 id="SVG">SVG</h4>
+#### SVG
 
-<pre class="brush: html">&lt;svg&gt;
-  &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
-  &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
-  &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
-&lt;/svg&gt;</pre>
+```html
+<svg>
+  <circle cx="40" cy="40" r="40" fill="red"/>
+  <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+  <circle cx="60" cy="80" r="40" fill="blue"/>
+</svg>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush:css">circle {
+```css
+circle {
   mix-blend-mode: screen;
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_avec_SVG", "100%", "180")}}</p>
+{{EmbedLiveSample("Exemple_avec_SVG", "100%", "180")}}
 
-<h3 id="Exemple_avec_HTML">Exemple avec HTML</h3>
+### Exemple avec HTML
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="isolate"&gt;
-  &lt;div class="circle circle-1"&gt;&lt;/div&gt;
-  &lt;div class="circle circle-2"&gt;&lt;/div&gt;
-  &lt;div class="circle circle-3"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="isolate">
+  <div class="circle circle-1"></div>
+  <div class="circle circle-2"></div>
+  <div class="circle circle-3"></div>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.circle {
+```css
+.circle {
   width: 80px;
   height: 80px;
   border-radius: 50%;
@@ -616,40 +626,26 @@ mix-blend-mode: unset;
 .isolate {
   isolation: isolate; /* Without isolation, the background color will be taken into account */
   position: relative;
-}</pre>
+}
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_avec_HTML", "100%", "180")}}</p>
+{{EmbedLiveSample("Exemple_avec_HTML", "100%", "180")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode')}}</td>
-   <td>{{Spec2('Compositing')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode')}} | {{Spec2('Compositing')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.mix-blend-mode")}}</p>
+{{Compat("css.properties.mix-blend-mode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
- <li>{{cssxref("background-blend-mode")}}</li>
-</ul>
+- {{cssxref("&lt;blend-mode&gt;")}}
+- {{cssxref("background-blend-mode")}}
diff --git a/files/fr/web/css/mozilla_extensions/index.md b/files/fr/web/css/mozilla_extensions/index.md
index e4552cad87..011c9caf99 100644
--- a/files/fr/web/css/mozilla_extensions/index.md
+++ b/files/fr/web/css/mozilla_extensions/index.md
@@ -9,623 +9,525 @@ tags:
 translation_of: Web/CSS/Mozilla_Extensions
 original_slug: Web/CSS/Extensions_Mozilla
 ---
-<div>{{CSSRef}}</div>
-
-<p>Les applications Mozilla, telles que Firefox, prennent en charge un certain nombre d'extensions spécifiques à <a href="/fr/docs/Web/CSS">CSS</a> : des propriétés, des valeurs, des pseudo-éléments, des pseudo-classes, des règles @ et des requêtes média. Ces extensions utilisent le préfixe <code>-moz</code>.</p>
-
-<h2 id="Propriétés_et_pseudo-classes_spécifiques_à_Mozilla_(ne_pas_utiliser_sur_le_Web)">Propriétés et pseudo-classes spécifiques à Mozilla (ne pas utiliser sur le Web)</h2>
-
-<div class="note">
-<p><strong>Note :</strong> Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a>.</p>
-</div>
-
-<h3 id="B">B</h3>
-
-<ul>
- <li>{{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}</li>
- <li>{{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("box-align")}}</li>
- <li>{{CSSxRef("box-direction")}}</li>
- <li>{{CSSxRef("box-flex")}}</li>
- <li>{{CSSxRef("-moz-box-ordinal-group")}}</li>
- <li>{{CSSxRef("box-orient")}}</li>
- <li>{{CSSxRef("box-pack")}}</li>
-</ul>
-
-<h3 id="C_–_I">C – I</h3>
-
-<ul>
- <li>{{CSSxRef("-moz-context-properties")}}</li>
- <li>{{CSSxRef("-moz-float-edge")}}</li>
- <li>{{CSSxRef("-moz-force-broken-image-icon")}}</li>
- <li>{{CSSxRef("-moz-image-region")}}</li>
-</ul>
-
-<h3 id="O">O</h3>
-
-<ul>
- <li>{{CSSxRef("-moz-orient")}}</li>
- <li>{{CSSxRef("-moz-osx-font-smoothing")}}</li>
- <li>{{CSSxRef("-moz-outline-radius")}}</li>
- <li>{{CSSxRef("-moz-outline-radius-bottomleft")}}</li>
- <li>{{CSSxRef("-moz-outline-radius-bottomright")}}</li>
- <li>{{CSSxRef("-moz-outline-radius-topleft")}}</li>
- <li>{{CSSxRef("-moz-outline-radius-topright")}}</li>
- <li>{{CSSxRef("overflow-clip-box")}}</li>
- <li>{{CSSxRef("overflow-clip-box-block")}}</li>
- <li>{{CSSxRef("overflow-clip-box-inline")}}</li>
-</ul>
-
-<h3 id="S_–_Z">S – Z</h3>
-
-<ul>
- <li>{{CSSxRef("-moz-stack-sizing")}}</li>
- <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}</li>
- <li>{{CSSxRef("-moz-user-focus")}}</li>
- <li>{{CSSxRef("-moz-user-input")}}</li>
- <li>{{CSSxRef("user-modify")}}</li>
- <li>{{CSSxRef("-moz-window-dragging")}}</li>
- <li>{{CSSxRef("-moz-window-shadow")}}</li>
-</ul>
-
-<h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées"><span class="highlight-span">Anciennes propriétés spécifiques, désormais standardisées</span></h2>
-
-<div class="note">
-<p><strong>Note :</strong> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.</p>
-</div>
-
-<ul>
- <li>
-  <h3 id="A">A</h3>
- </li>
- <li>{{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}</li>
- <li>
-  <h3 id="B_2">B</h3>
- </li>
- <li>{{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}</li>
- <li>{{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}</li>
- <li>{{CSSxRef("box-decoration-break")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]</li>
- <li>{{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}</li>
- <li>{{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]</li>
- <li>{{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]</li>
- <li>{{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-style")}}]</li>
- <li>{{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-width")}}]</li>
- <li>{{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}</li>
- <li>{{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start")}}]</li>
- <li>{{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-color")}}]</li>
- <li>{{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-style")}}]</li>
- <li>{{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-width")}}]</li>
- <li>{{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>
-  <h3 id="C">C</h3>
- </li>
- <li>{{CSSxRef("clip-path")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
- <li>{{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}</li>
- <li>
-  <h3 id="F_–_M">F – M</h3>
- </li>
- <li>{{CSSxRef("filter")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
- <li>{{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-end")}}]</li>
- <li>{{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-start")}}]</li>
- <li>{{CSSxRef("mask")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
- <li>
-  <h3 id="O_2">O</h3>
- </li>
- <li>{{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}</li>
- <li>{{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}</li>
- <li>{{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}</li>
- <li>{{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}</li>
- <li>{{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}</li>
- <li>{{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}</li>
- <li>
-  <h3 id="P">P</h3>
- </li>
- <li>{{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-start")}}]</li>
- <li>{{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-end")}}]</li>
- <li>{{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
- <li>
-  <h3 id="T_–_U">T – U</h3>
- </li>
- <li>{{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}</li>
- <li>{{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}</li>
- <li>{{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}</li>
- <li>{{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}</li>
- <li>{{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
- <li>{{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h2 id="Valeurs">Valeurs</h2>
-
-<h3 id="Valeurs_globales">Valeurs globales</h3>
-
-<ul>
- <li>{{cssxref("initial","-moz-initial")}}</li>
-</ul>
-
-<h3 id="Cssxref(-moz-appearance)">{{Cssxref("appearance")}}</h3>
-
-<ul>
- <li><code>button</code></li>
- <li><code>button-arrow-down</code></li>
- <li><code>button-arrow-next</code></li>
- <li><code>button-arrow-previous</code></li>
- <li><code>button-arrow-up</code></li>
- <li><code>button-bevel</code></li>
- <li><code>checkbox</code></li>
- <li><code>checkbox-container</code></li>
- <li><code>checkbox-label</code></li>
- <li><code>checkmenuitem</code></li>
- <li><code>dialog</code></li>
- <li><code>groupbox</code></li>
- <li><code>listbox</code></li>
- <li><code>menuarrow</code></li>
- <li><code>menucheckbox</code></li>
- <li><code>menuimage</code></li>
- <li><code>menuitem</code></li>
- <li><code>menuitemtext</code></li>
- <li><code>menulist</code></li>
- <li><code>menulist-button</code></li>
- <li><code>menulist-text</code></li>
- <li><code>menulist-textfield</code></li>
- <li><code>menupopup</code></li>
- <li><code>menuradio</code></li>
- <li><code>menuseparator</code></li>
- <li><code>-moz-mac-unified-toolbar</code></li>
- <li><code>-moz-win-borderless-glass</code></li>
- <li><code>-moz-win-browsertabbar-toolbox</code></li>
- <li><code>-moz-win-communications-toolbox</code></li>
- <li><code>-moz-win-glass</code></li>
- <li><code>-moz-win-media-toolbox</code></li>
- <li><code>-moz-window-button-box</code></li>
- <li><code>-moz-window-button-box-maximized</code></li>
- <li><code>-moz-window-button-close</code></li>
- <li><code>-moz-window-button-maximize</code></li>
- <li><code>-moz-window-button-minimize</code></li>
- <li><code>-moz-window-button-restore</code></li>
- <li><code>-moz-window-titlebar</code></li>
- <li><code>-moz-window-titlebar-maximized</code></li>
- <li><code>progressbar</code></li>
- <li><code>progresschunk</code></li>
- <li><code>radio</code></li>
- <li><code>radio-container</code></li>
- <li><code>radio-label</code></li>
- <li><code>radiomenuitem</code></li>
- <li><code>resizer</code></li>
- <li><code>resizerpanel</code></li>
- <li><code>scale-horizontal</code></li>
- <li><code>scalethumb-horizontal</code></li>
- <li><code>scalethumb-vertical</code></li>
- <li><code>scale-vertical</code></li>
- <li><code>scrollbarbutton-down</code></li>
- <li><code>scrollbarbutton-left</code></li>
- <li><code>scrollbarbutton-right</code></li>
- <li><code>scrollbarbutton-up</code></li>
- <li><code>scrollbar-small</code></li>
- <li><code>scrollbarthumb-horizontal</code></li>
- <li><code>scrollbarthumb-vertical</code></li>
- <li><code>scrollbartrack-horizontal</code></li>
- <li><code>scrollbartrack-vertical</code></li>
- <li><code>separator</code></li>
- <li><code>spinner</code></li>
- <li><code>spinner-downbutton</code></li>
- <li><code>spinner-textfield</code></li>
- <li><code>spinner-upbutton</code></li>
- <li><code>statusbar</code></li>
- <li><code>statusbarpanel</code></li>
- <li><code>tab</code></li>
- <li><code>tabpanels</code></li>
- <li><code>tab-scroll-arrow-back</code></li>
- <li><code>tab-scroll-arrow-forward</code></li>
- <li><code>textfield</code></li>
- <li><code>textfield-multiline</code></li>
- <li><code>toolbar</code></li>
- <li><code>toolbarbutton-dropdown</code></li>
- <li><code>toolbox</code></li>
- <li><code>tooltip</code></li>
- <li><code>treeheadercell</code></li>
- <li><code>treeheadersortarrow</code></li>
- <li><code>treeitem</code></li>
- <li><code>treetwisty</code></li>
- <li><code>treetwistyopen</code></li>
- <li><code>treeview</code></li>
- <li><code>window</code></li>
-</ul>
-
-<h3 id="cssxref(background-image)">{{cssxref("background-image")}}</h3>
-
-<ul>
- <li>
-  <h4 id="Dégradés_Gecko_minversion_inline(1.9.2)">Dégradés </h4>
-
-  <ul>
-   <li>{{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}</li>
-   <li>{{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}</li>
-  </ul>
- </li>
- <li>
-  <h4 id="Éléments_gecko_minversion_inline(2.0)">Éléments </h4>
-
-  <ul>
-   <li>{{cssxref("-moz-element")}}</li>
-  </ul>
- </li>
- <li>
-  <h4 id="Sub-images_gecko_minversion_inline(2.0)">Sub-images </h4>
-
-  <ul>
-   <li>{{cssxref("-moz-image-rect")}}</li>
-  </ul>
- </li>
-</ul>
-
-<h3 id="Cssxref(border-color)">{{Cssxref("border-color")}}</h3>
-
-<ul>
- <li><code>-moz-use-text-color</code> {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; <a href="/fr/docs/Web/CSS/color_value#currentcolor_keyword">currentcolor</a> doit être utilisée à la place.</li>
-</ul>
-
-<h3 id="Cssxref(border-style)_et_Cssxref(outline-style)">{{Cssxref("border-style")}} et {{Cssxref("outline-style")}}</h3>
-
-<ul>
- <li><code>-moz-bg-inset</code>{{Obsolete_Inline(1.9)}}</li>
- <li><code>-moz-bg-outset</code>{{Obsolete_Inline(1.9)}}</li>
- <li><code>-moz-bg-solid</code>{{Obsolete_Inline(1.9)}}</li>
-</ul>
-
-<h3 id="Mots-clés_pour_cssxref(&lt;color>)">Mots-clés pour {{cssxref("&lt;color&gt;")}}</h3>
-
-<ul>
- <li><code>-moz-activehyperlinktext</code></li>
- <li><code>-moz-hyperlinktext</code></li>
- <li><code>-moz-visitedhyperlinktext</code></li>
- <li><code>-moz-buttondefault</code></li>
- <li><code>-moz-buttonhoverface</code></li>
- <li><code>-moz-buttonhovertext</code></li>
- <li><code>-moz-default-background-color</code></li>
- <li><code>-moz-default-color</code></li>
- <li><code>-moz-cellhighlight</code></li>
- <li><code>-moz-cellhighlighttext</code></li>
- <li><code>-moz-field</code></li>
- <li><code>-moz-fieldtext</code></li>
- <li><code>-moz-dialog</code></li>
- <li><code>-moz-dialogtext</code></li>
- <li><code>-moz-dragtargetzone</code></li>
- <li><code>-moz-mac-accentdarkestshadow</code></li>
- <li><code>-moz-mac-accentdarkshadow</code></li>
- <li><code>-moz-mac-accentface</code></li>
- <li><code>-moz-mac-accentlightesthighlight</code></li>
- <li><code>-moz-mac-accentlightshadow</code></li>
- <li><code>-moz-mac-accentregularhighlight</code></li>
- <li><code>-moz-mac-accentregularshadow</code></li>
- <li><code>-moz-mac-chrome-active</code></li>
- <li><code>-moz-mac-chrome-inactive</code></li>
- <li><code>-moz-mac-focusring</code></li>
- <li><code>-moz-mac-menuselect</code></li>
- <li><code>-moz-mac-menushadow</code></li>
- <li><code>-moz-mac-menutextselect</code></li>
- <li><code>-moz-menuhover</code></li>
- <li><code>-moz-menuhovertext</code></li>
- <li><code>-moz-win-communicationstext</code></li>
- <li><code>-moz-win-mediatext</code></li>
- <li><code>-moz-nativehyperlinktext</code></li>
-</ul>
-
-<h3 id="Cssxref(display)">{{Cssxref("display")}}</h3>
-
-<ul>
- <li><code>-moz-box</code> {{Deprecated_Inline}}</li>
- <li><code>-moz-inline-block</code> {{Obsolete_Inline}}</li>
- <li><code>-moz-inline-box</code> {{Deprecated_Inline}}</li>
- <li><code>-moz-inline-grid</code>{{Obsolete_Inline(62)}}</li>
- <li><code>-moz-inline-stack</code>{{Obsolete_Inline(62)}}</li>
- <li><code>-moz-inline-table</code> {{Obsolete_Inline}}</li>
- <li><code>-moz-grid</code>{{Obsolete_Inline(62)}}</li>
- <li><code>-moz-grid-group</code>{{Obsolete_Inline(62)}}</li>
- <li><code>-moz-grid-line</code>{{Obsolete_Inline(62)}}</li>
- <li><code>-moz-groupbox</code>{{Obsolete_Inline}}</li>
- <li><code>-moz-deck</code>{{Obsolete_Inline(62)}}</li>
- <li><code>-moz-popup</code>{{Obsolete_Inline(62)}}</li>
- <li><code>-moz-stack</code>{{Obsolete_Inline(62)}}</li>
- <li><code>-moz-marker</code>{{Obsolete_Inline(62)}}</li>
-</ul>
-
-<h3 id="cssxref(empty-cells)">{{cssxref("empty-cells")}}</h3>
-
-<ul>
- <li><code>-moz-show-background</code> (valeur par défaut en <em>quirks mode</em>)</li>
-</ul>
-
-<h3 id="Cssxref(font)">{{Cssxref("font")}}</h3>
-
-<ul>
- <li><code>-moz-button</code></li>
- <li><code>-moz-info</code></li>
- <li><code>-moz-desktop</code></li>
- <li><code>-moz-dialog</code> (également une couleur)</li>
- <li><code>-moz-document</code></li>
- <li><code>-moz-workspace</code></li>
- <li><code>-moz-window</code></li>
- <li><code>-moz-list</code></li>
- <li><code>-moz-pull-down-menu</code></li>
- <li><code>-moz-field</code> (également une couleur)</li>
-</ul>
-
-<h3 id="Cssxref(font-family)">{{Cssxref("font-family")}}</h3>
-
-<ul>
- <li><code>-moz-fixed</code></li>
-</ul>
-
-<h3 id="Cssxref(image-rendering)">{{Cssxref("image-rendering")}}</h3>
-
-<ul>
- <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} </li>
-</ul>
-
-<h3 id="cssxref(&lt;length>)">{{cssxref("&lt;length&gt;")}}</h3>
-
-<ul>
- <li>{{cssxref("-moz-calc")}} </li>
-</ul>
-
-<h3 id="Cssxref(list-style-type)">{{Cssxref("list-style-type")}}</h3>
-
-<ul>
- <li><code>-moz-arabic-indic</code></li>
- <li><code>-moz-bengali</code></li>
- <li><code>-moz-cjk-earthly-branch</code></li>
- <li><code>-moz-cjk-heavenly-stem</code></li>
- <li><code>-moz-devanagari</code></li>
- <li><code>-moz-ethiopic-halehame</code></li>
- <li><code>-moz-ethiopic-halehame-am</code></li>
- <li><code>-moz-ethiopic-halehame-ti-er</code></li>
- <li><code>-moz-ethiopic-halehame-ti-et</code></li>
- <li><code>-moz-ethiopic-numeric</code></li>
- <li><code>-moz-gujarati</code></li>
- <li><code>-moz-gurmukhi</code></li>
- <li><code>-moz-hangul</code></li>
- <li><code>-moz-hangul-consonant</code></li>
- <li><code>-moz-japanese-formal</code></li>
- <li><code>-moz-japanese-informal</code></li>
- <li><code>-moz-kannada</code></li>
- <li><code>-moz-khmer</code></li>
- <li><code>-moz-lao</code></li>
- <li><code>-moz-malayalam</code></li>
- <li><code>-moz-myanmar</code></li>
- <li><code>-moz-oriya</code></li>
- <li><code>-moz-persian</code></li>
- <li><code>-moz-simp-chinese-formal</code></li>
- <li><code>-moz-simp-chinese-informal</code></li>
- <li><code>-moz-tamil</code></li>
- <li><code>-moz-telugu</code></li>
- <li><code>-moz-thai</code></li>
- <li><code>-moz-trad-chinese-formal</code></li>
- <li><code>-moz-trad-chinese-informal</code></li>
- <li><code>-moz-urdu</code></li>
-</ul>
-
-<h3 id="Cssxref(overflow)">{{Cssxref("overflow")}}</h3>
-
-<ul>
- <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li>
- <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li>
- <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li>
- <li>{{Cssxref("-moz-hidden-unscrollable")}}</li>
-</ul>
-
-<h3 id="Cssxref(text-align)">{{Cssxref("text-align")}}</h3>
-
-<ul>
- <li><code>-moz-center</code></li>
- <li><code>-moz-left</code></li>
- <li><code>-moz-right</code></li>
-</ul>
-
-<h3 id="Cssxref(text-decoration)">{{Cssxref("text-decoration")}}</h3>
-
-<ul>
- <li><code>-moz-anchor-decoration</code></li>
-</ul>
-
-<h3 id="Cssxref(-moz-user-select)">{{Cssxref("-moz-user-select")}}</h3>
-
-<ul>
- <li><code>-moz-all</code></li>
- <li><code>-moz-none</code></li>
-</ul>
-
-<h3 id="Cssxref(width)_Cssxref(min-width)_and_Cssxref(max-width)">{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}</h3>
-
-<ul>
- <li><code>-moz-min-content</code></li>
- <li><code>-moz-fit-content</code></li>
- <li><code>-moz-max-content</code></li>
- <li><code>-moz-available</code></li>
-</ul>
-
-<h2 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h2>
-
-<ul>
- <li>
-  <h3 id="A_–_D">A – D</h3>
- </li>
- <li>{{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432</li>
- <li>{{CSSxRef("::-moz-anonymous-positioned-block")}}</li>
- <li>{{CSSxRef(":-moz-any")}}</li>
- <li>{{CSSxRef(":-moz-any-link")}} [Matches <code>:link</code> and <code>:visited</code>]</li>
- <li>{{CSSxRef(":-moz-broken")}}</li>
- <li>{{CSSxRef("::-moz-canvas")}}</li>
- <li>{{CSSxRef("::-moz-color-swatch")}}</li>
- <li>{{CSSxRef("::-moz-cell-content")}}</li>
- <li>{{CSSxRef(":-moz-drag-over")}}</li>
- <li>
-  <h3 id="F_–_I">F – I</h3>
- </li>
- <li>{{CSSxRef(":-moz-first-node")}}</li>
- <li>{{CSSxRef("::-moz-focus-inner")}}</li>
- <li>{{CSSxRef("::-moz-focus-outer")}}</li>
- <li>{{CSSxRef(":-moz-focusring")}}</li>
- <li>{{CSSxRef(":-moz-full-screen")}}</li>
- <li>{{CSSxRef(":-moz-full-screen-ancestor")}}</li>
- <li>{{CSSxRef(":-moz-handler-blocked")}}</li>
- <li>{{CSSxRef(":-moz-handler-crashed")}}</li>
- <li>{{CSSxRef(":-moz-handler-disabled")}}</li>
- <li>{{CSSxRef("::-moz-inline-table")}}</li>
- <li>
-  <h3 id="L">L</h3>
- </li>
- <li>{{CSSxRef(":-moz-last-node")}}</li>
- <li>{{CSSxRef(":-moz-list-bullet")}}</li>
- <li>{{CSSxRef(":-moz-list-number")}}</li>
- <li>{{CSSxRef(":-moz-loading")}}</li>
- <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}</li>
- <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}</li>
- <li>{{CSSxRef(":-moz-lwtheme")}}</li>
- <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}</li>
- <li>{{CSSxRef(":-moz-lwtheme-darktext")}}</li>
- <li>
-  <h3 id="N_–_R">N – R</h3>
- </li>
- <li>{{CSSxRef(":-moz-native-anonymous")}}</li>
- <li>{{CSSxRef(":-moz-only-whitespace")}}</li>
- <li>{{CSSxRef("::-moz-page")}}</li>
- <li>{{CSSxRef("::-moz-page-sequence")}}</li>
- <li>{{CSSxRef("::-moz-pagebreak")}}</li>
- <li>{{CSSxRef("::-moz-pagecontent")}}</li>
- <li>{{CSSxRef(":placeholder-shown")}}{{Obsolete_Inline("51")}}</li>
- <li>{{CSSxRef("::placeholder")}}{{Deprecated_Inline("51")}}</li>
- <li>{{CSSxRef("::-moz-progress-bar")}}</li>
- <li>{{CSSxRef("::-moz-range-progress")}}</li>
- <li>{{CSSxRef("::-moz-range-thumb")}}</li>
- <li>{{CSSxRef("::-moz-range-track")}}</li>
- <li>{{CSSxRef(":-moz-read-only")}}</li>
- <li>{{CSSxRef(":-moz-read-write")}}</li>
- <li>
-  <h3 id="S">S</h3>
- </li>
- <li>{{CSSxRef("::-moz-scrolled-canvas")}}</li>
- <li>{{CSSxRef("::-moz-scrolled-content")}}</li>
- <li>{{CSSxRef("::-moz-scrolled-page-sequence")}}</li>
- <li>{{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}</li>
- <li>{{CSSxRef(":-moz-submit-invalid")}}</li>
- <li>{{CSSxRef(":-moz-suppressed")}}</li>
- <li>{{CSSxRef("::-moz-svg-foreign-content")}}</li>
- <li>
-  <h3 id="T">T</h3>
- </li>
- <li>{{CSSxRef("::-moz-table")}}</li>
- <li>{{CSSxRef("::-moz-table-cell")}}</li>
- <li>{{CSSxRef("::-moz-table-column")}}</li>
- <li>{{CSSxRef("::-moz-table-column-group")}}</li>
- <li>{{CSSxRef("::-moz-table-outer")}}</li>
- <li>{{CSSxRef("::-moz-table-row")}}</li>
- <li>{{CSSxRef("::-moz-table-row-group")}}</li>
- <li>{{CSSxRef(":-moz-tree-cell")}}</li>
- <li>{{CSSxRef(":-moz-tree-cell-text")}}</li>
- <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}</li>
- <li>{{CSSxRef(":-moz-tree-checkbox")}}</li>
- <li>{{CSSxRef(":-moz-tree-column")}}</li>
- <li>{{CSSxRef(":-moz-tree-drop-feedback")}}</li>
- <li>{{CSSxRef(":-moz-tree-image")}}</li>
- <li>{{CSSxRef(":-moz-tree-indentation")}}</li>
- <li>{{CSSxRef(":-moz-tree-line")}}</li>
- <li>{{CSSxRef(":-moz-tree-progressmeter")}}</li>
- <li>{{CSSxRef(":-moz-tree-row")}}</li>
- <li>{{CSSxRef(":-moz-tree-row(hover)")}}</li>
- <li>{{CSSxRef(":-moz-tree-separator")}}</li>
- <li>{{CSSxRef(":-moz-tree-twisty")}}</li>
- <li>
-  <h3 id="U_–_X">U – X</h3>
- </li>
- <li>{{CSSxRef(":user-invalid")}}</li>
- <li>{{CSSxRef(":-moz-ui-valid")}}</li>
- <li>{{CSSxRef(":-moz-user-disabled")}}</li>
- <li>{{CSSxRef("::-moz-viewport")}}</li>
- <li>{{CSSxRef("::-moz-viewport-scroll")}}</li>
- <li>{{CSSxRef(":-moz-window-inactive")}}</li>
- <li>{{CSSxRef("::-moz-xul-anonymous-block")}}</li>
-</ul>
-
-<h2 id="Règles">Règles @</h2>
-
-<ul>
- <li>{{Cssxref("@-moz-document")}}</li>
-</ul>
-
-<h2 id="Caractéristiques">Caractéristiques</h2>
-
-<ul>
- <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}</li>
- <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}</li>
- <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}</li>
- <li>{{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}</li>
- <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}</li>
- <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}</li>
- <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}</li>
- <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}</li>
- <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}</li>
- <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}</li>
- <li>{{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}</li>
- <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li>
- <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}</li>
- <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li>
- <li>{{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}</li>
- <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li>
-</ul>
-
-<h2 id="Autres">Autres</h2>
-
-<ul>
- <li>{{Cssxref("-moz-alt-content")}} {{Bug("11011")}}</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Mozilla/Gecko/Chrome/CSS">CSS Mozilla uniquement destiné au chrome (l'interface du navigateur)</a></li>
- <li><a href="/fr/docs/Web/CSS/Microsoft_Extensions">Extensions CSS spécifiques à Microsoft</a></li>
- <li><a href="/fr/docs/Web/CSS/WebKit_Extensions">Extensions CSS spécifiques à WebKit</a></li>
-</ul>
+{{CSSRef}}
+
+Les applications Mozilla, telles que Firefox, prennent en charge un certain nombre d'extensions spécifiques à [CSS](/fr/docs/Web/CSS) : des propriétés, des valeurs, des pseudo-éléments, des pseudo-classes, des règles @ et des requêtes média. Ces extensions utilisent le préfixe `-moz`.
+
+## Propriétés et pseudo-classes spécifiques à Mozilla (ne pas utiliser sur le Web)
+
+> **Note :** Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments [XUL](/fr/docs/Mozilla/Tech/XUL).
+
+### B
+
+- {{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}
+- {{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}
+- {{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}
+- {{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}
+- {{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}
+- {{CSSxRef("box-align")}}
+- {{CSSxRef("box-direction")}}
+- {{CSSxRef("box-flex")}}
+- {{CSSxRef("-moz-box-ordinal-group")}}
+- {{CSSxRef("box-orient")}}
+- {{CSSxRef("box-pack")}}
+
+### C – I
+
+- {{CSSxRef("-moz-context-properties")}}
+- {{CSSxRef("-moz-float-edge")}}
+- {{CSSxRef("-moz-force-broken-image-icon")}}
+- {{CSSxRef("-moz-image-region")}}
+
+### O
+
+- {{CSSxRef("-moz-orient")}}
+- {{CSSxRef("-moz-osx-font-smoothing")}}
+- {{CSSxRef("-moz-outline-radius")}}
+- {{CSSxRef("-moz-outline-radius-bottomleft")}}
+- {{CSSxRef("-moz-outline-radius-bottomright")}}
+- {{CSSxRef("-moz-outline-radius-topleft")}}
+- {{CSSxRef("-moz-outline-radius-topright")}}
+- {{CSSxRef("overflow-clip-box")}}
+- {{CSSxRef("overflow-clip-box-block")}}
+- {{CSSxRef("overflow-clip-box-inline")}}
+
+### S – Z
+
+- {{CSSxRef("-moz-stack-sizing")}}
+- {{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}
+- {{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}
+- {{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}
+- {{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}
+- {{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}
+- {{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}
+- {{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}
+- {{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}
+- {{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}
+- {{CSSxRef("-moz-user-focus")}}
+- {{CSSxRef("-moz-user-input")}}
+- {{CSSxRef("user-modify")}}
+- {{CSSxRef("-moz-window-dragging")}}
+- {{CSSxRef("-moz-window-shadow")}}
+
+## Anciennes propriétés spécifiques, désormais standardisées
+
+> **Note :** Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.
+
+- ### A
+- {{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}
+- ### B
+- {{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}
+- {{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}
+- {{CSSxRef("box-decoration-break")}}{{Obsolete_Inline(32)}} \[Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]
+- {{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}
+- {{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("border-inline-end")}}]
+- {{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]
+- {{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("border-inline-end-style")}}]
+- {{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("border-inline-end-width")}}]
+- {{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}
+- {{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("border-inline-start")}}]
+- {{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("border-inline-start-color")}}]
+- {{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("border-inline-start-style")}}]
+- {{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("border-inline-start-width")}}]
+- {{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- ### C
+- {{CSSxRef("clip-path")}} {{Experimental_Inline}} \[Applying to more than SVG]
+- {{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}
+- ### F – M
+- {{CSSxRef("filter")}} {{Experimental_Inline}} \[Applying to more than SVG]
+- {{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("margin-inline-end")}}]
+- {{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("margin-inline-start")}}]
+- {{CSSxRef("mask")}} {{Experimental_Inline}} \[Applying to more than SVG]
+- ### O
+- {{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}
+- {{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}
+- {{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}
+- {{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}
+- {{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}
+- {{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}
+- ### P
+- {{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("padding-inline-start")}}]
+- {{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} \[Remplacée par la version standard {{CSSxRef("padding-inline-end")}}]
+- {{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("pointer-events")}} {{Experimental_Inline}} \[Applying to more than SVG]
+- ### T – U
+- {{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}
+- {{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}
+- {{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}
+- {{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}
+- {{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}
+- {{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}
+- {{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} \[Version préfixée toujours acceptée]
+- {{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}
+
+## Valeurs
+
+### Valeurs globales
+
+- {{cssxref("initial","-moz-initial")}}
+
+### {{Cssxref("appearance")}}
+
+- `button`
+- `button-arrow-down`
+- `button-arrow-next`
+- `button-arrow-previous`
+- `button-arrow-up`
+- `button-bevel`
+- `checkbox`
+- `checkbox-container`
+- `checkbox-label`
+- `checkmenuitem`
+- `dialog`
+- `groupbox`
+- `listbox`
+- `menuarrow`
+- `menucheckbox`
+- `menuimage`
+- `menuitem`
+- `menuitemtext`
+- `menulist`
+- `menulist-button`
+- `menulist-text`
+- `menulist-textfield`
+- `menupopup`
+- `menuradio`
+- `menuseparator`
+- `-moz-mac-unified-toolbar`
+- `-moz-win-borderless-glass`
+- `-moz-win-browsertabbar-toolbox`
+- `-moz-win-communications-toolbox`
+- `-moz-win-glass`
+- `-moz-win-media-toolbox`
+- `-moz-window-button-box`
+- `-moz-window-button-box-maximized`
+- `-moz-window-button-close`
+- `-moz-window-button-maximize`
+- `-moz-window-button-minimize`
+- `-moz-window-button-restore`
+- `-moz-window-titlebar`
+- `-moz-window-titlebar-maximized`
+- `progressbar`
+- `progresschunk`
+- `radio`
+- `radio-container`
+- `radio-label`
+- `radiomenuitem`
+- `resizer`
+- `resizerpanel`
+- `scale-horizontal`
+- `scalethumb-horizontal`
+- `scalethumb-vertical`
+- `scale-vertical`
+- `scrollbarbutton-down`
+- `scrollbarbutton-left`
+- `scrollbarbutton-right`
+- `scrollbarbutton-up`
+- `scrollbar-small`
+- `scrollbarthumb-horizontal`
+- `scrollbarthumb-vertical`
+- `scrollbartrack-horizontal`
+- `scrollbartrack-vertical`
+- `separator`
+- `spinner`
+- `spinner-downbutton`
+- `spinner-textfield`
+- `spinner-upbutton`
+- `statusbar`
+- `statusbarpanel`
+- `tab`
+- `tabpanels`
+- `tab-scroll-arrow-back`
+- `tab-scroll-arrow-forward`
+- `textfield`
+- `textfield-multiline`
+- `toolbar`
+- `toolbarbutton-dropdown`
+- `toolbox`
+- `tooltip`
+- `treeheadercell`
+- `treeheadersortarrow`
+- `treeitem`
+- `treetwisty`
+- `treetwistyopen`
+- `treeview`
+- `window`
+
+### {{cssxref("background-image")}}
+
+- #### Dégradés
+
+  - {{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}
+  - {{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}
+
+- #### Éléments
+
+  - {{cssxref("-moz-element")}}
+
+- #### Sub-images
+
+  - {{cssxref("-moz-image-rect")}}
+
+### {{Cssxref("border-color")}}
+
+- `-moz-use-text-color` {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; [currentcolor](/fr/docs/Web/CSS/color_value#currentcolor_keyword) doit être utilisée à la place.
+
+### {{Cssxref("border-style")}} et {{Cssxref("outline-style")}}
+
+- `-moz-bg-inset`{{Obsolete_Inline(1.9)}}
+- `-moz-bg-outset`{{Obsolete_Inline(1.9)}}
+- `-moz-bg-solid`{{Obsolete_Inline(1.9)}}
+
+### Mots-clés pour {{cssxref("&lt;color&gt;")}}
+
+- `-moz-activehyperlinktext`
+- `-moz-hyperlinktext`
+- `-moz-visitedhyperlinktext`
+- `-moz-buttondefault`
+- `-moz-buttonhoverface`
+- `-moz-buttonhovertext`
+- `-moz-default-background-color`
+- `-moz-default-color`
+- `-moz-cellhighlight`
+- `-moz-cellhighlighttext`
+- `-moz-field`
+- `-moz-fieldtext`
+- `-moz-dialog`
+- `-moz-dialogtext`
+- `-moz-dragtargetzone`
+- `-moz-mac-accentdarkestshadow`
+- `-moz-mac-accentdarkshadow`
+- `-moz-mac-accentface`
+- `-moz-mac-accentlightesthighlight`
+- `-moz-mac-accentlightshadow`
+- `-moz-mac-accentregularhighlight`
+- `-moz-mac-accentregularshadow`
+- `-moz-mac-chrome-active`
+- `-moz-mac-chrome-inactive`
+- `-moz-mac-focusring`
+- `-moz-mac-menuselect`
+- `-moz-mac-menushadow`
+- `-moz-mac-menutextselect`
+- `-moz-menuhover`
+- `-moz-menuhovertext`
+- `-moz-win-communicationstext`
+- `-moz-win-mediatext`
+- `-moz-nativehyperlinktext`
+
+### {{Cssxref("display")}}
+
+- `-moz-box` {{Deprecated_Inline}}
+- `-moz-inline-block` {{Obsolete_Inline}}
+- `-moz-inline-box` {{Deprecated_Inline}}
+- `-moz-inline-grid`{{Obsolete_Inline(62)}}
+- `-moz-inline-stack`{{Obsolete_Inline(62)}}
+- `-moz-inline-table` {{Obsolete_Inline}}
+- `-moz-grid`{{Obsolete_Inline(62)}}
+- `-moz-grid-group`{{Obsolete_Inline(62)}}
+- `-moz-grid-line`{{Obsolete_Inline(62)}}
+- `-moz-groupbox`{{Obsolete_Inline}}
+- `-moz-deck`{{Obsolete_Inline(62)}}
+- `-moz-popup`{{Obsolete_Inline(62)}}
+- `-moz-stack`{{Obsolete_Inline(62)}}
+- `-moz-marker`{{Obsolete_Inline(62)}}
+
+### {{cssxref("empty-cells")}}
+
+- `-moz-show-background` (valeur par défaut en _quirks mode_)
+
+### {{Cssxref("font")}}
+
+- `-moz-button`
+- `-moz-info`
+- `-moz-desktop`
+- `-moz-dialog` (également une couleur)
+- `-moz-document`
+- `-moz-workspace`
+- `-moz-window`
+- `-moz-list`
+- `-moz-pull-down-menu`
+- `-moz-field` (également une couleur)
+
+### {{Cssxref("font-family")}}
+
+- `-moz-fixed`
+
+### {{Cssxref("image-rendering")}}
+
+- {{Cssxref("image-rendering","-moz-crisp-edges")}}
+
+### {{cssxref("&lt;length&gt;")}}
+
+- {{cssxref("-moz-calc")}}
+
+### {{Cssxref("list-style-type")}}
+
+- `-moz-arabic-indic`
+- `-moz-bengali`
+- `-moz-cjk-earthly-branch`
+- `-moz-cjk-heavenly-stem`
+- `-moz-devanagari`
+- `-moz-ethiopic-halehame`
+- `-moz-ethiopic-halehame-am`
+- `-moz-ethiopic-halehame-ti-er`
+- `-moz-ethiopic-halehame-ti-et`
+- `-moz-ethiopic-numeric`
+- `-moz-gujarati`
+- `-moz-gurmukhi`
+- `-moz-hangul`
+- `-moz-hangul-consonant`
+- `-moz-japanese-formal`
+- `-moz-japanese-informal`
+- `-moz-kannada`
+- `-moz-khmer`
+- `-moz-lao`
+- `-moz-malayalam`
+- `-moz-myanmar`
+- `-moz-oriya`
+- `-moz-persian`
+- `-moz-simp-chinese-formal`
+- `-moz-simp-chinese-informal`
+- `-moz-tamil`
+- `-moz-telugu`
+- `-moz-thai`
+- `-moz-trad-chinese-formal`
+- `-moz-trad-chinese-informal`
+- `-moz-urdu`
+
+### {{Cssxref("overflow")}}
+
+- {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
+- {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
+- {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
+- {{Cssxref("-moz-hidden-unscrollable")}}
+
+### {{Cssxref("text-align")}}
+
+- `-moz-center`
+- `-moz-left`
+- `-moz-right`
+
+### {{Cssxref("text-decoration")}}
+
+- `-moz-anchor-decoration`
+
+### {{Cssxref("-moz-user-select")}}
+
+- `-moz-all`
+- `-moz-none`
+
+### {{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}
+
+- `-moz-min-content`
+- `-moz-fit-content`
+- `-moz-max-content`
+- `-moz-available`
+
+## Pseudo-éléments et pseudo-classes
+
+- ### A – D
+- {{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432
+- {{CSSxRef("::-moz-anonymous-positioned-block")}}
+- {{CSSxRef(":-moz-any")}}
+- {{CSSxRef(":-moz-any-link")}} \[Matches `:link` and `:visited`]
+- {{CSSxRef(":-moz-broken")}}
+- {{CSSxRef("::-moz-canvas")}}
+- {{CSSxRef("::-moz-color-swatch")}}
+- {{CSSxRef("::-moz-cell-content")}}
+- {{CSSxRef(":-moz-drag-over")}}
+- ### F – I
+- {{CSSxRef(":-moz-first-node")}}
+- {{CSSxRef("::-moz-focus-inner")}}
+- {{CSSxRef("::-moz-focus-outer")}}
+- {{CSSxRef(":-moz-focusring")}}
+- {{CSSxRef(":-moz-full-screen")}}
+- {{CSSxRef(":-moz-full-screen-ancestor")}}
+- {{CSSxRef(":-moz-handler-blocked")}}
+- {{CSSxRef(":-moz-handler-crashed")}}
+- {{CSSxRef(":-moz-handler-disabled")}}
+- {{CSSxRef("::-moz-inline-table")}}
+- ### L
+- {{CSSxRef(":-moz-last-node")}}
+- {{CSSxRef(":-moz-list-bullet")}}
+- {{CSSxRef(":-moz-list-number")}}
+- {{CSSxRef(":-moz-loading")}}
+- {{CSSxRef(":-moz-locale-dir(ltr)")}}
+- {{CSSxRef(":-moz-locale-dir(rtl)")}}
+- {{CSSxRef(":-moz-lwtheme")}}
+- {{CSSxRef(":-moz-lwtheme-brighttext")}}
+- {{CSSxRef(":-moz-lwtheme-darktext")}}
+- ### N – R
+- {{CSSxRef(":-moz-native-anonymous")}}
+- {{CSSxRef(":-moz-only-whitespace")}}
+- {{CSSxRef("::-moz-page")}}
+- {{CSSxRef("::-moz-page-sequence")}}
+- {{CSSxRef("::-moz-pagebreak")}}
+- {{CSSxRef("::-moz-pagecontent")}}
+- {{CSSxRef(":placeholder-shown")}}{{Obsolete_Inline("51")}}
+- {{CSSxRef("::placeholder")}}{{Deprecated_Inline("51")}}
+- {{CSSxRef("::-moz-progress-bar")}}
+- {{CSSxRef("::-moz-range-progress")}}
+- {{CSSxRef("::-moz-range-thumb")}}
+- {{CSSxRef("::-moz-range-track")}}
+- {{CSSxRef(":-moz-read-only")}}
+- {{CSSxRef(":-moz-read-write")}}
+- ### S
+- {{CSSxRef("::-moz-scrolled-canvas")}}
+- {{CSSxRef("::-moz-scrolled-content")}}
+- {{CSSxRef("::-moz-scrolled-page-sequence")}}
+- {{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}
+- {{CSSxRef(":-moz-submit-invalid")}}
+- {{CSSxRef(":-moz-suppressed")}}
+- {{CSSxRef("::-moz-svg-foreign-content")}}
+- ### T
+- {{CSSxRef("::-moz-table")}}
+- {{CSSxRef("::-moz-table-cell")}}
+- {{CSSxRef("::-moz-table-column")}}
+- {{CSSxRef("::-moz-table-column-group")}}
+- {{CSSxRef("::-moz-table-outer")}}
+- {{CSSxRef("::-moz-table-row")}}
+- {{CSSxRef("::-moz-table-row-group")}}
+- {{CSSxRef(":-moz-tree-cell")}}
+- {{CSSxRef(":-moz-tree-cell-text")}}
+- {{CSSxRef(":-moz-tree-cell-text(hover)")}}
+- {{CSSxRef(":-moz-tree-checkbox")}}
+- {{CSSxRef(":-moz-tree-column")}}
+- {{CSSxRef(":-moz-tree-drop-feedback")}}
+- {{CSSxRef(":-moz-tree-image")}}
+- {{CSSxRef(":-moz-tree-indentation")}}
+- {{CSSxRef(":-moz-tree-line")}}
+- {{CSSxRef(":-moz-tree-progressmeter")}}
+- {{CSSxRef(":-moz-tree-row")}}
+- {{CSSxRef(":-moz-tree-row(hover)")}}
+- {{CSSxRef(":-moz-tree-separator")}}
+- {{CSSxRef(":-moz-tree-twisty")}}
+- ### U – X
+- {{CSSxRef(":user-invalid")}}
+- {{CSSxRef(":-moz-ui-valid")}}
+- {{CSSxRef(":-moz-user-disabled")}}
+- {{CSSxRef("::-moz-viewport")}}
+- {{CSSxRef("::-moz-viewport-scroll")}}
+- {{CSSxRef(":-moz-window-inactive")}}
+- {{CSSxRef("::-moz-xul-anonymous-block")}}
+
+## Règles @
+
+- {{Cssxref("@-moz-document")}}
+
+## Caractéristiques
+
+- {{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}
+- {{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}
+- {{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}
+- {{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}
+- {{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}
+- {{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}
+- {{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}
+- {{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}
+- {{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}
+- {{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}
+- {{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}
+- {{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}
+- {{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}
+- {{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}
+- {{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}
+- {{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}
+
+## Autres
+
+- {{Cssxref("-moz-alt-content")}} {{Bug("11011")}}
+
+## Voir aussi
+
+- [CSS Mozilla uniquement destiné au chrome (l'interface du navigateur)](/fr/docs/Mozilla/Gecko/Chrome/CSS)
+- [Extensions CSS spécifiques à Microsoft](/fr/docs/Web/CSS/Microsoft_Extensions)
+- [Extensions CSS spécifiques à WebKit](/fr/docs/Web/CSS/WebKit_Extensions)
diff --git a/files/fr/web/css/number/index.md b/files/fr/web/css/number/index.md
index 0c055f3739..7a79cbb211 100644
--- a/files/fr/web/css/number/index.md
+++ b/files/fr/web/css/number/index.md
@@ -7,23 +7,24 @@ tags:
   - Type
 translation_of: Web/CSS/number
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée CSS <strong><code>&lt;number&gt;</code></strong> permet de représenter des nombres entiers ou décimaux. C'est donc un type qui englobe le type de données {{cssxref("&lt;integer&gt;")}} (permettant de représenter des entiers).</p>
+Le type de donnée CSS **`<number>`** permet de représenter des nombres entiers ou décimaux. C'est donc un type qui englobe le type de données {{cssxref("&lt;integer&gt;")}} (permettant de représenter des entiers).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Pour représenter des nombres décimaux, on utilisera le point (.) comme séparateur. Comme pour {{cssxref("&lt;integer&gt;")}}, il n'y a aucune unité associée aux valeurs de type <code>&lt;number&gt;</code> (ce n'est donc pas une dimension).</p>
+Pour représenter des nombres décimaux, on utilisera le point (.) comme séparateur. Comme pour {{cssxref("&lt;integer&gt;")}}, il n'y a aucune unité associée aux valeurs de type `<number>` (ce n'est donc pas une dimension).
 
-<h2 id="Interpolation">Interpolation</h2>
+## Interpolation
 
-<p>Les valeurs de type <code>&lt;number&gt;</code> peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce <a href="/fr/docs/Web/CSS/easing-function">à la fonction de temporisation</a> associée à l'animation.</p>
+Les valeurs de type `<number>` peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce [à la fonction de temporisation](/fr/docs/Web/CSS/easing-function) associée à l'animation.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voici des exemples de valeurs <code>&lt;number&gt;</code> valides :</p>
+Voici des exemples de valeurs `<number>` valides :
 
-<pre class="brush: css example-good">12          Un entier (<a href="/fr/docs/Web/CSS/integer">&lt;integer&gt;</a>) est également un &lt;number&gt;
+```css example-good
+12          Un entier (<integer>) est également un <number>
 4.01        Un nombre (décimal) positif
 -456.8      Un nombre décimal négatif
 0.0         Zéro
@@ -32,55 +33,29 @@ translation_of: Web/CSS/number
 .60         Les chiffres avant le point sont facultatifs
 10e3        On peut utiliser la notation scientifique
 -3.4e-2     Un cas d'utilisation de notation scientifique plus complexe
-</pre>
+```
 
-<p>Voici des exemples de valeurs invalides :</p>
+Voici des exemples de valeurs invalides :
 
-<pre class="brush: css example-bad">12.         Le point doit être suivi par des chiffres
+```css example-bad
+12.         Le point doit être suivi par des chiffres
 +-12.2      Seul un +/- est autorisé.
 12.1.1      Seul un point est autorisé.
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Values", "#numbers", "&lt;number&gt;")}}</td>
-   <td>{{Spec2("CSS4 Values")}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#numbers', '&lt;number&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Aucune modification significative depuis la spécification CSS de niveau 2 (première révision).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;number&gt;')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition explicite du type de données.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '', '&lt;number&gt;')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition implicite du type de données.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.number")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("&lt;integer&gt;")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires                                                                                   |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS4 Values", "#numbers", "&lt;number&gt;")}}         | {{Spec2("CSS4 Values")}} | Aucune modification significative.                                                             |
+| {{SpecName('CSS3 Values', '#numbers', '&lt;number&gt;')}}         | {{Spec2('CSS3 Values')}} | Aucune modification significative depuis la spécification CSS de niveau 2 (première révision). |
+| {{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;number&gt;')}} | {{Spec2('CSS2.1')}}         | Définition explicite du type de données.                                                       |
+| {{SpecName('CSS1', '', '&lt;number&gt;')}}                             | {{Spec2('CSS1')}}         | Définition implicite du type de données.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.number")}}
+
+## Voir aussi
+
+- {{cssxref("&lt;integer&gt;")}}
diff --git a/files/fr/web/css/object-fit/index.md b/files/fr/web/css/object-fit/index.md
index 4345f75418..c07c52479d 100644
--- a/files/fr/web/css/object-fit/index.md
+++ b/files/fr/web/css/object-fit/index.md
@@ -7,21 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/object-fit
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>object-fit</code></strong> définit la façon dont le contenu d'un <a href="/fr/docs/Web/CSS/Élément_remplacé">élément remplacé</a> ({{HTMLElement("img")}} ou {{HTMLElement("video")}} par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur.</p>
+La propriété CSS **`object-fit`** définit la façon dont le contenu d'un [élément remplacé](/fr/docs/Web/CSS/Élément_remplacé) ({{HTMLElement("img")}} ou {{HTMLElement("video")}} par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur.
 
-<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div>
+{{EmbedInteractiveExample("pages/css/object-fit.html")}}
 
-<p>Selon la valeur utilisée pour <code>object-fit</code>, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient.</p>
+Selon la valeur utilisée pour `object-fit`, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient.
 
-<div class="note">
-<p><strong>Note :</strong> Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-position")}}.</p>
-</div>
+> **Note :** Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-position")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 object-fit: fill;
 object-fit: contain;
 object-fit: cover;
@@ -32,64 +31,65 @@ object-fit: scale-down;
 object-fit: inherit;
 object-fit: initial;
 object-fit: unset;
-</pre>
+```
 
-<p>La propriété <code>object-fit</code> peut être définie grâce à l'un des mots-clés suivants.</p>
+La propriété `object-fit` peut être définie grâce à l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>contain</code></dt>
- <dd>Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant.</dd>
- <dt><code>cover</code></dt>
- <dd>Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné.</dd>
- <dt><code>fill</code></dt>
- <dd>Le contenu remplacé est dimensionné pour remplir la boîte de contenu. La taille réelle de l'objet est déterminée grâce à la hauteur et à la largeur de l'élément. Il est donc étiré afin de remplir la boîte.</dd>
- <dt><code>none</code></dt>
- <dd>Le contenu remplacé n'est pas redimensionné à l'intérieur de l'élément.</dd>
- <dt><code>scale-down</code></dt>
- <dd>Le contenu est dimensionné comme si <code>none</code> ou <code>contain</code> étaient spécifiés, on prend celui qui aboutirait à une taille réelle plus petite.</dd>
-</dl>
+- `contain`
+  - : Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant.
+- `cover`
+  - : Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné.
+- `fill`
+  - : Le contenu remplacé est dimensionné pour remplir la boîte de contenu. La taille réelle de l'objet est déterminée grâce à la hauteur et à la largeur de l'élément. Il est donc étiré afin de remplir la boîte.
+- `none`
+  - : Le contenu remplacé n'est pas redimensionné à l'intérieur de l'élément.
+- `scale-down`
+  - : Le contenu est dimensionné comme si `none` ou `contain` étaient spécifiés, on prend celui qui aboutirait à une taille réelle plus petite.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+```html
+<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
 
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/&gt;
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
 
-  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
 
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/&gt;
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
 
-  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
 
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/&gt;
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
 
-  &lt;h2&gt;object-fit: none&lt;/h2&gt;
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
 
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/&gt;
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
 
-  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
 
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/&gt;
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
 
-&lt;/div&gt;</pre>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">h2 {
+```css
+h2 {
   font-family: 'Courier New', monospace;
   font-size: 1em;
   margin: 1em 0 0.3em;
@@ -134,52 +134,31 @@ img {
 .scale-down {
   object-fit: scale-down;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 500, 450)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td>Les mots-clés <code>from-image</code> et <code>flip</code> ont été ajoutés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.object-fit")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("background-size")}}</li>
- <li>Les autres propriétés CSS liées aux images :
-  <ul>
-   <li>{{cssxref("object-position")}}</li>
-   <li>{{cssxref("image-orientation")}}</li>
-   <li>{{cssxref("image-rendering")}}</li>
-   <li>{{cssxref("image-resolution")}}</li>
-  </ul>
- </li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 500, 450)}}
+
+## Spécifications
+
+| Spécification                                                                    | État                             | Commentaires                                          |
+| -------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}} | {{Spec2('CSS4 Images')}} | Les mots-clés `from-image` et `flip` ont été ajoutés. |
+| {{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}} | {{Spec2('CSS3 Images')}} | Définition initiale.                                  |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.object-fit")}}
+
+## Voir aussi
+
+- {{cssxref("background-size")}}
+- Les autres propriétés CSS liées aux images :
+
+  - {{cssxref("object-position")}}
+  - {{cssxref("image-orientation")}}
+  - {{cssxref("image-rendering")}}
+  - {{cssxref("image-resolution")}}
diff --git a/files/fr/web/css/object-position/index.md b/files/fr/web/css/object-position/index.md
index 8ef2e87a95..6028bcbbfd 100644
--- a/files/fr/web/css/object-position/index.md
+++ b/files/fr/web/css/object-position/index.md
@@ -7,20 +7,19 @@ tags:
   - Reference
 translation_of: Web/CSS/object-position
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>object-position</code></strong> détermine l'alignement d'un <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">élément remplacé</a> au sein de sa boîte. Les zones de la boîtes qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément.</p>
+La propriété **`object-position`** détermine l'alignement d'un [élément remplacé](/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9) au sein de sa boîte. Les zones de la boîtes qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément.
 
-<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div>
+{{EmbedInteractiveExample("pages/css/object-position.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}.</p>
-</div>
+> **Note :** Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Valeurs de positionnement */
-/* Type &lt;position&gt;           */
+```css
+/* Valeurs de positionnement */
+/* Type <position>           */
 object-position: center top;
 object-position: 100px 50px;
 
@@ -28,30 +27,30 @@ object-position: 100px 50px;
 object-position: inherit;
 object-position: initial;
 object-position: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;position&gt;")}}, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément.</dd>
-</dl>
+- `<position>`
+  - : Une valeur de type {{cssxref("&lt;position&gt;")}}, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
-&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
-</pre>
+```html
+<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">img {
+```css
+img {
    width: 300px;
    height: 250px;
    border: 1px solid black;
@@ -67,46 +66,29 @@ object-position: unset;
 #object-position-2 {
   object-position: 100% 10%;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '100%','300px')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.object-position")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres propriétés CSS liées aux images :
-  <ul>
-   <li>{{cssxref("object-fit")}}</li>
-   <li>{{cssxref("image-orientation")}}</li>
-   <li>{{cssxref("image-rendering")}}</li>
-   <li>{{cssxref("image-resolution")}}</li>
-  </ul>
- </li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '100%','300px')}}
+
+## Spécifications
+
+| Spécification                                                                                | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Images', '#the-object-position', 'object-position')}} | {{Spec2('CSS3 Images')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.object-position")}}
+
+## Voir aussi
+
+- Les autres propriétés CSS liées aux images :
+
+  - {{cssxref("object-fit")}}
+  - {{cssxref("image-orientation")}}
+  - {{cssxref("image-rendering")}}
+  - {{cssxref("image-resolution")}}
diff --git a/files/fr/web/css/offset-anchor/index.md b/files/fr/web/css/offset-anchor/index.md
index 8d0243dfcc..80bbff84c8 100644
--- a/files/fr/web/css/offset-anchor/index.md
+++ b/files/fr/web/css/offset-anchor/index.md
@@ -7,13 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/offset-anchor
 ---
-<div>{{cssref}}{{seecompattable}}</div>
+{{cssref}}{{seecompattable}}
 
-<p>La propriété CSS <strong><code>offset-anchor</code></strong> définit le point, à l'intérieur d'une boîte d'un élément, qui se déplace le long d'un chemin {{cssxref("offset-path")}}.</p>
+La propriété CSS **`offset-anchor`** définit le point, à l'intérieur d'une boîte d'un élément, qui se déplace le long d'un chemin {{cssxref("offset-path")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un movalues */
+```css
+/* Valeurs avec un movalues */
 offset-anchor: top;
 offset-anchor: bottom;
 offset-anchor: left;
@@ -22,11 +23,11 @@ offset-anchor: center;
 offset-anchor: auto;
 
 /* Valeurs de pourcentages */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 offset-anchor: 25% 75%;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 offset-anchor: 0 0;
 offset-anchor: 1cm 2cm;
 offset-anchor: 10ch 8em;
@@ -38,45 +39,46 @@ offset-anchor: right 3em bottom 10px;
 /* Valeurs globales */
 offset-anchor: inherit;
 offset-anchor: initial;
-offset-anchor: unset;</pre>
+offset-anchor: unset;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd><code>offset-anchor</code> reçoit la même valeur que {{cssxref("transform-origin")}} sauf si {{cssxref("offset-path")}} vaut <code>none</code>, dans ce cas, elle récupère la valeur de {{cssxref("offset-position")}}.</dd>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Une position ({{cssxref("&lt;position&gt;")}}) définie par un couple de coordonnées X/Y qui permet de placer un objet par rapport aux bords de sa boîte. On peut définir la position à partir de une à quatre valeurs. Pour plus d'informations, voir les pages sur {{cssxref("&lt;position&gt;")}} et {{cssxref("background-position")}}. La syntaxe à trois valeurs ne fonctionne pas pour <code>&lt;position&gt;</code>, excepté pour <code>background(-position)</code>.</dd>
-</dl>
+- `auto`
+  - : `offset-anchor` reçoit la même valeur que {{cssxref("transform-origin")}} sauf si {{cssxref("offset-path")}} vaut `none`, dans ce cas, elle récupère la valeur de {{cssxref("offset-position")}}.
+- `<position>`
+  - : Une position ({{cssxref("&lt;position&gt;")}}) définie par un couple de coordonnées X/Y qui permet de placer un objet par rapport aux bords de sa boîte. On peut définir la position à partir de une à quatre valeurs. Pour plus d'informations, voir les pages sur {{cssxref("&lt;position&gt;")}} et {{cssxref("background-position")}}. La syntaxe à trois valeurs ne fonctionne pas pour `<position>`, excepté pour `background(-position)`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, on dispose de trois éléments {{htmlelement("div")}} imbriqués chacun dans un élément {{htmlelement("section")}}. Chaque <code>&lt;div&gt;</code> se déplace sur le même chemin {{cssxref("offset-path")}} (une ligne horizontale mesurant 200 pixels). Les trois blocs possèdent une couleur ({{cssxref("background-color")}}) et une valeur <code>offset-anchor</code> différentes.</p>
+Dans l'exemple suivant, on dispose de trois éléments {{htmlelement("div")}} imbriqués chacun dans un élément {{htmlelement("section")}}. Chaque `<div>` se déplace sur le même chemin {{cssxref("offset-path")}} (une ligne horizontale mesurant 200 pixels). Les trois blocs possèdent une couleur ({{cssxref("background-color")}}) et une valeur `offset-anchor` différentes.
 
-<p>Chaque élément <code>&lt;section&gt;</code> a été mise en forme avec un dégradé linéaire afin de fournir une indication visuelle du chemin.</p>
+Chaque élément `<section>` a été mise en forme avec un dégradé linéaire afin de fournir une indication visuelle du chemin.
 
-<p>On peut voir que la première valeur, <code>auto</code>, déplace l'élément sur son centre. La deuxième et la troisième déplacent le <code>&lt;div&gt;</code> par le coin supérieur droit et le coin inférieur gauche respectivement.</p>
+On peut voir que la première valeur, `auto`, déplace l'élément sur son centre. La deuxième et la troisième déplacent le `<div>` par le coin supérieur droit et le coin inférieur gauche respectivement.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;section&gt;
-  &lt;div class=&quot;offset-anchor1&quot;&gt;&lt;/div&gt;
-&lt;/section&gt;
-&lt;section&gt;
-  &lt;div class=&quot;offset-anchor2&quot;&gt;&lt;/div&gt;
-&lt;/section&gt;
-&lt;section&gt;
-  &lt;div class=&quot;offset-anchor3&quot;&gt;&lt;/div&gt;
-&lt;/section&gt;
-</pre>
+```html
+<section>
+  <div class="offset-anchor1"></div>
+</section>
+<section>
+  <div class="offset-anchor2"></div>
+</section>
+<section>
+  <div class="offset-anchor3"></div>
+</section>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   offset-path: path('M 0,20 L 200,20');
   animation: move 3000ms infinite alternate ease-in-out;
   width: 40px;
@@ -111,40 +113,28 @@ section {
   100% {
     offset-distance: 100%;
   }
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '100%', '300')}}</p>
+{{EmbedLiveSample('Exemples', '100%', '300')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Motion Path Level 1', '#offset-anchor-property', 'offset-anchor')}}</td>
-   <td>{{Spec2('Motion Path Level 1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Motion Path Level 1', '#offset-anchor-property', 'offset-anchor')}} | {{Spec2('Motion Path Level 1')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.offset-anchor")}}</p>
+{{Compat("css.properties.offset-anchor")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("offset")}}</li>
- <li>{{cssxref("offset-distance")}}</li>
- <li>{{cssxref("offset-rotation")}}</li>
- <li><a href="/fr/docs/Web/SVG/Tutorial/Paths">L'élément SVG <code>&lt;path&gt;</code></a></li>
-</ul>
+- {{cssxref("offset")}}
+- {{cssxref("offset-distance")}}
+- {{cssxref("offset-rotation")}}
+- [L'élément SVG `<path>`](/fr/docs/Web/SVG/Tutorial/Paths)
diff --git a/files/fr/web/css/offset-distance/index.md b/files/fr/web/css/offset-distance/index.md
index 5189bfdf52..a1fea3e358 100644
--- a/files/fr/web/css/offset-distance/index.md
+++ b/files/fr/web/css/offset-distance/index.md
@@ -9,44 +9,46 @@ tags:
   - offset-distance
 translation_of: Web/CSS/offset-distance
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>offset-distance</code></strong> définit une position le long d'un chemin {{CSSxRef("offset-path")}}.</p>
+La propriété **`offset-distance`** définit une position le long d'un chemin {{CSSxRef("offset-path")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeur par défaut */
+```css
+/* Valeur par défaut */
 offset-distance: 0;
 
 /* La position à la moitié de offset-path */
 offset-distance: 50%;
 
 /* Une position absolue le long du chemin */
-offset-distance: 40px;</pre>
+offset-distance: 40px;
+```
 
-<dl>
- <dt><code>{{cssxref('&lt;length-percentage&gt;')}}</code></dt>
- <dd>Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}). La valeur 100% représente la longueur totale du chemin (lorsque <code>offset-path</code> est défini par une forme simple ou grâce à la fonction <code>path()</code>).</dd>
-</dl>
+- `{{cssxref('&lt;length-percentage&gt;')}}`
+  - : Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}). La valeur 100% représente la longueur totale du chemin (lorsque `offset-path` est défini par une forme simple ou grâce à la fonction `path()`).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Animation">Animation</h3>
+### Animation
 
-<p>La notion de mouvement contenue dans <em>CSS Motion Path</em> vient principalement de la propriété <code>offset-distance</code>. Si on souhaite animer un élément le long du chemin, on définira un chemin avec {{cssxref('offset-path')}} et on utilisera une animation qui fera évoluer <code>offset-distance</code> de <code>0%</code> à <code>100%</code>.</p>
+La notion de mouvement contenue dans _CSS Motion Path_ vient principalement de la propriété `offset-distance`. Si on souhaite animer un élément le long du chemin, on définira un chemin avec {{cssxref('offset-path')}} et on utilisera une animation qui fera évoluer `offset-distance` de `0%` à `100%`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div id="motion-demo"&gt;&lt;/div&gt;
-</pre>
+```html
+<div id="motion-demo"></div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#motion-demo {
+```css
+#motion-demo {
   offset-path: path('M20,20 C20,100 200,0 200,100');
   animation: move 3000ms infinite alternate ease-in-out;
   width: 40px;
@@ -61,37 +63,23 @@ offset-distance: 40px;</pre>
   100% {
     offset-distance: 100%;
   }
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Animation')}}</p>
+{{EmbedLiveSample('Animation')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Motion Path Level 1', '#offset-distance-property', 'offset-distance')}}</td>
-   <td>{{Spec2('Motion Path Level 1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Motion Path Level 1', '#offset-distance-property', 'offset-distance')}} | {{Spec2('Motion Path Level 1')}} | Définition initiale. |
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<div class="note">
-<p><strong>Note :</strong> Dans les versions antérieures de la spécification, cette propriété était intitulée <code>motion-offset</code>.</p>
-</div>
+> **Note :** Dans les versions antérieures de la spécification, cette propriété était intitulée `motion-offset`.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.offset-distance")}}</p>
+{{Compat("css.properties.offset-distance")}}
diff --git a/files/fr/web/css/offset-path/index.md b/files/fr/web/css/offset-path/index.md
index 3a3b342f15..2db429ad59 100644
--- a/files/fr/web/css/offset-path/index.md
+++ b/files/fr/web/css/offset-path/index.md
@@ -7,23 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/offset-path
 ---
-<div>{{SeeCompatTable}}{{CSSRef}}</div>
+{{SeeCompatTable}}{{CSSRef}}
 
-<p>La propriété <code><strong>offset</strong></code><strong><code>-path</code></strong> définit le tracé d'un mouvement sur lequel un élément est positionné, relativement au conteneur parent ou au système de coordonnées SVG.</p>
+La propriété **`offset`\*\***`-path`\*\* définit le tracé d'un mouvement sur lequel un élément est positionné, relativement au conteneur parent ou au système de coordonnées SVG.
 
-<div>{{EmbedInteractiveExample("pages/css/offset-path.html")}}</div>
+{{EmbedInteractiveExample("pages/css/offset-path.html")}}
 
-<p>Cette propriété sert à définir un chemin qu'un élément va suivre lors d'une animation.</p>
+Cette propriété sert à définir un chemin qu'un élément va suivre lors d'une animation.
 
-<p>La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété {{cssxref("offset-distance")}}. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée <code>0</code> de {{cssxref("offset-distance")}} ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.</p>
+La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété {{cssxref("offset-distance")}}. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée `0` de {{cssxref("offset-distance")}} ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.
 
-<div class="note">
-<p><strong>Note :</strong> Dans des versions antérieures des spécifications, cette propriété était intitulée <code>motion-path</code>. Le nom a été modifié en <code>offset-path</code> afin de décrire un chemin statique plutôt qu'un chemin en mouvement.</p>
-</div>
+> **Note :** Dans des versions antérieures des spécifications, cette propriété était intitulée `motion-path`. Le nom a été modifié en `offset-path` afin de décrire un chemin statique plutôt qu'un chemin en mouvement.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeur par défaut */
+```css
+/* Valeur par défaut */
 offset-path: none;
 
 /* Valeurs avec une notation fonctionnelle */
@@ -46,41 +45,38 @@ offset-path: stroke-box;
 offset-path: inherit;
 offset-path: initial;
 offset-path: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<div class="warning">
-  <p><strong>Attention :</strong> À l'heure actuelle, seule la notation <code>path()</code> est prise en charge par les navigateurs.</p>
-</div>
-
-<dl>
- <dt><code>ray()</code></dt>
- <dd>Cette notation fonctionnelle prend jusqu'à trois valeurs et définit un chemin qui est un ligne commençant à la position de la boîte et qui suit la direction de l'angle indiqué (la valeur 0deg correspond à une direction verticale, vers le haut et les angles allant dans le sens horaire). La valeur de la taille est définie de façon semblable à celle utilisée pour les dégradés entre <code>closest-side</code> et <code>farthest-corner</code> avec le mot-clé <code>contain</code>.</dd>
- <dt><code>url()</code></dt>
- <dd>Cette notation fonctionnelle permet de faire référence à l'identifiant d'une forme SVG : <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code> ou <code>rect</code> et d'utiliser la géométrie de la forme visée pour construire le chemin.</dd>
- <dt><code>&lt;basic-shape&gt;</code></dt>
- <dd>Cette valeur indique une <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">forme CSS</a> en utilisant les notations fonctionnelles <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code> ou <code>path()</code>.
- <dl>
-  <dt><code>path()</code></dt>
-  <dd>Une chaîne de caractères qui définit un chemin avec la syntaxe des coordonnées SVG. À l'heure actuelle (16 novembre 2018), c'est la seule valeur qui est prise en charge.</dd>
- </dl>
- </dd>
- <dt><code>none</code></dt>
- <dd>Aucun chemin de mouvement n'est indiqué.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+> **Attention :** À l'heure actuelle, seule la notation `path()` est prise en charge par les navigateurs.
+
+- `ray()`
+  - : Cette notation fonctionnelle prend jusqu'à trois valeurs et définit un chemin qui est un ligne commençant à la position de la boîte et qui suit la direction de l'angle indiqué (la valeur 0deg correspond à une direction verticale, vers le haut et les angles allant dans le sens horaire). La valeur de la taille est définie de façon semblable à celle utilisée pour les dégradés entre `closest-side` et `farthest-corner` avec le mot-clé `contain`.
+- `url()`
+  - : Cette notation fonctionnelle permet de faire référence à l'identifiant d'une forme SVG : `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline` ou `rect` et d'utiliser la géométrie de la forme visée pour construire le chemin.
+- `<basic-shape>`
+
+  - : Cette valeur indique une [forme CSS](/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes) en utilisant les notations fonctionnelles `circle()`, `ellipse()`, `inset()`, `polygon()` ou `path()`.
+
+    - `path()`
+      - : Une chaîne de caractères qui définit un chemin avec la syntaxe des coordonnées SVG. À l'heure actuelle (16 novembre 2018), c'est la seule valeur qui est prise en charge.
+
+- `none`
+  - : Aucun chemin de mouvement n'est indiqué.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>L'exemple qui suit est tiré de <a href="https://codepen.io/ericwilligers/pen/bwVkNa">cette démo présente sur CodePen</a>. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés <code>offset-path</code> utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe <code>:path()</code> est utilisée avec <code>offset-path</code> et que le document SVG contient <code>&lt;path&gt;</code>. Si on compare ces deux données, on verra qu'elles sont identiques.</p>
+L'exemple qui suit est tiré de [cette démo présente sur CodePen](https://codepen.io/ericwilligers/pen/bwVkNa). Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés `offset-path` utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe `:path()` est utilisée avec `offset-path` et que le document SVG contient `<path>`. Si on compare ces deux données, on verra qu'elles sont identiques.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.scissorHalf {
+```css
+.scissorHalf {
   offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
   animation: followpath 4s linear infinite;
 }
@@ -90,33 +86,35 @@ offset-path: unset;
      motion-offset: 100%;
      offset-distance: 100%;
    }
-}</pre>
+}
+```
 
-<h3 id="SVG">SVG</h3>
+### SVG
 
-<p>Les moitiés supérieure et inférieure des ciseaux apparaîtront dans le coin en haut à gauche du canevas si elles ne sont pas positionnés sur le point de départ avec <code>offset-path</code>.</p>
+Les moitiés supérieure et inférieure des ciseaux apparaîtront dans le coin en haut à gauche du canevas si elles ne sont pas positionnés sur le point de départ avec `offset-path`.
 
-<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg"
+```html
+<svg xmlns="http://www.w3.org/2000/svg"
      width="700"
      height="450"
-     viewBox="350 0 1400 900"&gt;
-  &lt;title&gt;House and Scissors&lt;/title&gt;
-  &lt;rect x="595"
+     viewBox="350 0 1400 900">
+  <title>House and Scissors</title>
+  <rect x="595"
         y="423"
         width="610"
         height="377"
-        fill="blue" /&gt;
-  &lt;polygon points="506,423 900,190 1294,423"
-           fill="yellow" /&gt;
-  &lt;polygon points="993,245 993,190 1086,190 1086,300"
-           fill="red" /&gt;
-  &lt;path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
+        fill="blue" />
+  <polygon points="506,423 900,190 1294,423"
+           fill="yellow" />
+  <polygon points="993,245 993,190 1086,190 1086,300"
+           fill="red" />
+  <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
         fill="none"
         stroke="black"
         stroke-width="13"
         stroke-linejoin="round"
-        stroke-linecap="round" /&gt;
-  &lt;path id="firstScissorHalf" class="scissorHalf"
+        stroke-linecap="round" />
+  <path id="firstScissorHalf" class="scissorHalf"
         d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
         transform="translate(0,0)"
         fill="green"
@@ -124,8 +122,8 @@ offset-path: unset;
         stroke-width="5"
         stroke-linejoin="round"
         stroke-linecap="round"
-        fill-rule="evenodd" /&gt;
-  &lt;path id="secondScissorHalf" class="scissorHalf"
+        fill-rule="evenodd" />
+  <path id="secondScissorHalf" class="scissorHalf"
         d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
         transform="translate(0,0)"
         fill="forestgreen"
@@ -133,43 +131,31 @@ offset-path: unset;
         stroke-width="5"
         stroke-linejoin="round"
         stroke-linecap="round"
-        fill-rule="evenodd" /&gt;
-&lt;/svg&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '100%', '450')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Motion Path Level 1', '#offset-path-property', 'offset-path')}}</td>
-   <td>{{Spec2('Motion Path Level 1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.offset-path")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("offset")}}</li>
- <li>{{cssxref("offset-distance")}}</li>
- <li>{{cssxref("offset-rotation")}}</li>
- <li>{{cssxref("offset-anchor")}}</li>
- <li>{{cssxref("offset-position")}}</li>
- <li>{{SVGElement("path")}}</li>
-</ul>
+        fill-rule="evenodd" />
+</svg>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '100%', '450')}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Motion Path Level 1', '#offset-path-property', 'offset-path')}} | {{Spec2('Motion Path Level 1')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.offset-path")}}
+
+## Voir aussi
+
+- {{cssxref("offset")}}
+- {{cssxref("offset-distance")}}
+- {{cssxref("offset-rotation")}}
+- {{cssxref("offset-anchor")}}
+- {{cssxref("offset-position")}}
+- {{SVGElement("path")}}
diff --git a/files/fr/web/css/offset-position/index.md b/files/fr/web/css/offset-position/index.md
index a73e9d4b41..6338de06f9 100644
--- a/files/fr/web/css/offset-position/index.md
+++ b/files/fr/web/css/offset-position/index.md
@@ -3,13 +3,14 @@ title: offset-position
 slug: Web/CSS/offset-position
 translation_of: Web/CSS/offset-position
 ---
-<div>{{CSSRef}}{{seecompattable}}</div>
+{{CSSRef}}{{seecompattable}}
 
-<p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>offset-position</code></strong> définit la <a href="https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position">position initiale</a> de {{cssxref("offset-path")}}.</p>
+La propriété [CSS](/fr/docs/Web/CSS) **`offset-position`** définit la [position initiale](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position) de {{cssxref("offset-path")}}.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="brush: css no-line-numbers">/* Valeurs de mots clefs */
+```css
+/* Valeurs de mots clefs */
 offset-position: auto;
 offset-position: top;
 offset-position: bottom;
@@ -17,10 +18,10 @@ offset-position: left;
 offset-position: right;
 offset-position: center;
 
-/* Valeurs de &lt;pourcentage&gt; */
+/* Valeurs de <pourcentage> */
 offset-position: 25% 75%;
 
-/* Valeurs de &lt;longueur&gt; */
+/* Valeurs de <longueur> */
 offset-position: 0 0;
 offset-position: 1cm 2cm;
 offset-position: 10ch 8em;
@@ -35,33 +36,33 @@ offset-position: top right 10px;
 offset-position: inherit;
 offset-position: initial;
 offset-position: unset;
-</pre>
+```
 
-<h3 id="Values">Values</h3>
+### Values
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}.</dd>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Une {{cssxref("&lt;position&gt;")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme <code>center</code>. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}.</dd>
-</dl>
+- `auto`
+  - : La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}.
+- `<position>`
+  - : Une {{cssxref("&lt;position&gt;")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme `center`. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}.
 
-<h2 id="Définition_formelle">Définition formelle</h2>
+## Définition formelle
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntax_formelle">Syntax formelle</h2>
+## Syntax formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Définir_la_valeur_initiale_de_offset-position">Définir la valeur initiale de offset-position</h3>
+### Définir la valeur initiale de offset-position
 
-<pre class="brush: html">&lt;div id="motion-demo"&gt;&lt;/div&gt;
-</pre>
+```html
+<div id="motion-demo"></div>
+```
 
-<pre class="brush: css">#motion-demo {
+```css
+#motion-demo {
   offset-path: path('M20,20 C20,100 200,0 200,100');
   offset-position: left top;
   animation: move 3000ms infinite alternate ease-in-out;
@@ -77,27 +78,15 @@ offset-position: unset;
   100% {
     offset-distance: 100%;
   }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Motion Path Level 1', '#offset-position-property', 'offset-position')}}</td>
-   <td>{{Spec2('Motion Path Level 1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_de_navigateur">Compatibilité de navigateur</h2>
-
-<p>{{Compat("css.properties.offset-position")}}</p>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                                       | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------- |
+| {{SpecName('Motion Path Level 1', '#offset-position-property', 'offset-position')}} | {{Spec2('Motion Path Level 1')}} | Définition initiale |
+
+## Compatibilité de navigateur
+
+{{Compat("css.properties.offset-position")}}
diff --git a/files/fr/web/css/offset-rotate/index.md b/files/fr/web/css/offset-rotate/index.md
index 7c9d51d5d7..eceff4f24f 100644
--- a/files/fr/web/css/offset-rotate/index.md
+++ b/files/fr/web/css/offset-rotate/index.md
@@ -8,13 +8,14 @@ tags:
   - offset-rotate
 translation_of: Web/CSS/offset-rotate
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>offset-rotate</code></strong> définit l'orientation et la direction de l'élément lorsqu'il est positionné le long du chemin représenté par {{cssxref("offset-path")}}.</p>
+La propriété **`offset-rotate`** définit l'orientation et la direction de l'élément lorsqu'il est positionné le long du chemin représenté par {{cssxref("offset-path")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Suit la direction du chemin avec un éventuel */
+```css
+/* Suit la direction du chemin avec un éventuel */
 /* décalage angulaire */
 offset-rotate: auto;
 offset-rotate: auto 45deg;
@@ -26,36 +27,28 @@ offset-rotate: reverse;
 /* Conserve une rotation constante quelle que soit la position
 /* sur le chemin  */
 offset-rotate: 90deg;
-offset-rotate: .5turn;</pre>
-
-<dl>
- <dt><code><dfn>auto</dfn></code></dt>
- <dd>
- <p>L'élément est tourné avec l'angle donné par la direction du chemin {{cssxref("offset-path")}}, relativement à l'axe des abscisses. C'est la valeur par défaut.</p>
- </dd>
- <dt><code>{{cssxref("&lt;angle&gt;")}}</code></dt>
- <dd>
- <p>L'élément est tourné d'un angle fixe (indiqué dans le sens horaire).</p>
- </dd>
- <dt><code><dfn>auto &lt;angle&gt;</dfn></code></dt>
- <dd>
- <p>Si le mot-clé <code>auto</code> est suivi d'une valeur {{cssxref("&lt;angle&gt;")}}, l'élément est tourné de l'angle donné par rapport à la direction du chemin.</p>
- </dd>
- <dt><code><dfn>reverse</dfn></code></dt>
- <dd>
- <p>L'élément est tourné de façon similaire à <code>auto</code>, mais fait face à la direction opposée. Cette valeur est équivalente à <code>auto 180deg</code>.</p>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+offset-rotate: .5turn;
+```
+
+- `auto`
+  - : L'élément est tourné avec l'angle donné par la direction du chemin {{cssxref("offset-path")}}, relativement à l'axe des abscisses. C'est la valeur par défaut.
+- `{{cssxref("&lt;angle&gt;")}}`
+  - : L'élément est tourné d'un angle fixe (indiqué dans le sens horaire).
+- `auto <angle>`
+  - : Si le mot-clé `auto` est suivi d'une valeur {{cssxref("&lt;angle&gt;")}}, l'élément est tourné de l'angle donné par rapport à la direction du chemin.
+- `reverse`
+  - : L'élément est tourné de façon similaire à `auto`, mais fait face à la direction opposée. Cette valeur est équivalente à `auto 180deg`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 40px;
   height: 40px;
   background: #2BC4A2;
@@ -79,43 +72,31 @@ div:nth-child(3) {
   100% {
     offset-distance: 100%;
   }
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;&lt;/div&gt;
-&lt;div&gt;&lt;/div&gt;
-&lt;div&gt;&lt;/div&gt;</pre>
+```html
+<div></div>
+<div></div>
+<div></div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Motion Path Level 1', '#offset-rotate-property', 'offset-rotate')}}</td>
-   <td>{{Spec2('Motion Path Level 1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Motion Path Level 1', '#offset-rotate-property', 'offset-rotate')}} | {{Spec2('Motion Path Level 1')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<div class="note">
-<p><strong>Note :</strong> Les versions antérieures de la spécification utilisait le nom <code>motion-rotation</code> pour cette propriété.</p>
-</div>
+> **Note :** Les versions antérieures de la spécification utilisait le nom `motion-rotation` pour cette propriété.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.offset-rotate")}}</p>
+{{Compat("css.properties.offset-rotate")}}
diff --git a/files/fr/web/css/offset/index.md b/files/fr/web/css/offset/index.md
index 07d09681ff..60f20cf3ca 100644
--- a/files/fr/web/css/offset/index.md
+++ b/files/fr/web/css/offset/index.md
@@ -9,17 +9,16 @@ tags:
   - Reference
 translation_of: Web/CSS/offset
 ---
-<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{Draft}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>offset</code></strong> est une propriété raccourcie pour les propriétés {{cssxref("offset-path")}}, {{cssxref("offset-position")}}, {{cssxref("offset-distance")}}, {{cssxref("offset-rotate")}} et {{cssxref("offset-anchor")}}. Elle permet d'animer un élément sur un tracé défini.</p>
+La propriété **`offset`** est une propriété raccourcie pour les propriétés {{cssxref("offset-path")}}, {{cssxref("offset-position")}}, {{cssxref("offset-distance")}}, {{cssxref("offset-rotate")}} et {{cssxref("offset-anchor")}}. Elle permet d'animer un élément sur un tracé défini.
 
-<div class="note">
-<p><strong>Note :</strong> Dans les premières versions de la spécification, cette propriété était intitulée <code>motion</code>.</p>
-</div>
+> **Note :** Dans les premières versions de la spécification, cette propriété était intitulée `motion`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Position de décalage */
+```css
+/* Position de décalage */
 offset: auto
 offset: 10px 30px;
 offset: none;
@@ -40,22 +39,24 @@ offset: url(circle.svg) 50px 20deg;
 offset: ray(45deg closest-side) / 40px 20px;
 offset: url(arc.svg) 2cm / 0.5cm 3cm;
 offset: url(arc.svg) 30deg / 50px 100px;
-</pre>
+```
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="offsetElement"&gt;&lt;/div&gt;
-</pre>
+```html
+<div id="offsetElement"></div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">@keyframes move {
+```css
+@keyframes move {
   from {
     offset-distance: 0%;
   }
@@ -72,31 +73,20 @@ offset: url(arc.svg) 30deg / 50px 100px;
   offset: path("M 100 100 L 300 100 L 200 300 z") auto;
   animation: move 3s linear infinite;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 350, 350)}}</p>
+{{EmbedLiveSample("Exemples", 350, 350)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}</td>
-   <td>{{Spec2('Motion Path Level 1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                         | Commentaires         |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}} | {{Spec2('Motion Path Level 1')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.offset")}}</p>
+{{Compat("css.properties.offset")}}
diff --git a/files/fr/web/css/opacity/index.md b/files/fr/web/css/opacity/index.md
index 4f33f117e4..1f6f054b5f 100644
--- a/files/fr/web/css/opacity/index.md
+++ b/files/fr/web/css/opacity/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/opacity
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>opacity</code></strong> définit la transparence d'un élément. Autrement dit, elle permet de définir le degré de visibilité de l'arrière-plan sur lequel est placé l'élément.</p>
+La propriété **`opacity`** définit la transparence d'un élément. Autrement dit, elle permet de définir le degré de visibilité de l'arrière-plan sur lequel est placé l'élément.
 
-<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
+{{EmbedInteractiveExample("pages/css/opacity.html")}}
 
-<p>La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser <code>opacity</code>, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : <code>background: rgba(0, 0, 0, 0.4);</code>).</p>
+La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser `opacity`, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : `background: rgba(0, 0, 0, 0.4);`).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs numériques */
+```css
+/* Valeurs numériques */
 /* Totalement opaque  */
 opacity: 1;
 opacity: 1.0;
@@ -33,47 +34,32 @@ opacity: 0;
 opacity: inherit;
 opacity: initial;
 opacity: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} dans l'intervalle [<code>0.0</code>, <code>1.0]</code> qui représente l'opacité de l'élément, la valeur de son canal alpha. Les valeurs en dehors de cet intervalle seront considérées comme valides mais ramenées dans cet intervalle (ainsi <code>6</code> sera équivalent à <code>1</code> et -2 sera équivalent à <code>0</code>).
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <th>Valeur</th>
-    <th>Signification</th>
-   </tr>
-   <tr>
-    <td><code>0</code></td>
-    <td>L'élément est complètement transparent (invisible).</td>
-   </tr>
-   <tr>
-    <td>Toute valeur de type {{cssxref("&lt;number&gt;")}} strictement comprise entre <code>0</code> et <code>1</code></td>
-    <td>L'élément est partiellement transparent, on peut voir l'arrière-plan.</td>
-   </tr>
-   <tr>
-    <td><code>1</code> (la valeur par défaut)</td>
-    <td>L'élément est complètement opaque.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<number>`
+
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} dans l'intervalle \[`0.0`, `1.0]` qui représente l'opacité de l'élément, la valeur de son canal alpha. Les valeurs en dehors de cet intervalle seront considérées comme valides mais ramenées dans cet intervalle (ainsi `6` sera équivalent à `1` et -2 sera équivalent à `0`).
+
+    | Valeur                                                                                              | Signification                                                         |
+    | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+    | `0`                                                                                                 | L'élément est complètement transparent (invisible).                   |
+    | Toute valeur de type {{cssxref("&lt;number&gt;")}} strictement comprise entre `0` et `1` | L'élément est partiellement transparent, on peut voir l'arrière-plan. |
+    | `1` (la valeur par défaut)                                                                          | L'élément est complètement opaque.                                    |
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
 }
 
@@ -89,24 +75,26 @@ opacity: unset;
   /* Le texte est clairement visible */
   opacity: 0.9;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="leger"&gt;On arrive à peine à lire.&lt;/div&gt;
-&lt;div class="moyen"&gt;On voit mieux.&lt;/div&gt;
-&lt;div class="lourd"&gt;Ceci est plus simple à lire.&lt;/div&gt;
-</pre>
+```html
+<div class="leger">On arrive à peine à lire.</div>
+<div class="moyen">On voit mieux.</div>
+<div class="lourd">Ceci est plus simple à lire.</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_simple', '640', '64')}}</p>
+{{EmbedLiveSample('Exemple_simple', '640', '64')}}
 
-<h3 id="Jouer_sur_l’opacité_avec_hover">Jouer sur l’opacité avec <code>:hover</code></h3>
+### Jouer sur l’opacité avec `:hover`
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">img.opacity {
+```css
+img.opacity {
   opacity: 1;
   /* IE8 et antérieurs */
   filter: alpha(opacity=100);
@@ -118,63 +106,44 @@ img.opacity:hover {
   opacity: 0.5;
   filter: alpha(opacity=50);
   zoom: 1;
-}</pre>
+}
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png"
+```html
+<img src="//developer.mozilla.org/media/img/mdn-logo.png"
      alt="MDN logo" width="128" height="146"
-     class="opacity"&gt;
-</pre>
+     class="opacity">
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Jouer_sur_l’opacité_avec_hover", '150', '175')}}</p>
+{{EmbedLiveSample("Jouer_sur_l’opacité_avec_hover", '150', '175')}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision.</p>
+Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision.
 
-<p>Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du <a href="https://www.w3.org/WAI/intro/wcag">WCAG</a>  conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus).</p>
+Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du [WCAG](https://www.w3.org/WAI/intro/wcag)  conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus).
 
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM</a></li>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"><em>Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [Vérificateur 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)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>opacity</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
-   <td>{{Spec2('CSS3 Colors')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                                   | Commentaires                          |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}} | {{Spec2('CSS3 Transitions')}} | `opacity` peut désormais être animée. |
+| {{SpecName('CSS3 Colors', '#opacity', 'opacity')}}                 | {{Spec2('CSS3 Colors')}}         | Définition initiale.                  |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.opacity")}}</p>
+{{Compat("css.properties.opacity")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">La documentation MSDN de Microsoft sur <code>filter:alpha(opacity=xx)</code></a></li>
-</ul>
+- [La documentation MSDN de Microsoft sur `filter:alpha(opacity=xx)`](https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx)
diff --git a/files/fr/web/css/order/index.md b/files/fr/web/css/order/index.md
index e41e565c0f..1c00e89369 100644
--- a/files/fr/web/css/order/index.md
+++ b/files/fr/web/css/order/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/order
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>order</code></strong> définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de <code>order</code>. Les éléments ayant la même valeur pour <code>order</code> seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document.</p>
+La propriété **`order`** définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de `order`. Les éléments ayant la même valeur pour `order` seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document.
 
-<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div>
+{{EmbedInteractiveExample("pages/css/order.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> <code>order</code> est uniquement conçue pour affecter <strong>l'ordre visuel</strong>. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. <code><strong>order</strong></code> ne doit pas être utilisée avec les média non visuels comme les informations vocales.</p>
-</div>
+> **Note :** `order` est uniquement conçue pour affecter **l'ordre visuel**. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. **`order`** ne doit pas être utilisée avec les média non visuels comme les informations vocales.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs entières (type &lt;integer&gt;) */
+```css
+/* Valeurs entières (type <integer>) */
 /* positives ou négatives */
 order: 5;
 order: -5;
@@ -28,99 +27,84 @@ order: -5;
 order: inherit;
 order: initial;
 order: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;integer&gt;</code></dt>
- <dd>Un nombre entier (cf. {{cssxref("&lt;integer&gt;")}}) indiquant l'ordre à appliquer pour l'élément.</dd>
-</dl>
+- `<integer>`
+  - : Un nombre entier (cf. {{cssxref("&lt;integer&gt;")}}) indiquant l'ordre à appliquer pour l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html;">&lt;div id='main'&gt;
-   &lt;article&gt;Lorem ipsum&lt;/article&gt;
-   &lt;nav&gt; consectetur adipisicing elit, sed do eiusmod&lt;/nav&gt;
-   &lt;aside&gt;tempor incididunt ut labore et dolore magna&lt;/aside&gt;
-&lt;/div&gt;</pre>
+```html
+<div id='main'>
+   <article>Lorem ipsum</article>
+   <nav> consectetur adipisicing elit, sed do eiusmod</nav>
+   <aside>tempor incididunt ut labore et dolore magna</aside>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>Grâce à ces déclarations CSS, on crée un disposition avec deux barres entourant un bloc de contenu. Le module de disposition des boîtes flexibles crée des bloc de tailles verticales égales et utilise autant d'espace horizontal qu'il y en a de disponible.</p>
+Grâce à ces déclarations CSS, on crée un disposition avec deux barres entourant un bloc de contenu. Le module de disposition des boîtes flexibles crée des bloc de tailles verticales égales et utilise autant d'espace horizontal qu'il y en a de disponible.
 
-<pre class="brush:css;">#main {
+```css
+#main {
   display: flex;
 }
 
-#main &gt; article {
+#main > article {
   flex:1;
   order: 2;
   border: 1px dotted orange;
 }
 
-#main &gt; nav {
+#main > nav {
   width: 200px;
   order: 1;
   border: 1px dotted blue;
 }
 
-#main &gt; aside {
+#main > aside {
   width: 200px;
   order: 3;
   border: 1px dotted blue;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>La propriété <code>order</code> créera une incohérence entre l'ordre de présentation visuelle et celui du DOM. Cela aura un impact négatif pour les utilisateurs avec des troubles de la vision et qui utilisent des outils d'assistance comme les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct.</p>
+La propriété `order` créera une incohérence entre l'ordre de présentation visuelle et celui du DOM. Cela aura un impact négatif pour les utilisateurs avec des troubles de la vision et qui utilisent des outils d'assistance comme les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct.
 
-<ul>
- <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/"><em>Flexbox &amp; the keyboard navigation disconnect — Tink</em> (en anglais)</a></li>
- <li><a href="https://adrianroselli.com/2015/09/source-order-matters.html"><em>Source Order Matters, Adrian Roselli</em> (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles du WCAG 1.3</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html"><em>Understanding Success Criterion 1.3.2, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [_Flexbox & the keyboard navigation disconnect — Tink_ (en anglais)](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
+- [_Source Order Matters, Adrian Roselli_ (en anglais)](https://adrianroselli.com/2015/09/source-order-matters.html)
+- [Comprendre les règles du WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- [_Understanding Success Criterion 1.3.2, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                             | Commentaires         |
+| ---------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS3 Flexbox', '#order-property', 'order')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.order")}}</p>
+{{Compat("css.properties.order")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de base</a></em></li>
- <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li>
- <li>Le guide sur la grille CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">La disposition en grille et l'accessibilité</a></em></li>
-</ul>
+- Le guide CSS sur les boîtes flexibles : _[Les concepts de base](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- Le guide CSS sur les boîtes flexibles : _[Ordonner les éléments flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_
+- Le guide sur la grille CSS : _[La disposition en grille et l'accessibilité](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)_
diff --git a/files/fr/web/css/orphans/index.md b/files/fr/web/css/orphans/index.md
index 7f6b33538a..1f6ed80e3e 100644
--- a/files/fr/web/css/orphans/index.md
+++ b/files/fr/web/css/orphans/index.md
@@ -7,41 +7,39 @@ tags:
   - Reference
 translation_of: Web/CSS/orphans
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>orphans</code></strong> définit le nombre <em>minimum</em> de lignes qui doivent rester en bas d'une <a href="/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s">page</a>, d'une région ou d'une <a href="/fr/docs/Web/CSS/Colonnes_CSS">colonne</a> dans un conteneur de bloc.</p>
+La propriété **`orphans`** définit le nombre _minimum_ de lignes qui doivent rester en bas d'une [page](/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s), d'une région ou d'une [colonne](/fr/docs/Web/CSS/Colonnes_CSS) dans un conteneur de bloc.
 
-<pre class="brush:css no-line-numbers">/* Valeur numérique entière */
+```css
+/* Valeur numérique entière */
 orphans: 3;
 
 /* Valeurs globales */
 orphans: inherit;
 orphans: initial;
 orphans: unset;
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> En typographie, un orphelin (<em>orphan</em> en anglais) est la première ligne d'un paragraphe qui apparaît isolée en bas d'une page (le paragraphe poursuivant sur la page suivante).</p>
-</div>
+> **Note :** En typographie, un orphelin (_orphan_ en anglais) est la première ligne d'un paragraphe qui apparaît isolée en bas d'une page (le paragraphe poursuivant sur la page suivante).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;integer&gt;</code></dt>
- <dd>Seules les valeurs positives sont autorisées. Le nombre de lignes qu'on souhaite avoir au minimum avant une rupture.</dd>
-</dl>
+- `<integer>`
+  - : Seules les valeurs positives sont autorisées. Le nombre de lignes qu'on souhaite avoir au minimum avant une rupture.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class=exemple&gt;
+```html
+<p class=exemple>
   Tout en causant ainsi, Alice était entrée dans une petite chambre
   bien rangée, et, comme elle s’y attendait, sur une petite table
   dans l’embrasure de la fenêtre, elle vit un éventail et deux ou
@@ -60,53 +58,36 @@ orphans: unset;
   remit bien vite la bouteille sur la table en se disant : « En voilà
   assez ; j’espère ne pas grandir davantage. Je ne puis déjà plus
   passer par la porte. Oh ! je voudrais bien n’avoir pas tant bu ! »
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   orphans: 4;
   columns: 3;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","600","500")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}</td>
-   <td>{{Spec2('CSS3 Fragmentation')}}</td>
-   <td>La propriété <code>orphans</code> est étendue pour s'appliquer à n'importe quel fragment comme les pages, les régions ou les colonnes.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.orphans")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("widows")}}</li>
- <li><a href="/fr/docs/Web/CSS/Média_paginés">Média paginés</a></li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","600","500")}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                     | Commentaires                                                                                                                |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}} | {{Spec2('CSS3 Fragmentation')}} | La propriété `orphans` est étendue pour s'appliquer à n'importe quel fragment comme les pages, les régions ou les colonnes. |
+| {{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}     | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                                                                        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.orphans")}}
+
+## Voir aussi
+
+- {{cssxref("widows")}}
+- [Média paginés](/fr/docs/Web/CSS/Média_paginés)
diff --git a/files/fr/web/css/outline-color/index.md b/files/fr/web/css/outline-color/index.md
index daf0293821..e652cbedd9 100644
--- a/files/fr/web/css/outline-color/index.md
+++ b/files/fr/web/css/outline-color/index.md
@@ -7,23 +7,24 @@ tags:
   - Reference
 translation_of: Web/CSS/outline-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>outline-color</code></strong> permet de définir la couleur avec laquelle on trace le conteur de l'élément. Ce contour est tracé autour de <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">la boîte de bordure</a> et peut être utilisé pour faire ressortir l'élément.</p>
+La propriété **`outline-color`** permet de définir la couleur avec laquelle on trace le conteur de l'élément. Ce contour est tracé autour de [la boîte de bordure](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) et peut être utilisé pour faire ressortir l'élément.
 
-<div>{{EmbedInteractiveExample("pages/css/outline-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/outline-color.html")}}
 
-<p>À la différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.La propriété <code>outline-color</code> est également synthétisée avec la propriété raccourcie {{cssxref("outline")}}.</p>
+À la différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.La propriété `outline-color` est également synthétisée avec la propriété raccourcie {{cssxref("outline")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p> </p>
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+
+```css
+/* Valeurs avec un mot-clé */
 outline-color: invert;
 
 /* Valeurs de couleur */
-/* Type &lt;color&gt;       */
+/* Type <color>       */
 outline-color: red;
 outline-color: #f92525;
 outline-color: rgb(30,222,121);
@@ -32,34 +33,35 @@ outline-color: rgb(30,222,121);
 outline-color: inherit;
 outline-color: initial;
 outline-color: unset;
-</pre>
+```
+
 
-<p> </p>
 
-<p>La propriété <code>outline-color</code> est définie avec une des valeurs listées ci-après.</p>
+La propriété `outline-color` est définie avec une des valeurs listées ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Voir la page {{cssxref("&lt;color&gt;")}} pour plus d'informations sur les valeurs utilisables avec ce type.</dd>
- <dt><code>invert</code></dt>
- <dd>Afin de s'assurer que la bordure est visible, on applique une inversion de couleur avec l'arrière-plan. Cela permet de renforcer le contraste, quelle que soit la couleur de l'arrière-plan. Cette valeur ne doit pas nécessairement être supportée par les navigateurs. Si elle ne l'est pas, ils considèreront la règle comme invalide.</dd>
-</dl>
+- `<color>`
+  - : Voir la page {{cssxref("&lt;color&gt;")}} pour plus d'informations sur les valeurs utilisables avec ce type.
+- `invert`
+  - : Afin de s'assurer que la bordure est visible, on applique une inversion de couleur avec l'arrière-plan. Cela permet de renforcer le contraste, quelle que soit la couleur de l'arrière-plan. Cette valeur ne doit pas nécessairement être supportée par les navigateurs. Si elle ne l'est pas, ils considèreront la règle comme invalide.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html;">&lt;p class="exemple"&gt;Mon contour est blue, da ba dee.&lt;/p&gt;</pre>
+```html
+<p class="exemple">Mon contour est blue, da ba dee.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css; highlight:[3]">.exemple {
+```css
+.exemple {
   /* Tout d'abord on utiliser outline */
   /* pour définir le contour          */
   outline: 2px solid;
@@ -67,63 +69,39 @@ outline-color: unset;
   /* Ensuite on précise sa couleur avec */
   /* outline-color                      */
   outline-color: #0000FF;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p><a href="/fr/docs/Web/CSS/:focus">L'utilisation d'un focus personnalisé</a> s'accompagne généralement d'une modification de la propriété {{cssxref("outline")}}. Si la couleur du contour est modifiée, il est nécessaire de vérifier que le contraste entre le contour et l'arrière-plan est suffisant afin que le contour puisse clairement être distingué.</p>
-
-<p>Le ratio de contraste est déterminé en comparaisant les luminosités des deux couleurs. Pour le contraste entre un texte et son arrière-plan, les recommandations <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a> requièrent un ratio de 4.5:1 pour le contenu textuel et un ratio de 3:1 pour les titres ou les textes plus grands (18.66px et en gras ou 24px ou plus grand).</p>
-
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM (en anglais)</a></li>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Aucun changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>outline-color</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.outline-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Le type de donnée {{cssxref("&lt;color&gt;")}}</li>
- <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Accessibilité
+
+[L'utilisation d'un focus personnalisé](/fr/docs/Web/CSS/:focus) s'accompagne généralement d'une modification de la propriété {{cssxref("outline")}}. Si la couleur du contour est modifiée, il est nécessaire de vérifier que le contraste entre le contour et l'arrière-plan est suffisant afin que le contour puisse clairement être distingué.
+
+Le ratio de contraste est déterminé en comparaisant les luminosités des deux couleurs. Pour le contraste entre un texte et son arrière-plan, les recommandations [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/intro/wcag) requièrent un ratio de 4.5:1 pour le contenu textuel et un ratio de 3:1 pour les titres ou les textes plus grands (18.66px et en gras ou 24px ou plus grand).
+
+- [Vérificateur de contraste WebAIM (en anglais)](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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)_[ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                                   | Commentaires                                |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------- |
+| {{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}             | {{Spec2('CSS3 Basic UI')}}     | Aucun changement                            |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}     | {{Spec2('CSS3 Transitions')}} | `outline-color` peut désormais être animée. |
+| {{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.outline-color")}}
+
+## Voir aussi
+
+- Le type de donnée {{cssxref("&lt;color&gt;")}}
+- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}
+- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
diff --git a/files/fr/web/css/outline-offset/index.md b/files/fr/web/css/outline-offset/index.md
index 98bcb9014e..57a10d1f30 100644
--- a/files/fr/web/css/outline-offset/index.md
+++ b/files/fr/web/css/outline-offset/index.md
@@ -7,16 +7,17 @@ tags:
   - Reference
 translation_of: Web/CSS/outline-offset
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>outline-offset</code></strong> définit l'espace qu'il y a entre la bordure dessinée par {{cssxref("outline")}} et le bord de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a> d'un élément. Cet espace est transparent et la couleur visible en arrière-plan sera déterminée par l'élément parent.</p>
+La propriété **`outline-offset`** définit l'espace qu'il y a entre la bordure dessinée par {{cssxref("outline")}} et le bord de [la boîte de bordure](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) d'un élément. Cet espace est transparent et la couleur visible en arrière-plan sera déterminée par l'élément parent.
 
-<div>{{EmbedInteractiveExample("pages/css/outline-offset.html")}}</div>
+{{EmbedInteractiveExample("pages/css/outline-offset.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 outline-offset: 3px;
 outline-offset: 0.2em;
 
@@ -24,24 +25,23 @@ outline-offset: 0.2em;
 outline-offset: inherit;
 outline-offset: initial;
 outline-offset: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>La largeur de l'espace, voir la page {{cssxref("&lt;length&gt;")}} pour plus d'informations. Les valeurs négatives sont utilisées et font que la bordure dessinée est dessinée dans l'élément.</dd>
-</dl>
+- `<length>`
+  - : La largeur de l'espace, voir la page {{cssxref("&lt;length&gt;")}} pour plus d'informations. Les valeurs négatives sont utilisées et font que la bordure dessinée est dessinée dans l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   outline: 1px dashed red;
   /* On décale la ligne de 10px */
   outline-offset: 10px;
@@ -49,42 +49,27 @@ outline-offset: unset;
   margin: 15px;
   border: 1px solid black;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;La bordure est décalée&lt;p&gt;</pre>
+```html
+<p class="exemple">La bordure est décalée<p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>outline-offset</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                                   | Commentaires                                 |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset')}} | {{Spec2('CSS3 Transitions')}} | `outline-offset` peut désormais être animée. |
+| {{SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset')}}     | {{Spec2('CSS3 Basic UI')}}     | Définition initiale.                         |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.outline-offset")}}</p>
+{{Compat("css.properties.outline-offset")}}
diff --git a/files/fr/web/css/outline-style/index.md b/files/fr/web/css/outline-style/index.md
index 5a98aa4cf7..022491b85b 100644
--- a/files/fr/web/css/outline-style/index.md
+++ b/files/fr/web/css/outline-style/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/outline-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>outline-style</code></strong> permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de bordure</a> et peut être utilisée afin de faire ressortir l'élément.</p>
+La propriété **`outline-style`** permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de [la boîte de bordure](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) et peut être utilisée afin de faire ressortir l'élément.
 
-<div>{{EmbedInteractiveExample("pages/css/outline-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/outline-style.html")}}
 
-<p>Cette propriété est synthétisée grâce à la propriété {{cssxref("outline")}} qui regroupe outline-style, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.</p>
+Cette propriété est synthétisée grâce à la propriété {{cssxref("outline")}} qui regroupe outline-style, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 outline-style: auto;
 outline-style: none;
 outline-style: dotted;
@@ -33,44 +34,43 @@ outline-style: outset;
 outline-style: inherit;
 outline-style: initial;
 outline-style: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>L'agent utilisateur peut afficher une bordure avec une mise en forme par défaut.</dd>
- <dt><code>none</code></dt>
- <dd>Aucune bordure n'est dessinée (équivalent à {{cssxref("outline-width")}} avec la valeur <code>0</code>).</dd>
- <dt><code>dotted</code></dt>
- <dd>Le bordure est dessinée avec une série de points.</dd>
- <dt><code>dashed</code></dt>
- <dd>La bordure est dessinée avec des tirets.</dd>
- <dt><code>solid</code></dt>
- <dd>La bordure est dessinée avec une ligne continue.</dd>
- <dt><code>double</code></dt>
- <dd>La bordure est dessinée avec deux lignes continues. La valeur de la propriété {{cssxref("outline-width")}} désigne la somme de la largeur des deux lignes et de l'espace entre elles.</dd>
- <dt><code>groove</code></dt>
- <dd>La bordure est dessinée comme si elle était gravée dans le document.</dd>
- <dt><code>ridge</code></dt>
- <dd>La forme obtenue est opposée à <code>groove</code> : la bordure semble dépasser du document.</dd>
- <dt><code>inset</code></dt>
- <dd>La bordure semble être intégrée dans le document..</dd>
- <dt><code>outset</code></dt>
- <dd>La forme obtenue est opposée à <code>inset</code> : la bordure semble ressortir du document.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `auto`
+  - : L'agent utilisateur peut afficher une bordure avec une mise en forme par défaut.
+- `none`
+  - : Aucune bordure n'est dessinée (équivalent à {{cssxref("outline-width")}} avec la valeur `0`).
+- `dotted`
+  - : Le bordure est dessinée avec une série de points.
+- `dashed`
+  - : La bordure est dessinée avec des tirets.
+- `solid`
+  - : La bordure est dessinée avec une ligne continue.
+- `double`
+  - : La bordure est dessinée avec deux lignes continues. La valeur de la propriété {{cssxref("outline-width")}} désigne la somme de la largeur des deux lignes et de l'espace entre elles.
+- `groove`
+  - : La bordure est dessinée comme si elle était gravée dans le document.
+- `ridge`
+  - : La forme obtenue est opposée à `groove` : la bordure semble dépasser du document.
+- `inset`
+  - : La bordure semble être intégrée dans le document..
+- `outset`
+  - : La forme obtenue est opposée à `inset` : la bordure semble ressortir du document.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.exemple-groove {
+```css
+.exemple-groove {
   outline-style: groove;
   outline-color: red;
   outline-width: 2px;
@@ -80,67 +80,56 @@ outline-style: unset;
   outline-style: outset;
   outline-color: green;
   outline-width: 1px;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="exemple-groove"&gt;Ça c'est le groove&lt;/p&gt;
-&lt;p class="exemple-outset"&gt;Et ça c'est outset&lt;/p&gt;
-</pre>
+```html
+<p class="exemple-groove">Ça c'est le groove</p>
+<p class="exemple-outset">Et ça c'est outset</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple","100%","100%")}}</p>
+{{EmbedLiveSample("Exemple_simple","100%","100%")}}
 
-<h3 id="utilisation_de_la_valeur_auto">Utilisation de la valeur auto</h3>
+### Utilisation de la valeur auto
 
-<p>La valeur <code>auto</code> indique une bordure sur mesure selon l'interface du système d'exploitation ou de l'agent utilisateur.</p>
+La valeur `auto` indique une bordure sur mesure selon l'interface du système d'exploitation ou de l'agent utilisateur.
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.auto {
+```css
+.auto {
   outline-style: auto; /* same result as "outline: auto" */
 }
 
 /* To make the Demo clearer */
-* { outline-width: 10px; padding: 15px; } </pre>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="auto"&gt;Outline Demo&lt;/p&gt;
-&lt;/div&gt; </pre>
-
-<h4 id="Résulat">Résulat</h4>
-
-<p>{{EmbedLiveSample('Example_0_-_auto')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>La valeur <code>auto</code> a été ajoutée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.outline-style")}}</p>
+* { outline-width: 10px; padding: 15px; }
+```
+
+#### HTML
+
+```html
+<div>
+  <p class="auto">Outline Demo</p>
+</div>
+```
+
+#### Résulat
+
+{{EmbedLiveSample('Example_0_-_auto')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires                    |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------- |
+| {{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}             | {{Spec2('CSS3 Basic UI')}} | La valeur `auto` a été ajoutée. |
+| {{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}} | {{Spec2('CSS2.1')}}             | Définition initiale.            |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.outline-style")}}
diff --git a/files/fr/web/css/outline-width/index.md b/files/fr/web/css/outline-width/index.md
index b0a97a057c..08cddf0bff 100644
--- a/files/fr/web/css/outline-width/index.md
+++ b/files/fr/web/css/outline-width/index.md
@@ -7,60 +7,61 @@ tags:
   - Reference
 translation_of: Web/CSS/outline-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>outline-width</code></strong> est utilisée afin de définir l'épaisseur de la bordure (<em>outline</em>) d'un élément. Cette bordure est dessinée autour des éléments et délimite <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a>. Visuellement, cela permet de faire ressortir l'élément.</p>
+La propriété CSS **`outline-width`** est utilisée afin de définir l'épaisseur de la bordure (_outline_) d'un élément. Cette bordure est dessinée autour des éléments et délimite [la boîte de bordure](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte). Visuellement, cela permet de faire ressortir l'élément.
 
-<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/outline-width.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot clé */
+```css
+/* Valeurs avec un mot clé */
 outline-width: thin;
 outline-width: medium;
 outline-width: thick;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 outline-width: 1px;
 outline-width: 0.1em;
 
 /* Valeurs globales */
 outline-width: inherit;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>thin</code></dt>
- <dd>La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur fine. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à <code>1px</code>.</dd>
- <dt><code>medium</code></dt>
- <dd>La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur moyenne. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à <code>3px</code>.</dd>
- <dt><code>thick</code></dt>
- <dd>La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur de trait prononcée. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à <code>5px</code>.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Voir la page sur le type {{cssxref("&lt;length&gt;")}} pour les différentes valeurs correspondantes.</dd>
-</dl>
+- `thin`
+  - : La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur fine. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à `1px`.
+- `medium`
+  - : La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur moyenne. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à `3px`.
+- `thick`
+  - : La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur de trait prononcée. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à `5px`.
+- `<length>`
+  - : Voir la page sur le type {{cssxref("&lt;length&gt;")}} pour les différentes valeurs correspondantes.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;span id="thin"&gt;thin&lt;/span&gt;
-&lt;span id="medium"&gt;medium&lt;/span&gt;
-&lt;span id="thick"&gt;thick&lt;/span&gt;
-&lt;span id="deuxpixels"&gt;2px&lt;/span&gt;
-&lt;span id="unex"&gt;1ex&lt;/span&gt;
-&lt;span id="deuxem"&gt;2em&lt;/span&gt;
-</pre>
+```html
+<span id="thin">thin</span>
+<span id="medium">medium</span>
+<span id="thick">thick</span>
+<span id="deuxpixels">2px</span>
+<span id="unex">1ex</span>
+<span id="deuxem">2em</span>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">span {
+```css
+span {
   outline-style: solid;
   display: inline-block;
   margin: 20px;
@@ -89,43 +90,22 @@ outline-width: inherit;
 #deuxem {
   outline-width: 2em;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '100%', '80')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Aucun changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>outline-width</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.outline-width")}}</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '100%', '80')}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires                                |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------- |
+| {{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}             | {{Spec2('CSS3 Basic UI')}}     | Aucun changement                            |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}     | {{Spec2('CSS3 Transitions')}} | `outline-width` peut désormais être animée. |
+| {{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.outline-width")}}
diff --git a/files/fr/web/css/outline/index.md b/files/fr/web/css/outline/index.md
index 7b505019a2..25c76f72da 100644
--- a/files/fr/web/css/outline/index.md
+++ b/files/fr/web/css/outline/index.md
@@ -7,26 +7,23 @@ tags:
   - Reference
 translation_of: Web/CSS/outline
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>outline</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi {{cssxref("outline-style")}}, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.</p>
+La propriété **`outline`** est [une propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi {{cssxref("outline-style")}}, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div
+{{EmbedInteractiveExample("pages/css/outline.html")}}À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec [leur valeur initiale](/fr/docs/Web/CSS/Valeur_initiale).
 
-<p>À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec <a href="/fr/docs/Web/CSS/Valeur_initiale">leur valeur initiale</a>.</p>
+### Bordures et contours
 
-<h3 id="Bordures_et_contours">Bordures et contours</h3>
+Les contours (_outline_) diffèrent des bordures, notamment sur les points suivants :
 
-<p>Les contours (<em>outline</em>) diffèrent des bordures, notamment sur les points suivants :</p>
+- Les contours ne prennent pas d'espace et sont dessinés au-dessus du contenu.
+- Les contours peuvent avoir une forme qui n'est pas rectangulaire. Ils seront rectangulaires avec Gecko et Firefox mais Opera dessinera une forme autour du contenu (cf. exemples).
 
-<ul>
- <li>Les contours ne prennent pas d'espace et sont dessinés au-dessus du contenu.</li>
- <li>Les contours peuvent avoir une forme qui n'est pas rectangulaire. Ils seront rectangulaires avec Gecko et Firefox mais Opera dessinera une forme autour du contenu (cf. exemples).</li>
-</ul>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: css no-line-numbers">/* style */
+```css
+/* style */
 outline: solid;
 
 /* couleur | style */
@@ -42,114 +39,95 @@ outline: green solid 3px;
 outline: inherit;
 outline: initial;
 outline: unset;
-</pre>
+```
 
-<p>La propriété <code>outline</code> peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.</p>
+La propriété `outline` peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.
 
-<div class="note">
-<p><strong>Note :</strong> Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut <code>none</code>).</p>
-</div>
+> **Note :** Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut `none`).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;'outline-width'&gt;</code></dt>
- <dd>Voir {{cssxref("outline-width")}}.</dd>
- <dt><code>&lt;'outline-style'&gt;</code></dt>
- <dd>Voir {{cssxref("outline-style")}}.</dd>
- <dt><code>&lt;'outline-color'&gt;</code></dt>
- <dd>Depuis Gecko 1.9 (Firefox 3), la valeur de la propriété {{cssxref("color")}} de l'élément est utilisée. Voir {{cssxref("outline-color")}}.</dd>
-</dl>
+- `<'outline-width'>`
+  - : Voir {{cssxref("outline-width")}}.
+- `<'outline-style'>`
+  - : Voir {{cssxref("outline-style")}}.
+- `<'outline-color'>`
+  - : Depuis Gecko 1.9 (Firefox 3), la valeur de la propriété {{cssxref("color")}} de l'élément est utilisée. Voir {{cssxref("outline-color")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;Je suis entouré de tirets rouges&lt;/p&gt;</pre>
+```html
+<p class="exemple">Je suis entouré de tirets rouges</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   outline: dashed red 2px;
   /* on aurait pu utiliser          */
   /* les trois propriétés unitaires */
   /* et avoir le même résultat      */
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+{{EmbedLiveSample("Exemple_simple")}}
 
-<h3 id="Exemple_de_contour_non_rectangulaire">Exemple de contour non rectangulaire</h3>
+### Exemple de contour non rectangulaire
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   petit texte
-    &lt;span class=grand&gt;Grand Texte&lt;/span&gt;
+    <span class=grand>Grand Texte</span>
   petit texte
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   outline: dotted orange 1px;
 }
 
 .grand {
   font-size:xx-large;
 }
-</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Exemple_de_contour_non_rectangulaire")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Utiliser la propriété <code>outline</code> avec une valeur <code>0</code> ou <code>none</code> supprimera le style par défaut du navigateur pour le focus. Lorsqu'on interagit avec un élément, celui-ci doit avoir un indicateur visible. Aussi, veillez à fournir un tel indicateur si vous retirez le style par défaut pour le focus</p>
-
-<ul>
- <li>{{cssxref(":focus")}}</li>
- <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)</a></li>
- <li>
-  <p><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html"><em>Understanding Success Criterion 2.4.7  | Understanding WCAG 2.0</em> (en anglais)</a></p>
- </li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.outline")}}</p>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Exemple_de_contour_non_rectangulaire")}}
+
+## Accessibilité
+
+Utiliser la propriété `outline` avec une valeur `0` ou `none` supprimera le style par défaut du navigateur pour le focus. Lorsqu'on interagit avec un élément, celui-ci doit avoir un indicateur visible. Aussi, veillez à fournir un tel indicateur si vous retirez le style par défaut pour le focus
+
+- {{cssxref(":focus")}}
+- [Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)
+- [_Understanding Success Criterion 2.4.7  | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html)
+
+## Spécifications
+
+| Spécification                                                                    | Statut                               | Commentaires         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Basic UI', '#outline', 'outline')}}             | {{Spec2('CSS3 Basic UI')}} | Aucun changement.    |
+| {{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}} | {{Spec2('CSS2.1')}}             | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.outline")}}
diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md
index cecf8f743f..ea37884c8f 100644
--- a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md
+++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md
@@ -8,71 +8,67 @@ tags:
 translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
 original_slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).</p>
+Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).
 
-<p>L'ancrage du défilement (ou <em>scroll anchoring</em> en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).</p>
+L'ancrage du défilement (ou _scroll anchoring_ en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).
 
-<h2 id="Comment_cela_fonctionne">Comment cela fonctionne ?</h2>
+## Comment cela fonctionne ?
 
-<p>L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (<em>viewport</em>). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).</p>
+L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (_viewport_). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).
 
-<h2 id="Comment_activer_l'ancrage_du_défilement">Comment activer l'ancrage du défilement ?</h2>
+## Comment activer l'ancrage du défilement ?
 
-<p>Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.</p>
+Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.
 
-<h2 id="Si_besoin_que_faire_pour_le_désactiver">Si besoin, que faire pour le désactiver ?</h2>
+## Si besoin, que faire pour le désactiver ?
 
-<p>La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.</p>
+La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.
 
-<p>Les valeurs utilisables pour cette propriété sont <code>auto</code> ou <code>none</code> :</p>
+Les valeurs utilisables pour cette propriété sont `auto` ou `none` :
 
-<ul>
- <li><code>auto</code> correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.</li>
- <li><code>none</code> signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.</li>
-</ul>
+- `auto` correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.
+- `none` signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.
 
-<p>Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} :</p>
+Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} :
 
-<pre class="brush: css">body {
+```css
+body {
   overflow-anchor: none;
-} </pre>
+}
+```
 
-<p>Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera <code>overflow-anchor: none</code> sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :</p>
+Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera `overflow-anchor: none` sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :
 
-<pre class="brush: css">.container {
+```css
+.container {
   overflow-anchor: none;
-} </pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) <code>overflow-anchor: auto</code> à un autre endroit du document.</p>
-</div>
+> **Note :** Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) `overflow-anchor: auto` à un autre endroit du document.
 
-<h3 id="Supression_triggers">Supression triggers</h3>
+### Supression triggers
 
-<p>La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.</p>
+La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.
 
-<p>Les évènements en question sont les modifications des <a href="/fr/docs/Web/CSS/Valeur_calculée">valeurs calculées</a> des propriétés suivantes :</p>
+Les évènements en question sont les modifications des [valeurs calculées](/fr/docs/Web/CSS/Valeur_calculée) des propriétés suivantes :
 
-<ul>
- <li>{{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}}</li>
- <li>{{cssxref("margin")}} ou {{cssxref("padding")}}</li>
- <li>Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}}</li>
- <li>{{cssxref("position")}}</li>
- <li>{{cssxref("transform")}}</li>
-</ul>
+- {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}}
+- {{cssxref("margin")}} ou {{cssxref("padding")}}
+- Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}}
+- {{cssxref("position")}}
+- {{cssxref("transform")}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser <a href="/fr/docs/Web/CSS/@supports">les requêtes de fonctionnalité</a> afin de tester la prise en charge de la propriété <code>overflow-anchor</code>.</p>
+Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser [les requêtes de fonctionnalité](/fr/docs/Web/CSS/@supports) afin de tester la prise en charge de la propriété `overflow-anchor`.
 
-<p>{{Compat("css.properties.overflow-anchor")}}</p>
+{{Compat("css.properties.overflow-anchor")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md">Document d'explication sur le site du WICG (en anglais)</a></li>
- <li><a href="https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html">L'ancrage du défilement pour les développeurs web - Blog Chromium (en anglais)</a></li>
- <li><a href="https://blog.eqrion.net/pin-to-bottom/">Implémenter un élément avec le défilement fixe en bas (en anglais)</a></li>
-</ul>
+- [Document d'explication sur le site du WICG (en anglais)](https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md)
+- [L'ancrage du défilement pour les développeurs web - Blog Chromium (en anglais)](https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html)
+- [Implémenter un élément avec le défilement fixe en bas (en anglais)](https://blog.eqrion.net/pin-to-bottom/)
diff --git a/files/fr/web/css/overflow-anchor/index.md b/files/fr/web/css/overflow-anchor/index.md
index 2d71155710..3e4d2f1d46 100644
--- a/files/fr/web/css/overflow-anchor/index.md
+++ b/files/fr/web/css/overflow-anchor/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/overflow-anchor
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>overflow-anchor</code></strong> permet d'éviter, lors du défilement, que le navigateur ajuste la position afin de minimiser le déplacement du contenu.</p>
+La propriété **`overflow-anchor`** permet d'éviter, lors du défilement, que le navigateur ajuste la position afin de minimiser le déplacement du contenu.
 
-<p>Ce comportement est activé par défaut pour les navigateurs qui le prenne en charge. Aussi, cette propriété est uniquement nécessaire lorsque vous rencontrez des problèmes de défilement dans un document et que vous souhaitez désactiver ce comportement.</p>
+Ce comportement est activé par défaut pour les navigateurs qui le prenne en charge. Aussi, cette propriété est uniquement nécessaire lorsque vous rencontrez des problèmes de défilement dans un document et que vous souhaitez désactiver ce comportement.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 overflow-anchor: auto;
 overflow-anchor: none;
 
@@ -23,56 +24,41 @@ overflow-anchor: none;
 overflow-anchor: inherit;
 overflow-anchor: initial;
 overflow-anchor: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>L'élément peut devenir une ancre lorsque la position de défilement est ajustée.</dd>
- <dt><code>none</code></dt>
- <dd>L'élément ne sera pas sélectionné comme ancre.</dd>
-</dl>
+- `auto`
+  - : L'élément peut devenir une ancre lorsque la position de défilement est ajustée.
+- `none`
+  - : L'élément ne sera pas sélectionné comme ancre.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Pour désactiver l'ancrage du défilement, on pourra utiliser cette propriété :</p>
+Pour désactiver l'ancrage du défilement, on pourra utiliser cette propriété :
 
-<pre class="brush: css">body {
+```css
+body {
   overflow-anchor: none;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}</td>
-   <td>{{Spec2('CSS Scroll Anchoring')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.overflow-anchor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring">Guide sur l'ancrage du défilement (<em>scroll anchoring</em>)</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}} | {{Spec2('CSS Scroll Anchoring')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.overflow-anchor")}}
+
+## Voir aussi
+
+- [Guide sur l'ancrage du défilement (_scroll anchoring_)](/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring)
diff --git a/files/fr/web/css/overflow-block/index.md b/files/fr/web/css/overflow-block/index.md
index ee9da652bc..5d6a858d0f 100644
--- a/files/fr/web/css/overflow-block/index.md
+++ b/files/fr/web/css/overflow-block/index.md
@@ -8,17 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/overflow-block
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>overflow-block</code></strong> est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'un élément de bloc sur les bords de bloc (ceux orthogonaux au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.</p>
+La propriété CSS **`overflow-block`** est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'un élément de bloc sur les bords de bloc (ceux orthogonaux au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.
 
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>overflow-block</code> correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.</p>
-</div>
+> **Note :** La propriété `overflow-block` correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 overflow-block: visible;
 overflow-block: hidden;
 overflow-block: scroll;
@@ -28,62 +27,61 @@ overflow-block: auto;
 overflow-block: inherit;
 overflow-block: initial;
 overflow-block: unset;
-</pre>
+```
 
-<p>La propriété <code>overflow-block</code> se définit avec un mot-clé parmi ceux de la liste suivante.</p>
+La propriété `overflow-block` se définit avec un mot-clé parmi ceux de la liste suivante.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>visible</code></dt>
- <dd>Le contenu n'est pas rogné et peut être affiché en dehors des limites de bloc de la boîte.</dd>
- <dt><code>hidden</code></dt>
- <dd>Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe de bloc. Aucune barre de défilement n'est affichée.</dd>
- <dt><code>scroll</code></dt>
- <dd>Le contenu est rogné si nécessaire selon l'axe de bloc pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
- <dt><code>auto</code></dt>
- <dd>Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme <code>visible</code> mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.</dd>
-</dl>
+- `visible`
+  - : Le contenu n'est pas rogné et peut être affiché en dehors des limites de bloc de la boîte.
+- `hidden`
+  - : Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe de bloc. Aucune barre de défilement n'est affichée.
+- `scroll`
+  - : Le contenu est rogné si nécessaire selon l'axe de bloc pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.
+- `auto`
+  - : Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme `visible` mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;code&gt;overflow-block:hidden&lt;/code&gt; — masque le texte en dehors
-  &lt;div id="div1"&gt;
+```html
+<ul>
+  <li><code>overflow-block:hidden</code> — masque le texte en dehors
+  <div id="div1">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-block:scroll&lt;/code&gt; — ajoute une barre de défilement
-  &lt;div id="div2"&gt;
+  <li><code>overflow-block:scroll</code> — ajoute une barre de défilement
+  <div id="div2">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-block:visible&lt;/code&gt; — affiche le texte en dehors si besoin
-  &lt;div id="div3"&gt;
+  <li><code>overflow-block:visible</code> — affiche le texte en dehors si besoin
+  <div id="div3">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-block:auto&lt;/code&gt; — pour la plupart des navigateurs, équivalent à &lt;code&gt;scroll&lt;/code&gt;
-  &lt;div id="div4"&gt;
+  <li><code>overflow-block:auto</code> — pour la plupart des navigateurs, équivalent à <code>scroll</code>
+  <div id="div4">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
-
-</pre>
+    </div>
+  </li>
+</ul>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#div1,
+```css
+#div1,
 #div2,
 #div3,
 #div4 {
@@ -96,41 +94,26 @@ overflow-block: unset;
 #div2 { overflow-block: scroll; margin-bottom: 12px;}
 #div3 { overflow-block: visible; margin-bottom: 120px;}
 #div4 { overflow-block: auto; margin-bottom: 120px;}
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", "780")}}</p>
+{{EmbedLiveSample("Exemples", "100%", "780")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}}</td>
-   <td>{{Spec2('CSS3 Overflow')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                 | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| {{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}} | {{Spec2('CSS3 Overflow')}} |              |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.overflow-block")}}</p>
+{{Compat("css.properties.overflow-block")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-inline")}}, {{cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties">Les propriétés logiques en CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écriture</a></li>
-</ul>
+- Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-inline")}}, {{cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}
+- [Les propriétés logiques en CSS](/fr/docs/Web/CSS/CSS_Logical_Properties)
+- [Les modes d'écriture](/fr/docs/Web/CSS/CSS_Writing_Modes)
diff --git a/files/fr/web/css/overflow-inline/index.md b/files/fr/web/css/overflow-inline/index.md
index 845fe83f15..645ef86b07 100644
--- a/files/fr/web/css/overflow-inline/index.md
+++ b/files/fr/web/css/overflow-inline/index.md
@@ -8,17 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/overflow-inline
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>overflow-inline</code></strong> est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'une boîte sur les bords en ligne (ceux parallèles au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.</p>
+La propriété CSS **`overflow-inline`** est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'une boîte sur les bords en ligne (ceux parallèles au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.
 
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>overflow-inline</code> correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.</p>
-</div>
+> **Note :** La propriété `overflow-inline` correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 overflow-inline: visible;
 overflow-inline: hidden;
 overflow-inline: scroll;
@@ -28,62 +27,61 @@ overflow-inline: auto;
 overflow-inline: inherit;
 overflow-inline: initial;
 overflow-inline: unset;
-</pre>
+```
 
-<p>La propriété <code>overflow-inline</code> se définit avec un mot-clé parmi ceux de la liste suivante.</p>
+La propriété `overflow-inline` se définit avec un mot-clé parmi ceux de la liste suivante.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>visible</code></dt>
- <dd>Le contenu n'est pas rogné et peut être affiché en dehors des limites en ligne de la boîte.</dd>
- <dt><code>hidden</code></dt>
- <dd>Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe en ligne. Aucune barre de défilement n'est affichée.</dd>
- <dt><code>scroll</code></dt>
- <dd>Le contenu est rogné si nécessaire selon l'axe en ligne pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
- <dt><code>auto</code></dt>
- <dd>Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme <code>visible</code> mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.</dd>
-</dl>
+- `visible`
+  - : Le contenu n'est pas rogné et peut être affiché en dehors des limites en ligne de la boîte.
+- `hidden`
+  - : Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe en ligne. Aucune barre de défilement n'est affichée.
+- `scroll`
+  - : Le contenu est rogné si nécessaire selon l'axe en ligne pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.
+- `auto`
+  - : Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme `visible` mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;code&gt;overflow-inline:hidden&lt;/code&gt; — masque le texte en dehors
-  &lt;div id="div1"&gt;
+```html
+<ul>
+  <li><code>overflow-inline:hidden</code> — masque le texte en dehors
+  <div id="div1">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-inline:scroll&lt;/code&gt; — ajoute une barre de défilement
-  &lt;div id="div2"&gt;
+  <li><code>overflow-inline:scroll</code> — ajoute une barre de défilement
+  <div id="div2">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-inline:visible&lt;/code&gt; — affiche le texte en dehors si besoin
-  &lt;div id="div3"&gt;
+  <li><code>overflow-inline:visible</code> — affiche le texte en dehors si besoin
+  <div id="div3">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-inline:auto&lt;/code&gt; — pour la plupart des navigateurs, équivalent à &lt;code&gt;scroll&lt;/code&gt;
-  &lt;div id="div4"&gt;
+  <li><code>overflow-inline:auto</code> — pour la plupart des navigateurs, équivalent à <code>scroll</code>
+  <div id="div4">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
-
-</pre>
+    </div>
+  </li>
+</ul>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#div1,
+```css
+#div1,
 #div2,
 #div3,
 #div4 {
@@ -96,41 +94,26 @@ overflow-inline: unset;
 #div2 { overflow-inline: scroll;}
 #div3 { overflow-inline: visible;}
 #div4 { overflow-inline: auto;}
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", "270")}}</p>
+{{EmbedLiveSample("Exemples", "100%", "270")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}}</td>
-   <td>{{Spec2('CSS3 Overflow')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                 | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| {{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}} | {{Spec2('CSS3 Overflow')}} |              |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.overflow-inline")}}</p>
+{{Compat("css.properties.overflow-inline")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-block")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties">Les propriétés logiques en CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écriture</a></li>
-</ul>
+- Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-block")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}
+- [Les propriétés logiques en CSS](/fr/docs/Web/CSS/CSS_Logical_Properties)
+- [Les modes d'écriture](/fr/docs/Web/CSS/CSS_Writing_Modes)
diff --git a/files/fr/web/css/overflow-wrap/index.md b/files/fr/web/css/overflow-wrap/index.md
index af17d340b6..3339efb978 100644
--- a/files/fr/web/css/overflow-wrap/index.md
+++ b/files/fr/web/css/overflow-wrap/index.md
@@ -7,21 +7,20 @@ tags:
   - Reference
 translation_of: Web/CSS/overflow-wrap
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>overflow-wrap</code></strong> s'applique aux éléments en ligne (<em>inline</em>) et est utilisée afin de définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue afin qu'elle ne dépasse pas de la boîte.</p>
+La propriété **`overflow-wrap`** s'applique aux éléments en ligne (_inline_) et est utilisée afin de définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue afin qu'elle ne dépasse pas de la boîte.
 
-<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div>
+{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> À la différence de {{cssxref("word-break")}}, <code>overflow-wrap</code> créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.</p>
-</div>
+> **Note :** À la différence de {{cssxref("word-break")}}, `overflow-wrap` créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.
 
-<p>À l'origine, cette propriété était une extension non-standard sans préfixe de Microsoft et intitulée <code>word-wrap</code>. Implémentée sous ce nom par la plupart des navigateurs depuis, elle a été renommée en <code>overflow-wrap</code> et <code>word-wrap</code> est devenu un alias.</p>
+À l'origine, cette propriété était une extension non-standard sans préfixe de Microsoft et intitulée `word-wrap`. Implémentée sous ce nom par la plupart des navigateurs depuis, elle a été renommée en `overflow-wrap` et `word-wrap` est devenu un alias.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 overflow-wrap: normal;
 overflow-wrap: break-word;
 overflow-wrap: anywhere;
@@ -30,30 +29,29 @@ overflow-wrap: anywhere;
 overflow-wrap: inherit;
 overflow-wrap: initial;
 overflow-wrap: unset;
-</pre>
+```
 
-<p>La propriété <code>overflow-wrap</code> peut être définie avec l'un des mots-clés suivants.</p>
+La propriété `overflow-wrap` peut être définie avec l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Indique que la césure d'une ligne ne peut avoir lieu qu'aux positions de césures normales.</dd>
- <dt><code>anywhere</code></dt>
- <dd>Indique que la césure pourra avoir lieu afin d'éviter le dépassement, y compris s'il n'y a pas de point de césure acceptable sur la ligne. Cela est notamment utile pour éviter le dépassement et qu'on a une longue ligne (un long mot ou une URL). Aucun caractère ne sera ajouté au point de césure. Les possibilités de rupture douces ajoutées par la césure sont prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd>
- <dt><code>break-word</code></dt>
- <dd>Indique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne. Les possibilités de rupture douces ajoutées par la césure <strong>ne sont pas</strong> prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd>
-</dl>
+- `normal`
+  - : Indique que la césure d'une ligne ne peut avoir lieu qu'aux positions de césures normales.
+- `anywhere`
+  - : Indique que la césure pourra avoir lieu afin d'éviter le dépassement, y compris s'il n'y a pas de point de césure acceptable sur la ligne. Cela est notamment utile pour éviter le dépassement et qu'on a une longue ligne (un long mot ou une URL). Aucun caractère ne sera ajouté au point de césure. Les possibilités de rupture douces ajoutées par la césure sont prises en compte lors du calcul des tailles `min-content` intrinsèques.
+- `break-word`
+  - : Indique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne. Les possibilités de rupture douces ajoutées par la césure **ne sont pas** prises en compte lors du calcul des tailles `min-content` intrinsèques.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<p>{{csssyntax}}</p>
+{{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 13em;
   margin: 2px;
   background: gold;
@@ -72,77 +70,63 @@ overflow-wrap: unset;
 }
 
 .hyphens {
-<code>  -webkit-hyphens: auto;
+  -webkit-hyphens: auto;
   -ms-hyphens: auto;
-</code>  hyphens: auto;
+  hyphens: auto;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;h3&gt;&lt;code&gt;normal&lt;/code&gt;&lt;/h3&gt;
-&lt;p&gt;They say the fishing is excellent at
-  Lake &lt;em class="normal"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself.&lt;/p&gt;
-&lt;h3&gt;&lt;code&gt;overflow-wrap: anywhere&lt;/code&gt;&lt;/h3&gt;
-&lt;p&gt;They say the fishing is excellent at
-  Lake &lt;em class="ow-anywhere"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself.&lt;/p&gt;
-&lt;h3&gt;&lt;code&gt;overflow-wrap: break-word&lt;/code&gt;&lt;/h3&gt;
-&lt;p&gt;They say the fishing is excellent at
-  Lake &lt;em class="ow-break-word"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself. &lt;/p&gt;
-&lt;h3&gt;&lt;code&gt;word-break: break-all&lt;/code&gt;&lt;/h3&gt;
-&lt;p&gt;They say the fishing is excellent at
-  Lake &lt;em class="word-break"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself.&lt;/p&gt;
-&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, without &lt;code&gt;lang&lt;/code&gt; attribute&lt;/h3&gt;
-&lt;p class="hyphens"&gt;They say the fishing is excellent at
-  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;
-  though I've never been there myself. &lt;/p&gt;
-&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, English rules&lt;/h3&gt;
-&lt;p class="hyphens" lang="en"&gt;They say the fishing is excellent at
-  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself.&lt;/p&gt;
-&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, German rules&lt;/h3&gt;
-&lt;p class="hyphens" lang="de"&gt;They say the fishing is excellent at
-  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
-  though I've never been there myself.&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", '100%', 520)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.overflow-wrap")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("word-break")}}</li>
- <li>{{cssxref("hyphens")}}</li>
- <li>{{cssxref("text-overflow")}}</li>
-</ul>
+```
+
+### HTML
+
+```html
+<h3><code>normal</code></h3>
+<p>They say the fishing is excellent at
+  Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself.</p>
+<h3><code>overflow-wrap: anywhere</code></h3>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself.</p>
+<h3><code>overflow-wrap: break-word</code></h3>
+<p>They say the fishing is excellent at
+  Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself. </p>
+<h3><code>word-break: break-all</code></h3>
+<p>They say the fishing is excellent at
+  Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself.</p>
+<h3><code>hyphens: auto</code>, without <code>lang</code> attribute</h3>
+<p class="hyphens">They say the fishing is excellent at
+  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>
+  though I've never been there myself. </p>
+<h3><code>hyphens: auto</code>, English rules</h3>
+<p class="hyphens" lang="en">They say the fishing is excellent at
+  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself.</p>
+<h3><code>hyphens: auto</code>, German rules</h3>
+<p class="hyphens" lang="de">They say the fishing is excellent at
+  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
+  though I've never been there myself.</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", '100%', 520)}}
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires        |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap')}} | {{Spec2('CSS3 Text')}} | Définition initiale |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.overflow-wrap")}}
+
+## Voir aussi
+
+- {{cssxref("word-break")}}
+- {{cssxref("hyphens")}}
+- {{cssxref("text-overflow")}}
diff --git a/files/fr/web/css/overflow-x/index.md b/files/fr/web/css/overflow-x/index.md
index daef74255a..8dc2978616 100644
--- a/files/fr/web/css/overflow-x/index.md
+++ b/files/fr/web/css/overflow-x/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/overflow-x
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>overflow-x</code></strong> permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords droit et gauche de la boîte de contenu.</p>
+La propriété **`overflow-x`** permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords droit et gauche de la boîte de contenu.
 
-<div class="note">
-<p><strong>Note :</strong> Si {{cssxref("overflow-y")}} vaut <code>hidden</code>, <code>scroll</code> ou <code>auto</code> et que cette propriété vaut <code>visible</code> (la valeur par défaut), sa valeur calculée sera implicitement <code>auto</code>.</p>
-</div>
+> **Note :** Si {{cssxref("overflow-y")}} vaut `hidden`, `scroll` ou `auto` et que cette propriété vaut `visible` (la valeur par défaut), sa valeur calculée sera implicitement `auto`.
 
-<div>{{EmbedInteractiveExample("pages/css/overflow-x.html")}}</div>
+{{EmbedInteractiveExample("pages/css/overflow-x.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 overflow-x: visible;
 overflow-x: hidden;
 overflow-x: scroll;
@@ -29,61 +28,61 @@ overflow-x: auto;
 overflow-x: inherit;
 overflow-x: initial;
 overflow-x: unset;
-</pre>
+```
 
-<p>La propriété <code>overflow-x</code> est définie avec l'un des mots-clés définis ci-après.</p>
+La propriété `overflow-x` est définie avec l'un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>visible</code></dt>
- <dd>Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (<em>padding</em>) à droite et à gauche malgré le manque d'espace.</dd>
- <dt><code>hidden</code></dt>
- <dd>Le contenu est rogné afin de tenir horizontalement dans la boîte de remplissage (<em>padding</em>) et aucun ascenseur horizontal n'est affiché.</dd>
- <dt><code>scroll</code></dt>
- <dd>Le contenu est rogné afin de tenir horizontalement dans la boîte de remplissage et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
- <dt><code>auto</code></dt>
- <dd>Le comportement dépend de l'agent utilisateur. Les navigateurs de bureau comme Firefox peuvent afficher des barres de défilement si le contenu dépasse.</dd>
-</dl>
+- `visible`
+  - : Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (_padding_) à droite et à gauche malgré le manque d'espace.
+- `hidden`
+  - : Le contenu est rogné afin de tenir horizontalement dans la boîte de remplissage (_padding_) et aucun ascenseur horizontal n'est affiché.
+- `scroll`
+  - : Le contenu est rogné afin de tenir horizontalement dans la boîte de remplissage et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.
+- `auto`
+  - : Le comportement dépend de l'agent utilisateur. Les navigateurs de bureau comme Firefox peuvent afficher des barres de défilement si le contenu dépasse.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;code&gt;overflow-x:hidden&lt;/code&gt; — cache le texte en dehors de la boîte
-    &lt;div id="div1"&gt;
+```html
+<ul>
+  <li><code>overflow-x:hidden</code> — cache le texte en dehors de la boîte
+    <div id="div1">
       ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-x:scroll&lt;/code&gt; — ajoute toujours un ascenseur
-    &lt;div id="div2"&gt;
+  <li><code>overflow-x:scroll</code> — ajoute toujours un ascenseur
+    <div id="div2">
       ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-x:visible&lt;/code&gt; — affiche le texte en dehors de la boîte si besoin
-    &lt;div id="div3"&gt;
+  <li><code>overflow-x:visible</code> — affiche le texte en dehors de la boîte si besoin
+    <div id="div3">
       ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-x:auto&lt;/code&gt; — sur la plupart des navigateurs, cela sera équivalent à &lt;code&gt;scroll&lt;/code&gt;
-    &lt;div id="div4"&gt;
+  <li><code>overflow-x:auto</code> — sur la plupart des navigateurs, cela sera équivalent à <code>scroll</code>
+    <div id="div4">
       ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    &lt;/div&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+    </div>
+  </li>
+</ul>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#div1, #div2, #div3, #div4 {
+```css
+#div1, #div2, #div3, #div4 {
   border: 1px solid black;
   width:  250px;
   margin-bottom: 12px;
@@ -104,44 +103,29 @@ overflow-x: unset;
 #div4 {
   overflow-x: auto;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", "270")}}</p>
+{{EmbedLiveSample("Exemples", "100%", "270")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}}</td>
-   <td>{{Spec2('CSS3 Overflow')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                 | Commentaires |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| {{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}} | {{Spec2('CSS3 Overflow')}} |              |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.overflow-x")}}</p>
+{{Compat("css.properties.overflow-x")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("text-overflow")}},</li>
- <li>{{cssxref("white-space")}},</li>
- <li>{{cssxref("overflow")}},</li>
- <li>{{cssxref("overflow-y")}},</li>
- <li>{{cssxref("clip")}},</li>
- <li>{{cssxref("display")}}</li>
-</ul>
+- {{cssxref("text-overflow")}},
+- {{cssxref("white-space")}},
+- {{cssxref("overflow")}},
+- {{cssxref("overflow-y")}},
+- {{cssxref("clip")}},
+- {{cssxref("display")}}
diff --git a/files/fr/web/css/overflow-y/index.md b/files/fr/web/css/overflow-y/index.md
index c91f18849d..b4aa6b9e1c 100644
--- a/files/fr/web/css/overflow-y/index.md
+++ b/files/fr/web/css/overflow-y/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/overflow-y
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>overflow-y</code></strong> permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords haut et bas de la boîte.</p>
+La propriété **`overflow-y`** permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords haut et bas de la boîte.
 
-<div class="note">
-<p><strong>Note :</strong> Si {{cssxref("overflow-x")}} vaut <code>hidden</code>, <code>scroll</code> ou <code>auto</code> et que cette propriété vaut <code>visible</code> (la valeur par défaut), la valeur calculée sera implicitement <code>auto</code>.</p>
-</div>
+> **Note :** Si {{cssxref("overflow-x")}} vaut `hidden`, `scroll` ou `auto` et que cette propriété vaut `visible` (la valeur par défaut), la valeur calculée sera implicitement `auto`.
 
-<div>{{EmbedInteractiveExample("pages/css/overflow-y.html")}}</div>
+{{EmbedInteractiveExample("pages/css/overflow-y.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 overflow-y: visible;
 overflow-y: hidden;
 overflow-y: scroll;
@@ -29,62 +28,61 @@ overflow-y: auto;
 overflow-y: inherit;
 overflow-y: initial;
 overflow-y: unset;
-</pre>
+```
 
-<p>La propriété <code>overflow-y</code> est définie avec un des mots-clés définis ci-après.</p>
+La propriété `overflow-y` est définie avec un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>visible</code></dt>
- <dd>Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (<em>padding</em>) en haut et en bas malgré le manque d'espace.</dd>
- <dt><code>hidden</code></dt>
- <dd>Le contenu est rogné afin de tenir verticalement dans la boîte de remplissage (<em>padding</em>) et aucun ascenseur vertical n'est affiché.</dd>
- <dt><code>scroll</code></dt>
- <dd>Le contenu est rogné afin de tenir verticalement au sein de la boîte de remplissage (<em>padding</em>) et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
- <dt><code>auto</code></dt>
- <dd>Le comportement dépend de l'agent utilisateur. Les navigateurs de bureau comme Firefox peuvent afficher des barres de défilement si le contenu dépasse.</dd>
-</dl>
+- `visible`
+  - : Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (_padding_) en haut et en bas malgré le manque d'espace.
+- `hidden`
+  - : Le contenu est rogné afin de tenir verticalement dans la boîte de remplissage (_padding_) et aucun ascenseur vertical n'est affiché.
+- `scroll`
+  - : Le contenu est rogné afin de tenir verticalement au sein de la boîte de remplissage (_padding_) et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.
+- `auto`
+  - : Le comportement dépend de l'agent utilisateur. Les navigateurs de bureau comme Firefox peuvent afficher des barres de défilement si le contenu dépasse.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;code&gt;overflow-y:hidden&lt;/code&gt; — cache le texte en dehors de la boîte
-  &lt;div id="div1"&gt;
+```html
+<ul>
+  <li><code>overflow-y:hidden</code> — cache le texte en dehors de la boîte
+  <div id="div1">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-y:scroll&lt;/code&gt; — ajoute toujours un ascenseur
-  &lt;div id="div2"&gt;
+  <li><code>overflow-y:scroll</code> — ajoute toujours un ascenseur
+  <div id="div2">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-y:visible&lt;/code&gt; — affiche le texte en dehors de la boîte si besoin
-  &lt;div id="div3"&gt;
+  <li><code>overflow-y:visible</code> — affiche le texte en dehors de la boîte si besoin
+  <div id="div3">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
+    </div>
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-y:auto&lt;/code&gt; — sur la plupart des navigateurs, cela sera équivalent à &lt;code&gt;scroll&lt;/code&gt;
-  &lt;div id="div4"&gt;
+  <li><code>overflow-y:auto</code> — sur la plupart des navigateurs, cela sera équivalent à <code>scroll</code>
+  <div id="div4">
     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.
-    &lt;/div&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;
-
-</pre>
+    </div>
+  </li>
+</ul>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#div1, #div2, #div3,#div4 {
+```css
+#div1, #div2, #div3,#div4 {
   border: 1px solid black;
   width:  250px;
   height: 100px;
@@ -109,44 +107,29 @@ overflow-y: unset;
   overflow-y: auto;
   margin-bottom: 120px;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", "780")}}</p>
+{{EmbedLiveSample("Exemples", "100%", "780")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}}</td>
-   <td>{{Spec2('CSS3 Overflow')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                 | Commentaires |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| {{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}} | {{Spec2('CSS3 Overflow')}} |              |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.overflow-y")}}</p>
+{{Compat("css.properties.overflow-y")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("text-overflow")}}</li>
- <li>{{cssxref("white-space")}}</li>
- <li>{{cssxref("overflow")}}</li>
- <li>{{cssxref("overflow-x")}}</li>
- <li>{{cssxref("clip")}}</li>
- <li>{{cssxref("display")}}</li>
-</ul>
+- {{cssxref("text-overflow")}}
+- {{cssxref("white-space")}}
+- {{cssxref("overflow")}}
+- {{cssxref("overflow-x")}}
+- {{cssxref("clip")}}
+- {{cssxref("display")}}
diff --git a/files/fr/web/css/overflow/index.md b/files/fr/web/css/overflow/index.md
index 58dcae523b..4797a73518 100644
--- a/files/fr/web/css/overflow/index.md
+++ b/files/fr/web/css/overflow/index.md
@@ -8,27 +8,24 @@ tags:
   - Reference
 translation_of: Web/CSS/overflow
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>overflow</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui définit comment gérer le dépassement du contenu d'un élément dans son bloc. Elle définit les valeurs des propriétés {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}}.</p>
+La propriété CSS **`overflow`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui définit comment gérer le dépassement du contenu d'un élément dans son bloc. Elle définit les valeurs des propriétés {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
+{{EmbedInteractiveExample("pages/css/overflow.html")}}
 
-<p>Lorsqu'on utilise la propriété <code>overflow</code> avec une autre valeur que <code>visible</code> (la valeur par défaut), cela entraîne la création <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">d'un nouveau contexte de formatage de bloc</a>. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée</p>
+Lorsqu'on utilise la propriété `overflow` avec une autre valeur que `visible` (la valeur par défaut), cela entraîne la création [d'un nouveau contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context). Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée
 
-<p>Afin que la propriété <code>overflow</code> puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir <code>white-space</code> avec la valeur <code>nowrap.</code></p>
+Afin que la propriété `overflow` puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir `white-space` avec la valeur `nowrap.`
 
-<div class="note">
-<p><strong>Note :</strong> Si on définit un axe avec <code>visible</code> (la valeur par défaut) et qu'on définit l'autre axe avec une valeur différente, alors la valeur du premier axe (<code>visible</code>) sera considérée comme <code>auto</code>.</p>
-</div>
+> **Note :** Si on définit un axe avec `visible` (la valeur par défaut) et qu'on définit l'autre axe avec une valeur différente, alors la valeur du premier axe (`visible`) sera considérée comme `auto`.
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on définit, via un script, la propriété <code>scrollTop</code> sur les éléments HTML pertinents, même lorsque <code>overflow</code> vaut <code>hidden</code>, il faut parfois faire défiler l'élément.</p>
-</div>
+> **Note :** Lorsqu'on définit, via un script, la propriété `scrollTop` sur les éléments HTML pertinents, même lorsque `overflow` vaut `hidden`, il faut parfois faire défiler l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 overflow: visible;
 overflow: hidden;
 overflow: clip;
@@ -40,87 +37,80 @@ overflow: hidden visible;
 overflow: inherit;
 overflow: initial;
 overflow: unset;
-</pre>
-
-<p>La propriété <code>overflow</code> peut être définie grâce à un ou deux des mots-clés suivants. Si deux mots-clés sont utilisé, le premier sera appliqué à <code>overflow-x</code> et le second à <code>overflow-y</code>. Si une seule valeur est utilisée, elle sera appliquée à <code>overflow-x</code> et à <code>overflow-y</code>.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>visible</code></dt>
- <dd>La valeur par défaut. Le contenu n'est pas rogné. Le contenu peut éventuellement être affiché en dehors de la boîte de remplissage (<em>padding</em>).</dd>
- <dt><code>hidden</code></dt>
- <dd>Le contenu est rogné si besoin pour s'inscrire dans la boîte de remplissage (<em>padding</em>) et aucune barre de défilement n'est affichée.</dd>
- <dt><code>clip</code></dt>
- <dd>Se comporte comme <code>hidden</code> au sens où le contenu est rogné pour s'inscrire dans la boîte de remplissage. Comme <code>hidden</code>, <code>clip</code> ne présente pas de barre de défilement mais contrairement à <code>hidden</code>, <code>clip</code> empêche tout défilement, y compris à l'aide de scripts. La boîte n'est pas un conteneur de défilement et ne définit pas de nouveau contexte de formatage. Si on souhaite obtenir un nouveau contexte de formatage, il faudra utiliser {{cssxref("display", "display: flow-root", "#flow-root")}}.<br>
- Certains navigateurs ne prennent pas encore cette fonctionnalité en charge.</dd>
- <dt><code>scroll</code></dt>
- <dd>Le contenu est rogné pour s'inscrire dans la boîte de remplissage (<em>padding</em>) et les navigateurs de bureau affichent des barres de défilement dans tous les cas. Cela évite d'avoir des barres qui apparaissent et disparaissent sans cesse avec du contenu dynamique. Les imprimantes peuvent éventuellement imprimer le contenu qui dépasse.</dd>
- <dt><code>auto</code></dt>
- <dd>Le comportement est laissé à la discrétion de l'agent utilisateur. Les navigateurs comme Firefox affichent des ascenseurs si le contenu dépasse dans la boîte de remplissage (<em>padding</em>)</dd>
- <dt><code>overlay</code> {{Deprecated_inline}}</dt>
- <dd>Cette valeur se comporte comme <code>auto</code> sauf que les barres de défilement sont au-dessus du contenu plutôt que de prendre de la place. Cette valeur est uniquement prise en charge par les navigateurs basés sur WebKit (Safari) ou Blink (Chrome, Opera).</dd>
-</dl>
-
-<h4 id="Extensions_propres_au_moteur_Mozilla">Extensions propres au moteur Mozilla</h4>
-
-<dl>
- <dt><code>-moz-scrollbars-none </code>{{obsolete_inline}}</dt>
- <dd><code>overflow:hidden</code> doit être utilisé à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.
- </dd>
- <dt><code>-moz-scrollbars-horizontal </code>{{Deprecated_inline}}</dt>
- <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.
- </dd>
- <dt><code>-moz-scrollbars-vertical </code>{{Deprecated_inline}}</dt>
- <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.
- </dd>
- <dt><code>-moz-hidden-unscrollable</code> {{non-standard_inline}}</dt>
- <dd>Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines <code>&lt;html&gt;</code>, <code> &lt;body&gt;</code> (avec les flèches du clavier et la roue de la souris).</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `overflow` peut être définie grâce à un ou deux des mots-clés suivants. Si deux mots-clés sont utilisé, le premier sera appliqué à `overflow-x` et le second à `overflow-y`. Si une seule valeur est utilisée, elle sera appliquée à `overflow-x` et à `overflow-y`.
+
+### Valeurs
+
+- `visible`
+  - : La valeur par défaut. Le contenu n'est pas rogné. Le contenu peut éventuellement être affiché en dehors de la boîte de remplissage (_padding_).
+- `hidden`
+  - : Le contenu est rogné si besoin pour s'inscrire dans la boîte de remplissage (_padding_) et aucune barre de défilement n'est affichée.
+- `clip`
+  - : Se comporte comme `hidden` au sens où le contenu est rogné pour s'inscrire dans la boîte de remplissage. Comme `hidden`, `clip` ne présente pas de barre de défilement mais contrairement à `hidden`, `clip` empêche tout défilement, y compris à l'aide de scripts. La boîte n'est pas un conteneur de défilement et ne définit pas de nouveau contexte de formatage. Si on souhaite obtenir un nouveau contexte de formatage, il faudra utiliser {{cssxref("display", "display: flow-root", "#flow-root")}}.
+    Certains navigateurs ne prennent pas encore cette fonctionnalité en charge.
+- `scroll`
+  - : Le contenu est rogné pour s'inscrire dans la boîte de remplissage (_padding_) et les navigateurs de bureau affichent des barres de défilement dans tous les cas. Cela évite d'avoir des barres qui apparaissent et disparaissent sans cesse avec du contenu dynamique. Les imprimantes peuvent éventuellement imprimer le contenu qui dépasse.
+- `auto`
+  - : Le comportement est laissé à la discrétion de l'agent utilisateur. Les navigateurs comme Firefox affichent des ascenseurs si le contenu dépasse dans la boîte de remplissage (_padding_)
+- `overlay` {{Deprecated_inline}}
+  - : Cette valeur se comporte comme `auto` sauf que les barres de défilement sont au-dessus du contenu plutôt que de prendre de la place. Cette valeur est uniquement prise en charge par les navigateurs basés sur WebKit (Safari) ou Blink (Chrome, Opera).
+
+#### Extensions propres au moteur Mozilla
+
+- `-moz-scrollbars-none `{{obsolete_inline}}
+  - : `overflow:hidden` doit être utilisé à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans `about:config`, il faut passer `layout.css.overflow.moz-scrollbars.enabled` à `true`.
+- `-moz-scrollbars-horizontal `{{Deprecated_inline}}
+  - : Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans `about:config`, il faut passer `layout.css.overflow.moz-scrollbars.enabled` à `true`.
+- `-moz-scrollbars-vertical `{{Deprecated_inline}}
+  - : Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans `about:config`, il faut passer `layout.css.overflow.moz-scrollbars.enabled` à `true`.
+- `-moz-hidden-unscrollable` {{non-standard_inline}}
+  - : Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines `<html>`, `<body>` (avec les flèches du clavier et la roue de la souris).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="définir_différentes_valeurs_d_overflow_pour_le_texte">Définir différentes valeurs d'overflow pour le texte</h3>
+### Définir différentes valeurs d'overflow pour le texte
 
-<h4>HTML</h4>
+#### HTML
 
-<pre class="brush: html">
-  &lt;div&gt;
-    &lt;code&gt;visible&lt;/code&gt;
-    &lt;p class="visible"&gt;
+```html
+  <div>
+    <code>visible</code>
+    <p class="visible">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
-    &lt;/p&gt;
-  &lt;/div&gt;
+    </p>
+  </div>
 
-  &lt;div&gt;
-    &lt;code&gt;hidden&lt;/code&gt;
-    &lt;p class="hidden"&gt;
+  <div>
+    <code>hidden</code>
+    <p class="hidden">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
-    &lt;/p&gt;
-  &lt;/div&gt;
+    </p>
+  </div>
 
-  &lt;div&gt;
-    &lt;code&gt;scroll&lt;/code&gt;
-    &lt;p class="scroll"&gt;
+  <div>
+    <code>scroll</code>
+    <p class="scroll">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
-    &lt;/p&gt;
-  &lt;/div&gt;
+    </p>
+  </div>
 
-  &lt;div&gt;
-    &lt;code&gt;auto&lt;/code&gt;
-    &lt;p class="auto"&gt;
+  <div>
+    <code>auto</code>
+    <p class="auto">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
-    &lt;/p&gt;
-  &lt;/div&gt;
-</pre>
+    </p>
+  </div>
+```
 
-<h4>CSS</h4>
+#### CSS
 
-<pre class="brush: css">
+```css
 body {
   display: flex;
   justify-content: space-around;
@@ -152,51 +142,32 @@ p.scroll {
 p.auto {
   overflow: auto;
 }
-</pre>
-
-<h4>Résultat</h4>
-
-<p>{{EmbedLiveSample("définir_différentes_valeurs_d_overflow_pour_le_texte", "600", "250")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
-   <td>{{Spec2('CSS3 Overflow')}}</td>
-   <td>La syntaxe permet désormais d'utiliser une ou deux valeurs.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.overflow")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("text-overflow")}},</li>
- <li>{{cssxref("white-space")}},</li>
- <li>{{cssxref("overflow-x")}},</li>
- <li>{{cssxref("overflow-y")}},</li>
- <li>{{cssxref("overflow-inline")}},</li>
- <li>{{cssxref("overflow-block")}},</li>
- <li>{{cssxref("clip")}},</li>
- <li>{{cssxref("display")}}</li>
-</ul>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("définir_différentes_valeurs_d_overflow_pour_le_texte", "600", "250")}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                 | Commentaires                                                |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------------------------------------- |
+| {{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}} | {{Spec2('CSS3 Overflow')}} | La syntaxe permet désormais d'utiliser une ou deux valeurs. |
+| {{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}         | {{Spec2('CSS2.1')}}             | Définition initiale.                                        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.overflow")}}
+
+## Voir aussi
+
+- {{cssxref("text-overflow")}},
+- {{cssxref("white-space")}},
+- {{cssxref("overflow-x")}},
+- {{cssxref("overflow-y")}},
+- {{cssxref("overflow-inline")}},
+- {{cssxref("overflow-block")}},
+- {{cssxref("clip")}},
+- {{cssxref("display")}}
diff --git a/files/fr/web/css/overscroll-behavior-x/index.md b/files/fr/web/css/overscroll-behavior-x/index.md
index 6863618b75..09914cd1c4 100644
--- a/files/fr/web/css/overscroll-behavior-x/index.md
+++ b/files/fr/web/css/overscroll-behavior-x/index.md
@@ -8,17 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/overscroll-behavior-x
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>overscroll-behavior-x</code></strong> définit le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe horizontal.</p>
+La propriété CSS **`overscroll-behavior-x`** définit le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe horizontal.
 
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p>
-</div>
+> **Note :** Voir {{cssxref("overscroll-behavior")}} pour plus de détails.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 overscroll-behavior-x: auto;
 overscroll-behavior-x: contain;
 overscroll-behavior-x: none;
@@ -27,32 +26,31 @@ overscroll-behavior-x: none;
 overscroll-behavior-x: inherit;
 overscroll-behavior-x: initial;
 overscroll-behavior-x: unset;
-</pre>
+```
 
-<p>La propriété <code>overscroll-behavior-x</code> est définie avec un des mots-clés définis ci-après.</p>
+La propriété `overscroll-behavior-x` est définie avec un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Le dépassement de la zone de défilement se déroule normalement.</dd>
- <dt><code>contain</code></dt>
- <dd>Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.</dd>
- <dt><code>none</code></dt>
- <dd>Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.</dd>
-</dl>
+- `auto`
+  - : Le dépassement de la zone de défilement se déroule normalement.
+- `contain`
+  - : Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.
+- `none`
+  - : Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple <a href="https://mdn.github.io/css-examples/overscroll-behavior/overscroll-behavior-x"><code>overscroll-behavior-x</code> </a> (cf. <a href="https://github.com/mdn/css-examples/blob/master/overscroll-behavior/overscroll-behavior-x.html">le code source</a> associé), on dispose de deux boîtes de bloc, l'une contenue à l'intérieure de l'autre. La boîte englobante possède une grande largeur avec {{cssxref("width")}} afin que la page puisse défiler horizontalement. La boîte intérieure a une petite largeur (et une petite hauteur, définie avec {{cssxref("height")}}) afin de pouvoir être facilement contenue dans la zone d'affichage mais son contenu possède une grande largeur afin de défiler horizontalement.</p>
+Dans l'exemple [`overscroll-behavior-x` ](https://mdn.github.io/css-examples/overscroll-behavior/overscroll-behavior-x)(cf. [le code source](https://github.com/mdn/css-examples/blob/master/overscroll-behavior/overscroll-behavior-x.html) associé), on dispose de deux boîtes de bloc, l'une contenue à l'intérieure de l'autre. La boîte englobante possède une grande largeur avec {{cssxref("width")}} afin que la page puisse défiler horizontalement. La boîte intérieure a une petite largeur (et une petite hauteur, définie avec {{cssxref("height")}}) afin de pouvoir être facilement contenue dans la zone d'affichage mais son contenu possède une grande largeur afin de défiler horizontalement.
 
-<p>Par défaut, lorsqu'on fait défiler la boîte intérieure et qu'on atteint une limite de défilement, c'est toute la page qui commence à défiler. Si ce n'est pas le comportement souhaité, on peut empêcher ça en utilisant <code>overscroll-behavior-x: contain</code> sur la boîte intérieure :</p>
+Par défaut, lorsqu'on fait défiler la boîte intérieure et qu'on atteint une limite de défilement, c'est toute la page qui commence à défiler. Si ce n'est pas le comportement souhaité, on peut empêcher ça en utilisant `overscroll-behavior-x: contain` sur la boîte intérieure :
 
-<pre class="brush: css">main &gt; div {
+```css
+main > div {
   height: 300px;
   width: 500px;
   overflow: auto;
@@ -60,35 +58,21 @@ overscroll-behavior-x: unset;
   top: 100px;
   left: 100px;
   overscroll-behavior-x: contain;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}}</td>
-   <td>{{Spec2('Overscroll Behavior')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.overscroll-behavior-x")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                         | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------ |
+| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}} | {{Spec2('Overscroll Behavior')}} |              |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.overscroll-behavior-x")}}
+
+## Voir aussi
+
+- [Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)](https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo)
diff --git a/files/fr/web/css/overscroll-behavior-y/index.md b/files/fr/web/css/overscroll-behavior-y/index.md
index 2b9e86b5ad..d0b61a6242 100644
--- a/files/fr/web/css/overscroll-behavior-y/index.md
+++ b/files/fr/web/css/overscroll-behavior-y/index.md
@@ -8,17 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/overscroll-behavior-y
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>overscroll-behavior-y</code></strong> permet de contrôler le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe vertical.</p>
+La propriété CSS **`overscroll-behavior-y`** permet de contrôler le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe vertical.
 
-<div class="note">
-<p><strong>Note :</strong> Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p>
-</div>
+> **Note :** Voir {{cssxref("overscroll-behavior")}} pour plus de détails.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 overscroll-behavior-y: auto;
 overscroll-behavior-y: contain;
 overscroll-behavior-y: none;
@@ -27,62 +26,47 @@ overscroll-behavior-y: none;
 overscroll-behavior-y: inherit;
 overscroll-behavior-y: initial;
 overscroll-behavior-y: unset;
-</pre>
+```
 
-<p>La propriété <code>overscroll-behavior-x</code> est définie avec un des mots-clés définis ci-après.</p>
+La propriété `overscroll-behavior-x` est définie avec un des mots-clés définis ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Le dépassement de la zone de défilement se déroule normalement.</dd>
- <dt><code>contain</code></dt>
- <dd>Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.</dd>
- <dt><code>none</code></dt>
- <dd>Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.</dd>
-</dl>
+- `auto`
+  - : Le dépassement de la zone de défilement se déroule normalement.
+- `contain`
+  - : Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.
+- `none`
+  - : Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">.messages {
+```css
+.messages {
   height: 220px;
   overflow: auto;
   overscroll-behavior-y: contain;
-}</pre>
+}
+```
 
-<p>Voir {{cssxref("overscroll-behavior")}}  pour un exemple complet et plus de détails.</p>
+Voir {{cssxref("overscroll-behavior")}}  pour un exemple complet et plus de détails.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}}</td>
-   <td>{{Spec2('Overscroll Behavior')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | État                                         | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------ |
+| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}} | {{Spec2('Overscroll Behavior')}} |              |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.overscroll-behavior-y")}}</p>
+{{Compat("css.properties.overscroll-behavior-y")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)</a></li>
-</ul>
+- [Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)](https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo)
diff --git a/files/fr/web/css/overscroll-behavior/index.md b/files/fr/web/css/overscroll-behavior/index.md
index 7145aa1b6e..16e2cc1003 100644
--- a/files/fr/web/css/overscroll-behavior/index.md
+++ b/files/fr/web/css/overscroll-behavior/index.md
@@ -8,17 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/overscroll-behavior
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>overscroll-behavior</code></strong> est une propriété raccourcie permettant de définir les propriétés {{cssxref("overscroll-behavior-x")}} et {{cssxref("overscroll-behavior-y")}}. Ces propriétés contrôlent le comportement du navigateur lorsqu'on dépasse la limite d'une zone de défilement (<em>scrolling</em>).</p>
+La propriété CSS **`overscroll-behavior`** est une propriété raccourcie permettant de définir les propriétés {{cssxref("overscroll-behavior-x")}} et {{cssxref("overscroll-behavior-y")}}. Ces propriétés contrôlent le comportement du navigateur lorsqu'on dépasse la limite d'une zone de défilement (_scrolling_).
 
-<p>Par défaut, les navigateurs mobiles fournissent un effet de rebondissement voire déclenchent un rafraîchissement de la page lorsqu'on défile jusqu'en haut ou jusqu'en bas de la page. Vous avez pu remarquer que, lorsqu'une boîte de dialogue possède du contenu qu'on peut faire défiler, si on atteint la limite de défilement pour ce contenu, c'est la page sous-jacente qui défilera sous la boîte de dialogue : c'est ce qu'on appelle <strong>le chaînage du défilement</strong> (<em>scroll chaining</em>).</p>
+Par défaut, les navigateurs mobiles fournissent un effet de rebondissement voire déclenchent un rafraîchissement de la page lorsqu'on défile jusqu'en haut ou jusqu'en bas de la page. Vous avez pu remarquer que, lorsqu'une boîte de dialogue possède du contenu qu'on peut faire défiler, si on atteint la limite de défilement pour ce contenu, c'est la page sous-jacente qui défilera sous la boîte de dialogue : c'est ce qu'on appelle **le chaînage du défilement** (_scroll chaining_).
 
-<p>Dans certains cas, ces effets ne sont pas souhaitables. On peut alors utiliser <code>overscroll-behavior</code> pour éviter les chaînages intempestifs et les comportements du type "défiler pour rafraîchir".</p>
+Dans certains cas, ces effets ne sont pas souhaitables. On peut alors utiliser `overscroll-behavior` pour éviter les chaînages intempestifs et les comportements du type "défiler pour rafraîchir".
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clés */
+```css
+/* Valeurs avec un mot-clés */
 overscroll-behavior: auto;
 overscroll-behavior: contain;
 overscroll-behavior: none;
@@ -30,78 +31,65 @@ overscroll-behavior: auto contain;
 overflow: inherit;
 overflow: initial;
 overflow: unset;
-</pre>
+```
 
-<p>La propriété <code>overscroll-behavior</code> est définie avec un ou deux mots-clés parmi ceux de la liste ci-après.</p>
+La propriété `overscroll-behavior` est définie avec un ou deux mots-clés parmi ceux de la liste ci-après.
 
-<p>Lorsqu'on utilise cette propriété raccourcie avec deux valeurs, la première est utilisée pour <code>overscroll-behavior-x</code> et la seconde pour <code>overscroll-behavior-y</code>. Si une seule valeur est fournie, c'est cette même valeur qui est utilisée pour les deux propriétés.</p>
+Lorsqu'on utilise cette propriété raccourcie avec deux valeurs, la première est utilisée pour `overscroll-behavior-x` et la seconde pour `overscroll-behavior-y`. Si une seule valeur est fournie, c'est cette même valeur qui est utilisée pour les deux propriétés.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Le dépassement de la zone de défilement se déroule normalement.</dd>
- <dt><code>contain</code></dt>
- <dd>Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.</dd>
- <dt><code>none</code></dt>
- <dd>Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.</dd>
-</dl>
+- `auto`
+  - : Le dépassement de la zone de défilement se déroule normalement.
+- `contain`
+  - : Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.
+- `none`
+  - : Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans notre exemple sur <code><a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior</a></code> (cf. <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">le code source</a> associé), on affiche une page entière de contacts et une boîte de dialogue avec une fenêtre de discussion. </p>
+Dans notre exemple sur [`overscroll-behavior`](https://mdn.github.io/css-examples/overscroll-behavior/) (cf. [le code source](https://github.com/mdn/css-examples/tree/master/overscroll-behavior) associé), on affiche une page entière de contacts et une boîte de dialogue avec une fenêtre de discussion.
 
-<p><img alt="" src="example.png"></p>
+![](example.png)
 
-<p>Ces deux zones possèdent du contenu qui entraîne leur défilement. Normalement, si on défile la fenêtre de discussion jusqu'à une limite de défilement, ce serait au tour de la liste de contacts de défiler en dessous. Cependant, cet effet n'est pas souhaitable ici. On utilise donc <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> fonctionnerait également) sur la fenêtre de discussion :</p>
+Ces deux zones possèdent du contenu qui entraîne leur défilement. Normalement, si on défile la fenêtre de discussion jusqu'à une limite de défilement, ce serait au tour de la liste de contacts de défiler en dessous. Cependant, cet effet n'est pas souhaitable ici. On utilise donc `overscroll-behavior-y` (`overscroll-behavior` fonctionnerait également) sur la fenêtre de discussion :
 
-<pre class="brush: css">.messages {
+```css
+.messages {
   height: 220px;
   overflow: auto;
   overscroll-behavior-y: contain;
-} </pre>
+}
+```
 
-<p>On souhaite également se débarasser des effets de bord lorsqu'on défile jusqu'en haut ou jusqu'en bas de la liste des contacts (Chrome pour Android rafraichit la page lorsqu'on défile après la limite haute par exemple). Pour cela, on utilise <code>overscroll-behavior: none</code> sur l'élément {{htmlelement("body")}} :</p>
+On souhaite également se débarasser des effets de bord lorsqu'on défile jusqu'en haut ou jusqu'en bas de la liste des contacts (Chrome pour Android rafraichit la page lorsqu'on défile après la limite haute par exemple). Pour cela, on utilise `overscroll-behavior: none` sur l'élément {{htmlelement("body")}} :
 
-<pre class="brush: css">body {
+```css
+body {
   margin: 0;
   overscroll-behavior: none;
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Jusqu'à ce que le CSSWG publie son propre brouillon, la spécification est consutable sur <a href="https://wicg.github.io/overscroll-behavior/">le dépôt GitHub du WICG</a>.</p>
+Jusqu'à ce que le CSSWG publie son propre brouillon, la spécification est consutable sur [le dépôt GitHub du WICG](https://wicg.github.io/overscroll-behavior/).
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td>
-   <td>{{Spec2('CSS Overscroll Behavior')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | État                                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------ |
+| {{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}} | {{Spec2('CSS Overscroll Behavior')}} |              |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.overscroll-behavior")}}</p>
+{{Compat("css.properties.overscroll-behavior")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)</a></li>
- <li>{{cssxref("-ms-scroll-chaining")}}</li>
-</ul>
+- [Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)](https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo)
+- {{cssxref("-ms-scroll-chaining")}}
diff --git a/files/fr/web/css/padding-block-end/index.md b/files/fr/web/css/padding-block-end/index.md
index 91344ee297..46d4e35eac 100644
--- a/files/fr/web/css/padding-block-end/index.md
+++ b/files/fr/web/css/padding-block-end/index.md
@@ -8,51 +8,54 @@ tags:
   - Reference
 translation_of: Web/CSS/padding-block-end
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>padding-block-end</code></strong> définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`padding-block-end`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>Elle est à rapprocher des propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.</p>
+Elle est à rapprocher des propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 padding-block-end: 10px;
 padding-block-end: 1em;
 
 /* Valeurs de proportions */
-/* Type &lt;percentage&gt;      */
+/* Type <percentage>      */
 padding-block-end: 5%;  /* Relatif à la largeur du bloc englobant */
 
 /* Valeurs globales */
 padding-block-end: inherit;
 padding-block-end: initial;
 padding-block-end: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>padding-block-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+La propriété `padding-block-end` peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple et Lorem et IP sum&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="exemple">Texte d'exemple et Lorem et IP sum</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -62,49 +65,34 @@ padding-block-end: unset;
   writing-mode: vertical-lr;
   padding-block-end: 20px;
   background-color: #C8C800;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding-block-end")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("padding-top")}},</li>
-   <li>{{cssxref("padding-right")}},</li>
-   <li>{{cssxref("padding-bottom")}},</li>
-   <li>{{cssxref("padding-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}},</li>
- <li>{{cssxref("direction")}},</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding-block-end")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("padding-top")}},
+  - {{cssxref("padding-right")}},
+  - {{cssxref("padding-bottom")}},
+  - {{cssxref("padding-left")}}
+
+- {{cssxref("writing-mode")}},
+- {{cssxref("direction")}},
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/padding-block-start/index.md b/files/fr/web/css/padding-block-start/index.md
index 8a70d9e330..f9be8d7d0c 100644
--- a/files/fr/web/css/padding-block-start/index.md
+++ b/files/fr/web/css/padding-block-start/index.md
@@ -8,51 +8,54 @@ tags:
   - Reference
 translation_of: Web/CSS/padding-block-start
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>padding-block-start</code></strong> définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`padding-block-start`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>Elle est à rapprocher des propriétés {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.</p>
+Elle est à rapprocher des propriétés {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 padding-block-start: 10px;
 padding-block-start: 1em;
 
 /* Valeurs de proportions */
-/* Type &lt;percentage&gt;      */
+/* Type <percentage>      */
 padding-block-start: 5%;  /* Relatif à la largeur du bloc englobant */
 
 /* Valeurs globales */
 padding-block-start: inherit;
 padding-block-start: initial;
 padding-block-start: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>padding-block-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+La propriété `padding-block-start` peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple et Lorem et IP sum&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="exemple">Texte d'exemple et Lorem et IP sum</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -62,49 +65,34 @@ padding-block-start: unset;
   writing-mode: vertical-lr;
   padding-block-start: 20px;
   background-color: #C8C800;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding-block-start")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("padding-top")}},</li>
-   <li>{{cssxref("padding-right")}},</li>
-   <li>{{cssxref("padding-bottom")}},</li>
-   <li>{{cssxref("padding-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}},</li>
- <li>{{cssxref("direction")}},</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding-block-start")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("padding-top")}},
+  - {{cssxref("padding-right")}},
+  - {{cssxref("padding-bottom")}},
+  - {{cssxref("padding-left")}}
+
+- {{cssxref("writing-mode")}},
+- {{cssxref("direction")}},
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/padding-block/index.md b/files/fr/web/css/padding-block/index.md
index 83456aa210..cb96016492 100644
--- a/files/fr/web/css/padding-block/index.md
+++ b/files/fr/web/css/padding-block/index.md
@@ -9,12 +9,13 @@ tags:
   - Reference
 translation_of: Web/CSS/padding-block
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>padding-block</code></strong> définit l'espace de remplissage (<em>padding</em>) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`padding-block`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 padding-block: 10px 20px;  /* Des longueurs absolues */
 padding-block: 1em 2em;    /* Des longueurs relatives à la taille du texte */
 padding-block: 5% 2%;      /* Des longueurs relatives à la taille du bloc englobant */
@@ -27,25 +28,26 @@ padding-block: auto;
 padding-block: inherit;
 padding-block: initial;
 padding-block: unset;
-</pre>
+```
 
-<p>Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}. Pour définir le remplissage sur l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-inline")}} qui définit {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}.</p>
+Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}. Pour définir le remplissage sur l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-inline")}} qui définit {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>La propriété <code>padding-block</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+La propriété `padding-block` peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -55,60 +57,44 @@ padding-block: unset;
   writing-mode: vertical-rl;
   padding-block: 20px 40px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding-block")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("padding-top")}},</li>
-   <li>{{cssxref("padding-right")}},</li>
-   <li>{{cssxref("padding-bottom")}},</li>
-   <li>{{cssxref("padding-left")}}</li>
-  </ul>
- </li>
- <li>Les propriétés influençant les propriétés logiques :
-  <ul>
-   <li>{{cssxref("writing-mode")}},</li>
-   <li>{{cssxref("direction")}},</li>
-   <li>{{cssxref("text-orientation")}}</li>
-  </ul>
- </li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding-block")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("padding-top")}},
+  - {{cssxref("padding-right")}},
+  - {{cssxref("padding-bottom")}},
+  - {{cssxref("padding-left")}}
+
+- Les propriétés influençant les propriétés logiques :
+
+  - {{cssxref("writing-mode")}},
+  - {{cssxref("direction")}},
+  - {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/padding-bottom/index.md b/files/fr/web/css/padding-bottom/index.md
index 4e2f06874c..5ff4f9c420 100644
--- a/files/fr/web/css/padding-bottom/index.md
+++ b/files/fr/web/css/padding-bottom/index.md
@@ -7,110 +7,86 @@ tags:
   - Reference
 translation_of: Web/CSS/padding-bottom
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>padding-bottom</code></strong> d'un élément ajuste la hauteur de la boîte de remplissage (<em>padding</em>) en haut de l'élément. La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. Contrairement à {{cssxref("margin-bottom")}}, <code>padding-bottom</code> ne peut pas recevoir de valeurs négatives.</p>
+La propriété **`padding-bottom`** d'un élément ajuste la hauteur de la boîte de remplissage (_padding_) en haut de l'élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) correspond à l'espace entre le contenu et la bordure. Contrairement à {{cssxref("margin-bottom")}}, `padding-bottom` ne peut pas recevoir de valeurs négatives.
 
-<div>{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}
 
-<p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-bottom</code> donc).</p>
+La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris `padding-bottom` donc).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 padding-bottom: 0.5em;
 padding-bottom: 0;
 padding-bottom: 2cm;
 
 /* Valeurs de proportions */
-/* Type &lt;percentage&gt;      */
+/* Type <percentage>      */
 padding-bottom: 10%;
 
 /* Valeurs globales */
 padding-bottom: inherit;
 padding-bottom: initial;
 padding-bottom: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Cette valeur définit une hauteur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
-</dl>
+- `<length>`
+  - : Cette valeur définit une hauteur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.
+- `<percentage>`
+  - : Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="padd"&gt;
+```html
+<p class="padd">
   Elle n’avait pas bu la moitié de la bouteille,
   que sa tête touchait au plafond et qu’elle fut
   forcée de se baisser pour ne pas se casser le
   cou.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.padd {
+```css
+.padd {
   padding-bottom: 5em;
   border: solid 1px;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-bottom')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Aucun changement depuis {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>padding-bottom</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement depuis {{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}.</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding-bottom")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
- <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-bottom</code>, {{cssxref("padding-right")}}, {{cssxref("padding-top")}} et {{cssxref("padding-left")}}.</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires                                                                                                              |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Box', '#the-padding', 'padding-bottom')}}                     | {{Spec2('CSS3 Box')}}             | Aucun changement depuis {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}. |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom')}}     | {{Spec2('CSS3 Transitions')}} | `padding-bottom` peut désormais être animée.                                                                              |
+| {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}} | {{Spec2('CSS2.1')}}                 | Aucun changement depuis {{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}.                     |
+| {{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}                     | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                      |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding-bottom")}}
+
+## Voir aussi
+
+- [Le modèle de boîtes CSS](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte)
+- La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer `padding-bottom`, {{cssxref("padding-right")}}, {{cssxref("padding-top")}} et {{cssxref("padding-left")}}.
diff --git a/files/fr/web/css/padding-inline-end/index.md b/files/fr/web/css/padding-inline-end/index.md
index 5ba370f4da..ec2daa05a2 100644
--- a/files/fr/web/css/padding-inline-end/index.md
+++ b/files/fr/web/css/padding-inline-end/index.md
@@ -8,51 +8,54 @@ tags:
   - Reference
 translation_of: Web/CSS/padding-inline-end
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété<strong> <code>padding-inline-end</code></strong> définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} slon les valeurs définies poru {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété** `padding-inline-end`** définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} slon les valeurs définies poru {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-start")}}.</p>
+Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-start")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 padding-inline-end: 10px;
 padding-inline-end: 1em;
 
 /* Valeurs de proportions */
-/* Type &lt;percentage&gt;      */
+/* Type <percentage>      */
 padding-inline-end: 5%;  /* Relatif à la largeur du bloc englobant */
 
 /* Valeurs globales */
 padding-inline-end: inherit;
 padding-inline-end: initial;
 padding-inline-end: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>padding-inline-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+La propriété `padding-inline-end` peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple Lorem y psoum&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="exemple">Texte d'exemple Lorem y psoum</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -62,49 +65,34 @@ padding-inline-end: unset;
   writing-mode: vertical-lr;
   padding-inline-end: 20px;
   background-color: #C8C800;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding-inline-end")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("padding-top")}},</li>
-   <li>{{cssxref("padding-right")}},</li>
-   <li>{{cssxref("padding-bottom")}},</li>
-   <li>{{cssxref("padding-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}},</li>
- <li>{{cssxref("direction")}},</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                                           | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding-inline-end")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("padding-top")}},
+  - {{cssxref("padding-right")}},
+  - {{cssxref("padding-bottom")}},
+  - {{cssxref("padding-left")}}
+
+- {{cssxref("writing-mode")}},
+- {{cssxref("direction")}},
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/padding-inline-start/index.md b/files/fr/web/css/padding-inline-start/index.md
index 0c58a3d67e..81caa13626 100644
--- a/files/fr/web/css/padding-inline-start/index.md
+++ b/files/fr/web/css/padding-inline-start/index.md
@@ -8,51 +8,54 @@ tags:
   - Reference
 translation_of: Web/CSS/padding-inline-start
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété<strong> <code>padding-inline-start</code></strong> définit le décalage avec le début de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété** `padding-inline-start`** définit le décalage avec le début de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<p>Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-end")}}.</p>
+Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-end")}}.
 
-<p>{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}</p>
+{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 padding-inline-start: 10px;
 padding-inline-start: 1em;
 
 /* Valeurs de proportions */
-/* Type &lt;percentage&gt;      */
+/* Type <percentage>      */
 padding-inline-start: 5%;  /* Relatif à la largeur du bloc englobant */
 
 /* Valeurs globales */
 padding-inline-start: inherit;
 padding-inline-start: initial;
 padding-inline-start: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La propriété <code>padding-inline-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+La propriété `padding-inline-start` peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p class="exemple">Texte d'exemple</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -62,49 +65,34 @@ padding-inline-start: unset;
   writing-mode: vertical-lr;
   padding-inline-start: 20px;
   background-color: #C8C800;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding-inline-start")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("padding-top")}},</li>
-   <li>{{cssxref("padding-right")}},</li>
-   <li>{{cssxref("padding-bottom")}},</li>
-   <li>{{cssxref("padding-left")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("writing-mode")}},</li>
- <li>{{cssxref("direction")}},</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding-inline-start")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("padding-top")}},
+  - {{cssxref("padding-right")}},
+  - {{cssxref("padding-bottom")}},
+  - {{cssxref("padding-left")}}
+
+- {{cssxref("writing-mode")}},
+- {{cssxref("direction")}},
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/padding-inline/index.md b/files/fr/web/css/padding-inline/index.md
index b4fd3ffbf3..136ee341a6 100644
--- a/files/fr/web/css/padding-inline/index.md
+++ b/files/fr/web/css/padding-inline/index.md
@@ -9,12 +9,13 @@ tags:
   - Reference
 translation_of: Web/CSS/padding-inline
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>padding-inline</code></strong> définit l'espace de remplissage (<em>padding</em>) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+La propriété **`padding-inline`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 padding-inline: 10px 20px;  /* Des longueurs absolues */
 padding-inline: 1em 2em;    /* Des longueurs relatives à la taille du texte */
 padding-inline: 5% 2%;      /* Des longueurs relatives à la taille du bloc englobant */
@@ -27,25 +28,26 @@ padding-inline: auto;
 padding-inline: inherit;
 padding-inline: initial;
 padding-inline: unset;
-</pre>
+```
 
-<p>Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}. Pour définir le remplissage sur l'axe de bloc, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-block")}} qui définit {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}.</p>
+Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}. Pour définir le remplissage sur l'axe de bloc, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-block")}} qui définit {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>La propriété <code>padding-inline</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+La propriété `padding-inline` peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -55,60 +57,44 @@ padding-inline: unset;
   writing-mode: vertical-rl;
   padding-inline: 20px 40px;
   background-color: #c8c800;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}}</td>
-   <td>{{Spec2("CSS Logical Properties")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding-inline")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés physiques correspondantes :
-  <ul>
-   <li>{{cssxref("padding-top")}},</li>
-   <li>{{cssxref("padding-right")}},</li>
-   <li>{{cssxref("padding-bottom")}},</li>
-   <li>{{cssxref("padding-left")}}</li>
-  </ul>
- </li>
- <li>Les propriétés influençant les propriétés logiques :
-  <ul>
-   <li>{{cssxref("writing-mode")}},</li>
-   <li>{{cssxref("direction")}},</li>
-   <li>{{cssxref("text-orientation")}}</li>
-  </ul>
- </li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div>
+  <p class="texteExemple">Texte d'exemple</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 140, 140)}}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding-inline")}}
+
+## Voir aussi
+
+- Les propriétés physiques correspondantes :
+
+  - {{cssxref("padding-top")}},
+  - {{cssxref("padding-right")}},
+  - {{cssxref("padding-bottom")}},
+  - {{cssxref("padding-left")}}
+
+- Les propriétés influençant les propriétés logiques :
+
+  - {{cssxref("writing-mode")}},
+  - {{cssxref("direction")}},
+  - {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/padding-left/index.md b/files/fr/web/css/padding-left/index.md
index 616f871991..3116605b51 100644
--- a/files/fr/web/css/padding-left/index.md
+++ b/files/fr/web/css/padding-left/index.md
@@ -7,110 +7,86 @@ tags:
   - Reference
 translation_of: Web/CSS/padding-left
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>padding-left</code></strong> d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. <code>padding-left</code> ne peut pas recevoir de valeurs négatives.</p>
+La propriété **`padding-left`** d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) correspond à l'espace entre le contenu et la bordure. `padding-left` ne peut pas recevoir de valeurs négatives.
 
-<div>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-left.html")}}
 
-<p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-left</code> donc).</p>
+La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris `padding-left` donc).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 padding-left: 0.5em;
 padding-left: 0;
 padding-left: 2cm;
 
 /* Valeurs de proportions */
-/* Type &lt;percentage&gt;      */
+/* Type <percentage>      */
 padding-left: 10%;
 
 /* Valeurs globales */
 padding-left: inherit;
 padding-left: initial;
 padding-left: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Cette valeur définit une largeur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
-</dl>
+- `<length>`
+  - : Cette valeur définit une largeur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.
+- `<percentage>`
+  - : Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="padd"&gt;
+```html
+<p class="padd">
   Elle n’avait pas bu la moitié de la bouteille,
   que sa tête touchait au plafond et qu’elle fut
   forcée de se baisser pour ne pas se casser le
   cou.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.padd {
+```css
+.padd {
   padding-left: 20%;
   border: solid 1px;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-left')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-left')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>padding-left</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS1', '#padding-left', 'padding-left')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding-left")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
- <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-top</code>, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                               |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------ |
+| {{SpecName('CSS3 Box', '#the-padding', 'padding-left')}}                 | {{Spec2('CSS3 Box')}}             | Aucun changement.                          |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'padding-left')}}     | {{Spec2('CSS3 Transitions')}} | `padding-left` peut désormais être animée. |
+| {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left')}} | {{Spec2('CSS2.1')}}                 | Aucun changement.                          |
+| {{Specname('CSS1', '#padding-left', 'padding-left')}}                     | {{Spec2('CSS1')}}                 | Définition initiale.                       |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding-left")}}
+
+## Voir aussi
+
+- [Le modèle de boîtes CSS](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte)
+- La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer `padding-top`, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.
diff --git a/files/fr/web/css/padding-right/index.md b/files/fr/web/css/padding-right/index.md
index 245c6797fd..d28a0c6494 100644
--- a/files/fr/web/css/padding-right/index.md
+++ b/files/fr/web/css/padding-right/index.md
@@ -7,112 +7,86 @@ tags:
   - Reference
 translation_of: Web/CSS/padding-right
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>padding-right</code></strong> d'un élément correspond à l'espace nécessaire à la droite d'un élément. La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. <code>padding-right</code> ne peut pas recevoir de valeurs négatives.</p>
+La propriété **`padding-right`** d'un élément correspond à l'espace nécessaire à la droite d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte "http://developer.mozilla.org/en/CSS/Box_model#padding") correspond à l'espace entre le contenu et la bordure. `padding-right` ne peut pas recevoir de valeurs négatives.
 
-<div>{{EmbedInteractiveExample("pages/css/padding-right.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-right.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-right</code> donc).</p>
-</div>
+> **Note :** La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris `padding-right` donc).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 padding-right: 0.5em;
 padding-right: 0;
 padding-right: 2cm;
 
 /* Valeurs de proportions */
-/* Type &lt;percentage&gt;      */
+/* Type <percentage>      */
 padding-right: 10%;
 
 /* Valeurs globales */
 padding-right: inherit;
 padding-right: initial;
 padding-right: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Cette valeur définit une largeur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
-</dl>
+- `<length>`
+  - : Cette valeur définit une largeur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.
+- `<percentage>`
+  - : Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="padd"&gt;
+```html
+<p class="padd">
   Elle n’avait pas bu la moitié de la bouteille,
   que sa tête touchait au plafond et qu’elle fut
   forcée de se baisser pour ne pas se casser le
   cou.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.padd {
+```css
+.padd {
   padding-right: 20%;
   border: solid 1px;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-right')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-right')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>padding-right</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS1', '#padding-right', 'padding-right')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding-right")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
- <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-right</code>, {{cssxref("padding-top")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                                |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------- |
+| {{SpecName('CSS3 Box', '#the-padding', 'padding-right')}}                 | {{Spec2('CSS3 Box')}}             | Aucun changement.                           |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'padding-right')}} | {{Spec2('CSS3 Transitions')}} | `padding-right` peut désormais être animée. |
+| {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right')}} | {{Spec2('CSS2.1')}}                 | Aucun changement.                           |
+| {{Specname('CSS1', '#padding-right', 'padding-right')}}                     | {{Spec2('CSS1')}}                 | Définition initiale.                        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding-right")}}
+
+## Voir aussi
+
+- [Le modèle de boîtes CSS](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte)
+- La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer `padding-right`, {{cssxref("padding-top")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.
diff --git a/files/fr/web/css/padding-top/index.md b/files/fr/web/css/padding-top/index.md
index 97b9a7760d..edc1a16819 100644
--- a/files/fr/web/css/padding-top/index.md
+++ b/files/fr/web/css/padding-top/index.md
@@ -7,112 +7,88 @@ tags:
   - Reference
 translation_of: Web/CSS/padding-top
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>padding-top</code></strong> d'un élément ajuste la hauteur de la boîte de remplissage (<em>padding</em>) en haut de l'élément.</p>
+La propriété **`padding-top`** d'un élément ajuste la hauteur de la boîte de remplissage (_padding_) en haut de l'élément.
 
-<p>La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. Contrairement à {{cssxref("margin-top")}}, <code>padding-top</code> ne peut pas recevoir de valeurs négatives.</p>
+La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) correspond à l'espace entre le contenu et la bordure. Contrairement à {{cssxref("margin-top")}}, `padding-top` ne peut pas recevoir de valeurs négatives.
 
-<div>{{EmbedInteractiveExample("pages/css/padding-top.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-top.html")}}
 
-<p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-top</code> donc).</p>
+La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris `padding-top` donc).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 padding-top: 0.5em;
 padding-top: 0;
 padding-top: 2cm;
 
 /* Valeurs de proportions */
-/* Type &lt;percentage&gt;      */
+/* Type <percentage>      */
 padding-top: 10%;
 
 /* Valeurs globales */
 padding-top: inherit;
 padding-top: initial;
 padding-top: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Cette valeur définit une hauteur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
-</dl>
+- `<length>`
+  - : Cette valeur définit une hauteur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.
+- `<percentage>`
+  - : Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="padd"&gt;
+```html
+<p class="padd">
   Elle n’avait pas bu la moitié de la bouteille,
   que sa tête touchait au plafond et qu’elle fut
   forcée de se baisser pour ne pas se casser le
   cou.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.padd {
+```css
+.padd {
   padding-top: 5em;
   border: solid 1px;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-top')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Aucun changement depuis {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-top')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>padding-top</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement depuis {{Specname('CSS1', '#padding-top', 'padding-top')}}.</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS1', '#padding-top', 'padding-top')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding-top")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
- <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-top</code>, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                                     | Commentaires                                                                                                          |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Box', '#the-padding', 'padding-top')}}                     | {{Spec2('CSS3 Box')}}             | Aucun changement depuis {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}. |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'padding-top')}}     | {{Spec2('CSS3 Transitions')}} | `padding-top` peut désormais être animée.                                                                             |
+| {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}} | {{Spec2('CSS2.1')}}                 | Aucun changement depuis {{Specname('CSS1', '#padding-top', 'padding-top')}}.                         |
+| {{Specname('CSS1', '#padding-top', 'padding-top')}}                         | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                  |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding-top")}}
+
+## Voir aussi
+
+- [Le modèle de boîtes CSS](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte)
+- La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer `padding-top`, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.
diff --git a/files/fr/web/css/padding/index.md b/files/fr/web/css/padding/index.md
index 3b643b258d..b25c9bd624 100644
--- a/files/fr/web/css/padding/index.md
+++ b/files/fr/web/css/padding/index.md
@@ -8,21 +8,20 @@ tags:
   - Reference
 translation_of: Web/CSS/padding
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>padding</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#les_propri%c3%a9t%c3%a9s_des_bo%c3%aetes">les boîtes CSS</a>). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</p>
+La propriété **`padding`** est [une propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. [les boîtes CSS](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#les_propri%c3%a9t%c3%a9s_des_bo%c3%aetes)). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding.html")}}
 
-<p>La <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.</p>
+La [zone de remplissage](/en-US/docs/Learn/CSS/Building_blocks/The_box_model "http://developer.mozilla.org/en/CSS/Box_model#padding") correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.
 
-<div class="note">
-<p><strong>Note :</strong> Le <em>padding</em> permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge ({{cssxref("margin")}}) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.</p>
-</div>
+> **Note :** Le _padding_ permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge ({{cssxref("margin")}}) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* On applique la même valeur aux quatre côtés */
+```css
+/* On applique la même valeur aux quatre côtés */
 padding: 1em;
 
 /* vertical | horizontal */
@@ -38,43 +37,41 @@ padding: 5px 1em 0 2em;
 padding: inherit;
 padding: initial;
 padding: unset;
-</pre>
+```
 
-<p>Selon la quantité de valeurs utilisées, on a un effet différent. Chaque valeur peut être une longueur (<code><a href="#length">&lt;length&gt;</a></code>) ou un pourcentage (<code><a href="#percentage">&lt;percentage&gt;</a></code>). Les valeurs négatives ne sont pas autorisées.</p>
+Selon la quantité de valeurs utilisées, on a un effet différent. Chaque valeur peut être une longueur ([`<length>`](#length)) ou un pourcentage ([`<percentage>`](#percentage)). Les valeurs négatives ne sont pas autorisées.
 
-<ul>
- <li><strong>Une valeur</strong> applique le même écart aux 4 côtés.</li>
- <li><strong>Deux valeurs</strong> appliquent le premier écart en haut et en bas et le second sur les côtés droit et gauche.</li>
- <li><strong>Trois valeurs</strong> appliquent le premier écart en haut, le deuxième à droite et à gauche et le troisième en bas.</li>
- <li><strong>Quatre valeurs</strong> appliquent le premier écart en haut, le deuxième à droite, le troisième en bas et le quatrième à gauche.</li>
-</ul>
+- **Une valeur** applique le même écart aux 4 côtés.
+- **Deux valeurs** appliquent le premier écart en haut et en bas et le second sur les côtés droit et gauche.
+- **Trois valeurs** appliquent le premier écart en haut, le deuxième à droite et à gauche et le troisième en bas.
+- **Quatre valeurs** appliquent le premier écart en haut, le deuxième à droite, le troisième en bas et le quatrième à gauche.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Les valeurs permettent de définir une, deux, trois ou quatre valeurs pour les écarts de remplissage. On peut utiliser des valeurs de type :</p>
+Les valeurs permettent de définir une, deux, trois ou quatre valeurs pour les écarts de remplissage. On peut utiliser des valeurs de type :
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Définit un écart fixe. Voir la page {{cssxref("&lt;length&gt;")}} sur les valeurs de ce type.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Définit un écart relatif à la <strong>largeur</strong> du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} pour plus d'informations sur les valeurs de ce type.</dd>
-</dl>
+- `<length>`
+  - : Définit un écart fixe. Voir la page {{cssxref("&lt;length&gt;")}} sur les valeurs de ce type.
+- `<percentage>`
+  - : Définit un écart relatif à la **largeur** du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} pour plus d'informations sur les valeurs de ce type.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;h4&gt;Coucou le monde !&lt;/h4&gt;
-&lt;h3&gt;Le remplissage n'est pas le même ici.&lt;/h3&gt;
-</pre>
+```html
+<h4>Coucou le monde !</h4>
+<h3>Le remplissage n'est pas le même ici.</h3>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">h4 {
+```css
+h4 {
   background-color: green;
   padding: 50px 20px 20px 50px;
 }
@@ -83,62 +80,33 @@ h3 {
   background-color: blue;
   padding: 400px 5%;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples',"100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>padding</code> peut être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-padding', 'padding')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS1', '#padding', 'padding')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.padding")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">CSS : Le modèle de boîtes</a></li>
- <li>Les quatres propriétés détaillées synthétisées par <code>padding</code> :
-  <ul>
-   <li>{{cssxref("padding-top")}}</li>
-   <li>{{cssxref("padding-right")}}</li>
-   <li>{{cssxref("padding-bottom")}}</li>
-   <li>{{cssxref("padding-left")}}.</li>
-  </ul>
- </li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples',"100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                     | Commentaires                |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | --------------------------- |
+| {{SpecName('CSS3 Box', '#the-padding', 'padding')}}                 | {{Spec2('CSS3 Box')}}             | Aucun changement.           |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'padding')}} | {{Spec2('CSS3 Transitions')}} | `padding` peut être animée. |
+| {{SpecName('CSS2.1', 'box.html#propdef-padding', 'padding')}}     | {{Spec2('CSS2.1')}}                 | Aucun changement.           |
+| {{Specname('CSS1', '#padding', 'padding')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.        |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.padding")}}
+
+## Voir aussi
+
+- [CSS : Le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+- Les quatres propriétés détaillées synthétisées par `padding` :
+
+  - {{cssxref("padding-top")}}
+  - {{cssxref("padding-right")}}
+  - {{cssxref("padding-bottom")}}
+  - {{cssxref("padding-left")}}.
diff --git a/files/fr/web/css/page-break-after/index.md b/files/fr/web/css/page-break-after/index.md
index 6c40401c7f..4b42b7f2a8 100644
--- a/files/fr/web/css/page-break-after/index.md
+++ b/files/fr/web/css/page-break-after/index.md
@@ -7,15 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/page-break-after
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.</p>
-</div>
+> **Attention :** Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.
 
-<p>La propriété CSS <strong><code>page-break-after</code></strong> permet d'ajuster les sauts de page placés <em>après</em> l'élément courant.</p>
+La propriété CSS **`page-break-after`** permet d'ajuster les sauts de page placés _après_ l'élément courant.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 page-break-after: auto;
 page-break-after: always;
 page-break-after: avoid;
@@ -28,124 +27,77 @@ page-break-after: verso;
 page-break-after: inherit;
 page-break-after: initial;
 page-break-after: unset;
-</pre>
-
-<p>Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.</p>
-
-<h2 id="Synonymes_avec_break-after">Synonymes avec <code>break-after</code></h2>
-
-<p>La propriété <code>page-break-after</code> est désormais remplacée par {{cssxref("break-after")}}.</p>
-
-<p>Si pour des raisons de compatibilité, on doit traiter <code>page-break-after</code> comme synonyme, on pourra utiliser le tableau de correspondance des valeurs suivant :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><code>page-break-after</code></th>
-   <th scope="col"><code>break-after</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>auto</code></td>
-   <td><code>auto</code></td>
-  </tr>
-  <tr>
-   <td><code>left</code></td>
-   <td><code>left</code></td>
-  </tr>
-  <tr>
-   <td><code>right</code></td>
-   <td><code>right</code></td>
-  </tr>
-  <tr>
-   <td><code>avoid</code></td>
-   <td><code>avoid</code></td>
-  </tr>
-  <tr>
-   <td><code>always</code></td>
-   <td><code>page</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
- <dt><code>always</code></dt>
- <dd>Le saut de page est toujours forcé après l'élément.</dd>
- <dt><code>avoid</code></dt>
- <dd>Les sauts de page sont évités après l'élément.</dd>
- <dt><code>left</code></dt>
- <dd>Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page gauche.</dd>
- <dt><code>right</code></dt>
- <dd>Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page droite.</dd>
- <dt><code>recto</code> {{experimental_inline}}</dt>
- <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>right</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>left</code>.</dd>
- <dt><code>verso</code> {{experimental_inline}}</dt>
- <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>left</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>right</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.
+
+## Synonymes avec `break-after`
+
+La propriété `page-break-after` est désormais remplacée par {{cssxref("break-after")}}.
+
+Si pour des raisons de compatibilité, on doit traiter `page-break-after` comme synonyme, on pourra utiliser le tableau de correspondance des valeurs suivant :
+
+| `page-break-after` | `break-after` |
+| ------------------ | ------------- |
+| `auto`             | `auto`        |
+| `left`             | `left`        |
+| `right`            | `right`       |
+| `avoid`            | `avoid`       |
+| `always`           | `page`        |
+
+## Syntaxe
+
+### Valeurs
+
+- `auto`
+  - : Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).
+- `always`
+  - : Le saut de page est toujours forcé après l'élément.
+- `avoid`
+  - : Les sauts de page sont évités après l'élément.
+- `left`
+  - : Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page gauche.
+- `right`
+  - : Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page droite.
+- `recto` {{experimental_inline}}
+  - : Si la page progresse de gauche à droite, cette valeur est équivalente à `right`. Si la page progresse de droite à gauche, elle est synonyme de `left`.
+- `verso` {{experimental_inline}}
+  - : Si la page progresse de gauche à droite, cette valeur est équivalente à `left`. Si la page progresse de droite à gauche, elle est synonyme de `right`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">/* On force une nouvelle page à la suite */
+```css
+/* On force une nouvelle page à la suite */
 /* d'une note en bas de page             */
 div.footnotes {
   page-break-after: always;
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>Ajout des valeurs <code>recto</code> et <code>verso</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after')}}</td>
-   <td>{{Spec2('CSS3 Paged Media')}}</td>
-   <td>Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.page-break-after")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("break-before")}}</li>
- <li>{{cssxref("break-after")}}</li>
- <li>{{cssxref("break-inside")}}</li>
- <li>{{cssxref("page-break-before")}}</li>
- <li>{{cssxref("page-break-inside")}}</li>
- <li>{{cssxref("orphans")}}</li>
- <li>{{cssxref("widows")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                                             | Commentaires                                                                                           |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}                     | {{Spec2('CSS Logical Properties')}} | Ajout des valeurs `recto` et `verso`.                                                                  |
+| {{SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after')}}             | {{Spec2('CSS3 Paged Media')}}         | Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau. |
+| {{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}} | {{Spec2('CSS2.1')}}                         | Définition initiale.                                                                                   |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.page-break-after")}}
+
+## Voir aussi
+
+- {{cssxref("break-before")}}
+- {{cssxref("break-after")}}
+- {{cssxref("break-inside")}}
+- {{cssxref("page-break-before")}}
+- {{cssxref("page-break-inside")}}
+- {{cssxref("orphans")}}
+- {{cssxref("widows")}}
diff --git a/files/fr/web/css/page-break-before/index.md b/files/fr/web/css/page-break-before/index.md
index ebbbfaa167..864eb18465 100644
--- a/files/fr/web/css/page-break-before/index.md
+++ b/files/fr/web/css/page-break-before/index.md
@@ -7,15 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/page-break-before
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.</p>
-</div>
+> **Attention :** Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.
 
-<p>La propriété CSS <strong><code>page-break-before</code></strong> permet d'ajuster les sauts de page placés <em>avant</em> l'élément courant.Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.</p>
+La propriété CSS **`page-break-before`** permet d'ajuster les sauts de page placés _avant_ l'élément courant.Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 page-break-before: auto;
 page-break-before: always;
 page-break-before: avoid;
@@ -28,122 +27,75 @@ page-break-before: verso;
 page-break-before: inherit;
 page-break-before: initial;
 page-break-before: unset;
-</pre>
-
-<h2 id="Synonymes_avec_break-before">Synonymes avec <code>break-before</code></h2>
-
-<p>La propriété <code>page-break-before</code> est désormais remplacée par {{cssxref("break-before")}}.</p>
-
-<p>Pour des raisons de compatibilité, si on traite <code>page-break-before</code> comme un synonyme de <code>break-before</code>, on pourra utiliser le tableau de correspondance suivant :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><code>page-break-before</code></th>
-   <th scope="col"><code>break-before</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>auto</code></td>
-   <td><code>auto</code></td>
-  </tr>
-  <tr>
-   <td><code>left</code></td>
-   <td><code>left</code></td>
-  </tr>
-  <tr>
-   <td><code>right</code></td>
-   <td><code>right</code></td>
-  </tr>
-  <tr>
-   <td><code>avoid</code></td>
-   <td><code>avoid</code></td>
-  </tr>
-  <tr>
-   <td><code>always</code></td>
-   <td><code>page</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
- <dt><code>always</code></dt>
- <dd>Le saut de page est toujours forcé avant l'élément.</dd>
- <dt><code>avoid</code></dt>
- <dd>Les sauts de page sont évités avant l'élément.</dd>
- <dt><code>left</code></dt>
- <dd>Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page gauche.</dd>
- <dt><code>right</code></dt>
- <dd>Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page droite.</dd>
- <dt><code>recto</code> {{experimental_inline}}</dt>
- <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>right</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>left</code>.</dd>
- <dt><code>verso</code> {{experimental_inline}}</dt>
- <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>left</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>right</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Synonymes avec `break-before`
+
+La propriété `page-break-before` est désormais remplacée par {{cssxref("break-before")}}.
+
+Pour des raisons de compatibilité, si on traite `page-break-before` comme un synonyme de `break-before`, on pourra utiliser le tableau de correspondance suivant :
+
+| `page-break-before` | `break-before` |
+| ------------------- | -------------- |
+| `auto`              | `auto`         |
+| `left`              | `left`         |
+| `right`             | `right`        |
+| `avoid`             | `avoid`        |
+| `always`            | `page`         |
+
+## Syntaxe
+
+### Valeurs
+
+- `auto`
+  - : Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).
+- `always`
+  - : Le saut de page est toujours forcé avant l'élément.
+- `avoid`
+  - : Les sauts de page sont évités avant l'élément.
+- `left`
+  - : Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page gauche.
+- `right`
+  - : Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page droite.
+- `recto` {{experimental_inline}}
+  - : Si la page progresse de gauche à droite, cette valeur est équivalente à `right`. Si la page progresse de droite à gauche, elle est synonyme de `left`.
+- `verso` {{experimental_inline}}
+  - : Si la page progresse de gauche à droite, cette valeur est équivalente à `left`. Si la page progresse de droite à gauche, elle est synonyme de `right`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">/* Pour éviter d'avoir un saut de page avant */
+```css
+/* Pour éviter d'avoir un saut de page avant */
 /* une note dans un div                      */
 div.note {
     page-break-before: avoid;
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Logical Properties', '#logical-page', 'recto and verso')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>Ajout des valeurs <code>recto</code> et <code>verso</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}</td>
-   <td>{{Spec2('CSS3 Paged Media')}}</td>
-   <td>Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.page-break-before")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("break-before")}}</li>
- <li>{{cssxref("break-after")}}</li>
- <li>{{cssxref("break-inside")}}</li>
- <li>{{cssxref("page-break-after")}}</li>
- <li>{{cssxref("page-break-inside")}}</li>
- <li>{{cssxref("orphans")}}</li>
- <li>{{cssxref("widows")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                                             | Commentaires                                                                                           |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS Logical Properties', '#logical-page', 'recto and verso')}}         | {{Spec2('CSS Logical Properties')}} | Ajout des valeurs `recto` et `verso`.                                                                  |
+| {{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}         | {{Spec2('CSS3 Paged Media')}}         | Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau. |
+| {{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}} | {{Spec2('CSS2.1')}}                         | Définition initiale.                                                                                   |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.page-break-before")}}
+
+## Voir aussi
+
+- {{cssxref("break-before")}}
+- {{cssxref("break-after")}}
+- {{cssxref("break-inside")}}
+- {{cssxref("page-break-after")}}
+- {{cssxref("page-break-inside")}}
+- {{cssxref("orphans")}}
+- {{cssxref("widows")}}
diff --git a/files/fr/web/css/page-break-inside/index.md b/files/fr/web/css/page-break-inside/index.md
index 3dc045c5ee..fc49a18b31 100644
--- a/files/fr/web/css/page-break-inside/index.md
+++ b/files/fr/web/css/page-break-inside/index.md
@@ -7,15 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/page-break-inside
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.</p>
-</div>
+> **Attention :** Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.
 
-<p>La propriété <strong><code>page-break-inside</code></strong> ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.</p>
+La propriété **`page-break-inside`** ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 page-break-inside: auto;
 page-break-inside: avoid;
 
@@ -23,73 +22,60 @@ page-break-inside: avoid;
 page-break-inside: inherit;
 page-break-inside: initial;
 page-break-inside: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
- <dt><code>avoid</code></dt>
- <dd>L'agent utilisateur évite d'insérer un saut de page au sein de l'élément.</dd>
-</dl>
+- `auto`
+  - : Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).
+- `avoid`
+  - : L'agent utilisateur évite d'insérer un saut de page au sein de l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Alias_avec_break-inside">Alias avec <code>break-inside</code></h2>
-
-<p>La propriété <code>page-break-inside</code> a désormais été remplacée par la propriété {{cssxref("break-inside")}}.</p>
-
-<p>Pour des raisons de compatibilité, <code>page-break-inside</code> devrait être considérée par les navigateurs comme synonyme de <code>break-inside</code>. De cette façon, les sites utilisant <code>page-break-inside</code> pourront continuer de fonctionner. Voici un sous-ensemble des valeurs de cette propriété et des correspondances</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><code>page-break-inside</code></th>
-   <th scope="col"><code>break-inside</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>auto</code></td>
-   <td><code>auto</code></td>
-  </tr>
-  <tr>
-   <td><code>avoid</code></td>
-   <td><code>avoid</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div class="page"&gt;
-  &lt;p&gt;Un premier paragraphe.&lt;/p&gt;
-  &lt;section class="list"&gt;
-    &lt;span&gt;Une liste&lt;/span&gt;
-    &lt;ol&gt;
-      &lt;li&gt;Un&lt;/li&gt;
-&lt;!--       &lt;li&gt;Deux&lt;/li&gt; --&gt;
-    &lt;/ol&gt;
-  &lt;/section&gt;
-  &lt;ul&gt;
-    &lt;li&gt;Un&lt;/li&gt;
-&lt;!--     &lt;li&gt;Deux&lt;/li&gt; --&gt;
-  &lt;/ul&gt;
-  &lt;p&gt;Un deuxième paragraphe.&lt;/p&gt;
-  &lt;p&gt;Un troisième paragraphe, un peu plus long.&lt;/p&gt;
-  &lt;p&gt;Un quatrième paragraphe, un peu plus long voire plus long que le troisième.&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">.page {
+## Alias avec `break-inside`
+
+La propriété `page-break-inside` a désormais été remplacée par la propriété {{cssxref("break-inside")}}.
+
+Pour des raisons de compatibilité, `page-break-inside` devrait être considérée par les navigateurs comme synonyme de `break-inside`. De cette façon, les sites utilisant `page-break-inside` pourront continuer de fonctionner. Voici un sous-ensemble des valeurs de cette propriété et des correspondances
+
+| `page-break-inside` | `break-inside` |
+| ------------------- | -------------- |
+| `auto`              | `auto`         |
+| `avoid`             | `avoid`        |
+
+## Exemples
+
+### HTML
+
+```html
+<div class="page">
+  <p>Un premier paragraphe.</p>
+  <section class="list">
+    <span>Une liste</span>
+    <ol>
+      <li>Un</li>
+<!--       <li>Deux</li> -->
+    </ol>
+  </section>
+  <ul>
+    <li>Un</li>
+<!--     <li>Deux</li> -->
+  </ul>
+  <p>Un deuxième paragraphe.</p>
+  <p>Un troisième paragraphe, un peu plus long.</p>
+  <p>Un quatrième paragraphe, un peu plus long voire plus long que le troisième.</p>
+</div>
+```
+
+### CSS
+
+```css
+.page {
   background-color: #8cffa0;
   height: 90px;
   width: 200px;
@@ -113,50 +99,32 @@ ol, ul, .list {
 
 p:first-child {
   margin-top: 0;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 400, 160)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}</td>
-   <td>{{Spec2('CSS3 Paged Media')}}</td>
-   <td>Permet d'appliquer cette propriété sur plus d'éléments.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.page-break-inside")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("break-before")}}</li>
- <li>{{cssxref("break-after")}}</li>
- <li>{{cssxref("break-inside")}}</li>
- <li>{{cssxref("page-break-after")}}</li>
- <li>{{cssxref("page-break-before")}}</li>
- <li>{{cssxref("orphans")}}</li>
- <li>{{cssxref("widows")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 400, 160)}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                     | Commentaires                                            |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------- |
+| {{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}         | {{Spec2('CSS3 Paged Media')}} | Permet d'appliquer cette propriété sur plus d'éléments. |
+| {{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                    |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.page-break-inside")}}
+
+## Voir aussi
+
+- {{cssxref("break-before")}}
+- {{cssxref("break-after")}}
+- {{cssxref("break-inside")}}
+- {{cssxref("page-break-after")}}
+- {{cssxref("page-break-before")}}
+- {{cssxref("orphans")}}
+- {{cssxref("widows")}}
diff --git a/files/fr/web/css/paged_media/index.md b/files/fr/web/css/paged_media/index.md
index a9270029af..56b334088e 100644
--- a/files/fr/web/css/paged_media/index.md
+++ b/files/fr/web/css/paged_media/index.md
@@ -7,15 +7,13 @@ tags:
 translation_of: Web/CSS/Paged_Media
 original_slug: Web/CSS/Média_paginés
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Les propriétés des médias paginés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles. Elles permettent de définir des sauts de page, de contrôler la zone d'impression, de donner des styles différents aux pages gauche et droite et de contrôler l'application des césures à l'intérieur des éléments. Voici quelques-unes des propriétés supportées les plus fréquemment utilisées :</p>
+Les propriétés des médias paginés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles. Elles permettent de définir des sauts de page, de contrôler la zone d'impression, de donner des styles différents aux pages gauche et droite et de contrôler l'application des césures à l'intérieur des éléments. Voici quelques-unes des propriétés supportées les plus fréquemment utilisées :
 
-<ul>
- <li>{{cssxref("page-break-before")}}</li>
- <li>{{cssxref("page-break-after")}}</li>
- <li>{{cssxref("page-break-inside")}}</li>
- <li>{{cssxref("orphans")}}</li>
- <li>{{cssxref("widows")}}</li>
- <li>{{cssxref("@page")}}</li>
-</ul>
+- {{cssxref("page-break-before")}}
+- {{cssxref("page-break-after")}}
+- {{cssxref("page-break-inside")}}
+- {{cssxref("orphans")}}
+- {{cssxref("widows")}}
+- {{cssxref("@page")}}
diff --git a/files/fr/web/css/paint-order/index.md b/files/fr/web/css/paint-order/index.md
index ffbc99c063..e351a7826e 100644
--- a/files/fr/web/css/paint-order/index.md
+++ b/files/fr/web/css/paint-order/index.md
@@ -10,13 +10,14 @@ tags:
   - Web
 translation_of: Web/CSS/paint-order
 ---
-<div>{{CSSRef}}{{seecompattable}}</div>
+{{CSSRef}}{{seecompattable}}
 
-<p>La propriété <code><strong>paint-order</strong></code> permet de contrôler l'ordre dans lequel le remplissage, les marqueurs de peinture et le contour du texte et des formes sont dessinés.</p>
+La propriété **`paint-order`** permet de contrôler l'ordre dans lequel le remplissage, les marqueurs de peinture et le contour du texte et des formes sont dessinés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Normal */
+```css
+/* Normal */
 paint-order: normal;
 
 /* Valeur unique */
@@ -34,44 +35,47 @@ paint-order: stroke fill;
 /* Les marqueurs sont dessinés en premiers */
 /* puis le contour, puis le remplissage */
 paint-order: markers stroke fill;
-</pre>
+```
 
-<p>La valeur par défaut, utilisée si aucune valeur n'est fournie, sera <code>fill</code>, <code>stroke</code>, <code>markers</code>.</p>
+La valeur par défaut, utilisée si aucune valeur n'est fournie, sera `fill`, `stroke`, `markers`.
 
-<p>Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.</p>
+Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.
 
-<div class="note">
-<p><strong>Note :</strong> Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés <code>marker-*</code> (e.g. <code><a href="/fr/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) ou l'élément <code><a href="/fr/docs/Web/SVG/Element/marker">&lt;marker&gt;</a></code>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre <code>stroke</code> et <code>fill</code> importe.</p>
-</div>
+> **Note :** Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés `marker-*` (e.g. [`marker-start`](/fr/docs/Web/SVG/Attribute/marker-start)) ou l'élément [`<marker>`](/fr/docs/Web/SVG/Element/marker). Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre `stroke` et `fill` importe.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Les différents niveaux sont appliqués dans l'ordre normal.</dd>
- <dt><code>stroke</code></dt>
- <dt> </dt>
- <dt><code>fill</code></dt>
- <dt><code>markers</code></dt>
- <dd>Indiquent les valeurs dans l'ordre dans lequel on veut qu'elles soient peintes.</dd>
-</dl>
+- `normal`
+  - : Les différents niveaux sont appliqués dans l'ordre normal.
+- `stroke`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+
+  `fill`
+
+  `markers`
+
+  - : Indiquent les valeurs dans l'ordre dans lequel on veut qu'elles soient peintes.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="SVG">SVG</h3>
+### SVG
 
-<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"&gt;
-  &lt;text x="10" y="75"&gt;stroke in front&lt;/text&gt;
-  &lt;text x="10" y="150" class="stroke-behind"&gt;stroke behind&lt;/text&gt;
-&lt;/svg&gt;</pre>
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+  <text x="10" y="75">stroke in front</text>
+  <text x="10" y="150" class="stroke-behind">stroke behind</text>
+</svg>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">text {
+```css
+text {
   font-family: sans-serif;
   font-size: 50px;
   font-weight: bold;
@@ -82,33 +86,21 @@ paint-order: markers stroke fill;
 
 .stroke-behind {
   paint-order: stroke fill;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '100%', 165)}}</p>
+{{EmbedLiveSample('Exemples', '100%', 165)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('SVG2', 'painting.html#PaintOrder', 'paint-order')}}</td>
-   <td>{{Spec2('SVG2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName('SVG2', 'painting.html#PaintOrder', 'paint-order')}} | {{Spec2('SVG2')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.paint-order")}}</p>
+{{Compat("css.properties.paint-order")}}
diff --git a/files/fr/web/css/path()/index.md b/files/fr/web/css/path()/index.md
index 7be4d1a072..cfc0fcd2c1 100644
--- a/files/fr/web/css/path()/index.md
+++ b/files/fr/web/css/path()/index.md
@@ -1,61 +1,51 @@
 ---
 title: path()
 slug: Web/CSS/path()
-translation_of: 'Web/CSS/path()'
+translation_of: Web/CSS/path()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <a href="/fr/docs/Web/CSS/CSS_Functions">fonction</a> <a href="/fr/docs/Web/CSS">CSS</a> <code><strong>path()</strong></code> accepte comme paramètre une chaîne représentant un tracé SVG. Elle est utilisée dans les formes CSS et les animations de tracés CSS pour permettre de dessiner une forme.</p>
+La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`path()`** accepte comme paramètre une chaîne représentant un tracé SVG. Elle est utilisée dans les formes CSS et les animations de tracés CSS pour permettre de dessiner une forme.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">path( [[&lt;'fill-rule'&gt;,]?&lt;string&gt;)</pre>
+```css
+path( [[<'fill-rule'>,]?<string>)
+```
 
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>&lt;'fill-rule'&gt;</code></dt>
- <dd>La règle de remplissage de l'intérieur du tracé. Les valeurs possibles sont <code>nonzero</code> ou <code>evenodd</code>. La valeur par défaut est <code>nonzero</code>. Voir <a href="/fr/docs/Web/SVG/Attribute/fill-rule">fill-rule</a> pour plus de détails.</dd>
- <dt><code>&lt;string&gt;</code></dt>
- <dd>Doit être une <a href="/fr/docs/Web/SVG/Element/path">chaîne représentant les données d'un chemin SVG</a>.</dd>
-</dl>
+- `<'fill-rule'>`
+  - : La règle de remplissage de l'intérieur du tracé. Les valeurs possibles sont `nonzero` ou `evenodd`. La valeur par défaut est `nonzero`. Voir [fill-rule](/fr/docs/Web/SVG/Attribute/fill-rule) pour plus de détails.
+- `<string>`
+  - : Doit être une [chaîne représentant les données d'un chemin SVG](/fr/docs/Web/SVG/Element/path).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="examples_of_correct_values_for_path">Exemples de valeurs correctes pour path()</h3>
+### Exemples de valeurs correctes pour path()
 
-<pre class="brush: css">path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
+```css
+path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
 path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
-</pre>
-
-<h3 id="use_in_offset_path">Utilisation en tant que valeur de offset-path</h3>
-
-<p>La fonction <code>path()</code> est utilisée pour créer un tracé à suivre pour l'élément. La modification de l'une de ces valeurs conduira celui-ci à ne pas pouvoir suivre le tracé de façon nette lors de l'animation.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/path/offset-path.html", '100%', 960)}}</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-     <th scope="col">Spécification</th>
-     <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('CSS Shapes', '#funcdef-path', 'path()')}}</td>
-      <td>{{Spec2('CSS Shapes')}}</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li>{{cssxref("&lt;shape-outside&gt;")}}</li>
-  <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Formes CSS</a></li>
-  <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Vue d'ensemble des formes CSS</a></li>
-  <li><a href="https://css-tricks.com/svg-path-syntax-illustrated-guide/"><i lang="en">SVG Path Syntax Illustrated Guide</i> (en anglais)</a></li>
-</ul>
+```
+
+### Utilisation en tant que valeur de offset-path
+
+La fonction `path()` est utilisée pour créer un tracé à suivre pour l'élément. La modification de l'une de ces valeurs conduira celui-ci à ne pas pouvoir suivre le tracé de façon nette lors de l'animation.
+
+{{EmbedGHLiveSample("css-examples/path/offset-path.html", '100%', 960)}}
+
+## Spécifications
+
+| Spécification                                                            | Statut                           |
+| ------------------------------------------------------------------------ | -------------------------------- |
+| {{SpecName('CSS Shapes', '#funcdef-path', 'path()')}} | {{Spec2('CSS Shapes')}} |
+
+## Voir aussi
+
+- {{cssxref("&lt;shape-outside&gt;")}}
+- [Formes CSS](/fr/docs/Web/CSS/CSS_Shapes)
+- [Vue d'ensemble des formes CSS](/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)
+- <i lang="en">SVG Path Syntax Illustrated Guide</i>
+
+  [<i lang="en">SVG Path Syntax Illustrated Guide</i> (en anglais)](https://css-tricks.com/svg-path-syntax-illustrated-guide/)
diff --git a/files/fr/web/css/percentage/index.md b/files/fr/web/css/percentage/index.md
index 378f92a039..848efd63ed 100644
--- a/files/fr/web/css/percentage/index.md
+++ b/files/fr/web/css/percentage/index.md
@@ -7,89 +7,64 @@ tags:
   - Type
 translation_of: Web/CSS/percentage
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de données CSS <strong><code>&lt;percentage&gt;</code></strong> représente une valeur exprimée en pourcentages. De nombreuses propriétés CSS utilisent des valeurs en pourcentages, la plupart du temps pour déterminer des tailles en fonction de la taille des éléments parent.</p>
+Le type de données CSS **`<percentage>`** représente une valeur exprimée en pourcentages. De nombreuses propriétés CSS utilisent des valeurs en pourcentages, la plupart du temps pour déterminer des tailles en fonction de la taille des éléments parent.
 
-<p>De nombreuses propriétés CSS utilisent des pourcentages : {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, etc.. Les pourcentages peuvent aussi être vus avec {{cssxref("font-size")}}, où la taille du texte est directement en relation avec celle de son parent.</p>
+De nombreuses propriétés CSS utilisent des pourcentages : {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, etc.. Les pourcentages peuvent aussi être vus avec {{cssxref("font-size")}}, où la taille du texte est directement en relation avec celle de son parent.
 
-<div class="note">
-<p><strong>Note :</strong> Seules les valeurs calculées sont héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parent, une valeur réelle, comme une largeur en pixel pour une valeur {{cssxref("&lt;length&gt;")}}, sera accessible sur la propriété héritée, pas la valeur en pourcentage.</p>
-</div>
+> **Note :** Seules les valeurs calculées sont héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parent, une valeur réelle, comme une largeur en pixel pour une valeur {{cssxref("&lt;length&gt;")}}, sera accessible sur la propriété héritée, pas la valeur en pourcentage.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Les valeurs de type <code>&lt;percentage&gt;</code> sont formées d'un {{cssxref("&lt;number&gt;")}} immédiatement suivi par le signe pourcentage <code>%</code>. Comme pour toutes les valeurs avec unité en CSS, il n'y a aucun espace entre le '%' et le nombre.</p>
+Les valeurs de type `<percentage>` sont formées d'un {{cssxref("&lt;number&gt;")}} immédiatement suivi par le signe pourcentage `%`. Comme pour toutes les valeurs avec unité en CSS, il n'y a aucun espace entre le '%' et le nombre.
 
-<h2 id="Interpolation">Interpolation</h2>
+## Interpolation
 
-<p>Les valeurs du type <code>&lt;percentage&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.</p>
+Les valeurs du type `<percentage>` peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="width_et_margin-left"><code>width</code> et <code>margin-left</code></h3>
+### `width` et `margin-left`
 
-<pre class="brush: html">&lt;div style="background-color:#0000FF;"&gt;
-  &lt;div style="width:50%;margin-left:20%;background-color:#00FF00;"&gt;
+```html
+<div style="background-color:#0000FF;">
+  <div style="width:50%;margin-left:20%;background-color:#00FF00;">
     width : 50%, left-margin : 20%
-  &lt;/div&gt;
-  &lt;div style="width:30%;margin-left:60%;background-color:#FF0000;"&gt;
+  </div>
+  <div style="width:30%;margin-left:60%;background-color:#FF0000;">
     width : 30%, left-margin : 60%
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<p>Le fragment de HTML précédent sera affiché de cette façon :</p>
-
-<p>{{EmbedLiveSample('width_et_margin-left', '100%', '140')}}</p>
-
-<h3 id="font-size"><code>font-size</code></h3>
-
-<pre class="brush: html">&lt;div style="font-size:18px;"&gt;
-  &lt;p&gt;Texte en taille normale (18px)&lt;/p&gt;
-  &lt;p&gt;&lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;&lt;/p&gt;
-  &lt;p&gt;&lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<p>Le fragment HTML précédent donnera ce résultat :</p>
-
-<p>{{EmbedLiveSample('font-size')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#percentages', '&lt;percentage&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td>Aucune modification significative.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Aucune modification significative depuis la spécification CSS de niveau 2 (première révision).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification depuis la spécification CSS de niveau 1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.percentage")}}</p>
+  </div>
+</div>
+```
+
+Le fragment de HTML précédent sera affiché de cette façon :
+
+{{EmbedLiveSample('width_et_margin-left', '100%', '140')}}
+
+### `font-size`
+
+```html
+<div style="font-size:18px;">
+  <p>Texte en taille normale (18px)</p>
+  <p><span style="font-size:50%;">50%</span></p>
+  <p><span style="font-size:200%;">200%</span></p>
+</div>
+```
+
+Le fragment HTML précédent donnera ce résultat :
+
+{{EmbedLiveSample('font-size')}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires                                                                                   |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Values', '#percentages', '&lt;percentage&gt;')}}                 | {{Spec2('CSS4 Values')}} | Aucune modification significative.                                                             |
+| {{SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;')}}                 | {{Spec2('CSS3 Values')}} | Aucune modification significative depuis la spécification CSS de niveau 2 (première révision). |
+| {{SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;')}} | {{Spec2('CSS2.1')}}         | Aucune modification depuis la spécification CSS de niveau 1.                                   |
+| {{SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;')}}                     | {{Spec2('CSS1')}}         | Définition initiale.                                                                           |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.percentage")}}
diff --git a/files/fr/web/css/perspective-origin/index.md b/files/fr/web/css/perspective-origin/index.md
index 8a8768ebf1..8e3ed90c2a 100644
--- a/files/fr/web/css/perspective-origin/index.md
+++ b/files/fr/web/css/perspective-origin/index.md
@@ -8,17 +8,18 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/perspective-origin
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>perspective-origin</code></strong> détermine la poisition depuis laquelle le spectateur regarde le document. Elle est utilisée comme point de fuite par la propriété {{cssxref("perspective")}}.</p>
+La propriété **`perspective-origin`** détermine la poisition depuis laquelle le spectateur regarde le document. Elle est utilisée comme point de fuite par la propriété {{cssxref("perspective")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div>
+{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}
 
-<p>Les propriétés <code>perspective-origin</code> et {{cssxref("perspective")}} sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code> s'applique à même l'élément qu'on veut placer en 3D.</p>
+Les propriétés `perspective-origin` et {{cssxref("perspective")}} sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction [`perspective()`](/fr/docs/Web/CSS/transform-function/perspective) s'applique à même l'élément qu'on veut placer en 3D.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Syntaxe avec une valeur */
+```css
+/* Syntaxe avec une valeur */
 perspective-origin: x-position;
 
 /* Syntaxe avec deux valeurs */
@@ -32,216 +33,215 @@ perspective-origin: y-position x-position;
 perspective-origin: inherit;
 perspective-origin: initial;
 perspective-origin: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><em>x-position</em></dt>
- <dd>Indique l'abscisse de la position du point de fuite. La valeur peut être :
- <ul>
-  <li>De type {{cssxref("&lt;length-percentage&gt;")}} : la position est indiquée comme une longueur absolue ou relativement à la largeur de l'élément. La valeur peut être négative.</li>
-  <li><code>left</code> : un mot-clé qui est un alias pour indiquer une longueur nulle.</li>
-  <li><code>center</code> : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de <code>50%</code>.</li>
-  <li><code>right</code> : un mot-clé qui est un alias pour indiquer un pourcentage de <code>100%</code>.</li>
- </ul>
- </dd>
- <dt><em>y-position</em></dt>
- <dd>Indique l'ordonnée de la position du point de fuite. La valeur peut être :
- <ul>
-  <li>De type {{cssxref("&lt;length-percentage&gt;")}} : la position est indiquée comme une longueur absolue ou relativement à la hauteur de l'élément. La valeur peut être négative.</li>
-  <li>De type {{cssxref("&lt;length&gt;")}} : la position est indiquée avec une valeur de longueur. La valeur peut être négative.</li>
-  <li><code>top</code> : un mot-clé qui est un alias pour indiquer une longueur nulle.</li>
-  <li><code>center</code> : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de <code>50%</code>.</li>
-  <li><code>bottom</code> : un mot-clé qui est un alias pour indiquer un pourcentage de <code>100%</code>.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- _x-position_
+
+  - : Indique l'abscisse de la position du point de fuite. La valeur peut être :
+
+    - De type {{cssxref("&lt;length-percentage&gt;")}} : la position est indiquée comme une longueur absolue ou relativement à la largeur de l'élément. La valeur peut être négative.
+    - `left` : un mot-clé qui est un alias pour indiquer une longueur nulle.
+    - `center` : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de `50%`.
+    - `right` : un mot-clé qui est un alias pour indiquer un pourcentage de `100%`.
+
+- _y-position_
+
+  - : Indique l'ordonnée de la position du point de fuite. La valeur peut être :
+
+    - De type {{cssxref("&lt;length-percentage&gt;")}} : la position est indiquée comme une longueur absolue ou relativement à la hauteur de l'élément. La valeur peut être négative.
+    - De type {{cssxref("&lt;length&gt;")}} : la position est indiquée avec une valeur de longueur. La valeur peut être négative.
+    - `top` : un mot-clé qui est un alias pour indiquer une longueur nulle.
+    - `center` : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de `50%`.
+    - `bottom` : un mot-clé qui est un alias pour indiquer un pourcentage de `100%`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Cubes_avec_des_valeurs_communes_pour_perspective-origin">Cubes avec des valeurs communes pour <code>perspective-origin</code></h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;section&gt;
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: top left;&lt;/code&gt;&lt;/caption&gt;
-    &lt;div class="container"&gt;
-    &lt;div class="cube potl"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: top;&lt;/code&gt;&lt;/caption&gt;
-   &lt;div class="container"&gt;
-    &lt;div class="cube potm"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: top right;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube potr"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: left;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube poml"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: 50% 50%;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pomm"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: right;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pomr"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom left;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pobl"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pobm"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom right;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube pobr"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: -200% -200%;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube po200200neg"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% 200%;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube po200200pos"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;figure&gt;
-  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% -200%;&lt;/code&gt;&lt;/caption&gt;
-  &lt;div class="container"&gt;
-    &lt;div class="cube po200200"&gt;
-      &lt;div class="face front"&gt;1&lt;/div&gt;
-      &lt;div class="face back"&gt;2&lt;/div&gt;
-      &lt;div class="face right"&gt;3&lt;/div&gt;
-      &lt;div class="face left"&gt;4&lt;/div&gt;
-      &lt;div class="face top"&gt;5&lt;/div&gt;
-      &lt;div class="face bottom"&gt;6&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/figure&gt;
-
-&lt;/section&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">/* Valeurs de perspective-origin (uniques pour chaque exemple) */
+## Exemples
+
+### Cubes avec des valeurs communes pour `perspective-origin`
+
+#### HTML
+
+```html
+<section>
+<figure>
+  <caption><code>perspective-origin: top left;</code></caption>
+    <div class="container">
+    <div class="cube potl">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: top;</code></caption>
+   <div class="container">
+    <div class="cube potm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: top right;</code></caption>
+  <div class="container">
+    <div class="cube potr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: left;</code></caption>
+  <div class="container">
+    <div class="cube poml">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 50% 50%;</code></caption>
+  <div class="container">
+    <div class="cube pomm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: right;</code></caption>
+  <div class="container">
+    <div class="cube pomr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom left;</code></caption>
+  <div class="container">
+    <div class="cube pobl">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom;</code></caption>
+  <div class="container">
+    <div class="cube pobm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: bottom right;</code></caption>
+  <div class="container">
+    <div class="cube pobr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: -200% -200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200neg">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 200% 200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200pos">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <caption><code>perspective-origin: 200% -200%;</code></caption>
+  <div class="container">
+    <div class="cube po200200">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+</section>
+```
+
+#### CSS
+
+```css
+/* Valeurs de perspective-origin (uniques pour chaque exemple) */
 .potl {
   perspective-origin: top left;
 }
@@ -343,43 +343,29 @@ section {
   text-align: left;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-}</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample('Cubes_avec_des_valeurs_communes_pour_perspective-origin', 620, 800)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.perspective-origin")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS" title="CSS/Using_CSS_transforms">Utiliser les transformations CSS</a></li>
- <li>{{cssxref('transform-style')}}</li>
- <li>{{cssxref('transform-function')}}</li>
- <li>{{cssxref('perspective')}}</li>
- <li><a href="/fr/docs/Web/CSS/transform-function/perspective">La fonction de transformation <code>perspective()</code></a></li>
-</ul>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Cubes_avec_des_valeurs_communes_pour_perspective-origin', 620, 800)}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}} | {{Spec2('CSS Transforms 2')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.perspective-origin")}}
+
+## Voir aussi
+
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS "CSS/Using_CSS_transforms")
+- {{cssxref('transform-style')}}
+- {{cssxref('transform-function')}}
+- {{cssxref('perspective')}}
+- [La fonction de transformation `perspective()`](/fr/docs/Web/CSS/transform-function/perspective)
diff --git a/files/fr/web/css/perspective/index.md b/files/fr/web/css/perspective/index.md
index e29b24aa7a..26a72c66ee 100644
--- a/files/fr/web/css/perspective/index.md
+++ b/files/fr/web/css/perspective/index.md
@@ -8,25 +8,26 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/perspective
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>perspective</code></strong> détermine la distance entre le plan d'équation z = 0 et la position de l'utilisateur afin de donner une perspective aux objets positionnés dans l'espace 3D. Chaque élément pour lequel la côte (z) est positif sera plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La force de cet effet est déterminée par la valeur de cette propriété.</p>
+La propriété **`perspective`** détermine la distance entre le plan d'équation z = 0 et la position de l'utilisateur afin de donner une perspective aux objets positionnés dans l'espace 3D. Chaque élément pour lequel la côte (z) est positif sera plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La force de cet effet est déterminée par la valeur de cette propriété.
 
-<div>{{EmbedInteractiveExample("pages/css/perspective.html")}}</div>
+{{EmbedInteractiveExample("pages/css/perspective.html")}}
 
-<p>Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété <code>perspective</code>) ne sont pas dessiné.</p>
+Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété `perspective`) ne sont pas dessiné.
 
-<p>Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}.</p>
+Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}.
 
-<p>Si on utilise cette propriété avec une valeur différente de <code>0</code> ou <code>none</code>, cela créera un nouveau <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">contexte d'empilement</a>. Et l'objet joue alors le rôle de bloc englobant pour les éléments qu'il contient et qui ont <code>position: fixed</code> ou <code>position: absolute</code></p>
+Si on utilise cette propriété avec une valeur différente de `0` ou `none`, cela créera un nouveau [contexte d'empilement](/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches). Et l'objet joue alors le rôle de bloc englobant pour les éléments qu'il contient et qui ont `position: fixed` ou `position: absolute`
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 perspective: none;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+/* Type <length>       */
 perspective: 20px;
 perspective: 3.5em;
 
@@ -34,98 +35,99 @@ perspective: 3.5em;
 perspective: inherit;
 perspective: initial;
 perspective: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Un mot-clé qui indique qu'on n'applique aucune perspective.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une longueur (une valeur de type {{cssxref("&lt;length&gt;")}}) qui indique la distance entre l'utilisateur et le plan d'équation z = 0. Elle est utilisée pour appliquer une perspective à l'élément et à son contenu. Si elle vaut <code>0</code> ou qu'elle est négative, aucune transformation de perspective ne sera appliquée.</dd>
-</dl>
+- `none`
+  - : Un mot-clé qui indique qu'on n'applique aucune perspective.
+- `<length>`
+  - : Une longueur (une valeur de type {{cssxref("&lt;length&gt;")}}) qui indique la distance entre l'utilisateur et le plan d'équation z = 0. Elle est utilisée pour appliquer une perspective à l'élément et à son contenu. Si elle vaut `0` ou qu'elle est négative, aucune transformation de perspective ne sera appliquée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Trois_cubes">Trois cubes</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
-      &lt;/th&gt;
-      &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
-      &lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;
-        &lt;div class="container"&gt;
-          &lt;div class="cube pers250"&gt;
-            &lt;div class="face front"&gt;1&lt;/div&gt;
-            &lt;div class="face back"&gt;2&lt;/div&gt;
-            &lt;div class="face right"&gt;3&lt;/div&gt;
-            &lt;div class="face left"&gt;4&lt;/div&gt;
-            &lt;div class="face top"&gt;5&lt;/div&gt;
-            &lt;div class="face bottom"&gt;6&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/td&gt;
-      &lt;td&gt;
-        &lt;div class="container"&gt;
-          &lt;div class="cube pers350"&gt;
-            &lt;div class="face front"&gt;1&lt;/div&gt;
-            &lt;div class="face back"&gt;2&lt;/div&gt;
-            &lt;div class="face right"&gt;3&lt;/div&gt;
-            &lt;div class="face left"&gt;4&lt;/div&gt;
-            &lt;div class="face top"&gt;5&lt;/div&gt;
-            &lt;div class="face bottom"&gt;6&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
-      &lt;/th&gt;
-      &lt;th&gt;&lt;code&gt;perspective: 650px;&lt;/code&gt;
-      &lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;
-        &lt;div class="container"&gt;
-          &lt;div class="cube pers500"&gt;
-            &lt;div class="face front"&gt;1&lt;/div&gt;
-            &lt;div class="face back"&gt;2&lt;/div&gt;
-            &lt;div class="face right"&gt;3&lt;/div&gt;
-            &lt;div class="face left"&gt;4&lt;/div&gt;
-            &lt;div class="face top"&gt;5&lt;/div&gt;
-            &lt;div class="face bottom"&gt;6&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/td&gt;
-      &lt;td&gt;
-        &lt;div class="container"&gt;
-          &lt;div class="cube pers650"&gt;
-            &lt;div class="face front"&gt;1&lt;/div&gt;
-            &lt;div class="face back"&gt;2&lt;/div&gt;
-            &lt;div class="face right"&gt;3&lt;/div&gt;
-            &lt;div class="face left"&gt;4&lt;/div&gt;
-            &lt;div class="face top"&gt;5&lt;/div&gt;
-            &lt;div class="face bottom"&gt;6&lt;/div&gt;
-          &lt;/div&gt;
-      &lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">/* Des classes pour les différentes valeurs */
+## Exemples
+
+### Trois cubes
+
+#### HTML
+
+```html
+<table>
+  <tbody>
+    <tr>
+      <th><code>perspective: 250px;</code>
+      </th>
+      <th><code>perspective: 350px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers250">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers350">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>perspective: 500px;</code>
+      </th>
+      <th><code>perspective: 650px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers500">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers650">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+
+#### CSS
+
+```css
+/* Des classes pour les différentes valeurs */
 .pers250 {
     perspective: 250px;
 }
@@ -207,39 +209,25 @@ th, p, td {
    padding: 10px;
    font-family: sans-serif;
    text-align: left;
-}</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample('Trois_cubes', 660, 700)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Trois_cubes', 660, 700)}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires        |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- |
+| {{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}} | {{Spec2('CSS Transforms 2')}} | Définition initiale |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.perspective")}}</p>
+{{Compat("css.properties.perspective")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
-</ul>
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS)
diff --git a/files/fr/web/css/place-content/index.md b/files/fr/web/css/place-content/index.md
index 58064fcb1f..479ae64def 100644
--- a/files/fr/web/css/place-content/index.md
+++ b/files/fr/web/css/place-content/index.md
@@ -8,15 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/place-content
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété raccourcie <code><strong>place</strong></code><strong><code>-content</code></strong> permet de définir les valeurs des propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement.</p>
+La propriété raccourcie **`place`\*\***`-content`\*\* permet de définir les valeurs des propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement.
 
-<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div
+{{EmbedInteractiveExample("pages/css/place-content.html")}}Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: css no-line-numbers">/* Valeurs décrivant l'alignement */
+```css
+/* Valeurs décrivant l'alignement */
 /* Note : align-content ne gère pas les valeurs left et right */
 place-content: center start;
 place-content: start center;
@@ -39,55 +38,52 @@ place-content: stretch space-evenly;
 /* Valeurs globales */
 place-content: inherit;
 place-content: initial;
-place-content: unset;</pre>
-
-<p>La première valeur utilisée sera celle qui correspond à {{cssxref("align-content")}} et la seconde valeur correspondra à {{cssxref("justify-content")}}. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour <code>justify-content</code>.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.</p>
-</div>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>start</code></dt>
- <dd>Les éléments sont alignés vers le début du conteneur pour l'axe correspondant.</dd>
- <dt><code>end</code></dt>
- <dd>Les éléments sont alignés vers la fin du conteneur pour l'axe correspondant.</dd>
- <dt><code>flex-start</code></dt>
- <dd>Les éléments sont alignés vers le début du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de <code>start</code>.</dd>
- <dt><code>flex-end</code></dt>
- <dd>Les éléments sont alignés vers la fin du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de <code>end</code>.</dd>
- <dt><code>center</code></dt>
- <dd>Les éléments sont alignés au centre du conteneur dans l'axe correspondant.</dd>
- <dt><code>left</code></dt>
- <dd>Les éléments sont alignés vers le bord gauche du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (<em>inline axis</em>), cette valeur sera synonyme de <code>start</code>.</dd>
- <dt><code>right</code></dt>
- <dd>Les éléments sont alignés vers le bord droit du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (<em>inline axis</em>), cette valeur sera synonyme de <code>start</code>.</dd>
- <dt><code>space-between</code></dt>
- <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. Ainsi, l'espace entre chaque élément adjacent sera le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est également aligné sur le bord du conteneur à la fin de l'axe.</dd>
- <dt><code>baseline<br>
- first baseline</code><br>
- <code>last baseline</code></dt>
- <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>
- The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd>
- <dt><code>space-around</code></dt>
- <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même. L'espace entre le bord du conteneur et le premier élément sera la moitié de l'espace utilisé entre chaque élément. L'espace entre le dernier élément et le bord du conteneur sera la moitié de l'espace utilisé entre chaque élément.</dd>
- <dt><code>space-evenly</code></dt>
- <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même, ce sera également cet espace qui sera utilisé entre le bord du conteneur et le premier élément et entre le dernier élément et le bord du conteneur.</dd>
- <dt><code>stretch</code></dt>
- <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe correspondant, tous les éléments dimensionnés automatiquement seront étirés de la même façon (et pas de façon proportionnelle) tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes) afin que la taille de l'ensemble des éléments soit exactement celle du conteneur.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+place-content: unset;
+```
+
+La première valeur utilisée sera celle qui correspond à {{cssxref("align-content")}} et la seconde valeur correspondra à {{cssxref("justify-content")}}. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour `justify-content`.
+
+> **Attention :** Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.
+
+### Valeurs
+
+- `start`
+  - : Les éléments sont alignés vers le début du conteneur pour l'axe correspondant.
+- `end`
+  - : Les éléments sont alignés vers la fin du conteneur pour l'axe correspondant.
+- `flex-start`
+  - : Les éléments sont alignés vers le début du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de `start`.
+- `flex-end`
+  - : Les éléments sont alignés vers la fin du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de `end`.
+- `center`
+  - : Les éléments sont alignés au centre du conteneur dans l'axe correspondant.
+- `left`
+  - : Les éléments sont alignés vers le bord gauche du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (_inline axis_), cette valeur sera synonyme de `start`.
+- `right`
+  - : Les éléments sont alignés vers le bord droit du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (_inline axis_), cette valeur sera synonyme de `start`.
+- `space-between`
+  - : Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. Ainsi, l'espace entre chaque élément adjacent sera le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est également aligné sur le bord du conteneur à la fin de l'axe.
+- `baseline first baseline`
+  `last baseline`
+  - : Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+    The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.
+- `space-around`
+  - : Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même. L'espace entre le bord du conteneur et le premier élément sera la moitié de l'espace utilisé entre chaque élément. L'espace entre le dernier élément et le bord du conteneur sera la moitié de l'espace utilisé entre chaque élément.
+- `space-evenly`
+  - : Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même, ce sera également cet espace qui sera utilisé entre le bord du conteneur et le premier élément et entre le dernier élément et le bord du conteneur.
+- `stretch`
+  - : Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe correspondant, tous les éléments dimensionnés automatiquement seront étirés de la même façon (et pas de façon proportionnelle) tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes) afin que la taille de l'ensemble des éléments soit exactement celle du conteneur.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   display: flex;
   height:240px;
   width: 240px;
@@ -98,7 +94,7 @@ place-content: unset;</pre>
   place-content: flex-end center; /* Cette valeur peut être modifiée dans l'exemple */
 }
 
-div &gt; div {
+div > div {
   border: 2px solid #8c8c8c;
   width: 50px;
   background-color: #a0c8ff;
@@ -113,63 +109,66 @@ div &gt; div {
   font-size: 14px;
   height: 50px;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div class="small"&gt;Lorem&lt;/div&gt;
-  &lt;div class="small"&gt;Lorem&lt;br/&gt;ipsum&lt;/div&gt;
-  &lt;div class="large"&gt;Lorem&lt;/div&gt;
-  &lt;div class="large"&gt;Lorem&lt;br/&gt;impsum&lt;/div&gt;
-  &lt;div class="large"&gt;&lt;/div&gt;
-  &lt;div class="large"&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="hidden brush:html">&lt;code&gt;writing-mode:&lt;/code&gt;&lt;select id="writingMode"&gt;
-  &lt;option value="horizontal-tb" selected&gt;horizontal-tb&lt;/option&gt;
-  &lt;option value="vertical-rl"&gt;vertical-rl&lt;/option&gt;
-  &lt;option value="vertical-lr"&gt;vertical-lr&lt;/option&gt;
-  &lt;option value="sideways-rl"&gt;sideways-rl&lt;/option&gt;
-  &lt;option value="sideways-lr"&gt;sideways-lr&lt;/option&gt;
-&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;&lt;br/&gt;
-&lt;code&gt;direction:&lt;/code&gt;&lt;select id="direction"&gt;
-  &lt;option value="ltr" selected&gt;ltr&lt;/option&gt;
-  &lt;option value="rtl"&gt;rtl&lt;/option&gt;
-&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;&lt;br/&gt;
-&lt;code&gt;place-content:&lt;/code&gt;&lt;select id="alignContentAlignment"&gt;
-  &lt;option value="normal"&gt;normal&lt;/option&gt;
-  &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
-  &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
-  &lt;option value="baseline"&gt;baseline&lt;/option&gt;
-  &lt;option value="space-between"&gt;space-between&lt;/option&gt;
-  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
-  &lt;option value="space-evenly" selected&gt;space-evenly&lt;/option&gt;
-  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
-  &lt;option value="center"&gt;center&lt;/option&gt;
-  &lt;option value="start"&gt;start&lt;/option&gt;
-  &lt;option value="end"&gt;end&lt;/option&gt;
-  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
-  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
-&lt;/select&gt;
-&lt;select id="justifyContentAlignment"&gt;
-  &lt;option value="normal"&gt;normal&lt;/option&gt;
-  &lt;option value="space-between"&gt;space-between&lt;/option&gt;
-  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
-  &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
-  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
-  &lt;option value="center" selected&gt;center&lt;/option&gt;
-  &lt;option value="start"&gt;start&lt;/option&gt;
-  &lt;option value="end"&gt;end&lt;/option&gt;
-  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
-  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
-  &lt;option value="left"&gt;left&lt;/option&gt;
-  &lt;option value="right"&gt;right&lt;/option&gt;
-&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;
-</pre>
-
-<pre class="brush: js hidden">var update = function () {
+```
+
+### HTML
+
+```html
+<div id="container">
+  <div class="small">Lorem</div>
+  <div class="small">Lorem<br/>ipsum</div>
+  <div class="large">Lorem</div>
+  <div class="large">Lorem<br/>impsum</div>
+  <div class="large"></div>
+  <div class="large"></div>
+</div>
+```
+
+```html hidden
+<code>writing-mode:</code><select id="writingMode">
+  <option value="horizontal-tb" selected>horizontal-tb</option>
+  <option value="vertical-rl">vertical-rl</option>
+  <option value="vertical-lr">vertical-lr</option>
+  <option value="sideways-rl">sideways-rl</option>
+  <option value="sideways-lr">sideways-lr</option>
+</select><code>;</code><br/>
+<code>direction:</code><select id="direction">
+  <option value="ltr" selected>ltr</option>
+  <option value="rtl">rtl</option>
+</select><code>;</code><br/>
+<code>place-content:</code><select id="alignContentAlignment">
+  <option value="normal">normal</option>
+  <option value="first baseline">first baseline</option>
+  <option value="last baseline">last baseline</option>
+  <option value="baseline">baseline</option>
+  <option value="space-between">space-between</option>
+  <option value="space-around">space-around</option>
+  <option value="space-evenly" selected>space-evenly</option>
+  <option value="stretch">stretch</option>
+  <option value="center">center</option>
+  <option value="start">start</option>
+  <option value="end">end</option>
+  <option value="flex-start">flex-start</option>
+  <option value="flex-end">flex-end</option>
+</select>
+<select id="justifyContentAlignment">
+  <option value="normal">normal</option>
+  <option value="space-between">space-between</option>
+  <option value="space-around">space-around</option>
+  <option value="space-evenly">space-evenly</option>
+  <option value="stretch">stretch</option>
+  <option value="center" selected>center</option>
+  <option value="start">start</option>
+  <option value="end">end</option>
+  <option value="flex-start">flex-start</option>
+  <option value="flex-end">flex-end</option>
+  <option value="left">left</option>
+  <option value="right">right</option>
+</select><code>;</code>
+```
+
+```js hidden
+var update = function () {
    document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value;
 }
 
@@ -187,53 +186,38 @@ var direction = document.getElementById("direction");
 direction.addEventListener("change", function (evt) {
    document.getElementById("container").style.direction = evt.target.value;
 });
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "370", "300")}}</p>
+{{EmbedLiveSample("Exemples", "370", "300")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.place-content")}}</p>
+{{Compat("css.properties.place-content")}}
 
-<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+### Prise en charge pour les dispositions flexibles
 
-<p>{{Compat("css.properties.place-content.flex_context")}}</p>
+{{Compat("css.properties.place-content.flex_context")}}
 
-<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+### Prise en charge pour les grilles
 
-<p>{{Compat("css.properties.place-content.grid_context")}}</p>
+{{Compat("css.properties.place-content.grid_context")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Utiliser les boîtes flexibles en CSS</a></li>
- <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Aligner des objets dans une grille</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></em></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
- <li>La propriété {{cssxref("align-content")}}</li>
- <li>La propriété {{cssxref("justify-content")}}</li>
-</ul>
+- [Utiliser les boîtes flexibles en CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_
+- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)
+- La propriété {{cssxref("align-content")}}
+- La propriété {{cssxref("justify-content")}}
diff --git a/files/fr/web/css/place-items/index.md b/files/fr/web/css/place-items/index.md
index c5b670ba70..247057a5d2 100644
--- a/files/fr/web/css/place-items/index.md
+++ b/files/fr/web/css/place-items/index.md
@@ -8,15 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/place-items
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété raccourcie <code><strong>place</strong></code><strong><code>-items</code></strong> définit les valeurs utilisées pour les propriétés {{cssxref("align-items")}} et {{cssxref("justify-items")}}. La première valeur fournie est utilisée pour <code>align-items</code> et la seconde est utilisée pour <code>justify-items</code>. S'il n'y a pas de seconde valeur fournie, c'est la première qui est reprise pour <code>justify-items</code>.</p>
+La propriété raccourcie **`place`\*\***`-items`\*\* définit les valeurs utilisées pour les propriétés {{cssxref("align-items")}} et {{cssxref("justify-items")}}. La première valeur fournie est utilisée pour `align-items` et la seconde est utilisée pour `justify-items`. S'il n'y a pas de seconde valeur fournie, c'est la première qui est reprise pour `justify-items`.
 
-<div>{{EmbedInteractiveExample("pages/css/place-items.html")}}</div>
+{{EmbedInteractiveExample("pages/css/place-items.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 place-items: auto center;
 place-items: normal start;
 
@@ -41,61 +42,59 @@ place-items: stretch auto;
 place-items: inherit;
 place-items: initial;
 place-items: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>La valeur utilisée est celle de <code>justify-items</code> pour l'élément parent sauf si l'élément n'a pas de parent ou qu'il est positionné de façon absolue auquel cas <code>auto</code> sera synonyme de <code>normal</code>.</dd>
- <dt><code>normal</code></dt>
- <dd>L'effet de ce mot-clé depend du mode de disposition utilisé :
- <ul>
-  <li>Pour les dispositions en bloc, ce mot-clé est synonyme de <code>start</code>.</li>
-  <li>Pour les dispositions absolues, ce mot-clé se comporte comme <code>start</code> pour les éléments remplacés ou comme <code>stretch</code> pour tous les autres éléments.</li>
-  <li>Pour les cellules de tableaux, ce mot-clé n'a pas de sens et cette propriété est ignorée.</li>
-  <li>Pour les dispositions utilisant des boîtes flexibles, ce mot-clé n'a pas de sens et cette propriété est ignorée<em>.</em></li>
-  <li>Pour les dispositions en grille, ce mot-clé se comporte comme <code>stretch</code> sauf pour les éléments qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas cette valeur est synonyme de <code>start</code>.</li>
- </ul>
- </dd>
- <dt><code>start</code></dt>
- <dd>L'élément est aligné au début de l'axe dans la direction correspondante.</dd>
- <dt><code>end</code></dt>
- <dd>L'élément est aligné à la fin de l'axe dans la direction correspondante.</dd>
- <dt><code>flex-start</code></dt>
- <dd>Les éléments sont regroupés vers le début du conteneur flexible pour l'axe correspondant.<br>
- Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd>
- <dt><code>flex-end</code></dt>
- <dd>Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe correspondant.<br>
- Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd>
- <dt><code>self-start</code></dt>
- <dd>Les éléments sont alignés sur le bord de leur boîte vers le début de l'axe correspondant.</dd>
- <dt><code>self-end</code></dt>
- <dd>Les éléments sont alignés sur le bord de leur boîte vers la fin de l'axe correspondant.</dd>
- <dt><code>center</code></dt>
- <dd>L'élément est centré le long de l'axe correspondant.</dd>
- <dt><code>left</code></dt>
- <dd>L'élément est aligné sur le bord gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme <code>start</code>.</dd>
- <dt><code>right</code></dt>
- <dd>L'élément est aligné sur le bord droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme <code>start</code>.</dd>
- <dt><code>baseline<br>
- first baseline</code><br>
- <code>last baseline</code></dt>
- <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
- Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
- <dt><code>stretch</code></dt>
- <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `auto`
+  - : La valeur utilisée est celle de `justify-items` pour l'élément parent sauf si l'élément n'a pas de parent ou qu'il est positionné de façon absolue auquel cas `auto` sera synonyme de `normal`.
+- `normal`
+
+  - : L'effet de ce mot-clé depend du mode de disposition utilisé :
+
+    - Pour les dispositions en bloc, ce mot-clé est synonyme de `start`.
+    - Pour les dispositions absolues, ce mot-clé se comporte comme `start` pour les éléments remplacés ou comme `stretch` pour tous les autres éléments.
+    - Pour les cellules de tableaux, ce mot-clé n'a pas de sens et cette propriété est ignorée.
+    - Pour les dispositions utilisant des boîtes flexibles, ce mot-clé n'a pas de sens et cette propriété est ignorée*.*
+    - Pour les dispositions en grille, ce mot-clé se comporte comme `stretch` sauf pour les éléments qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas cette valeur est synonyme de `start`.
+
+- `start`
+  - : L'élément est aligné au début de l'axe dans la direction correspondante.
+- `end`
+  - : L'élément est aligné à la fin de l'axe dans la direction correspondante.
+- `flex-start`
+  - : Les éléments sont regroupés vers le début du conteneur flexible pour l'axe correspondant.
+    Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `start`.
+- `flex-end`
+  - : Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe correspondant.
+    Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `end`.
+- `self-start`
+  - : Les éléments sont alignés sur le bord de leur boîte vers le début de l'axe correspondant.
+- `self-end`
+  - : Les éléments sont alignés sur le bord de leur boîte vers la fin de l'axe correspondant.
+- `center`
+  - : L'élément est centré le long de l'axe correspondant.
+- `left`
+  - : L'élément est aligné sur le bord gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme `start`.
+- `right`
+  - : L'élément est aligné sur le bord droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme `start`.
+- `baseline first baseline`
+  `last baseline`
+  - : Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.
+    Si `first baseline` n'est pas prise en charge, la valeur correspondra à `start`, si `last baseline` n'est pas prise en charge, la valeur correspondra à `end`.
+- `stretch`
+  - : Si la somme des tailles des éléments est inférieure à la taille du conteneur, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   height:200px;
   width: 240px;
   place-items: center; /* Cette valeur peut être modifiée dans l'exemple */
@@ -111,9 +110,10 @@ place-items: unset;
   display: grid;
   grid-template-columns: repeat(auto-fill, 50px);
 }
-</pre>
+```
 
-<pre class="brush: css hidden">div &gt; div {
+```css hidden
+div > div {
   box-sizing: border-box;
   border: 2px solid #8c8c8c;
   width: 50px;
@@ -159,53 +159,56 @@ select {
 
 .row {
   margin-top: 10px;
-}</pre>
-
-<pre class="brush: html hidden">&lt;div id="container" class="flex"&gt;
-  &lt;div id="item1"&gt;1&lt;/div&gt;
-  &lt;div id="item2"&gt;2&lt;/div&gt;
-  &lt;div id="item3"&gt;3&lt;/div&gt;
-  &lt;div id="item4"&gt;4&lt;/div&gt;
-  &lt;div id="item5"&gt;5&lt;/div&gt;
-  &lt;div id="item6"&gt;6&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="row"&gt;
-  &lt;label for="display"&gt;display: &lt;/label&gt;
-  &lt;select id="display"&gt;
-    &lt;option value="flex"&gt;flex&lt;/option&gt;
-    &lt;option value="grid"&gt;grid&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/div&gt;
-
-&lt;div class="row"&gt;
-  &lt;label for="values"&gt;place-items: &lt;/label&gt;
-  &lt;select id="values"&gt;
-    &lt;option value="start"&gt;start&lt;/option&gt;
-    &lt;option value="center"&gt;center&lt;/option&gt;
-    &lt;option value="end"&gt;end&lt;/option&gt;
-    &lt;option value="left"&gt;left&lt;/option&gt;
-    &lt;option value="right"&gt;right&lt;/option&gt;
-    &lt;option value="auto center"&gt;auto center&lt;/option&gt;
-    &lt;option value="normal start"&gt;normal start&lt;/option&gt;
-    &lt;option value="center normal"&gt;center normal&lt;/option&gt;
-    &lt;option value="start auto"&gt;start auto&lt;/option&gt;
-    &lt;option value="end normal"&gt;end normal&lt;/option&gt;
-    &lt;option value="self-start auto"&gt;self-start auto&lt;/option&gt;
-    &lt;option value="self-end normal"&gt;self-end normal&lt;/option&gt;
-    &lt;option value="flex-start auto"&gt;flex-start auto&lt;/option&gt;
-    &lt;option value="flex-end normal"&gt;flex-end normal&lt;/option&gt;
-    &lt;option value="left auto"&gt;left auto&lt;/option&gt;
-    &lt;option value="right normal"&gt;right normal&lt;/option&gt;
-    &lt;option value="baseline normal"&gt;baseline normal&lt;/option&gt;
-    &lt;option value="first baseline auto"&gt;first baseline auto&lt;/option&gt;
-    &lt;option value="last baseline normal"&gt;last baseline normal&lt;/option&gt;
-    &lt;option value="stretch auto"&gt;stretch auto&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: js hidden">var values = document.getElementById('values');
+}
+```
+
+```html hidden
+<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">place-items: </label>
+  <select id="values">
+    <option value="start">start</option>
+    <option value="center">center</option>
+    <option value="end">end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+    <option value="auto center">auto center</option>
+    <option value="normal start">normal start</option>
+    <option value="center normal">center normal</option>
+    <option value="start auto">start auto</option>
+    <option value="end normal">end normal</option>
+    <option value="self-start auto">self-start auto</option>
+    <option value="self-end normal">self-end normal</option>
+    <option value="flex-start auto">flex-start auto</option>
+    <option value="flex-end normal">flex-end normal</option>
+    <option value="left auto">left auto</option>
+    <option value="right normal">right normal</option>
+    <option value="baseline normal">baseline normal</option>
+    <option value="first baseline auto">first baseline auto</option>
+    <option value="last baseline normal">last baseline normal</option>
+    <option value="stretch auto">stretch auto</option>
+  </select>
+</div>
+```
+
+```js hidden
+var values = document.getElementById('values');
 var display = document.getElementById('display');
 var container = document.getElementById('container');
 
@@ -216,56 +219,40 @@ values.addEventListener('change', function (evt) {
 display.addEventListener('change', function (evt) {
   container.className = evt.target.value;
 });
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 260, 290)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}</td>
-   <td>{{Spec2('CSS3 Box Alignment')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{CSSInfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
-
-<p>{{Compat("css.properties.place-items.flex_context")}}</p>
-
-<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
-
-<p>{{Compat("css.properties.place-items.grid_context")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
- <li>Les propriétés détaillées correspondantes :
-  <ul>
-   <li>{{cssxref("align-items")}}</li>
-   <li>{{cssxref("justify-items")}}</li>
-  </ul>
- </li>
- <li>{{cssxref("justify-self")}}</li>
- <li>{{cssxref("align-self")}}</li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 260, 290)}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}} | {{Spec2('CSS3 Box Alignment')}} | Définition initiale. |
+
+{{CSSInfo}}
+
+## Compatibilité des navigateurs
+
+### Prise en charge pour les dispositions flexibles
+
+{{Compat("css.properties.place-items.flex_context")}}
+
+### Prise en charge pour les grilles
+
+{{Compat("css.properties.place-items.grid_context")}}
+
+## Voir aussi
+
+- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)_
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_
+- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible)_
+- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)
+- Les propriétés détaillées correspondantes :
+
+  - {{cssxref("align-items")}}
+  - {{cssxref("justify-items")}}
+
+- {{cssxref("justify-self")}}
+- {{cssxref("align-self")}}
diff --git a/files/fr/web/css/place-self/index.md b/files/fr/web/css/place-self/index.md
index e996026df7..83f854910a 100644
--- a/files/fr/web/css/place-self/index.md
+++ b/files/fr/web/css/place-self/index.md
@@ -8,15 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/place-self
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>place</strong></code><strong><code>-self</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et  {{cssxref("justify-self")}}. La première valeur sera utilisée pour <code>align-self</code> et la seconde pour <code>justify-self</code>. S'il n'y a pas de seconde valeur, la première sera également utilisée pour <code>justify-self</code>.</p>
+La propriété **`place`\*\***`-self`\*\* est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et  {{cssxref("justify-self")}}. La première valeur sera utilisée pour `align-self` et la seconde pour `justify-self`. S'il n'y a pas de seconde valeur, la première sera également utilisée pour `justify-self`.
 
-<div>{{EmbedInteractiveExample("pages/css/place-self.html")}}</div>
+{{EmbedInteractiveExample("pages/css/place-self.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 place-self: auto center;
 place-self: normal start;
 
@@ -40,89 +41,70 @@ place-self: stretch auto;
 /* Valeurs globales */
 place-self: inherit;
 place-self: initial;
-place-self: unset;</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>La valeur utilise celle de {{cssxref("align-items")}} pour l'élément parent.</dd>
- <dt><code>normal</code></dt>
- <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
- <ul>
-  <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li>
-  <li>Pour les éléments positionnés de façon statique au sein d'une disposition absolue, ce mot-clé agira comme <code>stretch</code></li>
-  <li>Pour les cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li>
-  <li>Pour les éléments disposés en blocs, cette propriété est ignorée.</li>
-  <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li>
-  <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li>
- </ul>
- </dd>
- <dt><code>self-start</code></dt>
- <dd>Les éléments sont alignés sur le bord du conteneur vers le début de l'axe en bloc.</dd>
- <dt><code>self-end</code></dt>
- <dd>Les éléments sont alignés sur le bord du conteneur vers la fin de l'axe en bloc.</dd>
- <dt><code>flex-start</code></dt>
- <dd>Le bord de l'élément flexible au début de l'axe en bloc est aligné avec le début de l'axe en bloc sur la ligne.</dd>
- <dt><code>flex-end</code></dt>
- <dd>Le bord de l'élément flexible à la fin de l'axe en bloc est aligné avec la fin de l'axe en bloc sur la ligne.</dd>
- <dt><code>center</code></dt>
- <dd>La boîte de marge de l'élément flexible est centrée sur la ligne par rapport à l'axe en bloc. Si la taille de l'élément est supérieure à celle du conteneur flexible, l'élément dépasse également dans chaque direction.</dd>
- <dt><code>baseline<br>
- first baseline</code><br>
- <code>last baseline</code></dt>
- <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
- Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
- <dt><code>stretch</code></dt>
- <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+place-self: unset;
+```
+
+### Valeurs
+
+- `auto`
+  - : La valeur utilise celle de {{cssxref("align-items")}} pour l'élément parent.
+- `normal`
+
+  - : Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
+
+    - Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme `start` pour les boîtes des éléments remplacés ou comme `stretch` pour les autres boîtes positionnées de façon absolue.
+    - Pour les éléments positionnés de façon statique au sein d'une disposition absolue, ce mot-clé agira comme `stretch`
+    - Pour les cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.
+    - Pour les éléments disposés en blocs, cette propriété est ignorée.
+    - Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée*.*
+    - Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de `stretch`, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de `start`.
+
+- `self-start`
+  - : Les éléments sont alignés sur le bord du conteneur vers le début de l'axe en bloc.
+- `self-end`
+  - : Les éléments sont alignés sur le bord du conteneur vers la fin de l'axe en bloc.
+- `flex-start`
+  - : Le bord de l'élément flexible au début de l'axe en bloc est aligné avec le début de l'axe en bloc sur la ligne.
+- `flex-end`
+  - : Le bord de l'élément flexible à la fin de l'axe en bloc est aligné avec la fin de l'axe en bloc sur la ligne.
+- `center`
+  - : La boîte de marge de l'élément flexible est centrée sur la ligne par rapport à l'axe en bloc. Si la taille de l'élément est supérieure à celle du conteneur flexible, l'élément dépasse également dans chaque direction.
+- `baseline first baseline`
+  `last baseline`
+  - : Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.
+    Si `first baseline` n'est pas prise en charge, la valeur correspondra à `start`, si `last baseline` n'est pas prise en charge, la valeur correspondra à `end`.
+- `stretch`
+  - : Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#place-self-property", "place-self")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{CSSInfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
-
-<p>{{Compat("css.properties.place-self.flex_context")}}</p>
-
-<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
-
-<p>{{Compat("css.properties.place-self.grid_context")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
- <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
- <li>Les propriétés détaillées correspondantes
-  <ul>
-   <li>{{cssxref("align-self")}}</li>
-   <li>{{cssxref("justify-self")}}</li>
-  </ul>
- </li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Box Alignment", "#place-self-property", "place-self")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. |
+
+{{CSSInfo}}
+
+## Compatibilité des navigateurs
+
+### Prise en charge pour les dispositions flexibles
+
+{{Compat("css.properties.place-self.flex_context")}}
+
+### Prise en charge pour les grilles
+
+{{Compat("css.properties.place-self.grid_context")}}
+
+## Voir aussi
+
+- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)_
+- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_
+- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible)_
+- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)
+- Les propriétés détaillées correspondantes
+
+  - {{cssxref("align-self")}}
+  - {{cssxref("justify-self")}}
diff --git a/files/fr/web/css/pointer-events/index.md b/files/fr/web/css/pointer-events/index.md
index 84f450cbbe..4088ac8be2 100644
--- a/files/fr/web/css/pointer-events/index.md
+++ b/files/fr/web/css/pointer-events/index.md
@@ -8,17 +8,18 @@ tags:
   - SVG
 translation_of: Web/CSS/pointer-events
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS<strong> <code>pointer-events</code></strong> permet aux auteurs de contrôler les circonstances dans lesquelles un élément graphique peut être <a href="/fr/docs/Web/API/Event/target">une cible</a>, c'est-à-dire recevoir des événements de la souris, du pointeur ou du doigt.</p>
+La propriété CSS** `pointer-events`** permet aux auteurs de contrôler les circonstances dans lesquelles un élément graphique peut être [une cible](/fr/docs/Web/API/Event/target), c'est-à-dire recevoir des événements de la souris, du pointeur ou du doigt.
 
-<div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div>
+{{EmbedInteractiveExample("pages/css/pointer-events.html")}}
 
-<p>Lorsque cette propriété n'est pas définie,  pour le contenu SVG, on aura le même effet qu'avec la valeur <code>visiblePainted</code>. Lorsqu'on utilise la valeur <code>none</code>, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais cela indique également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être en-dessous/derrière.</p>
+Lorsque cette propriété n'est pas définie,  pour le contenu SVG, on aura le même effet qu'avec la valeur `visiblePainted`. Lorsqu'on utilise la valeur `none`, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais cela indique également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être en-dessous/derrière.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 pointer-events: auto;
 pointer-events: none;
 pointer-events: visiblePainted; /* SVG uniquement */
@@ -34,109 +35,90 @@ pointer-events: all;            /* SVG uniquement */
 pointer-events: inherit;
 pointer-events: initial;
 pointer-events: unset;
-</pre>
-
-<p>La propriété <code>pointer-events</code> est définie grâce à un mot-clé parmi ceux de la liste suivante.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>L'élément se comporte comme si la propriété <code>pointer-events</code> n'était pas spécifiée. Pour le contenu SVG, cette valeur et la valeur <code>visiblePainted</code> ont le même effet.</dd>
- <dt><code>none</code></dt>
- <dd>L'élément ne sera jamais <a href="/fr/docs/Web/API/Event/target">la cible</a> d'événements de pointeur. Toutefois, les événements peuvent atteindre les éléments qui sont des descendants si ceux-ci ont une autre valeur pour <code>pointer-events</code>. Sous ces circonstances, les événements déclencheront les gestionnaires d'événement sur l'élément parent jusqu'à/depuis l'élément descendant lors de la phase de capture/<a href="/fr/docs/Web/API/Event/bubbles">bouillonnement</a> de l'événement.</dd>
-</dl>
-
-<h4 id="Valeurs_uniquement_utilisables_avec_SVG">Valeurs uniquement utilisables avec SVG</h4>
-
-<dl>
- <dt><code>visiblePainted</code></dt>
- <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété <code>fill</code> n'est pas <code>none</code> ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriété <code>stroke</code> n'est pas <code>none</code>.</dd>
- <dt><code>visibleFill</code></dt>
- <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur est au-dessus de l'intérieur de l'élément. La valeur de la propriété <code>fill</code> n'a pas d'impact sur le traitement des événements.</dd>
- <dt><code>visibleStroke</code></dt>
- <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur de la souris est au-dessus du contour de l'élément. La valeur de la propriété <code>stroke</code> n'a pas d'impact sur le traitement des événements.</dd>
- <dt><code>visible</code></dt>
- <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de <code>fill</code> et <code>stroke</code> n'ont pas d'impact sur le traitement des événements.</dd>
- <dt><code>painted</code></dt>
- <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété <code>fill</code> n'est pas <code>none</code> ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriété <code>stroke</code> n'est pas <code>none</code>. La valeur de <code>visibility</code> n'a pas d'impact sur le traitement des événements.</dd>
- <dt><code>fill</code></dt>
- <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément. Les valeurs de <code>fill</code> et de <code>visibility</code> n'ont pas d'impact sur le traitement des événements.</dd>
- <dt><code>stroke</code></dt>
- <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus du contour de l'élément. Les valeurs de <code>stroke</code> et de <code>visibility</code> n'ont pas d'impact sur le traitement des événements.</dd>
- <dt><code>all</code></dt>
- <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de <code>fill</code>, <code>stroke</code> et de <code>visibility</code> n'ont pas d'impact sur le traitement des événements.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `pointer-events` est définie grâce à un mot-clé parmi ceux de la liste suivante.
+
+### Valeurs
+
+- `auto`
+  - : L'élément se comporte comme si la propriété `pointer-events` n'était pas spécifiée. Pour le contenu SVG, cette valeur et la valeur `visiblePainted` ont le même effet.
+- `none`
+  - : L'élément ne sera jamais [la cible](/fr/docs/Web/API/Event/target) d'événements de pointeur. Toutefois, les événements peuvent atteindre les éléments qui sont des descendants si ceux-ci ont une autre valeur pour `pointer-events`. Sous ces circonstances, les événements déclencheront les gestionnaires d'événement sur l'élément parent jusqu'à/depuis l'élément descendant lors de la phase de capture/[bouillonnement](/fr/docs/Web/API/Event/bubbles) de l'événement.
+
+#### Valeurs uniquement utilisables avec SVG
+
+- `visiblePainted`
+  - : L'élément ne peut être la cible d'un événement de pointeur que si la propriété `visibility` vaut `visible` et lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété `fill` n'est pas `none` ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriété `stroke` n'est pas `none`.
+- `visibleFill`
+  - : L'élément ne peut être la cible d'un événement de pointeur que si la propriété `visibility` vaut `visible` et lorsque le pointeur est au-dessus de l'intérieur de l'élément. La valeur de la propriété `fill` n'a pas d'impact sur le traitement des événements.
+- `visibleStroke`
+  - : L'élément ne peut être la cible d'un événement de pointeur que si la propriété `visibility` vaut `visible` et lorsque le pointeur de la souris est au-dessus du contour de l'élément. La valeur de la propriété `stroke` n'a pas d'impact sur le traitement des événements.
+- `visible`
+  - : L'élément ne peut être la cible d'un événement de pointeur que si la propriété `visibility` vaut `visible` et lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de `fill` et `stroke` n'ont pas d'impact sur le traitement des événements.
+- `painted`
+  - : L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété `fill` n'est pas `none` ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriété `stroke` n'est pas `none`. La valeur de `visibility` n'a pas d'impact sur le traitement des événements.
+- `fill`
+  - : L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément. Les valeurs de `fill` et de `visibility` n'ont pas d'impact sur le traitement des événements.
+- `stroke`
+  - : L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus du contour de l'élément. Les valeurs de `stroke` et de `visibility` n'ont pas d'impact sur le traitement des événements.
+- `all`
+  - : L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de `fill`, `stroke` et de `visibility` n'ont pas d'impact sur le traitement des événements.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on rend le lien http://exemple.com inactif.</p>
+Dans l'exemple qui suit, on rend le lien http\://exemple.com inactif.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;ul&gt;
-  &lt;li&gt;&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="http://exemple.com"&gt;exemple.com&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li><a href="https://developer.mozilla.org">MDN</a></li>
+  <li><a href="http://exemple.com">exemple.com</a></li>
+</ul>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">a[href="http://exemple.com"] {
+```css
+a[href="http://exemple.com"] {
   pointer-events: none;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<div>{{EmbedLiveSample('Exemples', "500", "100")}}</div>
+{{EmbedLiveSample('Exemples', "500", "100")}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>L'utilisation de <code>pointer-events</code> peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Cela ne signifie en aucun cas que les gestionnaires d'événement de cet élément ne pourront pas être déclenchés ! Si l'un des éléments descendants possède une valeur explicite de <code>pointer-events</code> qui lui permet de recevoir des événements de pointeur, les événements qui parcourent les ancêtres pourront déclencher les gestionnaires d'événements associés. Bien entendu, tout pointage, qui a lieu sur un endroit de l'écran qui est couvert par le parent mais pas par l'élément descendant, ne déclenchera d'événement. L'événement passera au travers du parent et ciblera le contenu qui est en-dessous.</p>
+L'utilisation de `pointer-events` peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Cela ne signifie en aucun cas que les gestionnaires d'événement de cet élément ne pourront pas être déclenchés ! Si l'un des éléments descendants possède une valeur explicite de `pointer-events` qui lui permet de recevoir des événements de pointeur, les événements qui parcourent les ancêtres pourront déclencher les gestionnaires d'événements associés. Bien entendu, tout pointage, qui a lieu sur un endroit de l'écran qui est couvert par le parent mais pas par l'élément descendant, ne déclenchera d'événement. L'événement passera au travers du parent et ciblera le contenu qui est en-dessous.
 
-<p>Les éléments avec <code>pointer-events: none</code> continueront de recevoir le focus via la navigation au clavier avec la touche <kbd>Tab</kbd>.</p>
+Les éléments avec `pointer-events: none` continueront de recevoir le focus via la navigation au clavier avec la touche <kbd>Tab</kbd>.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
-   <td>{{Spec2('SVG2')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                     | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | ------------------------ | ------------ |
+| {{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}} | {{Spec2('SVG1.1')}} |              |
+| {{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}} | {{Spec2('SVG2')}} |              |
 
-<p>L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification <em>CSS Basic User Interface Module Level 3</em>, a été remise à la spécification de <a href="https://wiki.csswg.org/spec/css4-ui#pointer-events"> niveau 4</a>.</p>
+L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification _CSS Basic User Interface Module Level 3_, a été remise à la spécification de [niveau 4](https://wiki.csswg.org/spec/css4-ui#pointer-events).
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.pointer-events")}}</p>
+{{Compat("css.properties.pointer-events")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'attribut SVG {{SVGAttr("pointer-events")}}</li>
- <li>L'attribut SVG {{SVGAttr("visibility")}}</li>
- <li>La propriété {{cssxref("user-select")}} qui contrôle lorsque l'utilisateur peut sélectionner du texte</li>
- <li><a href="https://webkit.org/specs/PointerEventsProperty.html">« Spécification » WebKit pour étendre la propriété pointer-events</a> au contenu (X)HTML</li>
- <li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">Un défilement à 60fps en utilisant <code>pointer-events: none</code> (en anglais)</a></li>
-</ul>
+- L'attribut SVG {{SVGAttr("pointer-events")}}
+- L'attribut SVG {{SVGAttr("visibility")}}
+- La propriété {{cssxref("user-select")}} qui contrôle lorsque l'utilisateur peut sélectionner du texte
+- [« Spécification » WebKit pour étendre la propriété pointer-events](https://webkit.org/specs/PointerEventsProperty.html) au contenu (X)HTML
+- [Un défilement à 60fps en utilisant `pointer-events: none` (en anglais)](http://www.thecssninja.com/javascript/pointer-events-60fps)
diff --git a/files/fr/web/css/position/index.md b/files/fr/web/css/position/index.md
index cb8cffc082..bbd7c79d26 100644
--- a/files/fr/web/css/position/index.md
+++ b/files/fr/web/css/position/index.md
@@ -7,33 +7,30 @@ tags:
   - Reference
 translation_of: Web/CSS/position
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>position</code></strong> définit la façon dont un élément est positionné dans un document. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}} déterminent l'emplacement final de l'élément positionné.</p>
+La propriété **`position`** définit la façon dont un élément est positionné dans un document. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}} déterminent l'emplacement final de l'élément positionné.
 
-<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>
+{{EmbedInteractiveExample("pages/css/position.html")}}
 
-<h3 id="Types_de_positionnement">Types de positionnement</h3>
+### Types de positionnement
 
-<ul>
- <li>Un <strong>élément positionné</strong> est un élément dont la propriété de position <a href="/fr/docs/Web/CSS/computed_value">calculée</a> est <code>relative</code>, <code>absolute</code>, <code>fixed</code> ou <code>sticky</code>.</li>
- <li>Un <strong>élément positionné de façon relative</strong> est un élément dont la propriété de position calculée est <code>relative</code>. Dans ce cas, les propriétés {{cssxref("top")}} ou {{cssxref("bottom")}} indiquent le décalage vertical à appliquer et {{cssxref("left")}} ou {{cssxref("right")}} indiquent le décalage horizontal.</li>
- <li>Un <strong>élément positionné de façon absolue</strong> est un élément dont la propriété de position calculée est <code>absolute</code> ou <code>fixed</code>. Dans ce cas, les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("right")}} et {{cssxref("left")}} indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.</li>
- <li>Un <strong>élément positionné en adhérence</strong> est un élément dont la propriété de position calculée vaut <code>sticky</code>. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de {{cssxref("top")}}) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant.</li>
-</ul>
+- Un **élément positionné** est un élément dont la propriété de position [calculée](/fr/docs/Web/CSS/computed_value) est `relative`, `absolute`, `fixed` ou `sticky`.
+- Un **élément positionné de façon relative** est un élément dont la propriété de position calculée est `relative`. Dans ce cas, les propriétés {{cssxref("top")}} ou {{cssxref("bottom")}} indiquent le décalage vertical à appliquer et {{cssxref("left")}} ou {{cssxref("right")}} indiquent le décalage horizontal.
+- Un **élément positionné de façon absolue** est un élément dont la propriété de position calculée est `absolute` ou `fixed`. Dans ce cas, les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("right")}} et {{cssxref("left")}} indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.
+- Un **élément positionné en adhérence** est un élément dont la propriété de position calculée vaut `sticky`. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de {{cssxref("top")}}) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant.
 
-<p>La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés {{cssxref("height")}} et {{cssxref("width")}} qui valent <code>auto</code> afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant {{cssxref("top")}} et {{cssxref("bottom")}} tout en laissant {{cssxref("height")}} indéfini (c'est-à-dire avec la valeur <code>auto</code>). On pourra faire de même pour l'espace horizontal avec les propriétés {{cssxref("left")}} et {{cssxref("right")}}.</p>
+La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés {{cssxref("height")}} et {{cssxref("width")}} qui valent `auto` afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant {{cssxref("top")}} et {{cssxref("bottom")}} tout en laissant {{cssxref("height")}} indéfini (c'est-à-dire avec la valeur `auto`). On pourra faire de même pour l'espace horizontal avec les propriétés {{cssxref("left")}} et {{cssxref("right")}}.
 
-<p>Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace :</p>
+Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace :
 
-<ul>
- <li>Si <code>top</code> et <code>bottom</code> sont tous les deux définis (enfin, s'ils ne valent pas <code>auto</code>), c'est <code>top</code> qui aura la priorité</li>
- <li>Si <code>left</code> et <code>right</code> sont tous les deux définis, c'est <code>left</code> qui aura la priorité si la direction du texte est de gauche à droite (LTR) et <code>right</code> qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu).</li>
-</ul>
+- Si `top` et `bottom` sont tous les deux définis (enfin, s'ils ne valent pas `auto`), c'est `top` qui aura la priorité
+- Si `left` et `right` sont tous les deux définis, c'est `left` qui aura la priorité si la direction du texte est de gauche à droite (LTR) et `right` qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 position: static;
 position: relative;
 position: absolute;
@@ -44,44 +41,44 @@ position: sticky;
 position: inherit;
 position: initial;
 position: unset;
-</pre>
+```
 
-<p>La propriété <code>position</code> peut être définie avec l'un des mots-clés de la liste suivante.</p>
+La propriété `position` peut être définie avec l'un des mots-clés de la liste suivante.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>static</code></dt>
- <dd>Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("z-index")}} ne s'appliquent pas.</dd>
- <dt><code>relative</code></dt>
- <dd>L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec <code>static</code>. Cette valeur crée un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. L'effet de cette valeur n'est pas défini pour les éléments <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> et <code>table-caption</code>.</dd>
- <dt><code>absolute</code></dt>
- <dd>L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Cette valeur crée un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.</dd>
- <dt><code>fixed</code></dt>
- <dd>L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (<em>viewport</em>), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de <code>none</code> (voir <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">la spécification sur les transformations CSS</a>) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour <em>chaque page</em>). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de <code>perspective</code> et <code>filter</code> pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Cette valeur crée toujours un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a>. Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour <em>chacune des pages</em>.</dd>
- <dt><code>sticky</code></dt>
- <dd>La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à <a href="/fr/docs/Web/CSS/Containing_block">son bloc englobant</a> selon les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Dans tous les cas, y compris avec les éléments <code>table</code>, cela n'affecte pas la position des autres éléments. Cette valeur entraîne toujours la création d'un nouveau <a href="/fr/docs/Glossary/Stacking_context">contexte d'empilement</a>. On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand <code>overflow</code> vaut <code>hidden</code>, <code>scroll</code>, <code>auto</code> ou <code>overlay</code>) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut <code>overflow: hidden</code> ou <code>auto</code> (<a href="https://github.com/w3c/csswg-drafts/issues/865">cf.: cette <em>issue</em> GitHub</a>).</dd>
-</dl>
+- `static`
+  - : Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("z-index")}} ne s'appliquent pas.
+- `relative`
+  - : L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par `top`, `right`, `bottom` et `left`. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec `static`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. L'effet de cette valeur n'est pas défini pour les éléments `table-*-group`, `table-row`, `table-column`, `table-cell` et `table-caption`.
+- `absolute`
+  - : L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.
+- `fixed`
+  - : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (_viewport_), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de `none` (voir [la spécification sur les transformations CSS](https://www.w3.org/TR/css-transforms-1/#propdef-transform)) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour _chaque page_). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de `perspective` et `filter` pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée toujours un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour _chacune des pages_.
+- `sticky`
+  - : La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à [son bloc englobant](/fr/docs/Web/CSS/Containing_block) selon les valeurs de `top`, `right`, `bottom` et `left`. Dans tous les cas, y compris avec les éléments `table`, cela n'affecte pas la position des autres éléments. Cette valeur entraîne toujours la création d'un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand `overflow` vaut `hidden`, `scroll`, `auto` ou `overlay`) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut `overflow: hidden` ou `auto` ([cf.: cette _issue_ GitHub](https://github.com/w3c/csswg-drafts/issues/865)).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Positionnement_relatif">Positionnement relatif</h3>
+### Positionnement relatif
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="box" id="un"&gt;Un&lt;/div&gt;
-&lt;div class="box" id="deux"&gt;Deux&lt;/div&gt;
-&lt;div class="box" id="trois"&gt;Trois&lt;/div&gt;
-&lt;div class="box" id="quatre"&gt;Quatre&lt;/div&gt;
-</pre>
+```html
+<div class="box" id="un">Un</div>
+<div class="box" id="deux">Deux</div>
+<div class="box" id="trois">Trois</div>
+<div class="box" id="quatre">Quatre</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.box {
+```css
+.box {
    display: inline-block;
    background: red;
    width: 100px;
@@ -94,31 +91,34 @@ position: unset;
    top: 20px;
    left: 20px;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale.</p>
+Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale.
 
-<p>{{EmbedLiveSample('Positionnement_relatif', '600px', '200px')}}</p>
+{{EmbedLiveSample('Positionnement_relatif', '600px', '200px')}}
 
-<h3 id="Positionnement_absolu">Positionnement absolu</h3>
+### Positionnement absolu
 
-<p>Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolu est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">la définition du W3C</a>).</p>
+Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolu est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir [la définition du W3C](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)).
 
-<p>Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément <code>&lt;body&gt;</code> de l'<code>iframe</code> générée ici) :</p>
+Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément `<body>` de l'`iframe` générée ici) :
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h1&gt;Positionnement absolu&lt;/h1&gt;
-&lt;p&gt;Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en-dessous.&lt;/p&gt;
-&lt;p class="positioned"&gt;Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi grand que notre contenu.&lt;/p&gt;
-&lt;p&gt;Nous sommes séparés par nos marges (une seule marge en raison de la fusion des marges).&lt;/p&gt;
-&lt;p&gt;Les éléments &lt;em&gt;inline&lt;/em&gt; &lt;span&gt;comme celui-ci&lt;/span&gt; et &lt;span&gt;celui-là&lt;/span&gt; se situent sur la même ligne avec également les noeuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent &lt;span&gt;passent à la ligne si possible — comme pour ce texte.&lt;/span&gt; ou cette image &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+```html
+<h1>Positionnement absolu</h1>
+<p>Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en-dessous.</p>
+<p class="positioned">Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi grand que notre contenu.</p>
+<p>Nous sommes séparés par nos marges (une seule marge en raison de la fusion des marges).</p>
+<p>Les éléments <em>inline</em> <span>comme celui-ci</span> et <span>celui-là</span> se situent sur la même ligne avec également les noeuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent <span>passent à la ligne si possible — comme pour ce texte.</span> ou cette image <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">body {
+```css
+body {
   width: 500px;
   margin: 0 auto;
 }
@@ -140,20 +140,22 @@ span {
   background: yellow;
   top: 30px;
   left: 30px;
-}</pre>
+}
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Positionnement_absolu', '100%', 420)}}</p>
+{{EmbedLiveSample('Positionnement_absolu', '100%', 420)}}
 
-<h3 id="Positionnement_fixe">Positionnement fixe</h3>
+### Positionnement fixe
 
-<p>Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond au <em>viewport</em> si aucun ancêtre de l'élément ne possède une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de <code>none</code>. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche.</p>
+Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond au _viewport_ si aucun ancêtre de l'élément ne possède une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de `none`. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche.
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="outer"&gt;
-  &lt;p&gt;
+```html
+<div class="outer">
+  <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
     Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
     Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
@@ -161,8 +163,8 @@ span {
     Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
     Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
     Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
-  &lt;/p&gt;
-  &lt;p&gt;
+  </p>
+  <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
     Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
     Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
@@ -170,14 +172,15 @@ span {
     Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
     Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
     Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
-  &lt;/p&gt;
-  &lt;div class="box" id="un"&gt;Un&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+  </p>
+  <div class="box" id="un">Un</div>
+</div>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.box {
+```css
+.box {
   background: red;
   width: 100px;
   height: 100px;
@@ -195,69 +198,73 @@ span {
   overflow: scroll;
   padding-left: 150px;
 }
-</pre>
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport au <em>viewport</em> :</p>
+Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport au _viewport_ :
 
-<p>{{EmbedLiveSample('Positionnement_fixe', '800px', '300px')}}</p>
+{{EmbedLiveSample('Positionnement_fixe', '800px', '300px')}}
 
-<h3 id="Positionnement_adhérent_(sticky)">Positionnement adhérent (<em>sticky</em>)</h3>
+### Positionnement adhérent (_sticky_)
 
-<p>Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple :</p>
+Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple :
 
-<pre class="brush: css">#un {
+```css
+#un {
   position: sticky;
   top: 10px;
-}</pre>
-
-<p>se comportera comme un élément positionné de façon relative jusqu'à ce que le <em>viewport</em> défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que le <em>viewport</em> redéfile jusqu'avant ce seuil.</p>
-
-<p>Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut du <em>viewport</em> jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite).</p>
-
-<p>Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right")}} ou {{cssxref("bottom")}} ou {{cssxref("left")}} pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif.</p>
-
-<h4 id="HTML_4">HTML</h4>
-
-<pre class="brush: html">&lt;dl&gt;
-  &lt;div&gt;
-    &lt;dt&gt;A&lt;/dt&gt;
-    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
-    &lt;dd&gt;Apparat&lt;/dd&gt;
-    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
-    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
-    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;dt&gt;C&lt;/dt&gt;
-    &lt;dd&gt;Chromeo&lt;/dd&gt;
-    &lt;dd&gt;Common&lt;/dd&gt;
-    &lt;dd&gt;Converge&lt;/dd&gt;
-    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
-    &lt;dd&gt;Cursive&lt;/dd&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;dt&gt;E&lt;/dt&gt;
-    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;dt&gt;T&lt;/dt&gt;
-    &lt;dd&gt;Ted Leo &amp; The Pharmacists&lt;/dd&gt;
-    &lt;dd&gt;T-Pain&lt;/dd&gt;
-    &lt;dd&gt;Thrice&lt;/dd&gt;
-    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
-    &lt;dd&gt;Two Gallants&lt;/dd&gt;
-  &lt;/div&gt;
-&lt;/dl&gt;
-</pre>
-
-<h4 id="CSS_4">CSS</h4>
-
-<pre class="brush: css">* {
+}
+```
+
+se comportera comme un élément positionné de façon relative jusqu'à ce que le _viewport_ défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que le _viewport_ redéfile jusqu'avant ce seuil.
+
+Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut du _viewport_ jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite).
+
+Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right")}} ou {{cssxref("bottom")}} ou {{cssxref("left")}} pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif.
+
+#### HTML
+
+```html
+<dl>
+  <div>
+    <dt>A</dt>
+    <dd>Andrew W.K.</dd>
+    <dd>Apparat</dd>
+    <dd>Arcade Fire</dd>
+    <dd>At The Drive-In</dd>
+    <dd>Aziz Ansari</dd>
+  </div>
+  <div>
+    <dt>C</dt>
+    <dd>Chromeo</dd>
+    <dd>Common</dd>
+    <dd>Converge</dd>
+    <dd>Crystal Castles</dd>
+    <dd>Cursive</dd>
+  </div>
+  <div>
+    <dt>E</dt>
+    <dd>Explosions In The Sky</dd>
+  </div>
+  <div>
+    <dt>T</dt>
+    <dd>Ted Leo & The Pharmacists</dd>
+    <dd>T-Pain</dd>
+    <dd>Thrice</dd>
+    <dd>TV On The Radio</dd>
+    <dd>Two Gallants</dd>
+  </div>
+</dl>
+```
+
+#### CSS
+
+```css
+* {
   box-sizing: border-box;
 }
-dl &gt; div {
+dl > div {
   margin: 0;
   padding: 24px 0 0 0;
 }
@@ -286,51 +293,32 @@ dd {
 dd + dd {
   border-top: 1px solid #CCC;
 }
-</pre>
+```
 
-<h4 id="Résultat_4">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Positionnement_adhérent_(sticky)', '500px', '300px')}}</p>
+{{EmbedLiveSample('Positionnement_adhérent_(sticky)', '500px', '300px')}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Il faut s'assurer que les éléments positionnés avec <code>absolute</code> ou <code>fixed</code> ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte.</p>
+Il faut s'assurer que les éléments positionnés avec `absolute` ou `fixed` ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte.
 
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [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)
+- [_Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
-<h3 id="Performance_et_accessibilité">Performance et accessibilité</h3>
+### Performance et accessibilité
 
-<p>Les éléments qui défilent avec du contenu utilisant <code>fixed</code> ou <code>sticky</code> peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter <code>will-change: transform</code> (cf. {{cssxref("will-change")}}) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité.</p>
+Les éléments qui défilent avec du contenu utilisant `fixed` ou `sticky` peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter `will-change: transform` (cf. {{cssxref("will-change")}}) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
-   <td>{{Spec2('CSS3 Positioning')}}</td>
-   <td>Ajout de la valeur <code>sticky</code></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires                |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------- |
+| {{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}} | {{Spec2('CSS2.1')}}                 |                             |
+| {{SpecName('CSS3 Positioning','#position-property','position')}}     | {{Spec2('CSS3 Positioning')}} | Ajout de la valeur `sticky` |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.position")}}</p>
+{{Compat("css.properties.position")}}
diff --git a/files/fr/web/css/position_value/index.md b/files/fr/web/css/position_value/index.md
index 5b6dd45473..0437058c5d 100644
--- a/files/fr/web/css/position_value/index.md
+++ b/files/fr/web/css/position_value/index.md
@@ -8,56 +8,57 @@ tags:
 translation_of: Web/CSS/position_value
 original_slug: Web/CSS/Type_position
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée CSS <strong><code>&lt;position&gt;</code></strong> définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur <code>&lt;position&gt;</code>, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}.</p>
+Le type de donnée CSS **`<position>`** définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur `<position>`, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p><img alt="" src="position_type.png">On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).</p>
+![](position_type.png)On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera `left`, `right`, `top`, `bottom` ou `center` (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).
 
-<p>Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("&lt;percentage&gt;")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).</p>
+Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("&lt;percentage&gt;")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).
 
-<p>Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est <code>center</code>.</p>
+Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est `center`.
 
-<h2 id="Valeurs">Valeurs</h2>
+## Valeurs
 
-<pre class="brush:css">/* Syntaxe avec une valeur */
-<var>mot-clé</var>                  /* Le côté depuis lequel décaler, on centrera sur l'autre axe*/
-<var>&lt;length&gt;</var> ou <var>&lt;percentage&gt;</var> /* La position sur l'axe */
+```css
+/* Syntaxe avec une valeur */
+mot-clé                  /* Le côté depuis lequel décaler, on centrera sur l'autre axe*/
+<length> ou <percentage> /* La position sur l'axe */
 
 /* Syntaxe avec deux valeurs */
-<var>mot-clé</var> <var>mot-clé</var>          /* Un mot-clé pour chaque direction, l'ordre n'est pas important */
-<var>mot-clé</var> <var>valeur</var>           /* La valeur indique le décalage par rapport au côté indiqué par le mot-clé */
-<em>valeur</em> <em>mot-clé</em>           /* Une valeur pour le décalage horizontal et un mot-clé pour le décalage vertical */
-<em>valeur</em> <em>valeur</em>            /* Une valeur pour chaque composante du décalage */
+mot-clé mot-clé          /* Un mot-clé pour chaque direction, l'ordre n'est pas important */
+mot-clé valeur           /* La valeur indique le décalage par rapport au côté indiqué par le mot-clé */
+valeur mot-clé           /* Une valeur pour le décalage horizontal et un mot-clé pour le décalage vertical */
+valeur valeur            /* Une valeur pour chaque composante du décalage */
 
 /* Syntaxe avec quatre valeurs */
-<em>mot-clé</em> <em>valeur</em> <em>mot-clé</em> <em>valeur</em> /* Chaque valeur indique le décalage par rapport au mot-clé qui le précède */
-</pre>
+mot-clé valeur mot-clé valeur /* Chaque valeur indique le décalage par rapport au mot-clé qui le précède */
+```
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<pre class="syntaxbox">[
- [ left | center | right ] || [ top | center | bottom ]
-|
- [ left | center | right | &lt;length&gt; | &lt;percentage&gt; ]
- [ top | center | bottom | &lt;length&gt; | &lt;percentage&gt; ]?
-|
- [ [ left | right ] [ &lt;length&gt; | &lt;percentage&gt; ] ] &amp;&amp;
- [ [ top | bottom ] [ &lt;length&gt; | &lt;percentage&gt; ] ]
-]
-</pre>
+    [
+     [ left | center | right ] || [ top | center | bottom ]
+    |
+     [ left | center | right | <length> | <percentage> ]
+     [ top | center | bottom | <length> | <percentage> ]?
+    |
+     [ [ left | right ] [ <length> | <percentage> ] ] &&
+     [ [ top | bottom ] [ <length> | <percentage> ] ]
+    ]
 
-<h2 id="Interpolation">Interpolation</h2>
+## Interpolation
 
-<p>Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("easing-function")}}) et le point se déplacera donc sur une ligne.</p>
+Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("easing-function")}}) et le point se déplacera donc sur une ligne.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: #FFEE99;
   background-repeat: no-repeat;
   width: 300px;
@@ -67,62 +68,38 @@ original_slug: Web/CSS/Type_position
 
 .exemple{
   background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat;
-  // Ici un exemple de valeur &lt;position&gt;
+  // Ici un exemple de valeur <position>
   background-position:  2.5cm bottom;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div class="exemple"&gt;Exemple&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 120, 200)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#position', '&lt;position&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de  <code>&lt;position&gt;</code> qui doit être utilisée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#position', '&lt;position&gt;')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td><code>&lt;position&gt;</code> est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td><code>&lt;position&gt;</code> est défini de façon anonyme comme valeur de {{cssxref("background-position")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.position")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Valeurs et unités en CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li>
- <li>{{cssxref("background-position")}}</li>
- <li>{{cssxref("radial-gradient","radial-gradient()")}}</li>
- <li>{{cssxref("conic-gradient","conic-gradient()")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div class="exemple">Exemple</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 120, 200)}}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                     | Commentaires                                                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Values', '#position', '&lt;position&gt;')}}                                 | {{Spec2('CSS3 Values')}}         | Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de  `<position>` qui doit être utilisée. |
+| {{SpecName('CSS3 Backgrounds', '#position', '&lt;position&gt;')}}                         | {{Spec2('CSS3 Backgrounds')}} | `<position>` est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.                                                                                              |
+| {{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}} | {{Spec2('CSS2.1')}}                 | Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}.                                                                         |
+| {{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}                             | {{Spec2('CSS1')}}                 | `<position>` est défini de façon anonyme comme valeur de {{cssxref("background-position")}}.                                                                                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.position")}}
+
+## Voir aussi
+
+- [Valeurs et unités en CSS](/fr/docs/Web/CSS/CSS_Values_and_Units)
+- [Tutoriel - Introduction aux valeurs et unités CSS](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
+- {{cssxref("background-position")}}
+- {{cssxref("radial-gradient","radial-gradient()")}}
+- {{cssxref("conic-gradient","conic-gradient()")}}
diff --git a/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md
index 0a9594e93f..8fe22dc51f 100644
--- a/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md
+++ b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md
@@ -8,40 +8,37 @@ tags:
 translation_of: Web/CSS/Privacy_and_the_:visited_selector
 original_slug: Web/CSS/:visited_et_la_vie_privée
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Par le passé (avant 2010), le sélecteur CSS {{cssxref(":visited")}} permettait aux sites d'effectuer des requêtes sur l'historique de l'utilisateur grâce à la méthode {{domxref("window.getComputedStyle")}} ou à d'autre techniques, parcourant l'historique de l'utilisateur afin de connaître les sites qu'il avait visité. Cela pouvait effectué rapidement et permettait d'obtenir beaucoup d'informations sur l'identité d'un utilisateur.</p>
+Par le passé (avant 2010), le sélecteur CSS {{cssxref(":visited")}} permettait aux sites d'effectuer des requêtes sur l'historique de l'utilisateur grâce à la méthode {{domxref("window.getComputedStyle")}} ou à d'autre techniques, parcourant l'historique de l'utilisateur afin de connaître les sites qu'il avait visité. Cela pouvait effectué rapidement et permettait d'obtenir beaucoup d'informations sur l'identité d'un utilisateur.
 
-<p>Afin de palier au problème, Gecko ({{Gecko("2")}}) a été modifié afin de limiter la quantité d'informations qui peut être obtenue au travers des liens visités. Les autres navigateurs ont également été modifiés de façon semblable.</p>
+Afin de palier au problème, Gecko ({{Gecko("2")}}) a été modifié afin de limiter la quantité d'informations qui peut être obtenue au travers des liens visités. Les autres navigateurs ont également été modifiés de façon semblable.
 
-<h2 id="Quelques_petits_mensonges_pour_se_protéger">Quelques petits mensonges pour se protéger</h2>
+## Quelques petits mensonges pour se protéger
 
-<p>La première modification consiste à faire mentir Gecko envers les applications web sous certaines circonstances. </p>
+La première modification consiste à faire mentir Gecko envers les applications web sous certaines circonstances.
 
-<ul>
- <li><code>window.getComputedStyle()</code> et les fonctions analogues comme {{domxref("element.querySelector()")}} renverront toujours des valeurs indiquant que l'utilisateur n'a jamais visité aucun des liens présents sur une page.</li>
- <li>Si on utilise un sélecteur d'élément voisin comme <code>:visited + span</code>, l'élément {{htmlelement("span")}} sera mis en forme comme si le lien n'avait pas été visité.</li>
- <li>Enfin, dans quelques rares scénarios, si on utilise des liens imbriqués et que l'élément ciblé par CSS diffère du lien dont on souhaite savoir s'il a été visité, cet élément sera dessiné comme si le lien n'avait pas été visité.</li>
-</ul>
+- `window.getComputedStyle()` et les fonctions analogues comme {{domxref("element.querySelector()")}} renverront toujours des valeurs indiquant que l'utilisateur n'a jamais visité aucun des liens présents sur une page.
+- Si on utilise un sélecteur d'élément voisin comme `:visited + span`, l'élément {{htmlelement("span")}} sera mis en forme comme si le lien n'avait pas été visité.
+- Enfin, dans quelques rares scénarios, si on utilise des liens imbriqués et que l'élément ciblé par CSS diffère du lien dont on souhaite savoir s'il a été visité, cet élément sera dessiné comme si le lien n'avait pas été visité.
 
-<h2 id="Les_limites_de_la_mise_en_forme_applicable_aux_liens_visités">Les limites de la mise en forme applicable aux liens visités</h2>
+## Les limites de la mise en forme applicable aux liens visités
 
-<p>On peut toujours mettre en forme les liens visités mais quelques limites s'appliquent désormais. Seule les propriétés suivantes pourront être appliquées aux liens visités :</p>
+On peut toujours mettre en forme les liens visités mais quelques limites s'appliquent désormais. Seule les propriétés suivantes pourront être appliquées aux liens visités :
 
-<ul>
- <li>{{cssxref("color")}},</li>
- <li>{{cssxref("background-color")}},</li>
- <li>{{cssxref("border-color")}} (et les propriétés détaillées associées),</li>
- <li>{{cssxref("column-rule-color")}},</li>
- <li>{{cssxref("outline-color")}},</li>
- <li>Les composantes de couleur liées aux attributs SVG {{SVGAttr("fill")}} et {{SVGAttr("stroke")}}.</li>
-</ul>
+- {{cssxref("color")}},
+- {{cssxref("background-color")}},
+- {{cssxref("border-color")}} (et les propriétés détaillées associées),
+- {{cssxref("column-rule-color")}},
+- {{cssxref("outline-color")}},
+- Les composantes de couleur liées aux attributs SVG {{SVGAttr("fill")}} et {{SVGAttr("stroke")}}.
 
-<p>De plus, même pour ces propriétés, il n'est pas possible de modifier la transparence entre les liens qui ont été visités et les autres (comme on pourrait le faire par ailleurs avec <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Type_color#rgb()_et_rgba()">rgba()</a></code> ou <code><a href="/fr/docs/Web/CSS/Type_color#hsl()_et_hsla()">hsla()</a></code> ou avec le mot-clé <code><a href="/fr/docs/Web/CSS/Type_color#Le_mot-cl%C3%A9_transparent">transparent</a></code>).</p>
+De plus, même pour ces propriétés, il n'est pas possible de modifier la transparence entre les liens qui ont été visités et les autres (comme on pourrait le faire par ailleurs avec [`rgba()`](<https://developer.mozilla.org/fr/docs/Web/CSS/Type_color#rgb()_et_rgba()>) ou [`hsla()`](</fr/docs/Web/CSS/Type_color#hsl()_et_hsla()>) ou avec le mot-clé [`transparent`](/fr/docs/Web/CSS/Type_color#Le_mot-cl%C3%A9_transparent)).
 
-<p>Voici un exemple de mise en forme prenant en compte ces restrictions :</p>
+Voici un exemple de mise en forme prenant en compte ces restrictions :
 
-<pre class="brush: css">:link {
+```css
+:link {
   outline: 1px dotted blue;
   background-color: white;
   /* La valeur par défaut de background-color est 'transparent'.
@@ -54,21 +51,17 @@ original_slug: Web/CSS/:visited_et_la_vie_privée
   color: yellow;             /* Le texte des liens visités sera en jaune   */
   background-color: green;   /* L'arrière-plan des liens visités sera vert */
 }
-</pre>
+```
 
-<h2 id="Impact_sur_les_développeurs_web">Impact sur les développeurs web</h2>
+## Impact sur les développeurs web
 
-<p>De façon générale, cela ne devrait pas impacter les développeurs de façon significative. Il faudra toutefois appliquer les modifications suivantes aux sites :</p>
+De façon générale, cela ne devrait pas impacter les développeurs de façon significative. Il faudra toutefois appliquer les modifications suivantes aux sites :
 
-<ul>
- <li>L'utilisation d'images d'arrière-plan pour la mise en forme des liens visités ne fonctionnera plus car seules les couleurs peuvent être utilisées pour les mettre en avant.</li>
- <li>Les couleurs qui seraient transparentes de façon normale ne seront pas affichées si elles participent à la mise en forme d'un sélecteur <code>:visited</code>.</li>
-</ul>
+- L'utilisation d'images d'arrière-plan pour la mise en forme des liens visités ne fonctionnera plus car seules les couleurs peuvent être utilisées pour les mettre en avant.
+- Les couleurs qui seraient transparentes de façon normale ne seront pas affichées si elles participent à la mise en forme d'un sélecteur `:visited`.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">Les modifications apportées à <code>:visited</code> pour la vie privée (en anglais)</a> sur Mozilla Hacks</li>
- <li><a href="https://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">Colmater la fuite de l'historique via CSS (en anglais)</a> sur le blog de sécurité Mozilla</li>
- <li><a href="http://dbaron.org/mozilla/visited-privacy">Empêcher les attaques vers l'historique de l'utilisateur perpétrées via <code>:visited</code> (en anglais)</a></li>
-</ul>
+- [Les modifications apportées à `:visited` pour la vie privée (en anglais)](https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/) sur Mozilla Hacks
+- [Colmater la fuite de l'historique via CSS (en anglais)](https://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/) sur le blog de sécurité Mozilla
+- [Empêcher les attaques vers l'historique de l'utilisateur perpétrées via `:visited` (en anglais)](http://dbaron.org/mozilla/visited-privacy)
diff --git a/files/fr/web/css/pseudo-classes/index.md b/files/fr/web/css/pseudo-classes/index.md
index 22ba65100c..1c844c04d1 100644
--- a/files/fr/web/css/pseudo-classes/index.md
+++ b/files/fr/web/css/pseudo-classes/index.md
@@ -9,195 +9,234 @@ tags:
   - Sélecteur
 translation_of: Web/CSS/Pseudo-classes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Une <strong>pseudo-classe</strong> est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).</p>
+Une **pseudo-classe** est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).
 
-<pre class="brush: css no-line-numbers">div:hover {
+```css
+div:hover {
   background-color: #F89B4D;
-}</pre>
-
-<p>Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec {{cssxref(":visited")}} ; le statut du contenu avec {{cssxref(":checked")}} ; la position de la souris {{cssxref(":hover")}}).</p>
-
-<div class="note">
-<p><strong>Note :</strong> À la différence des pseudo-classes, <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">les pseudo-éléments</a> peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">sélecteur:pseudo-classe {
-  propriété: valeur;
 }
-</pre>
-
-<p>À l'instar des classes, on peut chaîner plusieurs pseudo-classes au sein d'un sélecteur.</p>
-
-<h2 id="Liste_des_pseudo-classes_standards">Liste des pseudo-classes standards</h2>
-
-<ul>
- <li>{{CSSxRef(":active")}}</li>
- <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":checked")}}</li>
- <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":default")}}</li>
- <li>{{CSSxRef(":defined")}}</li>
- <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":disabled")}}</li>
- <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":empty")}}</li>
- <li>{{CSSxRef(":enabled")}}</li>
- <li>{{CSSxRef(":first")}}</li>
- <li>{{CSSxRef(":first-child")}}</li>
- <li>{{CSSxRef(":first-of-type")}}</li>
- <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":focus")}}</li>
- <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":focus-within")}}</li>
- <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":host")}}</li>
- <li>{{CSSxRef(":host()")}}</li>
- <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":hover")}}</li>
- <li>{{CSSxRef(":indeterminate")}}</li>
- <li>{{CSSxRef(":in-range")}}</li>
- <li>{{CSSxRef(":invalid")}}</li>
- <li>{{CSSxRef(":is")}} {{Experimental_inline}}</li>
- <li>{{CSSxRef(":lang", ":lang()")}}</li>
- <li>{{CSSxRef(":last-child")}}</li>
- <li>{{CSSxRef(":last-of-type")}}</li>
- <li>{{CSSxRef(":left")}}</li>
- <li>{{CSSxRef(":link")}}</li>
- <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":not", ":not()")}}</li>
- <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
- <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
- <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
- <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
- <li>{{CSSxRef(":only-child")}}</li>
- <li>{{CSSxRef(":only-of-type")}}</li>
- <li>{{CSSxRef(":optional")}}</li>
- <li>{{CSSxRef(":out-of-range")}}</li>
- <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":read-only")}}</li>
- <li>{{CSSxRef(":read-write")}}</li>
- <li>{{CSSxRef(":required")}}</li>
- <li>{{CSSxRef(":right")}}</li>
- <li>{{CSSxRef(":root")}}</li>
- <li>{{CSSxRef(":scope")}}</li>
- <li>{{CSSxRef(":target")}}</li>
- <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":valid")}}</li>
- <li>{{CSSxRef(":visited")}}</li>
- <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">.survol:hover {
+```
+
+Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec {{cssxref(":visited")}} ; le statut du contenu avec {{cssxref(":checked")}} ; la position de la souris {{cssxref(":hover")}}).
+
+> **Note :** À la différence des pseudo-classes, [les pseudo-éléments](/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments) peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.
+
+## Syntaxe
+
+    sélecteur:pseudo-classe {
+      propriété: valeur;
+    }
+
+À l'instar des classes, on peut chaîner plusieurs pseudo-classes au sein d'un sélecteur.
+
+## Liste des pseudo-classes standards
+
+- {{CSSxRef(":active")}}
+- {{CSSxRef(":any-link")}} {{Experimental_Inline}}
+- {{CSSxRef(":blank")}} {{Experimental_Inline}}
+- {{CSSxRef(":checked")}}
+- {{CSSxRef(":current")}} {{Experimental_Inline}}
+- {{CSSxRef(":default")}}
+- {{CSSxRef(":defined")}}
+- {{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}
+- {{CSSxRef(":disabled")}}
+- {{CSSxRef(":drop")}} {{Experimental_Inline}}
+- {{CSSxRef(":empty")}}
+- {{CSSxRef(":enabled")}}
+- {{CSSxRef(":first")}}
+- {{CSSxRef(":first-child")}}
+- {{CSSxRef(":first-of-type")}}
+- {{CSSxRef(":fullscreen")}} {{Experimental_Inline}}
+- {{CSSxRef(":future")}} {{Experimental_Inline}}
+- {{CSSxRef(":focus")}}
+- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}}
+- {{CSSxRef(":focus-within")}}
+- {{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}
+- {{CSSxRef(":host")}}
+- {{CSSxRef(":host()")}}
+- {{CSSxRef(":host-context()")}} {{Experimental_Inline}}
+- {{CSSxRef(":hover")}}
+- {{CSSxRef(":indeterminate")}}
+- {{CSSxRef(":in-range")}}
+- {{CSSxRef(":invalid")}}
+- {{CSSxRef(":is")}} {{Experimental_inline}}
+- {{CSSxRef(":lang", ":lang()")}}
+- {{CSSxRef(":last-child")}}
+- {{CSSxRef(":last-of-type")}}
+- {{CSSxRef(":left")}}
+- {{CSSxRef(":link")}}
+- {{CSSxRef(":local-link")}} {{Experimental_Inline}}
+- {{CSSxRef(":not", ":not()")}}
+- {{CSSxRef(":nth-child", ":nth-child()")}}
+- {{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}
+- {{CSSxRef(":nth-last-child", ":nth-last-child()")}}
+- {{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}
+- {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}
+- {{CSSxRef(":nth-of-type", ":nth-of-type()")}}
+- {{CSSxRef(":only-child")}}
+- {{CSSxRef(":only-of-type")}}
+- {{CSSxRef(":optional")}}
+- {{CSSxRef(":out-of-range")}}
+- {{CSSxRef(":past")}} {{Experimental_Inline}}
+- {{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}
+- {{CSSxRef(":read-only")}}
+- {{CSSxRef(":read-write")}}
+- {{CSSxRef(":required")}}
+- {{CSSxRef(":right")}}
+- {{CSSxRef(":root")}}
+- {{CSSxRef(":scope")}}
+- {{CSSxRef(":target")}}
+- {{CSSxRef(":target-within")}} {{Experimental_Inline}}
+- {{CSSxRef(":user-invalid")}} {{Experimental_Inline}}
+- {{CSSxRef(":valid")}}
+- {{CSSxRef(":visited")}}
+- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}
+
+## Exemples
+
+### CSS
+
+```css
+.survol:hover {
   background-color: palegreen;
 }
 
 p:nth-child(2n+1) {
   background-color: lime;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="survol"&gt;
+```html
+<div>
+  <p class="survol">
     La Reine devint pourpre de colère ; et après
     l’avoir considérée un moment avec des yeux
     flamboyants comme ceux d’une bête fauve, elle
     se mit à crier : « Qu’on lui coupe la tête ! »
-  &lt;/p&gt;
-  &lt;p&gt;
+  </p>
+  <p>
     « Quelle idée ! » dit Alice très-haut et d’un
     ton décidé. La Reine se tut.
-  &lt;/p&gt;
-  &lt;p&gt;
+  </p>
+  <p>
     Le Roi lui posa la main sur le bras, et lui
     dit timidement : « Considérez donc, ma chère
     amie, que ce n’est qu’une enfant. »
-  &lt;/p&gt;
-&lt;/div&gt;</pre>
+  </p>
+</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","250","350")}}</p>
+{{EmbedLiveSample("Exemples","250","350")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Fullscreen')}}</td>
-   <td>{{Spec2('Fullscreen')}}</td>
-   <td>Définition de <code>:fullscreen</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#pseudo-classes')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définit lorsque des sélecteurs particuliers correspondent à des éléments HTML.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>
-    <p>Définition de <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code> et <code>:matches()</code>.</p>
-
-    <p>Changement afin que <code>:empty</code> se comporte comme {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.</p>
-
-    <p>Aucune modification significative pour les pseudo-classes définies avec {{SpecName('CSS3 Selectors')}} et {{SpecName('HTML5 W3C')}}.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Copie les éléments pertinents de la spécification HTML WHATWG</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Définition de <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> et <code>:read-write</code>, mais sans la sémantique associée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition de <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> et <code>:not()</code>.<br>
-    Définition de la syntaxe pour <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> et <code>:indeterminate</code>, mais sans la sémantique associée.<br>
-    Pas de modification significative pour les pseudo-classes définies avec {{SpecName('CSS2.1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition de <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> et <code>:focus</code>.<br>
-    Aucune modification significative pour les pseudo-classes définies avec  {{SpecName('CSS1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition de <code>:link</code>, <code>:visited</code> et <code>:active</code>, mais sans la sémantique associée.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Fullscreen')}}</td>
+      <td>{{Spec2('Fullscreen')}}</td>
+      <td>Définition de <code>:fullscreen</code>.</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('HTML WHATWG', '#pseudo-classes')}}</td>
+      <td>{{Spec2('HTML WHATWG')}}</td>
+      <td>
+        Définit lorsque des sélecteurs particuliers correspondent à des éléments
+        HTML.
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS4 Selectors')}}</td>
+      <td>{{Spec2('CSS4 Selectors')}}</td>
+      <td>
+        <p>
+          Définition de <code>:any-link</code>, <code>:local-link</code>,
+          <code>:scope</code>, <code>:active-drop-target</code>,
+          <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>,
+          <code>:current</code>, <code>:past</code>, <code>:future</code>,
+          <code>:placeholder-shown</code>, <code>:user-error</code>,
+          <code>:blank</code>, <code>:nth-match()</code>,
+          <code>:nth-last-match()</code>, <code>:nth-column()</code>,
+          <code>:nth-last-column()</code> et <code>:matches()</code>.
+        </p>
+        <p>
+          Changement afin que <code>:empty</code> se comporte comme
+          {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.
+        </p>
+        <p>
+          Aucune modification significative pour les pseudo-classes définies
+          avec {{SpecName('CSS3 Selectors')}} et
+          {{SpecName('HTML5 W3C')}}.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('HTML5 W3C')}}</td>
+      <td>{{Spec2('HTML5 W3C')}}</td>
+      <td>Copie les éléments pertinents de la spécification HTML WHATWG</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS3 Basic UI')}}</td>
+      <td>{{Spec2('CSS3 Basic UI')}}</td>
+      <td>
+        Définition de <code>:default</code>, <code>:valid</code>,
+        <code>:invalid</code>, <code>:in-range</code>,
+        <code>:out-of-range</code>, <code>:required</code>,
+        <code>:optional</code>, <code>:read-only</code> et
+        <code>:read-write</code>, mais sans la sémantique associée.
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS3 Selectors')}}</td>
+      <td>{{Spec2('CSS3 Selectors')}}</td>
+      <td>
+        Définition de <code>:target</code>, <code>:root</code>,
+        <code>:nth-child()</code>, <code>:nth-last-of-child()</code>,
+        <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>,
+        <code>:last-child</code>, <code>:first-of-type</code>,
+        <code>:last-of-type</code>, <code>:only-child</code>,
+        <code>:only-of-type</code>, <code>:empty</code> et
+        <code>:not()</code>.<br />Définition de la syntaxe pour
+        <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> et
+        <code>:indeterminate</code>, mais sans la sémantique associée.<br />Pas
+        de modification significative pour les pseudo-classes définies avec
+        {{SpecName('CSS2.1')}}.
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS2.1')}}</td>
+      <td>{{Spec2('CSS2.1')}}</td>
+      <td>
+        Définition de <code>:lang()</code>, <code>:first-child</code>,
+        <code>:hover</code> et <code>:focus</code>.<br />Aucune modification
+        significative pour les pseudo-classes définies avec 
+        {{SpecName('CSS1')}}.
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS1')}}</td>
+      <td>{{Spec2('CSS1')}}</td>
+      <td>
+        Définition de <code>:link</code>, <code>:visited</code> et
+        <code>:active</code>, mais sans la sémantique associée.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">Les pseudo-éléments</a></li>
-</ul>
+- [Les pseudo-éléments](/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments)
diff --git a/files/fr/web/css/pseudo-elements/index.md b/files/fr/web/css/pseudo-elements/index.md
index e25886b602..c4bec6cf0b 100644
--- a/files/fr/web/css/pseudo-elements/index.md
+++ b/files/fr/web/css/pseudo-elements/index.md
@@ -9,62 +9,60 @@ tags:
 translation_of: Web/CSS/Pseudo-elements
 original_slug: Web/CSS/Pseudo-éléments
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Un <strong>pseudo-élément</strong> est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément {{cssxref("::first-line")}} permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.</p>
+Un **pseudo-élément** est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément {{cssxref("::first-line")}} permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.
 
-<pre class="brush: css no-line-numbers">/* La première ligne de chaque élément &lt;p&gt;. */
+```css
+/* La première ligne de chaque élément <p>. */
 p::first-line {
   color: blue;
   text-transform: uppercase;
 }
-</pre>
+```
 
+> **Note :** À la différence des pseudo-éléments, [les pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) peuvent être utilisées afin de mettre en forme un élément en fonction de son état.
 
+## Syntaxe
 
-<div class="note">
-<p><strong>Note :</strong> À la différence des pseudo-éléments, <a href="/fr/docs/Web/CSS/Pseudo-classes">les pseudo-classes</a> peuvent être utilisées afin de mettre en forme un élément en fonction de son état.</p>
-</div>
+    sélecteur::pseudo-élément {
+      propriété: valeur;
+    }
 
-<h2 id="Syntaxe">Syntaxe</h2>
+On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration
 
-<pre class="syntaxbox">sélecteur::pseudo-élément {
-  propriété: valeur;
-}</pre>
+Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».
 
-<p>On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration</p>
+## Liste des pseudo-éléments
 
-<p>Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».</p>
+- {{CSSxRef("::after", "::after (:after)")}}
+- {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
+- {{CSSxRef("::before", "::before (:before)")}}
+- {{CSSxRef("::cue", "::cue (:cue)")}}
+- {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}
+- {{CSSxRef("::first-line", "::first-line (:first-line)")}}
+- {{CSSxRef("::grammar-error")}} {{Experimental_Inline}}
+- {{CSSxRef("::marker")}} {{Experimental_Inline}}
+- {{CSSxRef("::part")}} {{Experimental_inline}}
+- {{CSSxRef("::placeholder")}} {{Experimental_Inline}}
+- {{CSSxRef("::selection")}}
+- {{CSSxRef("::slotted", "::slotted()")}}
+- {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
 
-<h2 id="Liste_des_pseudo-éléments">Liste des pseudo-éléments</h2>
+## Exemples
 
-<ul>
- <li>{{CSSxRef("::after", "::after (:after)")}}</li>
- <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("::before", "::before (:before)")}}</li>
- <li>{{CSSxRef("::cue", "::cue (:cue)")}}</li>
- <li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li>
- <li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li>
- <li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("::part")}} {{Experimental_inline}}</li>
- <li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("::selection")}}</li>
- <li>{{CSSxRef("::slotted", "::slotted()")}}</li>
- <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li>
-</ul>
+### CSS
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">p::first-line {
+```css
+p::first-line {
   color: blue;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   C’était le Lapin Blanc qui revenait en trottinant,
   et qui cherchait de tous côtés, d’un air inquiet,
   comme s’il avait perdu quelque chose ; Alice
@@ -76,56 +74,55 @@ p::first-line {
   qu’il cherchait l’éventail et la paire de gants paille,
   et, comme elle avait bon cœur, elle se mit à les
   chercher aussi ; mais pas moyen de les trouver.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', 250, 200)}}</p>
+{{EmbedLiveSample('Exemples', 250, 200)}}
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th>Navigateur</th>
-   <th>Version minimale</th>
-   <th>Prise en charge de :</th>
-  </tr>
-  <tr>
-   <td rowspan="2">Internet Explorer</td>
-   <td>8.0</td>
-   <td><code>:pseudo-element</code></td>
-  </tr>
-  <tr>
-   <td>9.0</td>
-   <td><code>:pseudo-element ::pseudo-element</code></td>
-  </tr>
-  <tr>
-   <td rowspan="2">Firefox (Gecko)</td>
-   <td>1.0 (1.0)</td>
-   <td><code>:pseudo-element</code></td>
-  </tr>
-  <tr>
-   <td>1.0 (1.5)</td>
-   <td><code>:pseudo-element ::pseudo-element</code></td>
-  </tr>
-  <tr>
-   <td rowspan="2">Opera</td>
-   <td>4.0</td>
-   <td><code>:pseudo-element</code></td>
-  </tr>
-  <tr>
-   <td>7.0</td>
-   <td><code>:pseudo-element ::pseudo-element</code></td>
-  </tr>
-  <tr>
-   <td>Safari (WebKit)</td>
-   <td>1.0 (85)</td>
-   <td><code>:pseudo-element ::pseudo-element</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Navigateur</th>
+      <th>Version minimale</th>
+      <th>Prise en charge de :</th>
+    </tr>
+    <tr>
+      <td rowspan="2">Internet Explorer</td>
+      <td>8.0</td>
+      <td><code>:pseudo-element</code></td>
+    </tr>
+    <tr>
+      <td>9.0</td>
+      <td><code>:pseudo-element ::pseudo-element</code></td>
+    </tr>
+    <tr>
+      <td rowspan="2">Firefox (Gecko)</td>
+      <td>1.0 (1.0)</td>
+      <td><code>:pseudo-element</code></td>
+    </tr>
+    <tr>
+      <td>1.0 (1.5)</td>
+      <td><code>:pseudo-element ::pseudo-element</code></td>
+    </tr>
+    <tr>
+      <td rowspan="2">Opera</td>
+      <td>4.0</td>
+      <td><code>:pseudo-element</code></td>
+    </tr>
+    <tr>
+      <td>7.0</td>
+      <td><code>:pseudo-element ::pseudo-element</code></td>
+    </tr>
+    <tr>
+      <td>Safari (WebKit)</td>
+      <td>1.0 (85)</td>
+      <td><code>:pseudo-element ::pseudo-element</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Pseudo-classes">Les pseudo-classes</a></li>
-</ul>
+- [Les pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes)
diff --git a/files/fr/web/css/quotes/index.md b/files/fr/web/css/quotes/index.md
index ca406df88d..02fcdbb876 100644
--- a/files/fr/web/css/quotes/index.md
+++ b/files/fr/web/css/quotes/index.md
@@ -8,19 +8,18 @@ tags:
   - Web
 translation_of: Web/CSS/quotes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>quotes</code></strong> indique la façon dont les marques de citation sont affichées.</p>
+La propriété **`quotes`** indique la façon dont les marques de citation sont affichées.
 
-<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div
+{{EmbedInteractiveExample("pages/css/quotes.html")}}Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 quotes: none;
 
 /* Chaînes de caractères */
-/* Type &lt;string&gt;         */
+/* Type <string>         */
 quotes: "«" "»";           /* On utilise les guillemets français
                               pour ouvrir et fermer une citation  */
 quotes: "«" "»" "‹" "›";   /* On définit deux niveaux de citation */
@@ -29,77 +28,60 @@ quotes: "«" "»" "‹" "›";   /* On définit deux niveaux de citation */
 quotes: inherit;
 quotes: initial;
 quotes: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Les valeurs <code>open-quote</code> et <code>close-quote</code> de la propriété {{cssxref("content")}} n'entraînent aucune marque de citation.</dd>
- <dt><code>[&lt;string&gt; &lt;string&gt;]+</code></dt>
- <dd>Une ou plusieurs paires de {{cssxref("&lt;string&gt;")}} pour les valeurs <code>open-quote</code> et <code>close-quote</code>. La première paire représente les symboles utilisés pour les citations de plus haut niveau, la deuxième indique comment délimiter une citation dans une citation, la troisième paire permet d'ajouter un niveau d'imbrication supplémentaire et ainsi de suite.</dd>
-</dl>
+- `none`
+  - : Les valeurs `open-quote` et `close-quote` de la propriété {{cssxref("content")}} n'entraînent aucune marque de citation.
+- `[<string> <string>]+`
+  - : Une ou plusieurs paires de {{cssxref("&lt;string&gt;")}} pour les valeurs `open-quote` et `close-quote`. La première paire représente les symboles utilisés pour les citations de plus haut niveau, la deuxième indique comment délimiter une citation dans une citation, la troisième paire permet d'ajouter un niveau d'imbrication supplémentaire et ainsi de suite.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  &lt;q&gt;Bientôt le Lapin aperçut Alice qui furetait ;
+```html
+<p>
+  <q>Bientôt le Lapin aperçut Alice qui furetait ;
   il lui cria d’un ton d’impatience :
-    &lt;q&gt;Eh bien ! Marianne, que faites-vous ici ?
+    <q>Eh bien ! Marianne, que faites-vous ici ?
     Courez vite à la maison me chercher une paire
     de gants et un éventail ! Allons, dépêchons-nous.
-    &lt;/q&gt;
-  &lt;/q&gt;
-&lt;/p&gt;</pre>
+    </q>
+  </q>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">q {
+```css
+q {
   quotes : "«" "»" '"' '"';
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Content", "#quotes", "quotes")}}</td>
-   <td>{{Spec2("CSS3 Content")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.quotes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("content")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                | État                             | Commentaires        |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("CSS3 Content", "#quotes", "quotes")}}             | {{Spec2("CSS3 Content")}} |                     |
+| {{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}} | {{Spec2('CSS2.1')}}         | Définition initiale |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.quotes")}}
+
+## Voir aussi
+
+- {{cssxref("content")}}
diff --git a/files/fr/web/css/ratio/index.md b/files/fr/web/css/ratio/index.md
index cd2fc22936..4582a43c85 100644
--- a/files/fr/web/css/ratio/index.md
+++ b/files/fr/web/css/ratio/index.md
@@ -7,102 +7,66 @@ tags:
   - Type
 translation_of: Web/CSS/ratio
 ---
-<div>{{CSSRef}}</div>
-
-<p>Le type de donnée CSS <strong><code>&lt;ratio&gt;</code></strong> permet de décrire les proportions <a href="/fr/docs/Web/CSS/Media_Queries">dans les <em>media queries</em></a> (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref("&lt;integer&gt;")}}, suivi d'une barre oblique ('/', Unicode<code> U+002F SOLIDUS</code>) puis d'un second entier strictement positif (type {{cssxref("&lt;integer&gt;")}}). Il est possible d'avoir des espaces avant et après la barre oblique.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_dans_une_media_query">Utiliser dans une <em>media query</em></h3>
-
-<pre class="brush: css">@media screen and (min-aspect-ratio: 16/9) { … }</pre>
-
-<h3 id="Ratios_fréquemment_utilisés">Ratios fréquemment utilisés</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"> </th>
-   <th scope="col">Ratio</th>
-   <th scope="col">Utilisation</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><img src="ratio4_3.png"></td>
-   <td><code>4/3</code></td>
-   <td>Format traditionnel utilisé par les télévisions au XX<sup>e</sup> siècle.</td>
-  </tr>
-  <tr>
-   <td><img src="ratio16_9.png"></td>
-   <td><code>16/9</code></td>
-   <td>Format « moderne » des télévisions.</td>
-  </tr>
-  <tr>
-   <td><img src="ratio1_1.85.png"></td>
-   <td><code>185/100</code> = <code>91/50</code><br>
-    <em>(les numérateurs et dénominateurs décimaux ne sont pas autorisés)</em></td>
-   <td>Le format le plus utilisé pour la projection de films depuis les années 1960.</td>
-  </tr>
-  <tr>
-   <td><img src="ratio1_2.39.png"></td>
-   <td><code>239/100</code><br>
-    <em>(les numérateurs et dénominateurs décimaux ne sont pas autorisés)</em></td>
-   <td>Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple_appliqué">Exemple appliqué</h2>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) {
+{{CSSRef}}
+
+Le type de donnée CSS **`<ratio>`** permet de décrire les proportions [dans les _media queries_](/fr/docs/Web/CSS/Media_Queries) (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.
+
+## Syntaxe
+
+Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref("&lt;integer&gt;")}}, suivi d'une barre oblique ('/', Unicode` U+002F SOLIDUS`) puis d'un second entier strictement positif (type {{cssxref("&lt;integer&gt;")}}). Il est possible d'avoir des espaces avant et après la barre oblique.
+
+## Exemples
+
+### Utiliser dans une _media query_
+
+```css
+@media screen and (min-aspect-ratio: 16/9) { … }
+```
+
+### Ratios fréquemment utilisés
+
+|                      | Ratio                                                                                   | Utilisation                                                                                 |
+| -------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| ![](ratio4_3.png)    | `4/3`                                                                                   | Format traditionnel utilisé par les télévisions au XX<sup>e</sup> siècle.                   |
+| ![](ratio16_9.png)   | `16/9`                                                                                  | Format « moderne » des télévisions.                                                         |
+| ![](ratio1_1.85.png) | `185/100` = `91/50` _(les numérateurs et dénominateurs décimaux ne sont pas autorisés)_ | Le format le plus utilisé pour la projection de films depuis les années 1960.               |
+| ![](ratio1_2.39.png) | `239/100` _(les numérateurs et dénominateurs décimaux ne sont pas autorisés)_           | Le format « large » utilisé pour projeter certains films (on parle de format anamorphique). |
+
+## Exemple appliqué
+
+### CSS
+
+```css
+@media screen and (min-aspect-ratio: 1/1) {
   .exemple {
     background-color: palegreen;
   }
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   Essayez de m'étirer en longueur ou de me réduire en largeur
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemple_appliqué","300","300")}}</p>
+{{EmbedLiveSample("Exemple_appliqué","300","300")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#values', '&lt;ratio&gt;')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Media Queries', '#values', '&lt;ratio&gt;')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.ratio")}}</p>
+{{Compat("css.types.ratio")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Media_Queries">Les <em>media queries</em> CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/@media/aspect-ratio">La caractéristique média aspect-ratio</a></li>
-</ul>
+- [Les _media queries_ CSS](/fr/docs/Web/CSS/Media_Queries)
+- [La caractéristique média aspect-ratio](/fr/docs/Web/CSS/@media/aspect-ratio)
diff --git a/files/fr/web/css/reference/index.md b/files/fr/web/css/reference/index.md
index 8b41901dc5..b454727d4d 100644
--- a/files/fr/web/css/reference/index.md
+++ b/files/fr/web/css/reference/index.md
@@ -10,177 +10,154 @@ tags:
   - Types CSS
 translation_of: Web/CSS/Reference
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Cette <strong>référence CSS</strong> fournit un <strong><a href="#index_des_mots-clés">index alphabétique</a></strong> de toutes les propriétés <a href="/fr/docs/Web/CSS">CSS</a> standards, des <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, des <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a>, des <a href="/fr/docs/Web/CSS/CSS_Types">types de données</a> et des <a href="/fr/docs/Web/CSS/At-rule">règles @</a>. Vous pouvez également trouver une liste alphabétique de tous les <strong><a href="#sélecteurs">sélecteurs CSS par type</a></strong> et une liste des <strong><a href="#concepts">concepts clés de CSS</a></strong>. Enfin est inclus un bref sommaire de <strong><a href="#dom-css_cssom">référence sur DOM-CSS / CSSOM</a></strong>.</p>
+Cette **référence CSS** fournit un **[index alphabétique](#index_des_mots-clés)** de toutes les propriétés [CSS](/fr/docs/Web/CSS) standards, des [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes), des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements), des [types de données](/fr/docs/Web/CSS/CSS_Types) et des [règles @](/fr/docs/Web/CSS/At-rule). Vous pouvez également trouver une liste alphabétique de tous les **[sélecteurs CSS par type](#sélecteurs)** et une liste des **[concepts clés de CSS](#concepts)**. Enfin est inclus un bref sommaire de **[référence sur DOM-CSS / CSSOM](#dom-css_cssom)**.
 
-<h2 id="Syntaxe_de_règle_basique">Syntaxe de règle basique</h2>
+## Syntaxe de règle basique
 
-<h3 id="Syntaxe_de_style_basique">Syntaxe de style basique</h3>
+### Syntaxe de style basique
 
-<pre class="syntaxbox"><var>règle-de-style-basique</var> <strong>::=</strong>
-    <var>liste-de-sélecteurs</var> <strong>{</strong>
-      <var>liste-de-propriétés</var>
-    <strong>}</strong>
-</pre>
+    règle-de-style-basique ::=
+        liste-de-sélecteurs {
+          liste-de-propriétés
+        }
 
-<p>... où :</p>
+... où :
 
-<pre class="syntaxbox"><var>liste-de-sélecteurs</var> <strong>::=</strong>
-    <var>sélecteur[</var><strong>:</strong><var>pseudo-classe] [</var><strong>::</strong><var>pseudo-élément]
-    [</var><strong>,</strong><var> liste-de-sélecteurs]</var>
+    liste-de-sélecteurs ::=
+        sélecteur[:pseudo-classe] [::pseudo-élément]
+        [, liste-de-sélecteurs]
 
-<var>liste-de-propriétés</var> <strong>::=</strong>
-<var>    [propriété </var><strong>:</strong> <var>valeur] [</var><strong>; </strong><var>liste-de-propriétés]</var>
-</pre>
+    liste-de-propriétés ::=
+        [propriété : valeur] [; liste-de-propriétés]
 
-<p>Voir aussi les <a href="#sélecteurs"><em>sélecteurs</em></a>, <a href="#pseudo-classes"><em>pseudo-classes</em></a>, et <em><a href="#pseudo-éléments">pseudo-éléments</a></em> listés ci-dessous. La syntaxe des <em>valeurs</em> dépend du type de données attendu pour chaque <em>propriété</em> indiquée.</p>
+Voir aussi les [_sélecteurs_](#sélecteurs), [_pseudo-classes_](#pseudo-classes), et _[pseudo-éléments](#pseudo-éléments)_ listés ci-dessous. La syntaxe des _valeurs_ dépend du type de données attendu pour chaque _propriété_ indiquée.
 
-<h4 id="Exemples_de_règle_de_style">Exemples de règle de style</h4>
+#### Exemples de règle de style
 
-<pre class="brush: css">strong {
+```css
+strong {
   color: red;
 }
 
-div.menu-bar li:hover &gt; ul {
+div.menu-bar li:hover > ul {
   display: block;
 }
-</pre>
+```
 
-<p>Pour une introduction à la syntaxe des sélecteurs CSS, consultez <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_syntaxe">ce tutoriel</a>. Soyez conscient que n’importe quelle erreur de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">syntaxe CSS</a> dans une définition de règle l’invalide entièrement. Les règles non validées sont ignorées par le navigateur. Note : les définitions de règles CSS sont intégralement <a href="https://www.w3.org/TR/css-syntax-3/#intro">basées sur du texte</a> (ASCII) alors que DOM-CSS / CSSOM (le système de gestion des règles) est <a href="https://www.w3.org/TR/cssom/#introduction">basé sur des objets</a>.</p>
+Pour une introduction à la syntaxe des sélecteurs CSS, consultez [ce tutoriel](/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_syntaxe). Soyez conscient que n’importe quelle erreur de [syntaxe CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) dans une définition de règle l’invalide entièrement. Les règles non validées sont ignorées par le navigateur. Note : les définitions de règles CSS sont intégralement [basées sur du texte](https://www.w3.org/TR/css-syntax-3/#intro) (ASCII) alors que DOM-CSS / CSSOM (le système de gestion des règles) est [basé sur des objets](https://www.w3.org/TR/cssom/#introduction).
 
-<h3 id="Syntaxe_des_règles"><strong>Syntaxe des règles @</strong></h3>
+### **Syntaxe des règles @**
 
-<p>Comme la structure des règles @ varie grandement, veuillez consulter <a href="/fr/docs/Web/CSS/At-rule">règle @</a> pour trouver la syntaxe que vous souhaitez.</p>
-
-<h2 id="Index_des_mots-clés"><strong>Index des mots-clés</strong></h2>
+Comme la structure des règles @ varie grandement, veuillez consulter [règle @](/fr/docs/Web/CSS/At-rule) pour trouver la syntaxe que vous souhaitez.
 
-<div class="note">
-<p><strong>Note :</strong> Les noms de propriétés de cet index n’incluent <strong>pas</strong> les <a href="/fr/docs/Web/CSS/CSS_Properties_Reference">noms de l’API DOM JavaScript</a> lorsqu’ils sont différents des noms standards CSS.</p>
-</div>
+## **Index des mots-clés**
 
-<p>{{CSS_Ref}}</p>
+> **Note :** Les noms de propriétés de cet index n’incluent **pas** les [noms de l’API DOM JavaScript](/fr/docs/Web/CSS/CSS_Properties_Reference) lorsqu’ils sont différents des noms standards CSS.
 
-<h2 id="Sélecteurs">Sélecteurs</h2>
+{{CSS_Ref}}
 
-<p>Sont indiqués dans ce qui suit les divers <a href="/fr/docs/Web/CSS/CSS_Selectors">sélecteurs</a>, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.</p>
-
-<h3 id="Sélecteurs_simples"><a href="/fr/docs/Web/CSS/CSS_Selectors#les_s%c3%a9lecteurs_simples/fr/docs/web/css/s%c3%a9lecteurs_css">Sélecteurs simples</a></h3>
-
-<p>Les sélecteurs simples sont des sélecteurs fondamentaux. Ce sont les sélecteurs les plus élémentaires qui sont fréquemment combinés pour créer d'autres sélecteurs plus complexes.</p>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Type_selectors">Sélecteur de type</a> <code><var>nomElement</var></code></li>
- <li><a href="/fr/docs/Web/CSS/Class_selectors">Sélecteur de classe</a> <code><strong>.</strong><var>nomClasse</var></code></li>
- <li><a href="/fr/docs/Web/CSS/ID_selectors">Sélecteur d’identifiant</a> <code><strong>#</strong><var>nomID</var></code></li>
- <li><a href="/fr/docs/Web/CSS/Universal_selectors">Sélecteur universel</a> <code><strong>*</strong></code>, <code><var>ns</var><strong>|*</strong></code>, <code><strong>*|*</strong></code>, <code><strong>|*</strong></code></li>
- <li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d’attribut</a> <code><strong>[</strong><var>attr</var><strong>=</strong><var>valeur</var><strong>]</strong></code></li>
-</ul>
-
-<h3 id="Sélecteur_de_groupe">Sélecteur de groupe</h3>
+## Sélecteurs
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Selector_list">Sélecteur de conjonction</a> <code>A, B</code></dt>
- <dd>Indique que les éléments des sélecteurs <code>A</code> et <code>B</code> doivent être sélectionnés. Il s'agit d'une méthode de groupement pour sélectionner des éléments selon plusieurs critères.</dd>
-</dl>
-
-<h3 id="Combinateurs"><a href="/fr/docs/Web/CSS/CSS_Selectors#les_combinateurs">Combinateurs</a></h3>
-
-<p>Les combinateurs sont des sélecteurs qui établissent une relation entre deux sélecteurs ou plus, tel que "A est un enfant de B" ou "A est adjacent à B".</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Combinateur de voisin direct</a> <code><var>A</var> <strong>+</strong> <var>B</var></code></dt>
- <dd>Indique que les éléments sélectionnés par <code>A</code> et par <code>B</code> ont le même parent et que celui sélectionné par <code>B</code> suit immédiatement celui sélectionné par <code>A</code>.</dd>
- <dt><a href="/fr/docs/Web/CSS/General_sibling_combinator">Combinateur de voisin général</a> <code><var>A</var> <strong>~</strong> <var>B</var></code></dt>
- <dd>Indique que les éléments sélectionnés par <code>A</code> et par <code>B</code> ont le même parent et que celui sélectionné par <code>B</code> suit celui sélectionné par <code>A</code>, mais pas nécessairement immédiatement après lui.</dd>
- <dt><a href="/fr/docs/Web/CSS/Child_combinator">Combinateur d’enfant</a> <code><var>A</var> <strong>&gt;</strong> <var>B</var></code></dt>
- <dd>Indique que l’élément sélectionné par <code>B</code> est un enfant direct de l’élément sélectionné par <code>A</code>.</dd>
- <dt><a href="/fr/docs/Web/CSS/Descendant_combinator">Combinateur de descendant</a> <code><var>A</var> <var>B</var></code></dt>
- <dd>Indique que l’élément sélectionné par <code>B</code> est un descendant de l’élément sélectionné par <code>A</code>, mais n’en est pas nécessairement un enfant direct.</dd>
- <dt><a href="/fr/docs/Web/CSS/Column_combinator">Combinateur de colonne</a> <code><var>A</var> <strong>||</strong> <var>B</var></code> {{Experimental_Inline}}</dt>
- <dd>Indique que l’élément sélectionné par <code>B</code> est situé dans la colonne de table indiquée par <code>A</code>. Les éléments qui s’étendent sur des colonnes multiples sont considérés comme étant membres de chacune de ces colonnes.</dd>
-</dl>
-
-<h3 id="Pseudo">Pseudo</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> <code>:</code></dt>
- <dd>Définit un état spécial pour le ou les éléments ciblés.</dd>
- <dt><a href="/fr/docs/Web/CSS/Pseudo-elements">Pseudo-éléments</a> <code>::</code></dt>
- <dd>Représente des entités qui ne sont pas incluses en HTML.</dd>
-</dl>
-
-<div class="callout">
-<p>See also <a href="https://www.w3.org/TR/selectors/#overview">Selectors in the Selectors Level 4 specification</a>.</p>
-</div>
-
-<h2 id="Concepts">Concepts</h2>
-
-<h3 id="Syntaxe_et_sémantique">Syntaxe et sémantique</h3>
-
-<ul>
- <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Syntaxe CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/At-rule">Règles @ (<em>at-rules</em>)</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade</a></li>
- <li><a href="/fr/docs/Web/CSS/Comments">Commentaires</a></li>
- <li><a href="/fr/docs/Glossary/Descriptor_(CSS)">Descripteurs</a></li>
- <li><a href="/fr/docs/Web/CSS/inheritance">Héritage</a></li>
- <li><a href="/fr/docs/Web/CSS/Shorthand_properties">Propriétés raccourcies</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#sp%c3%a9cificit%c3%a9">Spécificité</a></li>
- <li><a href="/fr/docs/Web/CSS/Value_definition_syntax">Syntaxe de définition des valeurs</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Unités et valeurs CSS</a></li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/actual_value">Valeur réelle</a></li>
- <li><a href="/fr/docs/Web/CSS/computed_value">Valeur calculée</a></li>
- <li><a href="/fr/docs/Web/CSS/initial_value">Valeur initiale</a></li>
- <li><a href="/fr/docs/Web/CSS/resolved_value">Valeur résolue</a></li>
- <li><a href="/fr/docs/Web/CSS/specified_value">Valeur spécifiée</a></li>
- <li><a href="/fr/docs/Web/CSS/used_value">Valeur utilisée</a></li>
-</ul>
-
-<h3 id="Disposition">Disposition</h3>
-
-<ul>
- <li><a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">Contexte de formatage de bloc</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Modèle de boîte</a></li>
- <li><a href="/fr/docs/Web/CSS/Containing_block">Bloc englobant</a></li>
- <li><a href="/fr/docs/Web/CSS/Layout_mode">Modes de disposition</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Fusion des marges</a></li>
- <li><a href="/fr/docs/Web/CSS/Replaced_element">Éléments remplacés</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Contexte d'empilement</a></li>
- <li><a href="/fr/docs/Web/CSS/Visual_formatting_model">Modèle de mise en forme visuelle</a></li>
-</ul>
-
-<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
-
-<h3 id="Principaux_types_dobjets">Principaux types d'objets</h3>
-
-<ul>
- <li>{{DOMxRef("Document.styleSheets")}}</li>
- <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
- <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> (sélecteur et style)</li>
- <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>
- <li>{{DOMxRef("HTMLElement.style")}}</li>
- <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (style uniquement)</li>
- <li>{{DOMxRef("Element.className")}}</li>
- <li>{{DOMxRef("Element.classList")}}</li>
-</ul>
-
-<h3 id="Méthodes_importantes">Méthodes importantes</h3>
-
-<ul>
- <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li>
- <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions">Extensions spécifiques de Mozilla à CSS</a> (préfixées avec <code>-moz-</code>)</li>
- <li><a href="/fr/docs/Web/CSS/WebKit_Extensions">Extensions spécifiques de WebKit à CSS</a> (préfixées pour la plupart avec <code>-webkit-</code>)</li>
- <li><a href="/fr/docs/Web/CSS/Microsoft_Extensions">Extensions spécifiques de Microsoft à CSS</a> (préfixées pour la plupart avec <code>-ms-</code>)</li>
-</ul>
+Sont indiqués dans ce qui suit les divers [sélecteurs](/fr/docs/Web/CSS/CSS_Selectors), qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.
+
+### [Sélecteurs simples](/fr/docs/Web/CSS/CSS_Selectors#les_s%c3%a9lecteurs_simples/fr/docs/web/css/s%c3%a9lecteurs_css)
+
+Les sélecteurs simples sont des sélecteurs fondamentaux. Ce sont les sélecteurs les plus élémentaires qui sont fréquemment combinés pour créer d'autres sélecteurs plus complexes.
+
+- [Sélecteur de type](/fr/docs/Web/CSS/Type_selectors) `nomElement`
+- [Sélecteur de classe](/fr/docs/Web/CSS/Class_selectors) `.nomClasse`
+- [Sélecteur d’identifiant](/fr/docs/Web/CSS/ID_selectors) `#nomID`
+- [Sélecteur universel](/fr/docs/Web/CSS/Universal_selectors) **`*`**, `ns|*`, **`*|*`**, **`|*`**
+- [Sélecteur d’attribut](/fr/docs/Web/CSS/Attribute_selectors) `[attr=valeur]`
+
+### Sélecteur de groupe
+
+- [Sélecteur de conjonction](/fr/docs/Web/CSS/Selector_list) `A, B`
+  - : Indique que les éléments des sélecteurs `A` et `B` doivent être sélectionnés. Il s'agit d'une méthode de groupement pour sélectionner des éléments selon plusieurs critères.
+
+### [Combinateurs](/fr/docs/Web/CSS/CSS_Selectors#les_combinateurs)
+
+Les combinateurs sont des sélecteurs qui établissent une relation entre deux sélecteurs ou plus, tel que "A est un enfant de B" ou "A est adjacent à B".
+
+- [Combinateur de voisin direct](/fr/docs/Web/CSS/Adjacent_sibling_combinator) `A + B`
+  - : Indique que les éléments sélectionnés par `A` et par `B` ont le même parent et que celui sélectionné par `B` suit immédiatement celui sélectionné par `A`.
+- [Combinateur de voisin général](/fr/docs/Web/CSS/General_sibling_combinator) `A ~ B`
+  - : Indique que les éléments sélectionnés par `A` et par `B` ont le même parent et que celui sélectionné par `B` suit celui sélectionné par `A`, mais pas nécessairement immédiatement après lui.
+- [Combinateur d’enfant](/fr/docs/Web/CSS/Child_combinator) `A > B`
+  - : Indique que l’élément sélectionné par `B` est un enfant direct de l’élément sélectionné par `A`.
+- [Combinateur de descendant](/fr/docs/Web/CSS/Descendant_combinator) `A B`
+  - : Indique que l’élément sélectionné par `B` est un descendant de l’élément sélectionné par `A`, mais n’en est pas nécessairement un enfant direct.
+- [Combinateur de colonne](/fr/docs/Web/CSS/Column_combinator) `A || B` {{Experimental_Inline}}
+  - : Indique que l’élément sélectionné par `B` est situé dans la colonne de table indiquée par `A`. Les éléments qui s’étendent sur des colonnes multiples sont considérés comme étant membres de chacune de ces colonnes.
+
+### Pseudo
+
+- [Pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) `:`
+  - : Définit un état spécial pour le ou les éléments ciblés.
+- [Pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) `::`
+  - : Représente des entités qui ne sont pas incluses en HTML.
+
+> **Remarque :**
+>
+> See also [Selectors in the Selectors Level 4 specification](https://www.w3.org/TR/selectors/#overview).
+
+## Concepts
+
+### Syntaxe et sémantique
+
+- [Syntaxe CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured)
+- [Règles @ (_at-rules_)](/fr/docs/Web/CSS/At-rule)
+- [Cascade](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+- [Commentaires](/fr/docs/Web/CSS/Comments)
+- [Descripteurs](</fr/docs/Glossary/Descriptor_(CSS)>)
+- [Héritage](/fr/docs/Web/CSS/inheritance)
+- [Propriétés raccourcies](/fr/docs/Web/CSS/Shorthand_properties)
+- [Spécificité](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#sp%c3%a9cificit%c3%a9)
+- [Syntaxe de définition des valeurs](/fr/docs/Web/CSS/Value_definition_syntax)
+- [Unités et valeurs CSS](/fr/docs/Web/CSS/CSS_Values_and_Units)
+
+### Valeurs
+
+- [Valeur réelle](/fr/docs/Web/CSS/actual_value)
+- [Valeur calculée](/fr/docs/Web/CSS/computed_value)
+- [Valeur initiale](/fr/docs/Web/CSS/initial_value)
+- [Valeur résolue](/fr/docs/Web/CSS/resolved_value)
+- [Valeur spécifiée](/fr/docs/Web/CSS/specified_value)
+- [Valeur utilisée](/fr/docs/Web/CSS/used_value)
+
+### Disposition
+
+- [Contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context)
+- [Modèle de boîte](/fr/docs/Learn/CSS/Building_blocks/The_box_model)
+- [Bloc englobant](/fr/docs/Web/CSS/Containing_block)
+- [Modes de disposition](/fr/docs/Web/CSS/Layout_mode)
+- [Fusion des marges](/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
+- [Éléments remplacés](/fr/docs/Web/CSS/Replaced_element)
+- [Contexte d'empilement](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)
+- [Modèle de mise en forme visuelle](/fr/docs/Web/CSS/Visual_formatting_model)
+
+## DOM-CSS / CSSOM
+
+### Principaux types d'objets
+
+- {{DOMxRef("Document.styleSheets")}}
+- `{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}`
+- `cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}` (sélecteur et style)
+- `cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}`
+- {{DOMxRef("HTMLElement.style")}}
+- `HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}` (style uniquement)
+- {{DOMxRef("Element.className")}}
+- {{DOMxRef("Element.classList")}}
+
+### Méthodes importantes
+
+- {{DOMxRef("CSSStyleSheet.insertRule()")}}
+- {{DOMxRef("CSSStyleSheet.deleteRule()")}}
+
+## Voir aussi
+
+- [Extensions spécifiques de Mozilla à CSS](/fr/docs/Web/CSS/Mozilla_Extensions) (préfixées avec `-moz-`)
+- [Extensions spécifiques de WebKit à CSS](/fr/docs/Web/CSS/WebKit_Extensions) (préfixées pour la plupart avec `-webkit-`)
+- [Extensions spécifiques de Microsoft à CSS](/fr/docs/Web/CSS/Microsoft_Extensions) (préfixées pour la plupart avec `-ms-`)
diff --git a/files/fr/web/css/repeat()/index.md b/files/fr/web/css/repeat()/index.md
index e5657510f3..177611244b 100644
--- a/files/fr/web/css/repeat()/index.md
+++ b/files/fr/web/css/repeat()/index.md
@@ -9,13 +9,14 @@ tags:
   - Web
 translation_of: Web/CSS/repeat()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <code><strong>repeat</strong></code><strong><code>()</code></strong> permet de répéter un fragment d'une liste de pistes. Autrement dit, lorsqu'on a une grille avec de nombreuses lignes/colonnes, cela permet de réutiliser un même motif sur la grille. On a alors des règles plus concises.</p>
+La fonction CSS **`repeat`\*\***`()`\*\* permet de répéter un fragment d'une liste de pistes. Autrement dit, lorsqu'on a une grille avec de nombreuses lignes/colonnes, cela permet de réutiliser un même motif sur la grille. On a alors des règles plus concises.
 
-<p>Cette fonction peut être utilisée par les propriétés CSS {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} relatives aux grilles.</p>
+Cette fonction peut être utilisée par les propriétés CSS {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} relatives aux grilles.
 
-<pre class="brush: css no-line-numbers">/* Valeurs de type &lt;track-repeat&gt; */
+```css
+/* Valeurs de type <track-repeat> */
 repeat(4, 1fr)
 repeat(4, [col-start] 250px [col-end])
 repeat(4, [col-start] 60% [col-end])
@@ -28,7 +29,7 @@ repeat(4, [col-start] fit-content(200px) [col-end])
 repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
 repeat(4, [col-start] min-content [col-middle] max-content [col-end])
 
-/* Valeurs de type &lt;auto-repeat&gt; */
+/* Valeurs de type <auto-repeat> */
 repeat(auto-fill, 250px)
 repeat(auto-fit, 250px)
 repeat(auto-fill, [col-start] 250px [col-end])
@@ -36,53 +37,51 @@ repeat(auto-fit, [col-start] 250px [col-end])
 repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
 repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
 
-/* Valeurs de type &lt;fixed-repeat&gt; */
+/* Valeurs de type <fixed-repeat> */
 repeat(4, 250px)
 repeat(4, [col-start] 250px [col-end])
 repeat(4, [col-start] 60% [col-end])
 repeat(4, [col-start] minmax(100px, 1fr) [col-end])
 repeat(4, [col-start] fit-content(200px) [col-end])
 repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une longueur positive (cf. le type {{cssxref("&lt;length&gt;")}}).</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Un pourcentage (cf. le type {{cssxref("&lt;percentage&gt;")}}) positif qui indique la proportion par rapport à la taille en ligne (c'est-à-dire la dimension qui suit l'axe de lecture) pour les colonnes et par rapport à la taille en bloc (l'axe orthogonal) pour les lignes. Si la taille de la grille est calculée en fonction de la taille des pistes qu'elle contient, <code>&lt;percentage&gt;</code> devra être interprété comme <code>auto</code>. L'agent utilisateur peut ajuster les tailles intrinsèques des pistes pour qu'elles remplissent exactement le conteneur et acroître le moins possible la taille finale de la piste pour qu'elle se rapproche du pourcentage souhaité.</dd>
- <dt><code>&lt;flex&gt;</code></dt>
- <dd>Une dimension positive, exprimée en <code>fr</code>, qui indique le facteur de flexibilité de la piste (cf. le type {{cssxref("&lt;flex&gt;")}}). Chaque piste flexible partage l'espace de façon proportionnelle avec les autres pistes flexibles.</dd>
- <dt><code>max-content</code></dt>
- <dd>Cette valeur représente la contribution maximale des éléments qui occupent la piste.</dd>
- <dt><code>min-content</code></dt>
- <dd>Cette valeur représente la contribution minimale des éléments qui occupent la piste.</dd>
- <dt><code>auto</code></dt>
- <dd>Utilisée comme maximum, cette valeur se comporte comme <code>max-content</code>. Utilisée comme minimum, elle représente la plus grande taille minimale (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des éléments qui occupent la piste.</dd>
- <dt><code>auto-fill</code></dt>
- <dd>Si le conteneur de la grille possède une taille définie ou maximale sur cet axe, alors le moteur répètera autant que possible le motif pour ne pas déborder de la grille. Si répéter le motif implique de déborder de la grille, il n'est répété qu'une fois. Sinon, si le conteneur de la grille possède une taille minimale sur cet axe, on utilisera le moins de répétitions possible pour atteindre ce minimum. Sinon, la liste de piste n'est répétée qu'une seule fois.</dd>
- <dt><code>auto-fit</code></dt>
- <dd>
- <p>Cette valeur se comporte comme <code>auto-fill</code> mais, une fois que les objets sont placés, toutes les pistes répétées qui sont vides sont repliées. Une piste vide est une piste qui ne contient aucun élément ou sur laquelle aucun élément n'intersecte. Toutes les pistes peuvent être repliées si elles sont toutes vides.</p>
-
- <p>Une piste repliée est traitée comme si elle avait une taille de piste de <code>0px</code> (les gouttières sont également repliées de chaque côté).</p>
-
- <p>Afin de calculer le nombre de pistes automatiquement répétées, l'agent utilisateur arrondit la taille de la piste à une valeur non nulle, propre à l'agent utilisateur (par exemple 1 px), afin d'éviter les divisions par zéros.</p>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Syntaxe
+
+### Valeurs
+
+- `<length>`
+  - : Une longueur positive (cf. le type {{cssxref("&lt;length&gt;")}}).
+- `<percentage>`
+  - : Un pourcentage (cf. le type {{cssxref("&lt;percentage&gt;")}}) positif qui indique la proportion par rapport à la taille en ligne (c'est-à-dire la dimension qui suit l'axe de lecture) pour les colonnes et par rapport à la taille en bloc (l'axe orthogonal) pour les lignes. Si la taille de la grille est calculée en fonction de la taille des pistes qu'elle contient, `<percentage>` devra être interprété comme `auto`. L'agent utilisateur peut ajuster les tailles intrinsèques des pistes pour qu'elles remplissent exactement le conteneur et acroître le moins possible la taille finale de la piste pour qu'elle se rapproche du pourcentage souhaité.
+- `<flex>`
+  - : Une dimension positive, exprimée en `fr`, qui indique le facteur de flexibilité de la piste (cf. le type {{cssxref("&lt;flex&gt;")}}). Chaque piste flexible partage l'espace de façon proportionnelle avec les autres pistes flexibles.
+- `max-content`
+  - : Cette valeur représente la contribution maximale des éléments qui occupent la piste.
+- `min-content`
+  - : Cette valeur représente la contribution minimale des éléments qui occupent la piste.
+- `auto`
+  - : Utilisée comme maximum, cette valeur se comporte comme `max-content`. Utilisée comme minimum, elle représente la plus grande taille minimale (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des éléments qui occupent la piste.
+- `auto-fill`
+  - : Si le conteneur de la grille possède une taille définie ou maximale sur cet axe, alors le moteur répètera autant que possible le motif pour ne pas déborder de la grille. Si répéter le motif implique de déborder de la grille, il n'est répété qu'une fois. Sinon, si le conteneur de la grille possède une taille minimale sur cet axe, on utilisera le moins de répétitions possible pour atteindre ce minimum. Sinon, la liste de piste n'est répétée qu'une seule fois.
+- `auto-fit`
+
+  - : Cette valeur se comporte comme `auto-fill` mais, une fois que les objets sont placés, toutes les pistes répétées qui sont vides sont repliées. Une piste vide est une piste qui ne contient aucun élément ou sur laquelle aucun élément n'intersecte. Toutes les pistes peuvent être repliées si elles sont toutes vides.
+
+    Une piste repliée est traitée comme si elle avait une taille de piste de `0px` (les gouttières sont également repliées de chaque côté).
+
+    Afin de calculer le nombre de pistes automatiquement répétées, l'agent utilisateur arrondit la taille de la piste à une valeur non nulle, propre à l'agent utilisateur (par exemple 1 px), afin d'éviter les divisions par zéros.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   display: grid;
   grid-template-columns: repeat(2, 50px 1fr) 100px;
   grid-gap: 5px;
@@ -93,55 +92,44 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
   padding: 10px;
 }
 
-#container &gt; div {
+#container > div {
   background-color: #8ca0ff;
   padding: 5px;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;
+```html
+<div id="container">
+  <div>
     Un élément qui mesure 50 pixels de large.
-  &lt;/div&gt;
-  &lt;div&gt;
+  </div>
+  <div>
     Un élément avec une largeur flexible.
-  &lt;/div&gt;
-  &lt;div&gt;
+  </div>
+  <div>
     Un élément qui mesure 50 pixels de large.
-  &lt;/div&gt;
-  &lt;div&gt;
+  </div>
+  <div>
     Un élément avec une largeur flexible.
-  &lt;/div&gt;
-  &lt;div&gt;
+  </div>
+  <div>
     Un élément non-flexible qui mesure 100 pixels de large.
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}</td>
-   <td>{{Spec2("CSS Grid")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.grid-template-columns.repeat")}}</p>
+  </div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Example", "100%", 200)}}
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}} | {{Spec2("CSS Grid")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.grid-template-columns.repeat")}}
diff --git a/files/fr/web/css/replaced_element/index.md b/files/fr/web/css/replaced_element/index.md
index 28903fbcc6..a00bf33db0 100644
--- a/files/fr/web/css/replaced_element/index.md
+++ b/files/fr/web/css/replaced_element/index.md
@@ -7,57 +7,49 @@ tags:
 translation_of: Web/CSS/Replaced_element
 original_slug: Web/CSS/Élément_remplacé
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>En CSS, un <strong>élément remplacé</strong> est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.</p>
+En CSS, un **élément remplacé** est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.
 
-<p>Autrement dit, ces éléments sont des éléments dont le contenu n'est pas impacté par les styles du document. La position de l'élément remplacé peut être modifiée avec CSS mais le contenu même de l'élément ne pourra pas être modifiée. Certains éléments remplacés comme {{HTMLElement("iframe")}} peuvent avoir leurs propres feuilles de styles mais ils n'héritent pas de celles du document parent.</p>
+Autrement dit, ces éléments sont des éléments dont le contenu n'est pas impacté par les styles du document. La position de l'élément remplacé peut être modifiée avec CSS mais le contenu même de l'élément ne pourra pas être modifiée. Certains éléments remplacés comme {{HTMLElement("iframe")}} peuvent avoir leurs propres feuilles de styles mais ils n'héritent pas de celles du document parent.
 
-<h2 id="Éléments_remplacés">Éléments remplacés</h2>
+## Éléments remplacés
 
-<p>Les éléments remplacés caractéristiques sont :</p>
+Les éléments remplacés caractéristiques sont :
 
-<ul>
- <li>{{HTMLElement("img")}},</li>
- <li>{{HTMLElement("object")}},</li>
- <li>{{HTMLElement("video")}},</li>
- <li>{{HTMLElement("iframe")}}</li>
- <li>les éléments {{HTMLElement("input")}} de type image</li>
-</ul>
+- {{HTMLElement("img")}},
+- {{HTMLElement("object")}},
+- {{HTMLElement("video")}},
+- {{HTMLElement("iframe")}}
+- les éléments {{HTMLElement("input")}} de type image
 
-<p>Par ailleurs, certains éléments comme :</p>
+Par ailleurs, certains éléments comme :
 
-<ul>
- <li>{{HTMLElement("option")}}</li>
- <li>{{HTMLElement("audio")}}</li>
- <li>{{HTMLElement("canvas")}}</li>
- <li>{{HTMLElement("object")}}</li>
- <li>{{HTMLElement("applet")}}</li>
-</ul>
+- {{HTMLElement("option")}}
+- {{HTMLElement("audio")}}
+- {{HTMLElement("canvas")}}
+- {{HTMLElement("object")}}
+- {{HTMLElement("applet")}}
 
-<p>sont des éléments remplacés dans certains cas spécifiques. De même un élément {{HTMLElement("input")}} peut être un élément remplacé dans certains cas (lorsqu'il est de type <code>"image"</code> notamment).</p>
+sont des éléments remplacés dans certains cas spécifiques. De même un élément {{HTMLElement("input")}} peut être un élément remplacé dans certains cas (lorsqu'il est de type `"image"` notamment).
 
-<p>Les objets insérés grâce aux propriétés CSS {{cssxref("content")}} sont des <em>éléments remplacés anonymes</em> (on les qualifie d'anonymes car ils n'existent pas dans la structure du HTML).</p>
+Les objets insérés grâce aux propriétés CSS {{cssxref("content")}} sont des _éléments remplacés anonymes_ (on les qualifie d'anonymes car ils n'existent pas dans la structure du HTML).
 
-<h2 id="Utiliser_CSS_avec_les_éléments_remplacés">Utiliser CSS avec les éléments remplacés</h2>
+## Utiliser CSS avec les éléments remplacés
 
-<p>Les éléments remplacés sont manipulés de façon spécifique par le moteur CSS, notamment pour le calcul des marges extérieures et certaines valeurs <code>auto</code>.</p>
+Les éléments remplacés sont manipulés de façon spécifique par le moteur CSS, notamment pour le calcul des marges extérieures et certaines valeurs `auto`.
 
-<p>On notera que certains éléments remplacés ont des dimensions intrinsèques ou une ligne de base définie, qui sont utilisées par des propriétés CSS comme {{cssxref("vertical-align")}}.</p>
+On notera que certains éléments remplacés ont des dimensions intrinsèques ou une ligne de base définie, qui sont utilisées par des propriétés CSS comme {{cssxref("vertical-align")}}.
 
-<h3 id="Contrôler_la_position_des_objets_au_sein_de_la_boîte_de_contenu">Contrôler la position des objets au sein de la boîte de contenu</h3>
+### Contrôler la position des objets au sein de la boîte de contenu
 
-<p>Certaines propriétés CSS permettent d'indiquer la façon dont l'objet contenu dans l'élément remplacé doit occuper la boîte de l'élément. Ces propriétés sont définies dans les spécifications {{SpecName("CSS3 Images")}} et {{SpecName("CSS4 Images")}} :</p>
+Certaines propriétés CSS permettent d'indiquer la façon dont l'objet contenu dans l'élément remplacé doit occuper la boîte de l'élément. Ces propriétés sont définies dans les spécifications {{SpecName("CSS3 Images")}} et {{SpecName("CSS4 Images")}} :
 
-<dl>
- <dt>{{cssxref("object-fit")}}</dt>
- <dd>Indique la façon dont le contenu de l'élément remplacé doit s'inscrire dans la boîte de l'élément et comment il doit être redimensionné si besoin.</dd>
- <dt>{{cssxref("object-position")}}</dt>
- <dd>Indique l'alignement du contenu de l'élément remplacé dans la boîte de l'élément.</dd>
-</dl>
+- {{cssxref("object-fit")}}
+  - : Indique la façon dont le contenu de l'élément remplacé doit s'inscrire dans la boîte de l'élément et comment il doit être redimensionné si besoin.
+- {{cssxref("object-position")}}
+  - : Indique l'alignement du contenu de l'élément remplacé dans la boîte de l'élément.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements">Spécification HTML sur les éléments remplacés</a></li>
-</ul>
+- [Spécification HTML sur les éléments remplacés](https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements)
diff --git a/files/fr/web/css/resize/index.md b/files/fr/web/css/resize/index.md
index e2cde42faa..4a28c415f3 100644
--- a/files/fr/web/css/resize/index.md
+++ b/files/fr/web/css/resize/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/resize
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>resize</code></strong> permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.</p>
+La propriété **`resize`** permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.
 
-<div>{{EmbedInteractiveExample("pages/css/resize.html")}}</div>
+{{EmbedInteractiveExample("pages/css/resize.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 resize: none;
 resize: both;
 resize: horizontal;
@@ -27,63 +28,63 @@ resize: inline;
 resize: inherit;
 resize: initial;
 resize: unset;
-</pre>
-
-<p>La propriété <code>resize</code> peut être définie avec l'un des mots-clés suivants.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>L'élément n'offre aucune méthode à l'utilisateur pour que celui-ci le redimensionne.</dd>
- <dt><code>both</code></dt>
- <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.</dd>
- <dt><code>horizontal</code></dt>
- <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).</dd>
- <dt><code>vertical</code></dt>
- <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).</dd>
- <dt><code>block</code> {{experimental_inline}}</dt>
- <dd>Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc.</dd>
- <dt><code>inline</code> {{experimental_inline}}</dt>
- <dd>Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.</dd>
-</dl>
-
-<div class="note">
-  <p><strong>Note :</strong> <code>resize</code> ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut <code>visible</code>.</p>
-</div>
+```
+
+La propriété `resize` peut être définie avec l'un des mots-clés suivants.
+
+### Valeurs
+
+- `none`
+  - : L'élément n'offre aucune méthode à l'utilisateur pour que celui-ci le redimensionne.
+- `both`
+  - : L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.
+- `horizontal`
+  - : L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).
+- `vertical`
+  - : L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).
+- `block` {{experimental_inline}}
+  - : Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc.
+- `inline` {{experimental_inline}}
+  - : Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+> **Note :** `resize` ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut `visible`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Désactiver_le_redimensionnement_des_éléments_textarea">Désactiver le redimensionnement des éléments <code>textarea</code></h3>
+### Désactiver le redimensionnement des éléments `textarea`
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<p>Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :</p>
+Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :
 
-<pre class="brush: css">textarea.exemple {
+```css
+textarea.exemple {
   resize: none;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;textarea class="exemple"&gt;Saisir du texte ici.&lt;/textarea&gt;</pre>
+```html
+<textarea class="exemple">Saisir du texte ici.</textarea>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Désactiver_le_redimensionnement_des_éléments_textarea","200","100")}}</p>
+{{EmbedLiveSample("Désactiver_le_redimensionnement_des_éléments_textarea","200","100")}}
 
-<h3 id="Utiliser_resize_sur_des_éléments_quelconques">Utiliser <code>resize</code> sur des éléments quelconques</h3>
+### Utiliser `resize` sur des éléments quelconques
 
-<p>La propriété <code>resize</code> peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte {{HTMLElement("div")}} redimensionnable qui contient un paragraphe (({{HTMLElement("p")}}) lui-même redimensionnable) :</p>
+La propriété `resize` peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte {{HTMLElement("div")}} redimensionnable qui contient un paragraphe (({{HTMLElement("p")}}) lui-même redimensionnable) :
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.redimensionnable {
+```css
+.redimensionnable {
   resize: both;
   overflow: scroll;
   border: 1px solid black;
@@ -98,54 +99,36 @@ p {
   height: 200px;
   width: 200px;
 }
-</pre>
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="redimensionnable"&gt;
-  &lt;p class="redimensionnable"&gt;
+```html
+<div class="redimensionnable">
+  <p class="redimensionnable">
     Ce paragraphe peut être redimensionné car la propriété
     CSS resize vaut 'both' sur cet élément.
-  &lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Utiliser_resize_sur_des_éléments_quelconques","450","450")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Logical Properties', '#resize', 'resize')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>Ajout des valeurs <code>block</code> et <code>inline</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.resize")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{HTMLElement("textarea")}}</li>
-</ul>
+  </p>
+</div>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Utiliser_resize_sur_des_éléments_quelconques","450","450")}}
+
+## Spécifications
+
+| Spécification                                                                    | Statut                                           | Commentaires                           |
+| -------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------- |
+| {{SpecName('CSS Logical Properties', '#resize', 'resize')}} | {{Spec2('CSS Logical Properties')}} | Ajout des valeurs `block` et `inline`. |
+| {{SpecName('CSS3 Basic UI', '#resize', 'resize')}}             | {{Spec2('CSS3 Basic UI')}}             | Définition initiale.                   |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.resize")}}
+
+## Voir aussi
+
+- {{HTMLElement("textarea")}}
diff --git a/files/fr/web/css/resolution/index.md b/files/fr/web/css/resolution/index.md
index 46e7ea706a..f386c2c3c2 100644
--- a/files/fr/web/css/resolution/index.md
+++ b/files/fr/web/css/resolution/index.md
@@ -7,57 +7,56 @@ tags:
   - Type
 translation_of: Web/CSS/resolution
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée CSS <strong><code>&lt;resolution&gt;</code></strong>, utilisé dans les <em><a href="/fr/docs/Web/CSS/Media_Queries">media queries</a></em>, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.</p>
+Le type de donnée CSS **`<resolution>`**, utilisé dans les _[media queries](/fr/docs/Web/CSS/Media_Queries)_, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.
 
-<p>Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.</p>
+Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une valeur de ce type sera composée d'un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) immédiatement suivi d'une unité de résolution (<code>dpi</code>, <code>dpcm</code>, …). Comme pour les autres dimensions CSS, il n'y a aucun espace entre la valeur numérique et l'unité.</p>
+Une valeur de ce type sera composée d'un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) immédiatement suivi d'une unité de résolution (`dpi`, `dpcm`, …). Comme pour les autres dimensions CSS, il n'y a aucun espace entre la valeur numérique et l'unité.
 
-<p>Bien que toutes les unités représentent la même chose pour la valeur <code>0</code>, l'unité ne peut être omise dans ce cas puisque ce n'est pas une donnée de type {{cssxref("&lt;length&gt;")}} : <code>0</code> est invalide et ne représente pas <code>0dpi</code>, <code>0dpcm</code>, ni <code>0dppx</code>.</p>
+Bien que toutes les unités représentent la même chose pour la valeur `0`, l'unité ne peut être omise dans ce cas puisque ce n'est pas une donnée de type {{cssxref("&lt;length&gt;")}} : `0` est invalide et ne représente pas `0dpi`, `0dpcm`, ni `0dppx`.
 
-<h3 id="Unités">Unités</h3>
+### Unités
 
-<dl>
- <dt><code>dpi</code></dt>
- <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce">points par pouce</a>. Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, <code>1 dpi ≈ 0,39 dpcm</code>.</dd>
- <dt><code>dpcm</code></dt>
- <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce#Tableau_de_conversion">points par centimètre</a>. Puisque 1 pouce équivaut à 2.54 cm, <code>1dpcm ≈ 2,54 dpi</code>.</dd>
- <dt><code>dppx</code></dt>
- <dd>Cette unité représente le nombre de points par unité CSS <code>px</code>. Puisque le ratio entre les unités CSS <code>in</code> et CSS <code>px</code> vaut 1:96, <code>1 dppx</code> est équivalent à <code>96 dpi</code>, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.</dd>
- <dt><code>x</code></dt>
- <dd>Un alias pour <code>dppx</code>.</dd>
-</dl>
+- `dpi`
+  - : Cette unité représente le nombre de [points par pouce](https://fr.wikipedia.org/wiki/Point_par_pouce). Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, `1 dpi ≈ 0,39 dpcm`.
+- `dpcm`
+  - : Cette unité représente le nombre de [points par centimètre](https://fr.wikipedia.org/wiki/Point_par_pouce#Tableau_de_conversion). Puisque 1 pouce équivaut à 2.54 cm, `1dpcm ≈ 2,54 dpi`.
+- `dppx`
+  - : Cette unité représente le nombre de points par unité CSS `px`. Puisque le ratio entre les unités CSS `in` et CSS `px` vaut 1:96, `1 dppx` est équivalent à `96 dpi`, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.
+- `x`
+  - : Un alias pour `dppx`.
 
-<div class="note">
-<p><strong>Note :</strong> Bien que le nombre <code>0</code> représente la même mesure pour ces différentes unités. Si la valeur est écrite sans unité, elle sera considérée comme invalide. Autrement dit, <code>0</code> est invalide et ne représente pas <code>0dpi</code>, <code>0dpcm</code> ou <code>0dppx</code>.</p>
-</div>
+> **Note :** Bien que le nombre `0` représente la même mesure pour ces différentes unités. Si la valeur est écrite sans unité, elle sera considérée comme invalide. Autrement dit, `0` est invalide et ne représente pas `0dpi`, `0dpcm` ou `0dppx`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Usage_correct">Usage correct</h3>
+### Usage correct
 
-<p>Voici quelques exemples d'utilisation correcte de données de type <code>&lt;resolution&gt;</code> :</p>
+Voici quelques exemples d'utilisation correcte de données de type `<resolution>` :
 
-<pre class="brush: css">96dpi                                              Usage correct : un {{cssxref("&lt;number&gt;")}} (ici un {{cssxref("&lt;integer&gt;")}}) suivi d'une unité.
-@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">media query</a>.
-</pre>
+```css
+96dpi                                              Usage correct : un {{cssxref("&lt;number&gt;")}} (ici un {{cssxref("&lt;integer&gt;")}}) suivi d'une unité.
+@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une media query.
+```
 
-<h3 id="Usages_incorrects">Usages incorrects</h3>
+### Usages incorrects
 
-<pre class="brush: css">72 dpi    Incorrect : les espaces ne sont pas acceptés entre le {{cssxref("&lt;number&gt;")}} et l'unité.
+```css
+72 dpi    Incorrect : les espaces ne sont pas acceptés entre le {{cssxref("&lt;number&gt;")}} et l'unité.
 ten dpi   Incorrect : seules des expressions numériques sont acceptées.
 0         Incorrect : l'unité ne peut être omise que pour l'expression de la valeur 0 de type {{cssxref("&lt;length&gt;")}}.
-</pre>
+```
 
-<h3 id="Exemple_appliqué">Exemple appliqué</h3>
+### Exemple appliqué
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">/* Saurez-vous trouver votre résolution en dpi */
+```css
+/* Saurez-vous trouver votre résolution en dpi */
 /* via l'exemple live ?                        */
 @media screen and (min-resolution: 100dpi) {
   .exemple {
@@ -70,56 +69,35 @@ ten dpi   Incorrect : seules des expressions numériques sont acceptées.
     background-color: orange;
   }
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   À ces mots le Chapelier ouvrit de grands yeux ; mais
   il se contenta de dire : « Pourquoi une pie
   ressemble-t-elle à un pupitre ? »
-&lt;/p&gt;</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Exemple_appliqué","200","200")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#resolution', '&lt;resolution&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td>Ajout de l'unité <code>x</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Ajout de l'unité <code>dppx</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}}</td>
-   <td>{{Spec2('CSS3 Media Queries')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.resolution")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Media_Queries">Les <em>media queries</em> CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/@media/resolution">La caractéristique média <code>resolution</code></a></li>
-</ul>
+</p>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Exemple_appliqué","200","200")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires             |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------ |
+| {{SpecName('CSS4 Values', '#resolution', '&lt;resolution&gt;')}}             | {{Spec2('CSS4 Values')}}         | Ajout de l'unité `x`.    |
+| {{SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;')}}             | {{Spec2('CSS3 Values')}}         | Ajout de l'unité `dppx`. |
+| {{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale.     |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.resolution")}}
+
+## Voir aussi
+
+- [Les _media queries_ CSS](/fr/docs/Web/CSS/Media_Queries)
+- [La caractéristique média `resolution`](/fr/docs/Web/CSS/@media/resolution)
diff --git a/files/fr/web/css/resolved_value/index.md b/files/fr/web/css/resolved_value/index.md
index 54123bb7dc..35dd522511 100644
--- a/files/fr/web/css/resolved_value/index.md
+++ b/files/fr/web/css/resolved_value/index.md
@@ -7,35 +7,20 @@ tags:
 translation_of: Web/CSS/resolved_value
 original_slug: Web/CSS/valeur_résolue
 ---
-<div>{{cssref}}</div>
+{{cssref}}
 
-<p>La <strong>valeur résolue</strong> d'une propriété CSS est la valeur renvoyée par {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Pour la plupart des propriétés, il s'agit de <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> mais pour un tout petit nombre d'anciennes propriétés (dont {{cssxref("width")}} et {{cssxref("height")}}), il s'agit par contre de <a href="/fr/docs/Web/CSS/Valeur_utilisée">la valeur utilisée</a>. Voir le lien vers la spécification ci-dessous pour des détails plus précis en fonction de chaque propriété.</p>
+La **valeur résolue** d'une propriété CSS est la valeur renvoyée par {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Pour la plupart des propriétés, il s'agit de [la valeur calculée](/fr/docs/Web/CSS/Valeur_calcul%C3%A9e) mais pour un tout petit nombre d'anciennes propriétés (dont {{cssxref("width")}} et {{cssxref("height")}}), il s'agit par contre de [la valeur utilisée](/fr/docs/Web/CSS/Valeur_utilisée). Voir le lien vers la spécification ci-dessous pour des détails plus précis en fonction de chaque propriété.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSSOM", "#resolved-values", "resolved value")}}</td>
-   <td>{{Spec2("CSSOM")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                     | Commentaires        |
+| -------------------------------------------------------------------------------- | ------------------------ | ------------------- |
+| {{SpecName("CSSOM", "#resolved-values", "resolved value")}} | {{Spec2("CSSOM")}} | Définition initiale |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("window.getComputedStyle")}}</li>
- <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La valeur initiale</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e">La valeur définie</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">La valeur calculée</a></li>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
-</ul>
+- {{domxref("window.getComputedStyle")}}
+- [La valeur initiale](/fr/docs/Web/CSS/Valeur_initiale)
+- [La valeur définie](/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e)
+- [La valeur calculée](/fr/docs/Web/CSS/Valeur_calcul%C3%A9e)
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
diff --git a/files/fr/web/css/revert/index.md b/files/fr/web/css/revert/index.md
index def309ccef..98e1f9dd4a 100644
--- a/files/fr/web/css/revert/index.md
+++ b/files/fr/web/css/revert/index.md
@@ -8,50 +8,46 @@ tags:
   - Reference
 translation_of: Web/CSS/revert
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le mot-clé <strong><code>revert</code></strong> permet de <em>remonter</em> la cascade afin que la propriété puisse prendre la valeur qui aurait été utilisée sans mise en forme particulière (la valeur qu'elle aurait eu sans mise en forme appliquée par la feuille de style de l'auteur, de l'utilisateur ou de l'agent utilisateur). Ainsi, si la propriété hérite de son parent, elle prendra la valeur héritée et sinon la valeur par défaut de l'agent utilisateur (ou de la feuille de style utilisateur).</p>
+Le mot-clé **`revert`** permet de _remonter_ la cascade afin que la propriété puisse prendre la valeur qui aurait été utilisée sans mise en forme particulière (la valeur qu'elle aurait eu sans mise en forme appliquée par la feuille de style de l'auteur, de l'utilisateur ou de l'agent utilisateur). Ainsi, si la propriété hérite de son parent, elle prendra la valeur héritée et sinon la valeur par défaut de l'agent utilisateur (ou de la feuille de style utilisateur).
 
-<p>Cette valeur peut être utilisée pour n'importe quelle propriété CSS, y compris la propriété raccourcie {{cssxref("all")}}.</p>
+Cette valeur peut être utilisée pour n'importe quelle propriété CSS, y compris la propriété raccourcie {{cssxref("all")}}.
 
-<p>La remontée de la cascade sera plus ou moins prononcée selon l'endroit où est utilisé <code>revert</code> :</p>
+La remontée de la cascade sera plus ou moins prononcée selon l'endroit où est utilisé `revert` :
 
-<ul>
- <li>Si <code>revert</code> est utilisé dans une feuille de style d'un site, ce sera la valeur définie dans la feuille de style de l'utilisateur qui sera utilisée ou celle de l'agent utilisateur par défaut sinon.</li>
- <li>Si <code>revert</code> est utilisé dans une feuille de style utilisateur ou si le style a été appliqué par l'utilisateur, <code>revert</code> entraînera l'utilisation de la valeur par défaut de l'agent utilisateur.</li>
- <li>Si <code>revert</code> est utilisé comme style par défaut de l'agent utilisateur, il aura un comportement équivalent à {{cssxref("unset")}}</li>
-</ul>
+- Si `revert` est utilisé dans une feuille de style d'un site, ce sera la valeur définie dans la feuille de style de l'utilisateur qui sera utilisée ou celle de l'agent utilisateur par défaut sinon.
+- Si `revert` est utilisé dans une feuille de style utilisateur ou si le style a été appliqué par l'utilisateur, `revert` entraînera l'utilisation de la valeur par défaut de l'agent utilisateur.
+- Si `revert` est utilisé comme style par défaut de l'agent utilisateur, il aura un comportement équivalent à {{cssxref("unset")}}
 
-<p>Le mot-clé <code>revert</code> fonctionne comme <code>unset</code> pour de nombreux cas. Les seules différences observables se produisent quand les valeurs sont définies par le navigateur ou dans une feuille de style utilisateur.</p>
+Le mot-clé `revert` fonctionne comme `unset` pour de nombreux cas. Les seules différences observables se produisent quand les valeurs sont définies par le navigateur ou dans une feuille de style utilisateur.
 
-<p><code>revert</code> n'aura pas d'effet sur les éléments fils de l'élément ciblé (mais supprimera l'effet d'une règle du parent qui s'appliquerait indirectement aux enfants).</p>
+`revert` n'aura pas d'effet sur les éléments fils de l'élément ciblé (mais supprimera l'effet d'une règle du parent qui s'appliquerait indirectement aux enfants).
 
-<div class="note">
-<p><strong>Note :</strong> <code>revert</code> est une simple valeur, il est toujours possible de la surcharger par une autre avec une règle d'une <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">spécificité</a> supérieure.</p>
-</div>
+> **Note :** `revert` est une simple valeur, il est toujours possible de la surcharger par une autre avec une règle d'une [spécificité](/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité) supérieure.
 
-<div class="note">
-<p><strong>Note :</strong> Le mot-clé <code>revert</code> est différent de {{cssxref("initial")}} et ne doit pas être confondu avec ce dernier. {{cssxref("initial")}} utilise <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a>, définie pour chaque propriété par les spécifications CSS. En revanche, les feuilles de style des agents utilisateurs définissent des valeurs par défaut selon les sélecteurs CSS. Par exemple, <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> de {{cssxref("display")}} est <code>inline</code> mais un agent utilisateur pourra définir les valeurs par défaut suivante dans sa feuille de style : <code>block</code> pour {{HTMLElement("div")}}, <code>table</code> pour {{HTMLElement("table")}} etc.</p>
-</div>
+> **Note :** Le mot-clé `revert` est différent de {{cssxref("initial")}} et ne doit pas être confondu avec ce dernier. {{cssxref("initial")}} utilise [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale), définie pour chaque propriété par les spécifications CSS. En revanche, les feuilles de style des agents utilisateurs définissent des valeurs par défaut selon les sélecteurs CSS. Par exemple, [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) de {{cssxref("display")}} est `inline` mais un agent utilisateur pourra définir les valeurs par défaut suivante dans sa feuille de style : `block` pour {{HTMLElement("div")}}, `table` pour {{HTMLElement("table")}} etc.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;section&gt;
-  &lt;p&gt;Voici une section !&lt;/p&gt;
+```html
+<section>
+  <p>Voici une section !</p>
 
-  &lt;aside class="widget"&gt;
-    &lt;p&gt;Et un petit widget.&lt;/p&gt;
-  &lt;/aside&gt;
-&lt;/section&gt;
-</pre>
+  <aside class="widget">
+    <p>Et un petit widget.</p>
+  </aside>
+</section>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">section p {
+```css
+section p {
   color: blue;
   font-family: sans-serif;
   font-weight: bold;
@@ -59,83 +55,93 @@ translation_of: Web/CSS/revert
 
 .widget p {
   all: revert;
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_simple')}}</p>
+{{EmbedLiveSample('Exemple_simple')}}
 
-<h3 id="revert_et_unset"><code>revert</code> et <code>unset</code></h3>
+### `revert` et `unset`
 
-<p>Bien que <code>revert</code> et <code>unset</code> soient semblables, il y a quelques différences pour certaines propriétés de certains éléments.</p>
+Bien que `revert` et `unset` soient semblables, il y a quelques différences pour certaines propriétés de certains éléments.
 
-<p>Dans l'exemple qui suit, on indique une valeur spécifique pour <code>font-weight</code> au niveau de la feuille de style globale sur laquelle on revient avec <code>unset</code> et <code>revert</code>. <code>unset</code> conservera un texte normal car c'est la valeur initiale pour <code>font-weight</code> tandis que <code>revert</code> rendra le texte en gras car c'est la valeur par défaut pour les titres pour la plupart des navigateurs.</p>
+Dans l'exemple qui suit, on indique une valeur spécifique pour `font-weight` au niveau de la feuille de style globale sur laquelle on revient avec `unset` et `revert`. `unset` conservera un texte normal car c'est la valeur initiale pour `font-weight` tandis que `revert` rendra le texte en gras car c'est la valeur par défaut pour les titres pour la plupart des navigateurs.
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">h3 {
+```css
+h3 {
   font-weight: normal;
   color: blue;
-}</pre>
+}
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h3 style="font-weight: unset; color: unset;"&gt;
+```html
+<h3 style="font-weight: unset; color: unset;">
   Ceci aura toujours font-weight: normal mais color: black
-&lt;/h3&gt;
-&lt;p&gt;
+</h3>
+<p>
   Juste un peu de texte
-&lt;/p&gt;
-&lt;h3 style="font-weight: revert; color: revert;"&gt;
+</p>
+<h3 style="font-weight: revert; color: revert;">
   Ceci devrait avoir font-weight: bold (la valeur originale)
   et color: black
-&lt;/h3&gt;
-&lt;p&gt;
+</h3>
+<p>
  Juste un peu de texte
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('revert_et_unset')}}</p>
+{{EmbedLiveSample('revert_et_unset')}}
 
-<h3 id="all"><code>all</code></h3>
+### `all`
 
-<p>Revenir sur toutes les valeurs peut s'avérer utile lorsqu'on veut annuler l'effet de modifications lourdes. Si on poursuit avec l'exemple précédent, plutôt que de revenir séparément sur <code>font-weight</code> et <code>color</code>, on utilise <code>all</code> à la place.</p>
+Revenir sur toutes les valeurs peut s'avérer utile lorsqu'on veut annuler l'effet de modifications lourdes. Si on poursuit avec l'exemple précédent, plutôt que de revenir séparément sur `font-weight` et `color`, on utilise `all` à la place.
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">h3 {
+```css
+h3 {
   font-weight: normal;
   color: blue;
   border-bottom: 1px solid grey;
-}</pre>
+}
+```
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h3&gt;
+```html
+<h3>
   Un style spécifique
-&lt;/h3&gt;
-&lt;p&gt;
+</h3>
+<p>
   Juste un peu de texte
-&lt;/p&gt;
-&lt;h3 style="all: revert"&gt;
+</p>
+<h3 style="all: revert">
   Retour aux réglages par défaut pour toutes les propriétés
-&lt;/h3&gt;
-&lt;p&gt;
+</h3>
+<p>
   Juste un peu de texte
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('all')}}</p>
+{{EmbedLiveSample('all')}}
 
-<h3 id="Revenir_sur_une_propriété_du_parent">Revenir sur une propriété du parent</h3>
+### Revenir sur une propriété du parent
 
-<p>Utiliser <code>revert</code> annule la valeur d'une propriété pour le seul élément ciblé. Pour illustrer ce principe, nous utiliserons une couleur verte pour une section et rouge pour un paragraphe.</p>
+Utiliser `revert` annule la valeur d'une propriété pour le seul élément ciblé. Pour illustrer ce principe, nous utiliserons une couleur verte pour une section et rouge pour un paragraphe.
 
-<h4 id="CSS_4">CSS</h4>
+#### CSS
 
-<pre class="brush: css">section {
+```css
+section {
   color: darkgreen;
 }
 p {
@@ -144,55 +150,42 @@ p {
 section.with-revert {
   color: revert;
 }
-</pre>
+```
 
-<h4 id="HTML_4">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;section&gt;
-  &lt;h3&gt;Ce texte sera vert foncé&lt;/h3&gt;
-  &lt;p&gt;Ce texte sera rouge.&lt;/p&gt;
+```html
+<section>
+  <h3>Ce texte sera vert foncé</h3>
+  <p>Ce texte sera rouge.</p>
   Ce texte sera aussi vert.
-&lt;/section&gt;
-&lt;section class="with-revert"&gt;
-  &lt;h3&gt;Ce texte sera noir&lt;/h3&gt;
-  &lt;p&gt;Ce texte sera rouge.&lt;/p&gt;
+</section>
+<section class="with-revert">
+  <h3>Ce texte sera noir</h3>
+  <p>Ce texte sera rouge.</p>
   Ce texte sera aussi noir.
-&lt;/section&gt;</pre>
+</section>
+```
 
-<p>On voit ici que le paragraphe reste en rouge malgré l'utilisation de <code>revert</code> pour la section. On voit également que le titre et le nœud texte de la deuxième section sont en noir : comme si <code>section { color: darkgreen }</code> n'existait pas pour cette section.</p>
+On voit ici que le paragraphe reste en rouge malgré l'utilisation de `revert` pour la section. On voit également que le titre et le nœud texte de la deuxième section sont en noir : comme si `section { color: darkgreen }` n'existait pas pour cette section.
 
-<h4 id="Résultat_4">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Revenir_sur_une_propriété_du_parent')}}</p>
+{{EmbedLiveSample('Revenir_sur_une_propriété_du_parent')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Cascade', '#default', 'revert')}}</td>
-   <td>{{Spec2('CSS4 Cascade')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                        | Statut                           | Commentaires         |
+| -------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Cascade', '#default', 'revert')}} | {{Spec2('CSS4 Cascade')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.global_keywords.revert")}}</p>
+{{Compat("css.types.global_keywords.revert")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("initial")}}</li>
- <li>{{cssxref("inherit")}}</li>
- <li>{{cssxref("unset")}}</li>
- <li>La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou par défaut.</li>
-</ul>
+- {{cssxref("initial")}}
+- {{cssxref("inherit")}}
+- {{cssxref("unset")}}
+- La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou par défaut.
diff --git a/files/fr/web/css/right/index.md b/files/fr/web/css/right/index.md
index 2d1f94619b..206f0785a9 100644
--- a/files/fr/web/css/right/index.md
+++ b/files/fr/web/css/right/index.md
@@ -7,32 +7,31 @@ tags:
   - Reference
 translation_of: Web/CSS/right
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>right</code></strong> définit, en partie, la position des éléments positionnés. La propriété <code>right</code> n'a aucun effet sur les éléments non-positionnés.</p>
+La propriété **`right`** définit, en partie, la position des éléments positionnés. La propriété `right` n'a aucun effet sur les éléments non-positionnés.
 
-<div>{{EmbedInteractiveExample("pages/css/right.html")}}</div>
+{{EmbedInteractiveExample("pages/css/right.html")}}
 
-<p>L'effet de la propriété <code>right</code> dépend de la façon dont l'élément est positionné (c'est-à-dire de la valeur de la propriété {{cssxref("position")}}) :</p>
+L'effet de la propriété `right` dépend de la façon dont l'élément est positionné (c'est-à-dire de la valeur de la propriété {{cssxref("position")}}) :
 
-<ul>
- <li>Quand <code>position</code> vaut <code>absolute</code> ou <code>fixed</code>, <code>right</code> indique la distance entre le bord droit de l'élément et le bord droit du bloc englobant.</li>
- <li>Quand <code>position</code> vaut <code>relative</code>, <code>right</code> indique la distance de laquelle le bord droit de l'élément est décalé vers la gauche par rapport à sa position normale.</li>
- <li>Quand <code>position</code> vaut <code>sticky</code>, <code>right</code> se comporte comme <code>relative</code> lorsque l'élément est à l'intérieur de la zone d'affichage (<em>viewport</em>) et comme <code>fixed</code> lorsque l'élément est en dehors de la zone d'affichage.</li>
- <li>Quand <code>position</code> vaut <code>static</code>, <code>right</code> n'a aucun effet.</li>
-</ul>
+- Quand `position` vaut `absolute` ou `fixed`, `right` indique la distance entre le bord droit de l'élément et le bord droit du bloc englobant.
+- Quand `position` vaut `relative`, `right` indique la distance de laquelle le bord droit de l'élément est décalé vers la gauche par rapport à sa position normale.
+- Quand `position` vaut `sticky`, `right` se comporte comme `relative` lorsque l'élément est à l'intérieur de la zone d'affichage (_viewport_) et comme `fixed` lorsque l'élément est en dehors de la zone d'affichage.
+- Quand `position` vaut `static`, `right` n'a aucun effet.
 
-<p>Lorsque les propriétés <code>right</code> et {{cssxref("left")}} sont définies toutes les deux et que l'élément ne peut pas s'étendre afin de satisfaire ces deux contraintes, la position de l'élément est <em>sur-définie.</em> Dans ce cas, la valeur de {{cssxref("left")}} est prioritaire lorsque le contenant est disposé en lecture de gauche à droite (la valeur calculée de <code>right</code> sera <code>-left</code>), et la valeur de <code>right</code> est prioritaire lorsque le contenant est disposé en lecture de droite à gauche (la valeur calculée de {{cssxref("left")}} sera <code>-right</code>).</p>
+Lorsque les propriétés `right` et {{cssxref("left")}} sont définies toutes les deux et que l'élément ne peut pas s'étendre afin de satisfaire ces deux contraintes, la position de l'élément est _sur-définie._ Dans ce cas, la valeur de {{cssxref("left")}} est prioritaire lorsque le contenant est disposé en lecture de gauche à droite (la valeur calculée de `right` sera `-left`), et la valeur de `right` est prioritaire lorsque le contenant est disposé en lecture de droite à gauche (la valeur calculée de {{cssxref("left")}} sera `-right`).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 right: 3px;
 right: 2.4em;
 
 /* Valeurs de pourcentage */
-/* Type &lt;percentage&gt;      */
+/* Type <percentage>      */
 right: 10%;
 
 /* Valeur avec un mot-clé */
@@ -42,40 +41,39 @@ right: auto;
 right: inherit;
 right: initial;
 right: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui peut être négative, positive ou nulle et représente :
- <ul>
-  <li>pour les éléments à positionnement absolu : la distance jusqu'au bord droit du bloc englobant.</li>
-  <li>pour les éléments à positionnement relatif : le décalage à droite que l'élément subit par rapport à sa position dans le flux normal s'il n'était pas positionné.</li>
- </ul>
- </dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} représentant le pourcentage de la largeur du bloc englobant.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui représente :
- <ul>
-  <li>pour les éléments à positionnement absolu : la position de l'élément fondé sur la propriété {{cssxref("left")}} et considère <code>width: auto</code> comme une largeur fondée sur le contenu ; ou, si <code>left</code> vaut aussi <code>auto</code>, l'élément serait positionné horizontalement comme s'il avait été un élément statique.</li>
-  <li>pour les éléments à positionnement relatif : le décalage à droite de l'élément par rapport à sa position originale fondé sur la propriété {{cssxref("left")}} ou, si <code>left</code> vaut également <code>auto</code>, aucun décalage.</li>
- </ul>
- </dd>
- <dt><code>inherit</code></dt>
- <dd>Un mot-clé indiquant que la valeur est identique à la valeur calculée de l'élément parent (qui peut ne pas être sont bloc contenant). Cette valeur calculée est manipulée comme si elle était de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} ou comme si elle était le mot-clé <code>auto</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui peut être négative, positive ou nulle et représente :
+
+    - pour les éléments à positionnement absolu : la distance jusqu'au bord droit du bloc englobant.
+    - pour les éléments à positionnement relatif : le décalage à droite que l'élément subit par rapport à sa position dans le flux normal s'il n'était pas positionné.
+
+- `<percentage>`
+  - : Une valeur de type {{cssxref("&lt;percentage&gt;")}} représentant le pourcentage de la largeur du bloc englobant.
+- `auto`
+
+  - : Un mot-clé qui représente :
+
+    - pour les éléments à positionnement absolu : la position de l'élément fondé sur la propriété {{cssxref("left")}} et considère `width: auto` comme une largeur fondée sur le contenu ; ou, si `left` vaut aussi `auto`, l'élément serait positionné horizontalement comme s'il avait été un élément statique.
+    - pour les éléments à positionnement relatif : le décalage à droite de l'élément par rapport à sa position originale fondé sur la propriété {{cssxref("left")}} ou, si `left` vaut également `auto`, aucun décalage.
+
+- `inherit`
+  - : Un mot-clé indiquant que la valeur est identique à la valeur calculée de l'élément parent (qui peut ne pas être sont bloc contenant). Cette valeur calculée est manipulée comme si elle était de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} ou comme si elle était le mot-clé `auto`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css; highlight:[16]">#exemple_3 {
+```css
+#exemple_3 {
   width: 100px;
   height: 100px;
   background-color: #FFC7E4;
@@ -91,58 +89,37 @@ right: unset;
   position: absolute;
   bottom: 10px;
   right: 20px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="exemple_3"&gt;Exemple 3&lt;/div&gt;
-&lt;div id="exemple_4"&gt;Exemple 4&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 500, 220)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définit <code>right</code> comme pouvant être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td>
-   <td>{{Spec2('CSS3 Positioning')}}</td>
-   <td>Description du comportement pour le comportement adhérent (<em>sticky</em>).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.right")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("position")}},</li>
- <li>{{cssxref("left")}},</li>
- <li>{{cssxref("top")}},</li>
- <li>{{cssxref("bottom")}}</li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<div id="exemple_3">Exemple 3</div>
+<div id="exemple_4">Exemple 4</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 500, 220)}}
+
+## Spécifications
+
+| Spécification                                                                    | État                                     | Commentaire                                                           |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'right')}} | {{Spec2('CSS3 Transitions')}} | Définit `right` comme pouvant être animée.                            |
+| {{SpecName('CSS3 Positioning', '#propdef-right', 'right')}} | {{Spec2('CSS3 Positioning')}} | Description du comportement pour le comportement adhérent (_sticky_). |
+| {{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                  |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.right")}}
+
+## Voir aussi
+
+- {{cssxref("position")}},
+- {{cssxref("left")}},
+- {{cssxref("top")}},
+- {{cssxref("bottom")}}
diff --git a/files/fr/web/css/rotate/index.md b/files/fr/web/css/rotate/index.md
index 591a0fd5a3..853720f5a9 100644
--- a/files/fr/web/css/rotate/index.md
+++ b/files/fr/web/css/rotate/index.md
@@ -7,13 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/rotate
 ---
-<div>{{CSSRef}}{{seecompattable}}</div>
+{{CSSRef}}{{seecompattable}}
 
-<p>La propriété <strong><code>rotate</code></strong> permet d'indiquer des rotations individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour <code>transform</code>.</p>
+La propriété **`rotate`** permet d'indiquer des rotations individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour `transform`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 rotate: none;
 
 /* Valeur angulaire */
@@ -27,36 +28,38 @@ rotate: y 0.25turn;
 rotate: z 1.57rad;
 
 /* Un vector et l'angle associé */
-rotate: 1 1 1 90deg;</pre>
+rotate: 1 1 1 90deg;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>Valeur angulaire</dt>
- <dd>Une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle à utiliser, autour de l'axe Z, pour tourner les éléments. Cela est équivalent à la fonction <code>rotate()</code>.</dd>
- <dt>Le nom de l'axe et l'angle associé</dt>
- <dd>Le nom de l'axe par rapport auquel on souhaite effectuer la rotation (<code>"x"</code>, "<code>y</code>" ou "<code>z"</code>), puis une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctions <code>rotateX()</code>/<code>rotateY()</code>/<code>rotateZ()</code>.</dd>
- <dt>Un vecteur et l'angle associé</dt>
- <dd>Trois nombres (valeurs {{cssxref("&lt;number&gt;")}}) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle de rotation. Cela est équivalent à la fonction <code>rotate3d()</code>.</dd>
- <dt><code>none</code></dt>
- <dd>Cette valeur indique qu'aucune rotation ne devrait être appliquée.</dd>
-</dl>
+- Valeur angulaire
+  - : Une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle à utiliser, autour de l'axe Z, pour tourner les éléments. Cela est équivalent à la fonction `rotate()`.
+- Le nom de l'axe et l'angle associé
+  - : Le nom de l'axe par rapport auquel on souhaite effectuer la rotation (`"x"`, "`y`" ou "`z"`), puis une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctions `rotateX()`/`rotateY()`/`rotateZ()`.
+- Un vecteur et l'angle associé
+  - : Trois nombres (valeurs {{cssxref("&lt;number&gt;")}}) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle de rotation. Cela est équivalent à la fonction `rotate3d()`.
+- `none`
+  - : Cette valeur indique qu'aucune rotation ne devrait être appliquée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="rotate"&gt;Rotation&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <p class="rotate">Rotation</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">* {
+```css
+* {
   box-sizing: border-box;
 }
 
@@ -84,41 +87,27 @@ p {
 
 div:hover .rotate {
   rotate: 1 -0.5 1 180deg;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}} | {{Spec2('CSS Transforms 2')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.rotate")}}</p>
+{{Compat("css.properties.rotate")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref('translate')}}</li>
- <li>{{cssxref('scale')}}</li>
- <li>{{cssxref('transform')}}</li>
-</ul>
+- {{cssxref('translate')}}
+- {{cssxref('scale')}}
+- {{cssxref('transform')}}
diff --git a/files/fr/web/css/row-gap/index.md b/files/fr/web/css/row-gap/index.md
index 7133eec821..d066a04862 100644
--- a/files/fr/web/css/row-gap/index.md
+++ b/files/fr/web/css/row-gap/index.md
@@ -7,94 +7,96 @@ tags:
   - Reference
 translation_of: Web/CSS/row-gap
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>row-gap</code></strong> définit la taille des gouttières entre les lignes d'un élément.</p>
+La propriété **`row-gap`** définit la taille des gouttières entre les lignes d'un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}</div>
+{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> La propriété {{cssxref("grid-row-gap")}} a d'abord été définie avec le module de spécification <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Cette propriété préfixée a ensuite été remplacée par <code>row-gap</code> dans le module <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Alignment</a> afin d'être généralisée à d'autres modes de disposition. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.</p>
-</div>
+> **Note :** La propriété {{cssxref("grid-row-gap")}} a d'abord été définie avec le module de spécification [CSS Grid Layout](/fr/docs/Web/CSS/CSS_Grid_Layout). Cette propriété préfixée a ensuite été remplacée par `row-gap` dans le module [CSS Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment) afin d'être généralisée à d'autres modes de disposition. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;largeur&gt;      */
+```css
+/* Valeurs de longueur */
+/* Type <largeur>      */
 row-gap: 20px;
 row-gap: 1em;
 row-gap: 3vmin;
 row-gap: 0.5cm;
 
 /* Valeurs proportionnelles */
-/* Type &lt;pourcentage&gt; */
+/* Type <pourcentage> */
 row-gap: 10%;
 
 /* Valeurs globales */
 row-gap: inherit;
 row-gap: initial;
 row-gap: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;pourcentage-largeur&gt;</code></dt>
- <dd>La largeur de la « gouttière » placée entre les lignes de la grille. Les valeurs exprimées en pourcentages sont relatives aux dimensions de l'élément.</dd>
-</dl>
+- `<pourcentage-largeur>`
+  - : La largeur de la « gouttière » placée entre les lignes de la grille. Les valeurs exprimées en pourcentages sont relatives aux dimensions de l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Disposition_flexible">Disposition flexible</h3>
+### Disposition flexible
 
-<p>{{SeeCompatTable}}</p>
+{{SeeCompatTable}}
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#flexbox {
+```css
+#flexbox {
   display: flex;
   flex-wrap: wrap;
   width: 300px;
   row-gap: 20px;
 }
 
-#flexbox &gt; div {
+#flexbox > div {
   background-color: lime;
   flex: 1 1 auto;
   width: 100px;
   height: 50px;
-}</pre>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;div id="flexbox"&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+}
+```
+
+#### HTML
+
+```html
+<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Disposition_flexible', "auto", "120px")}}</p>
+{{EmbedLiveSample('Disposition_flexible', "auto", "120px")}}
 
-<h3 id="Disposition_sur_une_grille">Disposition sur une grille</h3>
+### Disposition sur une grille
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css hidden">#grid {
+```css hidden
+#grid {
   grid-row-gap: 20px;
 }
-</pre>
+```
 
-<pre class="brush: css">#grid {
+```css
+#grid {
   display: grid;
   height: 200px;
   grid-template-columns: 200px;
@@ -102,62 +104,49 @@ row-gap: unset;
   row-gap: 20px;
 }
 
-#grid &gt; div {
+#grid > div {
   background-color: lime;
-}</pre>
+}
+```
+
+#### HTML
+
+```html
+<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### Résultat
 
-<pre class="brush: html">&lt;div id="grid"&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-  &lt;div&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+{{EmbedLiveSample('Disposition_sur_une_grille', 'auto', 120)}}
 
-<h4 id="Résultat_2">Résultat</h4>
+## Spécifications
 
-<p>{{EmbedLiveSample('Disposition_sur_une_grille', 'auto', 120)}}</p>
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. |
 
-<h2 id="Spécifications">Spécifications</h2>
+{{cssinfo}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<p>{{cssinfo}}</p>
+### Prise en charge pour les dispositions flexibles
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.properties.row-gap.flex_context")}}
 
-<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+### Prise en charge pour les grilles
 
-<p>{{Compat("css.properties.row-gap.flex_context")}}</p>
+{{Compat("css.properties.row-gap.grid_context")}}
 
-<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+## Voir aussi
 
-<p>{{Compat("css.properties.row-gap.grid_context")}}</p>
+- Les versions sans préfixe des propriétés :
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+  - {{cssxref("column-gap")}}
+  - {{cssxref("gap")}}
 
-<ul>
- <li>Les versions sans préfixe des propriétés :
-  <ul>
-   <li>{{cssxref("column-gap")}}</li>
-   <li>{{cssxref("gap")}}</li>
-  </ul>
- </li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de base : les gouttières</a></li>
- <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Guide : les concepts de base des boîtes flexibles (flexbox)</a></li>
-</ul>
+- [Guide : les concepts de base : les gouttières](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières)
+- [Guide : les concepts de base des boîtes flexibles (flexbox)](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)
diff --git a/files/fr/web/css/ruby-align/index.md b/files/fr/web/css/ruby-align/index.md
index 51d72cbbe4..f1534742e0 100644
--- a/files/fr/web/css/ruby-align/index.md
+++ b/files/fr/web/css/ruby-align/index.md
@@ -8,11 +8,12 @@ tags:
   - Ruby
 translation_of: Web/CSS/ruby-align
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <code><strong>ruby-align</strong></code> définit la façon dont les éléments ruby sont distribués autour du texte de base.</p>
+La propriété **`ruby-align`** définit la façon dont les éléments ruby sont distribués autour du texte de base.
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 ruby-align: start;
 ruby-align: center;
 ruby-align: space-between;
@@ -22,123 +23,118 @@ ruby-align: space-around;
 ruby-align: inherit;
 ruby-align: initial;
 ruby-align: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>start</code></dt>
- <dd>Un mot-clé indiquant que les notations ruby sont alignées avec le début du texte de base.</dd>
- <dt><code>center</code></dt>
- <dd>Un mot-clé indiquant que les notations ruby sont alignées avec le milieu du texte de base.</dd>
- <dt><code>space-between</code></dt>
- <dd>Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby.</dd>
- <dt><code>space-around</code></dt>
- <dd>Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby et autour d'eux.</dd>
-</dl>
+- `start`
+  - : Un mot-clé indiquant que les notations ruby sont alignées avec le début du texte de base.
+- `center`
+  - : Un mot-clé indiquant que les notations ruby sont alignées avec le milieu du texte de base.
+- `space-between`
+  - : Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby.
+- `space-around`
+  - : Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby et autour d'eux.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ce fragment HTML sera affiché différemment en fonction des valeurs de <code>ruby-align</code> :</p>
+Ce fragment HTML sera affiché différemment en fonction des valeurs de `ruby-align` :
 
-<pre class="brush: html">&lt;ruby&gt;
-  &lt;rb&gt;Un long texte pour tester&lt;/rb&gt;
-  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;Un petit ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
-&lt;/ruby&gt;
-</pre>
+```html
+<ruby>
+  <rb>Un long texte pour tester</rb>
+  <rp>（</rp><rt>Un petit ruby</rt><rp>）</rp>
+</ruby>
+```
 
-<h3 id="Alignement_par_rapport_au_début_du_texte_de_base">Alignement par rapport au début du texte de base</h3>
+### Alignement par rapport au début du texte de base
 
-<pre class="brush: html hidden">&lt;ruby&gt;
-  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
-  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
-&lt;/ruby&gt;
-</pre>
+```html hidden
+<ruby>
+  <rb>This is a long text to check</rb>
+  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
+</ruby>
+```
 
-<pre class="brush: css">ruby {
+```css
+ruby {
   ruby-align: start;
-}</pre>
+}
+```
 
-<p>Avec ce CSS, on obtient le résultat suivant :</p>
+Avec ce CSS, on obtient le résultat suivant :
 
-<p>{{EmbedLiveSample("Alignement_par_rapport_au_début_du_texte_de_base", 180, 40)}}</p>
+{{EmbedLiveSample("Alignement_par_rapport_au_début_du_texte_de_base", 180, 40)}}
 
-<h3 id="Alignement_par_rapport_au_centre">Alignement par rapport au centre</h3>
+### Alignement par rapport au centre
 
-<pre class="brush: html hidden">&lt;ruby&gt;
-  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
-  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
-&lt;/ruby&gt;
-</pre>
+```html hidden
+<ruby>
+  <rb>This is a long text to check</rb>
+  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
+</ruby>
+```
 
-<pre class="brush: css">ruby {
+```css
+ruby {
   ruby-align: center;
-}</pre>
+}
+```
 
-<p>Avec ce CSS, on obtient le résultat suivant :</p>
+Avec ce CSS, on obtient le résultat suivant :
 
-<p>{{EmbedLiveSample("Alignement_par_rapport_au_centre", 180, 40)}}</p>
+{{EmbedLiveSample("Alignement_par_rapport_au_centre", 180, 40)}}
 
-<h3 id="Un_espace_supplémentaire_entre_les_éléments_ruby">Un espace supplémentaire entre les éléments ruby</h3>
+### Un espace supplémentaire entre les éléments ruby
 
-<pre class="brush: html hidden">&lt;ruby&gt;
-  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
-  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
-&lt;/ruby&gt;
-</pre>
+```html hidden
+<ruby>
+  <rb>This is a long text to check</rb>
+  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
+</ruby>
+```
 
-<pre class="brush: css">ruby {
+```css
+ruby {
   ruby-align: space-between;
-}</pre>
+}
+```
 
-<p>Avec ce CSS, on obtient le résultat suivant :</p>
+Avec ce CSS, on obtient le résultat suivant :
 
-<p>{{EmbedLiveSample("Un_espace_supplémentaire_entre_les_éléments_ruby", 180, 40)}}</p>
+{{EmbedLiveSample("Un_espace_supplémentaire_entre_les_éléments_ruby", 180, 40)}}
 
-<h3 id="Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby">Un espace supplémentaire entre et autour des éléments ruby</h3>
+### Un espace supplémentaire entre et autour des éléments ruby
 
-<pre class="brush: css">ruby {
+```css
+ruby {
   ruby-align: space-around;
-}</pre>
+}
+```
 
-<p>Avec ce CSS, on obtient le résultat suivant :</p>
+Avec ce CSS, on obtient le résultat suivant :
 
-<p>{{EmbedLiveSample("Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby", 180, 40)}}</p>
+{{EmbedLiveSample("Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby", 180, 40)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}</td>
-   <td>{{Spec2('CSS3 Ruby')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                         | Commentaires        |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}} | {{Spec2('CSS3 Ruby')}} | Définition initiale |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.ruby-align")}}</p>
+{{Compat("css.properties.ruby-align")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les éléments HTML liés aux notations Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.</li>
- <li>Les propriétés CSS liées aux notations Ruby : {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.</li>
-</ul>
+- Les éléments HTML liés aux notations Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.
+- Les propriétés CSS liées aux notations Ruby : {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.
diff --git a/files/fr/web/css/ruby-position/index.md b/files/fr/web/css/ruby-position/index.md
index a0b683a0e5..2897165c1c 100644
--- a/files/fr/web/css/ruby-position/index.md
+++ b/files/fr/web/css/ruby-position/index.md
@@ -8,11 +8,12 @@ tags:
   - Ruby
 translation_of: Web/CSS/ruby-position
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <code><strong>ruby-position</strong></code> définit la position d'un élément ruby par rapport à son élément de base. L'élément ruby peut ainsi être positionné au-dessus de l'élément (<code>over</code>), en-dessous (<code>under</code>) ou entre les caractères, sur leur droite (<code>inter-character</code>).</p>
+La propriété **`ruby-position`** définit la position d'un élément ruby par rapport à son élément de base. L'élément ruby peut ainsi être positionné au-dessus de l'élément (`over`), en-dessous (`under`) ou entre les caractères, sur leur droite (`inter-character`).
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 ruby-position: over;
 ruby-position: under;
 ruby-position: inter-character;
@@ -21,95 +22,85 @@ ruby-position: inter-character;
 ruby-position: inherit;
 ruby-position: initial;
 ruby-position: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>over</code></dt>
- <dd>Un mot-clé qui indique que les annotations ruby doivent être placée au-dessus du texte pour les scripts horizontaux et à droite pour les scripts verticaux.</dd>
- <dt><code>under</code></dt>
- <dd>Un mot-clé qui indique que les annotations ruby doivent être placés sous le texte pour les scripts horizontaux et à gauche pour les scripts verticaux.</dd>
- <dt><code>inter-character</code></dt>
- <dd>Un mot-clé qui indique que les annotations ruby doivent être placées entre les différents caractères.</dd>
-</dl>
+- `over`
+  - : Un mot-clé qui indique que les annotations ruby doivent être placée au-dessus du texte pour les scripts horizontaux et à droite pour les scripts verticaux.
+- `under`
+  - : Un mot-clé qui indique que les annotations ruby doivent être placés sous le texte pour les scripts horizontaux et à gauche pour les scripts verticaux.
+- `inter-character`
+  - : Un mot-clé qui indique que les annotations ruby doivent être placées entre les différents caractères.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ce fragment HTML rendra un résultat différent pour chaque valeur de <code>ruby-position</code> :</p>
+Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-position` :
 
-<pre class="brush: html">&lt;ruby&gt;
-  &lt;rb&gt;超電磁砲&lt;/rb&gt;
-  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
-&lt;/ruby&gt;
-</pre>
+```html
+<ruby>
+  <rb>超電磁砲</rb>
+  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
+</ruby>
+```
 
-<h3 id="Au-dessus_du_texte">Au-dessus du texte</h3>
+### Au-dessus du texte
 
-<pre class="brush: html hidden">&lt;ruby&gt;
-  &lt;rb&gt;超電磁砲&lt;/rb&gt;
-  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
-&lt;/ruby&gt;
-</pre>
+```html hidden
+<ruby>
+  <rb>超電磁砲</rb>
+  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
+</ruby>
+```
 
-<pre class="brush: css">ruby {
+```css
+ruby {
     ruby-position:over;
-}</pre>
+}
+```
 
-<p>On obtiendra le résultat suivant :</p>
+On obtiendra le résultat suivant :
 
-<p>{{EmbedLiveSample("Au-dessus_du_texte", 100, 40)}}</p>
+{{EmbedLiveSample("Au-dessus_du_texte", 100, 40)}}
 
-<h3 id="En-dessous_du_texte">En-dessous du texte</h3>
+### En-dessous du texte
 
-<pre class="brush: html hidden">&lt;ruby&gt;
-  &lt;rb&gt;超電磁砲&lt;/rb&gt;
-  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
-&lt;/ruby&gt;
-</pre>
+```html hidden
+<ruby>
+  <rb>超電磁砲</rb>
+  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
+</ruby>
+```
 
-<pre class="brush: css">ruby {
+```css
+ruby {
     ruby-position:under;
-}</pre>
+}
+```
 
-<p>On obtiendra le résultat suivant :</p>
+On obtiendra le résultat suivant :
 
-<p>{{EmbedLiveSample("En-dessous_du_texte", 100, 40)}}</p>
+{{EmbedLiveSample("En-dessous_du_texte", 100, 40)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Ruby', '#rubypos', 'ruby-position')}}</td>
-   <td>{{Spec2('CSS3 Ruby')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('CSS3 Ruby', '#rubypos', 'ruby-position')}} | {{Spec2('CSS3 Ruby')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.ruby-position")}}</p>
+{{Compat("css.properties.ruby-position")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les éléments HTML à propos de Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.</li>
- <li>Les propriétés CSS à propos de Ruby : {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}}.</li>
-</ul>
+- Les éléments HTML à propos de Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.
+- Les propriétés CSS à propos de Ruby : {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}}.
diff --git a/files/fr/web/css/scale/index.md b/files/fr/web/css/scale/index.md
index 87f30418cd..01560c9176 100644
--- a/files/fr/web/css/scale/index.md
+++ b/files/fr/web/css/scale/index.md
@@ -7,13 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/scale
 ---
-<div>{{CSSRef}}{{seecompattable}}</div>
+{{CSSRef}}{{seecompattable}}
 
-<p>La propriété <strong><code>scale</code></strong> permet de mise à l'échelle individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour <code>transform</code>.</p>
+La propriété **`scale`** permet de mise à l'échelle individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour `transform`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scale: none;
 
 /* Une seule valeur */
@@ -26,36 +27,38 @@ scale: 0.5;
 scale: 2 0.5;
 
 /* Trois valeurs */
-scale: 2 0.5 2;</pre>
+scale: 2 0.5 2;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>Une seule valeur de longueur/pourcentage</dt>
- <dd>Une longueur ou un pourcentage qui définit une mise à l'échelle en deux dimensions. Le facteur utilisé est le même pour l'axe X et l'axe Y. Cela est équivalent à la fonction <code>scale()</code> (mise à l'échelle sur deux dimensions) avec une seule valeur.</dd>
- <dt>Deux valeurs de longueur/pourcentage</dt>
- <dd>Deux longueurs ou pourcentages qui définissent respectivement les composantes horizontale et verticale de l'agrandissement/rétrécissement en deux dimensions. Cela est équivalent à la fonction <code>scale()</code> appelée avec ces deux arguments.</dd>
- <dt>Trois valeurs de longueur/pourcentage</dt>
- <dd>Trois longueurs ou pourcentages qui définissent respectivement les composantes horizontale, verticale et en profondeur de la mise à l'échelle sur trois dimensions. Cela est équivalent à la fonction <code>scale3d()</code> appelée avec ces trois arguments.</dd>
- <dt><code>none</code></dt>
- <dd>Cette valeur indique qu'aucune mise à l'échelle ne devrait être appliquée.</dd>
-</dl>
+- Une seule valeur de longueur/pourcentage
+  - : Une longueur ou un pourcentage qui définit une mise à l'échelle en deux dimensions. Le facteur utilisé est le même pour l'axe X et l'axe Y. Cela est équivalent à la fonction `scale()` (mise à l'échelle sur deux dimensions) avec une seule valeur.
+- Deux valeurs de longueur/pourcentage
+  - : Deux longueurs ou pourcentages qui définissent respectivement les composantes horizontale et verticale de l'agrandissement/rétrécissement en deux dimensions. Cela est équivalent à la fonction `scale()` appelée avec ces deux arguments.
+- Trois valeurs de longueur/pourcentage
+  - : Trois longueurs ou pourcentages qui définissent respectivement les composantes horizontale, verticale et en profondeur de la mise à l'échelle sur trois dimensions. Cela est équivalent à la fonction `scale3d()` appelée avec ces trois arguments.
+- `none`
+  - : Cette valeur indique qu'aucune mise à l'échelle ne devrait être appliquée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="scale"&gt;Scaling&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <p class="scale">Scaling</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">* {
+```css
+* {
   box-sizing: border-box;
 }
 
@@ -84,41 +87,26 @@ p {
 div:hover .scale {
   scale: 2 0.7;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Examples')}}</p>
+{{EmbedLiveSample('Examples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}} | {{Spec2('CSS Transforms 2')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scale")}}</p>
+{{Compat("css.properties.scale")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref('translate')}}</li>
- <li>{{cssxref('rotate')}}</li>
- <li>{{cssxref('transform')}}</li>
-</ul>
+- {{cssxref('translate')}}
+- {{cssxref('rotate')}}
+- {{cssxref('transform')}}
diff --git a/files/fr/web/css/scaling_of_svg_backgrounds/index.md b/files/fr/web/css/scaling_of_svg_backgrounds/index.md
index 8abfc2fcc4..5af2008353 100644
--- a/files/fr/web/css/scaling_of_svg_backgrounds/index.md
+++ b/files/fr/web/css/scaling_of_svg_backgrounds/index.md
@@ -8,326 +8,340 @@ tags:
 translation_of: Web/CSS/Scaling_of_SVG_backgrounds
 original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG
 ---
-<p>Les images SVG sont très flexibles et lorsqu'on les utilise en CSS avec les propriétés {{cssxref("background-image")}} et {{cssxref("background-size")}}, il faut s'assurer de considérer les différents aspects qui leurs sont propres. Dans cet article, on décrit comment les images SVG sont redimensionnées grâce à ces propriétés.</p>
+Les images SVG sont très flexibles et lorsqu'on les utilise en CSS avec les propriétés {{cssxref("background-image")}} et {{cssxref("background-size")}}, il faut s'assurer de considérer les différents aspects qui leurs sont propres. Dans cet article, on décrit comment les images SVG sont redimensionnées grâce à ces propriétés.
 
-<h2 id="Un_algorithme_simple">Un algorithme simple</h2>
+## Un algorithme simple
 
-<p>Dans la plupart des cas, l'algorithme utilisé pourra être réduit à ces quatre règles. Ces règles ne sont pas exhaustives et ne couvrent pas certains cas aux limites mais cela sera suffisant ici :</p>
+Dans la plupart des cas, l'algorithme utilisé pourra être réduit à ces quatre règles. Ces règles ne sont pas exhaustives et ne couvrent pas certains cas aux limites mais cela sera suffisant ici :
 
-<ol>
- <li>Si {{cssxref("background-size")}} définit une dimension fixe (des pourcentages ou des unités relatives fixées par le contexte), cette dimension l'emporte.</li>
- <li>Si l'image possède des proportions intrinsèques (autrement dit, si le ratio largeur/hauteur est constant : 16:9, 4:3, 2.39:1, 1:1), l'arrière-plan sera affiché en conservant ces proportions.</li>
- <li>Si l'image définit une taille et que celle-ci n'est pas modifiée par une contrainte quelconque, cette taille l'emporte.</li>
- <li>Dans tous les autres cas, l'image est affichée avec la taille de la zone dédiée à l'arrière-plan.</li>
-</ol>
+1.  Si {{cssxref("background-size")}} définit une dimension fixe (des pourcentages ou des unités relatives fixées par le contexte), cette dimension l'emporte.
+2.  Si l'image possède des proportions intrinsèques (autrement dit, si le ratio largeur/hauteur est constant : 16:9, 4:3, 2.39:1, 1:1), l'arrière-plan sera affiché en conservant ces proportions.
+3.  Si l'image définit une taille et que celle-ci n'est pas modifiée par une contrainte quelconque, cette taille l'emporte.
+4.  Dans tous les autres cas, l'image est affichée avec la taille de la zone dédiée à l'arrière-plan.
 
-<p>On notera ici que l'algorithme ne prend en cas que les dimensions et/ou les proportions de l'image (leur absence éventullement). Ainsi, une image SVG dont les dimensions sont fixées sera traitée comme une image matricielle de la même taille.</p>
+On notera ici que l'algorithme ne prend en cas que les dimensions et/ou les proportions de l'image (leur absence éventullement). Ainsi, une image SVG dont les dimensions sont fixées sera traitée comme une image matricielle de la même taille.
 
-<h2 id="Fichiers_dexemples">Fichiers d'exemples</h2>
+## Fichiers d'exemples
 
-<p>Avant d'aller plus loin dans l'exploration des résultats avec {{cssxref("background-size")}}, il serait judicieux de disposer de différentes images sources avec différents paramètres de dimensions, proportions, etc.</p>
+Avant d'aller plus loin dans l'exploration des résultats avec {{cssxref("background-size")}}, il serait judicieux de disposer de différentes images sources avec différents paramètres de dimensions, proportions, etc.
 
-<p>Pour chaque cas d'exemple fourni ci-après, l'image est affichée dans une boîte carrée de 150 pixels et un lien est fourni vers le fichier SVG correspondant.</p>
+Pour chaque cas d'exemple fourni ci-après, l'image est affichée dans une boîte carrée de 150 pixels et un lien est fourni vers le fichier SVG correspondant.
 
-<h3 id="Image_sans_dimension_ni_proportion">Image sans dimension ni proportion</h3>
+### Image sans dimension ni proportion
 
-<p>Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.</p>
+Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.
 
-<p><img src="no-dimensions-or-ratio.png"></p>
+![](no-dimensions-or-ratio.png)
 
-<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3469/6587a382ffb2c944462a6b110b079496/no-dimensions-or-ratio.svg" title="no-dimensions-or-ratio.svg">Fichier SVG source</a></p>
-<h3 id="Image_sans_proportion_avec_une_dimension_fixée">Image sans proportion avec une dimension fixée</h3>
+[Fichier SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3469/6587a382ffb2c944462a6b110b079496/no-dimensions-or-ratio.svg "no-dimensions-or-ratio.svg")
 
-<p>Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.</p>
+### Image sans proportion avec une dimension fixée
 
-<p><img src="100px-wide-no-height-or-ratio.png"></p>
+Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.
 
-<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3468/af73bea307a10ffe2559df42fad199e3/100px-wide-no-height-or-ratio.svg" title="100px-wide-no-height-or-ratio.svg">Fichier SVG source</a></p>
+![](100px-wide-no-height-or-ratio.png)
 
-<h3 id="Image_avec_une_dimension_fixée_et_des_proportions_intrinsèques">Image avec une dimension fixée et des proportions intrinsèques</h3>
+[Fichier SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3468/af73bea307a10ffe2559df42fad199e3/100px-wide-no-height-or-ratio.svg "100px-wide-no-height-or-ratio.svg")
 
-<p>Cette image mesure 100 pixels de haut mais n'a pas de largeur fixée. Elle définit également une proportion de 3:4. Ainsi, le rapport largeur/hauteur sera toujours 3/4.</p>
+### Image avec une dimension fixée et des proportions intrinsèques
 
-<p>On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.</p>
+Cette image mesure 100 pixels de haut mais n'a pas de largeur fixée. Elle définit également une proportion de 3:4. Ainsi, le rapport largeur/hauteur sera toujours 3/4.
 
-<p><img src="100px-height-3x4-ratio.png"></p>
+On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.
 
-<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3467/fd0c534c506be06d52f0a954a59863a6/100px-height-3x4-ratio.svg" title="100px-height-3x4-ratio.svg">Fichier SVG source</a></p>
+![](100px-height-3x4-ratio.png)
 
-<h3 id="Image_sans_largeur_ni_hauteur_mais_avec_des_proportions_intrinsèques">Image sans largeur ni hauteur mais avec des proportions intrinsèques</h3>
+[Fichier SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3467/fd0c534c506be06d52f0a954a59863a6/100px-height-3x4-ratio.svg "100px-height-3x4-ratio.svg")
 
-<p>Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.</p>
+### Image sans largeur ni hauteur mais avec des proportions intrinsèques
 
-<p><img src="no-dimensions-1x1-ratio.png"></p>
+Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.
 
-<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3466/a3398e03c058d99fb2b7837167cdbc26/no-dimensions-1x1-ratio.svg" title="no-dimensions-1x1-ratio.svg">Fichier SVG source</a></p>
+![](no-dimensions-1x1-ratio.png)
 
-<h2 id="Exemples_de_redimensionnement">Exemples de redimensionnement</h2>
+[Fichier SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3466/a3398e03c058d99fb2b7837167cdbc26/no-dimensions-1x1-ratio.svg "no-dimensions-1x1-ratio.svg")
 
-<p>Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec <code>no-repeat</code> pour plus de clarté..</p>
+## Exemples de redimensionnement
 
-<div class="note">
-  <p><strong>Note :</strong> Les images montrées ci-après illustrent le rendu <strong>attendu</strong>. Les navigateurs peuvent ne pas produire le bon résultat.</p>
-</div>
+Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec `no-repeat` pour plus de clarté..
 
-<h3 id="Indiquer_des_dimensions_fixées_sur_les_deux_axes">Indiquer des dimensions fixées sur les deux axes</h3>
+> **Note :** Les images montrées ci-après illustrent le rendu **attendu**. Les navigateurs peuvent ne pas produire le bon résultat.
 
-<p>Si on utilise {{cssxref("background-size")}} pour indiquer la longueur et la largeur de l'image, celles-ci seront toujours utilisées (cf. la règle n°1 précédemment énoncée). Autrement dit, l'image sera toujours étirée pour obtenir ces dimensions, quelles que soient les dimensions initiales de l'image ou ses proportions.</p>
+### Indiquer des dimensions fixées sur les deux axes
 
-<h4 id="SVG_source_Aucune_dimension_ni_proportion">SVG source : Aucune dimension ni proportion</h4>
+Si on utilise {{cssxref("background-size")}} pour indiquer la longueur et la largeur de l'image, celles-ci seront toujours utilisées (cf. la règle n°1 précédemment énoncée). Autrement dit, l'image sera toujours étirée pour obtenir ces dimensions, quelles que soient les dimensions initiales de l'image ou ses proportions.
 
-<p>Avec ces déclarations CSS :</p>
+#### SVG source : Aucune dimension ni proportion
 
-<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
+Avec ces déclarations CSS :
+
+```css
+background: url(no-dimensions-or-ratio.svg);
 background-size: 125px 175px;
-</pre>
+```
 
-<p>On doit obtenir un résultat semblable à :</p>
+On doit obtenir un résultat semblable à :
 
-<p><img src="fixed-no-dimensions-or-ratio.png"></p>
+![](fixed-no-dimensions-or-ratio.png)
 
-<h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion">SVG source : Une dimension définie et aucune proportion</h4>
+#### SVG source : Une dimension définie et aucune proportion
 
-<p>Avec ces déclarations CSS :</p>
+Avec ces déclarations CSS :
 
-<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
+```css
+background: url(100px-wide-no-height-or-ratio.svg);
 background-size: 250px 150px;
-</pre>
+```
 
-<p>On doit obtenir un résultat semblable à :</p>
+On doit obtenir un résultat semblable à :
 
-<p><img src="fixed-100px-wide-no-height-or-ratio.png"></p>
+![](fixed-100px-wide-no-height-or-ratio.png)
 
-<h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques">SVG source : Une dimension définie et des proportions intrinsèques</h4>
+#### SVG source : Une dimension définie et des proportions intrinsèques
 
-<p>Avec ces déclarations CSS :</p>
+Avec ces déclarations CSS :
 
-<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
+```css
+background: url(100px-height-3x4-ratio.svg);
 background-size: 275px 125px;
-</pre>
+```
 
-<p>On doit obtenir un résultat semblable à :</p>
+On doit obtenir un résultat semblable à :
 
-<p><img src="fixed-100px-height-3x4-ratio.png"></p>
+![](fixed-100px-height-3x4-ratio.png)
 
-<h4 id="SVG_source_Aucune_largeur_ni_hauteur_définie_mais_des_proportions_intrinsèques">SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques</h4>
+#### SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques
 
-<p>Avec ces déclarations CSS :</p>
+Avec ces déclarations CSS :
 
-<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
+```css
+background: url(no-dimensions-1x1-ratio.svg);
 background-size: 250px 100px;
-</pre>
+```
 
-<p>On doit obtenir un résultat semblable à :</p>
+On doit obtenir un résultat semblable à :
 
-<p><img src="fixed-no-dimensions-1x1-ratio.png"></p>
+![](fixed-no-dimensions-1x1-ratio.png)
 
-<h3 id="Utiliser_contain_ou_cover">Utiliser <code>contain</code> ou <code>cover</code></h3>
+### Utiliser `contain` ou `cover`
 
-<p>En utilisant la valeur <code>cover</code> pour {{cssxref("background-size")}}, l'image sera réduite au maximum pour couvrir toute la zone de l'arrière-plan. <code>contain</code> fonctionne de façon symétrique, l'image est agrandie autant que possible sans être rognée par la zone de l'arrière-plan.</p>
+En utilisant la valeur `cover` pour {{cssxref("background-size")}}, l'image sera réduite au maximum pour couvrir toute la zone de l'arrière-plan. `contain` fonctionne de façon symétrique, l'image est agrandie autant que possible sans être rognée par la zone de l'arrière-plan.
 
-<p>Pour une image avec des proportions intrinsèques, une seule dimension suffira à déterminer la taille pour <code>cover</code>/<code>contain</code>. En revanche, sans ratio, ce n'est pas suffisant et il faut donc utiliser les contraintes de la zone de l'arrière-plan.</p>
+Pour une image avec des proportions intrinsèques, une seule dimension suffira à déterminer la taille pour `cover`/`contain`. En revanche, sans ratio, ce n'est pas suffisant et il faut donc utiliser les contraintes de la zone de l'arrière-plan.
 
-<h4 id="SVG_source_Aucune_dimension_ni_proportion_2">SVG source : Aucune dimension ni proportion</h4>
+#### SVG source : Aucune dimension ni proportion
 
-<p>Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).</p>
+Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).
 
-<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
+```css
+background: url(no-dimensions-or-ratio.svg);
 background-size: contain;
-</pre>
+```
 
-<p>Le résultat obtenu sera :</p>
+Le résultat obtenu sera :
 
-<p><img src="no-dimensions-or-ratio-contain.png"></p>
+![](no-dimensions-or-ratio-contain.png)
 
-<h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion_2">SVG source : Une dimension définie et aucune proportion</h4>
+#### SVG source : Une dimension définie et aucune proportion
 
-<p>De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.</p>
+De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.
 
-<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
+```css
+background: url(100px-wide-no-height-or-ratio.svg);
 background-size: contain;
-</pre>
+```
 
-<p>Le résultat obtenu sera :</p>
+Le résultat obtenu sera :
 
-<p><img src="100px-wide-no-height-or-ratio-contain.png"></p>
+![](100px-wide-no-height-or-ratio-contain.png)
 
-<h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques_2">SVG source : Une dimension définie et des proportions intrinsèques</h4>
+#### SVG source : Une dimension définie et des proportions intrinsèques
 
-<p>Ici, on a des proportions intrinsèques. Dans ce cas, la règle 1 n'est pas pertinente et on utilise donc la règle 2 : le ratio est conservé (tout en respectant les consignes de <code>contain</code> ou <code>cover</code>). Ainsi, avec <code>contain</code>, la boîte de 300x200 et le ratio de 3:4 entraîneront le dessin d'un arrière-plan de 150x200.</p>
+Ici, on a des proportions intrinsèques. Dans ce cas, la règle 1 n'est pas pertinente et on utilise donc la règle 2 : le ratio est conservé (tout en respectant les consignes de `contain` ou `cover`). Ainsi, avec `contain`, la boîte de 300x200 et le ratio de 3:4 entraîneront le dessin d'un arrière-plan de 150x200.
 
-<h5 id="contain"><code>contain</code></h5>
+##### `contain`
 
-<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
+```css
+background: url(100px-height-3x4-ratio.svg);
 background-size: contain;
-</pre>
+```
 
-<p>Le résultat obtenu sera :</p>
+Le résultat obtenu sera :
 
-<p><img src="100px-height-3x4-ratio-contain.png"></p>
+![](100px-height-3x4-ratio-contain.png)
 
-<p>On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.</p>
+On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.
 
-<h5 id="cover"><code>cover</code></h5>
+##### `cover`
 
-<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
+```css
+background: url(100px-height-3x4-ratio.svg);
 background-size: cover;
-</pre>
+```
 
-<p>Le résultat obtenu sera :</p>
+Le résultat obtenu sera :
 
-<p><img src="100px-height-3x4-ratio-cover.png"></p>
+![](100px-height-3x4-ratio-cover.png)
 
-<p>Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.</p>
+Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.
 
-<h4 id="SVG_source_Aucune_dimension_mais_des_proportions_intrinsèques">SVG source : Aucune dimension mais des proportions intrinsèques</h4>
+#### SVG source : Aucune dimension mais des proportions intrinsèques
 
-<p>On obtient des résultats analogues lorsqu'on manipule une image sans dimension intrinsèque mais avec des proportions intrinsèques.</p>
+On obtient des résultats analogues lorsqu'on manipule une image sans dimension intrinsèque mais avec des proportions intrinsèques.
 
-<h5 id="contain_2"><code>contain</code></h5>
+##### `contain`
 
-<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
+```css
+background: url(no-dimensions-1x1-ratio.svg);
 background-size: contain;
-</pre>
+```
 
-<p>Le résultat ressemblera à :</p>
+Le résultat ressemblera à :
 
-<p><img src="no-dimensions-1x1-ratio-contain.png"></p>
+![](no-dimensions-1x1-ratio-contain.png)
 
-<p>On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.</p>
+On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.
 
-<h5 id="cover_2"><code>cover</code></h5>
+##### `cover`
 
-<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
+```css
+background: url(no-dimensions-1x1-ratio.svg);
 background-size: cover;
-</pre>
+```
 
-<p>Le résultat ressemblera à :</p>
+Le résultat ressemblera à :
 
-<p><img src="no-dimensions-1x1-ratio-cover.png"></p>
+![](no-dimensions-1x1-ratio-cover.png)
 
-<p>Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.</p>
+Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.
 
-<h3 id="Utiliser_auto_pour_les_deux_axes">Utiliser <code>auto</code> pour les deux axes</h3>
+### Utiliser `auto` pour les deux axes
 
-<p>Si {{cssxref("background-size")}} vaut <code>auto</code> ou <code>auto auto</code>, ce sera la règle n°2 qui s'appliquera : les proportions intrinsèques devront être conservées.</p>
+Si {{cssxref("background-size")}} vaut `auto` ou `auto auto`, ce sera la règle n°2 qui s'appliquera : les proportions intrinsèques devront être conservées.
 
-<h4 id="SVG_source_Aucune_dimension_ni_proportion_intrinsèque">SVG source : Aucune dimension ni proportion intrinsèque</h4>
+#### SVG source : Aucune dimension ni proportion intrinsèque
 
-<p>Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.</p>
+Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.
 
-<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
+```css
+background: url(no-dimensions-or-ratio.svg);
 background-size: auto auto;
-</pre>
+```
 
-<p>Voici le résultat obtenu :</p>
+Voici le résultat obtenu :
 
-<p><img src="auto-no-dimensions-or-ratio.png"></p>
+![](auto-no-dimensions-or-ratio.png)
 
-<h4 id="SVG_source_une_dimension_mais_aucune_proportion_intrinsèque">SVG source : une dimension mais aucune proportion intrinsèque</h4>
+#### SVG source : une dimension mais aucune proportion intrinsèque
 
-<p>S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.</p>
+S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.
 
-<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
+```css
+background: url(100px-wide-no-height-or-ratio.svg);
 background-size: auto auto;
-</pre>
+```
 
-<p>Voici le résultat obtenu :</p>
+Voici le résultat obtenu :
 
-<p><img src="auto-100px-wide-no-height-or-ratio.png"></p>
+![](auto-100px-wide-no-height-or-ratio.png)
 
-<p>Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).</p>
+Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).
 
-<h4 id="SVG_source_une_dimension_et_des_proportions_intrinsèques">SVG source : une dimension et des proportions intrinsèques</h4>
+#### SVG source : une dimension et des proportions intrinsèques
 
-<p>Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.</p>
+Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.
 
-<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
+```css
+background: url(100px-height-3x4-ratio.svg);
 background-size: auto auto;
-</pre>
+```
 
-<p>Le résultat sera le suivant :</p>
+Le résultat sera le suivant :
 
-<p><img src="auto-100px-height-3x4-ratio.png"></p>
+![](auto-100px-height-3x4-ratio.png)
 
-<p>Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec <code>auto</code>.</p>
+Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec `auto`.
 
-<h4 id="SVG_source_Aucune_dimension_définie_mais_des_proportions_intrinsèques">SVG source : Aucune dimension définie mais des proportions intrinsèques</h4>
+#### SVG source : Aucune dimension définie mais des proportions intrinsèques
 
-<p>Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour <code>contain</code>.</p>
+Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour `contain`.
 
-<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
+```css
+background: url(no-dimensions-1x1-ratio.svg);
 background-size: auto auto;
-</pre>
+```
 
-<p>Le résultat ressemblera à :</p>
+Le résultat ressemblera à :
 
-<p><img src="auto-no-dimensions-1x1-ratio.png"></p>
+![](auto-no-dimensions-1x1-ratio.png)
 
-<h3 id="Utiliser_auto_et_une_dimension_fixée">Utiliser <code>auto</code> et une dimension fixée</h3>
+### Utiliser `auto` et une dimension fixée
 
-<p>Avec la première règle, les dimensions définies sont toujours utilisées et il faut donc utiliser les autres règles pour déterminer la seconde dimension.</p>
+Avec la première règle, les dimensions définies sont toujours utilisées et il faut donc utiliser les autres règles pour déterminer la seconde dimension.
 
-<h4 id="SVG_source_aucune_dimension_ni_proportion_intrinsèque">SVG source : aucune dimension ni proportion intrinsèque</h4>
+#### SVG source : aucune dimension ni proportion intrinsèque
 
-<p>Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour <code>auto</code>.</p>
+Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour `auto`.
 
-<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
+```css
+background: url(no-dimensions-or-ratio.svg);
 background-size: auto 140px;
-</pre>
+```
 
-<p><img src="1auto-no-dimensions-or-ratio.png"></p>
+![](1auto-no-dimensions-or-ratio.png)
 
-<p>Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).</p>
+Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).
 
-<h4 id="SVG_source_une_dimension_intrinsèque_mais_pas_de_proportion_intrinsèque">SVG source : une dimension intrinsèque mais pas de proportion intrinsèque</h4>
+#### SVG source : une dimension intrinsèque mais pas de proportion intrinsèque
 
-<p>Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut <code>auto</code> dans le code CSS.</p>
+Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut `auto` dans le code CSS.
 
-<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
+```css
+background: url(100px-wide-no-height-or-ratio.svg);
 background-size: 200px auto;
-</pre>
+```
 
-<p><img src="100px-wide-no-height-or-ratio-length-auto.png"></p>
+![](100px-wide-no-height-or-ratio-length-auto.png)
 
-<p>Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur <code>auto</code>, l'image fera la même hauteur que la zone pour l'arrière-plan.</p>
+Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur `auto`, l'image fera la même hauteur que la zone pour l'arrière-plan.
 
-<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
+```css
+background: url(100px-wide-no-height-or-ratio.svg);
 background-size: auto 125px;
-</pre>
+```
 
-<p><img src="100px-wide-no-height-or-ratio-auto-length.png"></p>
+![](100px-wide-no-height-or-ratio-auto-length.png)
 
-<p>Ici, c'est la largeur qui vaut <code>auto</code> et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.</p>
+Ici, c'est la largeur qui vaut `auto` et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.
 
-<h4 id="SVG_source_une_dimension_définie_et_des_proportions_intrinsèques">SVG source : une dimension définie et des proportions intrinsèques</h4>
+#### SVG source : une dimension définie et des proportions intrinsèques
 
-<p>Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.</p>
+Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.
 
-<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
+```css
+background: url(100px-height-3x4-ratio.svg);
 background-size: 150px auto;
-</pre>
+```
 
-<p><img src="1auto-100px-height-3x4-ratio.png"></p>
+![](1auto-100px-height-3x4-ratio.png)
 
-<p>Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (<code>auto</code> dans la feuille de style).</p>
+Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (`auto` dans la feuille de style).
 
-<h4 id="SVG_source_aucune_dimension_mais_des_proportions_intrinsèques">SVG source : aucune dimension mais des proportions intrinsèques</h4>
+#### SVG source : aucune dimension mais des proportions intrinsèques
 
-<p>Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).</p>
+Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).
 
-<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
+```css
+background: url(no-dimensions-1x1-ratio.svg);
 background-size: 150px auto;
-</pre>
+```
 
-<p><img src="1auto-no-dimensions-1x1-ratio.png"></p>
+![](1auto-no-dimensions-1x1-ratio.png)
 
-<p>La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.</p>
+La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("background-size")}}</li>
- <li>{{cssxref("background-image")}}</li>
- <li>Billet de blog de Jeff Walden : <a href="https://whereswalden.com/2011/10/21/properly-resizing-vector-image-backgrounds/">Properly resizing vector image backgrounds (en anglais)</a></li>
-</ul>
+- {{cssxref("background-size")}}
+- {{cssxref("background-image")}}
+- Billet de blog de Jeff Walden : [Properly resizing vector image backgrounds (en anglais)](https://whereswalden.com/2011/10/21/properly-resizing-vector-image-backgrounds/)
diff --git a/files/fr/web/css/scroll-behavior/index.md b/files/fr/web/css/scroll-behavior/index.md
index b36cc1c52b..486f6a44f5 100644
--- a/files/fr/web/css/scroll-behavior/index.md
+++ b/files/fr/web/css/scroll-behavior/index.md
@@ -8,19 +8,20 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-behavior
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>scroll-behavior</code></strong> définit le comportement du défilement pour une boîte de défilement lorsque celui-ci provient de la navigation ou des API CSSOM.</p>
+La propriété** `scroll-behavior`** définit le comportement du défilement pour une boîte de défilement lorsque celui-ci provient de la navigation ou des API CSSOM.
 
-<p>Pour les autres défilements, appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (<em>viewport</em>).</p>
+Pour les autres défilements, appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (_viewport_).
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}
 
-<p>Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément <code>body</code>, elle ne se propage pas à la zone d'affichage (<em>viewport</em>).</p>
+Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément `body`, elle ne se propage pas à la zone d'affichage (_viewport_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-behavior: auto;
 scroll-behavior: smooth;
 
@@ -28,28 +29,27 @@ scroll-behavior: smooth;
 scroll-behavior: inherit;
 scroll-behavior: initial;
 scroll-behavior: unset;
-</pre>
+```
 
-<p>La propriété <code>scroll-behavior</code> est définie avec l'un des mots-clés suivants.</p>
+La propriété `scroll-behavior` est définie avec l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>La boîte de défilement progresse de façon instantanée.</dd>
- <dt><code>smooth</code></dt>
- <dd>Le défilement est doux et utilise une fonction de minutage définie par l'agent utilisateur pendant une période définie par l'agent utilisateur. Les agents utilisateur doivent respecter les conventions de la plate-forme s'il y en a.</dd>
-</dl>
+- `auto`
+  - : La boîte de défilement progresse de façon instantanée.
+- `smooth`
+  - : Le défilement est doux et utilise une fonction de minutage définie par l'agent utilisateur pendant une période définie par l'agent utilisateur. Les agents utilisateur doivent respecter les conventions de la plate-forme s'il y en a.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">a {
+```css
+a {
   display: inline-block;
   width: 50px;
   text-decoration: none;
@@ -78,32 +78,35 @@ scroll-page {
   height: 100%;
   font-size: 5em;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;nav&gt;
-  &lt;a href="#page-1"&gt;1&lt;/a&gt;
-  &lt;a href="#page-2"&gt;2&lt;/a&gt;
-  &lt;a href="#page-3"&gt;3&lt;/a&gt;
-&lt;/nav&gt;
-&lt;scroll-container&gt;
-  &lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
-  &lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
-  &lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
-&lt;/scroll-container&gt;</pre>
+```html
+<nav>
+  <a href="#page-1">1</a>
+  <a href="#page-2">2</a>
+  <a href="#page-3">3</a>
+</nav>
+<scroll-container>
+  <scroll-page id="page-1">1</scroll-page>
+  <scroll-page id="page-2">2</scroll-page>
+  <scroll-page id="page-3">3</scroll-page>
+</scroll-container>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", 250)}}</p>
+{{EmbedLiveSample("Exemples", "100%", 250)}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p><a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_vestibulaire">Les troubles du système vestibulaires</a> peuvent être causés par la maladie, l'âge ou des blessures. Ces troubles entraînent des vertiges, fatigues et nausées suite aux mouvements.</p>
+[Les troubles du système vestibulaires](https://fr.wikipedia.org/wiki/Syst%C3%A8me_vestibulaire) peuvent être causés par la maladie, l'âge ou des blessures. Ces troubles entraînent des vertiges, fatigues et nausées suite aux mouvements.
 
-<p>En utilisant la caractéristique média <code>prefers-reduced-motion</code>, on peut désactiver le défilement instantanné pour les utilisateurs qui ont paramétré leur système/navigateur afin de réduire les animations et mouvements :</p>
+En utilisant la caractéristique média `prefers-reduced-motion`, on peut désactiver le défilement instantanné pour les utilisateurs qui ont paramétré leur système/navigateur afin de réduire les animations et mouvements :
 
-<pre class="brush: css">html {
+```css
+html {
   scroll-behavior: smooth;
 }
 
@@ -111,29 +114,17 @@ scroll-page {
   html {
     scroll-behavior: auto;
   }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-behavior")}}</p>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}} | {{Spec2('CSSOM View')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-behavior")}}
diff --git a/files/fr/web/css/scroll-margin-block-end/index.md b/files/fr/web/css/scroll-margin-block-end/index.md
index a74b5f68b8..7c7d0e8d86 100644
--- a/files/fr/web/css/scroll-margin-block-end/index.md
+++ b/files/fr/web/css/scroll-margin-block-end/index.md
@@ -8,16 +8,17 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin-block-end
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-margin-block-end</code></strong> définit la marge de défilement de l'élément sur la fin de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+La propriété **`scroll-margin-block-end`** définit la marge de défilement de l'élément sur la fin de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 scroll-margin-block-end: 10px;
 scroll-margin-block-end: 1em;
 
@@ -25,40 +26,25 @@ scroll-margin-block-end: 1em;
 scroll-margin-block-end: inherit;
 scroll-margin-block-end: initial;
 scroll-margin-block-end: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant du conteneur de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block-end", "scroll-margin-block-end")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block-end", "scroll-margin-block-end")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-margin-block-end")}}</p>
+{{Compat("css.properties.scroll-margin-block-end")}}
diff --git a/files/fr/web/css/scroll-margin-block-start/index.md b/files/fr/web/css/scroll-margin-block-start/index.md
index 7b3be15a1c..4bb1ebddb5 100644
--- a/files/fr/web/css/scroll-margin-block-start/index.md
+++ b/files/fr/web/css/scroll-margin-block-start/index.md
@@ -8,16 +8,17 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin-block-start
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-margin-block-start</code></strong> définit la marge de défilement de l'élément sur le début de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+La propriété **`scroll-margin-block-start`** définit la marge de défilement de l'élément sur le début de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 scroll-margin-block-start: 10px;
 scroll-margin-block-start: 1em;
 
@@ -25,40 +26,25 @@ scroll-margin-block-start: 1em;
 scroll-margin-block-start: inherit;
 scroll-margin-block-start: initial;
 scroll-margin-block-start: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant du conteneur de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block-start", "scroll-margin-block-start")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block-start", "scroll-margin-block-start")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-margin-block-start")}}</p>
+{{Compat("css.properties.scroll-margin-block-start")}}
diff --git a/files/fr/web/css/scroll-margin-block/index.md b/files/fr/web/css/scroll-margin-block/index.md
index b6dc166495..eaab25baad 100644
--- a/files/fr/web/css/scroll-margin-block/index.md
+++ b/files/fr/web/css/scroll-margin-block/index.md
@@ -9,18 +9,19 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin-block
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-margin-block</code></strong> est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques <code>scroll-margin-block-start</code> et <code>scroll-margin-block-end</code>).</p>
+La propriété **`scroll-margin-block`** est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques `scroll-margin-block-start` et `scroll-margin-block-end`).
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-block.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-block.html")}}
 
-<p>Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (_snapport_). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 scroll-margin-block: 10px;
 scroll-margin-block: 1em .5em;
 
@@ -28,40 +29,25 @@ scroll-margin-block: 1em .5em;
 scroll-margin-block: inherit;
 scroll-margin-block: initial;
 scroll-margin-block: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant du conteneur de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block", "scroll-margin-block")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block", "scroll-margin-block")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-margin-block")}}</p>
+{{Compat("css.properties.scroll-margin-block")}}
diff --git a/files/fr/web/css/scroll-margin-bottom/index.md b/files/fr/web/css/scroll-margin-bottom/index.md
index 0986de2acb..3d19d3f48b 100644
--- a/files/fr/web/css/scroll-margin-bottom/index.md
+++ b/files/fr/web/css/scroll-margin-bottom/index.md
@@ -7,16 +7,17 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin-bottom
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-margin-bottom</code></strong> définit la marge de défilement de l'élément sur le côté bas. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+La propriété **`scroll-margin-bottom`** définit la marge de défilement de l'élément sur le côté bas. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 scroll-margin-bottom: 10px;
 scroll-margin-bottom: 1em;
 
@@ -24,40 +25,25 @@ scroll-margin-bottom: 1em;
 scroll-margin-bottom: inherit;
 scroll-margin-bottom: initial;
 scroll-margin-bottom: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant du conteneur de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-bottom", "scroll-margin-bottom")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-margin-bottom")}}</p>
+## Spécifications
+
+| Spécification                                                                                                                    | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-bottom", "scroll-margin-bottom")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-margin-bottom")}}
diff --git a/files/fr/web/css/scroll-margin-inline-end/index.md b/files/fr/web/css/scroll-margin-inline-end/index.md
index 18711e98e7..a59c15b930 100644
--- a/files/fr/web/css/scroll-margin-inline-end/index.md
+++ b/files/fr/web/css/scroll-margin-inline-end/index.md
@@ -8,16 +8,17 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin-inline-end
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-margin-inline-end</code></strong> définit la marge de défilement de l'élément sur la fin de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+La propriété **`scroll-margin-inline-end`** définit la marge de défilement de l'élément sur la fin de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 scroll-margin-inline-end: 10px;
 scroll-margin-inline-end: 1em;
 
@@ -25,40 +26,25 @@ scroll-margin-inline-end: 1em;
 scroll-margin-inline-end: inherit;
 scroll-margin-inline-end: initial;
 scroll-margin-inline-end: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant du conteneur de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-end", "scroll-margin-inline-end")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-end", "scroll-margin-inline-end")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-margin-inline-end")}}</p>
+{{Compat("css.properties.scroll-margin-inline-end")}}
diff --git a/files/fr/web/css/scroll-margin-inline-start/index.md b/files/fr/web/css/scroll-margin-inline-start/index.md
index 4df15ab81d..1c5ad849bf 100644
--- a/files/fr/web/css/scroll-margin-inline-start/index.md
+++ b/files/fr/web/css/scroll-margin-inline-start/index.md
@@ -8,16 +8,17 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin-inline-start
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-margin-inline-start</code></strong> définit la marge de défilement de l'élément sur le début de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+La propriété **`scroll-margin-inline-start`** définit la marge de défilement de l'élément sur le début de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 scroll-margin-inline-start: 10px;
 scroll-margin-inline-start: 1em;
 
@@ -25,40 +26,25 @@ scroll-margin-inline-start: 1em;
 scroll-margin-inline-start: inherit;
 scroll-margin-inline-start: initial;
 scroll-margin-inline-start: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant du conteneur de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-start", "scroll-margin-inline-start")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-start", "scroll-margin-inline-start")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-margin-inline-start")}}</p>
+{{Compat("css.properties.scroll-margin-inline-start")}}
diff --git a/files/fr/web/css/scroll-margin-inline/index.md b/files/fr/web/css/scroll-margin-inline/index.md
index d9bfd6a157..7aab947cc4 100644
--- a/files/fr/web/css/scroll-margin-inline/index.md
+++ b/files/fr/web/css/scroll-margin-inline/index.md
@@ -9,16 +9,17 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin-inline
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-margin-inline</code></strong> est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques <code>scroll-margin-inline-start</code> et <code>scroll-margin-inline-end</code>).</p>
+La propriété **`scroll-margin-inline`** est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques `scroll-margin-inline-start` et `scroll-margin-inline-end`).
 
-<p>Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (_snapport_). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 scroll-margin-inline: 10px;
 scroll-margin-inline: 1em .5em;
 
@@ -26,40 +27,25 @@ scroll-margin-inline: 1em .5em;
 scroll-margin-inline: inherit;
 scroll-margin-inline: initial;
 scroll-margin-inline: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant du conteneur de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline", "scroll-margin-inline")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline", "scroll-margin-inline")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-margin-inline")}}</p>
+{{Compat("css.properties.scroll-margin-inline")}}
diff --git a/files/fr/web/css/scroll-margin-left/index.md b/files/fr/web/css/scroll-margin-left/index.md
index 0dfa5d2da7..f043c044a6 100644
--- a/files/fr/web/css/scroll-margin-left/index.md
+++ b/files/fr/web/css/scroll-margin-left/index.md
@@ -7,16 +7,17 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin-left
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-margin-left</code></strong> définit la marge de défilement de l'élément sur le côté gauche. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+La propriété **`scroll-margin-left`** définit la marge de défilement de l'élément sur le côté gauche. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 scroll-margin-left: 10px;
 scroll-margin-left: 1em;
 
@@ -24,40 +25,25 @@ scroll-margin-left: 1em;
 scroll-margin-left: inherit;
 scroll-margin-left: initial;
 scroll-margin-left: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant du conteneur de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-left", "scroll-margin-left")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-margin-left")}}</p>
+## Spécifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-left", "scroll-margin-left")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-margin-left")}}
diff --git a/files/fr/web/css/scroll-margin-right/index.md b/files/fr/web/css/scroll-margin-right/index.md
index 40c8d6a091..3f70a4fe75 100644
--- a/files/fr/web/css/scroll-margin-right/index.md
+++ b/files/fr/web/css/scroll-margin-right/index.md
@@ -7,16 +7,17 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin-right
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-margin-right</code></strong> définit la marge de défilement de l'élément sur le côté droit. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+La propriété **`scroll-margin-right`** définit la marge de défilement de l'élément sur le côté droit. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 scroll-margin-right: 10px;
 scroll-margin-right: 1em;
 
@@ -24,40 +25,25 @@ scroll-margin-right: 1em;
 scroll-margin-right: inherit;
 scroll-margin-right: initial;
 scroll-margin-right: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant du conteneur de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-right", "scroll-margin-right")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-margin-right")}}</p>
+## Spécifications
+
+| Spécification                                                                                                                | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-right", "scroll-margin-right")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-margin-right")}}
diff --git a/files/fr/web/css/scroll-margin-top/index.md b/files/fr/web/css/scroll-margin-top/index.md
index 4224a5fa9d..cee2eadf16 100644
--- a/files/fr/web/css/scroll-margin-top/index.md
+++ b/files/fr/web/css/scroll-margin-top/index.md
@@ -7,16 +7,17 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin-top
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-margin-top</code></strong> définit la marge de défilement de l'élément sur le côté haut. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+La propriété **`scroll-margin-top`** définit la marge de défilement de l'élément sur le côté haut. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 scroll-margin-top: 10px;
 scroll-margin-top: 1em;
 
@@ -24,40 +25,25 @@ scroll-margin-top: 1em;
 scroll-margin-top: inherit;
 scroll-margin-top: initial;
 scroll-margin-top: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant du conteneur de défilement.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-margin-top")}}</p>
+## Spécifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-margin-top")}}
diff --git a/files/fr/web/css/scroll-margin/index.md b/files/fr/web/css/scroll-margin/index.md
index e26d030e58..ea05036bf2 100644
--- a/files/fr/web/css/scroll-margin/index.md
+++ b/files/fr/web/css/scroll-margin/index.md
@@ -8,17 +8,19 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-margin
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code>scroll-margin</code> est une propriété raccourcie qui permet de définir l'ensemble des propriétés <code>scroll-margin-top</code>, <code>scroll-margin-left</code>, <code>scroll-margin-bottom</code> et <code>scroll-margin-right</code> (de la même façon que la propriété <code>margin</code> définit les différents côtés des marges).</p>
-<div>{{EmbedInteractiveExample("pages/css/scroll-margin.html")}}</div>
+La propriété `scroll-margin` est une propriété raccourcie qui permet de définir l'ensemble des propriétés `scroll-margin-top`, `scroll-margin-left`, `scroll-margin-bottom` et `scroll-margin-right` (de la même façon que la propriété `margin` définit les différents côtés des marges).
 
-<p>Les valeurs de <code>scroll-margin</code> correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+{{EmbedInteractiveExample("pages/css/scroll-margin.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+Les valeurs de `scroll-margin` correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (_snapport_). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.
 
-<pre class="brush: css">/* Valeur de longueur */
-/* Type &lt;length&gt; */
+## Syntaxe
+
+```css
+/* Valeur de longueur */
+/* Type <length> */
 scroll-margin: 10px;
 scroll-margin: 1em .5em 1em 1em;
 
@@ -26,40 +28,25 @@ scroll-margin: 1em .5em 1em 1em;
 scroll-margin: inherit;
 scroll-margin: initial;
 scroll-margin: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Un décalage par rapport au côté correspondant pour le conteneur de défilement. Voir {{cssxref("&lt;length&gt;")}} pour les valeurs possibles.</dd>
-</dl>
+- `<length>`
+  - : Un décalage par rapport au côté correspondant pour le conteneur de défilement. Voir {{cssxref("&lt;length&gt;")}} pour les valeurs possibles.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-margin")}}</p>
+{{Compat("css.properties.scroll-margin")}}
diff --git a/files/fr/web/css/scroll-padding-block-end/index.md b/files/fr/web/css/scroll-padding-block-end/index.md
index 611ab1bdd8..67df2a0e80 100644
--- a/files/fr/web/css/scroll-padding-block-end/index.md
+++ b/files/fr/web/css/scroll-padding-block-end/index.md
@@ -8,21 +8,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding-block-end
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding-block-end</strong></code> est une propriété qui permet de définir le remplissage, à la fin de l'axe de bloc, entre l'élément et la zone de défilement.</p>
+La propriété **`scroll-padding-block-end`** est une propriété qui permet de définir le remplissage, à la fin de l'axe de bloc, entre l'élément et la zone de défilement.
 
-<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding-block-end: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding-block-end: 10px;
 scroll-padding-block-end: 1em;
 scroll-padding-block-end: 10%;
@@ -31,42 +32,27 @@ scroll-padding-block-end: 10%;
 scroll-padding-block-end: inherit;
 scroll-padding-block-end: initial;
 scroll-padding-block-end: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-end", "scroll-padding-block-end")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding-block-end")}}</p>
+## Specifications
+
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-end", "scroll-padding-block-end")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding-block-end")}}
diff --git a/files/fr/web/css/scroll-padding-block-start/index.md b/files/fr/web/css/scroll-padding-block-start/index.md
index 5d844f73ef..c3bf33befd 100644
--- a/files/fr/web/css/scroll-padding-block-start/index.md
+++ b/files/fr/web/css/scroll-padding-block-start/index.md
@@ -8,21 +8,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding-block-start
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding-block-start</strong></code> est une propriété qui permet de définir le remplissage, au début de l'axe de bloc, entre l'élément et la zone de défilement.</p>
+La propriété **`scroll-padding-block-start`** est une propriété qui permet de définir le remplissage, au début de l'axe de bloc, entre l'élément et la zone de défilement.
 
-<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding-block-start: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding-block-start: 10px;
 scroll-padding-block-start: 1em;
 scroll-padding-block-start: 10%;
@@ -31,42 +32,27 @@ scroll-padding-block-start: 10%;
 scroll-padding-block-start: inherit;
 scroll-padding-block-start: initial;
 scroll-padding-block-start: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-start", "scroll-padding-block-start")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding-block-start")}}</p>
+## Specifications
+
+| Spécification                                                                                                                                    | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-start", "scroll-padding-block-start")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding-block-start")}}
diff --git a/files/fr/web/css/scroll-padding-block/index.md b/files/fr/web/css/scroll-padding-block/index.md
index 4e7e1f9fed..53e11c5593 100644
--- a/files/fr/web/css/scroll-padding-block/index.md
+++ b/files/fr/web/css/scroll-padding-block/index.md
@@ -9,20 +9,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding-block
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding-block</strong></code> est une propriété raccourcie qui permet de définir le remplissage, sur l'axe de bloc, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir <code>scroll-padding-block-end</code> et <code>scroll-padding-block-start</code>.</p>
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block.html")}}</div>
+La propriété **`scroll-padding-block`** est une propriété raccourcie qui permet de définir le remplissage, sur l'axe de bloc, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir `scroll-padding-block-end` et `scroll-padding-block-start`.
 
-<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+{{EmbedInteractiveExample("pages/css/scroll-padding-block.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+## Syntaxe
+
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding-block: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding-block: 10px;
 scroll-padding-block: 1em .5em;
 scroll-padding-block: 10%;
@@ -31,42 +33,27 @@ scroll-padding-block: 10%;
 scroll-padding-block: inherit;
 scroll-padding-block: initial;
 scroll-padding-block: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block", "scroll-padding-block")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding-block")}}</p>
+## Specifications
+
+| Spécification                                                                                                                    | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block", "scroll-padding-block")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding-block")}}
diff --git a/files/fr/web/css/scroll-padding-bottom/index.md b/files/fr/web/css/scroll-padding-bottom/index.md
index d592b7a908..04316491f9 100644
--- a/files/fr/web/css/scroll-padding-bottom/index.md
+++ b/files/fr/web/css/scroll-padding-bottom/index.md
@@ -7,21 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding-bottom
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding-bottom</strong></code> est une propriété qui permet de définir le remplissage sur le côté bas entre l'élément et la zone de défilement.</p>
+La propriété **`scroll-padding-bottom`** est une propriété qui permet de définir le remplissage sur le côté bas entre l'élément et la zone de défilement.
 
-<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding-bottom: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding-bottom: 10px;
 scroll-padding-bottom: 1em;
 scroll-padding-bottom: 10%;
@@ -30,42 +31,27 @@ scroll-padding-bottom: 10%;
 scroll-padding-bottom: inherit;
 scroll-padding-bottom: initial;
 scroll-padding-bottom: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-bottom", "scroll-padding-bottom")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding-bottom")}}</p>
+## Specifications
+
+| Spécification                                                                                                                    | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-bottom", "scroll-padding-bottom")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding-bottom")}}
diff --git a/files/fr/web/css/scroll-padding-inline-end/index.md b/files/fr/web/css/scroll-padding-inline-end/index.md
index f85b1011ab..c5f16758c4 100644
--- a/files/fr/web/css/scroll-padding-inline-end/index.md
+++ b/files/fr/web/css/scroll-padding-inline-end/index.md
@@ -8,21 +8,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding-inline-end
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding-inline-end</strong></code> est une propriété qui permet de définir le remplissage, à la fin de l'axe en ligne, entre l'élément et la zone de défilement.</p>
+La propriété **`scroll-padding-inline-end`** est une propriété qui permet de définir le remplissage, à la fin de l'axe en ligne, entre l'élément et la zone de défilement.
 
-<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding-inline-end: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding-inline-end: 10px;
 scroll-padding-inline-end: 1em;
 scroll-padding-inline-end: 10%;
@@ -31,42 +32,27 @@ scroll-padding-inline-end: 10%;
 scroll-padding-inline-end: inherit;
 scroll-padding-inline-end: initial;
 scroll-padding-inline-end: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-end", "scroll-padding-inline-end")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding-inline-end")}}</p>
+## Specifications
+
+| Spécification                                                                                                                                | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-end", "scroll-padding-inline-end")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding-inline-end")}}
diff --git a/files/fr/web/css/scroll-padding-inline-start/index.md b/files/fr/web/css/scroll-padding-inline-start/index.md
index 554c8f1ae2..b46abca0f7 100644
--- a/files/fr/web/css/scroll-padding-inline-start/index.md
+++ b/files/fr/web/css/scroll-padding-inline-start/index.md
@@ -8,21 +8,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding-inline-start
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding-inline-start</strong></code> est une propriété qui permet de définir le remplissage, au début de l'axe en ligne, entre l'élément et la zone de défilement.</p>
+La propriété **`scroll-padding-inline-start`** est une propriété qui permet de définir le remplissage, au début de l'axe en ligne, entre l'élément et la zone de défilement.
 
-<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding-inline-start: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding-inline-start: 10px;
 scroll-padding-inline-start: 1em;
 scroll-padding-inline-start: 10%;
@@ -31,42 +32,27 @@ scroll-padding-inline-start: 10%;
 scroll-padding-inline-start: inherit;
 scroll-padding-inline-start: initial;
 scroll-padding-inline-start: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-start", "scroll-padding-inline-start")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding-inline-start")}}</p>
+## Specifications
+
+| Spécification                                                                                                                                    | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-start", "scroll-padding-inline-start")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding-inline-start")}}
diff --git a/files/fr/web/css/scroll-padding-inline/index.md b/files/fr/web/css/scroll-padding-inline/index.md
index 3aadefb3d9..8823bea51f 100644
--- a/files/fr/web/css/scroll-padding-inline/index.md
+++ b/files/fr/web/css/scroll-padding-inline/index.md
@@ -9,21 +9,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding-inline
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding-inline</strong></code> est une propriété raccourcie qui permet de définir le remplissage, sur l'axe en ligne, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir <code>scroll-padding-inline-end</code> et <code>scroll-padding-inline-start</code>.</p>
+La propriété **`scroll-padding-inline`** est une propriété raccourcie qui permet de définir le remplissage, sur l'axe en ligne, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir `scroll-padding-inline-end` et `scroll-padding-inline-start`.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}
 
-<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding-inline: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding-inline: 10px;
 scroll-padding-inline: 1em .5em;
 scroll-padding-inline: 10%;
@@ -32,42 +33,27 @@ scroll-padding-inline: 10%;
 scroll-padding-inline: inherit;
 scroll-padding-inline: initial;
 scroll-padding-inline: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline", "scroll-padding-inline")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding-inline")}}</p>
+## Specifications
+
+| Spécification                                                                                                                    | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline", "scroll-padding-inline")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding-inline")}}
diff --git a/files/fr/web/css/scroll-padding-left/index.md b/files/fr/web/css/scroll-padding-left/index.md
index 92133375ec..1895457177 100644
--- a/files/fr/web/css/scroll-padding-left/index.md
+++ b/files/fr/web/css/scroll-padding-left/index.md
@@ -7,21 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding-left
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding-left</strong></code> est une propriété qui permet de définir le remplissage sur le côté gauche entre l'élément et la zone de défilement.</p>
+La propriété **`scroll-padding-left`** est une propriété qui permet de définir le remplissage sur le côté gauche entre l'élément et la zone de défilement.
 
-<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding-left: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding-left: 10px;
 scroll-padding-left: 1em;
 scroll-padding-left: 10%;
@@ -30,42 +31,27 @@ scroll-padding-left: 10%;
 scroll-padding-left: inherit;
 scroll-padding-left: initial;
 scroll-padding-left: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-left", "scroll-padding-left")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding-left")}}</p>
+## Spécifications
+
+| Spécification                                                                                                                | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-left", "scroll-padding-left")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding-left")}}
diff --git a/files/fr/web/css/scroll-padding-right/index.md b/files/fr/web/css/scroll-padding-right/index.md
index 5640c3bcd9..bfa2477a11 100644
--- a/files/fr/web/css/scroll-padding-right/index.md
+++ b/files/fr/web/css/scroll-padding-right/index.md
@@ -7,21 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding-right
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding-right</strong></code> est une propriété qui permet de définir le remplissage sur le côté droit entre l'élément et la zone de défilement.</p>
+La propriété **`scroll-padding-right`** est une propriété qui permet de définir le remplissage sur le côté droit entre l'élément et la zone de défilement.
 
-<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding-right: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding-right: 10px;
 scroll-padding-right: 1em;
 scroll-padding-right: 10%;
@@ -30,42 +31,27 @@ scroll-padding-right: 10%;
 scroll-padding-right: inherit;
 scroll-padding-right: initial;
 scroll-padding-right: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-right", "scroll-padding-right")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding-right")}}</p>
+## Specifications
+
+| Spécification                                                                                                                    | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-right", "scroll-padding-right")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding-right")}}
diff --git a/files/fr/web/css/scroll-padding-top/index.md b/files/fr/web/css/scroll-padding-top/index.md
index 0239142642..eb6a67bc4a 100644
--- a/files/fr/web/css/scroll-padding-top/index.md
+++ b/files/fr/web/css/scroll-padding-top/index.md
@@ -7,21 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding-top
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding-top</strong></code> est une propriété qui permet de définir le remplissage sur le côté haut entre l'élément et la zone de défilement.</p>
+La propriété **`scroll-padding-top`** est une propriété qui permet de définir le remplissage sur le côté haut entre l'élément et la zone de défilement.
 
-<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding-top: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding-top: 10px;
 scroll-padding-top: 1em;
 scroll-padding-top: 10%;
@@ -30,42 +31,27 @@ scroll-padding-top: 10%;
 scroll-padding-top: inherit;
 scroll-padding-top: initial;
 scroll-padding-top: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-top", "scroll-padding-top")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding-top")}}</p>
+## Specifications
+
+| Spécification                                                                                                            | État                                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-top", "scroll-padding-top")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding-top")}}
diff --git a/files/fr/web/css/scroll-padding/index.md b/files/fr/web/css/scroll-padding/index.md
index 4cc7897009..f95ce772a9 100644
--- a/files/fr/web/css/scroll-padding/index.md
+++ b/files/fr/web/css/scroll-padding/index.md
@@ -8,21 +8,22 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-padding
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>scroll-padding</strong></code> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir l'ensemble des propriétés <code>scroll-padding-top</code>, <code>scroll-padding-right</code>, <code>scroll-padding-bottom</code> et <code>scroll-padding-left</code> (de la même façon que la propriété {{cssxref("padding")}} permet de définir les propriétés détaillées associées).</p>
+La propriété **`scroll-padding`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir l'ensemble des propriétés `scroll-padding-top`, `scroll-padding-right`, `scroll-padding-bottom` et `scroll-padding-left` (de la même façon que la propriété {{cssxref("padding")}} permet de définir les propriétés détaillées associées).
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}
 
-<p>Les propriétés <code>scroll-padding-*</code> permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+Les propriétés `scroll-padding-*` permettent de définir des décalages par rapport à la zone de défilement de l'élément (_scrollport_). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-padding: auto;
 
 /* Valeurs de longueur */
-/* Type &lt;length&gt; */
+/* Type <length> */
 scroll-padding: 10px;
 scroll-padding: 1em .5em 1em 1em;
 scroll-padding: 10%;
@@ -31,42 +32,27 @@ scroll-padding: 10%;
 scroll-padding: inherit;
 scroll-padding: initial;
 scroll-padding: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. Cette valeur, de type {{cssxref("&lt;length-percentage&gt;")}}, est une longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) valide.</dd>
- <dt><code>auto</code></dt>
- <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. Cette valeur, de type {{cssxref("&lt;length-percentage&gt;")}}, est une longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) valide.
+- `auto`
+  - : Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding", "scroll-padding")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-padding")}}</p>
+## Specifications
+
+| Spécification                                                                                                    | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding", "scroll-padding")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-padding")}}
diff --git a/files/fr/web/css/scroll-snap-align/index.md b/files/fr/web/css/scroll-snap-align/index.md
index 713109b208..efa06bbf4c 100644
--- a/files/fr/web/css/scroll-snap-align/index.md
+++ b/files/fr/web/css/scroll-snap-align/index.md
@@ -7,13 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-snap-align
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-snap-align</code></strong> définit la position de la boîte d'accroche (<em>snap positions</em>) comme un alignement entre la zone d'accroche et le conteneur (la boîte de défilement de l'élément). Les deux valeurs fournies à cette propriété s'appliquent respectivement à l'axe de bloc et à l'axe en ligne. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.</p>
+La propriété **`scroll-snap-align`** définit la position de la boîte d'accroche (_snap positions_) comme un alignement entre la zone d'accroche et le conteneur (la boîte de défilement de l'élément). Les deux valeurs fournies à cette propriété s'appliquent respectivement à l'axe de bloc et à l'axe en ligne. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-snap-align: none;
 scroll-snap-align: start end;
 scroll-snap-align: center;
@@ -22,50 +23,33 @@ scroll-snap-align: center;
 scroll-snap-align: inherit;
 scroll-snap-align: initial;
 scroll-snap-align: unset;
-</pre>
+```
 
-<h3 id="Values">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>La boîte ne définit aucune position d'accroche sur cet axe.</dd>
- <dt><code>start</code></dt>
- <dd>Le point d'alignement situé au début de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.</dd>
- <dt><code>end</code></dt>
- <dd>Le point d'alignement situé à la fin de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.</dd>
- <dt><code>center</code></dt>
- <dd>Le point d'alignement situé au centre de l'axe et à l'intérieur de la boîte de défilement est une position d'accroche sur cet axe.</dd>
-</dl>
+- `none`
+  - : La boîte ne définit aucune position d'accroche sur cet axe.
+- `start`
+  - : Le point d'alignement situé au début de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.
+- `end`
+  - : Le point d'alignement situé à la fin de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.
+- `center`
+  - : Le point d'alignement situé au centre de l'axe et à l'intérieur de la boîte de défilement est une position d'accroche sur cet axe.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-align", "scroll-snap-align")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | État                                             | Commentaires       |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-align", "scroll-snap-align")}} | {{Spec2("CSS Scroll Snap Points")}} | Initial definition |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-snap-align")}}</p>
+{{Compat("css.properties.scroll-snap-align")}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Pour Safari, la syntaxe utilisant les deux valeurs intervertit les deux valeurs (la première cible l'alignement en ligne et la seconde l'alignement en bloc). Voir <a href="https://bugs.webkit.org/show_bug.cgi?id=191865">le bug n°191865</a>.</p>
-</div>
+> **Attention :** Pour Safari, la syntaxe utilisant les deux valeurs intervertit les deux valeurs (la première cible l'alignement en ligne et la seconde l'alignement en bloc). Voir [le bug n°191865](https://bugs.webkit.org/show_bug.cgi?id=191865).
diff --git a/files/fr/web/css/scroll-snap-coordinate/index.md b/files/fr/web/css/scroll-snap-coordinate/index.md
index fae93562a9..0e775e51fe 100644
--- a/files/fr/web/css/scroll-snap-coordinate/index.md
+++ b/files/fr/web/css/scroll-snap-coordinate/index.md
@@ -8,16 +8,17 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-snap-coordinate
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p>La propriété <strong> <code>scroll-snap-coordinate</code></strong> définit les coordonnées horizontale et verticale, au sein de l'élément, qui s'aligneront avec les points définis par {{cssxref("scroll-snap-destination")}} dans le conteneur le plus proche en termes de parenté.</p>
+La propriété **`scroll-snap-coordinate`** définit les coordonnées horizontale et verticale, au sein de l'élément, qui s'aligneront avec les points définis par {{cssxref("scroll-snap-destination")}} dans le conteneur le plus proche en termes de parenté.
 
-<p>Si l'élément a été transformé, les coordonnées sont transformées de la même façon afin d'aligner le point d'accroche avec l'élément tel qu'il est affiché.</p>
+Si l'élément a été transformé, les coordonnées sont transformées de la même façon afin d'aligner le point d'accroche avec l'élément tel qu'il est affiché.
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 scroll-snap-coordinate: none;
 
-/* Valeurs de &lt;position&gt; */
+/* Valeurs de <position> */
 /* Une paire de coordonnées */
 scroll-snap-coordinate: 50px 50px;
 /* Plusieurs coordonnées */
@@ -27,64 +28,64 @@ scroll-snap-coordinate: 100px 100px, 100px bottom;
 scroll-snap-coordinate: inherit;
 scroll-snap-coordinate: initial;
 scroll-snap-coordinate: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>L'élément ne contribue à aucun point d'accrochage.</dd>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Définit le décalage du point d'accrochage par rapport à la boîte de bordure le l'élément. Pour chaque paire, la première valeur indique l'abscisse et la seconde, l'ordonnée. Pour plus d'informations sur les valeurs possibles, voir {{cssxref("&lt;position&gt;")}}.</dd>
-</dl>
+- `none`
+  - : L'élément ne contribue à aucun point d'accrochage.
+- `<position>`
+  - : Définit le décalage du point d'accrochage par rapport à la boîte de bordure le l'élément. Pour chaque paire, la première valeur indique l'abscisse et la seconde, l'ordonnée. Pour plus d'informations sur les valeurs possibles, voir {{cssxref("&lt;position&gt;")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;
-    &lt;p&gt;Coordonnées (0, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer coordinate0"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-
-  &lt;div&gt;
-    &lt;p&gt;Coordonnées (25, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer coordinate25"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-
-  &lt;div&gt;
-    &lt;p&gt;Coordonnées (50, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer coordinate50"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">#container {
+## Exemples
+
+### HTML
+
+```html
+<div id="container">
+  <div>
+    <p>Coordonnées (0, 0)</p>
+    <div class="scrollContainer coordinate0">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>Coordonnées (25, 0)</p>
+    <div class="scrollContainer coordinate25">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>Coordonnées (50, 0)</p>
+    <div class="scrollContainer coordinate50">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+</div>
+```
+
+### CSS
+
+```css
+#container {
   display: flex;
 }
 
-#container &gt; div:nth-child(-n+2) {
+#container > div:nth-child(-n+2) {
   margin-right: 20px;
 }
 
@@ -96,7 +97,7 @@ scroll-snap-coordinate: unset;
   font-size: 0;
 }
 
-.scrollContainer &gt; div {
+.scrollContainer > div {
   width: 100px;
   height: 100px;
   display: inline-block;
@@ -105,51 +106,39 @@ scroll-snap-coordinate: unset;
   font-size: 50px;
 }
 
-.coordinate0 &gt; div {
+.coordinate0 > div {
   scroll-snap-coordinate: 0 0;
 }
 
-.coordinate25 &gt; div {
+.coordinate25 > div {
   scroll-snap-coordinate: 25px 0;
 }
 
-.coordinate50 &gt; div {
+.coordinate50 > div {
   scroll-snap-coordinate: 50px 0;
 }
 
-.scrollContainer &gt; div:nth-child(even) {
+.scrollContainer > div:nth-child(even) {
   background-color: #87ea87;
 }
 
-.scrollContainer &gt; div:nth-child(odd) {
+.scrollContainer > div:nth-child(odd) {
   background-color: #87ccea;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", "170")}}</p>
+{{EmbedLiveSample("Exemples", "100%", "170")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                                           | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-snap-coordinate")}}</p>
+{{Compat("css.properties.scroll-snap-coordinate")}}
diff --git a/files/fr/web/css/scroll-snap-destination/index.md b/files/fr/web/css/scroll-snap-destination/index.md
index 288e0529c9..b92ac8f852 100644
--- a/files/fr/web/css/scroll-snap-destination/index.md
+++ b/files/fr/web/css/scroll-snap-destination/index.md
@@ -8,73 +8,74 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-snap-destination
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p>La propriété <strong><code>scroll-snap-destination</code></strong> définit les coordonnées horizontale et verticale des points d'accroche dans le {{Glossary("viewport")}} du conteneur.</p>
+La propriété **`scroll-snap-destination`** définit les coordonnées horizontale et verticale des points d'accroche dans le {{Glossary("viewport")}} du conteneur.
 
-<pre class="brush: css  no-line-numbers">/* Valeur &lt;position&gt; */
+```css
+/* Valeur <position> */
 scroll-snap-destination: 400px 600px;
 
 /* Valeurs globales */
 scroll-snap-destination: inherit;
 scroll-snap-destination: initial;
 scroll-snap-destination: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Définit le décalage entre le bord du viewport du conteneur et le point d'accroche à utiliser lors du défilement. La première valeur indique la coordonnée horizontale et la seconde indique la coordonnée verticale.</dd>
-</dl>
+- `<position>`
+  - : Définit le décalage entre le bord du viewport du conteneur et le point d'accroche à utiliser lors du défilement. La première valeur indique la coordonnée horizontale et la seconde indique la coordonnée verticale.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;
-    &lt;p&gt;Coordonnées (0, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer destination0"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-
-  &lt;div&gt;
-    &lt;p&gt;Coordonnées (25, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer destination25"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-
-  &lt;div&gt;
-    &lt;p&gt;Coordonnées (50, 0)&lt;/p&gt;
-    &lt;div class="scrollContainer destination50"&gt;
-      &lt;div&gt;1&lt;/div&gt;
-      &lt;div&gt;2&lt;/div&gt;
-      &lt;div&gt;3&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">#container {
+## Exemples
+
+### HTML
+
+```html
+<div id="container">
+  <div>
+    <p>Coordonnées (0, 0)</p>
+    <div class="scrollContainer destination0">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>Coordonnées (25, 0)</p>
+    <div class="scrollContainer destination25">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>Coordonnées (50, 0)</p>
+    <div class="scrollContainer destination50">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+</div>
+```
+
+### CSS
+
+```css
+#container {
   display: flex;
 }
 
-#container &gt; div:nth-child(-n+2) {
+#container > div:nth-child(-n+2) {
   margin-right: 20px;
 }
 
@@ -100,7 +101,7 @@ scroll-snap-destination: unset;
   scroll-snap-destination: 50px 0;
 }
 
-.scrollContainer &gt; div {
+.scrollContainer > div {
   width: 100px;
   height: 100px;
   display: inline-block;
@@ -109,39 +110,27 @@ scroll-snap-destination: unset;
   font-size: 50px;
 }
 
-.scrollContainer &gt; div:nth-child(even) {
+.scrollContainer > div:nth-child(even) {
   background-color: #87EA87;
 }
 
-.scrollContainer &gt; div:nth-child(odd) {
+.scrollContainer > div:nth-child(odd) {
   background-color: #87CCEA;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", "170")}}</p>
+{{EmbedLiveSample("Exemples", "100%", "170")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État                                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-snap-destination")}}</p>
+{{Compat("css.properties.scroll-snap-destination")}}
diff --git a/files/fr/web/css/scroll-snap-points-x/index.md b/files/fr/web/css/scroll-snap-points-x/index.md
index 6fbbec83fa..752ecde0f1 100644
--- a/files/fr/web/css/scroll-snap-points-x/index.md
+++ b/files/fr/web/css/scroll-snap-points-x/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-snap-points-x
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p>La propriété <strong><code>scroll-snap-points-x</code></strong> définit le positionnement horizontal des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.</p>
+La propriété **`scroll-snap-points-x`** définit le positionnement horizontal des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 scroll-snap-points-x: none;
 
 /* Répétition des points d'accroche */
@@ -22,36 +23,37 @@ scroll-snap-points-x: repeat(400px);
 scroll-snap-points-x: inherit;
 scroll-snap-points-x: initial;
 scroll-snap-points-x: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.</dd>
- <dt><code>repeat(&lt;length-percentage&gt;)</code></dt>
- <dd>Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.</dd>
-</dl>
+- `none`
+  - : Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.
+- `repeat(<length-percentage>)`
+  - : Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;1&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="container">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   width: 200px;
   overflow: auto;
   white-space: nowrap;
@@ -60,7 +62,7 @@ scroll-snap-points-x: unset;
   font-size: 0;
 }
 
-#container &gt; div {
+#container > div {
   width: 200px;
   height: 200px;
   display: inline-block;
@@ -69,24 +71,25 @@ scroll-snap-points-x: unset;
   font-size: 100px;
 }
 
-#container &gt; div:nth-child(even) {
+#container > div:nth-child(even) {
   background-color: #87ea87;
 }
 
-#container &gt; div:nth-child(odd) {
+#container > div:nth-child(odd) {
   background-color: #87ccea;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 220, 220)}}</p>
+{{EmbedLiveSample("Exemples", 220, 220)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété avait été définie dans <a href="http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points">un brouillon de spécification pour le module CSS sur les points d'accroche</a> mais <a href="https://github.com/w3c/csswg-drafts/commit/922af86be789222b8490c92038d1a5142e1c1198">a ensuite été retirée</a> de la spécification pour être remplacée par <a href="https://lists.w3.org/Archives/Public/www-style/2015Nov/0266.html">l'accroche basée sur les éléments</a>.</p>
+Cette propriété avait été définie dans [un brouillon de spécification pour le module CSS sur les points d'accroche](http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points) mais [a ensuite été retirée](https://github.com/w3c/csswg-drafts/commit/922af86be789222b8490c92038d1a5142e1c1198) de la spécification pour être remplacée par [l'accroche basée sur les éléments](https://lists.w3.org/Archives/Public/www-style/2015Nov/0266.html).
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-snap-points-x")}}</p>
+{{Compat("css.properties.scroll-snap-points-x")}}
diff --git a/files/fr/web/css/scroll-snap-points-y/index.md b/files/fr/web/css/scroll-snap-points-y/index.md
index c5171c3234..f8d1e9f162 100644
--- a/files/fr/web/css/scroll-snap-points-y/index.md
+++ b/files/fr/web/css/scroll-snap-points-y/index.md
@@ -9,11 +9,12 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-snap-points-y
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p>La propriété <strong><code>scroll-snap-points-y</code></strong> définit le positionnement vertical des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.</p>
+La propriété **`scroll-snap-points-y`** définit le positionnement vertical des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 scroll-snap-points-y: none;
 
 /* Répétition des points d'accroche */
@@ -23,36 +24,37 @@ scroll-snap-points-y: repeat(400px);
 scroll-snap-points-y: inherit;
 scroll-snap-points-y: initial;
 scroll-snap-points-y: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.</dd>
- <dt><code>repeat(&lt;length-percentage&gt;)</code></dt>
- <dd>Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.</dd>
-</dl>
+- `none`
+  - : Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.
+- `repeat(<length-percentage>)`
+  - : Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;1&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="container">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   height: 200px;
   width: 220px;
   overflow-x: hidden;
@@ -62,7 +64,7 @@ scroll-snap-points-y: unset;
   font-size: 0;
 }
 
-#container &gt; div {
+#container > div {
   width: 200px;
   height: 200px;
   display: inline-block;
@@ -71,24 +73,25 @@ scroll-snap-points-y: unset;
   font-size: 100px;
 }
 
-#container &gt; div:nth-child(even) {
+#container > div:nth-child(even) {
   background-color: #87EA87;
 }
 
-#container &gt; div:nth-child(odd) {
+#container > div:nth-child(odd) {
   background-color: #87CCEA;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 220, 220)}}</p>
+{{EmbedLiveSample("Exemples", 220, 220)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété avait été définie dans <a href="http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points">un brouillon de spécification pour le module CSS sur les points d'accroche</a> mais <a href="https://github.com/w3c/csswg-drafts/commit/922af86be789222b8490c92038d1a5142e1c1198">a ensuite été retirée</a> de la spécification pour être remplacée par <a href="https://lists.w3.org/Archives/Public/www-style/2015Nov/0266.html">l'accroche basée sur les éléments</a>.</p>
+Cette propriété avait été définie dans [un brouillon de spécification pour le module CSS sur les points d'accroche](http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points) mais [a ensuite été retirée](https://github.com/w3c/csswg-drafts/commit/922af86be789222b8490c92038d1a5142e1c1198) de la spécification pour être remplacée par [l'accroche basée sur les éléments](https://lists.w3.org/Archives/Public/www-style/2015Nov/0266.html).
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-snap-points-y")}}</p>
+{{Compat("css.properties.scroll-snap-points-y")}}
diff --git a/files/fr/web/css/scroll-snap-stop/index.md b/files/fr/web/css/scroll-snap-stop/index.md
index 68a536bdf0..59d4722096 100644
--- a/files/fr/web/css/scroll-snap-stop/index.md
+++ b/files/fr/web/css/scroll-snap-stop/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-snap-stop
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>scroll-snap-stop</code></strong> définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d'accroche.</p>
+La propriété **`scroll-snap-stop`** définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d'accroche.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-snap-stop: normal;
 scroll-snap-stop: always;
 
@@ -19,28 +20,27 @@ scroll-snap-stop: always;
 scroll-snap-type: inherit;
 scroll-snap-type: initial;
 scroll-snap-type: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Lorsque la zone d'affichage ({{Glossary("viewport")}}) du conteneur défile, elle peut passer sur certaines positions d'accroche.</dd>
- <dt><code>always</code></dt>
- <dd>Le conteneur de défilement ne peut pas passer sur une position d'accroche. Le conteneur doit « s'accrocher » dès la première position d'accroche de l'élément.</dd>
-</dl>
+- `normal`
+  - : Lorsque la zone d'affichage ({{Glossary("viewport")}}) du conteneur défile, elle peut passer sur certaines positions d'accroche.
+- `always`
+  - : Le conteneur de défilement ne peut pas passer sur une position d'accroche. Le conteneur doit « s'accrocher » dès la première position d'accroche de l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* setup */
+```css
+/* setup */
 :root, body {
   height: 100%;
   display: flex;
@@ -68,10 +68,10 @@ scroll-snap-type: unset;
   flex-flow: column nowrap;
 }
 /* definite scroll snap */
-.mandatory-scroll-snapping &gt; div {
+.mandatory-scroll-snapping > div {
   scroll-snap-stop: always;
 }
-.proximity-scroll-snapping &gt; div {
+.proximity-scroll-snapping > div {
   scroll-snap-stop: normal;
 }
 /* scroll-snap */
@@ -91,132 +91,120 @@ scroll-snap-type: unset;
   scroll-snap-type: y proximity;
 }
 
-.container &gt; div {
+.container > div {
   text-align: center;
   scroll-snap-align: center;
   flex: none;
 }
 
-.x.container &gt; div {
+.x.container > div {
   line-height: 128px;
   font-size: 64px;
   width: 100%;
   height: 128px;
 }
 
-.y.container &gt; div {
+.y.container > div {
   line-height: 256px;
   font-size: 128px;
   width: 256px;
   height: 256px;
 }
 /* appearance fixes */
-.y.container &gt; div:first-child {
+.y.container > div:first-child {
   line-height: 1.3;
   font-size: 64px;
 }
 /* coloration */
-.container &gt; div:nth-child(even) {
+.container > div:nth-child(even) {
   background-color: #87EA87;
 }
 
-.container &gt; div:nth-child(odd) {
+.container > div:nth-child(odd) {
   background-color: #87CCEA;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;X Mand. LTR &lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;X Proximity LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;X Mandatory RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;X Proximity RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%", "1630")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-snap-stop")}}</p>
+```
+
+### HTML
+
+```html
+<div class="container x mandatory-scroll-snapping" dir="ltr">
+  <div>X Mand. LTR </div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="ltr">
+  <div>X Proximity LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="ltr">
+  <div>Y Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="ltr">
+  <div>Y Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x mandatory-scroll-snapping" dir="rtl">
+  <div>X Mandatory RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="rtl">
+  <div>X Proximity RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="rtl">
+  <div>Y Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="rtl">
+  <div>Y Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%", "1630")}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-snap-stop")}}
diff --git a/files/fr/web/css/scroll-snap-type-x/index.md b/files/fr/web/css/scroll-snap-type-x/index.md
index 57bb444c1c..51bdfba400 100644
--- a/files/fr/web/css/scroll-snap-type-x/index.md
+++ b/files/fr/web/css/scroll-snap-type-x/index.md
@@ -8,13 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-snap-type-x
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p>La propriété <strong><code>scroll-snap-type-x</code></strong> définit la « force » avec laquelle les points d'accroche sont respectés lors d'un défilement horizontal.</p>
+La propriété **`scroll-snap-type-x`** définit la « force » avec laquelle les points d'accroche sont respectés lors d'un défilement horizontal.
 
-<p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p>
+La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-snap-type-x: none;
 scroll-snap-type-x: mandatory;
 scroll-snap-type-x: proximity;
@@ -23,31 +24,29 @@ scroll-snap-type-x: proximity;
 scroll-snap-type-x: inherit;
 scroll-snap-type-x: initial;
 scroll-snap-type-x: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Lorsque le {{Glossary("viewport")}} du conteneur défile horizontalement, on ignore les points d'accroche.</dd>
- <dt><code>mandatory</code></dt>
- <dd>Le <em>viewport</em> visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.</dd>
- <dt><code>proximity</code></dt>
- <dd>Le <em>viewport</em> visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajuster pour rester sur ce point d'accroche.</dd>
-</dl>
+- `none`
+  - : Lorsque le {{Glossary("viewport")}} du conteneur défile horizontalement, on ignore les points d'accroche.
+- `mandatory`
+  - : Le _viewport_ visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.
+- `proximity`
+  - : Le _viewport_ visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajuster pour rester sur ce point d'accroche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<pre class="syntaxbox">none | mandatory | proximity</pre>
+    none | mandatory | proximity
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété ne fait partie d'aucune spécification.</p>
+Cette propriété ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-snap-type-x")}}</p>
+{{Compat("css.properties.scroll-snap-type-x")}}
diff --git a/files/fr/web/css/scroll-snap-type-y/index.md b/files/fr/web/css/scroll-snap-type-y/index.md
index e0106320c1..2f1daf34e3 100644
--- a/files/fr/web/css/scroll-snap-type-y/index.md
+++ b/files/fr/web/css/scroll-snap-type-y/index.md
@@ -8,13 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-snap-type-y
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p>La propriété <strong><code>scroll-snap-type-y</code></strong> définit la « force » avec laquelle les points d'accroche sont respectés lors d'un déroulement vertical.</p>
+La propriété **`scroll-snap-type-y`** définit la « force » avec laquelle les points d'accroche sont respectés lors d'un déroulement vertical.
 
-<p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p>
+La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scroll-snap-type-y: none;
 scroll-snap-type-y: mandatory;
 scroll-snap-type-y: proximity;
@@ -23,31 +24,29 @@ scroll-snap-type-y: proximity;
 scroll-snap-type-y: inherit;
 scroll-snap-type-y: initial;
 scroll-snap-type-y: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Lorsque le {{Glossary("viewport")}} du conteneur défile verticalement, on ignore les points d'accroche.</dd>
- <dt><code>mandatory</code></dt>
- <dd>Le <em>viewport</em> visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.</dd>
- <dt><code>proximity</code></dt>
- <dd>Le <em>viewport</em> visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajuster pour rester sur ce point d'accroche.</dd>
-</dl>
+- `none`
+  - : Lorsque le {{Glossary("viewport")}} du conteneur défile verticalement, on ignore les points d'accroche.
+- `mandatory`
+  - : Le _viewport_ visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.
+- `proximity`
+  - : Le _viewport_ visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajuster pour rester sur ce point d'accroche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<pre class="syntaxbox">none | mandatory | proximity</pre>
+    none | mandatory | proximity
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété ne fait partie d'aucune spécification.</p>
+Cette propriété ne fait partie d'aucune spécification.
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scroll-snap-type-y")}}</p>
+{{Compat("css.properties.scroll-snap-type-y")}}
diff --git a/files/fr/web/css/scroll-snap-type/index.md b/files/fr/web/css/scroll-snap-type/index.md
index 7e2c8520c4..2961d1ffb3 100644
--- a/files/fr/web/css/scroll-snap-type/index.md
+++ b/files/fr/web/css/scroll-snap-type/index.md
@@ -8,15 +8,16 @@ tags:
   - Reference
 translation_of: Web/CSS/scroll-snap-type
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>scroll-snap-type</code></strong> définit la force d'adhérence aux points d'accroche en cas de défilement d'un conteneur.</p>
+La propriété **`scroll-snap-type`** définit la force d'adhérence aux points d'accroche en cas de défilement d'un conteneur.
 
-<div>{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}</div>
+{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}
 
-<p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p>
+La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 scroll-snap-type: none;
 scroll-snap-type: x;
 scroll-snap-type: y;
@@ -34,40 +35,39 @@ scroll-snap-type: both mandatory;
 scroll-snap-type: inherit;
 scroll-snap-type: initial;
 scroll-snap-type: unset;
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>Lorsque le {{Glossary("viewport")}} du conteneur défile, on ignore les points d'accroche.</dd>
- <dt><code>x</code></dt>
- <dd>Le conteneur qui défile s'accroche aux positions sur l'axe horizontal uniquement.</dd>
- <dt><code>y</code></dt>
- <dd>Le conteneur qui défile s'accroche aux positions sur l'axe vertical uniquement.</dd>
- <dt><code>block</code></dt>
- <dd>Le conteneur qui défile s'accroche aux positions sur l'axe de bloc (celui orthogonal à l'axe de lecture) uniquement.</dd>
- <dt><code>inline</code></dt>
- <dd>Le conteneur qui défile s'accroche aux positions sur l'axe en ligne (correspondant à au sens de lecteure) uniquement.</dd>
- <dt><code>both</code></dt>
- <dd>Le conteneur qui défile s'accroche aux positions sur les deux axes de façon indépendante.</dd>
- <dt><code>mandatory</code></dt>
- <dd>Le <em>viewport</em> visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.</dd>
- <dt><code>proximity</code></dt>
- <dd>Le <em>viewport</em> visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Syntaxe
+
+### Valeurs
+
+- `none`
+  - : Lorsque le {{Glossary("viewport")}} du conteneur défile, on ignore les points d'accroche.
+- `x`
+  - : Le conteneur qui défile s'accroche aux positions sur l'axe horizontal uniquement.
+- `y`
+  - : Le conteneur qui défile s'accroche aux positions sur l'axe vertical uniquement.
+- `block`
+  - : Le conteneur qui défile s'accroche aux positions sur l'axe de bloc (celui orthogonal à l'axe de lecture) uniquement.
+- `inline`
+  - : Le conteneur qui défile s'accroche aux positions sur l'axe en ligne (correspondant à au sens de lecteure) uniquement.
+- `both`
+  - : Le conteneur qui défile s'accroche aux positions sur les deux axes de façon indépendante.
+- `mandatory`
+  - : Le _viewport_ visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.
+- `proximity`
+  - : Le _viewport_ visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">/* setup */
+```css
+/* setup */
 html, body, .holster {
   height: 100%;
 }
@@ -114,134 +114,122 @@ html, body, .holster {
   scroll-snap-type: y proximity;
 }
 
-.container &gt; div {
+.container > div {
   text-align: center;
   scroll-snap-align: center;
   flex: none;
 }
 
-.x.container &gt; div {
+.x.container > div {
   line-height: 128px;
   font-size: 64px;
   width: 100%;
   height: 128px;
 }
 
-.y.container &gt; div {
+.y.container > div {
   line-height: 256px;
   font-size: 128px;
   width: 256px;
   height: 100%;
 }
 /* appearance fixes */
-.y.container &gt; div:first-child {
+.y.container > div:first-child {
   line-height: 1.3;
   font-size: 64px;
 }
 /* coloration */
-.container &gt; div:nth-child(even) {
+.container > div:nth-child(even) {
   background-color: #87EA87;
 }
 
-.container &gt; div:nth-child(odd) {
+.container > div:nth-child(odd) {
   background-color: #87CCEA;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div class="holster"&gt;
-&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;X Mand. LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;X Prox. LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
-  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;X Mand. RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;X Prox. RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
-  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
-  &lt;div&gt;2&lt;/div&gt;
-  &lt;div&gt;3&lt;/div&gt;
-  &lt;div&gt;4&lt;/div&gt;
-  &lt;div&gt;5&lt;/div&gt;
-&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", "100%", "1630")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}</td>
-   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.scroll-snap-type")}}</p>
+```
+
+### HTML
+
+```html
+<div class="holster">
+<div class="container x mandatory-scroll-snapping" dir="ltr">
+  <div>X Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="ltr">
+  <div>X Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="ltr">
+  <div>Y Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="ltr">
+  <div>Y Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x mandatory-scroll-snapping" dir="rtl">
+  <div>X Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="rtl">
+  <div>X Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="rtl">
+  <div>Y Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="rtl">
+  <div>Y Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", "100%", "1630")}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}} | {{Spec2("CSS Scroll Snap Points")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.scroll-snap-type")}}
diff --git a/files/fr/web/css/scrollbar-color/index.md b/files/fr/web/css/scrollbar-color/index.md
index a15e992993..b6b02f8a12 100644
--- a/files/fr/web/css/scrollbar-color/index.md
+++ b/files/fr/web/css/scrollbar-color/index.md
@@ -7,117 +7,118 @@ tags:
   - Reference
 translation_of: Web/CSS/scrollbar-color
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>scrollbar-color</code></strong> permet à un auteur de définir la couleur utilisée pour le curseur et la piste (la ligne sur laquelle se déplace le curseur) de la barre de défilement.</p>
+La propriété **`scrollbar-color`** permet à un auteur de définir la couleur utilisée pour le curseur et la piste (la ligne sur laquelle se déplace le curseur) de la barre de défilement.
 
-<p>{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}</p>
+{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scrollbar-color: auto;
 scrollbar-color: dark;
 scrollbar-color: light;
 
 /* Valeur de couleur */
 /* La première cible le curseur et la seconde la piste */
-/* type &lt;color&gt; */
+/* type <color> */
 scrollbar-color: rebeccapurple green;
 
 /* Valeurs globales */
 scrollbar-color: inherit;
 scrollbar-color: initial;
 scrollbar-color: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;scrollbar-face-color&gt;</code></dt>
- <dd>Une valeur définissant la couleur.<br>
-
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>auto</code></td>
-    <td>
-     <p>Utilise le rendu par défaut du système pour la piste de la barre de défilement si aucune autre couleur n'est indiquée pour la mise en forme CSS de la barre de défilement.</p>
-    </td>
-   </tr>
-   <tr>
-    <td><code>dark</code></td>
-    <td>Affiche une barre de défilement sombre. Ce peut être la variante sombre fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs sombres.</td>
-   </tr>
-   <tr>
-    <td><code>light</code></td>
-    <td>Affiche une barre de défilement claire. Ce peut être la variante claire fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs claires.</td>
-   </tr>
-   <tr>
-    <td><code>&lt;color&gt; &lt;color&gt;</code></td>
-    <td>La première couleur est appliquée au curseur et la seconde à la piste sur laquelle se déplace le curseur.</td>
-   </tr>
-  </tbody>
- </table>
-
- <div class="note">
- <p><strong>Note :</strong> Pour toute valeur de <code>scrollbar-color</code>, les agents utilisateur doivent appliquer la valeur sur l'élément racine de la zone d'affichage (<em>viewport</em>).</p>
- </div>
-
- <div class="note">
- <p><strong>Note :</strong> Si la couleur d'une partie de la barre de défilement est indiquée, les implémentations peuvent afficher une barre de défilement simple (plutôt que celle provenant du système) afin de la colorer avec la/les couleur(s) indiquée(s).</p>
- </div>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<scrollbar-face-color>`
+
+  - : Une valeur définissant la couleur.
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>auto</code></td>
+          <td>
+            <p>
+              Utilise le rendu par défaut du système pour la piste de la barre de
+              défilement si aucune autre couleur n'est indiquée pour la mise en
+              forme CSS de la barre de défilement.
+            </p>
+          </td>
+        </tr>
+        <tr>
+          <td><code>dark</code></td>
+          <td>
+            Affiche une barre de défilement sombre. Ce peut être la variante sombre
+            fournie par le système sous-jacent ou une barre de défilement
+            personnalisée avec des couleurs sombres.
+          </td>
+        </tr>
+        <tr>
+          <td><code>light</code></td>
+          <td>
+            Affiche une barre de défilement claire. Ce peut être la variante claire
+            fournie par le système sous-jacent ou une barre de défilement
+            personnalisée avec des couleurs claires.
+          </td>
+        </tr>
+        <tr>
+          <td><code>&#x3C;color> &#x3C;color></code></td>
+          <td>
+            La première couleur est appliquée au curseur et la seconde à la piste
+            sur laquelle se déplace le curseur.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    > **Note :** Pour toute valeur de `scrollbar-color`, les agents utilisateur doivent appliquer la valeur sur l'élément racine de la zone d'affichage (_viewport_).
+
+    > **Note :** Si la couleur d'une partie de la barre de défilement est indiquée, les implémentations peuvent afficher une barre de défilement simple (plutôt que celle provenant du système) afin de la colorer avec la/les couleur(s) indiquée(s).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.scroller {
+```css
+.scroller {
   width: 300px;
   height: 100px;
   overflow-y: scroll;
   scrollbar-color: rebeccapurple green;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="scroller"&gt;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.&lt;/div&gt;</pre>
+```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>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Lorsqu'on utilise <code>scrollbar-color</code> avec certains couleurs spécifiques, il est nécessaire de s'assurer que le contraste entre le curseur et la piste est suffisant. Lorsque des mots-clés sont utilisés, c'est à l'agent utilisateur de s'assurer que le contraste est suffisant. Voir <a href="https://www.w3.org/TR/WCAG20-TECHS/G183.html">les techniques WCAG 2.0 G183 : Utiliser un ratio de contraste de 3:1</a>.</p>
+Lorsqu'on utilise `scrollbar-color` avec certains couleurs spécifiques, il est nécessaire de s'assurer que le contraste entre le curseur et la piste est suffisant. Lorsque des mots-clés sont utilisés, c'est à l'agent utilisateur de s'assurer que le contraste est suffisant. Voir [les techniques WCAG 2.0 G183 : Utiliser un ratio de contraste de 3:1](https://www.w3.org/TR/WCAG20-TECHS/G183.html).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}</td>
-   <td>{{Spec2("CSS Scrollbars")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}} | {{Spec2("CSS Scrollbars")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("css.properties.scrollbar-color")}}</div>
+{{Compat("css.properties.scrollbar-color")}}
diff --git a/files/fr/web/css/scrollbar-width/index.md b/files/fr/web/css/scrollbar-width/index.md
index c39f16f385..de52db4177 100644
--- a/files/fr/web/css/scrollbar-width/index.md
+++ b/files/fr/web/css/scrollbar-width/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/scrollbar-width
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>scrollbar-width</code></strong> permet à un auteur de définir l'épaisseur maximale à utiliser pour la barre de défilement si celle-ci est affichée.</p>
+La propriété **`scrollbar-width`** permet à un auteur de définir l'épaisseur maximale à utiliser pour la barre de défilement si celle-ci est affichée.
 
-<p>{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}</p>
+{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 scrollbar-width: auto;
 scrollbar-width: thin;
 scrollbar-width: none;
@@ -24,91 +25,86 @@ scrollbar-width: none;
 scrollbar-width: inherit;
 scrollbar-width: initial;
 scrollbar-width: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;scrollbar-width&gt;</code></dt>
- <dd>Une valeur qui définit l'épaisseur de la barre de défilement. Cette valeur est une longueur (cf. {{cssxref("&lt;length&gt;")}}) positive ou bien un mot-clé. Si c'est un mot-clé, ce dernier doit avoir l'une des valeurs suivantes :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>auto</code></td>
-    <td>La largeur par défaut, fournie par le système, pour la barre de défilement.</td>
-   </tr>
-   <tr>
-    <td><code>thin</code></td>
-    <td>Une variante plus fine de la barre de défilement plus fine dans le cas des plateformes qui fournissent une telle option ou une barre de défilement avec une largeur moindre que la largeur par défaut du système.</td>
-   </tr>
-   <tr>
-    <td><code>none</code></td>
-    <td>Aucune barre de défilement n'est affichée mais on peut toujours faire défiler l'élément.</td>
-   </tr>
-  </tbody>
- </table>
-
- <div class="note">
- <p><strong>Note :</strong> Toute valeur de <code>scrollbar-width</code> doit être appliquée sur l'élément racine de la zone d'affichage (<em>viewport</em>) par les agents utilisateur.</p>
- </div>
-
- <div class="note">
- <p><strong>Note :</strong> L'utilisation des longueurs pour <code>scrollbar-width</code> est une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir <a href="https://github.com/w3c/csswg-drafts/issues/1958">l'<em>issue</em> 1958</a>).</p>
- </div>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<scrollbar-width>`
+
+  - : Une valeur qui définit l'épaisseur de la barre de défilement. Cette valeur est une longueur (cf. {{cssxref("&lt;length&gt;")}}) positive ou bien un mot-clé. Si c'est un mot-clé, ce dernier doit avoir l'une des valeurs suivantes :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>auto</code></td>
+          <td>
+            La largeur par défaut, fournie par le système, pour la barre de
+            défilement.
+          </td>
+        </tr>
+        <tr>
+          <td><code>thin</code></td>
+          <td>
+            Une variante plus fine de la barre de défilement plus fine dans le cas
+            des plateformes qui fournissent une telle option ou une barre de
+            défilement avec une largeur moindre que la largeur par défaut du
+            système.
+          </td>
+        </tr>
+        <tr>
+          <td><code>none</code></td>
+          <td>
+            Aucune barre de défilement n'est affichée mais on peut toujours faire
+            défiler l'élément.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    > **Note :** Toute valeur de `scrollbar-width` doit être appliquée sur l'élément racine de la zone d'affichage (_viewport_) par les agents utilisateur.
+
+    > **Note :** L'utilisation des longueurs pour `scrollbar-width` est une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir [l'_issue_ 1958](https://github.com/w3c/csswg-drafts/issues/1958)).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.scroller {
+```css
+.scroller {
   width: 300px;
   height: 100px;
   overflow-y: scroll;
   scrollbar-width: thin;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="scroller"&gt;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.&lt;/div&gt;</pre>
+```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>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}</td>
-   <td>{{Spec2("CSS Scrollbars")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}} | {{Spec2("CSS Scrollbars")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.scrollbar-width")}}</p>
+{{Compat("css.properties.scrollbar-width")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{CSSxRef("-ms-overflow-style")}}</li>
- <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
-</ul>
+- {{CSSxRef("-ms-overflow-style")}}
+- {{CSSxRef("::-webkit-scrollbar")}}
diff --git a/files/fr/web/css/selector_list/index.md b/files/fr/web/css/selector_list/index.md
index fdb82e927d..24e47e6a8d 100644
--- a/files/fr/web/css/selector_list/index.md
+++ b/files/fr/web/css/selector_list/index.md
@@ -6,92 +6,85 @@ tags:
   - Sélecteur
 translation_of: Web/CSS/Selector_list
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong> Une liste de sélecteurs</strong> (<code>,</code>) permet de cibler tous les nœuds correspondants à l'une des conditions.</p>
+**Une liste de sélecteurs** (`,`) permet de cibler tous les nœuds correspondants à l'une des conditions.
 
-<pre class="brush: css no-line-numbers">/* Cible tous les éléments correspondants */
+```css
+/* Cible tous les éléments correspondants */
 span,
 div {
   border: red 2px solid;
-}</pre>
+}
+```
 
-<p>Afin de réduire la taille d'une feuille de style, on peut grouper les sélecteurs dans une liste séparée par des virgules.</p>
+Afin de réduire la taille d'une feuille de style, on peut grouper les sélecteurs dans une liste séparée par des virgules.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">element, element, element { <em>propriétés de style</em> }</pre>
+    element, element, element { propriétés de style }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Groupement_sur_une_seule_ligne">Groupement sur une seule ligne</h3>
+### Groupement sur une seule ligne
 
-<p>On peut grouper les sélecteurs sur une seule ligne :</p>
+On peut grouper les sélecteurs sur une seule ligne :
 
-<pre class="brush: css">h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
-</pre>
+```css
+h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+```
 
-<h3 id="Groupement_sur_plusieurs_lignes">Groupement sur plusieurs lignes</h3>
+### Groupement sur plusieurs lignes
 
-<p>On peut grouper les sélecteurs sur plusieurs lignes :</p>
+On peut grouper les sélecteurs sur plusieurs lignes :
 
-<pre class="brush: css">#main,
+```css
+#main,
 .content,
 article {
   font-size: 1.1em;
 }
-</pre>
+```
 
-<h3 id="Invalidation_dune_liste_de_sélecteurs">Invalidation d'une liste de sélecteurs</h3>
+### Invalidation d'une liste de sélecteurs
 
-<p>Un inconvénient des listes de sélecteurs est la non-équivalence des deux blocs suivants :</p>
+Un inconvénient des listes de sélecteurs est la non-équivalence des deux blocs suivants :
 
-<pre class="brush: css">h1 { font-family: sans-serif }
+```css
+h1 { font-family: sans-serif }
 h2:maybe-unsupported { font-family: sans-serif }
-h3 { font-family: sans-serif }</pre>
+h3 { font-family: sans-serif }
+```
 
-<pre class="brush: css">h1, h2:maybe-unsupported, h3 { font-family: sans-serif }</pre>
+```css
+h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
+```
 
-<p>En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul sélecteur invalide rend l'ensemble de la règle invalide.</p>
+En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul sélecteur invalide rend l'ensemble de la règle invalide.
 
-<p>Pour éviter cet effet indésirable, on pourra utiliser le sélecteur {{CSSxRef(":is", ":is()")}} qui ignore les sélecteurs invalides parmi ses arguments. Par contre, tous les sélecteurs passés en arguments auront la même spécificité.</p>
+Pour éviter cet effet indésirable, on pourra utiliser le sélecteur {{CSSxRef(":is", ":is()")}} qui ignore les sélecteurs invalides parmi ses arguments. Par contre, tous les sélecteurs passés en arguments auront la même spécificité.
 
-<pre class="brush: css">h1 { font-family: sans-serif }
+```css
+h1 { font-family: sans-serif }
 h2:maybe-unsupported { font-family: sans-serif }
-h3 { font-family: sans-serif }</pre>
-
-<pre class="brush: css">:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>Renommage en « liste de sélecteur »</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#grouping', 'grouping')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.list")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs.</li>
-</ul>
+h3 { font-family: sans-serif }
+```
+
+```css
+:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                                 | Commentaires                        |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------- |
+| {{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}} | {{Spec2("CSS4 Selectors")}} | Renommage en « liste de sélecteur » |
+| {{SpecName('CSS1', '#grouping', 'grouping')}}                     | {{Spec2('CSS1')}}             | Définition initiale.                |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.list")}}
+
+## Voir aussi
+
+- Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs.
diff --git a/files/fr/web/css/shape-image-threshold/index.md b/files/fr/web/css/shape-image-threshold/index.md
index 61b0f75207..62254b3ac8 100644
--- a/files/fr/web/css/shape-image-threshold/index.md
+++ b/files/fr/web/css/shape-image-threshold/index.md
@@ -8,44 +8,44 @@ tags:
   - Reference
 translation_of: Web/CSS/shape-image-threshold
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>shape-image-threshold</code></strong> définit le seuil, en terme de canal alpha, à utiliser pour extraire la forme d'une image. Cette forme pourra être utilisée pour {{cssxref("shape-outside")}}.</p>
+La propriété **`shape-image-threshold`** définit le seuil, en terme de canal alpha, à utiliser pour extraire la forme d'une image. Cette forme pourra être utilisée pour {{cssxref("shape-outside")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div>
+{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}
 
-<p>Touts les pixels dont la composante alpha est supérieure à ce seuil seront retenus pour délimiter les contours de la formes. Une valeur de 0.5 indiquera par exemple qu'on prend la forme qui englobe tous les pixels dont l'opacité est supérieure à 50%.</p>
+Touts les pixels dont la composante alpha est supérieure à ce seuil seront retenus pour délimiter les contours de la formes. Une valeur de 0.5 indiquera par exemple qu'on prend la forme qui englobe tous les pixels dont l'opacité est supérieure à 50%.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Quantité seuil  */
-/* Valeur &lt;number&gt; */
+```css
+/* Quantité seuil  */
+/* Valeur <number> */
 shape-image-threshold: 0.7;
 
 /* Valeurs globales */
 shape-image-threshold: inherit;
 shape-image-threshold: initial;
 shape-image-threshold: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Un nombre ({{cssxref("&lt;number&gt;")}}) représentant le seuil utilisé pour extraire une forme d'une image. La forme est définie par les pixels dont la valeur du canal alpha est supérieur au seuil indiqué. Un seuil qui est inférieur à 0.0 (transparence totale) ou supérieur à 1.0 (opacité totale) sera ramené dans cet intervalle.</dd>
-</dl>
+- `<number>`
+  - : Un nombre ({{cssxref("&lt;number&gt;")}}) représentant le seuil utilisé pour extraire une forme d'une image. La forme est définie par les pixels dont la valeur du canal alpha est supérieur au seuil indiqué. Un seuil qui est inférieur à 0.0 (transparence totale) ou supérieur à 1.0 (opacité totale) sera ramené dans cet intervalle.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on utilise un bloc {{HTMLElement("div")}} pour y afficher une image d'arrière-plan avec un dégradé. On retrouve ce dégradé dans une forme CSS avec la propriété <code>shape-outside</code> et on utilise <code>shape-image-threshold</code> afin de ne retenir que les pixels dont l'opacité est supérieure ou égale à 20% pour délimiter la forme.</p>
+Dans cet exemple, on utilise un bloc {{HTMLElement("div")}} pour y afficher une image d'arrière-plan avec un dégradé. On retrouve ce dégradé dans une forme CSS avec la propriété `shape-outside` et on utilise `shape-image-threshold` afin de ne retenir que les pixels dont l'opacité est supérieure ou égale à 20% pour délimiter la forme.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#gradient-shape {
+```css
+#gradient-shape {
   width: 150px;
   height: 150px;
   float: left;
@@ -54,13 +54,15 @@ shape-image-threshold: unset;
   shape-outside: linear-gradient(30deg, black, transparent 80%,
       transparent);
   shape-image-threshold: 0.2;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="gradient-shape"&gt;&lt;/div&gt;
+```html
+<div id="gradient-shape"></div>
 
-&lt;p&gt;
+<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
   voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
   facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat
@@ -71,43 +73,29 @@ shape-image-threshold: unset;
   nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit
   accusamus iusto dolore, at provident eius alias maxime pariatur non
   deleniti ipsum sequi rem eveniet laboriosam magni expedita?
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', "600px", "230px")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}</td>
-   <td>{{Spec2('CSS Shapes')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.shape-image-threshold")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Un aperçu des formes CSS</a></li>
- <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
- <li>{{cssxref("shape-outside")}}</li>
- <li>{{cssxref("shape-margin")}}</li>
-</ul>
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', "600px", "230px")}}
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                           | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}} | {{Spec2('CSS Shapes')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.shape-image-threshold")}}
+
+## Voir aussi
+
+- [Les formes CSS](/fr/docs/Web/CSS/CSS_Shapes)
+- [Un aperçu des formes CSS](/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)
+- {{cssxref("&lt;basic-shape&gt;")}}
+- {{cssxref("shape-outside")}}
+- {{cssxref("shape-margin")}}
diff --git a/files/fr/web/css/shape-margin/index.md b/files/fr/web/css/shape-margin/index.md
index 7c382292a1..0da11ef82a 100644
--- a/files/fr/web/css/shape-margin/index.md
+++ b/files/fr/web/css/shape-margin/index.md
@@ -7,47 +7,47 @@ tags:
   - Reference
 translation_of: Web/CSS/shape-margin
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>shape-margin</code></strong> définit la marge autour d'une forme CSS créée avec {{cssxref("shape-outside")}}.</p>
+La propriété CSS **`shape-margin`** définit la marge autour d'une forme CSS créée avec {{cssxref("shape-outside")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/shape-margin.html")}}</div>
+{{EmbedInteractiveExample("pages/css/shape-margin.html")}}
 
-<p>La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.</p>
+La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.
 
-<pre class="brush:css no-line-numbers">/* Valeur de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeur de longueur */
+/* Type <length> */
 shape-margin: 10px;
 shape-margin: 20mm;
 
 /* Valeur proportionnelle */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 shape-margin: 60%;
 
 /* Valeurs globales */
 shape-margin: inherit;
 shape-margin: initial;
 shape-margin: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length-percentage&gt;</code></dt>
- <dd>Cette valeur définit la marge entre la forme et le texte alentour grâce à une longueur (cf. {{cssxref("&lt;length&gt;")}}) ou à un pourcentage ({{cssxref("&lt;percentage&gt;")}}) proportionnel à la largeur du bloc englobant de l'élément.</dd>
-</dl>
+- `<length-percentage>`
+  - : Cette valeur définit la marge entre la forme et le texte alentour grâce à une longueur (cf. {{cssxref("&lt;length&gt;")}}) ou à un pourcentage ({{cssxref("&lt;percentage&gt;")}}) proportionnel à la largeur du bloc englobant de l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">section {
+```css
+section {
   max-width: 400px;
 }
 
@@ -59,12 +59,14 @@ shape-margin: unset;
   clip-path: polygon(0 0, 150px 150px, 0 150px);
   shape-outside: polygon(0 0, 150px 150px, 0 150px);
   shape-margin: 20px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;section&gt;
-  &lt;div class="shape"&gt;&lt;/div&gt;
+```html
+<section>
+  <div class="shape"></div>
   We are not quite sure of any one thing in biology; our knowledge of geology
   is relatively very slight, and the economic laws of society are
   uncertain to every one except some individual who attempts to set them
@@ -72,43 +74,29 @@ shape-margin: unset;
   was equal to the sum of the squares on the other two sides of a right
   triangle, and it will be so after this world is dead; and the inhabitant
   of Mars, if he exists, probably knows its truth as we know it.
-&lt;/section&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 500, 250)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}}</td>
-   <td>{{Spec2('CSS Shapes')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.shape-margin")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li>
- <li>{{cssxref("shape-outside")}}</li>
- <li>{{cssxref("shape-image-threshold")}}</li>
- <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
-</ul>
+</section>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 500, 250)}}
+
+## Spécifications
+
+| Spécification                                                                                | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}} | {{Spec2('CSS Shapes')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.shape-margin")}}
+
+## Voir aussi
+
+- [Les formes CSS](/fr/docs/Web/CSS/CSS_Shapes)
+- [Un aperçu des formes CSS](/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS)
+- {{cssxref("shape-outside")}}
+- {{cssxref("shape-image-threshold")}}
+- {{cssxref("&lt;basic-shape&gt;")}}
diff --git a/files/fr/web/css/shape-outside/index.md b/files/fr/web/css/shape-outside/index.md
index 477ed8e018..0ae308d72e 100644
--- a/files/fr/web/css/shape-outside/index.md
+++ b/files/fr/web/css/shape-outside/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/shape-outside
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>shape-outside</code></strong> définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s'écouler ». Par défaut, le contenu en ligne évolue autour de la boîte de marge de l'élément flottant. La propriété <code>shape-outside</code> permet de personnaliser ce contour et d'obtenir un texte qui s'écoule autour d'objets plus complexes que des rectangles.</p>
+La propriété **`shape-outside`** définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s'écouler ». Par défaut, le contenu en ligne évolue autour de la boîte de marge de l'élément flottant. La propriété `shape-outside` permet de personnaliser ce contour et d'obtenir un texte qui s'écoule autour d'objets plus complexes que des rectangles.
 
-<div>{{EmbedInteractiveExample("pages/css/shape-outside.html")}}</div>
+{{EmbedInteractiveExample("pages/css/shape-outside.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 shape-outside: none;
 shape-outside: margin-box;
 shape-outside: content-box;
@@ -29,66 +30,65 @@ shape-outside: inset(10px 10px 10px 10px);
 shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
 shape-outside: linear-gradient(45deg, rgba(255,255,255,0) 150px, red 150px);
 
-/* Valeur de type &lt;url&gt; */
+/* Valeur de type <url> */
 shape-outside: url(image.png);
 
 
-/* Valeur de type &lt;gradient&gt; */
+/* Valeur de type <gradient> */
 shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
 
 /* Valeurs globales */
 shape-outside: initial;
 shape-outside: inherit;
 shape-outside: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>La zone de flottement n'est pas modifiée. Le contenu en ligne épouse le contour de la boîte de marge normalement.</dd>
- <dt><code>&lt;shape-box&gt;</code></dt>
- <dd>La forme est calculée selon '<code>margin-box</code>', '<code>border-box</code>', '<code>padding-box</code>' or '<code>content-box</code>' qui correspondent chacune aux boîtes de marge, bordure, remplissage et de contenu. La boîte ainsi définie inclue les courbures induites par {{cssxref("border-radius")}}. On a un effet semblable à {{cssxref("background-clip")}}.</dd>
- <dt><code>&lt;basic-shape&gt;</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;basic-shape&gt;")}}. La forme est calculée selon une valeur parmi <code><a href="/fr/docs/Web/CSS/basic-shape#inset()">inset()</a></code>, <code><a href="/fr/docs/Web/CSS/basic-shape#circle()">circle()</a></code>, <code><a href="/fr/docs/Web/CSS/basic-shape#ellipse()">ellipse()</a></code>, ou <code><a href="/fr/docs/Web/CSS/basic-shape#polygon()">polygon()</a></code>. Si une valeur <code>&lt;shape-box&gt;</code> est fournie, cela définira la boîte de référence dans laquelle appliquée la forme définie avec la fonction <code>&lt;basic-shape&gt;</code>. Si <code>&lt;shape-box&gt;</code> n'est pas fournie, la valeur par défaut sera '<code>margin-box</code>'.</dd>
- <dt><code>&lt;image&gt;</code></dt>
- <dd>La forme est extraite et calculée à partir du canal alpha de l'image {{cssxref("image")}} en utilisant l propriété {{cssxref("shape-image-threshold")}}. Les agents utilisateurs doivent utiliser la méthode <code>fetch</code>, éventuellement avec CORS pour les URL utilisées dans <code>shape-outside</code>. Lors de l'accès à la ressource, les agents utilisateurs doivent utiliser le mode Anonymous et définir la source du <em>referrer</em> comme l'URL de la feuille de style, l'origine de l'URL doit être celle du document. S'il y a des erreurs réseau empêchant de récupérer l'image, l'effet sera le même que celui obtenu avec la valeur <code><strong>none</strong></code>.</dd>
-</dl>
+- `none`
+  - : La zone de flottement n'est pas modifiée. Le contenu en ligne épouse le contour de la boîte de marge normalement.
+- `<shape-box>`
+  - : La forme est calculée selon '`margin-box`', '`border-box`', '`padding-box`' or '`content-box`' qui correspondent chacune aux boîtes de marge, bordure, remplissage et de contenu. La boîte ainsi définie inclue les courbures induites par {{cssxref("border-radius")}}. On a un effet semblable à {{cssxref("background-clip")}}.
+- `<basic-shape>`
+  - : Une valeur de type {{cssxref("&lt;basic-shape&gt;")}}. La forme est calculée selon une valeur parmi [`inset()`](</fr/docs/Web/CSS/basic-shape#inset()>), [`circle()`](</fr/docs/Web/CSS/basic-shape#circle()>), [`ellipse()`](</fr/docs/Web/CSS/basic-shape#ellipse()>), ou [`polygon()`](</fr/docs/Web/CSS/basic-shape#polygon()>). Si une valeur `<shape-box>` est fournie, cela définira la boîte de référence dans laquelle appliquée la forme définie avec la fonction `<basic-shape>`. Si `<shape-box>` n'est pas fournie, la valeur par défaut sera '`margin-box`'.
+- `<image>`
+  - : La forme est extraite et calculée à partir du canal alpha de l'image {{cssxref("image")}} en utilisant l propriété {{cssxref("shape-image-threshold")}}. Les agents utilisateurs doivent utiliser la méthode `fetch`, éventuellement avec CORS pour les URL utilisées dans `shape-outside`. Lors de l'accès à la ressource, les agents utilisateurs doivent utiliser le mode Anonymous et définir la source du _referrer_ comme l'URL de la feuille de style, l'origine de l'URL doit être celle du document. S'il y a des erreurs réseau empêchant de récupérer l'image, l'effet sera le même que celui obtenu avec la valeur **`none`**.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Interpolation">Interpolation</h2>
+## Interpolation
 
-<p>Afin de pouvoir interpoler entre deux formes, on appliquera les règles suivantes. Les valeurs avec des fonctions sont interpolées comme une liste simple. Les valeurs d'une liste sont interpolées comme des longueurs, des pourcentages ou des valeurs calculées lorsque c'est possible. Si les valeurs de la liste n'ont pas ces types mais sont identiques (par exemple, on trouve <code>nonzero</code> à la même position dans les deux listes), les valeurs pourront interopérer.</p>
+Afin de pouvoir interpoler entre deux formes, on appliquera les règles suivantes. Les valeurs avec des fonctions sont interpolées comme une liste simple. Les valeurs d'une liste sont interpolées comme des longueurs, des pourcentages ou des valeurs calculées lorsque c'est possible. Si les valeurs de la liste n'ont pas ces types mais sont identiques (par exemple, on trouve `nonzero` à la même position dans les deux listes), les valeurs pourront interopérer.
 
-<ul>
- <li>Les deux formes doivent utiliser la même boîtes de référence.</li>
- <li>Si les deux formes sont du même type, que ce type est <code>ellipse()</code> ou <code>circle()</code> et qu'aucun des rayons n'utilise les mots-clés <code>closest-side</code> ou <code>farthest-side</code>, on aura une interpolation entre chaque valeur.</li>
- <li>Si les deux formes sont du type <code>inset()</code>, on aura une interpolation entre chaque valeur.</li>
- <li>Si les deux formes sont du types <code>polygon()</code>, que les deux polygones ont le même nombre de côtés et utilisent la même règle <code>&lt;fill-rule&gt;</code>, on aura une interpolation entre chaque valeur.</li>
- <li>Dans les autres cas, on n'a pas d'interpolation définie.</li>
-</ul>
+- Les deux formes doivent utiliser la même boîtes de référence.
+- Si les deux formes sont du même type, que ce type est `ellipse()` ou `circle()` et qu'aucun des rayons n'utilise les mots-clés `closest-side` ou `farthest-side`, on aura une interpolation entre chaque valeur.
+- Si les deux formes sont du type `inset()`, on aura une interpolation entre chaque valeur.
+- Si les deux formes sont du types `polygon()`, que les deux polygones ont le même nombre de côtés et utilisent la même règle `<fill-rule>`, on aura une interpolation entre chaque valeur.
+- Dans les autres cas, on n'a pas d'interpolation définie.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="main"&gt;
-  &lt;div class="left"&gt;&lt;/div&gt;
-  &lt;div class="right"&gt;&lt;/div&gt;
-  &lt;p&gt;
+```html
+<div class="main">
+  <div class="left"></div>
+  <div class="right"></div>
+  <p>
     Sometimes a web page's text content appears to be
     funneling your attention towards a spot on the page
     to drive you to follow a particular link.  Sometimes
     you don't notice.
-  &lt;/p&gt;
-&lt;/div&gt;</pre>
+  </p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.main {
+```css
+.main {
   width: 530px;
 }
 
@@ -117,46 +117,32 @@ shape-outside: unset;
 
 p {
   text-align: center;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', "100%", 130)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}</td>
-   <td>{{Spec2('CSS Shapes')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.shape-outside")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS : le module de spécification <em>CSS Shapes</em></a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Un aperçu des formes CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes/From_box_values">Créer des formes à partir des boîtes</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Les formes simples : le type de donnée <code>&lt;basic-shape&gt;</code></a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Créer des formes à partir d'images</a></li>
- <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
- <li>{{cssxref("shape-margin")}}</li>
- <li>{{cssxref("shape-image-threshold")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', "100%", 130)}}
+
+## Spécifications
+
+| Spécification                                                                                | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}} | {{Spec2('CSS Shapes')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.shape-outside")}}
+
+## Voir aussi
+
+- [Les formes CSS : le module de spécification _CSS Shapes_](/fr/docs/Web/CSS/CSS_Shapes)
+- [Un aperçu des formes CSS](/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)
+- [Créer des formes à partir des boîtes](/fr/docs/Web/CSS/CSS_Shapes/From_box_values)
+- [Les formes simples : le type de donnée `<basic-shape>`](/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes)
+- [Créer des formes à partir d'images](/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images)
+- {{cssxref("&lt;basic-shape&gt;")}}
+- {{cssxref("shape-margin")}}
+- {{cssxref("shape-image-threshold")}}
diff --git a/files/fr/web/css/shape/index.md b/files/fr/web/css/shape/index.md
index ced200af32..85282929be 100644
--- a/files/fr/web/css/shape/index.md
+++ b/files/fr/web/css/shape/index.md
@@ -8,85 +8,65 @@ tags:
   - Type
 translation_of: Web/CSS/shape
 ---
-<div>{{CSSRef}}{{deprecated_header}}</div>
+{{CSSRef}}{{deprecated_header}}
 
-<p>Le type de donnée CSS <strong><code>&lt;shape&gt;</code></strong> permet de représenter des formes. Ces formes (ou régions) sont utilisées pour définir les parties d'un élément sur lesquelles des propriétés comme {{cssxref("clip")}} s'appliquent. Ce type de donnée a été déprécié pour être remplacé par {{cssxref("&lt;basic-shape&gt;")}}.</p>
+Le type de donnée CSS **`<shape>`** permet de représenter des formes. Ces formes (ou régions) sont utilisées pour définir les parties d'un élément sur lesquelles des propriétés comme {{cssxref("clip")}} s'appliquent. Ce type de donnée a été déprécié pour être remplacé par {{cssxref("&lt;basic-shape&gt;")}}.
 
-<div class="note">
-<p><strong>Note :</strong> <code>&lt;shape&gt;</code> et <code>rect()</code> fonctionnent avec la propriété {{cssxref("clip")}} qui a été dépréciée pour être remplacée par {{cssxref("clip-path")}}. Il est donc préférable d'utiliser cette dernière si possible avec une valeur de type {{cssxref("&lt;basic-shape&gt;")}} à la place.</p>
-</div>
+> **Note :** `<shape>` et `rect()` fonctionnent avec la propriété {{cssxref("clip")}} qui a été dépréciée pour être remplacée par {{cssxref("clip-path")}}. Il est donc préférable d'utiliser cette dernière si possible avec une valeur de type {{cssxref("&lt;basic-shape&gt;")}} à la place.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Les valeurs de type <code>&lt;shape&gt;</code> sont construites grâce à la notation fonctionnelle <code>rect()</code> qui permet de créer une zone en forme de rectangle.</p>
+Les valeurs de type `<shape>` sont construites grâce à la notation fonctionnelle `rect()` qui permet de créer une zone en forme de rectangle.
 
-<pre class="syntaxbox">rect(<em>haut</em>, <em>droite</em>, <em>bas</em>, <em>gauche</em>)
-</pre>
+    rect(haut, droite, bas, gauche)
 
-<h4 id="Valeurs">Valeurs</h4>
+#### Valeurs
 
-<p><img alt="rect.png" src="rect.png"></p>
+![rect.png](rect.png)
 
-<dl>
- <dt><code><em>haut</em></code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté haut du rectangle et le côté haut de la bordure de l'élément.</dd>
-</dl>
+- `haut`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté haut du rectangle et le côté haut de la bordure de l'élément.
 
-<dl>
- <dt><code><em>droite</em></code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté droit du rectangle et le côté gauche de la bordure de l'élément.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt><code><em>bas</em></code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté bas du rectangle et le côté haut de la bordure de l'élément.</dd>
-</dl>
+- `droite`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté droit du rectangle et le côté gauche de la bordure de l'élément.
 
-<dl>
- <dt><code><em>gauche</em></code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté gauche du rectangle et le côté gauche de la bordure de l'élément.</dd>
-</dl>
+<!---->
 
-<h2 id="Interpolation">Interpolation</h2>
+- `bas`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté bas du rectangle et le côté haut de la bordure de l'élément.
 
-<p>Les valeurs de type <code>&lt;shape&gt;</code> sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs <code>haut</code>, <code>droite</code>, <code>bas</code> et <code>gauche</code> comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à <a href="/fr/docs/Web/CSS/easing-function">la fonction de temporisation</a> associée à l'animation.</p>
+<!---->
 
-<h2 id="Exemples">Exemples</h2>
+- `gauche`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté gauche du rectangle et le côté gauche de la bordure de l'élément.
 
-<h3 id="exemple_illustrant_un_usage_correct_de_la_fonction_rect">Exemple illustrant un usage correct de la fonction rect()</h3>
+## Interpolation
 
-<pre class="brush: css">
+Les valeurs de type `<shape>` sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs `haut`, `droite`, `bas` et `gauche` comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à [la fonction de temporisation](/fr/docs/Web/CSS/easing-function) associée à l'animation.
+
+## Exemples
+
+### Exemple illustrant un usage correct de la fonction rect()
+
+```css
 img.clip04 {
   clip: rect(10px, 20px, 20px, 10px);
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '&lt;shape&gt;')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition avec la propriété {{cssxref("clip")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.shape")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("clip")}}</li>
- <li>La fonction spécifique à Gecko {{cssxref("-moz-image-rect()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                     | Commentaires                                           |
+| -------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------ |
+| {{SpecName('CSS2.1', 'visufx.html#value-def-shape', '&lt;shape&gt;')}} | {{Spec2('CSS2.1')}} | Définition avec la propriété {{cssxref("clip")}}. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.shape")}}
+
+## Voir aussi
+
+- {{cssxref("clip")}}
+- La fonction spécifique à Gecko {{cssxref("-moz-image-rect()")}}
diff --git a/files/fr/web/css/shorthand_properties/index.md b/files/fr/web/css/shorthand_properties/index.md
index fa605b0d38..1bbbf8be6b 100644
--- a/files/fr/web/css/shorthand_properties/index.md
+++ b/files/fr/web/css/shorthand_properties/index.md
@@ -8,149 +8,192 @@ tags:
 translation_of: Web/CSS/Shorthand_properties
 original_slug: Web/CSS/Propriétés_raccourcies
 ---
-<div>{{CSSRef}}</div>
-
-<p><dfn>Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité</dfn>.</p>
-
-<p>La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (<em>font</em>) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}.</p>
-
-<h2 id="Quelques_cas_aux_limites_épineux">Quelques cas aux limites épineux</h2>
-
-<p>Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :</p>
-
-<ol>
- <li>Une valeur qui n'est pas définie pour la propriété raccourcie <strong>sera réinitialisée avec sa valeur initiale</strong>. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi :
-
-  <pre class="brush:css">background-color: red;
-background: url(images/bg.gif) no-repeat top right;
-</pre>
-  ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} <code>transparent</code> car la deuxième déclaration prend le pas sur la première.</li>
- <li>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é <code>inherit.</code></li>
- <li>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 :
-  <ol>
-   <li>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 :
-    <table>
-     <tbody>
-      <tr>
-       <td style="width: 79px;"><img alt="border1.png" src="border1.png"></td>
-       <td><em>1 valeur </em>: <code>border-width: 1em</code> — La valeur unique s'adresse à tous les côtés.</td>
-      </tr>
-      <tr>
-       <td><img alt="border2.png" src="border2.png"></td>
-       <td><em>2 valeurs </em>: <code>border-width: 1em 2em</code> — 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.</td>
-      </tr>
-      <tr>
-       <td><img alt="border3.png" src="border3.png"></td>
-       <td><em>3 valeurs </em>: <code>border-width: 1em 2em 3em</code> — 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.</td>
-      </tr>
-      <tr>
-       <td><img alt="border4.png" src="border4.png"></td>
-       <td>
-        <p><em>4 valeurs </em>: <code>border-width: 1em 2em 3em 4em</code> — 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).</p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </li>
-   <li>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 :
-    <table>
-     <tbody>
-      <tr>
-       <td style="width: 69px;"><img alt="corner1.png" src="corner1.png"></td>
-       <td><em>1 valeur </em>: <code>border-radius: 1em</code> — La valeur s'applique à tous les coins.</td>
-      </tr>
-      <tr>
-       <td><img alt="corner2.png" src="corner2.png"></td>
-       <td><em>2 valeurs </em>: <code>border-radius: 1em 2em</code> — 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.</td>
-      </tr>
-      <tr>
-       <td><img alt="corner3.png" src="corner3.png"></td>
-       <td><em>3 valeurs </em>: <code>border-radius: 1em 2em 3em</code> — 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.</td>
-      </tr>
-      <tr>
-       <td><img alt="corner4.png" src="corner4.png"></td>
-       <td>
-        <p><em>4 valeurs </em>: <code>border-radius: 1em 2em 3em 4em</code> — 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).</p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </li>
-  </ol>
- </li>
-</ol>
-
-<h2 id="Les_propriétés_concernant_larrière-plan">Les propriétés concernant l'arrière-plan</h2>
-
-<p>Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :</p>
-
-<pre class="brush:css">background-color: #000;
+{{CSSRef}}
+
+_Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité_.
+
+La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (_font_) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}.
+
+## Quelques cas aux limites épineux
+
+Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :
+
+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;
+    ```
+
+    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 :
+
+        <table>
+          <tbody>
+            <tr>
+              <td style="width: 79px"><img alt="border1.png" src="border1.png" /></td>
+              <td>
+                <em>1 valeur </em>: <code>border-width: 1em</code> — La valeur unique
+                s'adresse à tous les côtés.
+              </td>
+            </tr>
+            <tr>
+              <td><img alt="border2.png" src="border2.png" /></td>
+              <td>
+                <em>2 valeurs </em>: <code>border-width: 1em 2em</code> — 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.
+              </td>
+            </tr>
+            <tr>
+              <td><img alt="border3.png" src="border3.png" /></td>
+              <td>
+                <em>3 valeurs </em>: <code>border-width: 1em 2em 3em</code> — 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.
+              </td>
+            </tr>
+            <tr>
+              <td><img alt="border4.png" src="border4.png" /></td>
+              <td>
+                <p>
+                  <em>4 valeurs </em>: <code>border-width: 1em 2em 3em 4em</code> — 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).
+                </p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+    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 :
+
+        <table>
+          <tbody>
+            <tr>
+              <td style="width: 69px"><img alt="corner1.png" src="corner1.png" /></td>
+              <td>
+                <em>1 valeur </em>: <code>border-radius: 1em</code> — La valeur
+                s'applique à tous les coins.
+              </td>
+            </tr>
+            <tr>
+              <td><img alt="corner2.png" src="corner2.png" /></td>
+              <td>
+                <em>2 valeurs </em>: <code>border-radius: 1em 2em</code> — 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.
+              </td>
+            </tr>
+            <tr>
+              <td><img alt="corner3.png" src="corner3.png" /></td>
+              <td>
+                <em>3 valeurs </em>: <code>border-radius: 1em 2em 3em</code> — 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.
+              </td>
+            </tr>
+            <tr>
+              <td><img alt="corner4.png" src="corner4.png" /></td>
+              <td>
+                <p>
+                  <em>4 valeurs </em>: <code>border-radius: 1em 2em 3em 4em</code> — 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).
+                </p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+## Les propriétés concernant l'arrière-plan
+
+Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :
+
+```css
+background-color: #000;
 background-image: url(images/bg.gif);
 background-repeat: no-repeat;
-background-position: top right;</pre>
+background-position: top right;
+```
 
-<p>On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :</p>
+On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :
 
-<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre>
+```css
+background: #000 url(images/bg.gif) no-repeat top right;
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute <code>background-attachment: scroll</code> et d'autres propriétés avec CSS3).</p>
-</div>
+> **Note :** Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute `background-attachment: scroll` et d'autres propriétés avec CSS3).
 
-<p>Pour plus d'informations, voir {{cssxref("background")}}.</p>
+Pour plus d'informations, voir {{cssxref("background")}}.
 
-<h2 id="Les_propriétés_liées_à_la_police_font">Les propriétés liées à la police (<em>font</em>)</h2>
+## Les propriétés liées à la police (_font_)
 
-<p>Les déclarations suivantes :</p>
+Les déclarations suivantes :
 
-<pre class="brush:css">font-style: italic;
+```css
+font-style: italic;
 font-weight: bold;
 font-size: .8em;
 line-height: 1.2;
-font-family: Arial, sans-serif;</pre>
+font-family: Arial, sans-serif;
+```
 
-<p>Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :</p>
+Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :
 
-<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+```css
+font: italic bold .8em/1.2 Arial, sans-serif;
+```
 
-<div class="note">
-<p><strong>Note :</strong> 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 <code>font-variant: normal</code> et <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p>
-</div>
+> **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).
 
-<h2 id="Les_propriétés_liées_aux_bordures">Les propriétés liées aux bordures</h2>
+## Les propriétés liées aux bordures
 
-<p>Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,</p>
+Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,
 
-<pre class="brush:css">border-width: 1px;
+```css
+border-width: 1px;
 border-style: solid;
-border-color: #000;</pre>
+border-color: #000;
+```
 
-<p>peut être écrit ainsi :</p>
+peut être écrit ainsi :
 
-<pre class="brush:css">border: 1px solid #000;</pre>
+```css
+border: 1px solid #000;
+```
 
-<h2 id="Les_propriétés_liées_à_la_marge_et_au_remplissage_padding">Les propriétés liées à la marge et au remplissage (<em>padding</em>)</h2>
+## Les propriétés liées à la marge et au remplissage (_padding_)
 
-<p>Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (<em>padding</em>) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :</p>
+Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (_padding_) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :
 
-<pre class="brush:css">margin-top: 10px;
+```css
+margin-top: 10px;
 margin-right: 5px;
 margin-bottom: 10px;
-margin-left: 5px;</pre>
+margin-left: 5px;
+```
 
-<p>sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à <em>trouble</em>) :</p>
+sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à _trouble_) :
 
-<pre class="brush:css">margin: 10px 5px 10px 5px;</pre>
+```css
+margin: 10px 5px 10px 5px;
+```
 
-<h2 id="La_propriété_raccourcie_universelle">La propriété raccourcie universelle</h2>
+## La propriété raccourcie universelle
 
-<p>CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.</p>
+CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.
 
-<p>Voir l'article sur <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">la cascade et l'héritage</a> pour plus d'informations sur le fonctionnement de l'héritage.</p>
+Voir l'article sur [la cascade et l'héritage](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) pour plus d'informations sur le fonctionnement de l'héritage.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
- <li>Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li>
-</ul>
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
+- Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
diff --git a/files/fr/web/css/specified_value/index.md b/files/fr/web/css/specified_value/index.md
index 6bf0f900be..822f7a19da 100644
--- a/files/fr/web/css/specified_value/index.md
+++ b/files/fr/web/css/specified_value/index.md
@@ -8,35 +8,36 @@ tags:
 translation_of: Web/CSS/specified_value
 original_slug: Web/CSS/Valeur_spécifiée
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La <strong>valeur définie</strong> d'une propriété CSS est celle explicitement définie dans la feuille de style ou grâce au style de son élément parent. Elle est déterminée selon une des trois méthodes suivantes :</p>
+La **valeur définie** d'une propriété CSS est celle explicitement définie dans la feuille de style ou grâce au style de son élément parent. Elle est déterminée selon une des trois méthodes suivantes :
 
-<ol>
- <li>Si la feuille de style du document a une valeur définie pour la propriété, alors c'est cette valeur qui est utilisée. Par exemple, si la propriété {{cssxref("color")}} est définie à <code>green</code> alors la couleur du texte des éléments correspondants sera verte.</li>
- <li>Si la feuille de style du document n'a pas de valeur définie, alors, si c'est possible, elle sera héritée de l'élément parent. Par exemple, si on a un paragraphe ({{HTMLElement("p")}}) dans un {{HTMLElement("div")}} et que le {{HTMLElement("div")}} est ciblée par une déclaration CSS où <code>font</code> vaut <code>Arial</code> et qu'il n'y a pas de règle <code>font</code> pour {{HTMLElement("p")}}, ce dernier héritera de la police Arial.</li>
- <li>Si aucun des cas précédents ne s'applique, c'est la valeur initiale de la propriété CSS qui est appliquée.</li>
-</ol>
+1.  Si la feuille de style du document a une valeur définie pour la propriété, alors c'est cette valeur qui est utilisée. Par exemple, si la propriété {{cssxref("color")}} est définie à `green` alors la couleur du texte des éléments correspondants sera verte.
+2.  Si la feuille de style du document n'a pas de valeur définie, alors, si c'est possible, elle sera héritée de l'élément parent. Par exemple, si on a un paragraphe ({{HTMLElement("p")}}) dans un {{HTMLElement("div")}} et que le {{HTMLElement("div")}} est ciblée par une déclaration CSS où `font` vaut `Arial` et qu'il n'y a pas de règle `font` pour {{HTMLElement("p")}}, ce dernier héritera de la police Arial.
+3.  Si aucun des cas précédents ne s'applique, c'est la valeur initiale de la propriété CSS qui est appliquée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Ma couleur provient explicitement de la feuille de style CSS.&lt;/p&gt;
+```html
+<p>Ma couleur provient explicitement de la feuille de style CSS.</p>
 
-&lt;div&gt;Les valeurs définies de mes propriétés utilisent
+<div>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.&lt;/div&gt;
+    dans la feuille de style CSS.</div>
 
-&lt;div class="fun"&gt;
-  &lt;p&gt;La valeur définie pour ma police n'est pas fournie explicitement
+<div class="fun">
+  <p>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.&lt;/p&gt;
-&lt;/div&gt;</pre>
+     Toutefois, la bordure n'est pas une propriété héritée.</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.fun {
+```css
+.fun {
   border: 1px dotted pink;
   font-family: fantasy;
 }
@@ -44,43 +45,24 @@ original_slug: Web/CSS/Valeur_spécifiée
 p {
   color: green;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 500, 220)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}}</td>
-   <td>{{Spec2("CSS2.2")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">La notion de valeur utilisée</a></li>
- <li><a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">La notion de valeur résolue</a></li>
- <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 500, 220)}}
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                   | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}} | {{Spec2("CSS2.2")}} |                      |
+| {{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}} | {{Spec2("CSS2.1")}} | Définition initiale. |
+
+## Voir aussi
+
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
+- [La notion de valeur initiale](/fr/docs/Web/CSS/Valeur_initiale)
+- [La notion de valeur calculée](/fr/docs/Web/CSS/Valeur_calculée)
+- [La notion de valeur utilisée](/fr/docs/Web/CSS/Valeur_utilisée)
+- [La notion de valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)
+- [La notion de valeur réelle](/fr/docs/Web/CSS/valeur_reelle)
diff --git a/files/fr/web/css/string/index.md b/files/fr/web/css/string/index.md
index e9f88f93dd..7ce1718965 100644
--- a/files/fr/web/css/string/index.md
+++ b/files/fr/web/css/string/index.md
@@ -7,27 +7,26 @@ tags:
   - Type
 translation_of: Web/CSS/string
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée CSS <strong><code>&lt;string&gt;</code></strong> représente une chaîne de caractères. En CSS, les chaînes de caractères sont présentes dans de nombreuses propriétés comme {{cssxref("content")}}, {{cssxref("font-family")}} et {{cssxref("quotes")}}.</p>
+Le type de donnée CSS **`<string>`** représente une chaîne de caractères. En CSS, les chaînes de caractères sont présentes dans de nombreuses propriétés comme {{cssxref("content")}}, {{cssxref("font-family")}} et {{cssxref("quotes")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une chaîne de caractères CSS est formée d'un ou plusieurs caractères <a href="https://fr.wikipedia.org/wiki/Unicode">Unicode</a> délimités par des quotes (<code>'</code>) ou des doubles quotes (<code>"</code>). Une chaîne délimitée par des doubles quotes ne peut pas contenir de double quotes à moins qu'elles soient échappées à l'aide d'une barre oblique inversée (<code>\</code>). Le même principe s'applique aux chaînes délimitées par des quotes simples, qui ne peuvent contenir de quotes simples sans qu'elles soient échappés à l'aide d'une barre oblique inversée (<code>\</code>).</p>
+Une chaîne de caractères CSS est formée d'un ou plusieurs caractères [Unicode](https://fr.wikipedia.org/wiki/Unicode) délimités par des quotes (`'`) ou des doubles quotes (`"`). Une chaîne délimitée par des doubles quotes ne peut pas contenir de double quotes à moins qu'elles soient échappées à l'aide d'une barre oblique inversée (`\`). Le même principe s'applique aux chaînes délimitées par des quotes simples, qui ne peuvent contenir de quotes simples sans qu'elles soient échappés à l'aide d'une barre oblique inversée (`\`).
 
-<p>Le caractère barre oblique inversée doit être échappé afin de faire partie d'une chaîne de caractère.</p>
+Le caractère barre oblique inversée doit être échappé afin de faire partie d'une chaîne de caractère.
 
-<p>Les nouvelles lignes ne sont pas acceptées, sauf si elles sont échappées à l'aide d'un caractère de saut de ligne tel que <code>\A</code> ou <code>\00000a</code>. Toutefois, des chaînes de caractères peuvent s'étendre sur plusieurs lignes. Dans ce cas, il est possible de couper la chaîne en plusieurs lignes en utilisant une barre oblique inversée (<code>\</code>) comme dernier caractère de chaque ligne.</p>
+Les nouvelles lignes ne sont pas acceptées, sauf si elles sont échappées à l'aide d'un caractère de saut de ligne tel que `\A` ou `\00000a`. Toutefois, des chaînes de caractères peuvent s'étendre sur plusieurs lignes. Dans ce cas, il est possible de couper la chaîne en plusieurs lignes en utilisant une barre oblique inversée (`\`) comme dernier caractère de chaque ligne.
 
-<p>Les caractères peuvent être décrits en utilisant leur <a href="https://fr.wikipedia.org/wiki/Unicode#Partitionnement">point de code Unicode</a> hexadécimal, qui doit alors être échappé à l'aide du caractère <code>\</code>. <code>\27</code> représente par exemple le guillemet droit simple (<code>'</code>) et <code>\A9</code> le symbole du <em>copyright</em> ©.</p>
+Les caractères peuvent être décrits en utilisant leur [point de code Unicode](https://fr.wikipedia.org/wiki/Unicode#Partitionnement) hexadécimal, qui doit alors être échappé à l'aide du caractère `\`. `\27` représente par exemple le guillemet droit simple (`'`) et `\A9` le symbole du _copyright_ ©.
 
-<div class="note">
-<p><strong>Note :</strong> Les <a href="/fr/docs/Glossary/Entity">entités</a> telles que <code>&amp;nbsp;</code> ou <code>&amp;#8212;</code> ne peuvent pas être utilisées pour les chaînes de caractères CSS.</p>
-</div>
+> **Note :** Les [entités](/fr/docs/Glossary/Entity) telles que `&nbsp;` ou `&#8212;` ne peuvent pas être utilisées pour les chaînes de caractères CSS.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">"Chaîne avec des guillemets doubles"
+```css
+"Chaîne avec des guillemets doubles"
 "Chaîne avec plusieurs \" guillemets doubles"
 'Chaîne avec des guillemets simples'
 'Chaîne avec plusieurs \' guillemets simples'
@@ -37,49 +36,24 @@ translation_of: Web/CSS/string
 "Une grande chaîne \
 de caractères"
 "Une grande chaîne de caractères"
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> on peut également échapper des doubles quotes avec <code>\22</code> et les simples quotes avec <code>\27</code>.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#strings', '')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Aucune modification significative depuis CSS Level 2 (Revision 1)</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'syndata.html#strings', '')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition explicite. Les valeurs Unicode échappées sur 6 chiffres sont autorisées.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '', '')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition implicite. Les valeurs Unicode échappées sur 4 chiffres sont autorisées.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.string")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Values_and_Units">Valeurs et unités en CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Types">Types de donnée en CSS</a></li>
-</ul>
+```
+
+> **Note :** on peut également échapper des doubles quotes avec `\22` et les simples quotes avec `\27`.
+
+## Spécifications
+
+| Spécification                                                        | État                             | Commentaires                                                                        |
+| -------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Values', '#strings', '')}}             | {{Spec2('CSS3 Values')}} | Aucune modification significative depuis CSS Level 2 (Revision 1)                   |
+| {{SpecName('CSS2.1', 'syndata.html#strings', '')}} | {{Spec2('CSS2.1')}}         | Définition explicite. Les valeurs Unicode échappées sur 6 chiffres sont autorisées. |
+| {{SpecName('CSS1', '', '')}}                                 | {{Spec2('CSS1')}}         | Définition implicite. Les valeurs Unicode échappées sur 4 chiffres sont autorisées. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.string")}}
+
+## Voir aussi
+
+- [Valeurs et unités en CSS](/fr/docs/Web/CSS/CSS_Values_and_Units)
+- [Tutoriel - Introduction aux valeurs et unités CSS](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [Types de donnée en CSS](/fr/docs/Web/CSS/CSS_Types)
diff --git a/files/fr/web/css/symbols()/index.md b/files/fr/web/css/symbols()/index.md
index 8e0395bae9..7cf6303e0a 100644
--- a/files/fr/web/css/symbols()/index.md
+++ b/files/fr/web/css/symbols()/index.md
@@ -7,68 +7,55 @@ tags:
   - Reference
 translation_of: Web/CSS/symbols()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>symbols()</code></strong> permet de définir des styles pour les compteurs en ligne, directement comme valeur de la propriété CSS. À la différence des styles définis avec {{cssxref("@counter-style")}}, ces styles sont anonymes. La fonction <code>symbols()</code> ne possède pas toute la flexibilité offerte par la règle @ {{cssxref("@counter-style")}} mais peut s'avérer utile dans des cas où le style nécessaire n'est utilisé qu'une seule fois et où il n'est pas nécessaire d'utiliser toutes les options fournies par {{cssxref("@counter-style")}}.</p>
+La fonction **`symbols()`** permet de définir des styles pour les compteurs en ligne, directement comme valeur de la propriété CSS. À la différence des styles définis avec {{cssxref("@counter-style")}}, ces styles sont anonymes. La fonction `symbols()` ne possède pas toute la flexibilité offerte par la règle @ {{cssxref("@counter-style")}} mais peut s'avérer utile dans des cas où le style nécessaire n'est utilisé qu'une seule fois et où il n'est pas nécessaire d'utiliser toutes les options fournies par {{cssxref("@counter-style")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">symbols() = symbols( &lt;symbols-type&gt;? [ &lt;string&gt; | &lt;image&gt; ]+ );</pre>
+    symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
 
-<p><code>&lt;symbols-type&gt;</code> est l'un des mots-clés suivants :</p>
+`<symbols-type>` est l'un des mots-clés suivants :
 
-<ul>
- <li><code>cyclic</code> : le système utilisera les différentes valeurs les unes à la suite des autres, de façon cyclique.</li>
- <li><code>numeric</code> : le système interprètera les valeurs fournies comme une suite numérique composant un système de numération.</li>
- <li><code>alphabetic</code> : le système interprètera les valeurs fournies comme les chiffres d'un système de numération alphabétique (par exemple : A, B, C, AA, AB, AC, etc.) sans zéro.</li>
- <li><code>symbolic</code> : le système parcourt les différentes valeurs fournies et en affiche une de plus à chaque cycle.</li>
- <li><code>fixed</code> : le système affiche chaque symbole une fois puis poursuit avec les chiffres arabes.</li>
-</ul>
+- `cyclic` : le système utilisera les différentes valeurs les unes à la suite des autres, de façon cyclique.
+- `numeric` : le système interprètera les valeurs fournies comme une suite numérique composant un système de numération.
+- `alphabetic` : le système interprètera les valeurs fournies comme les chiffres d'un système de numération alphabétique (par exemple : A, B, C, AA, AB, AC, etc.) sans zéro.
+- `symbolic` : le système parcourt les différentes valeurs fournies et en affiche une de plus à chaque cycle.
+- `fixed` : le système affiche chaque symbole une fois puis poursuit avec les chiffres arabes.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;Un&lt;/li&gt;
-  &lt;li&gt;Deux&lt;/li&gt;
-  &lt;li&gt;Trois&lt;/li&gt;
-  &lt;li&gt;Quatre&lt;/li&gt;
-  &lt;li&gt;Cinq&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol>
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+  <li>Quatre</li>
+  <li>Cinq</li>
+</ol>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">ol {
+```css
+ol {
   list-style: symbols(alphabetic "*" "\2020" "\2021");
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#symbols-function', 'symbols()')}}</td>
-   <td>{{Spec2('CSS3 Counter Styles')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("@counter-style")}}</li>
- <li>{{cssxref("list-style-type")}} et la propriété raccourcie correspondante : {{cssxref("list-style")}}.</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                                | Statut                                       | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#symbols-function', 'symbols()')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+## Voir aussi
+
+- {{cssxref("@counter-style")}}
+- {{cssxref("list-style-type")}} et la propriété raccourcie correspondante : {{cssxref("list-style")}}.
diff --git a/files/fr/web/css/tab-size/index.md b/files/fr/web/css/tab-size/index.md
index bb78bd950c..78a7cfb132 100644
--- a/files/fr/web/css/tab-size/index.md
+++ b/files/fr/web/css/tab-size/index.md
@@ -8,17 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/tab-size
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété<strong> <code>tab-size</code></strong> permet d'adapter la largeur utilisée pour représenter le caractère de tabulation (<code>U+0009</code>).</p>
+La propriété** `tab-size`** permet d'adapter la largeur utilisée pour représenter le caractère de tabulation (`U+0009`).
 
-<pre class="brush:css no-line-numbers">/* Valeurs entières */
-/* Type &lt;integer&gt;   */
+```css
+/* Valeurs entières */
+/* Type <integer>   */
 tab-size: 4;
 tab-size: 0;
 
 /* Valeurs de longueurs */
-/* Type &lt;length&gt;        */
+/* Type <length>        */
 tab-size: 10px;
 tab-size: 2em;
 
@@ -26,71 +27,57 @@ tab-size: 2em;
 tab-size: inherit;
 tab-size: initial;
 tab-size: unset;
-</pre>
+```
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;integer&gt;")}}</dt>
- <dd>Le nombre d'espaces qu'occupe une tabulation. La valeur doit être positive.</dd>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>La largeur de la tabulation. La valeur doit être positive.</dd>
-</dl>
+- {{cssxref("&lt;integer&gt;")}}
+  - : Le nombre d'espaces qu'occupe une tabulation. La valeur doit être positive.
+- {{cssxref("&lt;length&gt;")}}
+  - : La largeur de la tabulation. La valeur doit être positive.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;pre class="exemple"&gt;
+```html
+<pre class="exemple">
 	print "tabulation avant"
     print "4 espaces avant"
   print "2 espaces avant"
-&lt;/pre&gt;</pre>
+</pre>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   tab-size: 5;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+{{EmbedLiveSample("Exemples","100%","100%")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}} | {{Spec2('CSS3 Text')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.tab-size")}}</p>
+{{Compat("css.properties.tab-size")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html">Contrôler la taille du caractère de tabulation (U+0009)</a>, un e-mail d'Anne van Kesteren pour le CSSWG afin de proposer la standardisation de cette propriété (en anglais).</li>
-</ul>
+- [Contrôler la taille du caractère de tabulation (U+0009)](http://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html), un e-mail d'Anne van Kesteren pour le CSSWG afin de proposer la standardisation de cette propriété (en anglais).
diff --git a/files/fr/web/css/table-layout/index.md b/files/fr/web/css/table-layout/index.md
index c61d102988..8bfbf04739 100644
--- a/files/fr/web/css/table-layout/index.md
+++ b/files/fr/web/css/table-layout/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/table-layout
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>table-layout</code></strong> définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.</p>
+La propriété **`table-layout`** définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.
 
-<div>{{EmbedInteractiveExample("pages/css/table-layout.html")}}</div>
+{{EmbedInteractiveExample("pages/css/table-layout.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeur utilisant un mot-clé */
+```css
+/* Valeur utilisant un mot-clé */
 table-layout: auto;
 table-layout: fixed;
 
@@ -23,43 +24,45 @@ table-layout: fixed;
 table-layout: inherit;
 table-layout: initial;
 table-layout: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("auto")}}</dt>
- <dd>Un algorithme automatique, utilisé communément par la plupart des navigateurs, est utilisé pour gérer la disposition du tableau. La largeur du tableau et de ses cellules dépendent de leur contenu.</dd>
- <dt><code>fixed</code></dt>
- <dd>La largeur du tableau et celles des colonnes sont définies grâce aux largeurs des éléments <code>table</code> et <code>col</code> ou grâce à la largeur (explicite) de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes.<br>
- <br>
- Avec cette méthode « fixée », tout le tableau peut être rendu dès que la première ligne a été téléchargée et analysée. Cela permet d'accélérer le temps de rendu par rapport à la valeur <code>auto</code>. En revanche, le contenu des lignes (en dehors de la première), peut ne pas rentrer dans les colonnes avec la largeur calculée. Les cellules dont le contenu est trop large utiliseront la propriété {{cssxref("overflow")}} pour déterminer comment gérer le dépassement.</dd>
-</dl>
+- {{cssxref("auto")}}
+  - : Un algorithme automatique, utilisé communément par la plupart des navigateurs, est utilisé pour gérer la disposition du tableau. La largeur du tableau et de ses cellules dépendent de leur contenu.
+- `fixed`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : La largeur du tableau et celles des colonnes sont définies grâce aux largeurs des éléments `table` et `col` ou grâce à la largeur (explicite) de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes.
+
+    Avec cette méthode « fixée », tout le tableau peut être rendu dès que la première ligne a été téléchargée et analysée. Cela permet d'accélérer le temps de rendu par rapport à la valeur `auto`. En revanche, le contenu des lignes (en dehors de la première), peut ne pas rentrer dans les colonnes avec la largeur calculée. Les cellules dont le contenu est trop large utiliseront la propriété {{cssxref("overflow")}} pour déterminer comment gérer le dépassement.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple utilise <code>table-layout: fixed</code> et une largeur donnée (avec la propriété <code>width</code>) afin que le tableau ne s'agrandisse pas avec son contenu. Ainsi, on peut voir l'effet de la propriété {{cssxref("text-overflow")}} et l'application d'une ellipse pour les mots trop longs pour le tableau.</p>
+Cet exemple utilise `table-layout: fixed` et une largeur donnée (avec la propriété `width`) afin que le tableau ne s'agrandisse pas avec son contenu. Ainsi, on peut voir l'effet de la propriété {{cssxref("text-overflow")}} et l'application d'une ellipse pour les mots trop longs pour le tableau.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;table class="exemple"&gt;
-  &lt;tr&gt;
-    &lt;td width="7em"&gt;Jean&lt;/td&gt;
-    &lt;td width="7em"&gt;Biche&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Jean-Roger-Michel&lt;/td&gt;
-    &lt;td&gt;du Domaine de la Biche&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
+```html
+<table class="exemple">
+  <tr>
+    <td width="7em">Jean</td>
+    <td width="7em">Biche</td>
+  </tr>
+  <tr>
+    <td>Jean-Roger-Michel</td>
+    <td>du Domaine de la Biche</td>
+  </tr>
+</table>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   table-layout: fixed;
   width: 120px;
   border: 1px solid red;
@@ -75,33 +78,20 @@ td {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ------------------------ | -------------------- |
+| {{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}} | {{Spec2('CSS2.1')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.table-layout")}}</p>
+{{Compat("css.properties.table-layout")}}
diff --git a/files/fr/web/css/text-align-last/index.md b/files/fr/web/css/text-align-last/index.md
index 8b798074b4..ac15743288 100644
--- a/files/fr/web/css/text-align-last/index.md
+++ b/files/fr/web/css/text-align-last/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/text-align-last
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-align-last</code></strong> définit la façon dont la dernière ligne d'un bloc, ou une ligne avant un retour à la ligne forcé, doit être alignée.</p>
+La propriété **`text-align-last`** définit la façon dont la dernière ligne d'un bloc, ou une ligne avant un retour à la ligne forcé, doit être alignée.
 
-<div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-align-last.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs utilisant un mot-clé */
+```css
+/* Valeurs utilisant un mot-clé */
 text-align-last: auto;
 text-align-last: start;
 text-align-last: end;
@@ -28,83 +29,69 @@ text-align-last: justify;
 text-align-last: inherit;
 text-align-last: initial;
 text-align-last: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>La ligne concernée est alignée selon la valeur de {{cssxref("text-align")}} sauf si {{cssxref("text-align")}} vaut <code>justify</code>, auquel cas, cela aura le même effet que d'utiliser la valeur <code>start</code> pour <code>text-align-last</code>.</dd>
- <dt><code>start</code></dt>
- <dd>Cette valeur a le même effet que la valeur <code>left</code> si la direction du texte va de gauche à droite ou le même effet que <code>right</code> si la direction du texte va de droite à gauche.</dd>
- <dt><code>end</code></dt>
- <dd>Cette valeur a le même effet que la valeur <code>right</code> si la direction du texte va de gauche à droite ou le même effet que <code>left</code> si la direction du texte va de droite à gauche.</dd>
- <dt><code>left</code></dt>
- <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord gauche de la boîte contenant la ligne.</dd>
- <dt><code>right</code></dt>
- <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord droit de la boîte contenant la ligne.</dd>
- <dt><code>center</code></dt>
- <dd>Les contenus en ligne (<em>inline</em>) sont horizontalement centrés par rapport à la boîte contenant la ligne.</dd>
- <dt><code>justify</code></dt>
- <dd>Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `auto`
+  - : La ligne concernée est alignée selon la valeur de {{cssxref("text-align")}} sauf si {{cssxref("text-align")}} vaut `justify`, auquel cas, cela aura le même effet que d'utiliser la valeur `start` pour `text-align-last`.
+- `start`
+  - : Cette valeur a le même effet que la valeur `left` si la direction du texte va de gauche à droite ou le même effet que `right` si la direction du texte va de droite à gauche.
+- `end`
+  - : Cette valeur a le même effet que la valeur `right` si la direction du texte va de gauche à droite ou le même effet que `left` si la direction du texte va de droite à gauche.
+- `left`
+  - : Les contenus en ligne (_inline_) sont alignés sur le bord gauche de la boîte contenant la ligne.
+- `right`
+  - : Les contenus en ligne (_inline_) sont alignés sur le bord droit de la boîte contenant la ligne.
+- `center`
+  - : Les contenus en ligne (_inline_) sont horizontalement centrés par rapport à la boîte contenant la ligne.
+- `justify`
+  - : Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   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.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.exemple {
+```css
+.exemple {
   text-align: justify;
   text-align-last: center;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+{{EmbedLiveSample("Exemples","100%","100%")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}} | {{Spec2('CSS3 Text')}} | Définition initiale. |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-align-last")}}</p>
+{{Compat("css.properties.text-align-last")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("text-align")}}</li>
-</ul>
+- {{cssxref("text-align")}}
diff --git a/files/fr/web/css/text-align/index.md b/files/fr/web/css/text-align/index.md
index 77b812babb..78cabf13aa 100644
--- a/files/fr/web/css/text-align/index.md
+++ b/files/fr/web/css/text-align/index.md
@@ -7,15 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/text-align
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-align</code></strong> définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à {{cssxref("vertical-align")}} mais dans le sens horizontal.</p>
+La propriété **`text-align`** définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à {{cssxref("vertical-align")}} mais dans le sens horizontal.
 
-<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div
+{{EmbedInteractiveExample("pages/css/text-align.html")}}Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 text-align: left;
 text-align: right;
 text-align: center;
@@ -38,186 +37,166 @@ text-align: -webkit-center;
 text-align: inherit;
 text-align: initial;
 text-align: unset;
-</pre>
-
-<p>La propriété <code>text-align</code> peut être définie grâce à l'un des mots-clés de la liste qui suit.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>start</code> {{experimental_inline}}</dt>
- <dd>Cette valeur a le même effet que la valeur <code>left</code> si la direction du texte va de gauche à droite ou le même effet que <code>right</code> si la direction du texte va de droite à gauche.</dd>
- <dt><code>end</code> {{experimental_inline}}</dt>
- <dd>Cette valeur a le même effet que la valeur <code>right</code> si la direction du texte va de gauche à droite ou le même effet que <code>left</code> si la direction du texte va de droite à gauche.</dd>
- <dt><code>left</code></dt>
- <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord gauche de la boîte contenant la ligne.</dd>
- <dt><code>right</code></dt>
- <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord droit de la boîte contenant la ligne.</dd>
- <dt><code>center</code></dt>
- <dd>Les contenus en ligne (<em>inline</em>) sont horizontalement centrés par rapport à la boîte contenant la ligne.</dd>
- <dt><code>justify</code></dt>
- <dd>Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.</dd>
- <dt><code>justify-all</code>{{experimental_inline}}</dt>
- <dd>Comportement analogue à <code>justify</code> mais avec la dernière ligne nécessairement justifiée.</dd>
- <dt><code>match-parent</code> {{experimental_inline}}</dt>
- <dd>Semblable à <code>inherit</code> mais les valeurs <code>start</code> et <code>end</code> sont calculées selon la valeur de {{cssxref("direction")}} pour le parent et sont remplacées par <code>left</code> ou <code>right</code> selon ce qui est adéquat.</dd>
- <dt>{{cssxref("&lt;string&gt;")}} {{experimental_inline}}</dt>
- <dd>Lorsque cette valeur est appliquée sur une cellule de tableau, elle indique le caractère sur lequel doit être aligné le contenu de la cellule.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `text-align` peut être définie grâce à l'un des mots-clés de la liste qui suit.
+
+### Valeurs
+
+- `start` {{experimental_inline}}
+  - : Cette valeur a le même effet que la valeur `left` si la direction du texte va de gauche à droite ou le même effet que `right` si la direction du texte va de droite à gauche.
+- `end` {{experimental_inline}}
+  - : Cette valeur a le même effet que la valeur `right` si la direction du texte va de gauche à droite ou le même effet que `left` si la direction du texte va de droite à gauche.
+- `left`
+  - : Les contenus en ligne (_inline_) sont alignés sur le bord gauche de la boîte contenant la ligne.
+- `right`
+  - : Les contenus en ligne (_inline_) sont alignés sur le bord droit de la boîte contenant la ligne.
+- `center`
+  - : Les contenus en ligne (_inline_) sont horizontalement centrés par rapport à la boîte contenant la ligne.
+- `justify`
+  - : Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.
+- `justify-all`{{experimental_inline}}
+  - : Comportement analogue à `justify` mais avec la dernière ligne nécessairement justifiée.
+- `match-parent` {{experimental_inline}}
+  - : Semblable à `inherit` mais les valeurs `start` et `end` sont calculées selon la valeur de {{cssxref("direction")}} pour le parent et sont remplacées par `left` ou `right` selon ce qui est adéquat.
+- {{cssxref("&lt;string&gt;")}} {{experimental_inline}}
+  - : Lorsque cette valeur est appliquée sur une cellule de tableau, elle indique le caractère sur lequel doit être aligné le contenu de la cellule.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Alignement_à_gauche">Alignement à gauche</h3>
+### Alignement à gauche
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   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.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   text-align: left;
   border: solid;
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Alignement_à_gauche","100%","100%")}}</p>
+{{EmbedLiveSample("Alignement_à_gauche","100%","100%")}}
 
-<h3 id="Texte_centré">Texte centré</h3>
+### Texte centré
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   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.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   text-align: center;
   border: solid;
-}</pre>
+}
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Texte_centré","100%","100%")}}</p>
+{{EmbedLiveSample("Texte_centré","100%","100%")}}
 
-<h3 id="Justification">Justification</h3>
+### Justification
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;
+```html
+<p class="exemple">
   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.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   text-align: justify;
   border: solid;
-}</pre>
+}
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Justification","100%","100%")}}</p>
+{{EmbedLiveSample("Justification","100%","100%")}}
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>La méthode la plus générique pour centrer un bloc plutot que de centrer son contenu est d'utiliser la propriété {{cssxref("margin")}} avec les valeurs <code>left</code> et <code>right</code> à <code>auto</code>, e.g. :</p>
+La méthode la plus générique pour centrer un bloc plutot que de centrer son contenu est d'utiliser la propriété {{cssxref("margin")}} avec les valeurs `left` et `right` à `auto`, e.g. :
 
-<pre class="brush: css">.classe {
+```css
+.classe {
   margin: auto;
 }
-</pre>
+```
 
-<pre class="brush: css">.classe {
+```css
+.classe {
   margin: 0 auto;
 }
-</pre>
+```
 
-<pre class="brush: css">.classe {
+```css
+.classe {
   margin-left: auto;
   margin-right: auto;
 }
-</pre>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>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.</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html"><em>Understanding Success Criterion 1.4.8  | Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>Aucun changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td>
-   <td>{{Spec2('CSS4 Text')}}</td>
-   <td>Ajout de la gestion des valeurs <code>&lt;string&gt;</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Ajout des valeurs <code>start</code>, <code>end</code> et <code>match-parent</code>. La valeur initiale qui n'était pas nommée est bien définie avec <code>start</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-align")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("margin","margin:auto")}}</li>
- <li>{{cssxref("margin-left","margin-left:auto")}}</li>
- <li>{{cssxref("vertical-align")}}</li>
-</ul>
+```
+
+## Accessibilité
+
+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](https://developer.mozilla.org/en-US/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)
+
+## Spécifications
+
+| Spécification                                                                            | État                                             | Commentaires                                                                                                                 |
+| ---------------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS Logical Properties', '#text-align', 'text-align')}} | {{Spec2('CSS Logical Properties')}} | Aucun changement                                                                                                             |
+| {{SpecName('CSS4 Text', '#alignment', 'text-align')}}                 | {{Spec2('CSS4 Text')}}                     | Ajout de la gestion des valeurs `<string>`.                                                                                  |
+| {{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}     | {{Spec2('CSS3 Text')}}                     | Ajout des valeurs `start`, `end` et `match-parent`. La valeur initiale qui n'était pas nommée est bien définie avec `start`. |
+| {{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}     | {{Spec2('CSS2.1')}}                         | Aucun changement                                                                                                             |
+| {{SpecName('CSS1', '#text-align', 'text-align')}}                         | {{Spec2('CSS1')}}                         | Définition initiale.                                                                                                         |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-align")}}
+
+## Voir aussi
+
+- {{cssxref("margin","margin:auto")}}
+- {{cssxref("margin-left","margin-left:auto")}}
+- {{cssxref("vertical-align")}}
diff --git a/files/fr/web/css/text-combine-upright/index.md b/files/fr/web/css/text-combine-upright/index.md
index 3d47144c98..60ae92446f 100644
--- a/files/fr/web/css/text-combine-upright/index.md
+++ b/files/fr/web/css/text-combine-upright/index.md
@@ -8,13 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/text-combine-upright
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-combine-upright</code></strong> définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'<code>1em</code>, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur <code>1em</code>. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.</p>
+La propriété **`text-combine-upright`** définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'`1em`, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur `1em`. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.
 
-<p>Cela permet d'obtenir un effet appelé tate-chū-yoko (縦中横) en japonais ou 直書橫向 en chinois.</p>
+Cela permet d'obtenir un effet appelé tate-chū-yoko (縦中横) en japonais ou 直書橫向 en chinois.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 text-combine-upright: none;
 text-combine-upright: all;
 
@@ -31,90 +32,74 @@ text-combine-upright: digits 4;
 text-combine-upright: inherit;
 text-combine-upright: initial;
 text-combine-upright: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Aucun traitement particulier n'est appliqué.</dd>
- <dt><code>all</code></dt>
- <dd>L'agent utilisateur tente de compresser tous les caractères consécutifs dans une même boîte afin qu'ils occupent l'espace d'un seul caractère sur l'axe vertical de la boîte.</dd>
- <dt><code>digits &lt;n&gt;?</code></dt>
- <dd>L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030–U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle <code>[2;4]</code> sont considérés comme invalides.</dd>
-</dl>
+- `none`
+  - : Aucun traitement particulier n'est appliqué.
+- `all`
+  - : L'agent utilisateur tente de compresser tous les caractères consécutifs dans une même boîte afin qu'ils occupent l'espace d'un seul caractère sur l'axe vertical de la boîte.
+- `digits <n>?`
+  - : L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030–U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle `[2;4]` sont considérés comme invalides.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_avec_digits">Exemple avec <code>digits</code></h3>
+### Exemple avec `digits`
 
-<p>Utiliser <code>digit</code><code>s</code> nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs.</p>
+Utiliser ` digit``s ` nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs.
 
-<pre class="brush: html">&lt;p lang="ja" class="exempleText"&gt;平成20年4月16日に&lt;/p&gt;
-</pre>
+```html
+<p lang="ja" class="exempleText">平成20年4月16日に</p>
+```
 
-<pre class="brush: css">.exempleText {
+```css
+.exempleText {
   writing-mode: vertical-lr;
   text-combine-upright: digits 2;
   font: 36px serif;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Exemple_avec_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}</p>
+{{EmbedLiveSample("Exemple_avec_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}
 
-<h3 id="Exemple_avec_all">Exemple avec <code>all</code></h3>
+### Exemple avec `all`
 
-<p>Pour utiliser <code>all</code>, on devra baliser chaque fragment de texte horizontal mais cette valeur est actuellement mieux prise en charge que <code>digits</code>.</p>
+Pour utiliser `all`, on devra baliser chaque fragment de texte horizontal mais cette valeur est actuellement mieux prise en charge que `digits`.
 
-<pre class="brush: html">&lt;p lang="zh-Hant"&gt;民國&lt;span class="num"&gt;105&lt;/span
-&gt;年&lt;span class="num"&gt;4&lt;/span
-&gt;月&lt;span class="num"&gt;29&lt;/span&gt;日&lt;/p&gt;
-</pre>
+```html
+<p lang="zh-Hant">民國<span class="num">105</span
+>年<span class="num">4</span
+>月<span class="num">29</span>日</p>
+```
 
-<pre class="brush: css">html { writing-mode: vertical-rl; font: 24px serif }
+```css
+html { writing-mode: vertical-rl; font: 24px serif }
 .num { text-combine-upright: all }
-</pre>
-
-<p>{{EmbedLiveSample("Exemple_avec_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
-   <td>{{Spec2("CSS3 Writing Modes")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
-   <td>{{Spec2("CSS4 Writing Modes")}}</td>
-   <td>Ajout de la valeur <code>digits</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-combine-upright")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("writing-mode")}},</li>
- <li>{{cssxref("text-orientation")}}</li>
-</ul>
+```
+
+{{EmbedLiveSample("Exemple_avec_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                     | Commentaires                 |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------- |
+| {{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}} | {{Spec2("CSS3 Writing Modes")}} | Définition initiale.         |
+| {{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}} | {{Spec2("CSS4 Writing Modes")}} | Ajout de la valeur `digits`. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-combine-upright")}}
+
+## Voir aussi
+
+- {{cssxref("writing-mode")}},
+- {{cssxref("text-orientation")}}
diff --git a/files/fr/web/css/text-decoration-color/index.md b/files/fr/web/css/text-decoration-color/index.md
index 8cd3cb905e..6a3e314acb 100644
--- a/files/fr/web/css/text-decoration-color/index.md
+++ b/files/fr/web/css/text-decoration-color/index.md
@@ -7,28 +7,25 @@ tags:
   - Reference
 translation_of: Web/CSS/text-decoration-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-decoration-color</code></strong> définit la couleur utilisée pour dessiner les lignes décorant le texte (quel que soit le style définit {{cssxref("text-decoration-line")}}).</p>
+La propriété **`text-decoration-color`** définit la couleur utilisée pour dessiner les lignes décorant le texte (quel que soit le style définit {{cssxref("text-decoration-line")}}).
 
-<p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p>
+La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.
 
-<div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on définit plusieurs décorations à la fois, il peut être plus pratique d'utiliser la propriété raccourcie {{cssxref("text-decoration")}}.</p>
-</div>
+> **Note :** Lorsqu'on définit plusieurs décorations à la fois, il peut être plus pratique d'utiliser la propriété raccourcie {{cssxref("text-decoration")}}.
 
-<p>Il est préférable d'utiliser cette propriété pour colorer ces décorations plutôt que d'utiliser d'autres éléments HTML.</p>
+Il est préférable d'utiliser cette propriété pour colorer ces décorations plutôt que d'utiliser d'autres éléments HTML.
 
-<div class="note">
-<p><strong>Note :</strong> CSS ne fournit pas de mécanisme spécifique pour définir une couleur par type de ligne. On peut toutefois y parvenir en imbriquant des éléments mis en forme différemment.</p>
-</div>
+> **Note :** CSS ne fournit pas de mécanisme spécifique pour définir une couleur par type de ligne. On peut toutefois y parvenir en imbriquant des éléments mis en forme différemment.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Couleurs */
-/* Valeurs de type &lt;color&gt; */
+```css
+/* Couleurs */
+/* Valeurs de type <color> */
 text-decoration-color: currentColor;
 text-decoration-color: red;
 text-decoration-color: #00ff00;
@@ -39,28 +36,29 @@ text-decoration-color: transparent;
 text-decoration-color: inherit;
 text-decoration-color: initial;
 text-decoration-color: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>La propriété <code>color</code> accepte différents mots-clés et valeurs numériques. Pour plus de détails, voir {{cssxref("&lt;color&gt;")}}.</dd>
-</dl>
+- `<color>`
+  - : La propriété `color` accepte différents mots-clés et valeurs numériques. Pour plus de détails, voir {{cssxref("&lt;color&gt;")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;Du texte avec un effet au survol&lt;/p&gt;</pre>
+```html
+<p class="exemple">Du texte avec un effet au survol</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   text-decoration: underline;
   text-decoration-color: red;
 }
@@ -68,44 +66,28 @@ text-decoration-color: unset;
 .exemple:hover {
   color: blue;
   text-decoration: line-through;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
+}
+```
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+### Résultat
 
-<h2 id="Spécifications">Spécifications</h2>
+{{EmbedLiveSample("Exemples")}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<p>{{cssinfo}}</p>
+| Spécification                                                                                                                    | Statut                                       | Commentaires                                                                                                                |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{cssinfo}}
 
-<p>{{Compat("css.properties.text-decoration-color")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("css.properties.text-decoration-color")}}
 
-<ul>
- <li>La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer <code>text-decoration-color</code>.</li>
- <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
- <li>D'autres propriétés relatives aux couleurs : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML</a></li>
-</ul>
+## Voir aussi
 
-<p> </p>
+- La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer `text-decoration-color`.
+- Le type de données {{cssxref("&lt;color&gt;")}}
+- D'autres propriétés relatives aux couleurs : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}
+- [Appliquer des couleurs aux éléments HTML](/fr/docs/Web/HTML/Applying_color)
diff --git a/files/fr/web/css/text-decoration-line/index.md b/files/fr/web/css/text-decoration-line/index.md
index 0e9fdff6ac..acbda5b0cf 100644
--- a/files/fr/web/css/text-decoration-line/index.md
+++ b/files/fr/web/css/text-decoration-line/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/text-decoration-line
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-decoration-line</code></strong> définit la façon dont les décorations linéaires sont ajoutées à un élément et notamment leur position (sous le texte, au-dessus ou en travers de celui-ci).</p>
+La propriété **`text-decoration-line`** définit la façon dont les décorations linéaires sont ajoutées à un élément et notamment leur position (sous le texte, au-dessus ou en travers de celui-ci).
 
-<div>{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}
 
-<p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p>
+La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 text-decoration-line: none;
 text-decoration-line: underline;
 text-decoration-line: overline;
@@ -31,74 +32,61 @@ text-decoration-line: overline underline line-through;   /* On a plusieurs déco
 text-decoration-line: inherit;
 text-decoration-line: initial;
 text-decoration-line: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>Cette propriété peut avoir une ou plusieurs valeurs séparées par des espaces. Si aucune valeur n'est fournie, il n'y a pas de décoration ajoutée :</p>
+Cette propriété peut avoir une ou plusieurs valeurs séparées par des espaces. Si aucune valeur n'est fournie, il n'y a pas de décoration ajoutée :
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Aucune ligne ne décore le texte.</dd>
- <dt><code>underline</code></dt>
- <dd>Chaque ligne de texte est soulignée.</dd>
- <dt><code>overline</code></dt>
- <dd>Une ligne est dessinée au-dessus de chaque ligne de texte.</dd>
- <dt><code>line-through</code></dt>
- <dd>Une ligne est dessinée au milieu de chaque ligne de texte.</dd>
- <dt><code>blink</code> {{deprecated_inline}}</dt>
- <dd>Le texte clignote. Les agents utilisateurs conformes peuvent ne pas suivre cette directive. Cette valeur est dépréciée et il est conseillé d'utiliser les <a href="/fr/docs/Web/CSS/animation">animations CSS</a> pour obtenir un effet similaire.</dd>
-</dl>
+- `none`
+  - : Aucune ligne ne décore le texte.
+- `underline`
+  - : Chaque ligne de texte est soulignée.
+- `overline`
+  - : Une ligne est dessinée au-dessus de chaque ligne de texte.
+- `line-through`
+  - : Une ligne est dessinée au milieu de chaque ligne de texte.
+- `blink` {{deprecated_inline}}
+  - : Le texte clignote. Les agents utilisateurs conformes peuvent ne pas suivre cette directive. Cette valeur est dépréciée et il est conseillé d'utiliser les [animations CSS](/fr/docs/Web/CSS/animation) pour obtenir un effet similaire.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Voici un texte souligné avec une vaguelette rouge.&lt;/p&gt;</pre>
+```html
+<p>Voici un texte souligné avec une vaguelette rouge.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   text-decoration-line: underline;
   text-decoration-style: wavy;
   text-decoration-color: red;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', 300, 60)}}</p>
+{{EmbedLiveSample('Exemples', 300, 60)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                         | Commentaires                                                                                                                |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-decoration-line")}}</p>
+{{Compat("css.properties.text-decoration-line")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer <code>text-decoration-line</code>.</li>
-</ul>
+- La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer `text-decoration-line`.
diff --git a/files/fr/web/css/text-decoration-skip-ink/index.md b/files/fr/web/css/text-decoration-skip-ink/index.md
index 1e998a6778..148eb92d32 100644
--- a/files/fr/web/css/text-decoration-skip-ink/index.md
+++ b/files/fr/web/css/text-decoration-skip-ink/index.md
@@ -9,13 +9,14 @@ tags:
   - Web
 translation_of: Web/CSS/text-decoration-skip-ink
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>text-decoration-skip-ink</code></strong> définit la façon dont la ligne décorative (en dessous ou au dessus du texte) est dessinée lorsqu'elle rencontre <a href="https://fr.wikipedia.org/wiki/Jambage">le jambage</a> ou <a href="https://fr.wikipedia.org/wiki/F%C3%BBt_(typographie)">la hampe</a> d'un caractère (ou glyphe).</p>
+La propriété CSS **`text-decoration-skip-ink`** définit la façon dont la ligne décorative (en dessous ou au dessus du texte) est dessinée lorsqu'elle rencontre [le jambage](https://fr.wikipedia.org/wiki/Jambage) ou [la hampe](<https://fr.wikipedia.org/wiki/F%C3%BBt_(typographie)>) d'un caractère (ou glyphe).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 text-decoration-skip-ink: none;
 text-decoration-skip-ink: auto;
 
@@ -23,61 +24,50 @@ text-decoration-skip-ink: auto;
 text-decoration-skip: inherit;
 text-decoration-skip: initial;
 text-decoration-skip: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>La ligne décorative traverse l'ensemble des glyphes, qu'ils aient un jambage ou une hampe.</dd>
- <dt><code>auto</code></dt>
- <dd>La valeur par défaut : la ligne (au dessus ou en dessous du texte) est uniquement dessinée de façon à ne pas être proche des jambages ou hampes des glyphes. Autrement dit, la ligne est interrompue à chaque fois qu'elle croise un glyphe. <img alt='An example of "text-decoration-skip: ink;".' src="decoration-skip-ink.png"></dd>
-</dl>
+- `none`
+  - : La ligne décorative traverse l'ensemble des glyphes, qu'ils aient un jambage ou une hampe.
+- `auto`
+  - : La valeur par défaut : la ligne (au dessus ou en dessous du texte) est uniquement dessinée de façon à ne pas être proche des jambages ou hampes des glyphes. Autrement dit, la ligne est interrompue à chaque fois qu'elle croise un glyphe. ![An example of "text-decoration-skip: ink;".](decoration-skip-ink.png)
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Un instant après, Alice était à la poursuite du Lapin dans le terrier…&lt;/p&gt;</pre>
+```html
+<p>Un instant après, Alice était à la poursuite du Lapin dans le terrier…</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 0;
   font-size: 2em;
   text-decoration: underline blue;
   text-decoration-skip-ink: auto;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", 60)}}</p>
+{{EmbedLiveSample("Exemples", "100%", 60)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-ink-property", "text-decoration-skip-ink")}}</td>
-   <td>{{Spec2("CSS4 Text Decoration")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État                                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName("CSS4 Text Decoration", "#text-decoration-skip-ink-property", "text-decoration-skip-ink")}} | {{Spec2("CSS4 Text Decoration")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-decoration-skip-ink")}}</p>
+{{Compat("css.properties.text-decoration-skip-ink")}}
diff --git a/files/fr/web/css/text-decoration-skip/index.md b/files/fr/web/css/text-decoration-skip/index.md
index 54d576be1c..2a20e2f374 100644
--- a/files/fr/web/css/text-decoration-skip/index.md
+++ b/files/fr/web/css/text-decoration-skip/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/text-decoration-skip
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-decoration-skip</code></strong> définit la façon dont les lignes décoratives doivent être appliquées aux éléments et aux caractères. Elle contrôle les lignes décoratives dessinées par l'élément courant ainsi que celles de ses ancêtres.</p>
+La propriété **`text-decoration-skip`** définit la façon dont les lignes décoratives doivent être appliquées aux éléments et aux caractères. Elle contrôle les lignes décoratives dessinées par l'élément courant ainsi que celles de ses ancêtres.
 
-<pre class="brush: css no-line-numbers">/* Syntaxe avec un mot-clé */
+```css
+/* Syntaxe avec un mot-clé */
 text-decoration-skip: none;
 text-decoration-skip: objects;
 text-decoration-skip: edges;
@@ -28,77 +29,64 @@ text-decoration-skip: objects edges box-decoration;
 text-decoration-skip: inherit;
 text-decoration-skip: initial;
 text-decoration-skip: unset;
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> La valeur <code>ink</code> initialement définie pour cette propriété a été déplacée vers la propriété {{cssxref("text-decoration-skip-ink")}}.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>La propriété <code>text-decoration</code> s'applique à tous les éléments sélectionnés.</dd>
- <dt><code>objects</code></dt>
- <dd>La propriété <code>text-decoration</code> n'est pas appliquée pour les éléments en lignes atomiques telles que les images ou les blocs en lignes.</dd>
- <dt><code>spaces</code></dt>
- <dd>Les décorations ne sont pas appliquées où il y a des espaces (c'est-à-dire <a href="https://www.unicode.org/reports/tr44/#White_Space">des caractères Unicode considérés comme des blancs</a>, des séparateurs de mots et toute propriété {{cssxref("letter-spacing")}} ou {{cssxref("word-spacing")}} adjacente).</dd>
- <dt><code>leading-spaces</code></dt>
- <dd>Comportement analogue à <code>spaces</code> mais seuls les espaces avant les mots sont ignorés.</dd>
- <dt><code>trailing-spaces</code></dt>
- <dd>Comportement analogue à <code>spaces</code> mais seuls les espaces après les mots sont ignorés.</dd>
- <dt><code>edges</code></dt>
- <dd>La décoration de <code>text-decoration</code> est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche. <img alt='An example of "text-decoration-skip: edges;".' src="decoration-skip-edges.png"></dd>
- <dt><code>box-decoration</code></dt>
- <dd>La propriété <code>text-decoration</code> n'est pas appliquée pour les marges, bordures et zones de remplissage (<em>padding</em>) des éléments fils.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+> **Note :** La valeur `ink` initialement définie pour cette propriété a été déplacée vers la propriété {{cssxref("text-decoration-skip-ink")}}.
+
+## Syntaxe
+
+### Valeurs
+
+- `none`
+  - : La propriété `text-decoration` s'applique à tous les éléments sélectionnés.
+- `objects`
+  - : La propriété `text-decoration` n'est pas appliquée pour les éléments en lignes atomiques telles que les images ou les blocs en lignes.
+- `spaces`
+  - : Les décorations ne sont pas appliquées où il y a des espaces (c'est-à-dire [des caractères Unicode considérés comme des blancs](https://www.unicode.org/reports/tr44/#White_Space), des séparateurs de mots et toute propriété {{cssxref("letter-spacing")}} ou {{cssxref("word-spacing")}} adjacente).
+- `leading-spaces`
+  - : Comportement analogue à `spaces` mais seuls les espaces avant les mots sont ignorés.
+- `trailing-spaces`
+  - : Comportement analogue à `spaces` mais seuls les espaces après les mots sont ignorés.
+- `edges`
+  - : La décoration de `text-decoration` est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche. ![An example of "text-decoration-skip: edges;".](decoration-skip-edges.png)
+- `box-decoration`
+  - : La propriété `text-decoration` n'est pas appliquée pour les marges, bordures et zones de remplissage (_padding_) des éléments fils.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 0;
   font-size: 3em;
   text-decoration: underline;
   text-decoration-skip: edge;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Bonjour tout le monde, quelle journée !&lt;/p&gt;</pre>
+```html
+<p>Bonjour tout le monde, quelle journée !</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", "100%", 60)}}</p>
+{{EmbedLiveSample("Exemples", "100%", 60)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}</td>
-   <td>{{Spec2("CSS4 Text Decoration")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | État                                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}} | {{Spec2("CSS4 Text Decoration")}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-decoration-skip")}}</p>
+{{Compat("css.properties.text-decoration-skip")}}
diff --git a/files/fr/web/css/text-decoration-style/index.md b/files/fr/web/css/text-decoration-style/index.md
index 5b355fadf1..44427b2812 100644
--- a/files/fr/web/css/text-decoration-style/index.md
+++ b/files/fr/web/css/text-decoration-style/index.md
@@ -7,23 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/text-decoration-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-decoration-style</code></strong> définit le style appliqué sur les lignes visées par {{cssxref("text-decoration-line")}}. Le style s'applique à toutes les lignes définies avec <code>text-decoration-line</code>.</p>
+La propriété **`text-decoration-style`** définit le style appliqué sur les lignes visées par {{cssxref("text-decoration-line")}}. Le style s'applique à toutes les lignes définies avec `text-decoration-line`.
 
-<div class="note">
-<p><strong>Note :</strong> Il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres.</p>
-</div>
+> **Note :** Il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres.
 
-<div>{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}
 
-<p>Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple {{HTMLElement("del")}} ou {{HTMLElement("s")}}). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.</p>
+Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple {{HTMLElement("del")}} ou {{HTMLElement("s")}}). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.
 
-<p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p>
+La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec des mots-clés */
+```css
+/* Valeurs avec des mots-clés */
 text-decoration-style: solid;
 text-decoration-style: double;
 text-decoration-style: dotted;
@@ -34,32 +33,31 @@ text-decoration-style: wavy;
 text-decoration-style: inherit;
 text-decoration-style: initial;
 text-decoration-style: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>solid</code></dt>
- <dd>Dessine une ligne.</dd>
- <dt><code>double</code></dt>
- <dd>Dessine une double-ligne.</dd>
- <dt><code>dotted</code></dt>
- <dd>Dessiner une ligne avec des points.</dd>
- <dt><code>dashed</code></dt>
- <dd>Dessine une ligne avec des tirets.</dd>
- <dt><code>wavy</code></dt>
- <dd>Dessine une ligne ondulée.</dd>
-</dl>
+- `solid`
+  - : Dessine une ligne.
+- `double`
+  - : Dessine une double-ligne.
+- `dotted`
+  - : Dessiner une ligne avec des points.
+- `dashed`
+  - : Dessine une ligne avec des tirets.
+- `wavy`
+  - : Dessine une ligne ondulée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.exemple {
+```css
+.exemple {
   -moz-text-decoration-line: underline;
   -moz-text-decoration-style: wavy;
   -moz-text-decoration-color: red;
@@ -70,44 +68,30 @@ text-decoration-style: unset;
   text-decoration-style: wavy;
   text-decoration-color: red;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="exemple"&gt;Et voilà le résultat.&lt;/p&gt;
-</pre>
+```html
+<p class="exemple">Et voilà le résultat.</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | État                                         | Commentaires                                                                                                                |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-decoration-style")}}</p>
+{{Compat("css.properties.text-decoration-style")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer <code>text-decoration-style</code>.</li>
-</ul>
+- La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer `text-decoration-style`.
diff --git a/files/fr/web/css/text-decoration-thickness/index.md b/files/fr/web/css/text-decoration-thickness/index.md
index 2053caab1f..a4ec80f48e 100644
--- a/files/fr/web/css/text-decoration-thickness/index.md
+++ b/files/fr/web/css/text-decoration-thickness/index.md
@@ -7,13 +7,14 @@ tags:
   - Reference
 translation_of: Web/CSS/text-decoration-thickness
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>text-decoration-thickness</code></strong> définit l'épaisseur ou la largeur de la ligne de décoration utilisée sur le texte d'un élément (la ligne qui raye, souligne ou surligne le texte).</p>
+La propriété CSS **`text-decoration-thickness`** définit l'épaisseur ou la largeur de la ligne de décoration utilisée sur le texte d'un élément (la ligne qui raye, souligne ou surligne le texte).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Un seul mot-clé*/
+```css
+/* Un seul mot-clé*/
 text-decoration-thickness: auto;
 text-decoration-thickness: from-font;
 
@@ -25,34 +26,35 @@ text-decoration-thickness: 3px;
 text-decoration-thickness: inherit;
 text-decoration-thickness: initial;
 text-decoration-thickness: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Le navigateur choisit l'épaisseur pour la ligne de décoration.</dd>
- <dt><code>from-font</code></dt>
- <dd>Si le fichier de la police indique une épaisseur préférée, c'est cette valeur qui est utilisée. Si le fichier ne contient pas cette information, cette valeur est synonyme de <code>auto</code>.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Specifies the thickness of text decoration line as a {{cssxref('length')}}, overriding the font file suggestion or the browser default.</dd>
-</dl>
+- `auto`
+  - : Le navigateur choisit l'épaisseur pour la ligne de décoration.
+- `from-font`
+  - : Si le fichier de la police indique une épaisseur préférée, c'est cette valeur qui est utilisée. Si le fichier ne contient pas cette information, cette valeur est synonyme de `auto`.
+- `<length>`
+  - : Specifies the thickness of text decoration line as a {{cssxref('length')}}, overriding the font file suggestion or the browser default.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="longhand"&gt;Voici du texte avec un soulignement rouge de 2px.&lt;/p&gt;
-&lt;p class="under-and-over"&gt;Celui est souligné et surligné.&lt;/p&gt;
-&lt;p class="shorthand"&gt;Ce texte sera souligné avec une ligne bleue de 1px si la formulation raccourcie est prise en charge.&lt;/p&gt;</pre>
+```html
+<p class="longhand">Voici du texte avec un soulignement rouge de 2px.</p>
+<p class="under-and-over">Celui est souligné et surligné.</p>
+<p class="shorthand">Ce texte sera souligné avec une ligne bleue de 1px si la formulation raccourcie est prise en charge.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.longhand {
+```css
+.longhand {
   text-decoration-line: underline;
   text-decoration-style: solid;
   text-decoration-color: red;
@@ -68,42 +70,26 @@ text-decoration-thickness: unset;
 
 .shorthand {
   text-decoration: underline solid blue 1px;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '', '', '')}}</p>
+{{EmbedLiveSample('Exemples', '', '', '')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Text Decoration', '#text-decoration-width-property', 'text-decoration-width')}}</td>
-   <td>{{Spec2('CSS4 Text Decoration')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Text Decoration', '#text-decoration-width-property', 'text-decoration-width')}} | {{Spec2('CSS4 Text Decoration')}} | Définition initiale. |
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété était initialement intitulée <code>text-decoration-width</code> mais fut renommée en 2019 en <code>text-decoration-thickness</code>.</p>
-</div>
+> **Note :** Cette propriété était initialement intitulée `text-decoration-width` mais fut renommée en 2019 en `text-decoration-thickness`.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-decoration-thickness")}}</p>
+{{Compat("css.properties.text-decoration-thickness")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("text-decoration")}}</li>
- <li>{{cssxref("text-underline-offset")}}</li>
-</ul>
+- {{cssxref("text-decoration")}}
+- {{cssxref("text-underline-offset")}}
diff --git a/files/fr/web/css/text-decoration/index.md b/files/fr/web/css/text-decoration/index.md
index 0cee3a8764..b8fc9e345b 100644
--- a/files/fr/web/css/text-decoration/index.md
+++ b/files/fr/web/css/text-decoration/index.md
@@ -8,21 +8,18 @@ tags:
   - Reference
 translation_of: Web/CSS/text-decoration
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-decoration</code></strong> est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}.</p>
+La propriété **`text-decoration`** est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div
+{{EmbedInteractiveExample("pages/css/text-decoration.html")}}Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML `<p>Ce texte a <em> des mots mis en avant</em> dedans.</p>`, et cette règle CSS `p { text-decoration: underline; }`, on aura tout le  paragraphe souligné, même si on applique la règle `em { text-decoration: none; }`, cela n'aurait aucun impact. En revanche, ajouter la règle `em { text-decoration: overline; }` entraînerait un cumul des décorations pour « des mots mis en avant ».
 
-<p>Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML <code>&lt;p&gt;Ce texte a &lt;em&gt; des mots mis en avant&lt;/em&gt; dedans.&lt;/p&gt;</code>, et cette règle CSS <code>p { text-decoration: underline; }</code>, on aura tout le  paragraphe souligné, même si on applique la règle <code>em { text-decoration: none; }</code>, cela n'aurait aucun impact. En revanche, ajouter la règle <code>em { text-decoration: overline; }</code> entraînerait un cumul des décorations pour « des mots mis en avant ».</p>
+> **Note :** La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.
 
-<div class="note">
-<p><strong>Note :</strong> La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.</p>
-</div>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: css no-line-numbers">/* Valeurs avec mots-clés */
+```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 */
@@ -32,28 +29,27 @@ text-decoration: underline wavy red;   /* On souligne en rouge avec */
 text-decoration: inherit;
 text-decoration: initial;
 text-decoration: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("text-decoration-line")}}</dt>
- <dd>Cette valeur indique le type de décoration utilisée.</dd>
- <dt>{{cssxref("text-decoration-color")}}</dt>
- <dd>Cette valeur indique la couleur de la décoration utilisée.</dd>
- <dt>{{cssxref("text-decoration-style")}}</dt>
- <dd>Cette valeur indique le style à utiliser pour la décoration.</dd>
-</dl>
+- {{cssxref("text-decoration-line")}}
+  - : Cette valeur indique le type de décoration utilisée.
+- {{cssxref("text-decoration-color")}}
+  - : Cette valeur indique la couleur de la décoration utilisée.
+- {{cssxref("text-decoration-style")}}
+  - : Cette valeur indique le style à utiliser pour la décoration.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.under {
+```css
+.under {
   text-decoration: underline red;
 }
 
@@ -76,69 +72,45 @@ text-decoration: unset;
 .blink {
   text-decoration: blink;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="under"&gt;Ce texte a une ligne en dessous.&lt;/p&gt;
-&lt;p class="over"&gt;Ce texte a une ligne au dessus.&lt;/p&gt;
-&lt;p class="line"&gt;Ce texte est barré d'une ligne.&lt;/p&gt;
-&lt;p&gt;Ce &lt;a class="plain" href="#"&gt;lien ne sera pas souligné&lt;/a&gt;,
+```html
+<p class="under">Ce texte a une ligne en dessous.</p>
+<p class="over">Ce texte a une ligne au dessus.</p>
+<p class="line">Ce texte est barré d'une ligne.</p>
+<p>Ce <a class="plain" href="#">lien ne sera pas souligné</a>,
     comme les liens le sont normalement. Attention à ces décorations
     sur les ancres cars le soulignement sert souvent d'indication pour
-    un hyperlien.&lt;/p&gt;
-&lt;p class="underover"&gt;Ce texte a des lignes en dessous et au dessus.&lt;/p&gt;
-&lt;p class="blink"&gt;Ce texte peut clignoter selon le navigateur utilisé.&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples','auto','280')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>Transformée comme une propriété raccourcie. Ajout du support pour la valeur de {{cssxref('text-decoration-style')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Pas de changement significatif.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-decoration")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'attribut {{cssxref("list-style")}} qui contrôle la façon dont les éléments apparaissent dans les listes HTML {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</li>
- <li>Les propriétés détaillées associées à cette propriété raccourcie :
-  <ul>
-   <li>{{cssxref("text-decoration-line")}}</li>
-   <li>{{cssxref("text-decoration-color")}}</li>
-   <li>{{cssxref("text-decoration-style")}}.</li>
-  </ul>
- </li>
-</ul>
+    un hyperlien.</p>
+<p class="underover">Ce texte a des lignes en dessous et au dessus.</p>
+<p class="blink">Ce texte peut clignoter selon le navigateur utilisé.</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples','auto','280')}}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                         | Commentaires                                                                                                                     |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}} | {{Spec2('CSS3 Text Decoration')}} | Transformée comme une propriété raccourcie. Ajout du support pour la valeur de {{cssxref('text-decoration-style')}}. |
+| {{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}             | {{Spec2('CSS2.1')}}                     | Pas de changement significatif.                                                                                                  |
+| {{SpecName('CSS1', '#text-decoration', 'text-decoration')}}                                 | {{Spec2('CSS1')}}                     | Définition initiale.                                                                                                             |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-decoration")}}
+
+## Voir aussi
+
+- L'attribut {{cssxref("list-style")}} qui contrôle la façon dont les éléments apparaissent dans les listes HTML {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.
+- Les propriétés détaillées associées à cette propriété raccourcie :
+
+  - {{cssxref("text-decoration-line")}}
+  - {{cssxref("text-decoration-color")}}
+  - {{cssxref("text-decoration-style")}}.
diff --git a/files/fr/web/css/text-emphasis-color/index.md b/files/fr/web/css/text-emphasis-color/index.md
index ac983e3d49..5af8a94850 100644
--- a/files/fr/web/css/text-emphasis-color/index.md
+++ b/files/fr/web/css/text-emphasis-color/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/text-emphasis-color
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-emphasis-color</code></strong> définit la couleur utilisée pour dessiner les marques d'emphase. Celle-ci peut être (re)définie grâce à la propriété raccourcie {{cssxref("text-emphasis")}}.</p>
+La propriété **`text-emphasis-color`** définit la couleur utilisée pour dessiner les marques d'emphase. Celle-ci peut être (re)définie grâce à la propriété raccourcie {{cssxref("text-emphasis")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeur initiale */
+```css
+/* Valeur initiale */
 text-emphasis-color: currentColor;
 
 /* Valeur de couleur */
-/* Type &lt;color&gt; */
+/* Type <color> */
 text-emphasis-color: #555;
 text-emphasis-color: blue;
 text-emphasis-color: rgba(90, 200, 160, 0.8);
@@ -25,70 +26,57 @@ text-emphasis-color: transparent;
 text-emphasis-color: inherit;
 text-emphasis-color: initial;
 text-emphasis-color: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Définit la couleur utilisée pour les marques. Si on ne définit pas de couleur, ce sera la couleur courante du texte qui sera utilisée.</dd>
-</dl>
+- `<color>`
+  - : Définit la couleur utilisée pour les marques. Si on ne définit pas de couleur, ce sera la couleur courante du texte qui sera utilisée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+```html
+<p><em>Coucou</em>, je suis <em>là</em></p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">em {
+```css
+em {
   text-emphasis-style: sesame;
   text-emphasis-color: blue;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-emphasis-color")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref('text-emphasis-style')}}</li>
- <li>{{cssxref('text-emphasis')}}.</li>
- <li>{{cssxref('text-emphasis-position')}}</li>
- <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
- <li>D'autres propriétés relatives aux couleurs {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-emphasis-color")}}
+
+## Voir aussi
+
+- {{cssxref('text-emphasis-style')}}
+- {{cssxref('text-emphasis')}}.
+- {{cssxref('text-emphasis-position')}}
+- Le type de données {{cssxref("&lt;color&gt;")}}
+- D'autres propriétés relatives aux couleurs {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}
+- [Appliquer des couleurs sur des éléments HTML](/fr/docs/Web/HTML/Applying_color)
diff --git a/files/fr/web/css/text-emphasis-position/index.md b/files/fr/web/css/text-emphasis-position/index.md
index f818083fef..723c88c987 100644
--- a/files/fr/web/css/text-emphasis-position/index.md
+++ b/files/fr/web/css/text-emphasis-position/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/text-emphasis-position
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-emphasis-position</code></strong> permet de décrire l'emplacement des marques d'emphase quand elles sont utilisées. L'ajout des marques a le même effet que <a href="/fr/docs/Web/HTML/Element/ruby">les annotations ruby</a> quant à la hauteur de ligne : s'il n'y a pas suffisamment de place, la hauteur de la ligne est augmentée.</p>
+La propriété **`text-emphasis-position`** permet de décrire l'emplacement des marques d'emphase quand elles sont utilisées. L'ajout des marques a le même effet que [les annotations ruby](/fr/docs/Web/HTML/Element/ruby) quant à la hauteur de ligne : s'il n'y a pas suffisamment de place, la hauteur de la ligne est augmentée.
 
-<pre class="brush:css">/* Valeur initiale */
+```css
+/* Valeur initiale */
 text-emphasis-position: over right;
 
 /* Valeurs avec mot-clé */
@@ -28,137 +29,145 @@ text-emphasis-position: left under;
 text-emphasis-position: inherit;
 text-emphasis-position: initial;
 text-emphasis-position: unset;
-</pre>
+```
 
-<h2 id="Position_privilégiée">Position privilégiée</h2>
+## Position privilégiée
 
-<p>La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais  :</p>
+La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais  :
 
 <table>
- <caption>Position privilégiée pour les marques d'emphase en ruby</caption>
- <thead>
-  <tr>
-   <th rowspan="2" scope="col">Langue</th>
-   <th colspan="2" scope="col">Position</th>
-   <th colspan="2" rowspan="2" scope="col">Illustration</th>
-  </tr>
-  <tr>
-   <th>Horizontale</th>
-   <th>Verticale</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Japanese</td>
-   <td rowspan="2">au dessus</td>
-   <td rowspan="2">à droite</td>
-   <td rowspan="2"><img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." src="text-emphasis-ja.png" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"></td>
-   <td rowspan="3"><img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." src="text-emphasis-v.gif" title="Emphasis applied on the right of a fragment of Japanese text"></td>
-  </tr>
-  <tr>
-   <td>Mongolian</td>
-  </tr>
-  <tr>
-   <td>Chinese</td>
-   <td>en dessous</td>
-   <td>à droite</td>
-   <td><img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." src="text-emphasis-zh.gif" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"></td>
-  </tr>
- </tbody>
+  <caption>
+    Position privilégiée pour les marques d'emphase en ruby
+  </caption>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col">Langue</th>
+      <th colspan="2" scope="col">Position</th>
+      <th colspan="2" rowspan="2" scope="col">Illustration</th>
+    </tr>
+    <tr>
+      <th>Horizontale</th>
+      <th>Verticale</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Japanese</td>
+      <td rowspan="2">au dessus</td>
+      <td rowspan="2">à droite</td>
+      <td rowspan="2">
+        <img
+          alt="Emphasis marks appear over each emphasized character in horizontal Japanese text."
+          src="text-emphasis-ja.png"
+          title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"
+        />
+      </td>
+      <td rowspan="3">
+        <img
+          alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text."
+          src="text-emphasis-v.gif"
+          title="Emphasis applied on the right of a fragment of Japanese text"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>Mongolian</td>
+    </tr>
+    <tr>
+      <td>Chinese</td>
+      <td>en dessous</td>
+      <td>à droite</td>
+      <td>
+        <img
+          alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text."
+          src="text-emphasis-zh.gif"
+          title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"
+        />
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>text-emphasis-position</code> ne peut pas être définie (et donc ne peut pas être redéfinie) avec la propriété raccourcie {{cssxref("text-emphasis")}}.</p>
-</div>
+> **Note :** La propriété `text-emphasis-position` ne peut pas être définie (et donc ne peut pas être redéfinie) avec la propriété raccourcie {{cssxref("text-emphasis")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code><dfn>over</dfn></code></dt>
- <dd>Les marques sont dessinées au-dessus du texte lorsqu'il est écrit en mode horizontal.</dd>
- <dt><code><dfn>under</dfn></code></dt>
- <dd>Les marques sont dessinées en-dessous du texte lorsqu'il est écrit en mode horizontal.</dd>
- <dt><code><dfn>right</dfn></code></dt>
- <dd>Les marques sont dessinées à droite du texte lorsqu'il est écrit en mode vertical.</dd>
- <dt><code><dfn>left</dfn></code></dt>
- <dd>Les marques sont dessinées à gauche du texte lorsqu'il est écrit en mode vertical.</dd>
-</dl>
+- `over`
+  - : Les marques sont dessinées au-dessus du texte lorsqu'il est écrit en mode horizontal.
+- `under`
+  - : Les marques sont dessinées en-dessous du texte lorsqu'il est écrit en mode horizontal.
+- `right`
+  - : Les marques sont dessinées à droite du texte lorsqu'il est écrit en mode vertical.
+- `left`
+  - : Les marques sont dessinées à gauche du texte lorsqu'il est écrit en mode vertical.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Masquer_les_marques">Masquer les marques</h3>
+### Masquer les marques
 
-<p>Certains éditeurs préfèrent masquer les marques d'emphase lorsque celles-ci entre en conflit avec les annotations ruby. On peut utiliser la règle suivante :</p>
+Certains éditeurs préfèrent masquer les marques d'emphase lorsque celles-ci entre en conflit avec les annotations ruby. On peut utiliser la règle suivante :
 
-<pre class="brush: css">ruby {
+```css
+ruby {
   text-emphasis: none;
 }
-</pre>
+```
 
-<p>D'autres préfèrent masquer le contenu ruby et privilégier les marques d'emphase. On peut obtenir cet effet avec les déclarations suivantes :</p>
+D'autres préfèrent masquer le contenu ruby et privilégier les marques d'emphase. On peut obtenir cet effet avec les déclarations suivantes :
 
-<pre class="brush: css">em {
- /* On utilise text-emphasis pour les &lt;em&gt; */
+```css
+em {
+ /* On utilise text-emphasis pour les <em> */
   text-emphasis: dot;
 }
 
 em rt {
- /* On masque le ruby dans les éléments &lt;em&gt; */
+ /* On masque le ruby dans les éléments <em> */
   display: none;
-}</pre>
+}
+```
 
-<h3 id="Exemple_live">Exemple <em>live</em></h3>
+### Exemple _live_
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+```html
+<p><em>Coucou</em>, je suis <em>là</em></p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">em {
+```css
+em {
   text-emphasis-style: sesame;
   text-emphasis-position: under right;
-}</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Exemple_live","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Exemple_live","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                                       | Commentaires        |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------- |
+| {{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-emphasis-position")}}</p>
+{{Compat("css.properties.text-emphasis-position")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("text-emphasis-style")}}</li>
- <li>{{cssxref("text-emphasis-color")}}</li>
- <li>{{cssxref("text-emphasis")}}</li>
-</ul>
+- {{cssxref("text-emphasis-style")}}
+- {{cssxref("text-emphasis-color")}}
+- {{cssxref("text-emphasis")}}
diff --git a/files/fr/web/css/text-emphasis-style/index.md b/files/fr/web/css/text-emphasis-style/index.md
index 3157731726..556e8e3dd6 100644
--- a/files/fr/web/css/text-emphasis-style/index.md
+++ b/files/fr/web/css/text-emphasis-style/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/text-emphasis-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-emphasis-style</code></strong> définit le type d'emphase utilisée. Celui-ci peut également être (re)défini via la propriété raccourcie {{cssxref("text-emphasis")}}.</p>
+La propriété **`text-emphasis-style`** définit le type d'emphase utilisée. Celui-ci peut également être (re)défini via la propriété raccourcie {{cssxref("text-emphasis")}}.
 
-<pre class="brush:css no-line-numbers">/* Valeur initiale */
+```css
+/* Valeur initiale */
 /* Aucune marque d'emphase */
 text-emphasis-style: none;
 
@@ -31,82 +32,69 @@ text-emphasis-style: open sesame;
 text-emphasis-style: inherit;
 text-emphasis-style: initial;
 text-emphasis-style: unset;
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>Aucune marque d'emphase.</dd>
- <dt><code>filled</code></dt>
- <dd>La forme est remplie avec une couleur unie. Si <code>filled</code> ou <code>open</code> est absent, ce sera la valeur par défaut.</dd>
- <dt><code>open</code></dt>
- <dd>La forme est vide.</dd>
- <dt><code>dot</code></dt>
- <dd>Cette valeur permet d'afficher des marques en forme de points. Le point rempli est le caractère <code>'•'</code> (<code>U+2022</code>) et le point vide est le caractère <code>'◦'</code> (<code>U+25E6</code>).</dd>
- <dt><code>circle</code></dt>
- <dd>Cette valeur permet d'afficher des marques en forme de cercles (plus grands que les points). Le cercle rempli est le caractère <code>'●'</code> (<code>U+25CF</code>) et celui pour le cercle ouvert est <code>'○'</code> (<code>U+25CB</code>).</dd>
- <dt><code>double-circle</code></dt>
- <dd>Cette valeur permet d'afficher des marques en forme de doubles cercles. Le double-cercle rempli est le caractère <code>'◉'</code> (<code>U+25C9</code>), et le double-cercle ouvert est le caractère <code>'◎'</code> (<code>U+25CE</code>).</dd>
- <dt><code>triangle</code></dt>
- <dd>Cette valeur permet d'afficher des marques en forme de triangles. Le triangle rempli correspond au caractère <code>'▲'</code> (<code>U+25B2</code>) et le triangle ouvert au caractère <code>'△'</code> (<code>U+25B3</code>).</dd>
- <dt><code>sesame</code></dt>
- <dd>Cette valeur permet d'afficher des marques en forme de points sésame :<code>'﹅'</code> (<code>U+FE45</code>) pour le caractère rempli et <code>'﹆'</code> (<code>U+FE46</code>) pour le caractère ouvert.</dd>
- <dt><code>&lt;string&gt;</code></dt>
- <dd>Utilise la chaîne fournie comme marque. Attention, l'agent utilisateur peut tronquer la chaîne ou choisir d'ignorer les chaînes qui ont plus d'un graphème. Il est donc conseillé de n'utiliser qu'une seule lettre.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Syntaxe
+
+### Valeurs
+
+- `none`
+  - : Aucune marque d'emphase.
+- `filled`
+  - : La forme est remplie avec une couleur unie. Si `filled` ou `open` est absent, ce sera la valeur par défaut.
+- `open`
+  - : La forme est vide.
+- `dot`
+  - : Cette valeur permet d'afficher des marques en forme de points. Le point rempli est le caractère `'•'` (`U+2022`) et le point vide est le caractère `'◦'` (`U+25E6`).
+- `circle`
+  - : Cette valeur permet d'afficher des marques en forme de cercles (plus grands que les points). Le cercle rempli est le caractère `'●'` (`U+25CF`) et celui pour le cercle ouvert est `'○'` (`U+25CB`).
+- `double-circle`
+  - : Cette valeur permet d'afficher des marques en forme de doubles cercles. Le double-cercle rempli est le caractère `'◉'` (`U+25C9`), et le double-cercle ouvert est le caractère `'◎'` (`U+25CE`).
+- `triangle`
+  - : Cette valeur permet d'afficher des marques en forme de triangles. Le triangle rempli correspond au caractère `'▲'` (`U+25B2`) et le triangle ouvert au caractère `'△'` (`U+25B3`).
+- `sesame`
+  - : Cette valeur permet d'afficher des marques en forme de points sésame :`'﹅'` (`U+FE45`) pour le caractère rempli et `'﹆'` (`U+FE46`) pour le caractère ouvert.
+- `<string>`
+  - : Utilise la chaîne fournie comme marque. Attention, l'agent utilisateur peut tronquer la chaîne ou choisir d'ignorer les chaînes qui ont plus d'un graphème. Il est donc conseillé de n'utiliser qu'une seule lettre.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+```html
+<p><em>Coucou</em>, je suis <em>là</em></p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css"><code>em {
+```css
+em {
   text-emphasis-style: sesame;
-}</code></pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                                       | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-emphasis-style")}}</p>
+{{Compat("css.properties.text-emphasis-style")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref('text-emphasis-color')}}</li>
- <li>{{cssxref('text-emphasis')}}.</li>
- <li>{{cssxref('text-emphasis-position')}}</li>
-</ul>
+- {{cssxref('text-emphasis-color')}}
+- {{cssxref('text-emphasis')}}.
+- {{cssxref('text-emphasis-position')}}
diff --git a/files/fr/web/css/text-emphasis/index.md b/files/fr/web/css/text-emphasis/index.md
index b092b6b058..d8cf130501 100644
--- a/files/fr/web/css/text-emphasis/index.md
+++ b/files/fr/web/css/text-emphasis/index.md
@@ -7,27 +7,26 @@ tags:
   - Reference
 translation_of: Web/CSS/text-emphasis
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-emphasis</code></strong> est une propriété raccourcie qui permet de définir {{cssxref("text-emphasis-style")}} et {{cssxref("text-emphasis-color")}} avec une seule déclaration. Cette propriété appliquera les marques d'emphase définies sur chaque caractères du texte de l'élément sauf pour les séparateurs (comme les espaces) et les caractères de contrôle.</p>
+La propriété **`text-emphasis`** est une propriété raccourcie qui permet de définir {{cssxref("text-emphasis-style")}} et {{cssxref("text-emphasis-color")}} avec une seule déclaration. Cette propriété appliquera les marques d'emphase définies sur chaque caractères du texte de l'élément sauf pour les séparateurs (comme les espaces) et les caractères de contrôle.
 
-<div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}
 
-<p>La propriété <code>text-emphasis</code> est différente de {{cssxref("text-decoration")}}. La propriété <code>text-decoration</code> n'a pas d'héritage et la décoration est appliquée sur tout l'élément. Cependant, <code>text-emphasis</code> a un héritage et il est donc possible de changer la marque selon les « descendants » d'un élément.</p>
+La propriété `text-emphasis` est différente de {{cssxref("text-decoration")}}. La propriété `text-decoration` n'a pas d'héritage et la décoration est appliquée sur tout l'élément. Cependant, `text-emphasis` a un héritage et il est donc possible de changer la marque selon les « descendants » d'un élément.
 
-<p>La taille du symbole d'emphase, comme celle des symboles Ruby, représente environ 50% de la taille de la police du texte. <code>text-emphasis</code> peut modifier la hauteur de la ligne lorsque l'interlignage n'est pas suffisant pour placer les marques.</p>
+La taille du symbole d'emphase, comme celle des symboles Ruby, représente environ 50% de la taille de la police du texte. `text-emphasis` peut modifier la hauteur de la ligne lorsque l'interlignage n'est pas suffisant pour placer les marques.
 
-<div class="note">
-<p><strong>Note :</strong> <code>text-emphasis</code> ne réinitialise pas la valeur de {{cssxref("text-emphasis-position")}}. En effet, bien que la couleur et le style des marques puisse varier, il est très peu probable qu'on change leurs positions au cours du même document.</p>
-</div>
+> **Note :** `text-emphasis` ne réinitialise pas la valeur de {{cssxref("text-emphasis-position")}}. En effet, bien que la couleur et le style des marques puisse varier, il est très peu probable qu'on change leurs positions au cours du même document.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css  no-line-numbers">/* Valeur initiale */
+```css
+/* Valeur initiale */
 text-emphasis: none; /* Pas de marque */
 
 /* Chaîne de caractères */
-/* Type &lt;string&gt;        */
+/* Type <string>        */
 text-emphasis: 'x';
 text-emphasis: '点';
 text-emphasis: '\25B2';
@@ -49,82 +48,69 @@ text-emphasis: filled sesame #555;
 text-emphasis: inherit;
 text-emphasis: initial;
 text-emphasis: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>Il n'y aura pas de marques d'emphase appliquées.</dd>
- <dt><code>filled</code></dt>
- <dd>La forme de la marque est remplie avec une couleur unie. Si aucun des mots-clés parmi <code>filled</code> ou <code>open</code> n'est présent, ce sera la valeur par défaut.</dd>
- <dt><code>open</code></dt>
- <dd>La forme de la marque est évidée.</dd>
- <dt><code>dot</code></dt>
- <dd>La forme de la marque est un petit cercle. Le cercle plein est le caractère <code>'•'</code> (<code>U+2022</code>) et celui qui est évidé est <code>'◦'</code> (<code>U+25E6</code>).</dd>
- <dt><code>circle</code></dt>
- <dd>La forme de la marque est un grand cercle. Le cercle plein est le caractère <code>'●'</code> (<code>U+25CF</code>) et celui du cercle évidé est <code>'○'</code> (<code>U+25CB</code>). Lorsqu'aucune forme n'est spécifiée, c'est la forme par défaut utilisée pour les modes d'écriture horizontaux.</dd>
- <dt><code>double-circle</code></dt>
- <dd>La forme de la marque est un double-cercle. Le double-cercle plein est le caractère <code>'◉'</code> (<code>U+25C9</code>), celui du double-cercle évidé est <code>'◎'</code> (<code>U+25CE</code>).</dd>
- <dt><code>triangle</code></dt>
- <dd>La forme de la marque est un triangle. Le triangle plein correspond au caractère <code>'▲'</code> (<code>U+25B2</code>) et celui du triangle évidé correspond à <code>'△'</code> (<code>U+25B3</code>).</dd>
- <dt><code>sesame</code></dt>
- <dd>La forme de la marque est un sésame. Le sésame plein correspond au caractère <code>'﹅'</code> (<code>U+FE45</code>) et celui du sésame évidé correspond à <code>'﹆'</code> (<code>U+FE46</code>). Lorsqu'aucune forme n'a été définie, c'est la forme par défaut qui est utilisée pour les marques d'emphase pour les modes d'écriture verticaux.</dd>
- <dt><code>&lt;string&gt;</code></dt>
- <dd>La marque affichée sera la chaîne de caractères. Attention à n'utiliser que des chaînes d'un seul caractère. L'agent utilisateur peut tronquer ou ignorer les chaînes qui comportent plusieurs graphèmes.</dd>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>Définit la couleur utilisée pour la marque. Si aucune couleur n'est définie, la valeur utilisée par défaut sera <code>currentColor</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `none`
+  - : Il n'y aura pas de marques d'emphase appliquées.
+- `filled`
+  - : La forme de la marque est remplie avec une couleur unie. Si aucun des mots-clés parmi `filled` ou `open` n'est présent, ce sera la valeur par défaut.
+- `open`
+  - : La forme de la marque est évidée.
+- `dot`
+  - : La forme de la marque est un petit cercle. Le cercle plein est le caractère `'•'` (`U+2022`) et celui qui est évidé est `'◦'` (`U+25E6`).
+- `circle`
+  - : La forme de la marque est un grand cercle. Le cercle plein est le caractère `'●'` (`U+25CF`) et celui du cercle évidé est `'○'` (`U+25CB`). Lorsqu'aucune forme n'est spécifiée, c'est la forme par défaut utilisée pour les modes d'écriture horizontaux.
+- `double-circle`
+  - : La forme de la marque est un double-cercle. Le double-cercle plein est le caractère `'◉'` (`U+25C9`), celui du double-cercle évidé est `'◎'` (`U+25CE`).
+- `triangle`
+  - : La forme de la marque est un triangle. Le triangle plein correspond au caractère `'▲'` (`U+25B2`) et celui du triangle évidé correspond à `'△'` (`U+25B3`).
+- `sesame`
+  - : La forme de la marque est un sésame. Le sésame plein correspond au caractère `'﹅'` (`U+FE45`) et celui du sésame évidé correspond à `'﹆'` (`U+FE46`). Lorsqu'aucune forme n'a été définie, c'est la forme par défaut qui est utilisée pour les marques d'emphase pour les modes d'écriture verticaux.
+- `<string>`
+  - : La marque affichée sera la chaîne de caractères. Attention à n'utiliser que des chaînes d'un seul caractère. L'agent utilisateur peut tronquer ou ignorer les chaînes qui comportent plusieurs graphèmes.
+- `<color>`
+  - : Définit la couleur utilisée pour la marque. Si aucune couleur n'est définie, la valeur utilisée par défaut sera `currentColor`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+```html
+<p><em>Coucou</em>, je suis <em>là</em></p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">em {
+```css
+em {
   text-emphasis: sesame blue;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-emphasis")}}</p>
+{{Compat("css.properties.text-emphasis")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref('text-emphasis-style')}}</li>
- <li>{{cssxref('text-emphasis-color')}}</li>
- <li>{{cssxref('text-emphasis-position')}}</li>
-</ul>
+- {{cssxref('text-emphasis-style')}}
+- {{cssxref('text-emphasis-color')}}
+- {{cssxref('text-emphasis-position')}}
diff --git a/files/fr/web/css/text-indent/index.md b/files/fr/web/css/text-indent/index.md
index e2db574dea..b2fe9de526 100644
--- a/files/fr/web/css/text-indent/index.md
+++ b/files/fr/web/css/text-indent/index.md
@@ -7,25 +7,26 @@ tags:
   - Reference
 translation_of: Web/CSS/text-indent
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-indent</code></strong> définit la longueur qui doit être laissée avant le début de la première ligne d'un élément contenant du texte.</p>
+La propriété **`text-indent`** définit la longueur qui doit être laissée avant le début de la première ligne d'un élément contenant du texte.
 
-<p>L'espacement horizontal se fait en accord avec la bord gauche (ou droit pour les dispositions de droite à gauche) de l'élément contenant le texte. Par défaut, cela ne contrôle que l'indentation de la première ligne du bloc mais les mots-clés <code>hanging</code> et <code>each-line</code> peuvent être utilisés pour modifier ce comportement.</p>
+L'espacement horizontal se fait en accord avec la bord gauche (ou droit pour les dispositions de droite à gauche) de l'élément contenant le texte. Par défaut, cela ne contrôle que l'indentation de la première ligne du bloc mais les mots-clés `hanging` et `each-line` peuvent être utilisés pour modifier ce comportement.
 
-<div>{{EmbedInteractiveExample("pages/css/text-indent.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-indent.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs de longueur */
-/* Type &lt;length&gt;       */
+```css
+/* Valeurs de longueur */
+/* Type <length>       */
 text-indent: 3mm;
 text-indent: 40px;
 
 /* Valeurs de pourcentages */
 /* relatives à la largeur  */
 /* du bloc englobant       */
-/* Type &lt;percentage&gt;       */
+/* Type <percentage>       */
 text-indent: 15%;
 
 /* Valeurs avec un mot-clé */
@@ -37,104 +38,84 @@ text-indent: 5em hanging each-line;
 text-indent: inherit;
 text-indent: initial;
 text-indent: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>L'indentation est définie de façon absolue avec une longueur ({{cssxref("&lt;length&gt;")}}). On peut utiliser des valeurs négatives. Voir la page sur {{cssxref("&lt;length&gt;")}} pour les différentes unités possibles.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>L'indentation est définie en proportion de la largeur du bloc englobant (type {{cssxref("&lt;percentage&gt;")}}).</dd>
- <dt><code>each-line</code> {{experimental_inline}}</dt>
- <dd>L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (<em>wrap</em>).</dd>
- <dt><code>hanging</code> {{experimental_inline}}</dt>
- <dd>Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.</dd>
-</dl>
+- `<length>`
+  - : L'indentation est définie de façon absolue avec une longueur ({{cssxref("&lt;length&gt;")}}). On peut utiliser des valeurs négatives. Voir la page sur {{cssxref("&lt;length&gt;")}} pour les différentes unités possibles.
+- `<percentage>`
+  - : L'indentation est définie en proportion de la largeur du bloc englobant (type {{cssxref("&lt;percentage&gt;")}}).
+- `each-line` {{experimental_inline}}
+  - : L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (_wrap_).
+- `hanging` {{experimental_inline}}
+  - : Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Indentation_simple">Indentation simple</h3>
+### Indentation simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
-</pre>
+```html
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   text-indent: 5em;
   background: powderblue;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Indentation_simple','100%','100%') }}</p>
+{{EmbedLiveSample('Indentation_simple','100%','100%') }}
 
-<h3 id="Indentation_proportionnelle">Indentation proportionnelle</h3>
+### Indentation proportionnelle
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt; </pre>
+```html
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   text-indent: 30%;
   background: plum;
-}</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('Indentation_proportionnelle','100%','100%')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Ajout des mots-clés <code>hanging</code> et <code>each-line</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>text-indent</code> peut être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>The behavior with <code>display: inline-block</code> and anonymous block boxes have been explicitly defined.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-indent")}}</p>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Indentation_proportionnelle','100%','100%')}}
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                                                                      |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}} | {{Spec2('CSS3 Text')}}             | Ajout des mots-clés `hanging` et `each-line`.                                                     |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}} | {{Spec2('CSS3 Transitions')}} | `text-indent` peut être animée.                                                                   |
+| {{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}} | {{Spec2('CSS2.1')}}                 | The behavior with `display: inline-block` and anonymous block boxes have been explicitly defined. |
+| {{SpecName('CSS1', '#text-indent', 'text-indent')}}                     | {{Spec2('CSS1')}}                 | Définition initiale.                                                                              |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-indent")}}
diff --git a/files/fr/web/css/text-justify/index.md b/files/fr/web/css/text-justify/index.md
index c60d7fae99..7cb0bb2de3 100644
--- a/files/fr/web/css/text-justify/index.md
+++ b/files/fr/web/css/text-justify/index.md
@@ -7,51 +7,51 @@ tags:
   - Reference
 translation_of: Web/CSS/text-justify
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>la propriété CSS <strong><code>text-justify</code></strong> définit le type de justification à appliquer au texte justifié (par exemple avec {{cssxref("text-align")}}<code>: justify;</code>).</p>
+la propriété CSS **`text-justify`** définit le type de justification à appliquer au texte justifié (par exemple avec {{cssxref("text-align")}}`: justify;`).
 
-<pre class="brush: css no-line-numbers">text-justify: none;
+```css
+text-justify: none;
 text-justify: auto;
 text-justify: inter-word;
 text-justify: inter-character;
 text-justify: distribute;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>text-justify</code> peut être définie grâce à l'un des mots-clés suivants.</p>
+La propriété `text-justify` peut être définie grâce à l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Le texte ne sera pas justifié— cela aura le même effet que de ne pas définir {{cssxref("text-align")}}, mais cela peut se révéler utile pour activer ou désactiver globalement la justification.</dd>
- <dt><code>auto</code></dt>
- <dd>
- <p>Le navigateur choisira la meilleure justification pour la situation, en se basant sur le rapport entre performance et qualité, mais également sur la valeur la plus appropriée par rapport à la langue (français, langues CJK, etc.). C'est la propriété par défaut, qui est appliquée lorsque <code>text-justify</code> n'est pas définie.</p>
- </dd>
- <dt><code>inter-word</code></dt>
- <dd>Le texte est justifié en ajustant les espaces entre les mots (en faisant varier {{cssxref("word-spacing")}}) ; cette propriété est appropriée pour les langues qui séparent les mots avec des espaces, comme le Français ou le Coréen.</dd>
- <dt><code>inter-character</code></dt>
- <dd>Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ;  cette propritété est plus appropriée pour des langues comme le Japonais.</dd>
- <dt><code>distribute</code> {{deprecated_inline}}</dt>
- <dd>Même effet que <code>inter-character</code> ; cette valeur sert uniquement à de fins de compatibilité.</dd>
-</dl>
+- `none`
+  - : Le texte ne sera pas justifié— cela aura le même effet que de ne pas définir {{cssxref("text-align")}}, mais cela peut se révéler utile pour activer ou désactiver globalement la justification.
+- `auto`
+  - : Le navigateur choisira la meilleure justification pour la situation, en se basant sur le rapport entre performance et qualité, mais également sur la valeur la plus appropriée par rapport à la langue (français, langues CJK, etc.). C'est la propriété par défaut, qui est appliquée lorsque `text-justify` n'est pas définie.
+- `inter-word`
+  - : Le texte est justifié en ajustant les espaces entre les mots (en faisant varier {{cssxref("word-spacing")}}) ; cette propriété est appropriée pour les langues qui séparent les mots avec des espaces, comme le Français ou le Coréen.
+- `inter-character`
+  - : Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ;  cette propritété est plus appropriée pour des langues comme le Japonais.
+- `distribute` {{deprecated_inline}}
+  - : Même effet que `inter-character` ; cette valeur sert uniquement à de fins de compatibilité.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;p class="none"&gt;&lt;code&gt;text-justify: none&lt;/code&gt; — 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.&lt;/p&gt;
-&lt;p class="auto"&gt;&lt;code&gt;text-justify: auto&lt;/code&gt; — 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.&lt;/p&gt;
-&lt;p class="dist"&gt;&lt;code&gt;text-justify: distribute&lt;/code&gt; — 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.&lt;/p&gt;
-&lt;p class="word"&gt;&lt;code&gt;text-justify: inter-word&lt;/code&gt; — 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.&lt;/p&gt;
-&lt;p class="char"&gt;&lt;code&gt;text-justify: inter-character&lt;/code&gt; — 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.&lt;/p&gt;</pre>
+```html
+<p class="none"><code>text-justify: none</code> — 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.</p>
+<p class="auto"><code>text-justify: auto</code> — 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.</p>
+<p class="dist"><code>text-justify: distribute</code> — 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.</p>
+<p class="word"><code>text-justify: inter-word</code> — 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.</p>
+<p class="char"><code>text-justify: inter-character</code> — 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.</p>
+```
 
-<pre class="brush: css">p {
+```css
+p {
   font-size: 1.5em;
   border: 1px solid black;
   padding: 10px;
@@ -78,37 +78,23 @@ text-justify: distribute;
 
 .char {
   text-justify: inter-character;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Exemples","100%",400)}}</p>
+{{EmbedLiveSample("Exemples","100%",400)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}} | {{Spec2('CSS3 Text')}} |              |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+## Compatibilité avec les navigateurs
 
-<div>{{Compat("css.properties.text-justify")}}</div>
+{{Compat("css.properties.text-justify")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("text-align")}}</li>
-</ul>
+- {{cssxref("text-align")}}
diff --git a/files/fr/web/css/text-orientation/index.md b/files/fr/web/css/text-orientation/index.md
index 21d80a577d..b577d24e97 100644
--- a/files/fr/web/css/text-orientation/index.md
+++ b/files/fr/web/css/text-orientation/index.md
@@ -8,15 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/text-orientation
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-orientation</code></strong> définit l'orientation du texte sur une ligne. Cette propriété n'a d'effet qu'en mode vertical (autrement dit, quand {{cssxref("writing-mode")}} n'est pas <code>horizontal-tb</code>). Elle est utile pour contrôler l'affichage de l'écriture pour les langues dont le script est vertical. Elle permet aussi de gérer les en-têtes de tableaux verticaux.</p>
+La propriété **`text-orientation`** définit l'orientation du texte sur une ligne. Cette propriété n'a d'effet qu'en mode vertical (autrement dit, quand {{cssxref("writing-mode")}} n'est pas `horizontal-tb`). Elle est utile pour contrôler l'affichage de l'écriture pour les langues dont le script est vertical. Elle permet aussi de gérer les en-têtes de tableaux verticaux.
 
-<div>{{EmbedInteractiveExample("pages/css/text-orientation.html")}}</div
+{{EmbedInteractiveExample("pages/css/text-orientation.html")}}Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 text-orientation: mixed;
 text-orientation: upright;
 text-orientation: sideways-right;
@@ -28,76 +27,62 @@ text-orientation: use-glyph-orientation;
 text-orientation: inherit;
 text-orientation: initial;
 text-orientation: unset;
-</pre>
+```
 
-<p>La propriété <code>text-orientation</code> peut valoir l'un des mots-clés suivants.</p>
+La propriété `text-orientation` peut valoir l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>mixed</code></dt>
- <dd>Ce mot-clé permet de tourner les caractères de 90° dans le sens des aiguilles d'une montre pour les scripts horizontaux, les glyphes des scripts verticaux sont affichés normalement. C'est la valeur par défaut.</dd>
- <dt><code>upright</code></dt>
- <dd>Ce mot-clé permet d'afficher les caractères des scripts horizontaux normalement et d'afficher les glyphes des scripts verticaux « debout ». Ce mot-clé implique que tous les caractères soient considérés comme <em>ltr</em> (<em>left-to-right</em> ou gauche à droite). La valeur utilisée pour {{cssxref("direction")}} sera <code>ltr</code>, quelle que soit celle définie par l'utilisateur.</dd>
- <dt><code>sideways</code></dt>
- <dd>Ce mot-clé permet d'afficher les caractères comme s'ils étaient disposés horizontalement et que la ligne de base était tournée de 90° dans le sens des aiguilles d'une montre.</dd>
- <dt><code>sideways-right</code></dt>
- <dd>Un alias pour <code>sideways</code> conservé pour des raisons de compatibilité.</dd>
- <dt><code>use-glyph-orientation</code></dt>
- <dd>Pour les éléments SVG, ce mot-clé permet d'utiliser la valeur des propriétés SVG dépréciées <code>glyph-orientation-vertical</code> et <code>glyph-orientation-horizontal</code>.</dd>
-</dl>
+- `mixed`
+  - : Ce mot-clé permet de tourner les caractères de 90° dans le sens des aiguilles d'une montre pour les scripts horizontaux, les glyphes des scripts verticaux sont affichés normalement. C'est la valeur par défaut.
+- `upright`
+  - : Ce mot-clé permet d'afficher les caractères des scripts horizontaux normalement et d'afficher les glyphes des scripts verticaux « debout ». Ce mot-clé implique que tous les caractères soient considérés comme _ltr_ (_left-to-right_ ou gauche à droite). La valeur utilisée pour {{cssxref("direction")}} sera `ltr`, quelle que soit celle définie par l'utilisateur.
+- `sideways`
+  - : Ce mot-clé permet d'afficher les caractères comme s'ils étaient disposés horizontalement et que la ligne de base était tournée de 90° dans le sens des aiguilles d'une montre.
+- `sideways-right`
+  - : Un alias pour `sideways` conservé pour des raisons de compatibilité.
+- `use-glyph-orientation`
+  - : Pour les éléments SVG, ce mot-clé permet d'utiliser la valeur des propriétés SVG dépréciées `glyph-orientation-vertical` et `glyph-orientation-horizontal`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="monTexte"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;</pre>
+```html
+<p class="monTexte">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.monTexte {
+```css
+.monTexte {
   writing-mode: vertical-rl;
   text-orientation: sideways;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%",200)}}</p>
+{{EmbedLiveSample("Exemples","100%",200)}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}</td>
-   <td>{{Spec2('CSS3 Writing Modes')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                                   | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}} | {{Spec2('CSS3 Writing Modes')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-orientation")}}</p>
+{{Compat("css.properties.text-orientation")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("writing-mode")}}</li>
- <li>{{cssxref("text-combine-upright")}}</li>
- <li>{{cssxref("unicode-bidi")}}</li>
-</ul>
+- {{cssxref("writing-mode")}}
+- {{cssxref("text-combine-upright")}}
+- {{cssxref("unicode-bidi")}}
diff --git a/files/fr/web/css/text-overflow/index.md b/files/fr/web/css/text-overflow/index.md
index 7e1716ebd2..bc587851cb 100644
--- a/files/fr/web/css/text-overflow/index.md
+++ b/files/fr/web/css/text-overflow/index.md
@@ -7,21 +7,22 @@ tags:
   - Reference
 translation_of: Web/CSS/text-overflow
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-overflow</code></strong> définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (<em>clipping</em>), afficher une ellipse ('<code>…</code>', <code>U+2026 Horizontal Ellipsis</code>) ou afficher une chaîne de caractères choisie.</p>
+La propriété **`text-overflow`** définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (_clipping_), afficher une ellipse ('`…`', `U+2026 Horizontal Ellipsis`) ou afficher une chaîne de caractères choisie.
 
-<div>{{EmbedInteractiveExample("pages/css/text-overflow.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-overflow.html")}}
 
-<p>Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide (<code>''</code>).</p>
+Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide (`''`).
 
-<p>Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec <code>white-space: nowrap</code>) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.</p>
+Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec `white-space: nowrap`) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.
 
-<p>Cette  propriété CSS ne force pas le dépassement. Pour ce faire et afin que <code>text-overflow</code> soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec <code>hidden</code> et {{cssxref("white-space")}} avec <code>nowrap</code>.</p>
+Cette  propriété CSS ne force pas le dépassement. Pour ce faire et afin que `text-overflow` soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec `hidden` et {{cssxref("white-space")}} avec `nowrap`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* On gère le dépassement en fin de ligne
+```css
+/* On gère le dépassement en fin de ligne
     - à droite en LTR,
     - à gauche en RTL */
 text-overflow: clip;
@@ -44,76 +45,73 @@ text-overflow: fade(5%) fade(5%);
 text-overflow: inherit;
 text-overflow: initial;
 text-overflow: unset;
-</pre>
+```
 
-<p>La propriété <code>text-overflow</code> peut être définie grâce à une ou deux valeurs.</p>
+La propriété `text-overflow` peut être définie grâce à une ou deux valeurs.
 
-<p>Si une valeur est fournie, celle-ci indique le comportement du dépassement en fin de ligne (c'est-à-dire l'extrêmité droite pour les textes écrits de gauche à droite et l'extrêmité gauche pour les textes écrits de droite à gauche). Si deux valeurs sont fournies, la première précisera la comportement pour le dépassement à l'extrêmité gauche de la ligne et la seconde indiquera le comportement du dépassement pour l'extrêmité droite de la ligne.</p>
+Si une valeur est fournie, celle-ci indique le comportement du dépassement en fin de ligne (c'est-à-dire l'extrêmité droite pour les textes écrits de gauche à droite et l'extrêmité gauche pour les textes écrits de droite à gauche). Si deux valeurs sont fournies, la première précisera la comportement pour le dépassement à l'extrêmité gauche de la ligne et la seconde indiquera le comportement du dépassement pour l'extrêmité droite de la ligne.
 
-<p>Chacune des valeurs se compose :</p>
+Chacune des valeurs se compose :
 
-<ul>
- <li>D'un des mots-clés : <code><a href="#clip">clip</a></code>, <code><a href="#ellipsis">ellipsis</a></code>, <code><a href="#fade">fade</a></code></li>
- <li>De la fonction <code><a href="#fade_fun">fade()</a></code> à laquelle on passe une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui permet de contrôler la distance d'effacement</li>
- <li>D'<a href="#string">une chaîne de caractères <code>&lt;string&gt;</code></a>.</li>
-</ul>
+- D'un des mots-clés : [`clip`](#clip), [`ellipsis`](#ellipsis), [`fade`](#fade)
+- De la fonction [`fade()`](#fade_fun) à laquelle on passe une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui permet de contrôler la distance d'effacement
+- D'[une chaîne de caractères `<string>`](#string).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>clip</code></dt>
- <dd>La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a>. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide (<code>''</code>) comme valeur pour cette propriété.</dd>
- <dt><code>ellipsis</code></dt>
- <dd>Ce mot-clé indique qu'on affiche une ellipse (<code>'…'</code>, <code>U+2026 Horizontal Ellipsis</code>) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.</dd>
- <dt><code>fade</code> {{experimental_inline}}</dt>
- <dd>Ce mot-clé indique que le contenu qui dépasse est rogné avec un effet de dégradé en transparence. Au bout de la boîte, le contenu est totalement transparent.</dd>
- <dt><code>fade( &lt;length&gt; | &lt;percentage&gt; )</code> {{experimental_inline}}</dt>
- <dd>Cette fonction permet de rogner le contenu qui dépasse et d'appliquer un effet de dégradé en transparence. Au bout de la boîte, on a une transparence totale.<br>
- L'argument passé à la fonction détermine la distance sur laquelle cet effet est appliqué. La valeur en pourcentage est relative à la largeur de la boîte. Les valeurs inférieures à <code>0</code> sont ramenées à <code>0</code>. Les valeurs supérieures à la largeur de la boîte sont écrétées à la largeur de la boîte.</dd>
- <dt><code>&lt;string&gt;</code> {{experimental_inline}}</dt>
- <dd>Une chaîne de caractères (type {{cssxref("&lt;string&gt;")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.</dd>
-</dl>
+- `clip`
+  - : La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de [la boîte de contenu](/en-US/docs/Learn/CSS/Building_blocks/The_box_model). La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide (`''`) comme valeur pour cette propriété.
+- `ellipsis`
+  - : Ce mot-clé indique qu'on affiche une ellipse (`'…'`, `U+2026 Horizontal Ellipsis`) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de [la boîte de contenu](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.
+- `fade` {{experimental_inline}}
+  - : Ce mot-clé indique que le contenu qui dépasse est rogné avec un effet de dégradé en transparence. Au bout de la boîte, le contenu est totalement transparent.
+- `fade( <length> | <percentage> )` {{experimental_inline}}
+  - : Cette fonction permet de rogner le contenu qui dépasse et d'appliquer un effet de dégradé en transparence. Au bout de la boîte, on a une transparence totale.
+    L'argument passé à la fonction détermine la distance sur laquelle cet effet est appliqué. La valeur en pourcentage est relative à la largeur de la boîte. Les valeurs inférieures à `0` sont ramenées à `0`. Les valeurs supérieures à la largeur de la boîte sont écrétées à la largeur de la boîte.
+- `<string>` {{experimental_inline}}
+  - : Une chaîne de caractères (type {{cssxref("&lt;string&gt;")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de [la boîte de contenu](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<h3 id="one-value_syntax">Syntaxe avec une valeur</h3>
+### Syntaxe avec une valeur
 
-<p>Cet exemple illustre différentes valeurs pour <code>text-overflow</code>, appliquée à un paragraphe, pour des textes écrits de gauche à droite et de droite à gauche.</p>
+Cet exemple illustre différentes valeurs pour `text-overflow`, appliquée à un paragraphe, pour des textes écrits de gauche à droite et de droite à gauche.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">
+```html
 
-&lt;div class="ltr"&gt;
-  &lt;h2&gt;Left to right text&lt;/h2&gt;
-  &lt;pre&gt;clip&lt;/pre&gt;
-  &lt;p class="overflow-clip"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
-  &lt;pre&gt;ellipsis&lt;/pre&gt;
-  &lt;p class="overflow-ellipsis"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
-  &lt;pre&gt;" [..]"&lt;/pre&gt;
-  &lt;p class="overflow-string"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
-&lt;/div&gt;
+<div class="ltr">
+  <h2>Left to right text</h2>
+  <pre>clip</pre>
+  <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+  <pre>ellipsis</pre>
+  <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+  <pre>" [..]"</pre>
+  <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+</div>
 
-&lt;div class="rtl"&gt;
-  &lt;h2&gt;Right to left text&lt;/h2&gt;
-  &lt;pre&gt;clip&lt;/pre&gt;
-  &lt;p class="overflow-clip"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
-  &lt;pre&gt;ellipsis&lt;/pre&gt;
-  &lt;p class="overflow-ellipsis"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
-  &lt;pre&gt;" [..]"&lt;/pre&gt;
-  &lt;p class="overflow-string"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+<div class="rtl">
+  <h2>Right to left text</h2>
+  <pre>clip</pre>
+  <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+  <pre>ellipsis</pre>
+  <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+  <pre>" [..]"</pre>
+  <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 200px;
   border: 1px solid;
   padding: 2px 5px;
@@ -147,32 +145,33 @@ body {
 .rtl > p {
   direction: rtl;
 }
-</pre>
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('one-value_syntax', 600, 320)}}</p>
+{{EmbedLiveSample('one-value_syntax', 600, 320)}}
 
-<h3 id="two-value_syntax">Syntaxe avec deux valeurs</h3>
+### Syntaxe avec deux valeurs
 
-<p>Cette exemple illustre la syntaxe à deux valeurs pour <code>text-overflow</code>, où on peut définir un comportement de débordement différent pour le début et la fin du texte. Pour illustrer l'effet, on doit faire défiler la ligne et le début de la ligne est donc caché.</p>
+Cette exemple illustre la syntaxe à deux valeurs pour `text-overflow`, où on peut définir un comportement de débordement différent pour le début et la fin du texte. Pour illustrer l'effet, on doit faire défiler la ligne et le début de la ligne est donc caché.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">
-&lt;pre&gt;clip clip&lt;/pre&gt;
-&lt;p class="overflow-clip-clip"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
-&lt;pre&gt;clip ellipsis&lt;/pre&gt;
-&lt;p class="overflow-clip-ellipsis"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
-&lt;pre&gt;ellipsis ellipsis&lt;/pre&gt;
-&lt;p class="overflow-ellipsis-ellipsis"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
-&lt;pre&gt;ellipsis " [..]"&lt;/pre&gt;
-&lt;p class="overflow-ellipsis-string"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
-</pre>
+```html
+<pre>clip clip</pre>
+<p class="overflow-clip-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<pre>clip ellipsis</pre>
+<p class="overflow-clip-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<pre>ellipsis ellipsis</pre>
+<p class="overflow-ellipsis-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<pre>ellipsis " [..]"</pre>
+<p class="overflow-ellipsis-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 200px;
   border: 1px solid;
   padding: 2px 5px;
@@ -197,58 +196,39 @@ body {
 .overflow-ellipsis-string {
   text-overflow: ellipsis " [..]";
 }
-</pre>
+```
 
+#### JavaScript
 
-<h4 id="JavaScript">JavaScript</h4>
-
-<pre class="brush: js">// On fait défiler chaque paragraphe afin que le début soit également caché
+```js
+// On fait défiler chaque paragraphe afin que le début soit également caché
 const paras = document.querySelectorAll("p");
 
 for (let para of paras) {
   para.scroll(100, 0);
 }
-</pre>
-
-<h4 id="result">Résultat</h4>
-
-<p>{{EmbedLiveSample('two-value_syntax', 600, 360)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}</td>
-   <td>{{Spec2('CSS4 UI')}}</td>
-   <td>Ajout des valeurs <code>&lt;string&gt;</code> et <code>fade</code> et de la fonction <code>fade()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}}</td>
-   <td>{{Spec2('CSS3 Overflow')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Une version précédente de cette interface avait atteint le statut de <em>Candidate Recommendation</em>. Certaines fonctionnalités devaient être retirées et n'étaient pas listées parmi les fonctionnalités à risque, la spécification a donc été déchue au niveau <em>Working Draft</em>. Cela explique pourquoi les navigateurs ont implémenté cette propriété sans préfixe bien qu'elle ne soit pas une CR.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-overflow")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("overflow")}}</li>
- <li>{{cssxref("white-space")}}</li>
-</ul>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('two-value_syntax', 600, 360)}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                 | Commentaires                                                       |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------ |
+| {{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}         | {{Spec2('CSS4 UI')}}         | Ajout des valeurs `<string>` et `fade` et de la fonction `fade()`. |
+| {{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}} | {{Spec2('CSS3 Overflow')}} | Définition initiale.                                               |
+
+Une version précédente de cette interface avait atteint le statut de _Candidate Recommendation_. Certaines fonctionnalités devaient être retirées et n'étaient pas listées parmi les fonctionnalités à risque, la spécification a donc été déchue au niveau _Working Draft_. Cela explique pourquoi les navigateurs ont implémenté cette propriété sans préfixe bien qu'elle ne soit pas une CR.
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-overflow")}}
+
+## Voir aussi
+
+- {{cssxref("overflow")}}
+- {{cssxref("white-space")}}
diff --git a/files/fr/web/css/text-rendering/index.md b/files/fr/web/css/text-rendering/index.md
index b15e049b62..5f05e616b8 100644
--- a/files/fr/web/css/text-rendering/index.md
+++ b/files/fr/web/css/text-rendering/index.md
@@ -8,13 +8,14 @@ tags:
   - SVG
 translation_of: Web/CSS/text-rendering
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-rendering</code></strong> donne de l'information au moteur de rendu sur ce qu'il doit optimiser lors de l'affichage du texte.</p>
+La propriété **`text-rendering`** donne de l'information au moteur de rendu sur ce qu'il doit optimiser lors de l'affichage du texte.
 
-<p>Le navigateur fait des compromis entre la vitesse, la lisibilité et la précision géométrique.</p>
+Le navigateur fait des compromis entre la vitesse, la lisibilité et la précision géométrique.
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 text-rendering: auto;
 text-rendering: optimizeSpeed;
 text-rendering: optimizeLegibility;
@@ -24,107 +25,93 @@ text-rendering: geometricPrecision;
 text-rendering: inherit;
 text-rendering: initial;
 text-rendering: unset;
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>text-rendering</code> est une propriété SVG qui n'est définie dans aucun standard CSS. Toutefois, les navigateurs utilisant Gecko et WebKit permettent d'appliquer cette propriété à du contenu HTML ou XML sur Windows, Mac OS X et Linux.</p>
-</div>
+> **Note :** La propriété `text-rendering` est une propriété SVG qui n'est définie dans aucun standard CSS. Toutefois, les navigateurs utilisant Gecko et WebKit permettent d'appliquer cette propriété à du contenu HTML ou XML sur Windows, Mac OS X et Linux.
 
-<p>Un effet très visible est : <code>text-rendering : optimizeLegibility;</code> qui active les ligatures (ff, fi, fl etc.) dans les textes en dessous de 20px pour certains polices (par exemple, <em>Calibri, Candara, Constantia </em>et <em>Corbel</em> de Microsoft, ou la famille <em>DejaVu</em>).</p>
+Un effet très visible est : `text-rendering : optimizeLegibility;` qui active les ligatures (ff, fi, fl etc.) dans les textes en dessous de 20px pour certains polices (par exemple, _Calibri, Candara, Constantia_ et _Corbel_ de Microsoft, ou la famille _DejaVu_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Le navigateur fait un choix éclairé sur la manière d'optimiser la vitesse, lisibilité et la précision géométrique lors de l'affichage du texte. Pour en savoir plus sur la manière dont est supportée cette valeur, reportez-vous au tableau de compatibilité.</dd>
- <dt><code>optimizeSpeed</code></dt>
- <dd>Le navigateur privilégie la vitesse de rendu par rapport à la lisibilité et la précision géométrique lors de l'affichage du texte. Cela désactive les ligatures et le crénage.</dd>
- <dt><code>optimizeLegibility</code></dt>
- <dd>Le navigateur privilégie la lisibilité par rapport à la vitesse de rendu ou la précision géométrique. Ceci active le crénage et les ligatures.</dd>
- <dt><code>geometricPrecision</code></dt>
- <dd>
- <p>Le navigateur privilégie la précision géométrique par rapport à la vitesse de rendu et la lisibilité. Certains aspects d'une police — comme le crénage — ne se mettent pas à l'échelle de manière linéaire, donc <code>geometricPrecision</code> peut rendre agréables à l'œil les textes utilisant ces polices.</p>
+- `auto`
+  - : Le navigateur fait un choix éclairé sur la manière d'optimiser la vitesse, lisibilité et la précision géométrique lors de l'affichage du texte. Pour en savoir plus sur la manière dont est supportée cette valeur, reportez-vous au tableau de compatibilité.
+- `optimizeSpeed`
+  - : Le navigateur privilégie la vitesse de rendu par rapport à la lisibilité et la précision géométrique lors de l'affichage du texte. Cela désactive les ligatures et le crénage.
+- `optimizeLegibility`
+  - : Le navigateur privilégie la lisibilité par rapport à la vitesse de rendu ou la précision géométrique. Ceci active le crénage et les ligatures.
+- `geometricPrecision`
 
- <p>Avec SVG, lorsque le texte est agrandi ou réduit, le navigateur calcule la taille finale du texte (qui est la taille de police définie et le facteur appliqué) et demande une police de cette taille calculée au système de police de la plateforme. Mais si vous demandez une police de taille 9 avec un facteur de 140 %, la taille résultante de 12,6 n'existe pas dans la système de polices, donc le navigateur arrondi la taille de police à 12 dans ce cas. Ce qui aboutit à une mise à l'échelle en escalier du texte.</p>
+  - : Le navigateur privilégie la précision géométrique par rapport à la vitesse de rendu et la lisibilité. Certains aspects d'une police — comme le crénage — ne se mettent pas à l'échelle de manière linéaire, donc `geometricPrecision` peut rendre agréables à l'œil les textes utilisant ces polices.
 
- <p>Toutefois la propriété <code>geometricPrecision</code> — lorsqu'elle est complètement supportée par le moteur de rendu — permet de mettre à l'échelle le texte de manière continue. Pour les facteurs de mise à l'échelle élevés, il est possible d'obtenir un rendu de texte moins-que-joli, mais de la taille que vous attendez — et pas arrondi à la taille supportée par Windows ou Linux la plus proche.</p>
+    Avec SVG, lorsque le texte est agrandi ou réduit, le navigateur calcule la taille finale du texte (qui est la taille de police définie et le facteur appliqué) et demande une police de cette taille calculée au système de police de la plateforme. Mais si vous demandez une police de taille 9 avec un facteur de 140 %, la taille résultante de 12,6 n'existe pas dans la système de polices, donc le navigateur arrondi la taille de police à 12 dans ce cas. Ce qui aboutit à une mise à l'échelle en escalier du texte.
 
- <p>WebKit applique précisément la valeur définie, mais Gecko traite la valeur de la même manière que <code>optimizeLegibility</code>.</p>
- </dd>
-</dl>
+    Toutefois la propriété `geometricPrecision` — lorsqu'elle est complètement supportée par le moteur de rendu — permet de mettre à l'échelle le texte de manière continue. Pour les facteurs de mise à l'échelle élevés, il est possible d'obtenir un rendu de texte moins-que-joli, mais de la taille que vous attendez — et pas arrondi à la taille supportée par Windows ou Linux la plus proche.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+    WebKit applique précisément la valeur définie, mais Gecko traite la valeur de la même manière que `optimizeLegibility`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Application_automatique_de_optimizeLegibility">Application automatique de <code>optimizeLegibility</code></h3>
+### Application automatique de `optimizeLegibility`
 
-<p>Cet exemple illustre comment <code>optimizeLegibility</code> est automatiquement utilisé par les navigateurs lorsque <code>font-size</code> est inférieure à <code>20px</code>.</p>
+Cet exemple illustre comment `optimizeLegibility` est automatiquement utilisé par les navigateurs lorsque `font-size` est inférieure à `20px`.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
-.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }</pre>
+```css
+.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
+.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p class="small"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;
-&lt;p class="big"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;</pre>
+```html
+<p class="small">LYoWAT - ff fi fl ffl</p>
+<p class="big">LYoWAT - ff fi fl ffl</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Application_automatique_de_optimizeLegibility')}}</p>
+{{EmbedLiveSample('Application_automatique_de_optimizeLegibility')}}
 
-<h3 id="optimizeSpeed_et_optimizeLegibility"><code>optimizeSpeed</code> et <code>optimizeLegibility</code></h3>
+### `optimizeSpeed` et `optimizeLegibility`
 
-<p>Cet exemple illustre la différence d'apparence entre <code>optimizeSpeed</code> et <code>optimizeLegibility</code> (cette différence peut varier d'un navigateur à l'autre).</p>
+Cet exemple illustre la différence d'apparence entre `optimizeSpeed` et `optimizeLegibility` (cette différence peut varier d'un navigateur à l'autre).
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }
+```css
+p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }
 
 .speed       { text-rendering: optimizeSpeed; }
-.legibility  { text-rendering: optimizeLegibility; }</pre>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;p class="speed"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;
-&lt;p class="legibility"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('optimizeSpeed_et_optimizeLegibility')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('SVG2', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td>
-   <td>{{Spec2('SVG2')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-rendering")}}</p>
+.legibility  { text-rendering: optimizeLegibility; }
+```
+
+#### HTML
+
+```html
+<p class="speed">LYoWAT - ff fi fl ffl</p>
+<p class="legibility">LYoWAT - ff fi fl ffl</p>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('optimizeSpeed_et_optimizeLegibility')}}
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                   | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------ | -------------------- |
+| {{SpecName('SVG2', 'painting.html#TextRenderingProperty', 'text-rendering')}} | {{Spec2('SVG2')}} | Aucune modification. |
+| {{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}} | {{Spec2('SVG1.1')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-rendering")}}
diff --git a/files/fr/web/css/text-shadow/index.md b/files/fr/web/css/text-shadow/index.md
index 359a0acb0e..7df9a97ea6 100644
--- a/files/fr/web/css/text-shadow/index.md
+++ b/files/fr/web/css/text-shadow/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/text-shadow
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-shadow</code></strong> ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux <a href="/fr/docs/Web/CSS/text-decoration">décorations</a> de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur.</p>
+La propriété **`text-shadow`** ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux [décorations](/fr/docs/Web/CSS/text-decoration) de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur.
 
-<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-shadow.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* offset-x | offset-y | blur-radius | color */
+```css
+/* offset-x | offset-y | blur-radius | color */
 text-shadow: 1px 1px 2px black;
 
 /* color | offset-x | offset-y | blur-radius */
@@ -35,101 +36,85 @@ text-shadow: 5px 10px;
 text-shadow: inherit;
 text-shadow: initial;
 text-shadow: unset;
-</pre>
+```
 
-<p>Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules.</p>
+Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules.
 
-<p>Chaque ombre est spécifiée par deux ou trois valeurs <code>&lt;length&gt;</code>, suivies d'une valeur <code>&lt;color&gt;</code>. Les deux premières valeurs <code>&lt;length&gt;</code> sont les valeurs <code>&lt;decalage-x&gt;</code> et <code>&lt;decalage-y&gt;</code>. La troisième valeur <code>&lt;length&gt;</code>, facultative, est le <code>&lt;rayon-de-flou&gt;</code>. La valeur <code>&lt;color&gt;</code> est la couleur de l'ombre.</p>
+Chaque ombre est spécifiée par deux ou trois valeurs `<length>`, suivies d'une valeur `<color>`. Les deux premières valeurs `<length>` sont les valeurs `<decalage-x>` et `<decalage-y>`. La troisième valeur `<length>`, facultative, est le `<rayon-de-flou>`. La valeur `<color>` est la couleur de l'ombre.
 
-<p>Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus.</p>
+Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus.
 
-<p>Cette propriété s'applique aux deux <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a> {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}.</p>
+Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments) {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;color&gt;")}}</dt>
- <dd>Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement.</dd>
- <dt>&lt;decalage-x&gt; &lt;decalage-y&gt;</dt>
- <dd>Obligatoires. Ces valeurs {{cssxref("&lt;length&gt;")}} définissent la distance de l'ombre par rapport au texte. <code>&lt;decalage-x&gt;</code> définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. <code>&lt;decalage-y&gt;</code> définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à <code>0</code>, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du <code>&lt;rayon-de-flou&gt;</code>).</dd>
- <dt>&lt;rayon-de-flou&gt;</dt>
- <dd>Optionnel. C'est une valeur {{cssxref("&lt;length&gt;")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut <code>0</code>.</dd>
-</dl>
+- {{cssxref("&lt;color&gt;")}}
+  - : Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement.
+- \<decalage-x> \<decalage-y>
+  - : Obligatoires. Ces valeurs {{cssxref("&lt;length&gt;")}} définissent la distance de l'ombre par rapport au texte. `<decalage-x>` définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. `<decalage-y>` définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à `0`, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du `<rayon-de-flou>`).
+- \<rayon-de-flou>
+  - : Optionnel. C'est une valeur {{cssxref("&lt;length&gt;")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut `0`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="ombre_simple">Ombre simple</h3>
+### Ombre simple
 
-
-<pre class="brush: css">.red-text-shadow {
+```css
+.red-text-shadow {
    text-shadow: red 0 -2px;
-}</pre>
+}
+```
 
-<pre class="brush: html">&lt;p class="red-text-shadow"&gt;Sed ut perspiciatis unde omnis iste
+```html
+<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
     natus error sit voluptatem accusantium doloremque laudantium,
-    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
+```
 
-<p>{{EmbedLiveSample('ombre_simple', '660px', '90px')}}</p>
+{{EmbedLiveSample('ombre_simple', '660px', '90px')}}
 
-<h3 id="ombres_multiples">Ombres multiples</h3>
+### Ombres multiples
 
-<pre class="brush:css">.white-text-with-blue-shadow {
+```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;
-}</pre>
+}
+```
 
-<pre class="brush: html">&lt;p class="white-text-with-blue-shadow"&gt;Sed ut perspiciatis unde omnis iste
+```html
+<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
     natus error sit voluptatem accusantium doloremque laudantium,
-    totam rem aperiam, eaque ipsaquae ab illo inventore.&lt;/p&gt;</pre>
-
-<p>{{EmbedLiveSample('ombres_multiples', '660px', '170px')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Spécifie <code>text-shadow</code> comme animable.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>La propriété CSS <code>text-shadow</code> était <a href="https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">incorrectement définie dans CSS2</a> et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-shadow")}}</p>
-
-<h3 id="Notes_CSS_Quantum">Notes CSS Quantum</h3>
-
-<ul>
- <li>Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une <code>text-shadow</code> avec une couleur spécifiée et une <code>ext-shadow</code> sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>), prévu pour être disponible dans Firefox 57.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow Generator</a> - Un générateur CSS d'ombre de texte interactif</li>
- <li>{{cssxref("box-shadow")}}</li>
- <li>Le type de données {{cssxref("&lt;color&gt;")}} (pour spécifier la couleur d'ombre)</li>
- <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML</a></li>
-</ul>
+    totam rem aperiam, eaque ipsaquae ab illo inventore.</p>
+```
+
+{{EmbedLiveSample('ombres_multiples', '660px', '170px')}}
+
+## Spécifications
+
+| Spécification                                                                            | Statut                                       | Commentaire                                                                                                                                                                                                                                                                                                                                                     |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}} | {{Spec2('CSS3 Transitions')}}     | Spécifie `text-shadow` comme animable.                                                                                                                                                                                                                                                                                                                          |
+| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}} | {{Spec2('CSS3 Text Decoration')}} | La propriété CSS `text-shadow` était [incorrectement définie dans CSS2](https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props) et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans [CSS Text Decoration Module Level 3](https://www.w3.org/TR/css-text-decor-3/). |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-shadow")}}
+
+### Notes CSS Quantum
+
+- Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une `text-shadow` avec une couleur spécifiée et une `ext-shadow` sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo)), prévu pour être disponible dans Firefox 57.
+
+## Voir aussi
+
+- [Text Shadow Generator](https://cssgenerator.org/text-shadow-css-generator.html) - Un générateur CSS d'ombre de texte interactif
+- {{cssxref("box-shadow")}}
+- Le type de données {{cssxref("&lt;color&gt;")}} (pour spécifier la couleur d'ombre)
+- [Appliquer des couleurs sur des éléments HTML](/fr/docs/Web/HTML/Applying_color)
diff --git a/files/fr/web/css/text-size-adjust/index.md b/files/fr/web/css/text-size-adjust/index.md
index 3cfaa33d46..7e4f496eb0 100644
--- a/files/fr/web/css/text-size-adjust/index.md
+++ b/files/fr/web/css/text-size-adjust/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/text-size-adjust
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>text-size-adjust</code></strong> permet de contrôler l'algorithme d'amplification du texte sur certains appareils mobiles. Cette propriété n'est pas standard et doit donc être préfixée : <code>-moz-text-size-adjust</code>, <code>-webkit-text-size-adjust</code>, and <code>-ms-text-size-adjust</code>.</p>
+La propriété **`text-size-adjust`** permet de contrôler l'algorithme d'amplification du texte sur certains appareils mobiles. Cette propriété n'est pas standard et doit donc être préfixée : `-moz-text-size-adjust`, `-webkit-text-size-adjust`, and `-ms-text-size-adjust`.
 
-<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
 text-size-adjust: none;
 text-size-adjust: auto;
 
@@ -23,64 +24,47 @@ text-size-adjust: 80%;
 text-size-adjust: inherit;
 text-size-adjust: initial;
 text-size-adjust: unset;
-</pre>
+```
 
-<p>De nombreuses pages web n'ont pas été conçues pour le mobile et les navigateurs mobiles n'affichent pas les pages web de la même façon que les navigateurs de bureau. Plutôt que d'afficher une page web dans la largeur de l'écran, un navigateur mobile sera parfois amené à l'afficher dans une zone d'affichage beaucoup plus large que l'écran. Pour gérer la largeur de l'écran, le navigateur n'affichera qu'une partie ou rétrécira la taille de la zone d'affichage.</p>
+De nombreuses pages web n'ont pas été conçues pour le mobile et les navigateurs mobiles n'affichent pas les pages web de la même façon que les navigateurs de bureau. Plutôt que d'afficher une page web dans la largeur de l'écran, un navigateur mobile sera parfois amené à l'afficher dans une zone d'affichage beaucoup plus large que l'écran. Pour gérer la largeur de l'écran, le navigateur n'affichera qu'une partie ou rétrécira la taille de la zone d'affichage.
 
-<p>Par essence, cela signifie que, sur mobiles, on ne voit qu'une portion rectangulaire de la page ou que la page a l'air dézoomée (et apparaît donc plus petite).</p>
+Par essence, cela signifie que, sur mobiles, on ne voit qu'une portion rectangulaire de la page ou que la page a l'air dézoomée (et apparaît donc plus petite).
 
-<p>Cependant, lorsque l'utilisateur zoome jusqu'à ce que le texte soit lisible, on a alors une barre horizontale de défilement qui apparaît car le texte est large que la largeur de l'écran et l'ergonomie est donc détériorée car l'utilisateur doit défiler à la fin et au début à chaque passage à la ligne. Pour éviter ce problème, plusieurs navigateurs mobiles implémentent un algorithme de <strong>gonflement</strong> (<em>inflation</em>). Lorsqu'un élément reçoit le focus, qu'il contient du texte et qu'il utilise 100 % de la largeur de l'écran, la taille du texte est augmentée afin qu'il soit lisible, sans pour autant modifier la disposition générale (ce qui évite d'avoir à recourir à une barre de défilement horizontale).</p>
+Cependant, lorsque l'utilisateur zoome jusqu'à ce que le texte soit lisible, on a alors une barre horizontale de défilement qui apparaît car le texte est large que la largeur de l'écran et l'ergonomie est donc détériorée car l'utilisateur doit défiler à la fin et au début à chaque passage à la ligne. Pour éviter ce problème, plusieurs navigateurs mobiles implémentent un algorithme de **gonflement** (_inflation_). Lorsqu'un élément reçoit le focus, qu'il contient du texte et qu'il utilise 100 % de la largeur de l'écran, la taille du texte est augmentée afin qu'il soit lisible, sans pour autant modifier la disposition générale (ce qui évite d'avoir à recourir à une barre de défilement horizontale).
 
-<p>La propriété <code>text-size-adjust</code> permet aux auteurs de ne pas suivre ce comportement si les pages web ont été adaptées pour les différents formats d'écran.</p>
+La propriété `text-size-adjust` permet aux auteurs de ne pas suivre ce comportement si les pages web ont été adaptées pour les différents formats d'écran.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>text-size-adjust</code> est définie avec le mot-clé <code>none</code> ou le mot-clé <code>auto</code> ou avec une valeur de type <code>&lt;percentage&gt;</code>.</p>
+La propriété `text-size-adjust` est définie avec le mot-clé `none` ou le mot-clé `auto` ou avec une valeur de type `<percentage>`.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Un mot-clé qui permet de ne pas utiliser l'algorithme de gonflement. En résumé, cela signifie que l'élément sera affiché sans que le texte soit amplifié. Pour les anciennes versions des navigateurs basés sur le moteur WebKit (Chrome ≤ 26 et Safari ≤ 5), cela empêchera l'utilisateur de zoomer/dézoomer sur la page web.</dd>
- <dt><code>auto</code></dt>
- <dd>Active l'algorithme d'amplification du navigateur. Ce mot-clé permet notamment d'annuler une valeur <code>none</code> utilisée précédemment.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur exprimée en pourcentages (type de données {{cssxref("&lt;percentage&gt;")}}. Cette valeur est synonyme du mot-clé <code>auto</code> et ajoute comme information le taux d'amplification à utiliser sur la police avec l'algorithme.</dd>
-</dl>
+- `none`
+  - : Un mot-clé qui permet de ne pas utiliser l'algorithme de gonflement. En résumé, cela signifie que l'élément sera affiché sans que le texte soit amplifié. Pour les anciennes versions des navigateurs basés sur le moteur WebKit (Chrome ≤ 26 et Safari ≤ 5), cela empêchera l'utilisateur de zoomer/dézoomer sur la page web.
+- `auto`
+  - : Active l'algorithme d'amplification du navigateur. Ce mot-clé permet notamment d'annuler une valeur `none` utilisée précédemment.
+- `<percentage>`
+  - : Une valeur exprimée en pourcentages (type de données {{cssxref("&lt;percentage&gt;")}}. Cette valeur est synonyme du mot-clé `auto` et ajoute comme information le taux d'amplification à utiliser sur la police avec l'algorithme.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td>
-   <td>{{Spec2("CSS Text Size Adjust")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-size-adjust")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a class="link-https" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html">La documentation d'Apple</a></li>
- <li><a href="http://dbaron.org/log/20111126-font-inflation">Le comportement de Gecko décrit par L. David Baron</a></li>
- <li><a href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">La documentation de Microsoft</a></li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                            | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}} | {{Spec2("CSS Text Size Adjust")}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-size-adjust")}}
+
+## Voir aussi
+
+- [La documentation d'Apple](https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html)
+- [Le comportement de Gecko décrit par L. David Baron](http://dbaron.org/log/20111126-font-inflation)
+- [La documentation de Microsoft](<http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx>)
diff --git a/files/fr/web/css/text-transform/index.md b/files/fr/web/css/text-transform/index.md
index b7d87fe8e2..87d76a62fe 100644
--- a/files/fr/web/css/text-transform/index.md
+++ b/files/fr/web/css/text-transform/index.md
@@ -7,37 +7,28 @@ tags:
   - Reference
 translation_of: Web/CSS/text-transform
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-transform</code></strong> définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations <a href="/fr/docs/Web/HTML/Element/ruby">Ruby</a>.</p>
+La propriété **`text-transform`** définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations [Ruby](/fr/docs/Web/HTML/Element/ruby).
 
-<div>{{EmbedInteractiveExample("pages/css/text-transform.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-transform.html")}}
 
-<p>La propriété <code>text-transform</code> gère les différences liées aux langues, par exemple :</p>
+La propriété `text-transform` gère les différences liées aux langues, par exemple :
 
-<ul>
- <li>
-  <p>Pour les langues turques comme le turc (tr), l'azéri (az), le tatar de Crimée (crh), le tatar de Volga (tt) et le bachkir (ba), il existe deux sortes de i, avec et sans le point. Les majuscules correspondantes sont également différentes : <code>i</code>/<code>İ</code> et <code>ı</code>/<code>I</code>.</p>
- </li>
- <li>
-  <p>En allemand (de), le <code>ß</code> devient <code>SS</code> en majuscule.</p>
- </li>
- <li>
-  <p>En néerlandais (nl), le digraphe <code>ij</code> devient <code>IJ</code>, y compris avec <code>text-transform: capitalize</code> qui ne met que la première lettre de chaque mot en majuscule.</p>
- </li>
- <li>
-  <p>En grec (el), les voyelles perdent leur accent lorsque tout le mot est écrit en capitales (<code>ά</code>/<code>Α</code>) à l'exception du eta disjonctif (<code>ή</code>/<code>Ή</code>). Les diphtongues avec un accent sur la première voyelle perde l'accent et récupère un tréma sur la seconde voyelle (<code>άι</code>/<code>ΑΪ</code>). La lettre sigma a deux formes minuscules : <code>σ</code> et <code>ς</code>. <code>ς</code> est utilisée uniquement lorsque c'est la dernière lettre du mot. Lorsque l'agent utilisateur applique <code>text-transform: lowercase</code> à un sigma majuscule (<code>Σ</code>), il doit choisir l'une des deux formes selon le contexte.</p>
- </li>
- <li>En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, en appliquant <code>text-transform: uppercase</code> à <code>ar aon tslí</code>, on obtiendra <code>AR AON tSLÍ</code> et non <code>AR AON TSLÍ</code>. Dans certains cas, un trait d'union peut être retiré lors du passage en majuscules : <code>an t-uisce</code> deviendra <code>AN tUISCE </code>(le trait-d'union sera bien réinséré avec <code>text-transform: lowercase</code>)</li>
-</ul>
+- Pour les langues turques comme le turc (tr), l'azéri (az), le tatar de Crimée (crh), le tatar de Volga (tt) et le bachkir (ba), il existe deux sortes de i, avec et sans le point. Les majuscules correspondantes sont également différentes : `i`/`İ` et `ı`/`I`.
+- En allemand (de), le `ß` devient `SS` en majuscule.
+- En néerlandais (nl), le digraphe `ij` devient `IJ`, y compris avec `text-transform: capitalize` qui ne met que la première lettre de chaque mot en majuscule.
+- En grec (el), les voyelles perdent leur accent lorsque tout le mot est écrit en capitales (`ά`/`Α`) à l'exception du eta disjonctif (`ή`/`Ή`). Les diphtongues avec un accent sur la première voyelle perde l'accent et récupère un tréma sur la seconde voyelle (`άι`/`ΑΪ`). La lettre sigma a deux formes minuscules : `σ` et `ς`. `ς` est utilisée uniquement lorsque c'est la dernière lettre du mot. Lorsque l'agent utilisateur applique `text-transform: lowercase` à un sigma majuscule (`Σ`), il doit choisir l'une des deux formes selon le contexte.
+- En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, en appliquant `text-transform: uppercase` à `ar aon tslí`, on obtiendra `AR AON tSLÍ` et non `AR AON TSLÍ`. Dans certains cas, un trait d'union peut être retiré lors du passage en majuscules : `an t-uisce` deviendra `AN tUISCE `(le trait-d'union sera bien réinséré avec `text-transform: lowercase`)
 
-<p>La langue d'un document HTML est définie par l'attribut XML <code>xml:lang</code>, qui a la priorité sur l'attribut global <code><a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a></code>.</p>
+La langue d'un document HTML est définie par l'attribut XML `xml:lang`, qui a la priorité sur l'attribut global [`lang`](/fr/docs/Web/HTML/Global_attributes/lang).
 
-<p>Le support de ces différents cas peut varier d'un navigateur à un autre. Pour plus de détails, <a href="#compat">voir le tableau de compatibilité des navigateurs</a>.</p>
+Le support de ces différents cas peut varier d'un navigateur à un autre. Pour plus de détails, [voir le tableau de compatibilité des navigateurs](#compat).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 text-transform: none;
 text-transform: capitalize;
 text-transform: uppercase;
@@ -49,68 +40,67 @@ text-transform: full-size-kana;
 text-transform: inherit;
 text-transform: initial;
 text-transform: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>capitalize</code></dt>
- <dd>
- <p>En utilisant ce mot-clé, la première lettre de chaque mot sera affichée en capitale. Les autres caractères ne seront pas modifiés et conserveront ainsi la forme originale, contenue dans le texte de l'élément. Ici, une lettre peut être n'importe quel caractère Unicode qui fait partie des catégories génériques Lettre. Cela exclue donc les symboles de ponctuations qui peuvent être utilisés en début de mot.</p>
-
- <div class="note"><p><strong>Note :</strong> Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.</p></div>
- </dd>
- <dt><code>uppercase</code></dt>
- <dd>En utilisant ce mot-clé, tous les caractères seront écrits en capitales.</dd>
- <dt><code>lowercase</code></dt>
- <dd>En utilisant ce mot-clé, tous les caractères seront écrits en minuscules.</dd>
- <dt><code>none</code></dt>
- <dd>Ce mot-clé empêche les modifications liées à la casse des caractères.</dd>
- <dt><code>full-width</code> {{experimental_inline}}</dt>
- <dd>Ce mot-clé force l'écriture de chaque caractère dans un carré, ce qui permet de les aligner avec des scripts d'Asie Orientale (par exemple du chinois ou du japonais).</dd>
- <dt><code>full-size-kana</code></dt>
- <dd>Cette valeur est généralement utilisée pour <a href="/fr/docs/Web/HTML/Element/ruby">les annotations Ruby</a>. Ce mot-clé convertit les caractères Kana de petite taille en leur équivalent de grande taille. Cela permet de compenser les problèmes de lisibilité des tailles de police généralement utilisées pour le Ruby.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `capitalize`
+
+  - : En utilisant ce mot-clé, la première lettre de chaque mot sera affichée en capitale. Les autres caractères ne seront pas modifiés et conserveront ainsi la forme originale, contenue dans le texte de l'élément. Ici, une lettre peut être n'importe quel caractère Unicode qui fait partie des catégories génériques Lettre. Cela exclue donc les symboles de ponctuations qui peuvent être utilisés en début de mot.
+
+    > **Note :** Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et \_ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.
+
+- `uppercase`
+  - : En utilisant ce mot-clé, tous les caractères seront écrits en capitales.
+- `lowercase`
+  - : En utilisant ce mot-clé, tous les caractères seront écrits en minuscules.
+- `none`
+  - : Ce mot-clé empêche les modifications liées à la casse des caractères.
+- `full-width` {{experimental_inline}}
+  - : Ce mot-clé force l'écriture de chaque caractère dans un carré, ce qui permet de les aligner avec des scripts d'Asie Orientale (par exemple du chinois ou du japonais).
+- `full-size-kana`
+  - : Cette valeur est généralement utilisée pour [les annotations Ruby](/fr/docs/Web/HTML/Element/ruby). Ce mot-clé convertit les caractères Kana de petite taille en leur équivalent de grande taille. Cela permet de compenser les problèmes de lisibilité des tailles de police généralement utilisées pour le Ruby.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;code&gt;none :&lt;/code&gt;
-&lt;p class="sans_effet"&gt;
+```html
+<code>none :</code>
+<p class="sans_effet">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit
-&lt;/p&gt;
+</p>
 
-&lt;code&gt;capitalize :&lt;/code&gt;
-&lt;p class="cap"&gt;
+<code>capitalize :</code>
+<p class="cap">
   (Voici) “un” –rapide– -test- ⓙkl
-&lt;/p&gt;
+</p>
 
-&lt;/code&gt; uppercase :&lt;/code&gt;
-&lt;p class="majuscules"&gt;
+</code> uppercase :</code>
+<p class="majuscules">
   Cependant d'Artagnan voulut d'abord se rendre compte de
   la physionomie de l'impertinent qui se moquait de lui.
-&lt;/p&gt;
+</p>
 
-&lt;code&gt;full-width :&lt;/code&gt;
-&lt;p class="mix"&gt;
-  ABCDEF&lt;/br&gt;
+<code>full-width :</code>
+<p class="mix">
+  ABCDEF</br>
   最初に彼を嘲
-&lt;/p&gt;
-
-&lt;code&gt;full-size-kana :&lt;/code&gt;
-&lt;p class="full-size-kana"&gt;ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ&lt;/p&gt;
-&lt;p&gt;ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ&lt;/p&gt;
+</p>
 
-</pre>
+<code>full-size-kana :</code>
+<p class="full-size-kana">ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
+<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p.sans_effet {
+```css
+p.sans_effet {
   text-transform: none;
 }
 
@@ -129,59 +119,33 @@ p.mix {
 p.full-size-kana {
   text-transform: full-size-kana;
 }
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","500")}}
+
+## Accessibilité
+
+De grandes portions de texte utilisant `text-transform` avec la valeur `uppercase` peuvent être difficilement lisibles par les personnes dyslexiques ou souffrant de problèmes 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 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}} | {{Spec2('CSS3 Text')}} | Par rapport à {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, la spécification s'étend aux caractères Unicode des catégories générales Nombre et Lettre. Le comportement de `capitalize` est modifié pour ignorer les éventuels symboles ou caractères de ponctuations utilisés. Les mots-clés `full-width` et `full-size-kana` sont ajoutés afin de pouvoir mélanger harmonieusement les caractères alphabétiques et les caractères idéographiques. |
+| {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} | {{Spec2('CSS2.1')}}     | Par rapport à {{SpecName('CSS1', '#text-transform', 'text-transform')}}, étend la spécifications aux lettres non latines et aux scripts bicaméraux.                                                                                                                                                                                                                                                                                                                     |
+| {{SpecName('CSS1', '#text-transform', 'text-transform')}}         | {{Spec2('CSS1')}}     | Définition initiale.                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-transform")}}
+
+## Voir aussi
 
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","500")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>De grandes portions de texte utilisant <code>text-transform</code> avec la valeur <code>uppercase</code> peuvent être difficilement lisibles par les personnes dyslexiques ou souffrant de problèmes cognitifs.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Par rapport à {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, la spécification s'étend aux caractères Unicode des catégories générales Nombre et Lettre. Le comportement de <code>capitalize</code> est modifié pour ignorer les éventuels symboles ou caractères de ponctuations utilisés. Les mots-clés <code>full-width</code> et <code>full-size-kana</code> sont ajoutés afin de pouvoir mélanger harmonieusement les caractères alphabétiques et les caractères idéographiques.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Par rapport à {{SpecName('CSS1', '#text-transform', 'text-transform')}}, étend la spécifications aux lettres non latines et aux scripts bicaméraux.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-transform")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("font-variant")}}</li>
-</ul>
+- {{cssxref("font-variant")}}
diff --git a/files/fr/web/css/text-underline-offset/index.md b/files/fr/web/css/text-underline-offset/index.md
index 332cc62d99..82e69bab77 100644
--- a/files/fr/web/css/text-underline-offset/index.md
+++ b/files/fr/web/css/text-underline-offset/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/text-underline-offset
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>text-underline-offset</code></strong> définit le décalage de la ligne de décoration du texte par rapport à sa position originale.</p>
+La propriété CSS **`text-underline-offset`** définit le décalage de la ligne de décoration du texte par rapport à sa position originale.
 
-<div>{{EmbedInteractiveExample("pages/css/text-underline-offset.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-underline-offset.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> <code>text-underline-offset</code> n'est pas une propriété détaillée de {{cssxref('text-decoration')}}. Bien qu'un élément puisse avoir plusieurs lignes décoratives, <code>text-underline-offset</code> n'aura qu'un impact sur le soulignage (et pas sur les autres lignes telles que celles fournies par {{cssxref('text-decoration-line')}} avec <code>overline</code> ou <code>line-through</code>).</p>
-</div>
+> **Note :** `text-underline-offset` n'est pas une propriété détaillée de {{cssxref('text-decoration')}}. Bien qu'un élément puisse avoir plusieurs lignes décoratives, `text-underline-offset` n'aura qu'un impact sur le soulignage (et pas sur les autres lignes telles que celles fournies par {{cssxref('text-decoration-line')}} avec `overline` ou `line-through`).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeur simple */
+```css
+/* Valeur simple */
 text-underline-offset: none;
 text-underline-offset: from-font;
 text-underline-offset: 0.2em;
@@ -28,30 +27,29 @@ text-underline-offset: 0.2em;
 text-underline-offset: inherit;
 text-underline-offset: initial;
 text-underline-offset: unset;
-</pre>
+```
 
-<p>La propriété <code>text-underline-offset</code> est définie avec le mot-clé <code>none</code> ou avec une valeur de la liste suivante.</p>
+La propriété `text-underline-offset` est définie avec le mot-clé `none` ou avec une valeur de la liste suivante.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Le navigateur choisit un décalage approprié pour le soulignage.</dd>
- <dt><code>from-font</code></dt>
- <dd>Si le fichier de fonte inclut des informations quant à un décalage préféré, c'est cette valeur qui sera utilisée. Si le fichier de fonte n'a pas cette information, cette valeur se comportera comme <code>auto</code>.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une longueur (valeur de type {{cssxref("&lt;length&gt;")}}) indiquant le décalage à utiliser. Il est recommandé d'utiliser des <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme unité afin que le décalage suive la taille de la police (quand on zoome par exemple).</dd>
-</dl>
+- `auto`
+  - : Le navigateur choisit un décalage approprié pour le soulignage.
+- `from-font`
+  - : Si le fichier de fonte inclut des informations quant à un décalage préféré, c'est cette valeur qui sera utilisée. Si le fichier de fonte n'a pas cette information, cette valeur se comportera comme `auto`.
+- `<length>`
+  - : Une longueur (valeur de type {{cssxref("&lt;length&gt;")}}) indiquant le décalage à utiliser. Il est recommandé d'utiliser des [`em`](/fr/docs/Web/CSS/length#em) comme unité afin que le décalage suive la taille de la police (quand on zoome par exemple).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   text-decoration-line: underline;
   text-decoration-style: wavy;
   text-decoration-color: red;
@@ -60,49 +58,37 @@ text-underline-offset: unset;
 
 .deuxlignes{
   text-decoration-line: underline overline;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="uneligne"&gt;
+```html
+<p class="uneligne">
   Voici un texte souligné avec une ligne ondulée rouge !
-&lt;/p&gt;
-&lt;p class="deuxlignes"&gt;
+</p>
+<p class="deuxlignes">
   Ce texte a une ligne en dessous et une ligne au dessus.
   Seule la ligne du dessous est déplacée.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '', '', '')}}</p>
+{{EmbedLiveSample('Exemples', '', '', '')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Text Decoration', '#<span class="pl-s">underline-offset</span>', 'text-underline-offset')}}</td>
-   <td>{{Spec2('CSS4 Text Decoration')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | État                                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS4 Text Decoration', '#<span class="pl-s">underline-offset</span>', 'text-underline-offset')}} | {{Spec2('CSS4 Text Decoration')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.text-underline-offset")}}</p>
+{{Compat("css.properties.text-underline-offset")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("text-decoration")}}</li>
-</ul>
+- {{cssxref("text-decoration")}}
diff --git a/files/fr/web/css/text-underline-position/index.md b/files/fr/web/css/text-underline-position/index.md
index 80c9d9ab1c..5a8b5a22b0 100644
--- a/files/fr/web/css/text-underline-position/index.md
+++ b/files/fr/web/css/text-underline-position/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/text-underline-position
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>text-underline-position</code></strong> définit la position du soulignement utilisé lorsque la propriété {{cssxref("text-decoration")}} prend la valeur <code>underline</code>.</p>
+La propriété **`text-underline-position`** définit la position du soulignement utilisé lorsque la propriété {{cssxref("text-decoration")}} prend la valeur `underline`.
 
-<pre class="brush:css  no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 text-underline-position: auto;
 text-underline-position: under;
 text-underline-position: left;
@@ -25,58 +26,59 @@ text-underline-position: right under;
 text-underline-position: inherit;
 text-underline-position: initial;
 text-underline-position: unset;
-</pre>
+```
 
-<p>Cette propriété est héritée sur les différents éléments et n'est pas réinitialisée avec la propriété raccourcie {{cssxref("text-decoration")}}, ce qui permet de la définir simplement pour l'ensemble du document.</p>
+Cette propriété est héritée sur les différents éléments et n'est pas réinitialisée avec la propriété raccourcie {{cssxref("text-decoration")}}, ce qui permet de la définir simplement pour l'ensemble du document.
 
-<pre class="brush: css">:root {
+```css
+:root {
   /* Une meilleure règle par défaut pour un document */
   /* avec de nombreuses formules chimiques */
   text-underline-position: under;
 }
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>Ce mot-clé permet à l'agent utilisateur d'utiliser un algorithme pour choisir entre <code>under</code> et <code>alphabetic</code>.</dd>
- <dt><code>under</code></dt>
- <dd>Ce mot-clé force la ligne à se situer sous la ligne de base, à une position où elle ne traversera pas de <a href="https://fr.wikipedia.org/wiki/Jambage">jambage</a>. Cela est notamment utile lorsqu'on veut souligner de façon lisible des formules chimiques ou mathématiques (qui utilisent fréquemment des indices).</dd>
- <dt><code>left</code></dt>
- <dd>In vertical writing-modes, this keyword forces the line to be placed on the <em>left</em> of the characters. In horizontal writing-modes, it is a synonym of <code>under.</code></dd>
- <dt><code>right</code></dt>
- <dd>Pour les modes d'écritures verticaux, ce mot-clé force la ligne à être placée à droite des caractères. Pour les modes d'écritures horizontaux, ce mot-clé est synonyme de <code>under.</code></dd>
- <dt><code>auto-pos</code>{{non-standard_inline}}</dt>
- <dd>Ce mot-clé est synonyme de <code>auto</code> et c'est ce dernier qui doit être utilisé à la place.</dd>
- <dt><code>above</code>{{non-standard_inline}}</dt>
- <dd>Ce mot-clé force la ligne à être dessinée au dessus du texte. Lorsqu'on écrit avec un script d'Asie orientale, la valeur <code>auto</code> aura un effet semblable.</dd>
- <dt><code>below</code>{{non-standard_inline}}</dt>
- <dd>Ce mot-clé force la ligne à être dessinée sous le texte. Lorsqu'on utilise un texte alphabétique, la valeur <code>auto</code> aura un effet semblable.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Syntaxe
+
+### Valeurs
+
+- `auto`
+  - : Ce mot-clé permet à l'agent utilisateur d'utiliser un algorithme pour choisir entre `under` et `alphabetic`.
+- `under`
+  - : Ce mot-clé force la ligne à se situer sous la ligne de base, à une position où elle ne traversera pas de [jambage](https://fr.wikipedia.org/wiki/Jambage). Cela est notamment utile lorsqu'on veut souligner de façon lisible des formules chimiques ou mathématiques (qui utilisent fréquemment des indices).
+- `left`
+  - : In vertical writing-modes, this keyword forces the line to be placed on the _left_ of the characters. In horizontal writing-modes, it is a synonym of `under.`
+- `right`
+  - : Pour les modes d'écritures verticaux, ce mot-clé force la ligne à être placée à droite des caractères. Pour les modes d'écritures horizontaux, ce mot-clé est synonyme de `under.`
+- `auto-pos`{{non-standard_inline}}
+  - : Ce mot-clé est synonyme de `auto` et c'est ce dernier qui doit être utilisé à la place.
+- `above`{{non-standard_inline}}
+  - : Ce mot-clé force la ligne à être dessinée au dessus du texte. Lorsqu'on écrit avec un script d'Asie orientale, la valeur `auto` aura un effet semblable.
+- `below`{{non-standard_inline}}
+  - : Ce mot-clé force la ligne à être dessinée sous le texte. Lorsqu'on utilise un texte alphabétique, la valeur `auto` aura un effet semblable.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="chimique"&gt;
-  C&lt;sub&gt;6&lt;/sub&gt;H&lt;sub&gt;12&lt;/sub&gt;O&lt;sub&gt;6&lt;/sub&gt;
-&lt;/p&gt;
-&lt;p class="defaut"&gt;
-  Et là avec des &lt;sub&gt;indices&lt;/sub&gt;
+```html
+<p class="chimique">
+  C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
+</p>
+<p class="defaut">
+  Et là avec des <sub>indices</sub>
   et du jambage
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.chimique {
+```css
+.chimique {
   text-decoration: underline;
   text-underline-position: under;
 }
@@ -84,43 +86,29 @@ text-underline-position: unset;
 .defaut {
   text-decoration: underline;
   text-underline-position: auto;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text Decoration', '#text-underline-position-property', 'text-underline-position')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.text-underline-position")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("text-decoration")}}</li>
- <li>{{cssxref("text-decoration-line")}}</li>
- <li>{{cssxref("text-decoration-style")}}</li>
- <li>{{cssxref("text-decoration-color")}}</li>
- <li><a href="https://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx">La documentation sur les valeurs non-standard utilisées par Microsoft</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                                       | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Text Decoration', '#text-underline-position-property', 'text-underline-position')}} | {{Spec2('CSS3 Text Decoration')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.text-underline-position")}}
+
+## Voir aussi
+
+- {{cssxref("text-decoration")}}
+- {{cssxref("text-decoration-line")}}
+- {{cssxref("text-decoration-style")}}
+- {{cssxref("text-decoration-color")}}
+- [La documentation sur les valeurs non-standard utilisées par Microsoft](https://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx)
diff --git a/files/fr/web/css/time-percentage/index.md b/files/fr/web/css/time-percentage/index.md
index 02f8e4a42a..7d979c4362 100644
--- a/files/fr/web/css/time-percentage/index.md
+++ b/files/fr/web/css/time-percentage/index.md
@@ -7,42 +7,25 @@ tags:
   - Type
 translation_of: Web/CSS/time-percentage
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée <strong><code>&lt;time-percentage&gt;</code></strong> représente une valeur qui peut être de type {{Cssxref("time")}} ou une valeur qui peut être de type {{Cssxref("percentage")}}.</p>
+Le type de donnée **`<time-percentage>`** représente une valeur qui peut être de type {{Cssxref("time")}} ou une valeur qui peut être de type {{Cssxref("percentage")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Se référer à la documentation des types {{Cssxref("time")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles pour chacun de ces types.</p>
+Se référer à la documentation des types {{Cssxref("time")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles pour chacun de ces types.
 
-<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+## Utilisation avec `calc()`
 
-<p>Lorsqu'une valeur de type <code>&lt;time-percentage&gt;</code> est autorisée dans une déclaration, cela signifie que le pourcentage sera résolu comme un temps et qu'il peut donc être utilisée dans une expression {{Cssxref("calc()")}}.</p>
+Lorsqu'une valeur de type `<time-percentage>` est autorisée dans une déclaration, cela signifie que le pourcentage sera résolu comme un temps et qu'il peut donc être utilisée dans une expression {{Cssxref("calc()")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;time-percentage&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;time-percentage&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Définition du type <code>&lt;time-percentage&gt;</code>. Ajout de <code>calc()</code></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                             | Commentaires                                              |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------- |
+| {{SpecName('CSS4 Values', '#mixed-percentages', '&lt;time-percentage&gt;')}} | {{Spec2('CSS4 Values')}} |                                                           |
+| {{SpecName('CSS3 Values', '#mixed-percentages', '&lt;time-percentage&gt;')}} | {{Spec2('CSS3 Values')}} | Définition du type `<time-percentage>`. Ajout de `calc()` |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.types.time-percentage")}}</p>
+{{Compat("css.types.time-percentage")}}
diff --git a/files/fr/web/css/time/index.md b/files/fr/web/css/time/index.md
index 79b98d327e..c60d751bfc 100644
--- a/files/fr/web/css/time/index.md
+++ b/files/fr/web/css/time/index.md
@@ -7,75 +7,54 @@ tags:
   - Type
 translation_of: Web/CSS/time
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée <strong><code>&lt;time&gt;</code></strong> indique des durées exprimées en secondes ou en millisecondes. Il est par exemple utilisé dans les propriétés {{cssxref("animation")}}, {{cssxref("transition")}}.</p>
+Le type de donnée **`<time>`** indique des durées exprimées en secondes ou en millisecondes. Il est par exemple utilisé dans les propriétés {{cssxref("animation")}}, {{cssxref("transition")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Une valeur temporelle consiste en une valeur de type {{cssxref("&lt;number&gt;")}} immédiatement suivie d'une unité. Comme avec les autres unités CSS, il n'y a pas d'espace entre l'unité et le nombre. La valeur peut éventuellement être précédée d'un signe <code>+</code> ou <code>-</code>.</p>
+Une valeur temporelle consiste en une valeur de type {{cssxref("&lt;number&gt;")}} immédiatement suivie d'une unité. Comme avec les autres unités CSS, il n'y a pas d'espace entre l'unité et le nombre. La valeur peut éventuellement être précédée d'un signe `+` ou `-`.
 
-<p>Même si toutes les unités représentent le même temps pour la valeur <code>0</code>, l'unité ne doit pas être omises, car il ne s'agit pas d'une {{cssxref("&lt;length&gt;")}} : <code>0</code> n'est pas valide et ne représente pas <code>0s</code>, <code>0ms</code>.</p>
+Même si toutes les unités représentent le même temps pour la valeur `0`, l'unité ne doit pas être omises, car il ne s'agit pas d'une {{cssxref("&lt;length&gt;")}} : `0` n'est pas valide et ne représente pas `0s`, `0ms`.
 
-<h3 id="Unités">Unités</h3>
+### Unités
 
-<dl>
- <dt><code>s</code></dt>
- <dd>Cette unité permet d'exprimer le temps en secondes. Par exemple : <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd>
- <dt><code>ms</code></dt>
- <dd>Cette unité permet d'exprimer le temps en millisecondes. Par exemple : <code>0ms</code>, <code>1500ms</code>, <code>-6000ms</code>.</dd>
-</dl>
+- `s`
+  - : Cette unité permet d'exprimer le temps en secondes. Par exemple : `0s`, `1.5s`, `-60s`.
+- `ms`
+  - : Cette unité permet d'exprimer le temps en millisecondes. Par exemple : `0ms`, `1500ms`, `-6000ms`.
 
-<p>La conversion entre <code>s</code> et <code>ms</code> suit la logique suivante : <code>1s = 1000ms</code>.</p>
+La conversion entre `s` et `ms` suit la logique suivante : `1s = 1000ms`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Valeurs_valides">Valeurs valides</h3>
+### Valeurs valides
 
-<pre class="brush: css example-good">12s         Nombre entier positif
+```css example-good
+12s         Nombre entier positif
 -456ms      Nombre entier négatif
 4.3ms       Nombre décimal
 14mS        L'unité n'est pas sensible à la casse, cependant les majuscules sont déconseillées pour s et ms.
 +0s         Zero, précédé d'un + et suivi de son unité.
 -0ms        Zero, précédé d'un - et suivi de son unité (bien qu'étrange, ceci est autorisé).
-</pre>
+```
 
-<h3 id="Valeurs_invalides">Valeurs invalides</h3>
+### Valeurs invalides
 
-<pre class="brush: css example-bad">0           Bien qu'un zéro sans unité soit autorisé pour les longueurs, ceci n'est pas valide avec les autres dimensions.
+```css example-bad
+0           Bien qu'un zéro sans unité soit autorisé pour les longueurs, ceci n'est pas valide avec les autres dimensions.
 12.0        Il s'agit d'un nombre, pas d'un temps, l'unité est obligatoire.
 7 ms        Aucun espace n'est autorisé entre le nombre et l'unité.
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values','#time','&lt;time&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values','#time','&lt;time&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Définition normative de <code>s</code> et <code>ms</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1','aural.html#times','&lt;time&gt;')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition informelle de <code>s</code> et <code>ms</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.time")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                | État                             | Commentaires                         |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------------------------ |
+| {{SpecName('CSS4 Values','#time','&lt;time&gt;')}}         | {{Spec2('CSS4 Values')}} |                                      |
+| {{SpecName('CSS3 Values','#time','&lt;time&gt;')}}         | {{Spec2('CSS3 Values')}} | Définition normative de `s` et `ms`  |
+| {{SpecName('CSS2.1','aural.html#times','&lt;time&gt;')}} | {{Spec2('CSS2.1')}}         | Définition informelle de `s` et `ms` |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.time")}}
diff --git a/files/fr/web/css/tools/linear-gradient_generator/index.md b/files/fr/web/css/tools/linear-gradient_generator/index.md
index e8206cae93..84ba0c0d6c 100644
--- a/files/fr/web/css/tools/linear-gradient_generator/index.md
+++ b/files/fr/web/css/tools/linear-gradient_generator/index.md
@@ -7,8 +7,6 @@ tags:
 translation_of: Web/CSS/Tools/Linear-gradient_Generator
 original_slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires
 ---
-<p>{{Draft}}</p>
+{{Draft}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.</p>
-</div>
+> **Note :** Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.
diff --git a/files/fr/web/css/top/index.md b/files/fr/web/css/top/index.md
index c07040d0aa..ed3aa1d772 100644
--- a/files/fr/web/css/top/index.md
+++ b/files/fr/web/css/top/index.md
@@ -8,33 +8,32 @@ tags:
   - Reference
 translation_of: Web/CSS/top
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>top</code></strong> définit une partie de la position des éléments positionnés, elle n'a aucun effet pour les éléments non-positionnés.</p>
+La propriété **`top`** définit une partie de la position des éléments positionnés, elle n'a aucun effet pour les éléments non-positionnés.
 
-<div>{{EmbedInteractiveExample("pages/css/top.html")}}</div>
+{{EmbedInteractiveExample("pages/css/top.html")}}
 
-<p>L'effet de la propriété <code>top</code> dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété {{cssxref("position")}}) :</p>
+L'effet de la propriété `top` dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété {{cssxref("position")}}) :
 
-<ul>
- <li>Pour les éléments qui sont positionnés de manière absolue ({{cssxref("position")}}<code>: absolute</code> ou {{cssxref("position")}}<code>: fixed</code>), cette propriété définit la distance entre le bord haut de la marge (<em>margin</em>) de l'élément et le bord haut du bloc englobant (il faut que le bloc englobant ait <code>position: relative</code>).</li>
- <li>Lorsque <code>position</code> vaut <code>relative</code>, cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.</li>
- <li>Lorsque <code>position</code> vaut <code>sticky</code>, la propriété <code>top</code> se comporte comme avec <code>relative</code> lorsque l'élément se situe à l'intérieur de la zone d'affichage (<em>viewport</em>) et elle se comporte comme <code>fixed</code> lorsque l'élément est à l'extérieur de la zone d'affichage.</li>
- <li>Lorsque <code>position</code> vaut <code>static</code>, la propriété <code>top</code> n'a aucun effet.</li>
-</ul>
+- Pour les éléments qui sont positionnés de manière absolue ({{cssxref("position")}}`: absolute` ou {{cssxref("position")}}`: fixed`), cette propriété définit la distance entre le bord haut de la marge (_margin_) de l'élément et le bord haut du bloc englobant (il faut que le bloc englobant ait `position: relative`).
+- Lorsque `position` vaut `relative`, cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.
+- Lorsque `position` vaut `sticky`, la propriété `top` se comporte comme avec `relative` lorsque l'élément se situe à l'intérieur de la zone d'affichage (_viewport_) et elle se comporte comme `fixed` lorsque l'élément est à l'extérieur de la zone d'affichage.
+- Lorsque `position` vaut `static`, la propriété `top` n'a aucun effet.
 
-<p>Lorsque <code>top</code> et {{cssxref("bottom")}} sont utilisés tous les deux, tant que {{cssxref("height")}} n'est pas définie ou ne vaut pas <code>auto</code> ou <code>100%</code>, les distances introduites par <code>top</code> et {{cssxref("bottom")}} seront respectées. Sinon, si {{cssxref("height")}} est contrainte d'une certaine façon, la propriété <code>top</code> prendra le pas sur {{cssxref("bottom")}} qui sera ignorée.</p>
+Lorsque `top` et {{cssxref("bottom")}} sont utilisés tous les deux, tant que {{cssxref("height")}} n'est pas définie ou ne vaut pas `auto` ou `100%`, les distances introduites par `top` et {{cssxref("bottom")}} seront respectées. Sinon, si {{cssxref("height")}} est contrainte d'une certaine façon, la propriété `top` prendra le pas sur {{cssxref("bottom")}} qui sera ignorée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeur de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeur de longueur */
+/* Type <length> */
 top: 3px;
 top: 2.4em;
 
 /* Valeur en pourcentages */
 /* Relative à la hauteur du bloc englobant */
-/* Type &lt;percentages&gt; */
+/* Type <percentages> */
 top: 10%;
 
 /* Avec un mot-clé */
@@ -44,48 +43,48 @@ top: auto;
 top: inherit;
 top: initial;
 top: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur négative, nulle ou positive du type {{cssxref("&lt;length&gt;")}} qui représente :
- <ul>
-  <li>La distance depuis le bord haut du bloc englobant pour les <em>éléments positionnés de façon absolue</em></li>
-  <li>Le décalage avec lequel l'élément est déplacé vers le bas (relativement à sa position normale) pour <em>les éléments positionnés de façon relative</em>.</li>
- </ul>
- </dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur du type {{cssxref("&lt;percentage&gt;")}} qui est relative à la hauteur du bloc englobant.</dd>
- <dt><code>auto</code></dt>
- <dd>Un mot-clé qui représente :
- <ul>
-  <li>Pour les éléments positionnés de façon absolue, la position de l'élément en fonction de la propriété {{cssxref("bottom")}} et qui traite <code>height: auto</code> comme une hauteur basée sur le contenu. Si <code>bottom</code>vaut également <code>auto</code>, l'élément est positionné verticalement comme s'il avait été un élément statique.</li>
-  <li>Pour les éléments positionnés de façon relative, le décalage de l'élément par rapport à sa position originale, basée sur la propriété {{cssxref("bottom")}}. Si <code>bottom</code> vaut également <code>auto</code>, aucun décalage n'est appliqué.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `<length>`
+
+  - : Une valeur négative, nulle ou positive du type {{cssxref("&lt;length&gt;")}} qui représente :
+
+    - La distance depuis le bord haut du bloc englobant pour les _éléments positionnés de façon absolue_
+    - Le décalage avec lequel l'élément est déplacé vers le bas (relativement à sa position normale) pour _les éléments positionnés de façon relative_.
+
+- `<percentage>`
+  - : Une valeur du type {{cssxref("&lt;percentage&gt;")}} qui est relative à la hauteur du bloc englobant.
+- `auto`
+
+  - : Un mot-clé qui représente :
+
+    - Pour les éléments positionnés de façon absolue, la position de l'élément en fonction de la propriété {{cssxref("bottom")}} et qui traite `height: auto` comme une hauteur basée sur le contenu. Si `bottom`vaut également `auto`, l'élément est positionné verticalement comme s'il avait été un élément statique.
+    - Pour les éléments positionnés de façon relative, le décalage de l'élément par rapport à sa position originale, basée sur la propriété {{cssxref("bottom")}}. Si `bottom` vaut également `auto`, aucun décalage n'est appliqué.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Positionnement_relatif">Positionnement relatif</h3>
+### Positionnement relatif
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
-  &lt;p class="relatif"&gt;Lorem ipsum et tralala relatif&lt;/p&gt;
-  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <p>Lorem ipsum et tralala normal</p>
+  <p class="relatif">Lorem ipsum et tralala relatif</p>
+  <p>Lorem ipsum et tralala normal</p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   border: 2px black dashed;
 }
 
@@ -94,26 +93,28 @@ p.relatif {
   top: 5em;
   border: 2px black solid
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Positionnement_relatif","100%","200")}}</p>
+{{EmbedLiveSample("Positionnement_relatif","100%","200")}}
 
-<h3 id="Positionnement_absolu">Positionnement absolu</h3>
+### Positionnement absolu
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
-  &lt;p class="absolu"&gt;Lorem ipsum et tralala absolu&lt;/p&gt;
-  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p>Lorem ipsum et tralala normal</p>
+  <p class="absolu">Lorem ipsum et tralala absolu</p>
+  <p>Lorem ipsum et tralala normal</p>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   border: 2px black dashed;
 }
 
@@ -121,54 +122,32 @@ p.absolu {
   position: absolute;
   top: 5em;
   border: 2px black solid;
-}</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Positionnement_absolu","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>top</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Positioning', '#propdef-top', 'top')}}</td>
-   <td>{{Spec2('CSS3 Positioning')}}</td>
-   <td>Description du comportement pour le positionnement adhérent (<em>sticky</em>)</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.top")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("position")}}</li>
- <li>{{cssxref("bottom")}}</li>
- <li>{{cssxref("height")}}</li>
- <li>{{cssxref("left")}}</li>
- <li>{{cssxref("right")}}</li>
- <li><a href="/fr/Apprendre/CSS/Les_bases/La_disposition#Le_positionnement">Les bases de CSS : la disposition et le positionnement</a></li>
-</ul>
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Positionnement_absolu","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                | État                                     | Commentaires                                                           |
+| ---------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'top')}} | {{Spec2('CSS3 Transitions')}} | `top` peut désormais être animée.                                      |
+| {{SpecName('CSS3 Positioning', '#propdef-top', 'top')}}     | {{Spec2('CSS3 Positioning')}} | Description du comportement pour le positionnement adhérent (_sticky_) |
+| {{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                   |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.top")}}
+
+## Voir aussi
+
+- {{cssxref("position")}}
+- {{cssxref("bottom")}}
+- {{cssxref("height")}}
+- {{cssxref("left")}}
+- {{cssxref("right")}}
+- [Les bases de CSS : la disposition et le positionnement](/fr/Apprendre/CSS/Les_bases/La_disposition#Le_positionnement)
diff --git a/files/fr/web/css/touch-action/index.md b/files/fr/web/css/touch-action/index.md
index bd126a4d85..40233d3923 100644
--- a/files/fr/web/css/touch-action/index.md
+++ b/files/fr/web/css/touch-action/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/touch-action
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>touch-action</code></strong> définit si une région donnée peut être manipulée par l'utilisateur grâce à des interactions tactiles (en déplaçant ou en zoomant) et comment cette interaction fonctionnera.</p>
+La propriété **`touch-action`** définit si une région donnée peut être manipulée par l'utilisateur grâce à des interactions tactiles (en déplaçant ou en zoomant) et comment cette interaction fonctionnera.
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 touch-action: auto;
 touch-action: none;
 touch-action: pan-x;
@@ -27,132 +28,101 @@ touch-action: manipulation;
 touch-action: inherit;
 touch-action: initial;
 touch-action: unset;
-</pre>
+```
 
-<p>Par défaut, le déplacement et le zoom sont exclusivement gérés par le navigateur, ce qui déclenche un évènement {{event("pointercancel")}} à destination de l'application. En désactivant la prise en charge de ces gestes, l'application peut alors fournir ses propres gestionnaires d'évènements pour {{event("pointermove")}}, {{event("pointerup")}}.</p>
+Par défaut, le déplacement et le zoom sont exclusivement gérés par le navigateur, ce qui déclenche un évènement {{event("pointercancel")}} à destination de l'application. En désactivant la prise en charge de ces gestes, l'application peut alors fournir ses propres gestionnaires d'évènements pour {{event("pointermove")}}, {{event("pointerup")}}.
 
-<p>On utilise parfois cette propriété pour désactiver les interactions tactiles sur un élément pour un jeu ou une carte qui fournissent leur propre gestion tactile.</p>
+On utilise parfois cette propriété pour désactiver les interactions tactiles sur un élément pour un jeu ou une carte qui fournissent leur propre gestion tactile.
 
-<p>Lorsqu'une interaction tactile a lieu, le navigateur inspecte les valeurs de <code>touch-action</code> pour l'élément et ses ancêtres jusqu'à atteindre l'élément qui implémente le geste (c'est-à-dire celui qui peut défiler/zoomer). En pratique, <code>touch-action</code> est généralement uniquement appliquée aux éléments de plus haut niveau ayant besoin d'un comportement spécifique. Il n'est pas nécessaire de redéfinir <code>touch-action</code> sur les descendants.</p>
+Lorsqu'une interaction tactile a lieu, le navigateur inspecte les valeurs de `touch-action` pour l'élément et ses ancêtres jusqu'à atteindre l'élément qui implémente le geste (c'est-à-dire celui qui peut défiler/zoomer). En pratique, `touch-action` est généralement uniquement appliquée aux éléments de plus haut niveau ayant besoin d'un comportement spécifique. Il n'est pas nécessaire de redéfinir `touch-action` sur les descendants.
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'un geste est déjà initié, tout changement sur <code>touch-action</code> n'aura aucun impact sur le geste en cours.</p>
-</div>
+> **Note :** Lorsqu'un geste est déjà initié, tout changement sur `touch-action` n'aura aucun impact sur le geste en cours.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>touch-action</code> peut être définie grâce à :</p>
+La propriété `touch-action` peut être définie grâce à :
 
-<ul>
- <li>l'un des mots-clés parmi <code><a href="#auto">auto</a></code>, <code><a href="#none">none</a></code>, <code><a href="#manipulation">manipulation</a></code><em> ou</em></li>
- <li>un mot-clé parmi <code><a href="#pan-x">pan-x</a></code>, <code><a href="#pan-keywords">pan-left</a></code>, <code><a href="#pan-keywords">pan-right</a></code>, et/ou un mot-clé parmi <code><a href="#pan-y">pan-y</a></code>, <code><a href="#pan-keywords">pan-up</a></code>, <code><a href="#pan-keywords">pan-down</a></code> et éventuellement le mot-clé <code><a href="#">pinch-zoom</a></code>.</li>
-</ul>
+- l'un des mots-clés parmi [`auto`](#auto), [`none`](#none), [`manipulation`](#manipulation) _ou_
+- un mot-clé parmi [`pan-x`](#pan-x), [`pan-left`](#pan-keywords), [`pan-right`](#pan-keywords), et/ou un mot-clé parmi [`pan-y`](#pan-y), [`pan-up`](#pan-keywords), [`pan-down`](#pan-keywords) et éventuellement le mot-clé [`pinch-zoom`](#).
+
+### Valeurs
+
+- `auto`
+  - : L'agent utilisateur détermine les interactions tactiles possibles (zoomer, déplacer le viewport) lorsque l'élément est touché.
+- `manipulation`
+  - : Les gestes de déplacement et de zoom sont autorisés mais les gestes non-standards (ex. double touche pour zoomer) sont désactivés. Cette valeur est un alias pour `pan-x pan-y pinch-zoom`.
+- `none`
+  - : Cette valeur désactive tous les comportements par défaut et permet au contenu de gérer les interaction tactiles (les touches qui commencent sur l'élément ne doivent pas déclencher de comportements tactiles par défaut).
+- `pan-x`
+  - : L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler horizontalement le plus proche ancêtre de l'élément qui possède du contenu en défilement horizontal. Cette valeur peut être combinée avec `pan-y`, `pan-up`, `pan-down` et/ou `pinch-zoom`.
+- `pan-y`
+  - : L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler verticalement le plus proche ancêtre de l'élément qui possède du contenu en défilement vertical. Cette valeur peut être combinée avec `pan-x`, `pan-left`, `pan-right` et/ou `pinch-zoom`.
+- `pan-left`, `pan-right` {{experimental_inline}}
+  - : L'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler horizontalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (_scrollable_) horizontalement.
+- `pan-up`, `pan-down` {{experimental_inline}}
+  - : L'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler verticalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (_scrollable_) verticalement.
+- `pinch-zoom`
+  - : L'agent utilisateur peut considérer que les touches qui commencent sur l'élément n'ont pour but que de zoomer sur l'ancêtre le plus proche qui contient du contenu sur lequel on peut zoomer.
 
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>L'agent utilisateur détermine les interactions tactiles possibles (zoomer, déplacer le viewport) lorsque l'élément est touché.</dd>
- <dt><code>manipulation</code></dt>
- <dd>Les gestes de déplacement et de zoom sont autorisés mais les gestes non-standards (ex. double touche pour zoomer) sont désactivés. Cette valeur est un alias pour <code>pan-x pan-y pinch-zoom</code>.</dd>
- <dt><code>none</code></dt>
- <dd>Cette valeur désactive tous les comportements par défaut et permet au contenu de gérer les interaction tactiles (les touches qui commencent sur l'élément ne doivent pas déclencher de comportements tactiles par défaut).</dd>
- <dt><code>pan-x</code></dt>
- <dd>L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler horizontalement le plus proche ancêtre de l'élément qui possède du contenu en défilement horizontal. Cette valeur peut être combinée avec <code>pan-y</code>, <code>pan-up</code>, <code>pan-down</code> et/ou <code>pinch-zoom</code>.</dd>
- <dt><code>pan-y</code></dt>
- <dd>L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler verticalement le plus proche ancêtre de l'élément qui possède du contenu en défilement vertical. Cette valeur peut être combinée avec <code>pan-x</code>, <code>pan-left</code>, <code>pan-right</code> et/ou <code>pinch-zoom</code>.</dd>
- <dt><code>pan-left</code>, <code>pan-right</code> {{experimental_inline}}</dt>
- <dd>L'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler horizontalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (<em>scrollable</em>) horizontalement.</dd>
- <dt><code>pan-up</code>, <code>pan-down</code> {{experimental_inline}}</dt>
- <dd>L'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler verticalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (<em>scrollable</em>) verticalement.</dd>
- <dt><code>pinch-zoom</code></dt>
- <dd>L'agent utilisateur peut considérer que les touches qui commencent sur l'élément n'ont pour but que de zoomer sur l'ancêtre le plus proche qui contient du contenu sur lequel on peut zoomer.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul&gt;Ma list
-  &lt;li&gt;UnLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll&lt;/li&gt;
-  &lt;li&gt;UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<ul>Ma list
+  <li>UnLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll</li>
+  <li>UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll</li>
+</ul>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">ul {
+```css
+ul {
   width: 200px;
   height: 50px;
   overflow-x: scroll;
 }
 
-ul &gt; li {
+ul > li {
   touch-action: pan-x pinch-zoom;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>touch-action</code> est également utilisée afin de supprimer le délai donné à l'évènement {{event("click")}} pour prendre en charge le zoom via la double-touche.</p>
-</div>
+> **Note :** La propriété `touch-action` est également utilisée afin de supprimer le délai donné à l'évènement {{event("click")}} pour prendre en charge le zoom via la double-touche.
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Une déclaration <code>touch action: none;</code> empêchera le navigateur de zoomer. Cela peut empêcher les personnes à faible vision de lire et de comprendre le contenu de la page.</p>
+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.
 
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 - Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html"> (en anglais)</a></li>
-</ul>
+- [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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)_[ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#touch-action', 'touch-action')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>Ajout de la valeur <code>pinch-zoom</code> pour la propriété.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Events 2 Ext', '#additional-touch-action-values', 'touch-action')}}</td>
-   <td>{{Spec2('Pointer Events 2 Ext')}}</td>
-   <td>Ajout des valeurs <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> pour la propriété.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td>
-   <td>{{Spec2('Pointer Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{compat("css.properties.touch-action")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Pointer_events">Les événements de pointage</a></li>
- <li>Un billet du blog WebKit : <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/">une gestion plus responsive du toucher sur iOS (en anglais)</a></li>
- <li><a href="*https://developers.google.com/web/updates/2017/01/scrolling-intervention">Rendre le défilement tactile rapide, par défaut sur le Google Developers Blog</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap">Le module de spécification CSS Scroll Snap</a></li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                                        | État                                         | Commentaires                                                                       |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
+| {{SpecName('Compat', '#touch-action', 'touch-action')}}                                             | {{Spec2('Compat')}}                     | Ajout de la valeur `pinch-zoom` pour la propriété.                                 |
+| {{SpecName('Pointer Events 2 Ext', '#additional-touch-action-values', 'touch-action')}} | {{Spec2('Pointer Events 2 Ext')}} | Ajout des valeurs `pan-left`, `pan-right`, `pan-up`, `pan-down` pour la propriété. |
+| {{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}         | {{Spec2('Pointer Events')}}         | Définition initiale.                                                               |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{compat("css.properties.touch-action")}}
+
+## Voir aussi
+
+- [Les événements de pointage](/fr/docs/Web/API/Pointer_events)
+- Un billet du blog WebKit : [une gestion plus responsive du toucher sur iOS (en anglais)](https://webkit.org/blog/5610/more-responsive-tapping-on-ios/)
+- [Rendre le défilement tactile rapide, par défaut sur le Google Developers Blog](*https://developers.google.com/web/updates/2017/01/scrolling-intervention)
+- [Le module de spécification CSS Scroll Snap](/fr/docs/Web/CSS/CSS_Scroll_Snap)
diff --git a/files/fr/web/css/transform-box/index.md b/files/fr/web/css/transform-box/index.md
index a36d5b32c5..5215fbbe7b 100644
--- a/files/fr/web/css/transform-box/index.md
+++ b/files/fr/web/css/transform-box/index.md
@@ -9,11 +9,12 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-box
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>transform-box</code></strong> définit la boîte à laquelle les propriétés {{cssxref("transform")}} et {{cssxref("transform-origin")}} font référence.</p>
+La propriété **`transform-box`** définit la boîte à laquelle les propriétés {{cssxref("transform")}} et {{cssxref("transform-origin")}} font référence.
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 transform-box: border-box;
 transform-box: fill-box;
 transform-box: view-box;
@@ -22,38 +23,39 @@ transform-box: view-box;
 transform-box: inherit;
 transform-box: initial;
 transform-box: unset;
-</pre>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>transform-box</code> est définie grâce à l'un des mots-clés suivants.</p>
+La propriété `transform-box` est définie grâce à l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>border-box</code></dt>
- <dd>La boîte de bordure (<em>border</em>) est utilisée comme boîte de référence. La boîte de référence d'un tableau est la boîte de bordure englobante (celle qui inclue les éventuelles légendes ou titres rattachés au tableau) et non uniquement celle autour du tableau.</dd>
- <dt><code>fill-box</code></dt>
- <dd>La boîte liée à l'objet est utilisée comme boîte de référence.</dd>
- <dt><code>view-box</code></dt>
- <dd>Le plus proche <em>viewport</em> {{Glossary("SVG")}} est utilisé comme boîte de référence. Si l'attribut {{SVGAttr("viewBox")}} est défini pour le <em>viewport</em> de l'élément, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut <code>viewBox</code> et les dimensions de la boîte de référence sont définies avec les valeurs de hauteur et largeur de l'attribut <code>viewBox</code>.</dd>
-</dl>
+- `border-box`
+  - : La boîte de bordure (_border_) est utilisée comme boîte de référence. La boîte de référence d'un tableau est la boîte de bordure englobante (celle qui inclue les éventuelles légendes ou titres rattachés au tableau) et non uniquement celle autour du tableau.
+- `fill-box`
+  - : La boîte liée à l'objet est utilisée comme boîte de référence.
+- `view-box`
+  - : Le plus proche _viewport_ {{Glossary("SVG")}} est utilisé comme boîte de référence. Si l'attribut {{SVGAttr("viewBox")}} est défini pour le _viewport_ de l'élément, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîte de référence sont définies avec les valeurs de hauteur et largeur de l'attribut `viewBox`.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="premier"&gt;"I saw Mr. Hyde"&lt;/p&gt;
+```html
+<p class="premier">"I saw Mr. Hyde"</p>
 
-&lt;p class="deuxieme"&gt;"Quite right, Mr. Utterson"&lt;/p&gt;</pre>
+<p class="deuxieme">"Quite right, Mr. Utterson"</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   transform: rotate(90deg);
   transform-origin: bottom left;
   transform-box: border-box;
@@ -66,41 +68,27 @@ transform-box: unset;
 .deuxieme {
   border: 3px black solid;
   padding: 3em;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemple","100%","300")}}</p>
+{{EmbedLiveSample("Exemple","100%","300")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transforms', '#transform-box', 'transform-box')}}</td>
-   <td>{{Spec2('CSS3 Transforms')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                               | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Transforms', '#transform-box', 'transform-box')}} | {{Spec2('CSS3 Transforms')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.transform-box")}}</p>
+{{Compat("css.properties.transform-box")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("transform-origin")}}</li>
-</ul>
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS)
+- {{cssxref("transform")}}
+- {{cssxref("transform-origin")}}
diff --git a/files/fr/web/css/transform-function/index.md b/files/fr/web/css/transform-function/index.md
index edcbd6edd3..c82da2eb3b 100644
--- a/files/fr/web/css/transform-function/index.md
+++ b/files/fr/web/css/transform-function/index.md
@@ -7,142 +7,111 @@ tags:
   - Type de donnée
 translation_of: Web/CSS/transform-function
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée <strong><code>&lt;transform-function&gt;</code></strong> représente une fonction qui, lorsqu'elle est appliquée à un élément, permet de modifier sa représentation géométrique. Ces transformations sont généralement exprimées sous forme de matrices et l'image obtenue peut être déterminée en appliquant la matrice de la transformation sur chaque point de l'image. On peut ainsi tourner, redimensionner, distordre. Ce type de donnée est utilisé avec la propriété {{cssxref("transform")}}.</p>
+Le type de donnée **`<transform-function>`** représente une fonction qui, lorsqu'elle est appliquée à un élément, permet de modifier sa représentation géométrique. Ces transformations sont généralement exprimées sous forme de matrices et l'image obtenue peut être déterminée en appliquant la matrice de la transformation sur chaque point de l'image. On peut ainsi tourner, redimensionner, distordre. Ce type de donnée est utilisé avec la propriété {{cssxref("transform")}}.
 
-<h2 id="Coordonnées_en_deux_dimensions">Coordonnées en deux dimensions</h2>
+## Coordonnées en deux dimensions
 
-<p>Il existe plusieurs modèles de repères géométriques permettant de décrire des transformations. Le repère utilisé le plus communément est <a href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>.</p>
+Il existe plusieurs modèles de repères géométriques permettant de décrire des transformations. Le repère utilisé le plus communément est [le système cartésien](https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes).
 
-<h3 id="Le_système_de_coordonnées_cartésiennes">Le système de coordonnées cartésiennes</h3>
+### Le système de coordonnées cartésiennes
 
-<p><img src="coord_in_r2.png"></p>
+![](coord_in_r2.png)
 
-<p>Pour <a href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>, chaque point de l'espace est décrit avec deux valeurs, l'abscisse et l'ordonnée. L'origine du repère <code>(0, 0)</code> correspond au coin supérieur gauche de l'élément. À la différence des conventions usuelles, l'axe verticale (<em>y</em>) se dirige vers le bas. Chaque point est décrit avec la notation <code>(x,y)</code>.</p>
+Pour [le système cartésien](https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes), chaque point de l'espace est décrit avec deux valeurs, l'abscisse et l'ordonnée. L'origine du repère `(0, 0)` correspond au coin supérieur gauche de l'élément. À la différence des conventions usuelles, l'axe verticale (_y_) se dirige vers le bas. Chaque point est décrit avec la notation `(x,y)`.
 
-<p>Chaque fonction linéaire est décrite avec une matrice 2 x 2 :</p>
+Chaque fonction linéaire est décrite avec une matrice 2 x 2 :
 
-<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+<math><mfenced><mtable><mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr></mtable></mfenced></math>
 
-<p>L'application d'une transformation consiste à multiplier la matrice de transformation au vecteur de coordonnées <code>(x,y)</code> :</p>
+L'application d'une transformation consiste à multiplier la matrice de transformation au vecteur de coordonnées `(x,y)` :
 
-<p><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p>
+<math><mfenced><mtable><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable></mfenced><mfenced><mtable><mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable></mfenced><mo>=</mo> <mfenced><mtable><mtr><mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr><mtr><mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd></mtr></mtable></mfenced></math>
 
-<p>On peut appliquer plusieurs transformations les unes à la suite des autres :</p>
-
-<p><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p>
-
-<p>En utilisant cette notation, on peut décrire et enchaîner (ou composer) la plupart des transformations : des rotations, des homothéties et des distorsions. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche. Une transformation qui n'est pas linéaire ne pourra pas être représentée par cet outil. Ainsi, l'opération de translation ne pourra pas être représentée par une matrice et devra être gérée à part.</p>
-
-<p><a href="https://fr.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Les coordonnées homogènes de Möbius</a> utilisées en <a href="https://fr.wikipedia.org/wiki/G%C3%A9om%C3%A9trie_projective">géométrie projective</a> permettent d'obtenir des matrices de transformations 3x3. Bien que plus complexe et moins usitées, celles-ci permettent de représenter les translations car ces dernières correspondent à des fonctions linéaires pour cette algèbre.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Plusieurs fonctions sont disponibles en CSS pour décrire des transformations. Chacune des fonctions qui suivent applique une opération géométrique, en 2D ou en 3D.</p>
+On peut appliquer plusieurs transformations les unes à la suite des autres :
 
-<h3 id="Matrices_de_transformation">Matrices de transformation</h3>
+<math><mfenced><mtable><mtr><mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr><mtr><mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr></mtable></mfenced><mfenced><mtable><mtr><mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr><mtr><mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr></mtable></mfenced><mo>=</mo> <mfenced><mtable><mtr><mtd><msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd><mtd><msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd></mtr><mtr><mtd><msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd><mtd><msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub></mtd></mtr></mtable></mfenced></math>
 
-<dl>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix()">matrix()</a></code></dt>
- <dd>La fonction <code>matrix()</code> permet de définir une matrice de transformation homogène en deux dimensions. Cette matrice contient six coefficients. Les valeurs constantes de ces matrices sont implicites et ne font donc pas partie des paramètres. Les autres paramètres sont décrits dans l'ordre des colonnes. <code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie pour <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d()">matrix3d()</a></code></dt>
- <dd>La fonction <code>matrix3d()</code> permet de définir une transformation en trois dimensions grâce à une matrice homogène 4x4. Les 16 paramètres sont décrits dans l'ordre des colonnes.</dd>
-</dl>
+En utilisant cette notation, on peut décrire et enchaîner (ou composer) la plupart des transformations : des rotations, des homothéties et des distorsions. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche. Une transformation qui n'est pas linéaire ne pourra pas être représentée par cet outil. Ainsi, l'opération de translation ne pourra pas être représentée par une matrice et devra être gérée à part.
 
-<h3 id="Perspective">Perspective</h3>
+[Les coordonnées homogènes de Möbius](https://fr.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius) utilisées en [géométrie projective](https://fr.wikipedia.org/wiki/G%C3%A9om%C3%A9trie_projective) permettent d'obtenir des matrices de transformations 3x3. Bien que plus complexe et moins usitées, celles-ci permettent de représenter les translations car ces dernières correspondent à des fonctions linéaires pour cette algèbre.
 
-<dl>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/perspective()">perspective()</a></code></dt>
- <dd>La fonction <code>perspective()</code> définit la distance entre le plan de coordonnées z=0 et l'œil de l'utilisateur. Cela permet de placer une perspective en trois dimensions sur l'élément. Chaque élément 3D pour lequel z est supérieur à 0 devient plus grand et chaque élément pour lequel z est négatif devient plus petit.</dd>
-</dl>
+## Syntaxe
 
-<h3 id="Rotation">Rotation</h3>
+Plusieurs fonctions sont disponibles en CSS pour décrire des transformations. Chacune des fonctions qui suivent applique une opération géométrique, en 2D ou en 3D.
 
-<dl>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate()">rotate()</a></code></dt>
- <dd>La fonction <code>rotate()</code> définit une transformation qui déplace l'élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer. La quantité de mouvement est définie par l'angle passé en argument. Si la valeur fournie est positive, le mouvement se fait dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et sinon dans le sens inverse (sens <em>anti-horaire</em>).</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code></dt>
- <dd>La fonction <code>rotate3d()</code> définit une transformation qui déplace l'élément autour d'un axe donné, sans déformer l'élément. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. Contrairement aux rotations en deux dimensions (rotations <em>planes</em>), la composition des rotations en trois dimensions n'est pas commutative (autrement dit, l'ordre dans lequel elles sont appliquées a toute son importance).</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateX()">rotateX()</a></code></dt>
- <dd>La fonction <code>rotateX()</code> définit une transformation qui déplace un élément autour de l'axe des abscisses sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. <code>rotateX(a)</code> est une notation raccourcie pour <code>rotate3D(1, 0, 0, a)</code>.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateY()">rotateY()</a></code></dt>
- <dd>La fonction <code>rotateY()</code> définit une transformation qui déplace un élément autour de l'axe des ordonnées sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. <code>rotateY(a)</code> est une notation raccourcie pour <code>rotate3D(0, 1, 0, a)</code>.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateZ()">rotateZ()</a></code></dt>
- <dd>La fonction <code>rotateZ()</code> définit une transformation qui déplace un élément autour de l'axe Z sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. <code>rotateZ(a)</code> est une notation raccourcie pour <code>rotate3D(0, 0, 1, a)</code>.</dd>
-</dl>
+### Matrices de transformation
 
-<h3 id="Changement_d'échelle">Changement d'échelle</h3>
+- [`matrix()`](</fr/docs/Web/CSS/transform-function/matrix()>)
+  - : La fonction `matrix()` permet de définir une matrice de transformation homogène en deux dimensions. Cette matrice contient six coefficients. Les valeurs constantes de ces matrices sont implicites et ne font donc pas partie des paramètres. Les autres paramètres sont décrits dans l'ordre des colonnes. `matrix(a, b, c, d, tx, ty)` est une notation raccourcie pour `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)`.
+- [`matrix3d()`](</fr/docs/Web/CSS/transform-function/matrix3d()>)
+  - : La fonction `matrix3d()` permet de définir une transformation en trois dimensions grâce à une matrice homogène 4x4. Les 16 paramètres sont décrits dans l'ordre des colonnes.
 
-<dl>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/scale()">scale()</a></code></dt>
- <dd>La fonction <code>scale()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon chacun des deux axes plans. Si les deux coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd>
- <dt><a href="/fr/docs/Web/CSS/transform-function/scale3d()">scale3d()</a></dt>
- <dd>La fonction <code>scale3d()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon les trois axes. Si les trois coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleX()">scaleX()</a></code></dt>
- <dd>La fonction <code>scaleX()</code> modifie l'abscisse de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleX(-1)</code> permet de définir une symétrie axiale qui passe par l'axe vertical de l'origine (définie par la propriété {{cssxref("transform-origin")}}). <code>scaleX(sx)</code> est une notation raccourcie pour <code>scale(sx, 1)</code> ou pour <code>scale3d(sx, 1, 1)</code>.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleY()">scaleY()</a></code></dt>
- <dd>La fonction <code>scaleY()</code> modifie l'ordonnée de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleY(-1)</code> permet de définir une symétrie axiale qui passe par l'axe horizontal de l'origine (définie par la propriété {{cssxref("transform-origin")}}). <code>scaleY(sy)</code> est une notation raccourcie pour <code>scale(1, sy)</code> ou pour <code>scale3d(1, sy, 1)</code>.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></dt>
- <dd>La fonction <code>scaleZ()</code> modifie la côte de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleZ(-1)</code> permet de définir une symétrie axiale qui passe par l'axe Z de l'origine (définie par la propriété {{cssxref("transform-origin")}}). <code>scaleZ(sz)</code> est une notation raccourcie pour <code>scale3d(1, 1, sz)</code>.</dd>
-</dl>
+### Perspective
 
-<h3 id="Distorsions">Distorsions</h3>
+- [`perspective()`](</fr/docs/Web/CSS/transform-function/perspective()>)
+  - : La fonction `perspective()` définit la distance entre le plan de coordonnées z=0 et l'œil de l'utilisateur. Cela permet de placer une perspective en trois dimensions sur l'élément. Chaque élément 3D pour lequel z est supérieur à 0 devient plus grand et chaque élément pour lequel z est négatif devient plus petit.
 
-<dl>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/skew()">skew()</a></code></dt>
- <dd>La fonction <code>skew()</code> permet de décrire une distorsion de l'élément où chaque point est tourné d'un angle dans chaque direction. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewX()">skewX()</a></code></dt>
- <dd>La fonction <code>skewX()</code> permet de distordre un élément dans la direction horizontale. Le résultat est obtenu en augmentant l'abscisse par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewY()">skewY()</a></code></dt>
- <dd>La fonction <code>skewY()</code> permet de distordre un élément dans la direction verticale. Le résultat est obtenu en augmentant l'ordonnée par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
-</dl>
+### Rotation
 
-<h3 id="Translations">Translations</h3>
+- [`rotate()`](</fr/docs/Web/CSS/transform-function/rotate()>)
+  - : La fonction `rotate()` définit une transformation qui déplace l'élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer. La quantité de mouvement est définie par l'angle passé en argument. Si la valeur fournie est positive, le mouvement se fait dans le sens des aiguilles d'une montre (sens _horaire_) et sinon dans le sens inverse (sens _anti-horaire_).
+- [`rotate3d()`](</fr/docs/Web/CSS/transform-function/rotate3d()>)
+  - : La fonction `rotate3d()` définit une transformation qui déplace l'élément autour d'un axe donné, sans déformer l'élément. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens _horaire_) et s'il est négatif, il se fera dans le sens anti-horaire. Contrairement aux rotations en deux dimensions (rotations _planes_), la composition des rotations en trois dimensions n'est pas commutative (autrement dit, l'ordre dans lequel elles sont appliquées a toute son importance).
+- [`rotateX()`](</fr/docs/Web/CSS/transform-function/rotateX()>)
+  - : La fonction `rotateX()` définit une transformation qui déplace un élément autour de l'axe des abscisses sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens _horaire_) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. `rotateX(a)` est une notation raccourcie pour `rotate3D(1, 0, 0, a)`.
+- [`rotateY()`](</fr/docs/Web/CSS/transform-function/rotateY()>)
+  - : La fonction `rotateY()` définit une transformation qui déplace un élément autour de l'axe des ordonnées sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens _horaire_) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. `rotateY(a)` est une notation raccourcie pour `rotate3D(0, 1, 0, a)`.
+- [`rotateZ()`](</fr/docs/Web/CSS/transform-function/rotateZ()>)
+  - : La fonction `rotateZ()` définit une transformation qui déplace un élément autour de l'axe Z sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens _horaire_) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}. `rotateZ(a)` est une notation raccourcie pour `rotate3D(0, 0, 1, a)`.
 
-<dl>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate()">translate()</a></code></dt>
- <dd>La fonction <code>translate()</code> permet de déplacer un élément sur le plan formé par le document. Cette transformation est caractérisée par un vecteur contenant deux coordonnées dont chacune définit la quantité de déplacement horizontale et verticale.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></dt>
- <dd>La fonction <code>translate3d()</code> permet de déplacer un élément dans l'espace en 3D. Cette transformation est caractérisée par un vecteur en 3 dimensions dont les coordonnées définissent les quantités de déplacement respectives aux trois axes.</dd>
- <dt><code><a href="/fr/docs/orphaned/Web/CSS/transform-function/translateX">translateX()</a></code></dt>
- <dd>La fonction <code>translateX()</code> permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement horizontal. <code>translateX(tx)</code>est une notation raccourcie pour ​​​​​​ <code>translate(tx, 0)</code>.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateY()">translateY()</a></code></dt>
- <dd>La fonction <code>translateY()</code> permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement vertical. <code>translateY(ty)</code> est une notation raccourcie pour <code>translate(0, ty)</code>.</dd>
- <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateZ()">translateZ()</a></code></dt>
- <dd>La fonction <code>translateZ()</code> permet de déplacer un élément sur l'axe z de l'espace en 3D. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement. <code>translateZ(tz)</code> est une notation raccourcie pour <code>translate3d(0, 0, tz)</code>.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#transform-functions', '&lt;transform-function&gt;')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Added 3D transform functions.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transforms', '#transform-functions', '&lt;transform-function&gt;')}}</td>
-   <td>{{Spec2('CSS3 Transforms')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.transform-function")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété CSS {{cssxref("transform")}}</li>
-</ul>
+### Changement d'échelle
+
+- [`scale()`](</fr/docs/Web/CSS/transform-function/scale()>)
+  - : La fonction `scale()` modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon chacun des deux axes plans. Si les deux coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.
+- [scale3d()](</fr/docs/Web/CSS/transform-function/scale3d()>)
+  - : La fonction `scale3d()` modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon les trois axes. Si les trois coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.
+- [`scaleX()`](</fr/docs/Web/CSS/transform-function/scaleX()>)
+  - : La fonction `scaleX()` modifie l'abscisse de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. `scaleX(-1)` permet de définir une symétrie axiale qui passe par l'axe vertical de l'origine (définie par la propriété {{cssxref("transform-origin")}}). `scaleX(sx)` est une notation raccourcie pour `scale(sx, 1)` ou pour `scale3d(sx, 1, 1)`.
+- [`scaleY()`](</fr/docs/Web/CSS/transform-function/scaleY()>)
+  - : La fonction `scaleY()` modifie l'ordonnée de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. `scaleY(-1)` permet de définir une symétrie axiale qui passe par l'axe horizontal de l'origine (définie par la propriété {{cssxref("transform-origin")}}). `scaleY(sy)` est une notation raccourcie pour `scale(1, sy)` ou pour `scale3d(1, sy, 1)`.
+- [`scaleZ()`](</fr/docs/Web/CSS/transform-function/scaleZ()>)
+  - : La fonction `scaleZ()` modifie la côte de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. `scaleZ(-1)` permet de définir une symétrie axiale qui passe par l'axe Z de l'origine (définie par la propriété {{cssxref("transform-origin")}}). `scaleZ(sz)` est une notation raccourcie pour `scale3d(1, 1, sz)`.
+
+### Distorsions
+
+- [`skew()`](</fr/docs/Web/CSS/transform-function/skew()>)
+  - : La fonction `skew()` permet de décrire une distorsion de l'élément où chaque point est tourné d'un angle dans chaque direction. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.
+- [`skewX()`](</fr/docs/Web/CSS/transform-function/skewX()>)
+  - : La fonction `skewX()` permet de distordre un élément dans la direction horizontale. Le résultat est obtenu en augmentant l'abscisse par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.
+- [`skewY()`](</fr/docs/Web/CSS/transform-function/skewY()>)
+  - : La fonction `skewY()` permet de distordre un élément dans la direction verticale. Le résultat est obtenu en augmentant l'ordonnée par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.
+
+### Translations
+
+- [`translate()`](</fr/docs/Web/CSS/transform-function/translate()>)
+  - : La fonction `translate()` permet de déplacer un élément sur le plan formé par le document. Cette transformation est caractérisée par un vecteur contenant deux coordonnées dont chacune définit la quantité de déplacement horizontale et verticale.
+- [`translate3d()`](</fr/docs/Web/CSS/transform-function/translate3d()>)
+  - : La fonction `translate3d()` permet de déplacer un élément dans l'espace en 3D. Cette transformation est caractérisée par un vecteur en 3 dimensions dont les coordonnées définissent les quantités de déplacement respectives aux trois axes.
+- [`translateX()`](/fr/docs/orphaned/Web/CSS/transform-function/translateX)
+  - : La fonction `translateX()` permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement horizontal. `translateX(tx)`est une notation raccourcie pour ​​​​​​ `translate(tx, 0)`.
+- [`translateY()`](</fr/docs/Web/CSS/transform-function/translateY()>)
+  - : La fonction `translateY()` permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement vertical. `translateY(ty)` est une notation raccourcie pour `translate(0, ty)`.
+- [`translateZ()`](</fr/docs/Web/CSS/transform-function/translateZ()>)
+  - : La fonction `translateZ()` permet de déplacer un élément sur l'axe z de l'espace en 3D. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement. `translateZ(tz)` est une notation raccourcie pour `translate3d(0, 0, tz)`.
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                     | Commentaires                  |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------- |
+| {{SpecName('CSS Transforms 2', '#transform-functions', '&lt;transform-function&gt;')}} | {{Spec2('CSS Transforms 2')}} | Added 3D transform functions. |
+| {{SpecName('CSS3 Transforms', '#transform-functions', '&lt;transform-function&gt;')}}     | {{Spec2('CSS3 Transforms')}}     | Définition initiale.          |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.transform-function")}}
+
+## Voir aussi
+
+- La propriété CSS {{cssxref("transform")}}
diff --git a/files/fr/web/css/transform-function/matrix()/index.md b/files/fr/web/css/transform-function/matrix()/index.md
index 1de0a89c3c..185bf51864 100644
--- a/files/fr/web/css/transform-function/matrix()/index.md
+++ b/files/fr/web/css/transform-function/matrix()/index.md
@@ -8,62 +8,102 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/matrix()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>matrix()</code></strong> définit une matrice homogène de transformation, définie par 6 coefficients. Les paramètres de cette fonction sont ces coefficients, dans l'ordre des lignes puis des colonnes, suivis des coefficients de translation.</p>
+La fonction **`matrix()`** définit une matrice homogène de transformation, définie par 6 coefficients. Les paramètres de cette fonction sont ces coefficients, dans l'ordre des lignes puis des colonnes, suivis des coefficients de translation.
 
-<p><code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie, équivalente à <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p>
+`matrix(a, b, c, d, tx, ty)` est une notation raccourcie, équivalente à `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>)
-</pre>
+    matrix(a, b, c, d, tx, ty)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>a</code> <code>b</code> <code>c</code> <code>d</code></dt>
- <dd>Les coefficients de la matrice, de type {{cssxref("&lt;number&gt;")}}, qui définissent la transformation linéaire.</dd>
- <dt><code>tx</code> <code>ty</code></dt>
- <dd>Les coefficients de la matrice, de type {{cssxref("&lt;number&gt;")}}, qui définissent la translation à appliquer.</dd>
-</dl>
+- `a` `b` `c` `d`
+  - : Les coefficients de la matrice, de type {{cssxref("&lt;number&gt;")}}, qui définissent la transformation linéaire.
+- `tx` `ty`
+  - : Les coefficients de la matrice, de type {{cssxref("&lt;number&gt;")}}, qui définissent la translation à appliquer.
 
-<div class="note">
-<p><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("&lt;length&gt;")}} pour les coefficients <code>tx</code> et <code>ty</code>.</p>
-</div>
+> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("&lt;length&gt;")}} pour les coefficients `tx` et `ty`.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
-   <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
-  <tr>
-   <td><code>[a b c d tx ty]</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>a</mtd><mtd>c</mtd></mtr>
+              <mtr><mtd>b</mtd><mtd>d</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr
+              ><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr
+              ><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr
+              ><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>[a b c d tx ty]</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -73,40 +113,25 @@ translation_of: Web/CSS/transform-function/matrix()
   transform: matrix(0.87,-0.5,0,0.87,0,1);
   background-color: blue;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+{{EmbedLiveSample("Exemples","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}</td>
-   <td>{{Spec2("CSS3 Transforms")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d()">matrix3d()</a></code></li>
- <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Comprendre les matrices de transformations CSS (en anglais)</a></li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
+- [`matrix3d()`](</fr/docs/Web/CSS/transform-function/matrix3d()>)
+- [Comprendre les matrices de transformations CSS (en anglais)](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/)
diff --git a/files/fr/web/css/transform-function/matrix3d()/index.md b/files/fr/web/css/transform-function/matrix3d()/index.md
index 3090f30633..437115670e 100644
--- a/files/fr/web/css/transform-function/matrix3d()/index.md
+++ b/files/fr/web/css/transform-function/matrix3d()/index.md
@@ -7,57 +7,76 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/matrix3d()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>matrix3d()</code></strong> décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La fonction **`matrix3d()`** décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre>
+    matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><var>a1</var> <var>b1</var> <var>c1</var> <var>d1</var> <var>a2</var> <var>b2</var> <var>c2</var> <var>d2</var> <var>a3</var> <var>b3</var> <var>c3</var> <var>d3</var> <var>d4</var></dt>
- <dd>Des valeurs de type {{cssxref("&lt;number&gt;")}} qui sont les coefficients de la matrice définissant la transformation linéaire.</dd>
- <dt><code>a4</code> <code>b4<em> </em>c4</code></dt>
- <dd>Les coefficients de type {{cssxref("&lt;number&gt;")}} qui définissent la translation à appliquer.</dd>
-</dl>
+- _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ _a3_ _b3_ _c3_ _d3_ _d4_
+  - : Des valeurs de type {{cssxref("&lt;number&gt;")}} qui sont les coefficients de la matrice définissant la transformation linéaire.
+- `a4` `b4 c4`
+  - : Les coefficients de type {{cssxref("&lt;number&gt;")}} qui définissent la translation à appliquer.
 
-<div class="note">
-  <p><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("&lt;length&gt;")}} pour les coefficients <code>a4</code>, <code>b4</code> et <code>c4</code>.</p>
-</div>
+> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("&lt;length&gt;")}} pour les coefficients `a4`, `b4` et `c4`.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
-   <td colspan="1" rowspan="2">Les matrices exprimées avec des coordonnées cartésiennes ne permettent pas de représenter des transformations 3D affines car les translations ne sont pas des transformations linéaires.</td>
-   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" rowspan="2">
+        Cette transformation s'applique dans l'espace (3D) et ne peut pas être
+        représentée en deux dimensions.
+      </td>
+      <td colspan="1" rowspan="2">
+        Les matrices exprimées avec des coordonnées cartésiennes ne permettent
+        pas de représenter des transformations 3D affines car les translations
+        ne sont pas des transformations linéaires.
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr
+              ><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr
+              ><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr
+              ><mtr
+                ><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -67,26 +86,28 @@ translation_of: Web/CSS/transform-function/matrix3d()
   transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1);
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple","100%","200")}}</p>
+{{EmbedLiveSample("Exemple_simple","100%","200")}}
 
-<h3 id="Translation_et_homothétie_matricielle">Translation et homothétie matricielle</h3>
+### Translation et homothétie matricielle
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="foo"&gt;
+```html
+<div class="foo">
  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?
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">html {
+```css
+html {
   width: 100%;
 }
 body {
@@ -146,39 +167,25 @@ body {
       50,100,0,1.1
     )
   }
-}</pre>
+}
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Translation_et_homothétie_matricielle', '100%', '400px')}}</p>
+{{EmbedLiveSample('Translation_et_homothétie_matricielle', '100%', '400px')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Comprendre les matrices de transformations CSS (en anglais)</a></li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
+- [Comprendre les matrices de transformations CSS (en anglais)](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/)
diff --git a/files/fr/web/css/transform-function/perspective()/index.md b/files/fr/web/css/transform-function/perspective()/index.md
index bc9eb31839..74d56fb92a 100644
--- a/files/fr/web/css/transform-function/perspective()/index.md
+++ b/files/fr/web/css/transform-function/perspective()/index.md
@@ -7,55 +7,74 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/perspective()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>perspective()</code></strong> définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La fonction **`perspective()`** définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<p>Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-perspective.html")}}
 
-<p>La fonction de transformation <code>perspective()</code>s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D.</p>
+La fonction de transformation `perspective()`s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">perspective(<var>l</var>)
-</pre>
+    perspective(l)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><var>l</var></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation <code>z = 0</code>. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée.</dd>
-</dl>
+- _l_
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation `z = 0`. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2" rowspan="2">
-    <p>Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</p>
-   </td>
-   <td colspan="1" rowspan="2">Une perspective n'est pas une transformation linéaire de ℝ<sup>3</sup> et ne peut donc pas être représentée en utilisant une matrice du système cartésien.</td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" rowspan="2">
+        <p>
+          Cette transformation s'applique dans l'espace (3D) et ne peut pas être
+          représentée en deux dimensions.
+        </p>
+      </td>
+      <td colspan="1" rowspan="2">
+        Une perspective n'est pas une transformation linéaire de ℝ<sup>3</sup>
+        et ne peut donc pas être représentée en utilisant une matrice du système
+        cartésien.
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd
+                ><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Appliquer_une_perspective_sur_un_objet_3D">Appliquer une perspective sur un objet 3D</h3>
+### Appliquer une perspective sur un objet 3D
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.face {
+```css
+.face {
   position: absolute;
   width: 100px;
   height: 100px;
@@ -96,62 +115,48 @@ p + div {
   background-color: limegreen;
   transform: translate3d(0, 0, 50px);
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Sans perspective :&lt;/p&gt;
-&lt;div class="no-perspective-box"&gt;
-  &lt;div class="face front"&gt;A&lt;/div&gt;
-  &lt;div class="face top"&gt;B&lt;/div&gt;
-  &lt;div class="face left"&gt;C&lt;/div&gt;
-&lt;/div&gt;
+```html
+<p>Sans perspective :</p>
+<div class="no-perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
 
-&lt;p&gt;Avec une perspective (9cm) :&lt;/p&gt;
-&lt;div class="perspective-box-far"&gt;
-  &lt;div class="face front"&gt;A&lt;/div&gt;
-  &lt;div class="face top"&gt;B&lt;/div&gt;
-  &lt;div class="face left"&gt;C&lt;/div&gt;
-&lt;/div&gt;
+<p>Avec une perspective (9cm) :</p>
+<div class="perspective-box-far">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
 
-&lt;p&gt;Avec une perspective (4cm) :&lt;/p&gt;
-&lt;div class="perspective-box-closer"&gt;
-  &lt;div class="face front"&gt;A&lt;/div&gt;
-  &lt;div class="face top"&gt;B&lt;/div&gt;
-  &lt;div class="face left"&gt;C&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+<p>Avec une perspective (4cm) :</p>
+<div class="perspective-box-closer">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '350', '', 'Web/CSS/transform-function/perspective')}}</p>
+{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '350', '', 'Web/CSS/transform-function/perspective')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/rotate()/index.md b/files/fr/web/css/transform-function/rotate()/index.md
index 4754dd3bbc..e097481ce2 100644
--- a/files/fr/web/css/transform-function/rotate()/index.md
+++ b/files/fr/web/css/transform-function/rotate()/index.md
@@ -8,55 +8,98 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/rotate()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>rotate()</code></strong> définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer (autrement dit, qui applique une rotation plane). C'est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l'élément.</p>
+La fonction **`rotate()`** définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer (autrement dit, qui applique une rotation plane). C'est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l'élément.
 
-<p>La rotation plane est définie par un angle, l'argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La rotation plane est définie par un angle, l'argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>L'angle de la rotation créée grâce à <code>rotate()</code> est fourni comme argument à cette fonction via une valeur de type {{cssxref("&lt;angle&gt;")}}. Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre.</p>
+L'angle de la rotation créée grâce à `rotate()` est fourni comme argument à cette fonction via une valeur de type {{cssxref("&lt;angle&gt;")}}. Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre.
 
-<pre class="syntaxbox">rotate(<var>a</var>)
-</pre>
+    rotate(a)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><var>a</var></dt>
- <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
-</dl>
+- _a_
+  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes surℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
-   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
-  <tr>
-   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes surℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr>
+              <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd
+                ><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -66,24 +109,27 @@ translation_of: Web/CSS/transform-function/rotate()
   transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */
   background-color: pink;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
-&lt;div class="tourne"&gt;Tourné&lt;/div&gt;</pre>
+```html
+<div>Normal</div>
+<div class="tourne">Tourné</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple", "auto", 180)}}</p>
+{{EmbedLiveSample("Exemple_simple", "auto", 180)}}
 
-<h3 id="Associer_une_rotation_à_une_autre_transformation">Associer une rotation à une autre transformation</h3>
+### Associer une rotation à une autre transformation
 
-<p>Lorsqu'on applique plusieurs transformations, il faut faire attention à l'ordre dans lequel elles sont appliquées. Ainsi, si on applique une rotation avant une translation, la translation se fera selon le nouvel axe de rotation !</p>
+Lorsqu'on applique plusieurs transformations, il faut faire attention à l'ordre dans lequel elles sont appliquées. Ainsi, si on applique une rotation avant une translation, la translation se fera selon le nouvel axe de rotation !
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   position: absolute;
   left: 40px;
   top: 40px;
@@ -107,47 +153,33 @@ translation_of: Web/CSS/transform-function/rotate()
   background-color: gold;
   transform: translateX(180px) rotate(45deg);
 }
-</pre>
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
-&lt;div class="rotate"&gt;Tourné&lt;/div&gt;
-&lt;div class="rotate-translate"&gt;Tourné puis translaté&lt;/div&gt;
-&lt;div class="translate-rotate"&gt;Translaté puis tourné&lt;/div&gt;
-</pre>
+```html
+<div>Normal</div>
+<div class="rotate">Tourné</div>
+<div class="rotate-translate">Tourné puis translaté</div>
+<div class="translate-rotate">Translaté puis tourné</div>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Associer_une_rotation_avec_une_autre_transformation", "auto", 320)}}</p>
+{{EmbedLiveSample("Associer_une_rotation_avec_une_autre_transformation", "auto", 320)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}}</td>
-   <td>{{Spec2("CSS3 Transforms")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code></li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
+- [`rotate3d()`](</fr/docs/Web/CSS/transform-function/rotate3d()>)
diff --git a/files/fr/web/css/transform-function/rotate3d()/index.md b/files/fr/web/css/transform-function/rotate3d()/index.md
index 5086694692..f4c2e410a0 100644
--- a/files/fr/web/css/transform-function/rotate3d()/index.md
+++ b/files/fr/web/css/transform-function/rotate3d()/index.md
@@ -8,67 +8,109 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/rotate3d()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>rotate3d()</code></strong> définit une transformation qui déplace un élément autour d'un axe sans le déformer. L'angle de la rotation est un argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La fonction **`rotate3d()`** définit une transformation qui déplace un élément autour d'un axe sans le déformer. L'angle de la rotation est un argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div>
+{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
 
-<p>Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur <code>[x, y, z]</code> et passe par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul <code>[0, 0, 0]</code>) empêchera la rotation d'être appliquée mais la propriété CSS restera valide.</p>
+Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide.
 
-<div class="note">
-  <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p>
-</div>
+> **Note :** Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
-</pre>
+    rotate3d(x, y, z, a)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>x</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en X (l'abscisse) du vecteur qui sera l'axe de la rotation.</dd>
- <dt><code>y</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en Y (l'ordonnée) du vecteur qui sera l'axe de la rotation.</dd>
- <dt><code>z</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en Z (la côte) du vecteur qui sera l'axe de la rotation.</dd>
- <dt><code>a</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
-</dl>
+- `x`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en X (l'abscisse) du vecteur qui sera l'axe de la rotation.
+- `y`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en Y (l'ordonnée) du vecteur qui sera l'axe de la rotation.
+- `z`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en Z (la côte) du vecteur qui sera l'axe de la rotation.
+- `a`
+  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
-   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
-   <td><a href="/fr/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_hom4.png"><img
-    src="transform-functions-rotate3d_hom4.png"></a></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2">
+        Cette transformation s'applique dans l'espace (3D) et ne peut pas être
+        représentée en deux dimensions.
+      </td>
+      <td colspan="1">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd
+                  >1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup
+                    ><mi>x</mi><mn>2</mn></msup
+                  ><mo>-</mo>1)</mtd
+                ><mtd
+                  ><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi
+                  ><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd
+                ><mtd
+                  ><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo
+                  ><mi>x</mi><mi>z</mi
+                  ><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd
+                ></mtr
+              ><mtr
+                ><mtd
+                  ><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo
+                  ><mi>x</mi><mi>y</mi
+                  ><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd
+                ><mtd>1+(1-cos(a))(y2-1)</mtd
+                ><mtd
+                  ><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi
+                  ><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd
+                ><mtr
+                  ><mtd>ysin(a) + xz(1-cos(a))</mtd
+                  ><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd
+                  ><mtd>t</mtd></mtr
+                ><mtr
+                  ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+                ></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td>
+        <a
+          href="/fr/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_hom4.png"
+          ><img src="transform-functions-rotate3d_hom4.png"
+        /></a>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Définir_une_rotation_en_Y">Définir une rotation en Y</h3>
+### Définir une rotation en Y
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">body {
+```css
+body {
   perspective: 800px;
 }
 
@@ -83,22 +125,25 @@ p {
   transform: rotate3d(0,1,0,60deg);
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Définir_une_rotation_en_Y","100%","200")}}</p>
+{{EmbedLiveSample("Définir_une_rotation_en_Y","100%","200")}}
 
-<h3 id="Définir_une_rotation_sur_un_axe_quelconque">Définir une rotation sur un axe quelconque</h3>
+### Définir une rotation sur un axe quelconque
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -108,38 +153,23 @@ p {
   transform: rotate3d(1, 2, -1, 192deg);
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Définir_une_rotation_sur_un_axe_quelconque","100%","200")}}</p>
+{{EmbedLiveSample("Définir_une_rotation_sur_un_axe_quelconque","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotate3d", "rotate3d()")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS Transforms 2", "#funcdef-rotate3d", "rotate3d()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/rotatex()/index.md b/files/fr/web/css/transform-function/rotatex()/index.md
index 63b2dd46fa..5e73a492af 100644
--- a/files/fr/web/css/transform-function/rotatex()/index.md
+++ b/files/fr/web/css/transform-function/rotatex()/index.md
@@ -8,60 +8,87 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/rotateX()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>rotateX()</code></strong> définit une transformation qui déplace l'élément autour de l'axe des abscisses sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+La fonction **`rotateX()`** définit une transformation qui déplace l'élément autour de l'axe des abscisses sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.
 
-<div>{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}
 
-<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.
 
-<p><code>rotateX(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(1, 0, 0, a)</code>.</p>
+`rotateX(a)` est une notation raccourcie, équivalente à `rotate3D(1, 0, 0, a)`.
 
-<div class="note">
-  <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p>
-</div>
+> **Note :** Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">rotateX(<em>a</em>)
-</pre>
+    rotateX(a)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>a</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
-</dl>
+- `a`
+  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
-   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" rowspan="2">
+        Cette transformation s'applique dans l'espace (3D) et ne peut pas être
+        représentée en deux dimensions.
+      </td>
+      <td colspan="1">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd
+                ><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -71,38 +98,23 @@ translation_of: Web/CSS/transform-function/rotateX()
   transform: rotateX(45deg);
   background-color: blue;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+{{EmbedLiveSample("Exemples","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/rotatey()/index.md b/files/fr/web/css/transform-function/rotatey()/index.md
index 9af6c84d3a..9c2e74d296 100644
--- a/files/fr/web/css/transform-function/rotatey()/index.md
+++ b/files/fr/web/css/transform-function/rotatey()/index.md
@@ -8,60 +8,89 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/rotateY()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>rotateY()</code></strong> définit une rotation, qui déplace l'élément autour de l'axe des ordonnées, sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+La fonction **`rotateY()`** définit une rotation, qui déplace l'élément autour de l'axe des ordonnées, sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.
 
-<div>{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}
 
-<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.
 
-<p><code>rotateY(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(0, 1, 0, a)</code>.</p>
+`rotateY(a)` est une notation raccourcie, équivalente à `rotate3D(0, 1, 0, a)`.
 
-<div class="note">
-  <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p>
-</div>
+> **Note :** Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">rotateY(<em>a</em>)
-</pre>
+    rotateY(a)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>a</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
-</dl>
+- `a`
+  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
-   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2">
+        Cette transformation s'applique dans l'espace (3D) et ne peut pas être
+        représentée en deux dimensions.
+      </td>
+      <td colspan="1">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd
+                ><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -71,38 +100,23 @@ translation_of: Web/CSS/transform-function/rotateY()
   transform: rotateY(60deg);
   background-color: blue;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+{{EmbedLiveSample("Exemples","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/rotatez()/index.md b/files/fr/web/css/transform-function/rotatez()/index.md
index 25d3fbe461..4588fec79b 100644
--- a/files/fr/web/css/transform-function/rotatez()/index.md
+++ b/files/fr/web/css/transform-function/rotatez()/index.md
@@ -8,60 +8,87 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/rotateZ()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>rotateZ()</code></strong> définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+La fonction **`rotateZ()`** définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.
 
-<div>{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}
 
-<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.
 
-<p><code>rotateZ(a)</code> est une notation raccourcie équivalente à <code>rotate3D(0, 0, 1, a)</code>.</p>
+`rotateZ(a)` est une notation raccourcie équivalente à `rotate3D(0, 0, 1, a)`.
 
-<div class="note">
-  <p><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</p>
-</div>
+> **Note :** Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">rotateZ(<em>a</em>)
-</pre>
+    rotateZ(a)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>a</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
-</dl>
+- `a`
+  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" rowspan="2">
+        Cette transformation s'applique dans l'espace (3D) et ne peut pas être
+        représentée en deux dimensions.
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd
+                ><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -71,38 +98,23 @@ translation_of: Web/CSS/transform-function/rotateZ()
   transform: rotateZ(45deg);
   background-color: blue;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+{{EmbedLiveSample("Exemples","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/scale()/index.md b/files/fr/web/css/transform-function/scale()/index.md
index 8931d28027..bffb13cc70 100644
--- a/files/fr/web/css/transform-function/scale()/index.md
+++ b/files/fr/web/css/transform-function/scale()/index.md
@@ -7,37 +7,34 @@ tags:
   - CSS Transforms
   - Function
   - Reference
-browser-compat: css.types.transform-function
 translation_of: Web/CSS/transform-function/scale()
+browser-compat: css.types.transform-function
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>scale()</code></strong> permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type <a href="/fr/docs/Web/CSS/transform-function"><code>&lt;transform-function&gt;</code></a>.</p>
+La fonction **`scale()`** permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type [`<transform-function>`](/fr/docs/Web/CSS/transform-function).
 
-<p><img src="scale.png"></p>
+![](scale.png)
 
-<p>Cette transformation est définie par un vecteur dont les coordonnées définissent la déformation appliquée dans chaque direction (horizontale et verticale). Si les deux coordonnées du vecteur sont égales, la mise à l'échelle est uniforme (ou isotropique) et la forme de l'élément est conservée.</p>
+Cette transformation est définie par un vecteur dont les coordonnées définissent la déformation appliquée dans chaque direction (horizontale et verticale). Si les deux coordonnées du vecteur sont égales, la mise à l'échelle est uniforme (ou isotropique) et la forme de l'élément est conservée.
 
-<p>Lorsque les coordonnées du vecteur sont en dehors de l'intervalle [<code>-1, 1]</code>, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit.</p>
+Lorsque les coordonnées du vecteur sont en dehors de l'intervalle \[`-1, 1]`, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit.
 
-<div class="note">
-  <p><strong>Note :</strong> La fonction <code>scale()</code> applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction <code>scale3D()</code>.</p>
-</div>
+> **Note :** La fonction `scale()` applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction `scale3D()`.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css">scale(<var>sx</var>)
-scale(<var>sx</var>, <var>sy</var>)
-</pre>
+```css
+scale(sx)
+scale(sx, sy)
+```
 
-<h3 id="values">Valeurs</h3>
+### Valeurs
 
-<dl>
-  <dt><code>sx</code></dt>
-  <dd>Une valeur de type <a href="/fr/docs/Web/CSS/number"><code>&lt;number&gt;</code></a> qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal).</dd>
-  <dt><code>sy</code></dt>
-  <dd>Une valeur de type <a href="/fr/docs/Web/CSS/number"><code>&lt;number&gt;</code></a> qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe vertical). Si ce paramètre est absent, la valeur par défaut qui sera prise sera <em><strong>sx</strong></em> (on aura ainsi une transformation homogène).</dd>
-</dl>
+- `sx`
+  - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal).
+- `sy`
+  - : Une valeur de type [`<number>`](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe vertical). Si ce paramètre est absent, la valeur par défaut qui sera prise sera **_sx_** (on aura ainsi une transformation homogène).
 
 <table class="standard-table">
   <thead>
@@ -50,168 +47,76 @@ scale(<var>sx</var>, <var>sy</var>)
   </thead>
   <tbody>
     <tr>
-      <td rowspan="2"><math>
-          <mfenced>
-            <mtable>
-              <mtr>
-                <mtd>
-                  <mi>sx</mi>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-              </mtr>
-              <mtr>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mi>sy</mi>
-                </mtd>
-              </mtr>
-            </mtable>
-          </mfenced>
-        </math></td>
-      <td><math>
-          <mfenced>
-            <mtable>
-              <mtr>
-                <mtd>
-                  <mi>sx</mi>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-              </mtr>
-              <mtr>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mi>sy</mi>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-              </mtr>
-              <mtr>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>1</mn>
-                </mtd>
-              </mtr>
-            </mtable>
-          </mfenced>
-        </math></td>
-      <td rowspan="2"><math>
-          <mfenced>
-            <mtable>
-              <mtr>
-                <mtd>
-                  <mi>sx</mi>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-              </mtr>
-              <mtr>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mi>sy</mi>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-              </mtr>
-              <mtr>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>1</mn>
-                </mtd>
-              </mtr>
-            </mtable>
-          </mfenced>
-        </math></td>
-      <td rowspan="2"><math>
-          <mfenced>
-            <mtable>
-              <mtr>
-                <mtd>
-                  <mi>sx</mi>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-              </mtr>
-              <mtr>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mi>sy</mi>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-              </mtr>
-              <mtr>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>1</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-              </mtr>
-              <mtr>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>0</mn>
-                </mtd>
-                <mtd>
-                  <mn>1</mn>
-                </mtd>
-              </mtr>
-            </mtable>
-          </mfenced>
-        </math></td>
+      <td rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi></mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd
+                ><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>1</mn></mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd
+                ><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>1</mn></mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
     </tr>
     <tr>
       <td><code>[sx 0 0 sy 0 0]</code></td>
@@ -219,31 +124,32 @@ scale(<var>sx</var>, <var>sy</var>)
   </tbody>
 </table>
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Les animations utilisées pour les zooms/changement d'échelle peuvent poser problème comme facteurs de déclenchement pour certains types de migraine. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un moyen de désactiver les animations pour le site.</p>
+Les animations utilisées pour les zooms/changement d'échelle peuvent poser problème comme facteurs de déclenchement pour certains types de migraine. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un moyen de désactiver les animations pour le site.
 
-<p>Vous pouvez également tirer parti de la caractéristique média <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code></a> et écrire une requête média qui désactivera les animations si l'utilisateur décide de réduire les animations via les préférences du système.</p>
+Vous pouvez également tirer parti de la caractéristique média [`prefers-reduced-motion`](/fr/docs/Web/CSS/@media/prefers-reduced-motion) et écrire une requête média qui désactivera les animations si l'utilisateur décide de réduire les animations via les préférences du système.
 
-<p>Pour en savoir plus :</p>
+Pour en savoir plus :
 
-<ul>
-  <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">Comprendres les règles WCAG 2.3</a></li>
-  <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Comprendre les critères de succès WCAG 2.1 / 2.3.3 (W3C)</a></li>
-</ul>
+- [Comprendres les règles WCAG 2.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions)
+- [Comprendre les critères de succès WCAG 2.1 / 2.3.3 (W3C)](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="scaling_the_x_and_y_dimensions_together">Déformation horizontale et verticale</h3>
+### Déformation horizontale et verticale
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
-&lt;div class="scaled"&gt;Déformé&lt;/div&gt;</pre>
+```html
+<div>Normal</div>
+<div class="scaled">Déformé</div>
+```
 
-<h4 id="css">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -253,22 +159,25 @@ scale(<var>sx</var>, <var>sy</var>)
   transform: scale(0.7); /* Équivalent à scaleX(0.7) scaleY(0.7) */
   background-color: pink;
 }
-</pre>
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("scaling_the_x_and_y_dimensions_together", "200", "200")}}</p>
+{{EmbedLiveSample("scaling_the_x_and_y_dimensions_together", "200", "200")}}
 
-<h3 id="scaling_x_and_y_dimensions_separately_and_translating_the_origin">Déformer horizontalement et verticalement avec origine déplacée</h3>
+### Déformer horizontalement et verticalement avec origine déplacée
 
-<h4 id="html_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
-&lt;div class="scaled"&gt;Déformé&lt;/div&gt;</pre>
+```html
+<div>Normal</div>
+<div class="scaled">Déformé</div>
+```
 
-<h4 id="css_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -279,24 +188,22 @@ scale(<var>sx</var>, <var>sy</var>)
   transform-origin: left;
   background-color: pink;
 }
-</pre>
+```
 
-<h4 id="result_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("scaling_x_and_y_dimensions_separately_and_translating_the_origin", "200", "200")}}</p>
+{{EmbedLiveSample("scaling_x_and_y_dimensions_separately_and_translating_the_origin", "200", "200")}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/CSS/transform"><code>transform</code></a></li>
-  <li><a href="/fr/docs/Web/CSS/transform-function"><code>&lt;transform-function&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/CSS/transform-function/scale3d()"><code>scale3d()</code></a></li>
-</ul>
+- [`transform`](/fr/docs/Web/CSS/transform)
+- [`<transform-function>`](/fr/docs/Web/CSS/transform-function)
+- [`scale3d()`](</fr/docs/Web/CSS/transform-function/scale3d()>)
diff --git a/files/fr/web/css/transform-function/scale3d()/index.md b/files/fr/web/css/transform-function/scale3d()/index.md
index 3b4d05dde4..3b2fa3794a 100644
--- a/files/fr/web/css/transform-function/scale3d()/index.md
+++ b/files/fr/web/css/transform-function/scale3d()/index.md
@@ -8,62 +8,88 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/scale3d()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>scale3d()</code></strong> permet de modifier la taille d'un élément en appliquant une homothétie définie par un vecteur. Les composantes de ce vecteur permettent d'appliquer des échelles différentes selon les différentes dimensions.</p>
+La fonction **`scale3d()`** permet de modifier la taille d'un élément en appliquant une homothétie définie par un vecteur. Les composantes de ce vecteur permettent d'appliquer des échelles différentes selon les différentes dimensions.
 
-<div>{{EmbedInteractiveExample("pages/css/function-scale3d.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-scale3d.html")}}
 
-<p>La transformation appliquée est définie par un vecteur dont les coordonnées définissent l'amplitude de l'homothétie dans chaque direction. Si les trois coordonnées du vecteur sont égales, la transformation est isotropique et la forme de l'élément est conservée.</p>
+La transformation appliquée est définie par un vecteur dont les coordonnées définissent l'amplitude de l'homothétie dans chaque direction. Si les trois coordonnées du vecteur sont égales, la transformation est isotropique et la forme de l'élément est conservée.
 
-<p>Lorsque les composantes du vecteurs sont en dehors de l'intervalle <code>[-1, 1]</code>, la transformation agrandit l'élément dans le sens des coordonnées. Lorsque les composantes sont dans cet intervalle, cela réduit l'élément.</p>
+Lorsque les composantes du vecteurs sont en dehors de l'intervalle `[-1, 1]`, la transformation agrandit l'élément dans le sens des coordonnées. Lorsque les composantes sont dans cet intervalle, cela réduit l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
-</pre>
+    scale3d(sx, sy, sz)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>sx</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur définissant l'homothétie.</dd>
- <dt><code>sy</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'ordonnée du vecteur définissant l'homothétie</dd>
- <dt><code>sz</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente la composante, selon l'axe Z, du vecteur définissant l'homothétie</dd>
-</dl>
+- `sx`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur définissant l'homothétie.
+- `sy`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'ordonnée du vecteur définissant l'homothétie
+- `sz`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente la composante, selon l'axe Z, du vecteur définissant l'homothétie
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2" rowspan="2">Cette transformation s'applique dans en 3 dimensions et ne peut pas être représentée sur le plan.</td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" rowspan="2">
+        Cette transformation s'applique dans en 3 dimensions et ne peut pas être
+        représentée sur le plan.
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Avec_origine_non_modifiée">Avec origine non modifiée</h3>
+### Avec origine non modifiée
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
-&lt;p class="transformation"&gt;bar&lt;/p&gt;</pre>
+```html
+<p>foo</p>
+<p class="transformation">bar</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -73,22 +99,25 @@ translation_of: Web/CSS/transform-function/scale3d()
   transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Avec_origine_non_modifiée","100%","200")}}</p>
+{{EmbedLiveSample("Avec_origine_non_modifiée","100%","200")}}
 
-<h3 id="Avec_origine_translatée">Avec origine translatée</h3>
+### Avec origine translatée
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -99,41 +128,26 @@ translation_of: Web/CSS/transform-function/scale3d()
   transform-origin: center;
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Avec_origine_translatée","100%","200")}}</p>
+{{EmbedLiveSample("Avec_origine_translatée","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Transforms 2", "#funcdef-scale3d", "scale3d()")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS Transforms 2", "#funcdef-scale3d", "scale3d()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></li>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/translate3d()">translate3d()</a></code></li>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d()">rotate3d()</a></code></li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
+- [`scaleZ()`](</fr/docs/Web/CSS/transform-function/scaleZ()>)
+- [`translate3d()`](</fr/docs/Web/CSS/transform-function/translate3d()>)
+- [`rotate3d()`](</fr/docs/Web/CSS/transform-function/rotate3d()>)
diff --git a/files/fr/web/css/transform-function/scalex()/index.md b/files/fr/web/css/transform-function/scalex()/index.md
index 6ad769f97c..9a1b98907c 100644
--- a/files/fr/web/css/transform-function/scalex()/index.md
+++ b/files/fr/web/css/transform-function/scalex()/index.md
@@ -8,62 +8,104 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/scaleX()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>scaleX()</code></strong> permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés.</p>
+La fonction **`scaleX()`** permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés.
 
-<p><img src="scalex.png"></p>
+![](scalex.png)
 
-<p><code>scaleX(sx)</code> est une notation raccourcie équivalente à <code>scale(sx, 1)</code> ou à <code>scale3d(sx, 1, 1)</code>.</p>
+`scaleX(sx)` est une notation raccourcie équivalente à `scale(sx, 1)` ou à `scale3d(sx, 1, 1)`.
 
-<p><code>scaleX(-1)</code> définit une symétrie axiale par rapport à un axe vertical passant par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+`scaleX(-1)` définit une symétrie axiale par rapport à un axe vertical passant par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">scaleX(<em>s</em>)
-</pre>
+    scaleX(s)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>s</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente le facteur d'échelle de l'homothétie.</dd>
-</dl>
+- `s`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente le facteur d'échelle de l'homothétie.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
-   <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
-  <tr>
-   <td><code>[s 0 0 1 0 0]</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr><mtd>s</mtd><mtd>0</mtd></mtr>
+              <mtr><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>[s 0 0 1 0 0]</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Origine_inchangée">Origine inchangée</h3>
+### Origine inchangée
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -73,22 +115,25 @@ translation_of: Web/CSS/transform-function/scaleX()
   transform: scaleX(2);
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Origine_inchangée","100%","200")}}</p>
+{{EmbedLiveSample("Origine_inchangée","100%","200")}}
 
-<h3 id="Origine_déplacée">Origine déplacée</h3>
+### Origine déplacée
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;bar&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">bar</p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -99,41 +144,26 @@ translation_of: Web/CSS/transform-function/scaleX()
   transform-origin: left;
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Origine_déplacée","100%","200")}}</p>
+{{EmbedLiveSample("Origine_déplacée","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}</td>
-   <td>{{Spec2("CSS3 Transforms")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                 | Commentaires        |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY()">scaleY()</a></code></li>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></li>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li>{{cssxref("transform-origin")}}</li>
-</ul>
+- [`scaleY()`](</fr/docs/Web/CSS/transform-function/scaleY()>)
+- [`scaleZ()`](</fr/docs/Web/CSS/transform-function/scaleZ()>)
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
+- {{cssxref("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 87bfff06db..7b922436d8 100644
--- a/files/fr/web/css/transform-function/scaley()/index.md
+++ b/files/fr/web/css/transform-function/scaley()/index.md
@@ -8,60 +8,102 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/scaleY()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>scaleY()</code></strong> modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La fonction **`scaleY()`** modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<p><img src="scaley.png"></p>
+![](scaley.png)
 
-<p><code>scaleY(sy)</code> est une notation raccourcie équivalente à <code>scale(1, sy)</code> ou à <code>scale3d(1, sy, 1)</code>.</p>
+`scaleY(sy)` est une notation raccourcie équivalente à `scale(1, sy)` ou à `scale3d(1, sy, 1)`.
 
-<p><code>scaleY(-1)</code> définit une symétrie axiale selon un axe horizontal, passant par l'origine du repère (cette origine est définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+`scaleY(-1)` définit une symétrie axiale selon un axe horizontal, passant par l'origine du repère (cette origine est définie grâce à la propriété {{cssxref("transform-origin")}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">scaleY(s)
-</pre>
+    scaleY(s)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>s</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui indique le facteur d'échelle pour l'homothétie.</dd>
-</dl>
+- `s`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} qui indique le facteur d'échelle pour l'homothétie.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td>
-   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
-  <tr>
-   <td><code>[1 0 0 s 0 0]</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd></mtr>
+              <mtr><mtd>0</mtd><mtd>s</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>[1 0 0 s 0 0]</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -71,41 +113,26 @@ translation_of: Web/CSS/transform-function/scaleY()
   transform: scaleY(2);
   background-color: blue;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+{{EmbedLiveSample("Exemples","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-scaley", "scaleY()")}}</td>
-   <td>{{Spec2("CSS3 Transforms")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Transforms", "#funcdef-transform-scaley", "scaleY()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX()">scaleX()</a></code></li>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ()">scaleZ()</a></code></li>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li>{{cssxref("transform-origin")}}</li>
-</ul>
+- [`scaleX()`](</fr/docs/Web/CSS/transform-function/scaleX()>)
+- [`scaleZ()`](</fr/docs/Web/CSS/transform-function/scaleZ()>)
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
+- {{cssxref("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 ee98a35e12..7fb32c1587 100644
--- a/files/fr/web/css/transform-function/scalez()/index.md
+++ b/files/fr/web/css/transform-function/scalez()/index.md
@@ -8,59 +8,85 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/scaleZ()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>scaleZ()</code></strong> modifie la coordonnée en Z de chaque point de l'élément avec un facteur multiplicateur donné. Si ce facteur vaut 1, l'opération appliqué sera l'identité. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La fonction **`scaleZ()`** modifie la coordonnée en Z de chaque point de l'élément avec un facteur multiplicateur donné. Si ce facteur vaut 1, l'opération appliqué sera l'identité. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}}
 
-<p><code>scaleZ(sz)</code> est une notation raccourcie équivalente à <code>scale3d(1, 1, sz)</code>.</p>
+`scaleZ(sz)` est une notation raccourcie équivalente à `scale3d(1, 1, sz)`.
 
-<p><code>scaleZ(-1)</code> définit une symétrie axiale selon l'axe Z qui passe par l'origine (définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+`scaleZ(-1)` définit une symétrie axiale selon l'axe Z qui passe par l'origine (définie grâce à la propriété {{cssxref("transform-origin")}}).
 
-<p>Dans les exemples interactifs ci-avant, <code>perspective: 500px;</code> a été utilisée afin de créer un espace en trois dimensions et <code>transform-style: preserve-3d</code> permet de positionner les éléments enfants dans cet espace 3D.</p>
+Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée afin de créer un espace en trois dimensions et `transform-style: preserve-3d` permet de positionner les éléments enfants dans cet espace 3D.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">scaleZ(s)
-</pre>
+    scaleZ(s)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>s</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente le facteur d'échelle à appliquer sur la côte (coordonnées en Z) de chaque point de l'élément.</dd>
-</dl>
+- `s`
+  - : Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente le facteur d'échelle à appliquer sur la côte (coordonnées en Z) de chaque point de l'élément.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2" rowspan="2">Cette transformation s'applique sur l'espace en trois dimensions et ne peut donc être représentée sous la forme d'une transformation plane.</td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" rowspan="2">
+        Cette transformation s'applique sur l'espace en trois dimensions et ne
+        peut donc être représentée sous la forme d'une transformation plane.
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="translation"&gt;Translaté&lt;/p&gt;
-&lt;p class="homothetie"&gt;Échelle&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="translation">Translaté</p>
+<p class="homothetie">Échelle</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -75,41 +101,26 @@ translation_of: Web/CSS/transform-function/scaleZ()
   /* On ajoute une perspective pour créer un volume 3D */
   transform: perspective(500px) scaleZ(2) translateZ(100px);
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+{{EmbedLiveSample("Exemples","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Transforms 2", "#funcdef-scalez", "scaleZ()")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS Transforms 2", "#funcdef-scalez", "scaleZ()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX()">scaleX()</a></code></li>
- <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY()">scaleY()</a></code></li>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li>{{cssxref("transform-origin")}}</li>
-</ul>
+- [`scaleX()`](</fr/docs/Web/CSS/transform-function/scaleX()>)
+- [`scaleY()`](</fr/docs/Web/CSS/transform-function/scaleY()>)
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
+- {{cssxref("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 12d228ec71..11b994aa42 100644
--- a/files/fr/web/css/transform-function/skew()/index.md
+++ b/files/fr/web/css/transform-function/skew()/index.md
@@ -8,63 +8,104 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/skew()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>skew()</code></strong> permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine, plus le décalage obtenu sera important.</p>
+La fonction **`skew()`** permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine, plus le décalage obtenu sera important.
 
-<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-skew.html")}}
 
-<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">skew(<em>ax</em>)
-skew(<em>ax</em>, <em>ay</em>)
-</pre>
+    skew(ax)
+    skew(ax, ay)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>ax</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).</dd>
- <dt><code>ay</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).</dd>
-</dl>
+- `ax`
+  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).
+- `ay`
+  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
-  <tr>
-   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>tan(ax)</mtd></mtr
+              ><mtr>tan(ay)<mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr
+              ><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ><mtr></mtr></mtable></mfenced
+        ></math>
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr
+              ><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utiliser_une_distorsion_horizontale">Utiliser une distorsion horizontale</h3>
+### Utiliser une distorsion horizontale
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -75,22 +116,25 @@ skew(<em>ax</em>, <em>ay</em>)
   transform: skew(10deg);
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utiliser_une_distorsion_horizontale","100%","200")}}</p>
+{{EmbedLiveSample("Utiliser_une_distorsion_horizontale","100%","200")}}
 
-<h3 id="Utiliser_deux_angles">Utiliser deux angles</h3>
+### Utiliser deux angles
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -100,38 +144,23 @@ skew(<em>ax</em>, <em>ay</em>)
   transform: skew(10deg, 10deg);
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utiliser_deux_angles","100%","200")}}</p>
+{{EmbedLiveSample("Utiliser_deux_angles","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}</td>
-   <td>{{Spec2("CSS3 Transforms")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/skewx()/index.md b/files/fr/web/css/transform-function/skewx()/index.md
index 5fefac8327..a82f7c2a1c 100644
--- a/files/fr/web/css/transform-function/skewx()/index.md
+++ b/files/fr/web/css/transform-function/skewx()/index.md
@@ -8,60 +8,102 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/skewX()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>skewX()</code></strong> permet d'opérer une distorsion horizontale en étirant chaque point de l'élément d'un certain angle dans la direction horizontale. Pour cela, on augmente l'abscisse d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.</p>
+La fonction **`skewX()`** permet d'opérer une distorsion horizontale en étirant chaque point de l'élément d'un certain angle dans la direction horizontale. Pour cela, on augmente l'abscisse d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.
 
-<div>{{EmbedInteractiveExample("pages/css/function-skewX.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-skewX.html")}}
 
-<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<p><code>skewX(a)</code> est équivalent à <code><a href="/fr/docs/Web/CSS/transform-function/skew()">skew(a)</a></code>.</p>
+`skewX(a)` est équivalent à [`skew(a)`](</fr/docs/Web/CSS/transform-function/skew()>).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">skewX(a)
-</pre>
+    skewX(a)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>a</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).</dd>
-</dl>
+- `a`
+  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
-  <tr>
-   <td><code>[1 0 tan(a) 1 0 0]</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>tan(ay)</mtd></mtr
+              ><mtr>0<mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>[1 0 tan(a) 1 0 0]</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -71,38 +113,23 @@ translation_of: Web/CSS/transform-function/skewX()
   transform: skewX(10deg);
   background-color: blue;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+{{EmbedLiveSample("Exemples","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}</td>
-   <td>{{Spec2("CSS3 Transforms")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/skewy()/index.md b/files/fr/web/css/transform-function/skewy()/index.md
index 06b1e83c24..a064f14624 100644
--- a/files/fr/web/css/transform-function/skewy()/index.md
+++ b/files/fr/web/css/transform-function/skewy()/index.md
@@ -8,58 +8,100 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/skewY()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>skewY()</code></strong> permet d'opérer une distorsion verticale en étirant chaque point de l'élément d'un certain angle dans la direction verticale. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.</p>
+La fonction **`skewY()`** permet d'opérer une distorsion verticale en étirant chaque point de l'élément d'un certain angle dans la direction verticale. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.
 
-<div>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-skewY.html")}}
 
-<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">skewY(a)
-</pre>
+    skewY(a)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>a</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).</dd>
-</dl>
+- `a`
+  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
-  <tr>
-   <td><code>[1 tan(a) 0 1 0 0]</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd></mtr
+              ><mtr>tan(ax)<mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>[1 tan(a) 0 1 0 0]</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -69,38 +111,23 @@ translation_of: Web/CSS/transform-function/skewY()
   transform: skewY(40deg);
   background-color: blue;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+{{EmbedLiveSample("Exemples","100%","250")}}
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}</td>
-   <td>{{Spec2("CSS3 Transforms")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/translate()/index.md b/files/fr/web/css/transform-function/translate()/index.md
index 15604a6a3e..b832478484 100644
--- a/files/fr/web/css/transform-function/translate()/index.md
+++ b/files/fr/web/css/transform-function/translate()/index.md
@@ -8,66 +8,105 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/translate()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>translate()</code></strong> permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical).</p>
+La fonction **`translate()`** permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical).
 
-<p><img src="translate.png"></p>
+![](translate.png)
 
-<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">translate(tx)
-translate(tx, ty)
-</pre>
+    translate(tx)
+    translate(tx, ty)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>tx</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'abscisse du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement horizontal de la translation.</dd>
- <dt><code>ty</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'ordonnée du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement vertical de la translation. Si ce paramètre n'est pas utilisé, la valeur par défaut sera 0 : <code>translate(2)</code> sera donc équivalent à <code>translate(2, 0)</code>.</dd>
-</dl>
+- `tx`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'abscisse du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement horizontal de la translation.
+- `ty`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'ordonnée du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement vertical de la translation. Si ce paramètre n'est pas utilisé, la valeur par défaut sera 0 : `translate(2)` sera donc équivalent à `translate(2, 0)`.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2">
-    <p>Une translation plane n'est pas une transformation linéaire de ℝ<sup>2</sup> et ne peut donc pas être représentée sous la forme d'une matrice dans  le système cartésien.</p>
-   </td>
-   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
-  <tr>
-   <td><code>[1 0 0 1 tx ty]</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="2">
+        <p>
+          Une translation plane n'est pas une transformation linéaire de ℝ<sup
+            >2</sup
+          >
+          et ne peut donc pas être représentée sous la forme d'une matrice dans 
+          le système cartésien.
+        </p>
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>[1 0 0 1 tx ty]</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Définir_une_translation_horizontale">Définir une translation horizontale</h3>
+### Définir une translation horizontale
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;
-&lt;p&gt;toto&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+<p>toto</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -78,23 +117,26 @@ translate(tx, ty)
   /* équivalent à translateX(10px)*/
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Définir_une_translation_horizontale","100%","250")}}</p>
+{{EmbedLiveSample("Définir_une_translation_horizontale","100%","250")}}
 
-<h3 id="Définir_une_translation_sur_les_deux_axes">Définir une translation sur les deux axes</h3>
+### Définir une translation sur les deux axes
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;
-&lt;p&gt;toto&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+<p>toto</p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -104,38 +146,23 @@ translate(tx, ty)
   transform: translate(10px,10px);
   background-color: blue;
 }
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Définir_une_translation_sur_les_deux_axes","100%","250")}}</p>
+{{EmbedLiveSample("Définir_une_translation_sur_les_deux_axes","100%","250")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td>
-   <td>{{Spec2('CSS3 Transforms')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}} | {{Spec2('CSS3 Transforms')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/translate3d()/index.md b/files/fr/web/css/transform-function/translate3d()/index.md
index 81d6f690e5..3e36281947 100644
--- a/files/fr/web/css/transform-function/translate3d()/index.md
+++ b/files/fr/web/css/transform-function/translate3d()/index.md
@@ -8,63 +8,83 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/translate3d()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <strong><code>translate3d()</code></strong> permet de déplacer un élément dans l'espace tridimensionnel. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent l'amplitude du déplacement pour chaque direction.</p>
+La fonction CSS **`translate3d()`** permet de déplacer un élément dans l'espace tridimensionnel. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent l'amplitude du déplacement pour chaque direction.
 
-<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
 
-<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">translate3d(tx, ty, tz)
-</pre>
+    translate3d(tx, ty, tz)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>tx</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal).</dd>
- <dt><code>ty</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical).</dd>
- <dt><code>tz</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type {{cssxref("&lt;percentage&gt;")}}, si c'est le cas, la règle décrivant la transformation sera considérée comme invalide.</dd>
-</dl>
+- `tx`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal).
+- `ty`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical).
+- `tz`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type {{cssxref("&lt;percentage&gt;")}}, si c'est le cas, la règle décrivant la transformation sera considérée comme invalide.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2" rowspan="2">
-    <p>Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur le plan.</p>
-   </td>
-   <td colspan="1" rowspan="2">Une translation n'est pas une transformation linéaire de ℝ<sup>3</sup> et ne peut donc pas être représentée par une matrice dans le système cartésien.</td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" rowspan="2">
+        <p>
+          Cette transformation s'applique en trois dimensions et ne peut donc
+          être représentée sur le plan.
+        </p>
+      </td>
+      <td colspan="1" rowspan="2">
+        Une translation n'est pas une transformation linéaire de ℝ<sup>3</sup>
+        et ne peut donc pas être représentée par une matrice dans le système
+        cartésien.
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Définir_une_translation_sur_un_seul_axe">Définir une translation sur un seul axe</h3>
+### Définir une translation sur un seul axe
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Statique&lt;/p&gt;
-&lt;p class="transformation"&gt;Bougé&lt;/p&gt;
-&lt;p&gt;Statique&lt;/p&gt;</pre>
+```html
+<p>Statique</p>
+<p class="transformation">Bougé</p>
+<p>Statique</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 60px;
   height: 60px;
   background-color: skyblue;
@@ -75,23 +95,26 @@ translation_of: Web/CSS/transform-function/translate3d()
   /* equivalent to perspective(500px) translateX(10px)*/
   background-color: pink;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Définir_une_translation_sur_un_seul_axe","100%","250")}}</p>
+{{EmbedLiveSample("Définir_une_translation_sur_un_seul_axe","100%","250")}}
 
-<h3 id="Définir_une_translation_sur_les_axes_X_et_Z">Définir une translation sur les axes X et Z</h3>
+### Définir une translation sur les axes X et Z
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Statique&lt;/p&gt;
-&lt;p class="transformation"&gt;Bougé&lt;/p&gt;
-&lt;p&gt;Statique&lt;/p&gt;</pre>
+```html
+<p>Statique</p>
+<p class="transformation">Bougé</p>
+<p>Statique</p>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 60px;
   height: 60px;
   background-color: skyblue;
@@ -101,38 +124,23 @@ translation_of: Web/CSS/transform-function/translate3d()
   transform: perspective(500px) translate3d(10px,0px,100px);
   background-color: pink;
 }
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Définir_une_translation_sur_les_axes_X_et_Z","100%","250")}}</p>
+{{EmbedLiveSample("Définir_une_translation_sur_les_axes_X_et_Z","100%","250")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td>
-   <td>{{Spec2("CSS Transforms 2")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}} | {{Spec2("CSS Transforms 2")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/translatey()/index.md b/files/fr/web/css/transform-function/translatey()/index.md
index a6e0d052c0..c897c4e2b6 100644
--- a/files/fr/web/css/transform-function/translatey()/index.md
+++ b/files/fr/web/css/transform-function/translatey()/index.md
@@ -8,61 +8,102 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/translateY()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <code><strong>translateY()</strong></code> permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La fonction **`translateY()`** permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<p><img src="translatey.png"></p>
+![](translatey.png)
 
-<p><code>translateY(ty)</code> est une notation raccourcie équivalente à <code>translate(0, ty)</code>.</p>
+`translateY(ty)` est une notation raccourcie équivalente à `translate(0, ty)`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">translateY(t)
-</pre>
+    translateY(t)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>t</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'ordonnée du vecteur de translation (la composante en Y).</dd>
-</dl>
+- `t`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'ordonnée du vecteur de translation (la composante en Y).
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2">
-    <p>Une translation n'est pas une transformation linéaire sur ℝ<sup>2</sup> et on ne peut donc pas la représenter en utilisant une matrice exprimée dans le système cartésien.</p>
-   </td>
-   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
-  <tr>
-   <td><code>[1 0 0 1 0 t]</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="2">
+        <p>
+          Une translation n'est pas une transformation linéaire sur ℝ<sup
+            >2</sup
+          >
+          et on ne peut donc pas la représenter en utilisant une matrice
+          exprimée dans le système cartésien.
+        </p>
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><math
+            ><mfenced
+              ><mtable
+                ><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr
+                ><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr
+                ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable
+              ></mfenced
+            ></math
+          ></math
+        >
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>[1 0 0 1 0 t]</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;
-&lt;p&gt;toto&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+<p>toto</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -72,38 +113,23 @@ translation_of: Web/CSS/transform-function/translateY()
   transform: translateY(10px);
   background-color: blue;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+{{EmbedLiveSample("Exemples","100%","250")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}</td>
-   <td>{{Spec2("CSS3 Transforms")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}} | {{Spec2("CSS3 Transforms")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
diff --git a/files/fr/web/css/transform-function/translatez()/index.md b/files/fr/web/css/transform-function/translatez()/index.md
index 3d2e30c77b..17aaab3ff3 100644
--- a/files/fr/web/css/transform-function/translatez()/index.md
+++ b/files/fr/web/css/transform-function/translatez()/index.md
@@ -8,56 +8,76 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-function/translateZ()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>translateZ()</code></strong> permet de déplacer un élément selon l'axe z de l'espace tridimensionnel. Cette transformation est caractérisée par une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+La fonction **`translateZ()`** permet de déplacer un élément selon l'axe z de l'espace tridimensionnel. Cette transformation est caractérisée par une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
 
-<p><code>translateZ(tz)</code> est un raccourci équivalent à <code>translate3d(0, 0, tz)</code>.</p>
+`translateZ(tz)` est un raccourci équivalent à `translate3d(0, 0, tz)`.
 
-<p>Dans les exemples interactifs ci-avant, <code>perspective: 500px;</code> a été utilisée afin de créer un espace en trois dimensions et <code>transform-style: preserve-3d</code> permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D.</p>
+Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée afin de créer un espace en trois dimensions et `transform-style: preserve-3d` permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">translateZ(t)
-</pre>
+    translateZ(t)
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>t</code></dt>
- <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type {{cssxref("&lt;percentage&gt;")}}, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide.</dd>
-</dl>
+- `t`
+  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type {{cssxref("&lt;percentage&gt;")}}, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
-   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2" rowspan="2">Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur un plan.</td>
-   <td colspan="1" rowspan="2">Une translation n'est pas une transformation linéaire sur ℝ<sup>3</sup> et ne peut donc pas être représentée avec une matrice dans le système cartésien.</td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+      <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+      <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2" rowspan="2">
+        Cette transformation s'applique en trois dimensions et ne peut donc être
+        représentée sur un plan.
+      </td>
+      <td colspan="1" rowspan="2">
+        Une translation n'est pas une transformation linéaire sur ℝ<sup>3</sup>
+        et ne peut donc pas être représentée avec une matrice dans le système
+        cartésien.
+      </td>
+      <td colspan="1" rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr
+              ><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr
+              ><mtr
+                ><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
-&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+```html
+<p>toto</p>
+<p class="transformation">truc</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -70,42 +90,27 @@ translation_of: Web/CSS/transform-function/translateZ()
   /* sateur de 200px */
   transform: perspective(500px) translateZ(200px);
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<p>Si la valeur fournie à <code>perspective()</code> est inférieure à l'argument de <code>translateZ()</code> (ex. <code>transform: perspective(200px) translateZ(300px);</code>), l'élément transformé ne sera pas visible car il sera situé au-delà de l'espace projeté sur l'écran. Plus l'écart entre ces deux arguments est faible, plus l'élément paraîtra proche de l'utilisateur.</p>
+Si la valeur fournie à `perspective()` est inférieure à l'argument de `translateZ()` (ex. `transform: perspective(200px) translateZ(300px);`), l'élément transformé ne sera pas visible car il sera situé au-delà de l'espace projeté sur l'écran. Plus l'écart entre ces deux arguments est faible, plus l'élément paraîtra proche de l'utilisateur.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Ajout des fonctions de transformations 3D au module standard <em>CSS Transforms</em></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                     | Commentaires                                                                  |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------- |
+| {{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}} | {{Spec2('CSS Transforms 2')}} | Ajout des fonctions de transformations 3D au module standard _CSS Transforms_ |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+Voir la page sur le type de donnée [`<transform-function>`](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Les transformations CSS</a></li>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY()", "translateY()")}}</li>
-</ul>
+- {{cssxref("&lt;transform-function&gt;")}}
+- [Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
+- {{cssxref("transform")}}
+- {{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY()", "translateY()")}}
diff --git a/files/fr/web/css/transform-origin/index.md b/files/fr/web/css/transform-origin/index.md
index d5c8888145..86a3c0a462 100644
--- a/files/fr/web/css/transform-origin/index.md
+++ b/files/fr/web/css/transform-origin/index.md
@@ -10,28 +10,27 @@ tags:
   - 'valeur par défaut : center'
 translation_of: Web/CSS/transform-origin
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>transform-origin</code></strong> permet de modifier l'origine du repère pour les opérations de transformation d'un élément.</p>
+La propriété **`transform-origin`** permet de modifier l'origine du repère pour les opérations de transformation d'un élément.
 
-<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div>
+{{EmbedInteractiveExample("pages/css/transform-origin.html")}}
 
-<p>Par exemple, l'origine par défaut pour la fonction <code>rotate()</code> est le centre de la rotation. Cette propriété est utilisée en :</p>
+Par exemple, l'origine par défaut pour la fonction `rotate()` est le centre de la rotation. Cette propriété est utilisée en :
 
-<ol>
- <li>Translatant l'élément avec l'opposé de la valeur fournie</li>
- <li>Appliquant la transformation souhaitée sur l'élément</li>
- <li>Translatant l'élément avec la valeur fournie pour cette propriété.</li>
-</ol>
+1.  Translatant l'élément avec l'opposé de la valeur fournie
+2.  Appliquant la transformation souhaitée sur l'élément
+3.  Translatant l'élément avec la valeur fournie pour cette propriété.
 
-<p>Les valeurs qui ne sont pas définies explicitement sont réinitialisées avec les valeurs correspondantes.</p>
+Les valeurs qui ne sont pas définies explicitement sont réinitialisées avec les valeurs correspondantes.
 
-<p>Par défaut, l'origine d'une transformation est <code>center</code>.</p>
+Par défaut, l'origine d'une transformation est `center`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Utilisation d'une seule valeur */
-transform-origin: 2px<em>;</em>
+```css
+/* Utilisation d'une seule valeur */
+transform-origin: 2px;
 transform-origin: bottom;
 
 /* x-offset y-offset */
@@ -68,198 +67,167 @@ transform-origin: bottom right 2cm;
 transform-origin: inherit;
 transform-origin: initial;
 transform-origin: unset;
-</pre>
+```
+
+La propriété `transform-origin` peut être définie en utiisant une, deux ou trois valeurs.
+
+- Avec une valeur, celle-ci doit être :
+
+  - Une longueur (type {{cssxref("&lt;length&gt;")}})
+  - Un pourcentage (type {{cssxref("&lt;percentage&gt;")}}
+  - Un mot-clé parmi `left`, `center`, `right`, `top`, `bottom`.
+
+- Avec deux valeurs
+
+  - La première valeur doit être une longueur (type {{cssxref("&lt;length&gt;")}}), un pourcentage (type {{cssxref("&lt;percentage&gt;")}} ou un mot-clé parmi `left`, `center`, `right`
+  - La seconde valeur doit être une longueur (type {{cssxref("&lt;length&gt;")}}), un pourcentage (type {{cssxref("&lt;percentage&gt;")}} ou un mot-clé parmi `top`, `center`, `bottom`.
+
+- Avec trois valeurs
 
-<p>La propriété <code>transform-origin</code> peut être définie en utiisant une, deux ou trois valeurs.</p>
-
-<ul>
- <li>Avec une valeur, celle-ci doit être :
-  <ul>
-   <li>Une longueur (type {{cssxref("&lt;length&gt;")}})</li>
-   <li>Un pourcentage (type {{cssxref("&lt;percentage&gt;")}}</li>
-   <li>Un mot-clé parmi <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code>, <code>bottom</code>.</li>
-  </ul>
- </li>
- <li>Avec deux valeurs
-  <ul>
-   <li>La première valeur doit être une longueur (type {{cssxref("&lt;length&gt;")}}), un pourcentage (type {{cssxref("&lt;percentage&gt;")}} ou un mot-clé parmi <code>left</code>, <code>center</code>, <code>right</code></li>
-   <li>La seconde valeur doit être une longueur (type {{cssxref("&lt;length&gt;")}}), un pourcentage (type {{cssxref("&lt;percentage&gt;")}} ou un mot-clé parmi <code>top</code>, <code>center</code>, <code>bottom</code>.</li>
-  </ul>
- </li>
- <li>Avec trois valeurs
-  <ul>
-   <li>Les deux premières valeurs doivent être structurées comme la syntaxe avec deux valeurs</li>
-   <li>La troisième valeur doit être une longueur (type {{cssxref("length")}}</li>
-  </ul>
- </li>
-</ul>
-
-<h3 id="Valeur">Valeur</h3>
-
-<dl>
- <dt><code>x-offset</code></dt>
- <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
- <dt><code>offset-keyword</code></dt>
- <dd>Un mot-clé parmi <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> qui décrit le décalage correspondant.</dd>
- <dt><code>y-offset</code></dt>
- <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
- <dt><code>x-offset-keyword</code></dt>
- <dd>Un mot-clé parmi <code>left</code>, <code>right</code> ou <code>center</code> qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
- <dt><code>y-offset-keyword</code></dt>
- <dd>Un mot-clé parmi <code>top</code>, <code>bottom</code> ou <code>center</code> qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
- <dt><code>z-offset</code></dt>
- <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} (et jamais une valeur du type {{cssxref("&lt;percentage&gt;")}}, sinon la déclaration serait invalide) qui décrit la distance, depuis l'œil de l'utilisateur, de l'origine de la transformation sur l'axe de profondeur (z)..</dd>
-</dl>
-
-<p>Les mots-clés sont des raccourcis qui correspondent aux valeurs {{cssxref("&lt;percentage&gt;")}} suivantes :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Mot-clé</th>
-   <th scope="col">Valeur</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>left</code></td>
-   <td><code>0%</code></td>
-  </tr>
-  <tr>
-   <td><code>center</code></td>
-   <td><code>50%</code></td>
-  </tr>
-  <tr>
-   <td><code>right</code></td>
-   <td><code>100%</code></td>
-  </tr>
-  <tr>
-   <td><code>top</code></td>
-   <td><code>0%</code></td>
-  </tr>
-  <tr>
-   <td><code>bottom</code></td>
-   <td><code>100%</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - Les deux premières valeurs doivent être structurées comme la syntaxe avec deux valeurs
+  - La troisième valeur doit être une longueur (type {{cssxref("length")}}
+
+### Valeur
+
+- `x-offset`
+  - : Une valeur du type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.
+- `offset-keyword`
+  - : Un mot-clé parmi `left`, `right`, `top`, `bottom` ou `center` qui décrit le décalage correspondant.
+- `y-offset`
+  - : Une valeur du type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.
+- `x-offset-keyword`
+  - : Un mot-clé parmi `left`, `right` ou `center` qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.
+- `y-offset-keyword`
+  - : Un mot-clé parmi `top`, `bottom` ou `center` qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.
+- `z-offset`
+  - : Une valeur du type {{cssxref("&lt;length&gt;")}} (et jamais une valeur du type {{cssxref("&lt;percentage&gt;")}}, sinon la déclaration serait invalide) qui décrit la distance, depuis l'œil de l'utilisateur, de l'origine de la transformation sur l'axe de profondeur (z)..
+
+Les mots-clés sont des raccourcis qui correspondent aux valeurs {{cssxref("&lt;percentage&gt;")}} suivantes :
+
+| Mot-clé  | Valeur |
+| -------- | ------ |
+| `left`   | `0%`   |
+| `center` | `50%`  |
+| `right`  | `100%` |
+| `top`    | `0%`   |
+| `bottom` | `100%` |
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voir la page sur <a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">l'utilisation des transformations CSS</a> pour des exemples supplémentaires.</p>
+Voir la page sur [l'utilisation des transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) pour des exemples supplémentaires.
 
-<h3 id="a_demonstration_of_various_transform_values">Illustrations des différentes valeurs de transform</h3>
+### Illustrations des différentes valeurs de transform
 
-<p>Cet exemple illustre ce que donnent les différentes valeurs de <code>transform-origin</code> pour différentes fonctions de transformation.</p>
+Cet exemple illustre ce que donnent les différentes valeurs de `transform-origin` pour différentes fonctions de transformation.
 
-<pre class="brush: html hidden">
-&lt;div class="container"&gt;
+```html hidden
+<div class="container">
 
-&lt;div class="example"&gt;
-  &lt;div class="box box1"&gt;&amp;nbsp;&lt;/div&gt;
-  &lt;div class="box original"&gt;&amp;nbsp;&lt;/div&gt;
-&lt;/div&gt;
+<div class="example">
+  <div class="box box1">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
 
-&lt;pre&gt;
+<pre>
 transform: none;
-&lt;/pre&gt;
+</pre>
 
-&lt;div class="example"&gt;
-  &lt;div class="box box2"&gt;&amp;nbsp;&lt;/div&gt;
-  &lt;div class="box original"&gt;&amp;nbsp;&lt;/div&gt;
-&lt;/div&gt;
+<div class="example">
+  <div class="box box2">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
 
-&lt;pre&gt;
+<pre>
 transform: rotate(30deg);
-&lt;/pre&gt;
+</pre>
 
-&lt;div class="example"&gt;
-  &lt;div class="box box3"&gt;&amp;nbsp;&lt;/div&gt;
-  &lt;div class="box original"&gt;&amp;nbsp;&lt;/div&gt;
-&lt;/div&gt;
+<div class="example">
+  <div class="box box3">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
 
-&lt;pre&gt;
+<pre>
 transform: rotate(30deg);
 transform-origin: 0 0;
-&lt;/pre&gt;
+</pre>
 
-&lt;div class="example"&gt;
-  &lt;div class="box box4"&gt;&amp;nbsp;&lt;/div&gt;
-  &lt;div class="box original"&gt;&amp;nbsp;&lt;/div&gt;
-&lt;/div&gt;
+<div class="example">
+  <div class="box box4">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
 
-&lt;pre&gt;
+<pre>
 transform: rotate(30deg);
 transform-origin: 100% 100%;
-&lt;/pre&gt;
+</pre>
 
-&lt;div class="example"&gt;
-  &lt;div class="box box5"&gt;&amp;nbsp;&lt;/div&gt;
-  &lt;div class="box original"&gt;&amp;nbsp;&lt;/div&gt;
-&lt;/div&gt;
+<div class="example">
+  <div class="box box5">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
 
-&lt;pre&gt;
+<pre>
 transform: rotate(30deg);
 transform-origin: -1em -3em;
-&lt;/pre&gt;
+</pre>
 
-&lt;div class="example"&gt;
-  &lt;div class="box box6"&gt;&amp;nbsp;&lt;/div&gt;
-  &lt;div class="box original"&gt;&amp;nbsp;&lt;/div&gt;
-&lt;/div&gt;
+<div class="example">
+  <div class="box box6">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
 
-&lt;pre&gt;
+<pre>
 transform: scale(1.7);
-&lt;/pre&gt;
+</pre>
 
-&lt;div class="example"&gt;
-  &lt;div class="box box7"&gt;&amp;nbsp;&lt;/div&gt;
-  &lt;div class="box original"&gt;&amp;nbsp;&lt;/div&gt;
-&lt;/div&gt;
+<div class="example">
+  <div class="box box7">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
 
-&lt;pre&gt;
+<pre>
 transform: scale(1.7);
 transform-origin: 0 0;
-&lt;/pre&gt;
+</pre>
 
-&lt;div class="example"&gt;
-  &lt;div class="box box8"&gt;&amp;nbsp;&lt;/div&gt;
-  &lt;div class="box original"&gt;&amp;nbsp;&lt;/div&gt;
-&lt;/div&gt;
+<div class="example">
+  <div class="box box8">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
 
-&lt;pre&gt;
+<pre>
 transform: scale(1.7);
 transform-origin: 100% -30%;
-&lt;/pre&gt;
+</pre>
 
-&lt;div class="example"&gt;
-  &lt;div class="box box9"&gt;&amp;nbsp;&lt;/div&gt;
-  &lt;div class="box original"&gt;&amp;nbsp;&lt;/div&gt;
-&lt;/div&gt;
+<div class="example">
+  <div class="box box9">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
 
-&lt;pre&gt;
+<pre>
 transform: skewX(50deg);
 transform-origin: 100% -30%;
-&lt;/pre&gt;
+</pre>
 
-&lt;div class="example"&gt;
-  &lt;div class="box box10"&gt;&amp;nbsp;&lt;/div&gt;
-  &lt;div class="box original"&gt;&amp;nbsp;&lt;/div&gt;
-&lt;/div&gt;
+<div class="example">
+  <div class="box box10">&nbsp;</div>
+  <div class="box original">&nbsp;</div>
+</div>
 
-&lt;pre&gt;
+<pre>
 transform: skewY(50deg);
 transform-origin: 100% -30%;
-&lt;/pre&gt;
-
-&lt;/div&gt;
 </pre>
 
-<pre class="brush: css hidden">
+</div>
+```
+
+```css hidden
 .container {
   display: grid;
   grid-template-columns: 200px 100px;
@@ -331,39 +299,23 @@ transform-origin: 100% -30%;
   transform: skewY(50deg);
   transform-origin: 100% -30%;
 }
+```
 
-</pre>
-
-<p>{{EmbedLiveSample('a_demonstration_of_various_transform_values', '', 1350) }}</p>
+{{EmbedLiveSample('a_demonstration_of_various_transform_values', '', 1350) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin')}}</td>
-   <td>{{Spec2('CSS3 Transforms')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin')}} | {{Spec2('CSS3 Transforms')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.transform-origin")}}</p>
+{{Compat("css.properties.transform-origin")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utiliser les transformations CSS</a></li>
- <li><a href="https://css-tricks.com/almanac/properties/t/transform-origin/">https://css-tricks.com/almanac/properties/t/transform-origin/</a></li>
-</ul>
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
+- <https://css-tricks.com/almanac/properties/t/transform-origin/>
diff --git a/files/fr/web/css/transform-style/index.md b/files/fr/web/css/transform-style/index.md
index 28415333d1..e7fbc2f301 100644
--- a/files/fr/web/css/transform-style/index.md
+++ b/files/fr/web/css/transform-style/index.md
@@ -9,19 +9,20 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform-style
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>transform-style</code></strong> définit si les éléments-fils d'un éléments sont positionnés dans l'espace tridimensionnel ou s'ils sont aplatis dans le plan de l'élément.</p>
+La propriété **`transform-style`** définit si les éléments-fils d'un éléments sont positionnés dans l'espace tridimensionnel ou s'ils sont aplatis dans le plan de l'élément.
 
-<div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/transform-style.html")}}
 
-<p>S'ils sont aplanis, les éléments-fils n'auront pas d'espace tridimensionnel propre.</p>
+S'ils sont aplanis, les éléments-fils n'auront pas d'espace tridimensionnel propre.
 
-<p>Cette propriété n'est pas héritée et doit donc être définie sur tous les descendants de l'éléments qui ne sont pas des feuilles (autrement dit des descendants qui n'ont aucun fils).</p>
+Cette propriété n'est pas héritée et doit donc être définie sur tous les descendants de l'éléments qui ne sont pas des feuilles (autrement dit des descendants qui n'ont aucun fils).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 transform-style: preserve-3d;
 transform-style: flat;
 
@@ -29,48 +30,31 @@ transform-style: flat;
 transform-style: inherit;
 transform-style: initial;
 transform-style: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>flat</code></dt>
- <dd>Indique que les fils de l'éléments sont positionnés dans le plan de l'élément.</dd>
- <dt><code>preserve-3d</code></dt>
- <dd>Indique que les fils de l'élément ciblé doivent être positionnés dans l'espace tridimensionnel.</dd>
-</dl>
+- `flat`
+  - : Indique que les fils de l'éléments sont positionnés dans le plan de l'élément.
+- `preserve-3d`
+  - : Indique que les fils de l'élément ciblé doivent être positionnés dans l'espace tridimensionnel.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}} | {{Spec2('CSS Transforms 2')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.transform-style")}}</p>
+{{Compat("css.properties.transform-style")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
-</ul>
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS)
diff --git a/files/fr/web/css/transform/index.md b/files/fr/web/css/transform/index.md
index f8340bbc01..5c745fca3d 100644
--- a/files/fr/web/css/transform/index.md
+++ b/files/fr/web/css/transform/index.md
@@ -8,21 +8,20 @@ tags:
   - Transformations CSS
 translation_of: Web/CSS/transform
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>transform</code></strong> modifie l'espace de coordonnées utilisé pour la mise en forme visuelle. Grâce à cette propriété, il est possible de translater les éléments, de les tourner, d'appliquer des homothéties, de les distordre pour en changer la perspective.</p>
+La propriété **`transform`** modifie l'espace de coordonnées utilisé pour la mise en forme visuelle. Grâce à cette propriété, il est possible de translater les éléments, de les tourner, d'appliquer des homothéties, de les distordre pour en changer la perspective.
 
-<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
+{{EmbedInteractiveExample("pages/css/transform.html")}}
 
-<p>Si la propriété est différente de <code>none</code>, un <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">contexte d'empilement</a> sera créé. Dans ce cas, l'élément agira comme le bloc englobant pour les éléments qu'il contient et qui ont <code>position</code><code>: fixed;</code> ou <code>position: absolute;</code>.</p>
+Si la propriété est différente de `none`, un [contexte d'empilement](/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches) sera créé. Dans ce cas, l'élément agira comme le bloc englobant pour les éléments qu'il contient et qui ont ` position``: fixed; ` ou `position: absolute;`.
 
-<div class="warning">
-<p><strong>Attention :</strong> Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Mod%C3%A8le_de_mise_en_forme_visuelle#Les_%C3%A9l%C3%A9ments_en_ligne_et_les_bo%C3%AEtes_en_ligne">boîtes en ligne non-remplacées</a>, des <a href="/fr/docs/Web/HTML/Element/col">colonnes de tableau</a> ou des <a href="/fr/docs/Web/HTML/Element/colgroup">groupes de colonnes de tableau</a> ne peuvent pas être transformés.</p>
-</div>
+> **Attention :** Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des [boîtes en ligne non-remplacées](https://developer.mozilla.org/fr/docs/Web/CSS/Mod%C3%A8le_de_mise_en_forme_visuelle#Les_%C3%A9l%C3%A9ments_en_ligne_et_les_bo%C3%AEtes_en_ligne), des [colonnes de tableau](/fr/docs/Web/HTML/Element/col) ou des [groupes de colonnes de tableau](/fr/docs/Web/HTML/Element/colgroup) ne peuvent pas être transformés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Keyword values */
+```css
+/* Keyword values */
 transform: none;
 
 /* Valeurs fonctionnelles */
@@ -61,38 +60,37 @@ transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
 transform: inherit;
 transform: initial;
 transform: unset;
-</pre>
+```
 
-<p>La propriété <code>transform</code> peut être définie avec le mot-clé <code><a href="#none">none</a></code> ou une ou plusieurs valeurs de type <code><a href="#transform-function">&lt;transform-function&gt;</a></code>.</p>
+La propriété `transform` peut être définie avec le mot-clé [`none`](#none) ou une ou plusieurs valeurs de type [`<transform-function>`](#transform-function).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>{{cssxref("&lt;transform-function&gt;")}}</dt>
- <dd>Une ou plusieurs <a href="/fr/docs/Web/CSS/transform-function">fonctions de transformation CSS</a> à appliquer. Les transformations sont composées entre elles de gauche à droite, ce qui signifie que les transformations composées sont en pratique appliquées de droite à gauche.</dd>
- <dt><code>none</code></dt>
- <dd>Aucune transformation ne sera appliquée.</dd>
-</dl>
+- {{cssxref("&lt;transform-function&gt;")}}
+  - : Une ou plusieurs [fonctions de transformation CSS](/fr/docs/Web/CSS/transform-function) à appliquer. Les transformations sont composées entre elles de gauche à droite, ce qui signifie que les transformations composées sont en pratique appliquées de droite à gauche.
+- `none`
+  - : Aucune transformation ne sera appliquée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<div class="note">
-<p><strong>Note :</strong> Si on utilise plusieurs fonctions dont <code><a href="/fr/docs/Web/CSS/transform-function/perspective()">perspective()</a></code>, celle-ci devra apparaître en premier.</p>
-</div>
+> **Note :** Si on utilise plusieurs fonctions dont [`perspective()`](</fr/docs/Web/CSS/transform-function/perspective()>), celle-ci devra apparaître en premier.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voir la page sur <a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">l'utilisation des transformations CSS</a>, {(cssxref("&lt;transform-function&gt;")}} ou l'exemple suivant.</p>
+Voir la page sur [l'utilisation des transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms), {(cssxref("\<transform-function>")}} ou l'exemple suivant.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;L'élément transformé&lt;/p&gt;</pre>
+```html
+<p>L'élément transformé</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   border: solid red;
 
   -webkit-transform: translate(100px) rotate(20deg);
@@ -100,57 +98,37 @@ transform: unset;
 
   transform: translate(100px) rotate(20deg);
   transform-origin: 0 -250px;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Exemples", "400", "170")}}</p>
+{{EmbedLiveSample("Exemples", "400", "170")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Les animations de déplacement ou de zoom peuvent poser des problèmes d'accessibilité en déclenchant certaines migraines. Si vous devez inclure des animations sur votre site web, vous devez fournir aux utilisateurs une méthode qui leur permette de réduire voire de désactiver les animations sur l'ensemble du site.</p>
+Les animations de déplacement ou de zoom peuvent poser des problèmes d'accessibilité en déclenchant certaines migraines. Si vous devez inclure des animations sur votre site web, vous devez fournir aux utilisateurs une méthode qui leur permette de réduire voire de désactiver les animations sur l'ensemble du site.
 
-<p>À cet égard, on pourra utiliser la caractéristique média <code><a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">prefers-reduced-motion</a></code> qui permet d'utiliser une requête média pour désactiver les animations si l'utilisateur a indiqué une telle préférence via son système / son navigateur.</p>
+À cet égard, on pourra utiliser la caractéristique média [`prefers-reduced-motion`](/fr/docs/Web/CSS/@media/prefers-reduced-motion) qui permet d'utiliser une requête média pour désactiver les animations si l'utilisateur a indiqué une telle préférence via son système / son navigateur.
 
-<p>Pour en savoir plus :</p>
+Pour en savoir plus :
 
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN : Comprendre WCAG - Explications pour les lignes directrives 2.3</a></li>
- <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Comprendre les critères de succès 2.3.3 - W3C - Comprendre WCAG 2.1</a></li>
-</ul>
+- [MDN : Comprendre WCAG - Explications pour les lignes directrives 2.3](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions)
+- [Comprendre les critères de succès 2.3.3 - W3C - Comprendre WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
-   <td>{{Spec2('CSS3 Transforms')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Ajout des fonctions de transformation en 3D.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                     | Commentaires                                 |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------- |
+| {{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}     | {{Spec2('CSS3 Transforms')}}     | Définition initiale.                         |
+| {{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}} | {{Spec2('CSS Transforms 2')}} | Ajout des fonctions de transformation en 3D. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.transform")}}</p>
+{{Compat("css.properties.transform")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Utiliser les transformations CSS</a></li>
- <li>Le type de donnée {{cssxref("&lt;transform-function&gt;")}}</li>
- <li><a href="https://paulirish.com/2010/introducing-css3please/#comment-36380">Plus d'informations sur les rotations CSS3 et les filtres matriciels sur le blog de Paul Irish</a></li>
-</ul>
+- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
+- Le type de donnée {{cssxref("&lt;transform-function&gt;")}}
+- [Plus d'informations sur les rotations CSS3 et les filtres matriciels sur le blog de Paul Irish](https://paulirish.com/2010/introducing-css3please/#comment-36380)
diff --git a/files/fr/web/css/transition-delay/index.md b/files/fr/web/css/transition-delay/index.md
index 6282a0a5cc..44205206ea 100644
--- a/files/fr/web/css/transition-delay/index.md
+++ b/files/fr/web/css/transition-delay/index.md
@@ -8,26 +8,25 @@ tags:
   - Transitions
 translation_of: Web/CSS/transition-delay
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>transition-delay</code></strong> indique la durée à attendre avant de débuter la transition qui s'applique pour un changement de propriété.</p>
+La propriété **`transition-delay`** indique la durée à attendre avant de débuter la transition qui s'applique pour un changement de propriété.
 
-<div>{{EmbedInteractiveExample("pages/css/transition-delay.html")}}</div>
+{{EmbedInteractiveExample("pages/css/transition-delay.html")}}
 
-<p>Cette durée peut être nulle, positive ou négative :</p>
+Cette durée peut être nulle, positive ou négative :
 
-<ul>
- <li>Une valeur de <code>0s</code> ou <code>0ms</code> indique que l'animation correspondante démarrera immédiatement lorsque la valeur sera modifiée.</li>
- <li>Une valeur positive permettra d'attendre avant de démarrer l'effet de transition.</li>
- <li>Une valeur négative lancera l'animation immédiatement mais à partir d'un état intermédiaire (comme si la  transition avait déjà commencé).</li>
-</ul>
+- Une valeur de `0s` ou `0ms` indique que l'animation correspondante démarrera immédiatement lorsque la valeur sera modifiée.
+- Une valeur positive permettra d'attendre avant de démarrer l'effet de transition.
+- Une valeur négative lancera l'animation immédiatement mais à partir d'un état intermédiaire (comme si la  transition avait déjà commencé).
 
-<p>Il est possible d'indiquer plusieurs valeurs d'attente. Chaque valeur sera appliquée à la propriété correspondante donnée par la liste {{cssxref("transition-property")}} (qui agit comme un index des propriétés concernées par les transitions). S'il n'y a pas suffisamment de valeurs dans cette liste, les valeurs précédentes seront répétées jusqu'à ce qu'il y en ait suffisamment. S'il y a plus de valeurs d'attente que d'éléments dans {{cssxref("transition-property")}}, la liste est simplement tronquée. Dans les deux cas, la déclaration CSS est considérée comme valide.</p>
+Il est possible d'indiquer plusieurs valeurs d'attente. Chaque valeur sera appliquée à la propriété correspondante donnée par la liste {{cssxref("transition-property")}} (qui agit comme un index des propriétés concernées par les transitions). S'il n'y a pas suffisamment de valeurs dans cette liste, les valeurs précédentes seront répétées jusqu'à ce qu'il y en ait suffisamment. S'il y a plus de valeurs d'attente que d'éléments dans {{cssxref("transition-property")}}, la liste est simplement tronquée. Dans les deux cas, la déclaration CSS est considérée comme valide.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs temporelles */
-/* Type &lt;time&gt; */
+```css
+/* Valeurs temporelles */
+/* Type <time> */
 transition-delay: 3s;
 transition-delay: 2s, 4ms;
 
@@ -35,38 +34,36 @@ transition-delay: 2s, 4ms;
 transition-delay: inherit;
 transition-delay: initial;
 transition-delay: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;time&gt;</code></dt>
- <dd>Une valeur {{cssxref("&lt;time&gt;")}} qui indique la durée à attendre avant de démarrer l'effet de transition déclenché par le changement de valeur d'une propriété.</dd>
-</dl>
+- `<time>`
+  - : Une valeur {{cssxref("&lt;time&gt;")}} qui indique la durée à attendre avant de démarrer l'effet de transition déclenché par le changement de valeur d'une propriété.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="exemple_illustrant_differentes_temporisations">Exemple illustrant différentes temporisations</h3>
+### Exemple illustrant différentes temporisations
 
-<h4>HTML</h4>
+#### HTML
 
-<pre class="brush:html">
-  &lt;div class="box delay-1"&gt;0,5 secondes&lt;/div&gt;
+```html
+  <div class="box delay-1">0,5 secondes</div>
 
-  &lt;div class="box delay-2"&gt;2 secondes&lt;/div&gt;
+  <div class="box delay-2">2 secondes</div>
 
-  &lt;div class="box delay-3"&gt;4 secondes&lt;/div&gt;
+  <div class="box delay-3">4 secondes</div>
 
-  &lt;button id="change"&gt;Changer&lt;/button&gt;
-</pre>
+  <button id="change">Changer</button>
+```
 
-<h4>CSS</h4>
+#### CSS
 
-<pre class="brush:css;">
+```css
 .box {
   margin: 20px;
   padding: 10px;
@@ -101,11 +98,12 @@ transition-delay: unset;
 .delay-3 {
   transition-delay: 4s;
 }
-</pre>
+```
 
-<h4>JavaScript</h4>
+#### JavaScript
 
-<pre class="brush:js">function change() {
+```js
+function change() {
   const elements = document.querySelectorAll("div.box");
   for (let element of elements) {
     element.classList.toggle("transformed-state");
@@ -114,40 +112,25 @@ transition-delay: unset;
 
 const changeButton = document.querySelector("#change");
 changeButton.addEventListener("click", change);
-</pre>
+```
 
-<h4>Résultat</h4>
+#### Résultat
 
-<div>{{EmbedLiveSample("exemple_illustrant_differentes_temporisations",275,200)}}</div>
+{{EmbedLiveSample("exemple_illustrant_differentes_temporisations",275,200)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.transition-delay")}}</p>
+{{Compat("css.properties.transition-delay")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Utiliser les transitions CSS</a></li>
- <li>L'API {{domxref("TransitionEvent")}}</li>
-</ul>
+- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
+- L'API {{domxref("TransitionEvent")}}
diff --git a/files/fr/web/css/transition-duration/index.md b/files/fr/web/css/transition-duration/index.md
index d24b28832a..2e58524571 100644
--- a/files/fr/web/css/transition-duration/index.md
+++ b/files/fr/web/css/transition-duration/index.md
@@ -8,18 +8,19 @@ tags:
   - Transitions
 translation_of: Web/CSS/transition-duration
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>transition-duration</code></strong> définit le nombre de secondes ou de millisecondes que doit durer une animation. La valeur par défaut, <code>0s</code>, indique qu'il n'y aura aucune animation.</p>
+La propriété **`transition-duration`** définit le nombre de secondes ou de millisecondes que doit durer une animation. La valeur par défaut, `0s`, indique qu'il n'y aura aucune animation.
 
-<div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div>
+{{EmbedInteractiveExample("pages/css/transition-duration.html")}}
 
-<p>Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par {{cssxref("transition-property")}} (qui agit comme un index des propriétés impactées par les animations). S'il y a moins de durées que d'éléments dans cette liste, l'agent utilisateur dupliquera les durées. S'il y a trop de durées, la liste sera tronquée. Dans les deux cas, la déclaration CSS sera considérée comme valide.</p>
+Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par {{cssxref("transition-property")}} (qui agit comme un index des propriétés impactées par les animations). S'il y a moins de durées que d'éléments dans cette liste, l'agent utilisateur dupliquera les durées. S'il y a trop de durées, la liste sera tronquée. Dans les deux cas, la déclaration CSS sera considérée comme valide.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs temporelles */
-/* Type &lt;time&gt; */
+```css
+/* Valeurs temporelles */
+/* Type <time> */
 transition-duration: 6s;
 transition-duration: 120ms;
 transition-duration: 1s, 15s;
@@ -29,38 +30,36 @@ transition-duration: 10s, 30s, 230ms;
 transition-duration: inherit;
 transition-duration: initial;
 transition-duration: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;time&gt;</code></dt>
- <dd>Une valeur {{cssxref("&lt;time&gt;")}} qui définit la durée que doit prendre l'animation pour changer la valeur d'une propriété (entre l'ancienne valeur et la nouvelle). Une durée de <code>0s</code> qu'aucune transition ne sera appliquée et que le passage d'un état à l'autre sera instantanné. Si la valeur utilisée est négative, la déclaration sera considérée comme invalide.</dd>
-</dl>
+- `<time>`
+  - : Une valeur {{cssxref("&lt;time&gt;")}} qui définit la durée que doit prendre l'animation pour changer la valeur d'une propriété (entre l'ancienne valeur et la nouvelle). Une durée de `0s` qu'aucune transition ne sera appliquée et que le passage d'un état à l'autre sera instantanné. Si la valeur utilisée est négative, la déclaration sera considérée comme invalide.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="exemple_illustrant_differentes_durees">Exemple illustrant différentes durées</h3>
+### Exemple illustrant différentes durées
 
-<h4>HTML</h4>
+#### HTML
 
-<pre class="brush:html">
-  &lt;div class="box duration-1"&gt;0,5 secondes&lt;/div&gt;
+```html
+  <div class="box duration-1">0,5 secondes</div>
 
-  &lt;div class="box duration-2"&gt;2 secondes&lt;/div&gt;
+  <div class="box duration-2">2 secondes</div>
 
-  &lt;div class="box duration-3"&gt;4 secondes&lt;/div&gt;
+  <div class="box duration-3">4 secondes</div>
 
-  &lt;button id="change"&gt;Changer&lt;/button&gt;
-</pre>
+  <button id="change">Changer</button>
+```
 
-<h4>CSS</h4>
+#### CSS
 
-<pre class="brush:css;">
+```css
 .box {
   margin: 20px;
   padding: 10px;
@@ -93,11 +92,12 @@ transition-duration: unset;
 .duration-3 {
   transition-duration: 4s;
 }
-</pre>
+```
 
-<h4>JavaScript</h4>
+#### JavaScript
 
-<pre class="brush:js">function change() {
+```js
+function change() {
   const elements = document.querySelectorAll("div.box");
   for (let element of elements) {
     element.classList.toggle("transformed-state");
@@ -106,41 +106,25 @@ transition-duration: unset;
 
 const changeButton = document.querySelector("#change");
 changeButton.addEventListener("click", change);
-</pre>
+```
 
-<h4>Résultat</h4>
+#### Résultat
 
-<div>{{EmbedLiveSample("exemple_illustrant_differentes_durees",275,200)}}</div>
+{{EmbedLiveSample("exemple_illustrant_differentes_durees",275,200)}}
 
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
+| Spécification                                                                                            | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Transitions', '#transition-duration', 'transition-duration')}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. |
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#transition-duration', 'transition-duration')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+{{cssinfo}}
 
-<p>{{cssinfo}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.properties.transition-duration")}}
 
-<p>{{Compat("css.properties.transition-duration")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
- <li>{{domxref("TransitionEvent")}}</li>
-</ul>
+- [Utiliser les transitions CSS](/fr/docs/CSS/Using_CSS_transitions "en/CSS/CSS transitions")
+- {{domxref("TransitionEvent")}}
diff --git a/files/fr/web/css/transition-property/index.md b/files/fr/web/css/transition-property/index.md
index cae24ac372..91e81acab7 100644
--- a/files/fr/web/css/transition-property/index.md
+++ b/files/fr/web/css/transition-property/index.md
@@ -7,26 +7,25 @@ tags:
   - Reference
 translation_of: Web/CSS/transition-property
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>transition-property</code></strong> désigne les noms des propriétés CSS sur lesquelles <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">un effet de transition</a> devrait être appliqué.</p>
+La propriété **`transition-property`** désigne les noms des propriétés CSS sur lesquelles [un effet de transition](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) devrait être appliqué.
 
-<div>{{EmbedInteractiveExample("pages/css/transition-property.html")}}</div>
+{{EmbedInteractiveExample("pages/css/transition-property.html")}}
 
-<div class="note">
-  <p><strong>Note :</strong> <a href="/fr/docs/Web/CSS/CSS_animated_properties">L'ensemble des propriétés CSS qui peuvent être animées</a> évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.</p>
-</div>
+> **Note :** [L'ensemble des propriétés CSS qui peuvent être animées](/fr/docs/Web/CSS/CSS_animated_properties) évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.
 
-<p>Si vous définissez une propriété raccourcie (par exemple {{cssxref("background")}}), toutes les propriétés détaillées correspondantes seront animées de la même façon.</p>
+Si vous définissez une propriété raccourcie (par exemple {{cssxref("background")}}), toutes les propriétés détaillées correspondantes seront animées de la même façon.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 transition-property: none;
 transition-property: all;
 
 /* Valeurs utilisant un identifiant */
-/* &lt;custom-ident&gt; */
+/* <custom-ident> */
 transition-property: test1;
 transition-property: test_05;
 transition-property: -specific;
@@ -41,55 +40,38 @@ transition-property: all, -moz-specific, sliding;
 transition-property: inherit;
 transition-property: initial;
 transition-property: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Aucune propriété n'est concernée par les transitions.</dd>
- <dt><code>all</code></dt>
- <dd>Toutes les propriétés qui peuvent avoir une transition animée seront concernées.</dd>
- <dt><code>&lt;custom-ident&gt;</code></dt>
- <dd>Une chaîne de caractère qui identifie la propriété pour laquelle on doit appliquer un effet de transition lorsque sa valeur change. Pour plus de détails sur la forme de cet identifiant, voir la page sur le type {{cssxref("&lt;custom-ident&gt;")}}.</dd>
-</dl>
+- `none`
+  - : Aucune propriété n'est concernée par les transitions.
+- `all`
+  - : Toutes les propriétés qui peuvent avoir une transition animée seront concernées.
+- `<custom-ident>`
+  - : Une chaîne de caractère qui identifie la propriété pour laquelle on doit appliquer un effet de transition lorsque sa valeur change. Pour plus de détails sur la forme de cet identifiant, voir la page sur le type {{cssxref("&lt;custom-ident&gt;")}}.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Il y a plusieurs exemples sur les transitions CSS qui se trouvent dans <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">l'article sur les transitions CSS</a>.</p>
+Il y a plusieurs exemples sur les transitions CSS qui se trouvent dans [l'article sur les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#transition-property-property', 'transition-property')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | État                                     | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Transitions', '#transition-property-property', 'transition-property')}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.transition-property")}}</p>
+{{Compat("css.properties.transition-property")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Utiliser les transitions CSS</a></li>
- <li>{{domxref("TransitionEvent")}}</li>
-</ul>
+- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
+- {{domxref("TransitionEvent")}}
diff --git a/files/fr/web/css/transition-timing-function/index.md b/files/fr/web/css/transition-timing-function/index.md
index 6581f0d272..bf33712e20 100644
--- a/files/fr/web/css/transition-timing-function/index.md
+++ b/files/fr/web/css/transition-timing-function/index.md
@@ -7,120 +7,116 @@ tags:
   - Reference
 translation_of: Web/CSS/transition-timing-function
 ---
-<div>{{CSSRef}}</div>
-
-<p>La propriété <strong><code>transition-timing-function</code></strong> décrit la façon dont les valeurs intermédiaires des propriétés CSS affectées par un <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">effet de transition</a> sont calculées. Ceci permet donc de définir une courbe d'accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.</p>
-
-<div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div>
-
-<p>Cette courbe d'accelération est définie en utilisant une {{cssxref("&lt;timing-function&gt;")}} pour chacune des propriétés à animer.</p>
-
-<p>Il est possible de définir plusieurs fonctions de temporisation dans une même déclaration ; chacune sera appliquée à la propriété correspondante listée avec la propriété {{cssxref("transition-property")}}, qui agit comme liste maîtresse :</p>
-
-<ul>
- <li>S'il y a moins de fonctions définies que d'éléments dans la liste, les valeurs manquantes sont remplacées par la valeur par défaut (<code>ease</code>).</li>
- <li>S'il y a trop de fonctions de temporisation, la liste est simplement tronquée à la bonne dimension.</li>
-</ul>
-
-<p>Dans les deux cas, la déclaration CSS reste valide.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">/* Valeurs avec un mot-clé */
-transition-timing-function: ease;
-transition-timing-function: ease-in;
-transition-timing-function: ease-out;
-transition-timing-function: ease-in-out;
-transition-timing-function: linear;
-transition-timing-function: step-start;
-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);
-
-/* Valeurs avec une fonction en escalier */
-transition-timing-function: steps(4, jump-start);
-transition-timing-function: steps(10, jump-end);
-transition-timing-function: steps(20, jump-none);
-transition-timing-function: steps(5, jump-both);
-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);
-
-/* Valeurs globales */
-transition-timing-function: inherit;
-transition-timing-function: initial;
-transition-timing-function: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;timing-function&gt;</code></dt>
- <dd>Chaque valeur {{cssxref("&lt;timing-function&gt;")}} représente une fonction temporelle à rattacher à chaque propriété de la transition définies grâce à {{cssxref("transition-property")}}.
- <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser la transition en intervalles de même durée.</p>
-
- <dl>
-  <dt><code>ease</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> : c'est la valeur par défaut, la vitesse de la transition augmente au milieu de celle-ci puis ralentit à la fin.</dd>
-  <dt><code>linear</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code> : la transition s'effectue à vitesse constante.</dd>
-  <dt><code>ease-in</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code> : la transition commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.</dd>
-  <dt><code>ease-out</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0, 0, 0.58, 1.0)</code> : la transition commence rapidement puis ralentit jusqu'à la fin.</dd>
-  <dt><code>ease-in-out</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code> : la transition commence lentement, accèlere puis ralentit à nouveau avant la fin.</dd>
-  <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
-  <dd>Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.</dd>
-  <dt><code>steps( n, &lt;jumpterm&gt;)</code></dt>
-  <dd>La transition s'effectue selon <em>n</em> étapes de durées égales. Ainsi, si n vaut 5, la transition se composera de cinq paliers. Selon la valeur du paramètre <em>jumpterm</em>, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
-  <dl>
-   <dt><code>jump-start</code></dt>
-   <dd>La fonction est continue à gauche et le premier saut se produit au début de la transition.</dd>
-   <dt><code>jump-end</code></dt>
-   <dd>La fonction est continue à droite et le dernier saut se produit à la fin de la transition.</dd>
-   <dt><code>jump-none</code></dt>
-   <dd>Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).</dd>
-   <dt><code>jump-both</code></dt>
-   <dd>Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant la transition.</dd>
-   <dt><code>start</code></dt>
-   <dd>Identique à <code>jump-start.</code></dd>
-   <dt><code>end</code></dt>
-   <dd>Identique à <code>jump-end.</code></dd>
-  </dl>
-  </dd>
-  <dt><code>step-start</code></dt>
-  <dd>Synonyme de <code>steps(1, jump-start)</code></dd>
-  <dt><code>step-end</code></dt>
-  <dd>Synonyme de <code>steps(1, jump-end)</code></dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+{{CSSRef}}
+
+La propriété **`transition-timing-function`** décrit la façon dont les valeurs intermédiaires des propriétés CSS affectées par un [effet de transition](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) sont calculées. Ceci permet donc de définir une courbe d'accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.
+
+{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}
+
+Cette courbe d'accelération est définie en utilisant une {{cssxref("&lt;timing-function&gt;")}} pour chacune des propriétés à animer.
+
+Il est possible de définir plusieurs fonctions de temporisation dans une même déclaration ; chacune sera appliquée à la propriété correspondante listée avec la propriété {{cssxref("transition-property")}}, qui agit comme liste maîtresse :
+
+- S'il y a moins de fonctions définies que d'éléments dans la liste, les valeurs manquantes sont remplacées par la valeur par défaut (`ease`).
+- S'il y a trop de fonctions de temporisation, la liste est simplement tronquée à la bonne dimension.
+
+Dans les deux cas, la déclaration CSS reste valide.
+
+## Syntaxe
+
+    /* Valeurs avec un mot-clé */
+    transition-timing-function: ease;
+    transition-timing-function: ease-in;
+    transition-timing-function: ease-out;
+    transition-timing-function: ease-in-out;
+    transition-timing-function: linear;
+    transition-timing-function: step-start;
+    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);
+
+    /* Valeurs avec une fonction en escalier */
+    transition-timing-function: steps(4, jump-start);
+    transition-timing-function: steps(10, jump-end);
+    transition-timing-function: steps(20, jump-none);
+    transition-timing-function: steps(5, jump-both);
+    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);
+
+    /* Valeurs globales */
+    transition-timing-function: inherit;
+    transition-timing-function: initial;
+    transition-timing-function: unset;
+
+### Valeurs
+
+- `<timing-function>`
+
+  - : Chaque valeur {{cssxref("&lt;timing-function&gt;")}} représente une fonction temporelle à rattacher à chaque propriété de la transition définies grâce à {{cssxref("transition-property")}}.
+
+    Les valeurs avec des mots-clés (`ease`, `linear`, `ease-in-out`, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction `cubic-bezier()` permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser la transition en intervalles de même durée.
+
+    - `ease`
+      - : Correspond à `cubic-bezier(0.25, 0.1, 0.25, 1.0)` : c'est la valeur par défaut, la vitesse de la transition augmente au milieu de celle-ci puis ralentit à la fin.
+    - `linear`
+      - : Correspond à `cubic-bezier(0.0, 0.0, 1.0, 1.0)` : la transition s'effectue à vitesse constante.
+    - `ease-in`
+      - : Correspond à `cubic-bezier(0.42, 0, 1.0, 1.0)` : la transition commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.
+    - `ease-out`
+      - : Correspond à `cubic-bezier(0, 0, 0.58, 1.0)` : la transition commence rapidement puis ralentit jusqu'à la fin.
+    - `ease-in-out`
+      - : Correspond à `cubic-bezier(0.42, 0, 0.58, 1.0)` : la transition commence lentement, accèlere puis ralentit à nouveau avant la fin.
+    - `cubic-bezier(p1, p2, p3, p4)`
+      - : Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.
+    - `steps( n, <jumpterm>)`
+
+      - : La transition s'effectue selon _n_ étapes de durées égales. Ainsi, si n vaut 5, la transition se composera de cinq paliers. Selon la valeur du paramètre _jumpterm_, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
+
+        - `jump-start`
+          - : La fonction est continue à gauche et le premier saut se produit au début de la transition.
+        - `jump-end`
+          - : La fonction est continue à droite et le dernier saut se produit à la fin de la transition.
+        - `jump-none`
+          - : Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).
+        - `jump-both`
+          - : Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant la transition.
+        - `start`
+          - : Identique à `jump-start.`
+        - `end`
+          - : Identique à `jump-end.`
+
+    - `step-start`
+      - : Synonyme de `steps(1, jump-start)`
+    - `step-end`
+      - : Synonyme de `steps(1, jump-end)`
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<div>
-<h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3>
+### Courbes de Bézier cubiques
 
-<pre class="brush:html hidden">&lt;div class="parent"&gt;
-  &lt;div class="ease"&gt;ease&lt;/div&gt;
-  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
-  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
-  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
-  &lt;div class="linear"&gt;linear&lt;/div&gt;
-  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html hidden
+<div class="parent">
+  <div class="ease">ease</div>
+  <div class="easein">ease-in</div>
+  <div class="easeout">ease-out</div>
+  <div class="easeinout">ease-in-out</div>
+  <div class="linear">linear</div>
+  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
+</div>
+```
 
-<pre class="brush:css hidden">.parent {}
-.parent &gt; div[class] {
+```css hidden
+.parent {}
+.parent > div[class] {
     width: 12em;
     min-width: 12em;
     margin-bottom: 4px;
@@ -130,7 +126,7 @@ transition-timing-function: unset;
     transition-property: all;
     transition-duration: 7s;
 }
-.parent &gt; div.box1{
+.parent > div.box1{
     width: 90vw;
     min-width: 24em;
     background-color: magenta;
@@ -139,19 +135,21 @@ transition-timing-function: unset;
     transition-property: all;
     transition-duration: 2s;
 }
-</pre>
+```
 
-<pre class="brush:js hidden">function updateTransition() {
-  var els = document.querySelectorAll(".parent &gt; div[class]");
-  for(var c = els.length, i = 0; i &lt; c; i++) {
+```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");
   }
 }
 
 var intervalID = window.setInterval(updateTransition, 10000);
-</pre>
+```
 
-<pre class="brush: css">.ease {
+```css
+.ease {
    transition-timing-function: ease;
 }
 .easein {
@@ -168,25 +166,27 @@ var intervalID = window.setInterval(updateTransition, 10000);
 }
 .cb {
    transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
-}</pre>
+}
+```
 
-<div>{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}</div>
-</div>
+{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}
 
-<div>
-<h3 id="Fonctions_en_créneaux">Fonctions en créneaux</h3>
+### Fonctions en créneaux
 
-<pre class="brush:html hidden">&lt;div class="parent"&gt;
-  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
-  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
-  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
-  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
-  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
-  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html hidden
+<div class="parent">
+  <div class="jump-start">jump-start</div>
+  <div class="jump-end">jump-end</div>
+  <div class="jump-both">jump-both</div>
+  <div class="jump-none">jump-none</div>
+  <div class="step-start">step-start</div>
+  <div class="step-end">step-end</div>
+</div>
+```
 
-<pre class="brush:css hidden">.parent {}
-.parent &gt; div[class] {
+```css hidden
+.parent {}
+.parent > div[class] {
     width: 12em;
     min-width: 12em;
     margin-bottom: 4px;
@@ -196,7 +196,7 @@ var intervalID = window.setInterval(updateTransition, 10000);
     transition-property: all;
     transition-duration:7s;
 }
-.parent &gt; div.box1{
+.parent > div.box1{
     width: 90vw;
     min-width: 24em;
     background-color: magenta;
@@ -205,19 +205,21 @@ var intervalID = window.setInterval(updateTransition, 10000);
     transition-property: all;
     transition-duration:2s;
 }
-</pre>
+```
 
-<pre class="brush:js hidden">function updateTransition() {
-  var els = document.querySelectorAll(".parent &gt; div[class]");
-  for(var c = els.length, i = 0; i &lt; c; i++) {
+```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");
   }
 }
 
 var intervalID = window.setInterval(updateTransition, 10000);
-</pre>
+```
 
-<pre class="brush: css">.jump-start {
+```css
+.jump-start {
    transition-timing-function: steps(5, jump-start);
 }
 .jump-end {
@@ -234,45 +236,30 @@ var intervalID = window.setInterval(updateTransition, 10000);
 }
 .step-end {
    transition-timing-function: step-end;
-}</pre>
+}
+```
 
-<div>{{EmbedLiveSample("Fonctions_en_créneaux")}}</div>
-</div>
+{{EmbedLiveSample("Fonctions_en_créneaux")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Certaines animations permettent de guider les utilisateurs vers les actions possibles et utiles, d'illustrer les relations qui existent entre les éléments d'interface et d'informer les utilisateurs quant aux actions qui se sont produites. Les animations réduisent ainsi la charge cognitive et améliorent la perception du changement.</p>
+Certaines animations permettent de guider les utilisateurs vers les actions possibles et utiles, d'illustrer les relations qui existent entre les éléments d'interface et d'informer les utilisateurs quant aux actions qui se sont produites. Les animations réduisent ainsi la charge cognitive et améliorent la perception du changement.
 
-<p>Toutefois, certaines animations s'avèrent problématiques pour les personnes souffrant de troubles cognitifs, d'épilepsie ou autre. Pour cela, on prévoira d'intégrer un mécanisme qui permette de suspendre ou de désactiver l'animation. De même, on pourra tirer parti de <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">la requête média sur la réduction de mouvements</a> afin de créer une expérience complémentaire pour les personnes ayant exprimé leur souhait d'absence d'animation.</p>
+Toutefois, certaines animations s'avèrent problématiques pour les personnes souffrant de troubles cognitifs, d'épilepsie ou autre. Pour cela, on prévoira d'intégrer un mécanisme qui permette de suspendre ou de désactiver l'animation. De même, on pourra tirer parti de [la requête média sur la réduction de mouvements](/fr/docs/Web/CSS/@media/prefers-reduced-motion) afin de créer une expérience complémentaire pour les personnes ayant exprimé leur souhait d'absence d'animation.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État/th&gt;</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État/th>                                 | Commentaires        |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- |
+| {{SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function')}} | {{Spec2('CSS3 Transitions')}} | Définition initiale |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.transition-timing-function")}}</p>
+{{Compat("css.properties.transition-timing-function")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
- <li>{{domxref("TransitionEvent")}}</li>
-</ul>
+- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS "en/CSS/CSS transitions")
+- {{domxref("TransitionEvent")}}
diff --git a/files/fr/web/css/transition/index.md b/files/fr/web/css/transition/index.md
index 878ab25a78..4fffc00305 100644
--- a/files/fr/web/css/transition/index.md
+++ b/files/fr/web/css/transition/index.md
@@ -8,17 +8,18 @@ tags:
   - Transitions CSS
 translation_of: Web/CSS/transition
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>transition</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> pour les propriétés {{cssxref("transition-property")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-timing-function")}} et {{cssxref("transition-delay")}}.</p>
+La propriété **`transition`** est [une propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) pour les propriétés {{cssxref("transition-property")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-timing-function")}} et {{cssxref("transition-delay")}}.
 
-<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>
+{{EmbedInteractiveExample("pages/css/transition.html")}}
 
-<p>Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide <a href="/fr/docs/Web/CSS/Pseudo-classes">de pseudo-classes</a> telles que {{cssxref(":hover")}} ou {{cssxref(":active")}} ou être définis dynamiquement avec JavaScript.</p>
+Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide [de pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) telles que {{cssxref(":hover")}} ou {{cssxref(":active")}} ou être définis dynamiquement avec JavaScript.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* S'applique à une propriété */
+```css
+/* S'applique à une propriété */
 /* on a le nom et la durée */
 transition: margin-right 4s;
 
@@ -41,62 +42,44 @@ transition: all 0.5s ease-out;
 transition: inherit;
 transition: initial;
 transition: unset;
-</pre>
+```
 
-<p>La propriété <code>transition</code> se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.</p>
+La propriété `transition` se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.
 
-<p>Chacune des propriétés de transition décrit la transition qui devrait être appliquée à une propriété donnée (ou pour les valeurs spéciales <code>all</code> et <code>none</code>). Une propriété de transition inclut :</p>
+Chacune des propriétés de transition décrit la transition qui devrait être appliquée à une propriété donnée (ou pour les valeurs spéciales `all` et `none`). Une propriété de transition inclut :
 
-<ul>
- <li>zéro ou une valeur qui représente la propriété à laquelle la transition s'applique. Ça peut être :
-  <ul>
-   <li>le mot-clé <code>none</code></li>
-   <li>le mot-clé <code>all</code></li>
-   <li>Un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) qui nomme une propriété CSS.</li>
-  </ul>
- </li>
- <li>zéro ou une valeur {{cssxref("&lt;single-transition-timing-function&gt;")}} qui représente la fonction de temporisation utilisée pour la transition</li>
- <li>zéro, une ou deux valeurs {{cssxref("&lt;time&gt;")}}. La première valeur qui peut être interprétée comme un temps sera affectée à la propriété {{cssxref("transition-duration")}} et la seconde valeur qui peut être affectée comme un temps sera affectée à la propriété {{cssxref("transition-delay")}}.</li>
-</ul>
+- zéro ou une valeur qui représente la propriété à laquelle la transition s'applique. Ça peut être :
 
-<p>Si la liste des valeurs est trop courte pour les différentes propriétés, les valeurs seront répétées. Si la liste est trop longue, elle sera tronquée.</p>
+  - le mot-clé `none`
+  - le mot-clé `all`
+  - Un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) qui nomme une propriété CSS.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+- zéro ou une valeur {{cssxref("&lt;single-transition-timing-function&gt;")}} qui représente la fonction de temporisation utilisée pour la transition
+- zéro, une ou deux valeurs {{cssxref("&lt;time&gt;")}}. La première valeur qui peut être interprétée comme un temps sera affectée à la propriété {{cssxref("transition-duration")}} et la seconde valeur qui peut être affectée comme un temps sera affectée à la propriété {{cssxref("transition-delay")}}.
+
+Si la liste des valeurs est trop courte pour les différentes propriétés, les valeurs seront répétées. Si la liste est trop longue, elle sera tronquée.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Plusieurs exemples de transitions CSS sont présentés <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">sur l'article sur les transitions CSS</a>.</p>
+Plusieurs exemples de transitions CSS sont présentés [sur l'article sur les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions "en/CSS/CSS transitions").
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition')}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.transition")}}</p>
+{{Compat("css.properties.transition")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
- <li>{{domxref("TransitionEvent")}}</li>
-</ul>
+- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions "en/CSS/CSS transitions")
+- {{domxref("TransitionEvent")}}
diff --git a/files/fr/web/css/translate/index.md b/files/fr/web/css/translate/index.md
index fe27ca5f8b..0016830cda 100644
--- a/files/fr/web/css/translate/index.md
+++ b/files/fr/web/css/translate/index.md
@@ -8,13 +8,14 @@ tags:
   - Reference
 translation_of: Web/CSS/translate
 ---
-<div>{{CSSRef}}{{seecompattable}}</div>
+{{CSSRef}}{{seecompattable}}
 
-<p>La propriété <strong><code>translate</code></strong> permet de définir des opérations de translations, individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour <code>transform</code>.</p>
+La propriété **`translate`** permet de définir des opérations de translations, individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour `transform`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 translate: none;
 
 /* Valeurs uniques */
@@ -27,36 +28,37 @@ translate: 50% 105px;
 
 /* Trois valeurs */
 translate: 50% 105px 5rem;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>Une seule valeur de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}})</dt>
- <dd>Une longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction <code>translate()</code> (translation en deux dimensions) avec une seule valeur.</dd>
- <dt>Deux valeurs de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}})</dt>
- <dd>Deux longueurs ({{cssxref("&lt;length&gt;")}}) ou pourcentages ({{cssxref("&lt;percentage&gt;")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction <code>translate()</code> appelée avec ces deux arguments.</dd>
- <dt>Trois valeurs</dt>
- <dd>Deux valeurs de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}}) et une longueur ({{cssxref("&lt;length&gt;")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction <code>translate3d()</code> appelée avec ces trois arguments.</dd>
- <dt><code>none</code></dt>
- <dd>Cette valeur indique qu'aucune translation ne devrait être appliquée.</dd>
-</dl>
+- Une seule valeur de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}})
+  - : Une longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction `translate()` (translation en deux dimensions) avec une seule valeur.
+- Deux valeurs de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}})
+  - : Deux longueurs ({{cssxref("&lt;length&gt;")}}) ou pourcentages ({{cssxref("&lt;percentage&gt;")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction `translate()` appelée avec ces deux arguments.
+- Trois valeurs
+  - : Deux valeurs de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}}) et une longueur ({{cssxref("&lt;length&gt;")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction `translate3d()` appelée avec ces trois arguments.
+- `none`
+  - : Cette valeur indique qu'aucune translation ne devrait être appliquée.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="translate"&gt;Translation&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <p class="translate">Translation</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">* {
+```css
+* {
   box-sizing: border-box;
 }
 
@@ -85,41 +87,26 @@ p {
 div:hover .translate {
   translate: 200px 50px;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
-   <td>{{Spec2('CSS Transforms 2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}} | {{Spec2('CSS Transforms 2')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.translate")}}</p>
+{{Compat("css.properties.translate")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref('scale')}}</li>
- <li>{{cssxref('rotate')}}</li>
- <li>{{cssxref('transform')}}</li>
-</ul>
+- {{cssxref('scale')}}
+- {{cssxref('rotate')}}
+- {{cssxref('transform')}}
diff --git a/files/fr/web/css/translation-value/index.md b/files/fr/web/css/translation-value/index.md
index 28396eb769..369e797128 100644
--- a/files/fr/web/css/translation-value/index.md
+++ b/files/fr/web/css/translation-value/index.md
@@ -7,35 +7,20 @@ tags:
   - Type
 translation_of: Web/CSS/translation-value
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le type de donnée <strong><code>&lt;translation-value&gt;</code></strong> est utilisé dans les arguments pour certaines fonctions de <a href="/fr/docs/Web/CSS/transform" title="CSS/transform">transformation</a> dont <code><a href="/fr/docs/Web/CSS/transform-function/translate">translate()</a></code>, <code><a href="/fr/docs/Web/CSS/transform-function/translateX">translateX()</a></code>, <code><a href="/fr/docs/Web/CSS/transform-function/translateY">translateY()</a></code>, et <code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code>. </p>
+Le type de donnée **`<translation-value>`** est utilisé dans les arguments pour certaines fonctions de [transformation](/fr/docs/Web/CSS/transform "CSS/transform") dont [`translate()`](/fr/docs/Web/CSS/transform-function/translate), [`translateX()`](/fr/docs/Web/CSS/transform-function/translateX), [`translateY()`](/fr/docs/Web/CSS/transform-function/translateY), et [`translate3d()`](/fr/docs/Web/CSS/transform-function/translate3d).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Un argument <code>&lt;translation-value&gt;</code> peut être une valeur de type {{cssxref("&lt;length&gt;")}} ou de type {{cssxref("&lt;percentage&gt;")}}.</p>
+Un argument `<translation-value>` peut être une valeur de type {{cssxref("&lt;length&gt;")}} ou de type {{cssxref("&lt;percentage&gt;")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transforms', '#transform-functions', 'The Transform Functions')}}</td>
-   <td>{{Spec2('CSS3 Transforms')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | Statut                               | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------ |
+| {{SpecName('CSS3 Transforms', '#transform-functions', 'The Transform Functions')}} | {{Spec2('CSS3 Transforms')}} |              |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("transform")}}</li>
-</ul>
+- {{cssxref("transform")}}
diff --git a/files/fr/web/css/tutorials/index.md b/files/fr/web/css/tutorials/index.md
index 58b0c426b2..4621b01771 100644
--- a/files/fr/web/css/tutorials/index.md
+++ b/files/fr/web/css/tutorials/index.md
@@ -8,50 +8,43 @@ tags:
   - Tutorial
 translation_of: Web/CSS/Tutorials
 ---
-<p>Apprendre CSS peut sembler une tâche impressionnante. Cependant, pour vous aider, nous avons écrit de nombreux <strong>tutoriels à propos de CSS</strong>. Certains d'entre eux sont à l'attention des non-initiés, tandis que d'autres présentent des fonctionnalités complexes qui peuvent être utiles aux utilisateurs expérimentés.</p>
-
-<p>Cette page liste l'ensemble des tutoriels, avec une courte description. Ils sont regroupés par complexité, de sorte que vous puissiez choisir le plus adapté à votre niveau.</p>
-
-
-<h2 id="Beginner-level_CSS_tutorials">Tutoriels pour les débutants</h2>
-
-<dl>
- <dt><a href="/fr/docs/Learn/CSS/First_steps">Débuter en CSS</a></dt>
- <dd>Ce guide est destiné aux non-initiés : vous n'avez jamais écrit une seule ligne de CSS ? Cet article est pour vous ! Il explique les concepts fondamentaux du langage et vous guide via la rédaction de feuilles de style basiques.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Utiliser plusieurs arrière-plans</a></dt>
- <dd>Les arrière-plans sont fondamentaux afin d'obtenir une mise en forme appréciable. CSS vous permet d'en définir plusieurs pour chaque boîte. Ce tutoriel explique comment les arrière-plans interagissent et comment utiliser ces interactions pour réaliser des effets.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images">Mise à l'échelle des images d'arrière-plan</a></dt>
- <dd>CSS vous permet de redimensionner des images utilisées comme élément d'arrière-plan. Ce tutoriel décrit comment faire.</dd>
- <dt><a href="/fr/docs/Web/CSS/Media_Queries"><i>Media queries</i> (requêtes de média)</a></dt>
- <dd>La taille des écrans ou la nature des appareils varie grandement (cela va des écrans tactiles aux documents imprimés). Les <i>Media queries</i> sont des briques fondamentales pour construire des sites web avec un rendu de grande qualité sur n'importe quel appareil.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Comprendre le z-index</a></dt>
- <dd>Cet indice vous permet de contrôler la superposition des boites qui sont affichées sur une page web. Vous verrez ici comment il est calculé et utilisé.</dd>
-</dl>
-
-<h2 id="Intermediate-level_CSS_tutorials">Tutoriels de niveau intermédiaire</h2>
-
-<p>Certaines fonctionnalités, parfois plus récemment apparues, sont plus avancées. Une fois les bases acquises, vous pourrez les utiliser distinctement si besoin.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Compteurs CSS</a></dt>
- <dd>Compter les éléments et pages est une tâche aisée en CSS. Apprenez à utiliser <a href="/fr/docs/Web/CSS/counter-reset"><code>counter-reset</code></a>, <a href="/fr/docs/Web/CSS/counter-increment"><code>counter-increment</code></a>, <a href="/fr/docs/Web/CSS/counters()"><code>counters()</code></a>, et <a href="/fr/docs/Web/CSS/counter()"><code>counter()</code></a>.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Animations CSS</a></dt>
- <dd>Les animations CSS vous permettent de définir des configurations de style via des <i><a href="/fr/docs/Web/CSS/CSS_Animations">keyframes</a></i>, et de réaliser une transition entre elles pour définir une animation.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Transitions CSS</a></dt>
- <dd>Les transitions CSS vous permettent de définir une animation entre plusieurs styles et contrôlent la manière dont elles s'appliquent.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Transformations CSS</a></dt>
- <dd>Les transformations CSS vous permettent de changer la position d'éléments en modifiant leurs coordonnées spatiales. On peut ainsi réaliser des translations, rotations et déformations en espaces 3D et 2D.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Dégradés CSS</a></dt>
- <dd>Les dégradés CSS forment des images via un dégradé entre plusieurs couleurs. Il existe différents types de dégradés CSS : linéaire ou radial, répétable ou non. Ce tutoriel décrit comment les utiliser.</dd>
-</dl>
-
-<h2 id="Advanced-level_CSS_tutorials">Tutoriels avancés</h2>
-
-<p>CSS possède différentes méthodes pour organiser la disposition du contenu dans un document.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Mise en page avec les colonnes</a></dt>
- <dd>Il est possible d'organiser une mise en page selon plusieurs colonnes. Si ce n'est pas une méthode visuelle fréquente pour les écrans, on la retrouve souvent sur les documents imprimés.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Mise en page avec les boîtes flexibles (<i>Flexbox</i>)</a></dt>
- <dd>Cette mise en page permet de donner de la flexibilité aux boîtes, celles-ci pouvant alors être redimensionnées de façon fluide.</dd>
-</dl>
+Apprendre CSS peut sembler une tâche impressionnante. Cependant, pour vous aider, nous avons écrit de nombreux **tutoriels à propos de CSS**. Certains d'entre eux sont à l'attention des non-initiés, tandis que d'autres présentent des fonctionnalités complexes qui peuvent être utiles aux utilisateurs expérimentés.
+
+Cette page liste l'ensemble des tutoriels, avec une courte description. Ils sont regroupés par complexité, de sorte que vous puissiez choisir le plus adapté à votre niveau.
+
+## Tutoriels pour les débutants
+
+- [Débuter en CSS](/fr/docs/Learn/CSS/First_steps)
+  - : Ce guide est destiné aux non-initiés : vous n'avez jamais écrit une seule ligne de CSS ? Cet article est pour vous ! Il explique les concepts fondamentaux du langage et vous guide via la rédaction de feuilles de style basiques.
+- [Utiliser plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
+  - : Les arrière-plans sont fondamentaux afin d'obtenir une mise en forme appréciable. CSS vous permet d'en définir plusieurs pour chaque boîte. Ce tutoriel explique comment les arrière-plans interagissent et comment utiliser ces interactions pour réaliser des effets.
+- [Mise à l'échelle des images d'arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images)
+  - : CSS vous permet de redimensionner des images utilisées comme élément d'arrière-plan. Ce tutoriel décrit comment faire.
+- [_Media queries_ (requêtes de média)](/fr/docs/Web/CSS/Media_Queries)
+  - : La taille des écrans ou la nature des appareils varie grandement (cela va des écrans tactiles aux documents imprimés). Les _Media queries_ sont des briques fondamentales pour construire des sites web avec un rendu de grande qualité sur n'importe quel appareil.
+- [Comprendre le z-index](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index)
+  - : Cet indice vous permet de contrôler la superposition des boites qui sont affichées sur une page web. Vous verrez ici comment il est calculé et utilisé.
+
+## Tutoriels de niveau intermédiaire
+
+Certaines fonctionnalités, parfois plus récemment apparues, sont plus avancées. Une fois les bases acquises, vous pourrez les utiliser distinctement si besoin.
+
+- [Compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+  - : Compter les éléments et pages est une tâche aisée en CSS. Apprenez à utiliser [`counter-reset`](/fr/docs/Web/CSS/counter-reset), [`counter-increment`](/fr/docs/Web/CSS/counter-increment), [`counters()`](</fr/docs/Web/CSS/counters()>), et [`counter()`](</fr/docs/Web/CSS/counter()>).
+- [Animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+  - : Les animations CSS vous permettent de définir des configurations de style via des _[keyframes](/fr/docs/Web/CSS/CSS_Animations)_, et de réaliser une transition entre elles pour définir une animation.
+- [Transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
+  - : Les transitions CSS vous permettent de définir une animation entre plusieurs styles et contrôlent la manière dont elles s'appliquent.
+- [Transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
+  - : Les transformations CSS vous permettent de changer la position d'éléments en modifiant leurs coordonnées spatiales. On peut ainsi réaliser des translations, rotations et déformations en espaces 3D et 2D.
+- [Dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+  - : Les dégradés CSS forment des images via un dégradé entre plusieurs couleurs. Il existe différents types de dégradés CSS : linéaire ou radial, répétable ou non. Ce tutoriel décrit comment les utiliser.
+
+## Tutoriels avancés
+
+CSS possède différentes méthodes pour organiser la disposition du contenu dans un document.
+
+- [Mise en page avec les colonnes](/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts)
+  - : Il est possible d'organiser une mise en page selon plusieurs colonnes. Si ce n'est pas une méthode visuelle fréquente pour les écrans, on la retrouve souvent sur les documents imprimés.
+- [Mise en page avec les boîtes flexibles (_Flexbox_)](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+  - : Cette mise en page permet de donner de la flexibilité aux boîtes, celles-ci pouvant alors être redimensionnées de façon fluide.
diff --git a/files/fr/web/css/type_selectors/index.md b/files/fr/web/css/type_selectors/index.md
index c698a865db..307773af45 100644
--- a/files/fr/web/css/type_selectors/index.md
+++ b/files/fr/web/css/type_selectors/index.md
@@ -8,74 +8,52 @@ tags:
 translation_of: Web/CSS/Type_selectors
 original_slug: Web/CSS/Sélecteurs_de_type
 ---
-<div>{{CSSRef("Selectors")}}</div>
+{{CSSRef("Selectors")}}
 
-<p>Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.</p>
+Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.
 
-<pre class="brush: css no-line-numbers">/* Cibler tous les éléments &lt;a&gt;. */
+```css
+/* Cibler tous les éléments <a>. */
 a {
   color: red;
-}</pre>
+}
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">élément { <em>style propriétés</em> }
-</pre>
+    élément { style propriétés }
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">span {
+```css
+span {
   background-color: skyblue;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;span&gt;Voici un élément &lt;code&gt;span&lt;/code&gt; avec du texte.&lt;/span&gt;
-&lt;p&gt;Et là un élément &lt;code&gt;p&lt;/code&gt;.&lt;/p&gt;
-&lt;span&gt;Enfin, un autre élément &lt;code&gt;span&lt;/code&gt;.&lt;/span&gt;
-</pre>
+```html
+<span>Voici un élément <code>span</code> avec du texte.</span>
+<p>Et là un élément <code>p</code>.</p>
+<span>Enfin, un autre élément <code>span</code>.</span>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', 200, 150)}}</p>
+{{EmbedLiveSample('Exemples', 200, 150)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. |
+| {{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}                 | {{Spec2('CSS3 Selectors')}} | Aucune modification. |
+| {{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}         | {{Spec2('CSS2.1')}}             |                      |
+| {{SpecName('CSS1', '#basic-concepts', 'type selectors')}}                             | {{Spec2('CSS1')}}             | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.selectors.type")}}</p>
+{{Compat("css.selectors.type")}}
diff --git a/files/fr/web/css/unicode-bidi/index.md b/files/fr/web/css/unicode-bidi/index.md
index 409716c23c..485461bb80 100644
--- a/files/fr/web/css/unicode-bidi/index.md
+++ b/files/fr/web/css/unicode-bidi/index.md
@@ -7,17 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/unicode-bidi
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>unicode-bidi</code></strong>, associée à la propriété {{cssxref("direction")}}, permet de gérer du texte bidirectionnel dans un document. Par exemple, si un bloc de texte contient à la fois du texte qui se lit de droite à gauche et du texte qui se lit de gauche à droite, l'agent utilisateur utilisera un algorithme Unicode complexe pour savoir comment afficher le texte. Cette propriété prend le pas sur l'algorithme et permet au développeur de contrôler l'intégration du texte.</p>
+La propriété **`unicode-bidi`**, associée à la propriété {{cssxref("direction")}}, permet de gérer du texte bidirectionnel dans un document. Par exemple, si un bloc de texte contient à la fois du texte qui se lit de droite à gauche et du texte qui se lit de gauche à droite, l'agent utilisateur utilisera un algorithme Unicode complexe pour savoir comment afficher le texte. Cette propriété prend le pas sur l'algorithme et permet au développeur de contrôler l'intégration du texte.
 
-<p>Les propriétés <code>unicode-bidi</code> et {{cssxref("direction")}} sont les deux seules propriétés qui ne sont pas impactées par {{cssxref("all")}}.</p>
+Les propriétés `unicode-bidi` et {{cssxref("direction")}} sont les deux seules propriétés qui ne sont pas impactées par {{cssxref("all")}}.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété est d'abord destinée aux concepteurs de DTD, les auteurs Web ne devraient pas surcharger sa valeur.</p>
-</div>
+> **Note :** Cette propriété est d'abord destinée aux concepteurs de DTD, les auteurs Web ne devraient pas surcharger sa valeur.
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 unicode-bidi: normal;
 unicode-bidi: embed;
 unicode-bidi: isolate;
@@ -29,72 +28,52 @@ unicode-bidi: plaintext;
 unicode-bidi: inherit;
 unicode-bidi: initial;
 unicode-bidi: unset;
-</pre>
+```
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>L'élément n'ajoute pas de niveau de logique supplémentaire pour l'intégration et l'application de l'algorithme de bidirectionnalité. Pour les éléments en ligne, le réarrangement des éléments est fait entre les frontières des éléments.</dd>
- <dt><code>embed</code></dt>
- <dd>Si l'élément est en ligne, la valeur ajoute un niveau de logique supplémentaire pour l'intégration. La direction du niveau d'intégration est fournie par la propriété {{cssxref("direction")}}.</dd>
- <dt><code>bidi-override</code></dt>
- <dd>Pour les éléments en ligne, cela surcharge la directionnalité. Pour les conteneurs de bloc, cela crée une surcharge pour les éléments-fils qui sont en ligne et qui ne sont pas dans un autre conteneur de bloc. Cela signifie qu'au sein de l'élément, le réarrangement se fait strictement en fonction de la propriété {{cssxref("direction")}}, la partie implicite apportée par l'algorithme de bidirectionnalité est ignorée.</dd>
- <dt><code>isolate</code></dt>
- <dd>Ce mot-clé indique que la directionnalité du conteneur de l'élément devrait être calculée sans prendre en compte le contenu de cet élément. L'élément est donc <em>isolé</em> (<em>isolated</em> en anglais) de ses voisins. Lorsqu'on applique l'algorithme de résolution bidirectionnelle, l'élément conteneur le traite comme un ou plusieurs <code>U+FFFC Object Replacement Character</code> (autrement dit, comme une image).</dd>
- <dt><code>isolate-override</code></dt>
- <dd>Ce mot-clé applique l'isolation fournie par <code>isolate</code> au contenu environnant et applique la surcharge fournie par <code>bidi-override</code> au contenu intérieur.</dd>
- <dt><code>plaintext</code>{{experimental_inline}}</dt>
- <dd>Ce mot-clé permet de calculer la directionnalité de l'élément sans prendre en compte l'état de son parent ou la valeur de la propriété {{cssxref("direction")}}. La directionnalité est calculée en utilisant les règles P2 et P3 de l'algorithme de bidirectionnalité Unicode.<br>
- Cette valeur permet d'affiché des données qui ont déjà été mises en forme par un outil ayant appliqué l'algorithme de bidirectionnalité Unicode.</dd>
-</dl>
+- `normal`
+  - : L'élément n'ajoute pas de niveau de logique supplémentaire pour l'intégration et l'application de l'algorithme de bidirectionnalité. Pour les éléments en ligne, le réarrangement des éléments est fait entre les frontières des éléments.
+- `embed`
+  - : Si l'élément est en ligne, la valeur ajoute un niveau de logique supplémentaire pour l'intégration. La direction du niveau d'intégration est fournie par la propriété {{cssxref("direction")}}.
+- `bidi-override`
+  - : Pour les éléments en ligne, cela surcharge la directionnalité. Pour les conteneurs de bloc, cela crée une surcharge pour les éléments-fils qui sont en ligne et qui ne sont pas dans un autre conteneur de bloc. Cela signifie qu'au sein de l'élément, le réarrangement se fait strictement en fonction de la propriété {{cssxref("direction")}}, la partie implicite apportée par l'algorithme de bidirectionnalité est ignorée.
+- `isolate`
+  - : Ce mot-clé indique que la directionnalité du conteneur de l'élément devrait être calculée sans prendre en compte le contenu de cet élément. L'élément est donc _isolé_ (_isolated_ en anglais) de ses voisins. Lorsqu'on applique l'algorithme de résolution bidirectionnelle, l'élément conteneur le traite comme un ou plusieurs `U+FFFC Object Replacement Character` (autrement dit, comme une image).
+- `isolate-override`
+  - : Ce mot-clé applique l'isolation fournie par `isolate` au contenu environnant et applique la surcharge fournie par `bidi-override` au contenu intérieur.
+- `plaintext`{{experimental_inline}}
+  - : Ce mot-clé permet de calculer la directionnalité de l'élément sans prendre en compte l'état de son parent ou la valeur de la propriété {{cssxref("direction")}}. La directionnalité est calculée en utilisant les règles P2 et P3 de l'algorithme de bidirectionnalité Unicode.
+    Cette valeur permet d'affiché des données qui ont déjà été mises en forme par un outil ayant appliqué l'algorithme de bidirectionnalité Unicode.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">.bible-quote {
+```css
+.bible-quote {
   direction: rtl;
   unicode-bidi: embed;
 }
-</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}</td>
-   <td>{{Spec2('CSS3 Writing Modes')}}</td>
-   <td>Ajout des mots-clés <code>plaintext</code>, <code>isolate</code> et <code>isolate-override</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.unicode-bidi")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("direction")}}</li>
-</ul>
+```
+
+## Spécification
+
+| Spécification                                                                                        | État                                     | Commentaires                                                      |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------- |
+| {{SpecName('CSS3 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}             | {{Spec2('CSS3 Writing Modes')}} | Ajout des mots-clés `plaintext`, `isolate` et `isolate-override`. |
+| {{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}} | {{Spec2('CSS2.1')}}                 | Définition initiale.                                              |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.unicode-bidi")}}
+
+## Voir aussi
+
+- {{cssxref("direction")}}
diff --git a/files/fr/web/css/universal_selectors/index.md b/files/fr/web/css/universal_selectors/index.md
index 5ed4458ed6..3521c07848 100644
--- a/files/fr/web/css/universal_selectors/index.md
+++ b/files/fr/web/css/universal_selectors/index.md
@@ -8,33 +8,34 @@ tags:
 translation_of: Web/CSS/Universal_selectors
 original_slug: Web/CSS/Sélecteurs_universels
 ---
-<div>{{CSSRef("Selectors")}}</div>
+{{CSSRef("Selectors")}}
 
-<p>L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.</p>
+L'astérisque (\*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.
 
-<pre class="brush: css no-line-numbers">* {
+```css
+* {
   color: green;
-}</pre>
+}
+```
 
-<p>En CSS 3, l'astérisque peut être combinée avec les espaces de nom :</p>
+En CSS 3, l'astérisque peut être combinée avec les espaces de nom :
 
-<ul>
- <li><code>ns|*</code> - correspond à tous les éléments de l'espace de noms <code>ns</code></li>
- <li><code>*|*</code> - correspond à tous les éléments</li>
- <li><code>|*</code> - correspond à tous les éléments sans espace de noms déclaré</li>
-</ul>
+- `ns|*` - correspond à tous les éléments de l'espace de noms `ns`
+- `*|*` - correspond à tous les éléments
+- `|*` - correspond à tous les éléments sans espace de noms déclaré
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">* { <em>style properties</em> }</pre>
+    * { style properties }
 
-<p>L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs simples. Par exemple, <code>*.warning</code> et <code>.warning</code> seront équivalents.</p>
+L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs simples. Par exemple, `*.warning` et `.warning` seront équivalents.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">* [lang^=fr] {
+```css
+* [lang^=fr] {
   color:green;
 }
 
@@ -53,50 +54,31 @@ original_slug: Web/CSS/Sélecteurs_universels
 .floating + * {
   clear: left;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p class="warning"&gt;
-  &lt;span lang="fr"&gt;Un span vert&lt;/span&gt; dans un paragraphe rouge.
-&lt;/p&gt;
-&lt;p id="maincontent" lang="fr"&gt;
-  &lt;span class="warning"&gt;Un span rouge&lt;/span&gt; dans un paragraphe vert.
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', 250, 100)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Définition du comportement avec les espaces de noms et ajout d'indications pour omettre le sélecteur avec les pseudo-éléments.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.universal")}}</p>
+```
+
+### HTML
+
+```html
+<p class="warning">
+  <span lang="fr">Un span vert</span> dans un paragraphe rouge.
+</p>
+<p id="maincontent" lang="fr">
+  <span class="warning">Un span rouge</span> dans un paragraphe vert.
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', 250, 100)}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                                 | Commentaires                                                                                                                   |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}     | {{Spec2('CSS4 Selectors')}} | Aucune modification.                                                                                                           |
+| {{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}         | {{Spec2('CSS3 Selectors')}} | Définition du comportement avec les espaces de noms et ajout d'indications pour omettre le sélecteur avec les pseudo-éléments. |
+| {{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}} | {{Spec2('CSS2.1')}}             | Définition initiale.                                                                                                           |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.universal")}}
diff --git a/files/fr/web/css/unset/index.md b/files/fr/web/css/unset/index.md
index 06d3b6eb11..8d2fbf9a9c 100644
--- a/files/fr/web/css/unset/index.md
+++ b/files/fr/web/css/unset/index.md
@@ -8,42 +8,45 @@ tags:
   - Web
 translation_of: Web/CSS/unset
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Le mot-clé <strong><code>unset</code></strong> correspond à la combinaison des mots-clés {{cssxref("initial")}} et {{cssxref("inherit")}}. Comme les autres mots-clés globaux à tout CSS, il peut être utilisé pour n'importe quelle propriété CSS, y compris la propriété raccourcie {{cssxref("all")}}. Ce mot-clé <em>réinitialise</em> la propriété afin que sa valeur soit la valeur héritée depuis l'élément parent ou soit la valeur initiale (s'il n'y a pas d'héritage). Autrement dit, s'il y a de l'héritage, ce mot-clé se comporte comme <code>inherit</code>, sinon, il se comporte comme <code>initial</code>.</p>
+Le mot-clé **`unset`** correspond à la combinaison des mots-clés {{cssxref("initial")}} et {{cssxref("inherit")}}. Comme les autres mots-clés globaux à tout CSS, il peut être utilisé pour n'importe quelle propriété CSS, y compris la propriété raccourcie {{cssxref("all")}}. Ce mot-clé _réinitialise_ la propriété afin que sa valeur soit la valeur héritée depuis l'élément parent ou soit la valeur initiale (s'il n'y a pas d'héritage). Autrement dit, s'il y a de l'héritage, ce mot-clé se comporte comme `inherit`, sinon, il se comporte comme `initial`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Avec_color">Avec <code>color</code></h3>
+### Avec `color`
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   color: red;
 }
 
 #sidebar p {
   color: unset;
 }
-</pre>
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;This text is red&lt;/p&gt;
-&lt;div id="sidebar"&gt;
-  &lt;p&gt;This text has the default color&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<p>This text is red</p>
+<div id="sidebar">
+  <p>This text has the default color</p>
+</div>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Avec_color', '100%', '120')}}</p>
+{{EmbedLiveSample('Avec_color', '100%', '120')}}
 
-<h3 id="Avec_border">Avec <code>border</code></h3>
+### Avec `border`
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   border: 1px solid green;
 }
 
@@ -53,61 +56,43 @@ p {
 
 .truc p {
   border-color: unset;
-}</pre>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;p&gt;Ce texte a une bordure rouge.&lt;/p&gt;
-&lt;div class="toto"&gt;
-  &lt;p&gt;Ce texte a une bordure rouge&lt;/p&gt;
-&lt;/div&gt;
-&lt;div class="truc"&gt;
-  &lt;p&gt;Ce texte a une bordure noire (la valeur initiale, non héritée)&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('Avec_border','100%','200')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Cascade', '#inherit-initial', 'unset')}}</td>
-   <td>{{Spec2('CSS4 Cascade')}}</td>
-   <td>Aucun changement depuis Level 3</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Cascade', '#inherit-initial', 'unset')}}</td>
-   <td>{{Spec2('CSS3 Cascade')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.types.global_keywords.unset")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les valeurs globales qui peuvent s'appliquer pour toutes les propriétés CSS :
-  <ul>
-   <li>{{cssxref("initial")}},</li>
-   <li>{{cssxref("inherit")}},</li>
-   <li>{{cssxref("unset")}},</li>
-   <li>{{cssxref("revert")}}.</li>
-  </ul>
- </li>
- <li>La propriété {{cssxref("all")}} est une propriété raccourcie qui permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou indéfinies.</li>
-</ul>
+}
+```
+
+#### HTML
+
+```html
+<p>Ce texte a une bordure rouge.</p>
+<div class="toto">
+  <p>Ce texte a une bordure rouge</p>
+</div>
+<div class="truc">
+  <p>Ce texte a une bordure noire (la valeur initiale, non héritée)</p>
+</div>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Avec_border','100%','200')}}
+
+## Spécifications
+
+| Spécification                                                                | État                             | Commentaires                    |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------------------- |
+| {{SpecName('CSS4 Cascade', '#inherit-initial', 'unset')}} | {{Spec2('CSS4 Cascade')}} | Aucun changement depuis Level 3 |
+| {{SpecName('CSS3 Cascade', '#inherit-initial', 'unset')}} | {{Spec2('CSS3 Cascade')}} | Définition initiale             |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.global_keywords.unset")}}
+
+## Voir aussi
+
+- Les valeurs globales qui peuvent s'appliquer pour toutes les propriétés CSS :
+
+  - {{cssxref("initial")}},
+  - {{cssxref("inherit")}},
+  - {{cssxref("unset")}},
+  - {{cssxref("revert")}}.
+
+- La propriété {{cssxref("all")}} est une propriété raccourcie qui permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou indéfinies.
diff --git a/files/fr/web/css/url()/index.md b/files/fr/web/css/url()/index.md
index 9574edd651..bb68ba28b6 100644
--- a/files/fr/web/css/url()/index.md
+++ b/files/fr/web/css/url()/index.md
@@ -9,13 +9,14 @@ tags:
   - url()
 translation_of: Web/CSS/url()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction CSS <code><strong>url</strong></code><strong><code>()</code></strong> 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 <code><strong>url</strong></code><strong><code>()</code></strong> peut être utilisée comme paramètre d'une autre fonction comme {{cssxref('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 stye.</p>
+La fonction 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 {{cssxref('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 stye.
 
-<p>La notation fonctionelle <code>url()</code> correspond au type de donnée CSS <code><a href="/fr/docs/conflicting/Web/CSS/url()_168028c4e5edd9e19c061adb4b604d4f">&lt;url&gt;</a></code>.</p>
+La notation fonctionelle `url()` correspond au type de donnée CSS [`<url>`](</fr/docs/conflicting/Web/CSS/url()_168028c4e5edd9e19c061adb4b604d4f>).
 
-<pre class="brush: css no-line-numbers">/* Utilisation simple */
+```css
+/* Utilisation simple */
 url(https://example.com/images/myImg.jpg);
 url(data:image/png;base64,iRxVB0…);
 url(myFont.woff);
@@ -49,129 +50,111 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
 @document url("https://www.example.com/") { ... } {{Experimental_Inline}}
 @import url("https://www.example.com/style.css");
 @namespace url(http://www.w3.org/1999/xhtml);
-</pre>
+```
 
-<p>Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante).</p>
+Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante).
 
-<p>La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur <code><a href="/fr/docs/Web/CSS/@font-face/src">src</a></code> pour une règle <code><a href="/fr/docs/Web/CSS/@font-face">@font-face</a></code> ou <code><a href="/fr/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a></code></p>
+La fonction **`url`\*\***`()`\*\* peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur [`src`](/fr/docs/Web/CSS/@font-face/src) pour une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) ou [`@counter-style/symbol`](/fr/docs/Web/CSS/@counter-style/symbols)
 
-<p>Dans la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> ne permettait que de décrire des URL. Avec la spécification de niveau 2, la définition d'<code>url()</code> a été étendue afin de décrire n'importe quel URI, y compris des URI de données. Le module de spécification <em>CSS Values and Units</em> de niveau 3 est revenu à la définition initiale plus stricte. Aussi, à l'heure actuelle et formellement <code>url()</code> ne permet que de décrire des valeurs <code>&lt;url&gt;</code>.</p>
+Dans la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne permettait que de décrire des URL. Avec la spécification de niveau 2, la définition d'`url()` a été étendue afin de décrire n'importe quel URI, y compris des URI de données. Le module de spécification _CSS Values and Units_ de niveau 3 est revenu à la définition initiale plus stricte. Aussi, à l'heure actuelle et formellement `url()` ne permet que de décrire des valeurs `<url>`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>string</code></dt>
- <dd>
-  <p>Une chaîne de caractères indiquant une URL ou l'identifiant d'une forme SVG.</p>
- <dl>
-  <dt><code>&lt;url&gt;</code></dt>
-  <dd>Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de donnée éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à <code>0x7e</code>. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes :
-  <pre class="syntaxbox">&lt;propriété_css&gt;: url("https://example.com/image.png")
-&lt;propriété_css&gt;: url('https://example.com/image.png')
-&lt;propriété_css&gt;: url(https://example.com/image.png)</pre>
-  <p>Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (<code>\</code>) avant toute parenthèse, espace ou apostrophe (<code>'</code>) ou guillemets(<code>"</code>) faisant partie de l'URL.</p>
-  </dd>
- </dl>
- </dd>
- <dt><em>chemin</em></dt>
- <dd>La référence à un identifiant d'une <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">forme SVG</a> -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, or <code>rect</code>. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin.</dd>
- <dt><code>url-modifier</code> {{Experimental_Inline}}</dt>
- <dd>À l'avenir, la fonction <code>url()</code> pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge.</dd>
-</dl>
+- `string`
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : Une chaîne de caractères indiquant une URL ou l'identifiant d'une forme SVG.
 
-<pre class="syntaxbox">url( <a href="/fr/docs/Web/CSS/string">&lt;string&gt;</a> <a href="/en-US/docs/Web">&lt;url-modifier&gt;</a>* )</pre>
+    - `<url>`
 
-<h2 id="Exemples">Exemples</h2>
+      - : Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de donnée éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à `0x7e`. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes :
 
-<h3 id="Propriété_content">Propriété <code>content</code></h3>
+            <propriété_css>: url("https://example.com/image.png")
+            <propriété_css>: url('https://example.com/image.png')
+            <propriété_css>: url(https://example.com/image.png)
 
-<h4 id="HTML">HTML</h4>
+        Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (`\`) avant toute parenthèse, espace ou apostrophe (`'`) ou guillemets(`"`) faisant partie de l'URL.
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;Item 1&lt;/li&gt;
-  &lt;li&gt;Item 2&lt;/li&gt;
-  &lt;li&gt;Item 3&lt;/li&gt;
-&lt;/ul&gt;</pre>
+- _chemin_
+  - : La référence à un identifiant d'une [forme SVG](/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect`. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin.
+- `url-modifier` {{Experimental_Inline}}
+  - : À l'avenir, la fonction `url()` pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge.
 
-<h4 id="CSS">CSS</h4>
+### Syntaxe formelle
 
-<pre class="brush: css highlight[2]">li::after {
+    url( <string> <url-modifier>* )
+
+## Exemples
+
+### Propriété `content`
+
+#### HTML
+
+```html
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+```
+
+#### CSS
+
+```css
+li::after {
   content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Propriété_content", "100%", 50)}}</p>
+{{EmbedLiveSample("Propriété_content", "100%", 50)}}
 
-<h3 id="URI_de_données">URI de données</h3>
+### URI de données
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="background"&gt;&lt;/div&gt;</pre>
+```html
+<div class="background"></div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css hidden">.background {
+```css hidden
+.background {
   height: 100vh;
-}</pre>
+}
+```
 
-<pre class="brush: css highlight[6]">.background {
+```css
+.background {
   background: yellow;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
-}</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("URI_de_données", "100%", 50)}}</p>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Values', '#urls', 'url()')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#urls', 'url()')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Aucune modification significative depuis la spécification de niveau 2 (première révision).</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucune modification significative depuis la spécification de niveau 1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#url', 'url()')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("css.types.url")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+}
+```
 
-<ul>
- <li>{{cssxref("&lt;gradient&gt;")}}</li>
- <li>{{cssxref("element()")}}</li>
- <li>{{cssxref("_image","image()")}}</li>
- <li>{{cssxref("image-set","image-set()")}}</li>
- <li>{{cssxref("cross-fade()")}}</li>
-</ul>
+#### Résultat
+
+{{EmbedLiveSample("URI_de_données", "100%", 50)}}
+
+## Spécifications
+
+| Spécification                                                        | État                             | Commentaires                                                                               |
+| -------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS4 Values', '#urls', 'url()')}}         | {{Spec2('CSS4 Values')}} |                                                                                            |
+| {{SpecName('CSS3 Values', '#urls', 'url()')}}         | {{Spec2('CSS3 Values')}} | Aucune modification significative depuis la spécification de niveau 2 (première révision). |
+| {{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}} | {{Spec2('CSS2.1')}}         | Aucune modification significative depuis la spécification de niveau 1.                     |
+| {{SpecName('CSS1', '#url', 'url()')}}                     | {{Spec2('CSS1')}}         | Définition initiale.                                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.types.url")}}
+
+## Voir aussi
+
+- {{cssxref("&lt;gradient&gt;")}}
+- {{cssxref("element()")}}
+- {{cssxref("_image","image()")}}
+- {{cssxref("image-set","image-set()")}}
+- {{cssxref("cross-fade()")}}
diff --git a/files/fr/web/css/used_value/index.md b/files/fr/web/css/used_value/index.md
index e27fe89bc7..a4af9602d5 100644
--- a/files/fr/web/css/used_value/index.md
+++ b/files/fr/web/css/used_value/index.md
@@ -9,46 +9,43 @@ tags:
 translation_of: Web/CSS/used_value
 original_slug: Web/CSS/Valeur_utilisée
 ---
-<div>{{cssref}}</div>
+{{cssref}}
 
-<p>La <strong>valeur utilisée</strong> de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés.</p>
+La **valeur utilisée** de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés.
 
-<p>Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple <code>width</code>,<code> height</code>) sont exprimées en pixels et les propriétés raccourcies (comme <code>background</code>) sont cohérentes avec leurs propriétés composantes (par exemple <code>background-color</code>), <code>display</code> est cohérente avec <code>position</code> et <code>float</code>.</p>
+Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple `width`,` height`) sont exprimées en pixels et les propriétés raccourcies (comme `background`) sont cohérentes avec leurs propriétés composantes (par exemple `background-color`), `display` est cohérente avec `position` et `float`.
 
-<p>Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript <code><a href="/fr/docs/DOM/window.getComputedStyle">window.getComputedStyle()</a></code>.</p>
+Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript [`window.getComputedStyle()`](/fr/docs/DOM/window.getComputedStyle).
 
-<h2 id="Détails">Détails</h2>
+## Détails
 
-<p>Quatre étapes permettent de déterminer la valeur finale de n'importe quelle propriété CSS.</p>
+Quatre étapes permettent de déterminer la valeur finale de n'importe quelle propriété CSS.
 
-<ol>
- <li>Tout d'abord, la <a href="/fr/docs/CSS/Valeur_spécifiée">valeur spécifiée</a> est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'<a href="/fr/docs/CSS/Héritage">héritage</a> (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée.</li>
- <li>Ensuite, la <a href="/fr/docs/CSS/Valeur_calculée">valeur calculée</a> est déterminée selon la spécification (par exemple, un <code>span</code> avec <code>position: absolute</code> aura <code>display</code> qui passera à <code>block</code> pour la valeur calculée).</li>
- <li>Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur <code>auto</code> ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la <strong>valeur utilisée</strong>.</li>
- <li>Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est <a href="/fr/docs/Web/CSS/valeur_reelle">la valeur réelle</a>. La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à <code><a href="/fr/docs/DOM/window.getComputedStyle">window.getComputedStyle</a></code>  (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée <a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">valeur résolue</a>).</li>
-</ol>
+1.  Tout d'abord, la [valeur spécifiée](/fr/docs/CSS/Valeur_spécifiée) est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'[héritage](/fr/docs/CSS/Héritage) (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée.
+2.  Ensuite, la [valeur calculée](/fr/docs/CSS/Valeur_calculée) est déterminée selon la spécification (par exemple, un `span` avec `position: absolute` aura `display` qui passera à `block` pour la valeur calculée).
+3.  Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur `auto` ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la **valeur utilisée**.
+4.  Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est [la valeur réelle](/fr/docs/Web/CSS/valeur_reelle). La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à [`window.getComputedStyle`](/fr/docs/DOM/window.getComputedStyle)  (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée [valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)).
 
-<h2 id="Différence_avec_les_valeurs_calculées">Différence avec les valeurs calculées</h2>
+## Différence avec les valeurs calculées
 
-<p>CSS 2.0 définissait la <a href="/fr/docs/CSS/Valeur_calculée">valeur calculée</a> comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme <code>display</code>, <code>font-size</code> ou <code>line-height</code>), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de <em><a href="https://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a></em>) :</p>
+CSS 2.0 définissait la [valeur calculée](/fr/docs/CSS/Valeur_calculée) comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme `display`, `font-size` ou `line-height`), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de _[CSS 2.1 Changes: Specified, computed, and actual values](https://www.w3.org/TR/CSS2/changes.html#q36)_) :
 
-<ul>
- <li><code>background-position</code></li>
- <li><code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code></li>
- <li><code>height</code>, <code>width</code></li>
- <li><code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code></li>
- <li><code>min-height</code>, <code>min-width</code></li>
- <li><code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code></li>
- <li><code>text-indent</code></li>
-</ul>
+- `background-position`
+- `bottom`, `left`, `right`, `top`
+- `height`, `width`
+- `margin-bottom`, `margin-left`, `margin-right`, `margin-top`
+- `min-height`, `min-width`
+- `padding-bottom`, `padding-left`, `padding-right`, `padding-top`
+- `text-indent`
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple illustre et calcule les largeurs <em>utilisées</em> pour les trois éléments.</p>
+Cet exemple illustre et calcule les largeurs _utilisées_ pour les trois éléments.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#no-width {
+```css
+#no-width {
   width: auto;
 }
 
@@ -64,29 +61,32 @@ original_slug: Web/CSS/Valeur_utilisée
 div {
   border: 1px solid red;
   padding: 8px;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="no-width"&gt;
-  &lt;p&gt;Pas de largeur explicite.&lt;/p&gt;
-  &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+```html
+<div id="no-width">
+  <p>Pas de largeur explicite.</p>
+  <p class="show-used-width">..</p>
 
-  &lt;div id="width-50"&gt;
-    &lt;p&gt;Largeur explicite : 50%.&lt;/p&gt;
-    &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+  <div id="width-50">
+    <p>Largeur explicite : 50%.</p>
+    <p class="show-used-width">..</p>
 
-    &lt;div id="width-inherit"&gt;
-      &lt;p&gt;Largeur explicite: héritée avec &lt;code&gt;inherit&lt;/code&gt;.&lt;/p&gt;
-      &lt;p class="show-used-width"&gt;..&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+    <div id="width-inherit">
+      <p>Largeur explicite: héritée avec <code>inherit</code>.</p>
+      <p class="show-used-width">..</p>
+    </div>
+  </div>
+</div>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function updateUsedWidth(id) {
+```js
+function updateUsedWidth(id) {
   var div = document.querySelector(`#${id}`);
   var par = div.querySelector('.show-used-width');
   var wid = window.getComputedStyle(div)["width"];
@@ -101,45 +101,25 @@ function updateAllUsedWidths() {
 
 updateAllUsedWidths();
 window.addEventListener('resize', updateAllUsedWidths);
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples', '80%', '372px')}}
+
+## Spécifications
+
+| Spécification                                                                        | État                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName("CSS2.2", "cascade.html#used-value", "used value")}} | {{Spec2("CSS2.2")}} |                      |
+| {{SpecName("CSS2.1", "cascade.html#used-value", "used value")}} | {{Spec2("CSS2.1")}} | Définition initiale. |
+
+## Voir aussi
 
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples', '80%', '372px')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}</td>
-   <td>{{Spec2("CSS2.2")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
- <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">La notion de valeur définie</a></li>
- <li><a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">La notion de valeur résolue</a></li>
- <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
- <li><code><a href="/fr/docs/DOM/window.getComputedStyle">window.getComputedStyle()</a></code></li>
-</ul>
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
+- [La notion de valeur initiale](/fr/docs/Web/CSS/Valeur_initiale)
+- [La notion de valeur calculée](/fr/docs/Web/CSS/Valeur_calculée)
+- [La notion de valeur définie](/fr/docs/Web/CSS/Valeur_spécifiée)
+- [La notion de valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)
+- [La notion de valeur réelle](/fr/docs/Web/CSS/valeur_reelle)
+- [`window.getComputedStyle()`](/fr/docs/DOM/window.getComputedStyle)
diff --git a/files/fr/web/css/user-modify/index.md b/files/fr/web/css/user-modify/index.md
index 400f9a8d37..9f9741d314 100644
--- a/files/fr/web/css/user-modify/index.md
+++ b/files/fr/web/css/user-modify/index.md
@@ -8,11 +8,12 @@ tags:
   - Reference
 translation_of: Web/CSS/user-modify
 ---
-<div>{{Non-standard_header}}{{CSSRef}}{{deprecated_header}}</div>
+{{Non-standard_header}}{{CSSRef}}{{deprecated_header}}
 
-<p>La propriété <strong><code>user-modify</code></strong> n'a aucun effet. Elle était initialement conçue pour déterminer si le contenu d'un élément peut être édité ou non par l'utilisateur.</p>
+La propriété **`user-modify`** n'a aucun effet. Elle était initialement conçue pour déterminer si le contenu d'un élément peut être édité ou non par l'utilisateur.
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 user-modify: read-only;
 user-modify: read-write;
 user-modify: write-only;
@@ -21,68 +22,64 @@ user-modify: write-only;
 user-modify: inherit;
 user-modify: initial;
 user-modify: unset;
-</pre>
+```
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette propriété a été remplacée par l'attribut {{HTMLAttrxref("contenteditable")}}.</p>
-</div>
+> **Attention :** Cette propriété a été remplacée par l'attribut {{HTMLAttrxref("contenteditable")}}.
 
-<p>Cette propriété est similaire à l'attribut HTML {{htmlattrxref("contenteditable")}}. Une propriété similaire : <code>user-focus</code> a été proposée <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">pour des brouillons de la spécification CSS3 pour les interfaces utilisateur</a> mais fut rejetée par le groupe de travail. <strong>Elle a été désactivée de Firefox et n'a donc pas d'effet.</strong></p>
+Cette propriété est similaire à l'attribut HTML {{htmlattrxref("contenteditable")}}. Une propriété similaire : `user-focus` a été proposée [pour des brouillons de la spécification CSS3 pour les interfaces utilisateur](https://www.w3.org/TR/2000/WD-css3-userint-20000216) mais fut rejetée par le groupe de travail. **Elle a été désactivée de Firefox et n'a donc pas d'effet.**
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La propriété <code>user-modify</code> est définie grâce à un mot-clé parmi ceux de la liste ci-après.</p>
+La propriété `user-modify` est définie grâce à un mot-clé parmi ceux de la liste ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>read-only</code></dt>
- <dd>La valeur par défaut, le contenu ne peut pas être modifié.</dd>
- <dt><code>read-write</code></dt>
- <dd>L'utilisateur peut lire et modifier le contenu.</dd>
- <dt><code>read-write-plaintext-only</code> {{Non-standard_inline}}</dt>
- <dd>Identique à <code>read-write</code> mais la mise en forme du texte sera perdue.</dd>
- <dt><code>write-only</code></dt>
- <dd>L'utilisateur peut éditer le contenu mais ne peut pas le lire.</dd>
-</dl>
+- `read-only`
+  - : La valeur par défaut, le contenu ne peut pas être modifié.
+- `read-write`
+  - : L'utilisateur peut lire et modifier le contenu.
+- `read-write-plaintext-only` {{Non-standard_inline}}
+  - : Identique à `read-write` mais la mise en forme du texte sera perdue.
+- `write-only`
+  - : L'utilisateur peut éditer le contenu mais ne peut pas le lire.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush:css">.readwrite {
+```css
+.readwrite {
   -moz-user-modify: read-write;
   -webkit-user-modify: read-write;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;div class="readwrite"&gt;L'utilisateur est capable de modifier ce texte.&lt;/div&gt;
-</pre>
+```html
+<div class="readwrite">L'utilisateur est capable de modifier ce texte.</div>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 300, 30)}}</p>
+{{EmbedLiveSample("Exemples", 300, 30)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p><code>user-modify</code> a <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify">été proposée pour la spécification CSS 3 sur les interfaces utilisateurs</a> (le brouillon de travail de février 2000 qui est désormais remplacé par le module <em>Basic User Interface</em> de <em>CSS 3</em>).</p>
+`user-modify` a [été proposée pour la spécification CSS 3 sur les interfaces utilisateurs](https://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify) (le brouillon de travail de février 2000 qui est désormais remplacé par le module _Basic User Interface_ de _CSS 3_).
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.user-modify")}}</p>
+{{Compat("css.properties.user-modify")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("-moz-user-focus")}}</li>
- <li>{{cssxref("-moz-user-input")}}</li>
- <li>{{cssxref("-moz-user-select")}}</li>
-</ul>
+- {{cssxref("-moz-user-focus")}}
+- {{cssxref("-moz-user-input")}}
+- {{cssxref("-moz-user-select")}}
diff --git a/files/fr/web/css/user-select/index.md b/files/fr/web/css/user-select/index.md
index 6415ba1753..df5a54f37b 100644
--- a/files/fr/web/css/user-select/index.md
+++ b/files/fr/web/css/user-select/index.md
@@ -7,11 +7,12 @@ tags:
   - Reference
 translation_of: Web/CSS/user-select
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <code><strong>user-select</strong></code> permet de contrôler l'opération de <a href="/fr/docs/Web/API/Selection">sélection</a>. Cela n'a aucun effet sur le contenu qui est chargé dans les éléments de l'interface ({{Glossary("Chrome", "chrome")}}), sauf pour les boîtes de texte.</p>
+La propriété **`user-select`** permet de contrôler l'opération de [sélection](/fr/docs/Web/API/Selection). Cela n'a aucun effet sur le contenu qui est chargé dans les éléments de l'interface ({{Glossary("Chrome", "chrome")}}), sauf pour les boîtes de texte.
 
-<pre class="brush:css">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 user-select: none;
 user-select: auto;
 user-select: text;
@@ -37,47 +38,44 @@ user-select: unset;
 -ms-user-select: none;
 -ms-user-select: text;
 -ms-user-select: element;
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>On ne pourra pas sélectionner le texte de l'élément et celui de ses descendants. Toutefois, l'objet {{domxref("Selection")}} pourra contenir ces éléments. À partir de Firefox 21, <code>none</code> se comporte comme <code>-moz-none</code> et la sélection peut donc être réactivée sur les éléments fils avec <code>-moz-user-select:text</code>.</dd>
- <dt><code>auto</code></dt>
- <dd>
- <p>Le texte sera sélectionné avec les propriétés par défaut appliquées par l'agent utilisateur. La valeur calculée est déterminée de la façon suivante :</p>
-
- <ul>
-  <li>Pour les pseudo-éléments <code>::before</code> et <code>::after</code>, la valeur calculée sera <code>none</code></li>
-  <li>Si l'élément est un élément éditable, la valeur calculée est <code>contain</code></li>
-  <li>Sinon, si la valeur calculée de  <code>user-select</code> pour l'élément parent est <code>all</code>, la valeur calculée sera <code>all</code></li>
-  <li>Sinon, si la valeur calculée de  <code>user-select</code> pour l'élément parent est <code>all</code>, la valeur calculée sera <code>none</code></li>
-  <li>Sinon, la valeur calculée est <code>text</code></li>
- </ul>
- </dd>
- <dt><code>text</code></dt>
- <dd>Le texte peut être sélectionné par l'utilisateur<code>.</code></dd>
- <dt><code>all</code></dt>
- <dd>Dans un éditeur HTML, si un double clic ou si un clic contextuel se produit sur les éléments fils, c'est la valeur de l'ancêtre le plus haut qui sera sélectionnée.</dd>
- <dt><code>contain</code></dt>
- <dt><code>element</code> {{non-standard_inline}} (alias spécifique à IE)</dt>
- <dd>Uniquement supporté par Internet Explorer. Cela permet d'activer la sélection au sein de l'élément, celle-ci ne pourra pas « sortir » de cet élément.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">a renommé <code>user-select: element</code> en <code>contain</code></a>.</p>
-</div>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+## Syntaxe
+
+- `none`
+  - : On ne pourra pas sélectionner le texte de l'élément et celui de ses descendants. Toutefois, l'objet {{domxref("Selection")}} pourra contenir ces éléments. À partir de Firefox 21, `none` se comporte comme `-moz-none` et la sélection peut donc être réactivée sur les éléments fils avec `-moz-user-select:text`.
+- `auto`
+
+  - : Le texte sera sélectionné avec les propriétés par défaut appliquées par l'agent utilisateur. La valeur calculée est déterminée de la façon suivante :
+
+    - Pour les pseudo-éléments `::before` et `::after`, la valeur calculée sera `none`
+    - Si l'élément est un élément éditable, la valeur calculée est `contain`
+    - Sinon, si la valeur calculée de  `user-select` pour l'élément parent est `all`, la valeur calculée sera `all`
+    - Sinon, si la valeur calculée de  `user-select` pour l'élément parent est `all`, la valeur calculée sera `none`
+    - Sinon, la valeur calculée est `text`
+
+- `text`
+  - : Le texte peut être sélectionné par l'utilisateur`.`
+- `all`
+  - : Dans un éditeur HTML, si un double clic ou si un clic contextuel se produit sur les éléments fils, c'est la valeur de l'ancêtre le plus haut qui sera sélectionnée.
+- `contain`
+
+  `element` {{non-standard_inline}} (alias spécifique à IE)
+
+  - : Uniquement supporté par Internet Explorer. Cela permet d'activer la sélection au sein de l'élément, celle-ci ne pourra pas « sortir » de cet élément.
+
+> **Note :** CSS UI 4 [a renommé `user-select: element` en `contain`](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05).
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.unselectable {
+```css
+.unselectable {
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
@@ -90,46 +88,32 @@ user-select: unset;
   -ms-user-select: all;
   user-select: all;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Vous devriez pouvoir sélectionner ce texte.&lt;/p&gt;
-&lt;p class="unselectable"&gt;Hop, vous ne pouvez pas sélectionner ce texte !&lt;/p&gt;
-&lt;p class="all"&gt;Cliquer une fois permettra de sélectionner l'ensemble du texte.&lt;/p&gt;
-</pre>
+```html
+<p>Vous devriez pouvoir sélectionner ce texte.</p>
+<p class="unselectable">Hop, vous ne pouvez pas sélectionner ce texte !</p>
+<p class="all">Cliquer une fois permettra de sélectionner l'ensemble du texte.</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
-   <td>{{Spec2('CSS4 UI')}}</td>
-   <td>Définition initiale. <code>-webkit-user-select</code> est indiqué comme étant un alias déprécié de <code>user-select</code>.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                         | Commentaires                                                                                           |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}} | {{Spec2('CSS4 UI')}} | Définition initiale. `-webkit-user-select` est indiqué comme étant un alias déprécié de `user-select`. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.user-select")}}</p>
+{{Compat("css.properties.user-select")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("::selection")}}</li>
- <li>L'objet JavaScript {{domxref("Selection")}}.</li>
- <li><code><a href="https://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a></code> dans <a href="https://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li>
-</ul>
+- {{cssxref("::selection")}}
+- L'objet JavaScript {{domxref("Selection")}}.
+- [`user-select`](https://www.w3.org/TR/css-ui-4/#propdef-user-select) dans [CSS Basic User Interface Module Level 4](https://www.w3.org/TR/css-ui-4/).
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 c9d8e4bce7..1de1a63118 100644
--- a/files/fr/web/css/using_css_custom_properties/index.md
+++ b/files/fr/web/css/using_css_custom_properties/index.md
@@ -8,58 +8,57 @@ tags:
   - Web
 translation_of: Web/CSS/Using_CSS_custom_properties
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong>Les propriétés personnalisées CSS</strong> (<em>custom properties</em> en anglais, aussi parfois appelés <strong>variables CSS</strong>) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple <strong><code>--main-color: black;</code></strong>) et accessibles en utilisant la notation spécifique {{cssxref("var", "var()")}} (par exemple : <strong><code>color: var(--main-color);</code></strong>).</p>
+**Les propriétés personnalisées CSS** (_custom properties_ en anglais, aussi parfois appelés **variables CSS**) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple **`--main-color: black;`**) et accessibles en utilisant la notation spécifique {{cssxref("var", "var()")}} (par exemple : **`color: var(--main-color);`**).
 
-<p>Des sites et applications web complexes peuvent avoir des feuilles de style où de nombreuses valeurs sont répétées. Ainsi, la même couleur pourra être utilisée à des centaines d'endroits où il faudra la mettre à jour si besoin. Les propriétés personnalisées permettent de stocker une valeur à un endroit puis de réutiliser cette valeur (on factorise ainsi le code).</p>
+Des sites et applications web complexes peuvent avoir des feuilles de style où de nombreuses valeurs sont répétées. Ainsi, la même couleur pourra être utilisée à des centaines d'endroits où il faudra la mettre à jour si besoin. Les propriétés personnalisées permettent de stocker une valeur à un endroit puis de réutiliser cette valeur (on factorise ainsi le code).
 
-<h2 id="Utilisation_simple">Utilisation simple</h2>
+## Utilisation simple
 
-<p>Voici comment on déclare une variable :</p>
+Voici comment on déclare une variable :
 
-<pre class="brush:css">element {
+```css
+element {
   --main-bg-color: brown;
 }
-</pre>
+```
 
-<p>Et voici comment on l'utilise</p>
+Et voici comment on l'utilise
 
-<pre class="brush:css">element {
+```css
+element {
   background-color: var(--main-bg-color);
 }
-</pre>
+```
 
-<h2 id="Problématique">Problématique</h2>
+## Problématique
 
-<p>Lors de l'élaboration de sites de grande envergure, leurs auteurs font parfois face à des soucis de maintenabilité. De grandes feuilles de styles sont utilisées et de nombreuses informations se répètent. Par exemple, maintenir un thème de couleurs à travers un document nécessite la réutilisation des valeurs des couleurs à plusieurs endroits dans les fichiers CSS. Modifier un thème, en changeant une couleur ou en le récrivant entièrement, devient alors une tâche complexe demandant de la précision, là où un simple trouver et remplacer ne suffit pas.</p>
+Lors de l'élaboration de sites de grande envergure, leurs auteurs font parfois face à des soucis de maintenabilité. De grandes feuilles de styles sont utilisées et de nombreuses informations se répètent. Par exemple, maintenir un thème de couleurs à travers un document nécessite la réutilisation des valeurs des couleurs à plusieurs endroits dans les fichiers CSS. Modifier un thème, en changeant une couleur ou en le récrivant entièrement, devient alors une tâche complexe demandant de la précision, là où un simple trouver et remplacer ne suffit pas.
 
-<p>Le problème peut s'aggraver en utilisant les <em>frameworks</em> CSS puisque modifier une couleur demande de modifier le framework lui-même. Les pré-processeurs comme <a href="https://lesscss.org/">LESS</a> ou <a href="https://sass-lang.com/">Sass</a> peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation. Les propriétés personnalisées permettent d'utiliser une des principales fonctionnalités des pré-processeurs, sans cette étape de compilation.</p>
+Le problème peut s'aggraver en utilisant les _frameworks_ CSS puisque modifier une couleur demande de modifier le framework lui-même. Les pré-processeurs comme [LESS](https://lesscss.org/) ou [Sass](https://sass-lang.com/) peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation. Les propriétés personnalisées permettent d'utiliser une des principales fonctionnalités des pré-processeurs, sans cette étape de compilation.
 
-<p>Le deuxième avantage de ces variables vient du fait que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre : écrire <code>main-text-color</code> permet de mieux s'y retrouver au fur et à mesure de la lecture qu'une valeur hexadécimale comme <code>#00ff00</code>, surtout si la même couleur est utilisée dans un autre contexte.</p>
+Le deuxième avantage de ces variables vient du fait que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre : écrire `main-text-color` permet de mieux s'y retrouver au fur et à mesure de la lecture qu'une valeur hexadécimale comme `#00ff00`, surtout si la même couleur est utilisée dans un autre contexte.
 
-<h2 id="Définition">Définition</h2>
+## Définition
 
-<p>Les propriétés personnalisées ont actuellement deux formes :</p>
+Les propriétés personnalisées ont actuellement deux formes :
 
-<ul>
- <li>les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle <code>var()</code> : <code>var(--example-variable)</code> retourne la valeur de <code>--example-variable</code>.</li>
- <li>les propriétés personnalisées, qui sont des propriétés spéciales notées <code>--*</code> où <code>*</code> représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : <code>--example-variable: 20px;</code> est une déclaration en CSS, utilisant la propriété personnalisée <code>--*</code> pour initialiser la valeur de la variable CSS <code>--example-variable</code> à <code>20px</code>.</li>
-</ul>
+- les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle `var()` : `var(--example-variable)` retourne la valeur de `--example-variable`.
+- les propriétés personnalisées, qui sont des propriétés spéciales notées `--*` où `*` représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : `--example-variable: 20px;` est une déclaration en CSS, utilisant la propriété personnalisée `--*` pour initialiser la valeur de la variable CSS `--example-variable` à `20px`.
 
-<div class="note">
-  <p><strong>Note :</strong> Le préfixe de propriété personnalisée était noté <code>var-</code> dans les précédentes spécifications, mais a ensuite été changé pour <code>--</code>. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}})</p>
-</div>
+> **Note :** Le préfixe de propriété personnalisée était noté `var-` dans les précédentes spécifications, mais a ensuite été changé pour `--`. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}})
 
-<p>Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies.</p>
+Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies.
 
-<h2 id="Premiers_pas_avec_les_propriétés_personnalisées_CSS">Premiers pas avec les propriétés personnalisées CSS</h2>
+## Premiers pas avec les propriétés personnalisées CSS
 
-<p>Commençons avec cette feuille CSS simple colorant les éléments de différentes classes avec la même couleur :</p>
+Commençons avec cette feuille CSS simple colorant les éléments de différentes classes avec la même couleur :
 
-<h3>Exemple 1</h3>
+### Exemple 1
 
-<pre class="brush:css">.un {
+```css
+.un {
   color: white;
   background-color: brown;
   margin: 10px;
@@ -92,29 +91,29 @@ translation_of: Web/CSS/Using_CSS_custom_properties
 .cinq {
   background-color: brown;
 }
+```
 
-</pre>
-
-<p>Appliquons-le à ce code HTML :</p>
+Appliquons-le à ce code HTML :
 
-<pre class="brush:html">&lt;div&gt;
-    &lt;div class="un"&gt;Toto&lt;/div&gt;
-    &lt;div class="deux"&gt;Texte &lt;span class="cinq"&gt;- encore du texte&lt;/span&gt;&lt;/div&gt;
-    &lt;input class="trois"&gt;
-    &lt;textarea class="quatre"&gt;Lorem Ipsum&lt;/textarea&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+    <div class="un">Toto</div>
+    <div class="deux">Texte <span class="cinq">- encore du texte</span></div>
+    <input class="trois">
+    <textarea class="quatre">Lorem Ipsum</textarea>
+</div>
+```
 
-<p>ce qui donne ceci :</p>
+ce qui donne ceci :
 
-<p>{{EmbedLiveSample("exemple_1",600,180)}}</p>
+{{EmbedLiveSample("exemple_1",600,180)}}
 
-<p>Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à <code>brown</code> à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable.</p>
-</div>
+Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à `brown` à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable.
 
-<h3>Exemple 2</h3>
+### Exemple 2
 
-<pre class="brush:css">:root {
+```css
+:root {
   --main-bg-color: brown;
 }
 
@@ -151,64 +150,63 @@ translation_of: Web/CSS/Using_CSS_custom_properties
 .cinq {
   background-color: var(--main-bg-color);
 }
+```
+
+```html hidden
+<div>
+    <div class="un">Toto</div>
+    <div class="deux">Text <span class="cinq">- more text</span></div>
+    <input class="trois">
+    <textarea class="quatre">Lorem Ipsum</textarea>
+</div>
+```
 
-</pre>
-
-<pre class="brush:html hidden">&lt;div&gt;
-    &lt;div class="un"&gt;Toto&lt;/div&gt;
-    &lt;div class="deux"&gt;Text &lt;span class="cinq"&gt;- more text&lt;/span&gt;&lt;/div&gt;
-    &lt;input class="trois"&gt;
-    &lt;textarea class="quatre"&gt;Lorem Ipsum&lt;/textarea&gt;
-&lt;/div&gt;
-</pre>
-
-<p>Ce code donne le même résultat que précédemment mais permet de n'utiliser la propriété désirée qu'une seule fois.</p>
+Ce code donne le même résultat que précédemment mais permet de n'utiliser la propriété désirée qu'une seule fois.
 
-<h2 id="Héritage_des_propriétés_personnalisées_et_valeurs_par_défaut">Héritage des propriétés personnalisées et valeurs par défaut</h2>
+## Héritage des propriétés personnalisées et valeurs par défaut
 
-<p>Il y a un héritage des propriétés personnalisées. Cela signifie que si une propriété n'est pas définie sur un élément, la valeur prise en compte sera celle utilisée pour la propriété de l'élément parent. Le fragment de document suivant :</p>
+Il y a un héritage des propriétés personnalisées. Cela signifie que si une propriété n'est pas définie sur un élément, la valeur prise en compte sera celle utilisée pour la propriété de l'élément parent. Le fragment de document suivant :
 
-<pre class="brush: html">&lt;div class="un"&gt;
-  &lt;div class="deux"&gt;
-    &lt;div class="trois"&gt;
-    &lt;/div&gt;
-    &lt;div class="quatre"&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="un">
+  <div class="deux">
+    <div class="trois">
+    </div>
+    <div class="quatre">
+    </div>
+  </div>
 </div>
+```
 
-<p>associé à cette feuille de style :</p>
+associé à cette feuille de style :
 
-<pre class="brush: css">.deux {
+```css
+.deux {
   --test: 10px;
 }
 
 .trois {
   --test: 2em;
 }
-</pre>
+```
 
-<p>Dans ce cas, les résultats de <code>var(--test)</code> seront :</p>
+Dans ce cas, les résultats de `var(--test)` seront :
 
-<ul>
- <li><code>10px</code> pour l'élément avec <code>class="deux"</code></li>
- <li><code>2em</code> pour l'élément avec <code>class="trois"</code></li>
- <li><code>10px</code> pour l'élément avec <code>class="quatre"</code> : la valeur est héritée depuis le parent</li>
- <li><em>invalid value</em> pour l'élément avec <code>class="un"</code>, c'est la valeur par défaut utilisée pour les différentes propriétés personnalisées.</li>
-</ul>
+- `10px` pour l'élément avec `class="deux"`
+- `2em` pour l'élément avec `class="trois"`
+- `10px` pour l'élément avec `class="quatre"` : la valeur est héritée depuis le parent
+- _invalid value_ pour l'élément avec `class="un"`, c'est la valeur par défaut utilisée pour les différentes propriétés personnalisées.
 
-<p>Gardez à l'esprit qu'il s'agit de propriétés personnalisées et non de propriétés personnalisées réelles. La valeur est calculée là où elle est nécessaire, non stockée pour être utilisée dans d'autres règles. Par exemple, vous ne pouvez pas définir une propriété pour un élément et espérer l'extraire dans la règle du descendant d'un frère. La propriété est uniquement définie pour le sélecteur correspondant et ses descendants, comme tout CSS normal.</p>
+Gardez à l'esprit qu'il s'agit de propriétés personnalisées et non de propriétés personnalisées réelles. La valeur est calculée là où elle est nécessaire, non stockée pour être utilisée dans d'autres règles. Par exemple, vous ne pouvez pas définir une propriété pour un élément et espérer l'extraire dans la règle du descendant d'un frère. La propriété est uniquement définie pour le sélecteur correspondant et ses descendants, comme tout CSS normal.
 
-<p>Avec <code><a href="/fr/docs/Web/CSS/var()">var()</a></code> on peut définir plusieurs valeurs par défaut lorsque la variable donnée n'est pas définie. Cela peut s'avérer utile lorsqu'on travaille avec des éléments personnalisés (<em>Custom Elements</em>) et le <em>Shadow DOM</em>.</p>
+Avec [`var()`](</fr/docs/Web/CSS/var()>) on peut définir plusieurs valeurs par défaut lorsque la variable donnée n'est pas définie. Cela peut s'avérer utile lorsqu'on travaille avec des éléments personnalisés (_Custom Elements_) et le _Shadow DOM_.
 
-<p>Le premier argument passé à la fonction est le nom de la <a href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriété personnalisée</a> qui doit être substituée. Le deuxième argument, s'il est fourni, indique la valeur par défaut qui est utilisée lorsque la <a href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriété personnalisée</a> en question est invalide.</p>
+Le premier argument passé à la fonction est le nom de la [propriété personnalisée](https://www.w3.org/TR/css-variables/#custom-property "CSS Custom Properties for Cascading Variables Module Level 1") qui doit être substituée. Le deuxième argument, s'il est fourni, indique la valeur par défaut qui est utilisée lorsque la [propriété personnalisée](https://www.w3.org/TR/css-variables/#custom-property "CSS Custom Properties for Cascading Variables Module Level 1") en question est invalide.
 
-<div class="note">
-<p><strong>Note :</strong> Attention, la valeur fournie comme valeur par défaut ne pourra pas être utilisée si le navigateur ne prend pas en charge les propriétés personnalisées CSS. Elle sera uniquement utilisée si la valeur précédente n'a pu être calculée ou si elle est invalide.</p>
-</div>
+> **Note :** Attention, la valeur fournie comme valeur par défaut ne pourra pas être utilisée si le navigateur ne prend pas en charge les propriétés personnalisées CSS. Elle sera uniquement utilisée si la valeur précédente n'a pu être calculée ou si elle est invalide.
 
-<pre class="brush: css">.deux {
+```css
+.deux {
   color: var(--my-var, red);
   /* Red si --my-var n'est pas définie */
 }
@@ -222,79 +220,72 @@ translation_of: Web/CSS/Using_CSS_custom_properties
 .trois {
   background-color: var(--my-var, --my-background, pink);
 }
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> La syntaxe pour la valeur de recours, comme celle des <a href="https://www.w3.org/TR/css-variables/#custom-property">propriétés personnalisées</a>, permet d'utiliser une virgule. Ainsi, <code>var(--toto, red, blue)</code> définit une valeur de recours égale à <code>red, blue</code>, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.</p>
-
-<p>La syntaxe de la deuxième règle (sur <code>.trois</code>) permet d'utiliser une autre variable comme variable de secours et une autre valeur (<code>pink</code>) dans le cas où cette deuxième variable ne fonctionne pas.</p>
-</div>
+> **Note :** La syntaxe pour la valeur de recours, comme celle des [propriétés personnalisées](https://www.w3.org/TR/css-variables/#custom-property), permet d'utiliser une virgule. Ainsi, `var(--toto, red, blue)` définit une valeur de recours égale à `red, blue`, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.
+>
+> La syntaxe de la deuxième règle (sur `.trois`) permet d'utiliser une autre variable comme variable de secours et une autre valeur (`pink`) dans le cas où cette deuxième variable ne fonctionne pas.
 
-<div class="note">
-<p><strong>Note :</strong> Des problèmes de performances ont pu être observés causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.</p>
-</div>
+> **Note :** Des problèmes de performances ont pu être observés causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.
 
-<h2 id="Validité_et_valeurs">Validité et valeurs</h2>
+## Validité et valeurs
 
-<p>Le concept classique de validité en CSS, lié à chaque propriété, n'est pas très utile en ce qui concerne les propriétés personnalisées. Quand la valeur d'une propriété personnalisée est lue, le navigateur ne sait pas à quel moment elle sera utilisée. Il doit donc considérer quasiment toutes les valeurs comme <em>valides</em>.</p>
+Le concept classique de validité en CSS, lié à chaque propriété, n'est pas très utile en ce qui concerne les propriétés personnalisées. Quand la valeur d'une propriété personnalisée est lue, le navigateur ne sait pas à quel moment elle sera utilisée. Il doit donc considérer quasiment toutes les valeurs comme _valides_.
 
-<p>Malheureusement, ces valeurs valides peuvent être utilisées, via la notation fonctionnelle <code>var()</code>, dans un contexte où cela n'aurait pas de sens. Les propriétés et variables personnalisées peuvent mener à des déclarations CSS invalides, conduisant à un nouveau concept de <em>valide lors de l'exécution</em>.</p>
+Malheureusement, ces valeurs valides peuvent être utilisées, via la notation fonctionnelle `var()`, dans un contexte où cela n'aurait pas de sens. Les propriétés et variables personnalisées peuvent mener à des déclarations CSS invalides, conduisant à un nouveau concept de _valide lors de l'exécution_.
 
-<h2 id="Gestion_des_variables_invalides">Gestion des variables invalides</h2>
+## Gestion des variables invalides
 
-<p>Lorsque le navigateur analyse une substitution <code>var()</code> invalide, c'est la valeur initiale ou héritée de la propriété qui est utilisée. Par exemple :</p>
+Lorsque le navigateur analyse une substitution `var()` invalide, c'est la valeur initiale ou héritée de la propriété qui est utilisée. Par exemple :
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;La couleur initiale d'un paragraphe est noire.&lt;/p&gt; </pre>
+```html
+<p>La couleur initiale d'un paragraphe est noire.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">:root { --text-color: 16px; }
+```css
+:root { --text-color: 16px; }
 p { color: blue; }
 p { color: var(--text-color); }
-</pre>
-
-<p>Comme on pourrait s'y attendre, le valeur applique la substitution aec <code>--text-color</code> à la place de <code>var(--text-color)</code> mais <code>16px</code> 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 :</p>
+```
 
-<ol>
- <li>Il vérifie si la propriété peut être héritée (ici <code>color</code>) : c'est bien le cas mais dans notre exemple <code>&lt;p&gt;</code> n'a aucun parent avec une couleur définie, il passe donc à l'étape suivante.</li>
- <li>La valeur utilisée est <strong>la valeur initiale par défaut</strong>, pour <code>color</code>, c'est <code>black</code>.</li>
-</ol>
+Comme on pourrait s'y attendre, le valeur applique la substitution aec `--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 :
 
-<h3 id="Résultat">Résultat</h3>
+1.  Il vérifie si la propriété peut être héritée (ici `color`) : c'est bien le cas mais dans notre exemple `<p>` n'a aucun parent avec une couleur définie, il passe donc à l'étape suivante.
+2.  La valeur utilisée est **la valeur initiale par défaut**, pour `color`, c'est `black`.
 
-<p>{{EmbedLiveSample('Gestion_des_valeurs_invalides')}}</p>
+### Résultat
 
-<div class="note">
-<p><strong>Note :</strong> La couleur du paragraphe ne sera pas bleue car une substitution invalide est remplacée par la valeur héritée ou la valeur initiale, pas par les valeurs provenant d'éventuelles autres règles.</p>
+{{EmbedLiveSample('Gestion_des_valeurs_invalides')}}
 
-<p>Si on avait directement écrit <code>color: 16px</code> (sans substitution), c'est alors la déclaration précédente qui aurait été utilisée.</p>
-</div>
+> **Note :** La couleur du paragraphe ne sera pas bleue car une substitution invalide est remplacée par la valeur héritée ou la valeur initiale, pas par les valeurs provenant d'éventuelles autres règles.
+>
+> Si on avait directement écrit `color: 16px` (sans substitution), c'est alors la déclaration précédente qui aurait été utilisée.
 
-<h2 id="Manipulation_des_variables_en_JavaScript">Manipulation des variables en JavaScript</h2>
+## Manipulation des variables en JavaScript
 
-<p>Il est possible d'utiliser les valeurs des propriétés personnalisés en JavaScript de la même façon que les propriétés standards.</p>
+Il est possible d'utiliser les valeurs des propriétés personnalisés en JavaScript de la même façon que les propriétés standards.
 
-<pre class="brush: js">// obtenir une variable à partir d'un style en ligne (dans un élément html)
+```js
+// obtenir une variable à partir d'un style en ligne (dans un élément html)
 element.style.getPropertyValue("--ma-variable");
 
 // obtenir une variable par ailleurs
 getComputedStyle(element).getPropertyValue("--ma-variable");
 
 // définir une variable dans un style en ligne
-element.style.setProperty("--ma-variable", varJS + 4);</pre>
+element.style.setProperty("--ma-variable", varJS + 4);
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.custom-property")}}</p>
+{{Compat("css.properties.custom-property")}}
 
-<div class="note">
-<p><strong>Note :</strong> Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était <code>var-</code>. Ce préfixe a ensuite été modifié en <code>--</code>. et Firefox 31 et les versions ultérieures respectent cette spécification  (cf. {{bug(985838)}})</p>
-</div>
+> **Note :** Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était `var-`. Ce préfixe a ensuite été modifié en `--`. et Firefox 31 et les versions ultérieures respectent cette spécification  (cf. {{bug(985838)}})
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("--*", "Les propriétés personnalisées")}}</li>
-</ul>
+- {{cssxref("--*", "Les propriétés personnalisées")}}
diff --git a/files/fr/web/css/value_definition_syntax/index.md b/files/fr/web/css/value_definition_syntax/index.md
index 0628edd3d9..7983b0485c 100644
--- a/files/fr/web/css/value_definition_syntax/index.md
+++ b/files/fr/web/css/value_definition_syntax/index.md
@@ -8,419 +8,360 @@ tags:
 translation_of: Web/CSS/Value_definition_syntax
 original_slug: Web/CSS/Syntaxe_de_définition_des_valeurs
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong>La syntaxe de définition des valeurs CSS</strong> est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).</p>
+**La syntaxe de définition des valeurs CSS** est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).
 
-<p>La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.</p>
+La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.
 
-<h2 id="Les_types_de_composants">Les types de composants</h2>
+## Les types de composants
 
-<h3 id="Les_mots-clés">Les mots-clés</h3>
+### Les mots-clés
 
-<h4 id="Les_mots-clés_génériques">Les mots-clés génériques</h4>
+#### Les mots-clés génériques
 
-<p>Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. <code>auto</code>, <code>smaller</code> ou <code>ease-in</code>).</p>
+Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. `auto`, `smaller` ou `ease-in`).
 
-<h4 id="inherit_initial_et_unset"><code>inherit</code>, <code>initial</code> et <code>unset</code></h4>
+#### `inherit`, `initial` et `unset`
 
-<p>Toutes propriétés CSS acceptent les mots-clés <code>inherit</code>, <code>initial</code> et <code>unset</code> définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.</p>
+Toutes propriétés CSS acceptent les mots-clés `inherit`, `initial` et `unset` définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.
 
-<h3 id="Les_littéraux">Les littéraux</h3>
+### Les littéraux
 
-<p>En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.</p>
+En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.
 
-<p>Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.</p>
+Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.
 
-<h3 id="Les_types_de_donnée">Les types de donnée</h3>
+### Les types de donnée
 
-<h4 id="Les_types_de_donnée_simples">Les types de donnée simples</h4>
+#### Les types de donnée simples
 
-<p>Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type <code>angle</code> est donc représenté par : {{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;string&gt;")}}, et ainsi de suite).</p>
+Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type `angle` est donc représenté par : {{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;string&gt;")}}, et ainsi de suite).
 
-<h4 id="Les_types_de_donnée_non_terminaux">Les types de donnée non terminaux</h4>
+#### Les types de donnée non terminaux
 
-<p>D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.</p>
+D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.
 
-<p>Les types de donnée non terminaux sont de deux sortes :</p>
+Les types de donnée non terminaux sont de deux sortes :
 
-<ul>
- <li>Les types de donnée qui utilisent le même nom qu'une propriété. Dans ce cas, le type de donnée correspond à l'ensemble des valeurs utilisé par la propriété. Ceux-ci sont généralement utilisés dans les définitions des propriétés raccourcies.</li>
- <li>Les types de donnée dont le nom de n'est pas celui d'une propriété. Ces types de donnée sont très proches des types simples. La seule différence est l'emplacement de leur définition : dans ce cas, la définition est généralement très proche de la définition de la propriété qui les utilise.</li>
-</ul>
+- Les types de donnée qui utilisent le même nom qu'une propriété. Dans ce cas, le type de donnée correspond à l'ensemble des valeurs utilisé par la propriété. Ceux-ci sont généralement utilisés dans les définitions des propriétés raccourcies.
+- Les types de donnée dont le nom de n'est pas celui d'une propriété. Ces types de donnée sont très proches des types simples. La seule différence est l'emplacement de leur définition : dans ce cas, la définition est généralement très proche de la définition de la propriété qui les utilise.
 
-<h2 id="Les_combinateurs">Les combinateurs</h2>
+## Les combinateurs
 
-<h3 id="Les_crochets">Les crochets</h3>
+### Les crochets
 
-<p>Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).</p>
+Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).
 
-<pre class="syntaxbox">bold [ thin &amp;&amp; &lt;length&gt; ]</pre>
+    bold [ thin && <length> ]
 
-<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+Cet exemple pourra illustrer les valeurs suivantes :
 
-<ul>
- <li><code>bold thin 2vh</code></li>
- <li><code>bold 0 thin</code></li>
- <li><code>bold thin 3.5em</code></li>
-</ul>
+- `bold thin 2vh`
+- `bold 0 thin`
+- `bold thin 3.5em`
 
-<p>Mais ne correspondra pas à :</p>
+Mais ne correspondra pas à :
 
-<ul>
- <li><code>thin bold 3em</code> car <code>bold</code> est juxtaposé au composant défini entre les crochets alors qu'il doit apparaître avant.</li>
-</ul>
+- `thin bold 3em` car `bold` est juxtaposé au composant défini entre les crochets alors qu'il doit apparaître avant.
 
-<h3 id="Juxtaposition">Juxtaposition</h3>
+### Juxtaposition
 
-<p>Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont <strong>obligatoires et doivent apparaître dans cet ordre</strong>.</p>
+Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont **obligatoires et doivent apparaître dans cet ordre**.
 
-<pre class="syntaxbox">bold &lt;length&gt; , thin
-</pre>
+    bold <length> , thin
 
-<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+Cet exemple pourra illustrer les valeurs suivantes :
 
-<ul>
- <li><code>bold 1em, thin</code></li>
- <li><code>bold 0, thin</code></li>
- <li><code>bold 2.5cm, thin</code></li>
- <li><code>bold 3vh, thin</code></li>
-</ul>
+- `bold 1em, thin`
+- `bold 0, thin`
+- `bold 2.5cm, thin`
+- `bold 3vh, thin`
 
-<p>Mais il ne correspondra pas à :</p>
+Mais il ne correspondra pas à :
 
-<ul>
- <li><code>thin 1em, bold</code> car les entités ne sont pas dans l'ordre indiqué</li>
- <li><code>bold 1em thin</code> car les entités sont obligatoires et la virgule qui est un littéral doit être présente</li>
- <li><code>bold 0.5ms, thin</code> car les valeurs <code>ms</code> ne sont pas des valeurs du type {{cssxref("&lt;length&gt;")}}</li>
-</ul>
+- `thin 1em, bold` car les entités ne sont pas dans l'ordre indiqué
+- `bold 1em thin` car les entités sont obligatoires et la virgule qui est un littéral doit être présente
+- `bold 0.5ms, thin` car les valeurs `ms` ne sont pas des valeurs du type {{cssxref("&lt;length&gt;")}}
 
-<h3 id="Double_esperluette">Double esperluette</h3>
+### Double esperluette
 
-<p>Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que <strong>toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre</strong>.</p>
+Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que **toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre**.
 
-<pre class="syntaxbox">bold &amp;&amp; &lt;length&gt;
-</pre>
+    bold && <length>
 
-<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+Cet exemple pourra illustrer les valeurs suivantes :
 
-<ul>
- <li><code>bold 1em</code></li>
- <li><code>bold 0</code></li>
- <li><code>2.5cm bold</code></li>
- <li><code>3vh bold</code></li>
-</ul>
+- `bold 1em`
+- `bold 0`
+- `2.5cm bold`
+- `3vh bold`
 
-<p>Mais il ne correspondra pas à :</p>
+Mais il ne correspondra pas à :
 
-<ul>
- <li><code>bold</code> car les deux composants doivent apparaître.</li>
- <li><code>bold 1em bold</code> car les deux composants doivent apparaître exactement une fois.</li>
-</ul>
+- `bold` car les deux composants doivent apparaître.
+- `bold 1em bold` car les deux composants doivent apparaître exactement une fois.
 
-<div class="note">
-  <p><strong>Note :</strong> La juxtaposition est prioritaire par rapport à la double esperluette. <code>bold thin &amp;&amp; &lt;length&gt;</code> est donc équivalent à <code>[ </code><code>bold thin ] &amp;&amp; &lt;length&gt;</code>. Il décrit <code>bold thin &lt;length&gt;</code> ou <code>&lt;length&gt;</code><code> bold thin</code> mais pas <code>bold &lt;length&gt;</code><code> thin</code>.</p>
-</div>
+> **Note :** La juxtaposition est prioritaire par rapport à la double esperluette. `bold thin && <length>` est donc équivalent à ` [ ``bold thin ] && <length>`. Il décrit `bold thin <length>` ou ` <length>`` bold thin  ` mais pas ` bold <length>`` thin  `.
 
-<h3 id="Double_barre">Double barre</h3>
+### Double barre
 
-<p>Lorsque deux ou plusieurs composants sont séparés par une double barre verticale <code>||</code>. Cela signifie qu'au moins un composant doit <strong>être présent et qu'ils peuvent apparaître dans n'importe quel ordre</strong>. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.</p>
+Lorsque deux ou plusieurs composants sont séparés par une double barre verticale `||`. Cela signifie qu'au moins un composant doit **être présent et qu'ils peuvent apparaître dans n'importe quel ordre**. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.
 
-<pre class="syntaxbox">&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
-</pre>
+    <'border-width'> || <'border-style'> || <'border-color'>
 
-<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+Cet exemple pourra illustrer les valeurs suivantes :
 
-<ul>
- <li><code>1em solid blue</code></li>
- <li><code>blue 1em</code></li>
- <li><code>solid 1px yellow</code></li>
-</ul>
+- `1em solid blue`
+- `blue 1em`
+- `solid 1px yellow`
 
-<p>Mais il ne correspondra pas à :</p>
+Mais il ne correspondra pas à :
 
-<ul>
- <li><code>blue yellow</code> car le composant doit apparaître au plus une fois.</li>
- <li><code>bold</code> car le mot-clé n'est pas permis pour aucune valeur de l'entité.</li>
-</ul>
+- `blue yellow` car le composant doit apparaître au plus une fois.
+- `bold` car le mot-clé n'est pas permis pour aucune valeur de l'entité.
 
-<div class="note">
-  <p><strong>Note :</strong> La double esperluette est prioritaire par rapport à la double barre. <code>bold || thin &amp;&amp; &lt;length&gt;</code> est équivalent à <code>bold || [ thin &amp;&amp; &lt;length&gt; ]</code> qui décrit <code>bold</code>, <code>thin</code> <code>&lt;length&gt;</code>, <code>bold thin</code> <code>&lt;length&gt;</code>, ou <code>thin &lt;length&gt; bold</code> mais pas <code>&lt;length&gt;</code><code> bold thin</code> car bold, s'il est présent doit apparaître avant <code>thin &amp;&amp; &lt;length&gt;</code>.</p>
-</div>
+> **Note :** La double esperluette est prioritaire par rapport à la double barre. `bold || thin && <length>` est équivalent à `bold || [ thin && <length> ]` qui décrit `bold`, `thin` `<length>`, `bold thin` `<length>`, ou `thin <length> bold` mais pas ` <length>`` bold thin  ` car bold, s'il est présent doit apparaître avant `thin && <length>`.
 
-<h3 id="La_barre_verticale">La barre verticale</h3>
+### La barre verticale
 
-<p>Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : <strong>seule une des options doit être présente</strong>. Généralement, cela permet de séparer différents mots-clés possible.</p>
+Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : **seule une des options doit être présente**. Généralement, cela permet de séparer différents mots-clés possible.
 
-<pre class="syntaxbox">&lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom</pre>
+    <percentage> | <length> | left | center | right | top | bottom
 
-<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+Cet exemple pourra illustrer les valeurs suivantes :
 
-<ul>
- <li><code>3%</code></li>
- <li><code>0</code></li>
- <li><code>3.5em</code></li>
- <li><code>left</code></li>
- <li><code>center</code></li>
- <li><code>right</code></li>
- <li><code>top</code></li>
- <li><code>bottom</code></li>
-</ul>
+- `3%`
+- `0`
+- `3.5em`
+- `left`
+- `center`
+- `right`
+- `top`
+- `bottom`
 
-<p>Mais il ne correspondra pas à :</p>
+Mais il ne correspondra pas à :
 
-<ul>
- <li><code>center 3%</code> car seul un seul des composants doit être présent.</li>
- <li><code>3em 4.5em</code> car un composant doit être présent au plus une seule fois.</li>
-</ul>
+- `center 3%` car seul un seul des composants doit être présent.
+- `3em 4.5em` car un composant doit être présent au plus une seule fois.
 
-<div class="note">
-<p><strong>Note :</strong> La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi <code>bold | thin || &lt;length&gt;</code> est équivalent à <code>bold | [ thin || &lt;length&gt; ]</code> qui décrit <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>&lt;length&gt; thin</code> ou <code>thin &lt;length&gt; </code>mais pas <code>bold &lt;length&gt;</code> car seule entité peut être présente.</p>
-</div>
+> **Note :** La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi `bold | thin || <length>` est équivalent à `bold | [ thin || <length> ]` qui décrit `bold`, `thin`, `<length>`, `<length> thin` ou `thin <length> `mais pas `bold <length>` car seule entité peut être présente.
 
-<h2 id="Les_multiplicateurs">Les multiplicateurs</h2>
+## Les multiplicateurs
 
-<p>Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.</p>
+Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.
 
-<h3 id="L'astérisque_(*)">L'astérisque (<code>*</code>)</h3>
+### L'astérisque (`*`)
 
-<p>L'astérisque indique qu'une entité peut apparaître <strong>zéro, une ou plusieurs fois</strong>.</p>
+L'astérisque indique qu'une entité peut apparaître **zéro, une ou plusieurs fois**.
 
-<pre class="syntaxbox">bold smaller*</pre>
+    bold smaller*
 
-<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+Cet exemple pourra illustrer les valeurs suivantes :
 
-<ul>
- <li><code>bold</code></li>
- <li><code>bold smaller</code></li>
- <li><code>bold smaller smaller</code></li>
- <li><code>bold smaller smaller smaller</code> and so on.</li>
-</ul>
+- `bold`
+- `bold smaller`
+- `bold smaller smaller`
+- `bold smaller smaller smaller` and so on.
 
-<p>Mais il ne correspondra pas à :</p>
+Mais il ne correspondra pas à :
 
-<ul>
- <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code>.</li>
-</ul>
+- `smaller` car `bold` est juxtaposé et doit apparaître avant le mot-clé `smaller`.
 
-<h3 id="Plus_()">Plus (<code>+</code>)</h3>
+### Plus (`+`)
 
-<p>Le multiplicateur « plus » indique que l'entité peut apparaître <strong>une ou plusieurs fois</strong>.</p>
+Le multiplicateur « plus » indique que l'entité peut apparaître **une ou plusieurs fois**.
 
-<pre class="syntaxbox">bold smaller+</pre>
+    bold smaller+
 
-<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+Cet exemple pourra illustrer les valeurs suivantes :
 
-<ul>
- <li><code>bold smaller</code></li>
- <li><code>bold smaller smaller</code></li>
- <li><code>bold smaller smaller smaller</code> and so on.</li>
-</ul>
+- `bold smaller`
+- `bold smaller smaller`
+- `bold smaller smaller smaller` and so on.
 
-<p>Mais il ne correspondra pas à :</p>
+Mais il ne correspondra pas à :
 
-<ul>
- <li><code>bold</code> car <code>smaller</code> doit apparaître au moins une fois</li>
- <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaitre avant <code>smaller</code>.</li>
-</ul>
+- `bold` car `smaller` doit apparaître au moins une fois
+- `smaller` car `bold` est juxtaposé et doit apparaitre avant `smaller`.
 
-<h3 id="Le_point_d'interrogation_()">Le point d'interrogation (<code>?</code>)</h3>
+### Le point d'interrogation (`?`)
 
-<p>Le point d'interrogation indique que l'entité est optionnelle et doit apparaître<strong> zéro ou une fois</strong>.</p>
+Le point d'interrogation indique que l'entité est optionnelle et doit apparaître **zéro ou une fois**.
 
-<pre class="syntaxbox">bold smaller?</pre>
+    bold smaller?
 
-<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+Cet exemple pourra illustrer les valeurs suivantes :
 
-<ul>
- <li><code>bold</code></li>
- <li><code>bold smaller</code></li>
-</ul>
+- `bold`
+- `bold smaller`
 
-<p>Mais il ne correspondra pas à :</p>
+Mais il ne correspondra pas à :
 
-<ul>
- <li><code>bold smaller smaller</code> car <code>smaller</code> doit apparaître au plus une fois</li>
- <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code> s'il est présent.</li>
-</ul>
+- `bold smaller smaller` car `smaller` doit apparaître au plus une fois
+- `smaller` car `bold` est juxtaposé et doit apparaître avant le mot-clé `smaller` s'il est présent.
 
-<h3 id="Les_accolades_(_)">Les accolades (<code>{ }</code>)</h3>
+### Les accolades (`{ }`)
 
-<p>Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité <strong>doit apparaître au moins A fois et au plus B fois</strong>.</p>
+Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité **doit apparaître au moins A fois et au plus B fois**.
 
-<pre class="syntaxbox">bold smaller{1,3}</pre>
+    bold smaller{1,3}
 
-<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+Cet exemple pourra illustrer les valeurs suivantes :
 
-<ul>
- <li><code>bold smaller</code></li>
- <li><code>bold smaller smaller</code></li>
- <li><code>bold smaller smaller smaller</code></li>
-</ul>
+- `bold smaller`
+- `bold smaller smaller`
+- `bold smaller smaller smaller`
 
-<p>Mais il ne correspondra pas à :</p>
+Mais il ne correspondra pas à :
 
-<ul>
- <li><code>bold</code> car <code>smaller</code> doit apparaître au moins une fois.</li>
- <li><code>bold smaller smaller smaller smaller</code> car <code>smaller</code> doit apparaître au plus trois fois.</li>
- <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code>.</li>
-</ul>
+- `bold` car `smaller` doit apparaître au moins une fois.
+- `bold smaller smaller smaller smaller` car `smaller` doit apparaître au plus trois fois.
+- `smaller` car `bold` est juxtaposé et doit apparaître avant le mot-clé `smaller`.
 
-<h3 id="Dièse_()">Dièse (<code>#</code>)</h3>
+### Dièse (`#`)
 
-<p>Le symbole dièse indique qu'une entité doit être répétée <strong>une ou plusieurs fois et que chaque occurrence est séparée par une virgule</strong>.</p>
+Le symbole dièse indique qu'une entité doit être répétée **une ou plusieurs fois et que chaque occurrence est séparée par une virgule**.
 
-<pre class="syntaxbox">bold smaller#</pre>
+    bold smaller#
 
-<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+Cet exemple pourra illustrer les valeurs suivantes :
 
-<ul>
- <li><code>bold smaller</code></li>
- <li><code>bold smaller, smaller</code></li>
- <li><code>bold smaller, smaller, smaller</code> and so on.</li>
-</ul>
+- `bold smaller`
+- `bold smaller, smaller`
+- `bold smaller, smaller, smaller` and so on.
 
-<p>Mais il ne correspondra pas à :</p>
+Mais il ne correspondra pas à :
 
-<ul>
- <li><code>bold</code> car <code>smaller</code> doit apparaître au moins une fois.</li>
- <li><code>bold smaller smaller smaller</code> car les différentes occurrences de <code>smaller</code> doivent être séparées par des virgules.</li>
- <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant toute occurrence du mot-clé <code>smaller</code>.</li>
-</ul>
+- `bold` car `smaller` doit apparaître au moins une fois.
+- `bold smaller smaller smaller` car les différentes occurrences de `smaller` doivent être séparées par des virgules.
+- `smaller` car `bold` est juxtaposé et doit apparaître avant toute occurrence du mot-clé `smaller`.
 
-<h3 id="Point_d'exclamation_(!)">Point d'exclamation (<code>!</code>)</h3>
+### Point d'exclamation (`!`)
 
-<p>Le multiplicateur <em>point d'exclamation</em> est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.</p>
+Le multiplicateur _point d'exclamation_ est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.
 
-<pre class="syntaxbox">[ bold? smaller? ]!
-</pre>
+    [ bold? smaller? ]!
 
-<p>Cet exemple correspondra aux valeurs suivantes :</p>
+Cet exemple correspondra aux valeurs suivantes :
 
-<ul>
- <li><code>bold</code></li>
- <li><code>smaller</code></li>
- <li><code>bold smaller</code></li>
-</ul>
+- `bold`
+- `smaller`
+- `bold smaller`
 
-<p>Mais pas à :</p>
+Mais pas à :
 
-<ul>
- <li>ni <code>bold</code> ni <code>smaller</code>, car il faut au moins l'un des deux.</li>
- <li><code>smaller bold</code>, car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code>.</li>
- <li><code>bold smaller bold</code>, car <code>bold</code> et <code>smaller</code> doivent apparaître au plus une fois.</li>
-</ul>
+- ni `bold` ni `smaller`, car il faut au moins l'un des deux.
+- `smaller bold`, car `bold` est juxtaposé et doit apparaître avant le mot-clé `smaller`.
+- `bold smaller bold`, car `bold` et `smaller` doivent apparaître au plus une fois.
 
-<h2 id="Récapitulatif">Récapitulatif</h2>
+## Récapitulatif
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Signe</th>
-   <th scope="col">Nom</th>
-   <th scope="col">Description</th>
-   <th scope="col">Exemple</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="4">Combinateurs</th>
-  </tr>
-  <tr>
-   <td> </td>
-   <td>Juxtaposition</td>
-   <td>Les composants sont obligatoires et doivent apparaître dans cet ordre.</td>
-   <td><code>solid &lt;length&gt;</code></td>
-  </tr>
-  <tr>
-   <td><code>&amp;&amp;</code></td>
-   <td>Double esperluette</td>
-   <td>Les composants sont obligatoires mais peuvent apparaître dans n'importe quel ordre.</td>
-   <td><code>&lt;length&gt; &amp;&amp; &lt;string&gt;</code></td>
-  </tr>
-  <tr>
-   <td><code>||</code></td>
-   <td>Double barre</td>
-   <td>Au moins un des composants doit être présent et ils peuvent apparaître dans n'importe quel ordre.</td>
-   <td><code>&lt;'border-image-outset'&gt; || &lt;'border-image-slice'&gt;</code></td>
-  </tr>
-  <tr>
-   <td><code>|</code></td>
-   <td>Barre simple</td>
-   <td>Un et un seul des composants doit être présent.</td>
-   <td><code>smaller | small | normal | big | bigger</code></td>
-  </tr>
-  <tr>
-   <td><code>[ ]</code></td>
-   <td>Crochets</td>
-   <td>Les composants peuvent être groupés pour avoir une priorité supérieure aux règles précédentes.</td>
-   <td><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></td>
-  </tr>
-  <tr>
-   <th colspan="4">Multiplicateurs</th>
-  </tr>
-  <tr>
-   <td> </td>
-   <td>Aucun multiplicateur</td>
-   <td>Exactement 1 fois.</td>
-   <td><code>solid</code></td>
-  </tr>
-  <tr>
-   <td><code>*</code></td>
-   <td>Astérisque</td>
-   <td>0 ou plus.</td>
-   <td><code>bold smaller*</code></td>
-  </tr>
-  <tr>
-   <td><code>+</code></td>
-   <td>Signe plus</td>
-   <td>1 ou plus.</td>
-   <td><code>bold smaller+</code></td>
-  </tr>
-  <tr>
-   <td><code>?</code></td>
-   <td>Point d'interrogation</td>
-   <td>0 ou 1 fois (autrement dit, la valeur est optionnelle<em>)</em></td>
-   <td><code>bold smaller?</code></td>
-  </tr>
-  <tr>
-   <td><code>{A,B}</code></td>
-   <td>Accolades</td>
-   <td>Au moins <code>A</code> fois et au plus <code>B</code> fois.</td>
-   <td><code>bold smaller{1,3}</code></td>
-  </tr>
-  <tr>
-   <td><code>#</code></td>
-   <td>Dièse</td>
-   <td>1 ou plus de fois mais chaque occurrence doit être séparée d'une autre par une virgule.</td>
-   <td><code>bold smaller#</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Signe</th>
+      <th scope="col">Nom</th>
+      <th scope="col">Description</th>
+      <th scope="col">Exemple</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th colspan="4">Combinateurs</th>
+    </tr>
+    <tr>
+      <td> </td>
+      <td>Juxtaposition</td>
+      <td>
+        Les composants sont obligatoires et doivent apparaître dans cet ordre.
+      </td>
+      <td><code>solid &#x3C;length></code></td>
+    </tr>
+    <tr>
+      <td><code>&#x26;&#x26;</code></td>
+      <td>Double esperluette</td>
+      <td>
+        Les composants sont obligatoires mais peuvent apparaître dans n'importe
+        quel ordre.
+      </td>
+      <td><code>&#x3C;length> &#x26;&#x26; &#x3C;string></code></td>
+    </tr>
+    <tr>
+      <td><code>||</code></td>
+      <td>Double barre</td>
+      <td>
+        Au moins un des composants doit être présent et ils peuvent apparaître
+        dans n'importe quel ordre.
+      </td>
+      <td>
+        <code>&#x3C;'border-image-outset'> || &#x3C;'border-image-slice'></code>
+      </td>
+    </tr>
+    <tr>
+      <td><code>|</code></td>
+      <td>Barre simple</td>
+      <td>Un et un seul des composants doit être présent.</td>
+      <td><code>smaller | small | normal | big | bigger</code></td>
+    </tr>
+    <tr>
+      <td><code>[ ]</code></td>
+      <td>Crochets</td>
+      <td>
+        Les composants peuvent être groupés pour avoir une priorité supérieure
+        aux règles précédentes.
+      </td>
+      <td><code>bold [ thin &#x26;&#x26; &#x3C;length> ]</code></td>
+    </tr>
+    <tr>
+      <th colspan="4">Multiplicateurs</th>
+    </tr>
+    <tr>
+      <td> </td>
+      <td>Aucun multiplicateur</td>
+      <td>Exactement 1 fois.</td>
+      <td><code>solid</code></td>
+    </tr>
+    <tr>
+      <td><code>*</code></td>
+      <td>Astérisque</td>
+      <td>0 ou plus.</td>
+      <td><code>bold smaller*</code></td>
+    </tr>
+    <tr>
+      <td><code>+</code></td>
+      <td>Signe plus</td>
+      <td>1 ou plus.</td>
+      <td><code>bold smaller+</code></td>
+    </tr>
+    <tr>
+      <td><code>?</code></td>
+      <td>Point d'interrogation</td>
+      <td>0 ou 1 fois (autrement dit, la valeur est optionnelle<em>)</em></td>
+      <td><code>bold smaller?</code></td>
+    </tr>
+    <tr>
+      <td><code>{A,B}</code></td>
+      <td>Accolades</td>
+      <td>Au moins <code>A</code> fois et au plus <code>B</code> fois.</td>
+      <td><code>bold smaller{1,3}</code></td>
+    </tr>
+    <tr>
+      <td><code>#</code></td>
+      <td>Dièse</td>
+      <td>
+        1 ou plus de fois mais chaque occurrence doit être séparée d'une autre
+        par une virgule.
+      </td>
+      <td><code>bold smaller#</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td>Ajout du multiplicateur avec le dièse.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Ajout de la double esperluette.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                             | Comment                                |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------- |
+| {{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}                 | {{Spec2('CSS3 Values')}} | Ajout du multiplicateur avec le dièse. |
+| {{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}         | {{Spec2('CSS2.1')}}         | Ajout de la double esperluette.        |
+| {{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}} | {{Spec2('CSS1')}}         | Définition initiale.                   |
diff --git a/files/fr/web/css/var()/index.md b/files/fr/web/css/var()/index.md
index c8317754ae..f57afd0f16 100644
--- a/files/fr/web/css/var()/index.md
+++ b/files/fr/web/css/var()/index.md
@@ -9,46 +9,45 @@ tags:
   - Variables CSS
 translation_of: Web/CSS/var()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La fonction <strong><code>var()</code></strong> peut être utilisée à la place d'une valeur pour n'importe quelle propriété d'un élément. Elle permet d'insérer la valeur d'<a href="/fr/docs/Web/CSS/--*">une propriété personnalisée (custom property)</a>.</p>
+La fonction **`var()`** peut être utilisée à la place d'une valeur pour n'importe quelle propriété d'un élément. Elle permet d'insérer la valeur d'[une propriété personnalisée (custom property)](/fr/docs/Web/CSS/--*).
 
-<pre class="brush: css">var(--header-color, blue);</pre>
+```css
+var(--header-color, blue);
+```
 
-<p>La fonction <code>var()</code> ne peut pas être utilisée pour les noms de propriété, les sélecteurs et pour tout ce qui n'est pas une valeur de propriété.</p>
+La fonction `var()` ne peut pas être utilisée pour les noms de propriété, les sélecteurs et pour tout ce qui n'est pas une valeur de propriété.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Le premier argument de la fonction est le nom de la propriété qu'on veut substituer. Le deuxième argument, optionnel, est une valeur de recours (<em>fallback</em>) qui est utilisée au cas où la valeur de subsitution référencée par la propriété est invalide.</p>
+Le premier argument de la fonction est le nom de la propriété qu'on veut substituer. Le deuxième argument, optionnel, est une valeur de recours (_fallback_) qui est utilisée au cas où la valeur de subsitution référencée par la propriété est invalide.
 
 {{csssyntax}}
 
-<div class="note">
-<p><strong>Note :</strong> La syntaxe de la valeur de recours permet d'utiliser des virgules. Aussi, si on a <code>var(--toto, red, blue)</code>, la valeur de recours sera bien <code>red, blue</code> (autrement dit, tout ce qui est situé après la première virgule sert de valeur de recours).</p>
-</div>
+> **Note :** La syntaxe de la valeur de recours permet d'utiliser des virgules. Aussi, si on a `var(--toto, red, blue)`, la valeur de recours sera bien `red, blue` (autrement dit, tout ce qui est situé après la première virgule sert de valeur de recours).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;custom-property-name&gt;</code></dt>
- <dd>Le nom d'une propriété personnalisée, représenté par un identifiant valide qui commence par deux tirets. Les propriétés personnalisées sont uniquement utilisées par les auteurs et les utilisateurs. CSS ne définit pas leur valeur ou leur sémantique.</dd>
- <dt><code>&lt;declaration-value&gt;</code></dt>
- <dd>Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici.</dd>
-</dl>
+- `<custom-property-name>`
+  - : Le nom d'une propriété personnalisée, représenté par un identifiant valide qui commence par deux tirets. Les propriétés personnalisées sont uniquement utilisées par les auteurs et les utilisateurs. CSS ne définit pas leur valeur ou leur sémantique.
+- `<declaration-value>`
+  - : Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici.
 
-<h2 id="Exemples​">Exemples​</h2>
+## Exemples​
 
-<pre class="brush: css">:root{
+```css
+:root{
   --main-bg-color: pink;
 }
 
 body {
   background-color: var(--main-bg-color);
 }
+```
 
-</pre>
-
-<pre class="brush: css">/* On ajoute un paramètre de secours */
+```css
+/* On ajoute un paramètre de secours */
 .component .header {
   color: var(--header-color, blue); // à ce moment header-color n'est pas définie, c'est donc le bleu qui est utilisé
 }
@@ -58,34 +57,20 @@ body {
 
 .component {
   --text-color: #080;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}</td>
-   <td>{{Spec2('CSS3 Variables')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.custom-property.var")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("env","env(…)")}} – variables d'environnement en lecture seule, contrôlées par l'agent utilisateur.</li>
- <li><a href="/fr/docs/Web/CSS/Utiliser_les_variables_CSS">Utiliser les variables CSS</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                                 | Commentaires         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Variables', '#using-variables', 'var()')}} | {{Spec2('CSS3 Variables')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.custom-property.var")}}
+
+## Voir aussi
+
+- {{cssxref("env","env(…)")}} – variables d'environnement en lecture seule, contrôlées par l'agent utilisateur.
+- [Utiliser les variables CSS](/fr/docs/Web/CSS/Utiliser_les_variables_CSS)
diff --git a/files/fr/web/css/vertical-align/index.md b/files/fr/web/css/vertical-align/index.md
index e477b68fba..376838fa53 100644
--- a/files/fr/web/css/vertical-align/index.md
+++ b/files/fr/web/css/vertical-align/index.md
@@ -7,24 +7,23 @@ tags:
   - Reference
 translation_of: Web/CSS/vertical-align
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>vertical-align</code></strong> définit l'alignement vertical d'une boîte en ligne (<em>inline</em>) ou d'une cellule de tableau.</p>
+La propriété **`vertical-align`** définit l'alignement vertical d'une boîte en ligne (_inline_) ou d'une cellule de tableau.
 
-<div>{{EmbedInteractiveExample("pages/css/vertical-align.html")}}</div>
+{{EmbedInteractiveExample("pages/css/vertical-align.html")}}
 
-<p>La propriété <code>vertical-align</code> peut être utilisée dans deux contextes :</p>
+La propriété `vertical-align` peut être utilisée dans deux contextes :
 
-<ul>
- <li>Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image ({{HTMLElement("img")}} sur une ligne de texte)</li>
- <li>ou pour aligner verticalement le contenu d'une cellule dans un tableau</li>
-</ul>
+- Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image ({{HTMLElement("img")}} sur une ligne de texte)
+- ou pour aligner verticalement le contenu d'une cellule dans un tableau
 
-<p><code>vertical-align</code> ne s'applique qu'aux cellules de tableaux et aux éléments en ligne (<em>inline</em>), elle ne peut pas être utilisée pour aligner verticalement <a href="/fr/docs/Web/HTML/Éléments_en_bloc">les éléments de bloc</a>.</p>
+`vertical-align` ne s'applique qu'aux cellules de tableaux et aux éléments en ligne (_inline_), elle ne peut pas être utilisée pour aligner verticalement [les éléments de bloc](/fr/docs/Web/HTML/Éléments_en_bloc).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 vertical-align: baseline;
 vertical-align: sub;
 vertical-align: super;
@@ -35,99 +34,93 @@ vertical-align: top;
 vertical-align: bottom;
 
 /* Valeurs de longueur */
-/* type &lt;length&gt; */
+/* type <length> */
 vertical-align: 10em;
 vertical-align: 4px;
 
 /* Valeurs en pourcentage */
-/* type &lt;percentage&gt; */
+/* type <percentage> */
 vertical-align: 20%;
 
 /* Valeurs globales */
 vertical-align: inherit;
 vertical-align: initial;
 vertical-align: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<h4 id="Pour_les_éléments_inline">Pour les éléments <em>inline</em></h4>
+#### Pour les éléments _inline_
 
-<div class="note">
-<p><strong>Note :</strong>  La plupart des valeurs alignent l'élément verticalement, relativement à son élément parent.</p>
-</div>
+> **Note :**  La plupart des valeurs alignent l'élément verticalement, relativement à son élément parent.
+
+- `baseline`
+  - : Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains [éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé), comme {{HTMLElement("textarea")}}, n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre.
+- `sub`
+  - : Aligne la ligne de base sur la ligne de base inférieure (celle utilisée pour les indices) de l'élément parent.
+- `super`
+  - : Aligne la ligne de base sur la ligne de base supérieure (celle utilisée pour les exposants) de l'élément parent.
+- `text-top`
+  - : Aligne le haut de l'élément avec le haut de la police de l'élément parent.
+- `text-bottom`
+  - : Aligne le bas de l'élément avec le bas de la police de l'élément parent.
+- `middle`
+  - : Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur.
+- {{cssxref("&lt;length&gt;")}}
+  - : Aligne la ligne de base de l'élément à la hauteur de la ligne de base de l'élément parent à laquelle on ajoute la hauteur donnée. Les valeurs négatives sont autorisées.
+- {{cssxref("&lt;percentage&gt;")}}
+  - : Fonctionne comme avec les valeurs de type {{cssxref("&lt;length&gt;")}}, le pourcentage indique une fraction de la propriété {{cssxref("line-height")}}. Les valeurs négatives sont autorisées.
+
+Les valeurs suivantes alignent l'élément par rapport à la ligne entière (absolu) plutôt que par rapport à leur parent (relatif) :
+
+- `top`
+  - : Aligne le haut de l'élément et de ses descendants avec le haut de la ligne entière.
+- `bottom`
+  - : Aligne le bas de l'élément et de ses descendants avec le bas de la ligne entière.
+
+Pour les éléments qui n'ont pas de ligne de base définie, c'est le bord de la marge basse qui est utilisée.
 
-<dl>
- <dt><code>baseline</code></dt>
- <dd>Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains <a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés</a>, comme {{HTMLElement("textarea")}}, n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre.</dd>
- <dt><code>sub</code></dt>
- <dd>Aligne la ligne de base sur la ligne de base inférieure (celle utilisée pour les indices) de l'élément parent.</dd>
- <dt><code>super</code></dt>
- <dd>Aligne la ligne de base sur la ligne de base supérieure (celle utilisée pour les exposants) de l'élément parent.</dd>
- <dt><code>text-top</code></dt>
- <dd>Aligne le haut de l'élément avec le haut de la police de l'élément parent.</dd>
- <dt><code>text-bottom</code></dt>
- <dd>Aligne le bas de l'élément avec le bas de la police de l'élément parent.</dd>
- <dt><code>middle</code></dt>
- <dd>Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur.</dd>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>Aligne la ligne de base de l'élément à la hauteur de la ligne de base de l'élément parent à laquelle on ajoute la hauteur donnée. Les valeurs négatives sont autorisées.</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>Fonctionne comme avec les valeurs de type {{cssxref("&lt;length&gt;")}}, le pourcentage indique une fraction de la propriété {{cssxref("line-height")}}. Les valeurs négatives sont autorisées.</dd>
-</dl>
-
-<p>Les valeurs suivantes alignent l'élément par rapport à la ligne entière (absolu) plutôt que par rapport à leur parent (relatif) :</p>
-
-<dl>
- <dt><code>top</code></dt>
- <dd>Aligne le haut de l'élément et de ses descendants avec le haut de la ligne entière.</dd>
- <dt><code>bottom</code></dt>
- <dd>Aligne le bas de l'élément et de ses descendants avec le bas de la ligne entière.</dd>
-</dl>
-
-<p>Pour les éléments qui n'ont pas de ligne de base définie, c'est le bord de la marge basse qui est utilisée.</p>
-
-<h4 id="Pour_les_cellules_de_tableau">Pour les cellules de tableau</h4>
-
-<dl>
- <dt><code>baseline</code>, <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code> et <code>&lt;percentage&gt;</code></dt>
- <dd>La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base. Les valeurs négatives sont autorisées.</dd>
- <dt><code>top</code></dt>
- <dd>Aligne le bord haut de la boîte de remplissage (<em>padding</em>) de la cellule avec le haut de la ligne.</dd>
- <dt><code>middle</code></dt>
- <dd>Centre la boîte de remplissage (<em>padding</em>) de la cellule avec la ligne.</dd>
- <dt><code>bottom</code></dt>
- <dd>Aligne le bord bas de la boîte de remplissage (<em>padding</em>) avec le bas de la ligne.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+#### Pour les cellules de tableau
+
+- `baseline`, `sub`, `super`, `text-top`, `text-bottom`, `<length>` et `<percentage>`
+  - : La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base. Les valeurs négatives sont autorisées.
+- `top`
+  - : Aligne le bord haut de la boîte de remplissage (_padding_) de la cellule avec le haut de la ligne.
+- `middle`
+  - : Centre la boîte de remplissage (_padding_) de la cellule avec la ligne.
+- `bottom`
+  - : Aligne le bord bas de la boîte de remplissage (_padding_) avec le bas de la ligne.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  Une &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="une icone générique" width="32" height="32" /&gt;
+```html
+<div>
+  Une <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="une icone générique" width="32" height="32" />
   image alignée par défaut.
-&lt;/div&gt;
-&lt;div&gt;
-  Une &lt;img class="haut" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt;
+</div>
+<div>
+  Une <img class="haut" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
   image alignée avec text-top.
-&lt;/div&gt;
-&lt;div&gt;
-  Une &lt;img class="bas" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt;
-  image alignée avec text-bottom.&lt;/div&gt;
-&lt;div&gt;
-  Une &lt;img class="pourcents" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt;
+</div>
+<div>
+  Une <img class="bas" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
+  image alignée avec text-bottom.</div>
+<div>
+  Une <img class="pourcents" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
   image alignée avec 200%.
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">img.haut {
+```css
+img.haut {
   vertical-align: text-top;
 }
 img.bas {
@@ -136,52 +129,29 @@ img.bas {
 img.pourcents {
   vertical-align: 200%;
 }
-</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Exemple")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>vertical-align</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Ajoute la valeur {{cssxref("&lt;length&gt;")}} et permet d'appliquer la propriété aux éléments dont {{cssxref("display")}} est de type <code>table-cell</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.vertical-align")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("line-height")}}, {{cssxref("text-align")}}, {{cssxref("margin")}}</li>
- <li><a href="https://phrogz.net/css/vertical-align/index.html">Comprendre <code>vertical-align</code> ou comment (ne pas) centrer des éléments verticalement</a> (en anglais)</li>
- <li><a href="https://christopheraue.net/design/vertical-align">Tout ce qu'il y a à savoir sur <code>vertical-align</code></a> (en anglais)</li>
- <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox#Centrer_des_éléments">Centrer des éléments avec <em>flexbox</em></a></li>
-</ul>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Exemple")}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                                     | Commentaires                                                                                                                                                          |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}             | {{Spec2('CSS3 Transitions')}} | `vertical-align` peut désormais être animée.                                                                                                                          |
+| {{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}} | {{Spec2('CSS2.1')}}                 | Ajoute la valeur {{cssxref("&lt;length&gt;")}} et permet d'appliquer la propriété aux éléments dont {{cssxref("display")}} est de type `table-cell`. |
+| {{SpecName('CSS1', '#vertical-align', 'vertical-align')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                  |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.vertical-align")}}
+
+## Voir aussi
+
+- {{cssxref("line-height")}}, {{cssxref("text-align")}}, {{cssxref("margin")}}
+- [Comprendre `vertical-align` ou comment (ne pas) centrer des éléments verticalement](https://phrogz.net/css/vertical-align/index.html) (en anglais)
+- [Tout ce qu'il y a à savoir sur `vertical-align`](https://christopheraue.net/design/vertical-align) (en anglais)
+- [Centrer des éléments avec _flexbox_](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox#Centrer_des_éléments)
diff --git a/files/fr/web/css/viewport_concepts/index.md b/files/fr/web/css/viewport_concepts/index.md
index 81899a483a..54c2a8f1fc 100644
--- a/files/fr/web/css/viewport_concepts/index.md
+++ b/files/fr/web/css/viewport_concepts/index.md
@@ -8,152 +8,157 @@ tags:
 translation_of: Web/CSS/Viewport_concepts
 original_slug: Web/CSS/Concepts_viewport
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p>Dans cet article, nous définirons le concept de <em>viewport</em> ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.</p>
+Dans cet article, nous définirons le concept de _viewport_ ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.
 
-<h2 id="Qu'est-ce_qu'une_zone_d'affichage_(viewport)">Qu'est-ce qu'une zone d'affichage (<em>viewport</em>) ?</h2>
+## Qu'est-ce qu'une zone d'affichage (_viewport_) ?
 
-<p>Une zone d'affichage (aussi appelée <em>viewport</em> en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.</p>
+Une zone d'affichage (aussi appelée _viewport_ en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.
 
-<p>Les documents (à l'instar de cet article) peuvent être très longs. La zone d'affichage correspond à ce qui est actuellement visible. Dans notre cas particulier, vous devriez pouvoir voir le titre Qu'est-ce qu'une zone d'affichage peut-être le menu de navigation. La taille de la zone d'affichage dépend de la taille de l'écran, de l'activation du mode plein écran, du niveau de zoom, etc. Le contenu situé à l'extérieur de la zone d'affichage (la section Voir aussi de ce document par exemple) n'est pas visible tant que l'utilisateur n'a pas fait défilé le contenu jusqu'à ce point.</p>
+Les documents (à l'instar de cet article) peuvent être très longs. La zone d'affichage correspond à ce qui est actuellement visible. Dans notre cas particulier, vous devriez pouvoir voir le titre Qu'est-ce qu'une zone d'affichage peut-être le menu de navigation. La taille de la zone d'affichage dépend de la taille de l'écran, de l'activation du mode plein écran, du niveau de zoom, etc. Le contenu situé à l'extérieur de la zone d'affichage (la section Voir aussi de ce document par exemple) n'est pas visible tant que l'utilisateur n'a pas fait défilé le contenu jusqu'à ce point.
 
-<ul>
- <li>Pour les écrans les plus grands où les applications ne sont pas nécessairement en plein écran, la zone d'affichage mesure la taille de la fenêtre du navigateur</li>
- <li>Sur la plupart des appareils mobiles ou lorsque le navigateur est en plein écran, la zone d'affichage correspond à l'ensemble de l'écran</li>
-</ul>
+- Pour les écrans les plus grands où les applications ne sont pas nécessairement en plein écran, la zone d'affichage mesure la taille de la fenêtre du navigateur
+- Sur la plupart des appareils mobiles ou lorsque le navigateur est en plein écran, la zone d'affichage correspond à l'ensemble de l'écran
 
-<p>En mode plein écran, la zone d'affichage sera l'écran de l'appareil, la fenêtre du navigateur pourra être plus grande ou plus petite que la zone d'affichage et le document sera le site web consulté et qui peut être plus grand ou plus large que la zone d'affichage.</p>
+En mode plein écran, la zone d'affichage sera l'écran de l'appareil, la fenêtre du navigateur pourra être plus grande ou plus petite que la zone d'affichage et le document sera le site web consulté et qui peut être plus grand ou plus large que la zone d'affichage.
 
-<p>Pour résumer, la zone d'affichage est la zone du document actuellement visible à l'écran.</p>
+Pour résumer, la zone d'affichage est la zone du document actuellement visible à l'écran.
 
-<h3 id="Les_dimensions_de_la_zone_d'affichage_sont_modifiables">Les dimensions de la zone d'affichage sont modifiables</h3>
+### Les dimensions de la zone d'affichage sont modifiables
 
-<p>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 :</p>
+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 :
 
-<pre class="brush: js">document.documentElement.clientWidth /* 1200 */
+```js
+document.documentElement.clientWidth /* 1200 */
 window.innerWidth /* 1200 */
 window.outerWidth /* 1200 */
-</pre>
+```
 
-<pre class="brush: js">document.documentElement.clientHeight /* 800 */
+```js
+document.documentElement.clientHeight /* 800 */
 window.innerHeight /* 800 */
 window.outerHeight /* 900 */
-</pre>
+```
 
-<p>Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées :</p>
+Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées :
 
-<ul>
- <li>La propriété du document {{DOMxRef("Element.clientWidth")}} est la largeur interne du document, exprimée en <a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport#Un_pixel_n'est_pas_un_pixel">pixels CSS</a>, et inclut le remplissage (<em>padding</em>) mais pas les marges, les bordures et les barres de défilement. <strong>C'est la largeur de la zone d'affichage</strong>.</li>
- <li>La propriété {{DOMxRef("Window.innerWidth")}} correspond à la largeur, exprimée en pixels CSS, de la zone d'affichage dans la fenêtre du navigateur qui contient les éventuelles barres de défilement verticales.</li>
- <li>La propriété {{DOMxRef("Window.outerWidth")}} correspond à la largeur extérieure de la fenêtre du navigateur et qui contient l'ensemble du <em>chrome</em> (les éléments d'interface utilisateur du navigateur qui ne sont pas ceux de la page web consultée).</li>
-</ul>
+- La propriété du document {{DOMxRef("Element.clientWidth")}} est la largeur interne du document, exprimée en [pixels CSS](/fr/docs/Mozilla/Mobile/Balise_meta_viewport#Un_pixel_n'est_pas_un_pixel), et inclut le remplissage (_padding_) mais pas les marges, les bordures et les barres de défilement. **C'est la largeur de la zone d'affichage**.
+- La propriété {{DOMxRef("Window.innerWidth")}} correspond à la largeur, exprimée en pixels CSS, de la zone d'affichage dans la fenêtre du navigateur qui contient les éventuelles barres de défilement verticales.
+- La propriété {{DOMxRef("Window.outerWidth")}} correspond à la largeur extérieure de la fenêtre du navigateur et qui contient l'ensemble du _chrome_ (les éléments d'interface utilisateur du navigateur qui ne sont pas ceux de la page web consultée).
 
-<p>Dans l'exemple précédent, on peut voir que <code>innerWidth</code> et <code>outerWidth</code> ont la même valeur mais que <code>outerHeight</code> mesure 100 pixels de plus que <code>innerHeight</code>. En effet, <code>outerHeight</code> tient compte du chrome du navigateur et les mesures ont été effectuées avec un navigateur dont la barre d'adresse, les onglets et la barre de favoris mesuraient ensemble 100 pixels de haut. En revanche, il n'y avait pas de <em>chrome</em> à gauche ou à droite de la fenêtre.</p>
+Dans l'exemple précédent, on peut voir que `innerWidth` et `outerWidth` ont la même valeur mais que `outerHeight` mesure 100 pixels de plus que `innerHeight`. En effet, `outerHeight` tient compte du chrome du navigateur et les mesures ont été effectuées avec un navigateur dont la barre d'adresse, les onglets et la barre de favoris mesuraient ensemble 100 pixels de haut. En revanche, il n'y avait pas de _chrome_ à gauche ou à droite de la fenêtre.
 
-<p>La zone contenu entre <code>innerHeight</code> et <code>innerWidth</code> correspond à <strong>la zone d'affichage pour la disposition (<em>layout viewport</em>)</strong>. Le chrome du navigateur ne fait pas partie de la zone d'affichage.</p>
+La zone contenu entre `innerHeight` et `innerWidth` correspond à **la zone d'affichage pour la disposition (_layout viewport_)**. Le chrome du navigateur ne fait pas partie de la zone d'affichage.
 
-<p>Lorsqu'on zoome, FIrefox et Chrome renvoient une nouvelle taille, en pixels CSS, pour <code>innerWidth</code> et <code>clientWidth</code>. Les valeurs renvoyées pour <code>outerWidth</code> et <code>outerHeight</code> 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 :</p>
+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 :
 
-<pre class="brush: js">document.documentElement.clientWidth /* 800 */
+```js
+document.documentElement.clientWidth /* 800 */
 window.innerWidth /* 800 */
 window.outerWidth /* 800 dans Firefox, 1200 dans Chrome */
-</pre>
+```
 
-<pre class="brush: js">document.documentElement.clientHeight /* 533 */
+```js
+document.documentElement.clientHeight /* 533 */
 window.innerHeight /* 533 */
 window.outerHeight /* 596 dans Firefox, 900 dans Chrome */
-</pre>
+```
 
-<p>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 <em>la zone d'affichage pour la disposition</em>.</p>
+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_.
 
-<pre class="brush: css">body &gt; header {
+```css
+body > header {
   position: fixed;
   top: 0;
 }
-body &gt; footer {
+body > footer {
   position: fixed;
   bottom: 0;
 }
-</pre>
+```
 
-<p>On a mesuré 800 x 533 après avoir zoomé à l'aide du clavier. Le haut et le bas de page ont suivi le haut et le bas de la fenêtre. Mais que ce serait-il passé si on avait zoomé au doigt sur une tablette ? Que se serait-il passé si un clavier tactile logiciel s'était ouvert sur le bas du téléphone ?</p>
+On a mesuré 800 x 533 après avoir zoomé à l'aide du clavier. Le haut et le bas de page ont suivi le haut et le bas de la fenêtre. Mais que ce serait-il passé si on avait zoomé au doigt sur une tablette ? Que se serait-il passé si un clavier tactile logiciel s'était ouvert sur le bas du téléphone ?
 
-<p>Dans le contexte du Web, on parle de deux zones d'affichage : <strong>la zone d'affichage pour la disposition (<em>layout viewport</em>)</strong> et <strong>la zone d'affichage visuelle (<em>visual viewport</em>)</strong>. La zone d'affichage visuelle est la partie de la page web qui est actuellement visible dans le navigateur et qui peut changer. Lorsqu'un utilisateur zoome en pinçant, provoque l'ouverture d'un clavier tactile ou lorsqu'une barre d'adresse s'affiche, la zone d'affichage visuelle se réduit mais la zone d'affichage pour la disposition reste inchangée.</p>
+Dans le contexte du Web, on parle de deux zones d'affichage : **la zone d'affichage pour la disposition (_layout viewport_)** et **la zone d'affichage visuelle (_visual viewport_)**. La zone d'affichage visuelle est la partie de la page web qui est actuellement visible dans le navigateur et qui peut changer. Lorsqu'un utilisateur zoome en pinçant, provoque l'ouverture d'un clavier tactile ou lorsqu'une barre d'adresse s'affiche, la zone d'affichage visuelle se réduit mais la zone d'affichage pour la disposition reste inchangée.
 
-<p>Les hauts et bas de pages vus dans l'exemple précédent se caleront en haut et en bas de la zone d'affichage pour la disposition. Aussi, ils resteront visibles lorsqu'on zoome au clavier mais pourrait être masqués (partiellement ou complètement) par un clavier visuel : autrement dit, ils pourraient ne pas faire partie de la zone d'affichage visuelle.</p>
+Les hauts et bas de pages vus dans l'exemple précédent se caleront en haut et en bas de la zone d'affichage pour la disposition. Aussi, ils resteront visibles lorsqu'on zoome au clavier mais pourrait être masqués (partiellement ou complètement) par un clavier visuel : autrement dit, ils pourraient ne pas faire partie de la zone d'affichage visuelle.
 
-<p>La zone d'affichage visuelle correspond à la partie de l'écran qui est visible sans contenir les claviers visuels, les zones en dehors de la région zoomée ou toute autre partie qui ne suit pas les dimensions d'une page. Ainsi, la zone d'affichage visuelle pourra avoir la même taille ou être plus petite que la zone d'affichage pour la disposition.</p>
+La zone d'affichage visuelle correspond à la partie de l'écran qui est visible sans contenir les claviers visuels, les zones en dehors de la région zoomée ou toute autre partie qui ne suit pas les dimensions d'une page. Ainsi, la zone d'affichage visuelle pourra avoir la même taille ou être plus petite que la zone d'affichage pour la disposition.
 
-<p>Pour une page contenant des <em>iframes</em>, des objets ou des SVG externes, chaque page imbriquée et chaque fichier inclus possède son propre objet pour la fenêtre. Seule la fenêtre de plus haut niveau possède une zone d'affichage visuelle qui peut être différente de la zone d'affichage pour la disposition. Pour les éléments imbriqués, la zone d'affichage visuelle et la zone d'affichage pour la disposition sont identiques.</p>
+Pour une page contenant des _iframes_, des objets ou des SVG externes, chaque page imbriquée et chaque fichier inclus possède son propre objet pour la fenêtre. Seule la fenêtre de plus haut niveau possède une zone d'affichage visuelle qui peut être différente de la zone d'affichage pour la disposition. Pour les éléments imbriqués, la zone d'affichage visuelle et la zone d'affichage pour la disposition sont identiques.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>La zone d'affichage pour la disposition et la zone d'affichage visuelle mentionnées jusqu'à présent ne sont pas les seules zones d'affichages à considérer. Toute zone d'affichage imbriquée, pleinement ou partiellement affichée dans la zone d'affichage pour la disposition sera considérée comme une zone d'affichage visuelle.</p>
+La zone d'affichage pour la disposition et la zone d'affichage visuelle mentionnées jusqu'à présent ne sont pas les seules zones d'affichages à considérer. Toute zone d'affichage imbriquée, pleinement ou partiellement affichée dans la zone d'affichage pour la disposition sera considérée comme une zone d'affichage visuelle.
 
-<p>On pense généralement que les hauteurs et largeurs utilisées pour les requêtes média correspondent à la hauteur et à la largeur de la fenêtre du navigateur mais elles correspondent en réalité à la taille de la zone d'affichage (la fenêtre pour le document principal ou les dimensions intrinsèques des objets imbriqués). En CSS, on peut également utiliser des unités proportionnelles aux dimensions de la zone d'affichage. Un <code>vh</code> correspond à 1% de la hauteur de la zone d'affichage pour la disposition et <code>vw</code> mesurera, de façon analogue, 1% de la largeur de la zone d'affichage pour la disposition.</p>
+On pense généralement que les hauteurs et largeurs utilisées pour les requêtes média correspondent à la hauteur et à la largeur de la fenêtre du navigateur mais elles correspondent en réalité à la taille de la zone d'affichage (la fenêtre pour le document principal ou les dimensions intrinsèques des objets imbriqués). En CSS, on peut également utiliser des unités proportionnelles aux dimensions de la zone d'affichage. Un `vh` correspond à 1% de la hauteur de la zone d'affichage pour la disposition et `vw` mesurera, de façon analogue, 1% de la largeur de la zone d'affichage pour la disposition.
 
-<h4 id="&lt;iframe>"><code>&lt;iframe&gt;</code></h4>
+#### `<iframe>`
 
-<p>À l'intérieur d'une <em>iframe</em>, la zone d'affichage visuelle est mesurée comme la largeur et la hauteur internes de l'<em>iframe</em> et non comme celles du document parent. Il est possible de définir n'importe quelle hauteur et largeur pour une <em>iframe</em> mais le document pourra ne pas être visible dans son intégralité.</p>
+À l'intérieur d'une _iframe_, la zone d'affichage visuelle est mesurée comme la largeur et la hauteur internes de l'_iframe_ et non comme celles du document parent. Il est possible de définir n'importe quelle hauteur et largeur pour une _iframe_ mais le document pourra ne pas être visible dans son intégralité.
 
-<p>Si on utilise les unités de longueur relatives à la zone d'affichage pour la mise en forme du document situé dans l'<em>iframe</em>, <code>1vh</code> correspondra à 1% de la hauteur de l'<em>iframe</em> et <code>1vw</code> correspondra à 1% de la largeur du document imbriqué.</p>
+Si on utilise les unités de longueur relatives à la zone d'affichage pour la mise en forme du document situé dans l'_iframe_, `1vh` correspondra à 1% de la hauteur de l'_iframe_ et `1vw` correspondra à 1% de la largeur du document imbriqué.
 
-<pre class="brush: css">iframe {
+```css
+iframe {
   width: 50vw;
 }
-</pre>
+```
 
-<p>Si l'<em>iframe</em> est dimensionnée à <code>50vw</code>, elle mesurera 50% de large des <code>1200px</code> du document parent (soit <code>600px</code>). À l'intérieur de cette <em>iframe</em>, <code>1vw</code> correspondra donc à <code>6px</code>. Lorsqu'on zoomera, l'<em>iframe</em> se réduira à <code>400px</code> de large et <code>1vw</code> correspondra alors à <code>4px</code>.</p>
+Si l'_iframe_ est dimensionnée à `50vw`, elle mesurera 50% de large des `1200px` du document parent (soit `600px`). À l'intérieur de cette _iframe_, `1vw` correspondra donc à `6px`. Lorsqu'on zoomera, l'_iframe_ se réduira à `400px` de large et `1vw` correspondra alors à `4px`.
 
-<p>Lorsqu'on utilise une requête média à l'intérieur du document de l'<em>iframe</em>, les dimensions utilisées sont relatives à la zone d'affichage de l'<em>iframe</em>.</p>
+Lorsqu'on utilise une requête média à l'intérieur du document de l'_iframe_, les dimensions utilisées sont relatives à la zone d'affichage de l'_iframe_.
 
-<pre class="brush: css">@media screen and (min-width: 500px) {
+```css
+@media screen and (min-width: 500px) {
   p {
     color: red;
   }
 }
-</pre>
+```
 
-<p>Si le fragment de code CSS était inclus dans l'<em>iframe</em>, les paragraphes seraient rouges avec un zoom utilisateur et normaux sinon.</p>
+Si le fragment de code CSS était inclus dans l'_iframe_, les paragraphes seraient rouges avec un zoom utilisateur et normaux sinon.
 
-<h4 id="SVG">SVG</h4>
+#### SVG
 
-<p>Pour un document SVG, la zone d'affichage correspond à la partie de l'image SVG qui est visible à l'écran. On peut définir n'importe quelle hauteur et largeur sur un SVG mais l'image pourra ne pas être entièrement visible. La taille de la zone d'affichage pourra être définie à l'aide des attributs <code>width</code> et <code>height</code> de l'élément {{SVGElement("svg")}}.</p>
+Pour un document SVG, la zone d'affichage correspond à la partie de l'image SVG qui est visible à l'écran. On peut définir n'importe quelle hauteur et largeur sur un SVG mais l'image pourra ne pas être entièrement visible. La taille de la zone d'affichage pourra être définie à l'aide des attributs `width` et `height` de l'élément {{SVGElement("svg")}}.
 
-<pre class="brush: html">&lt;svg height="300" width="400"&gt;&lt;/svg&gt;</pre>
+```html
+<svg height="300" width="400"></svg>
+```
 
-<p>Dans cet exemple, la zone d'affichage possède un ratio de 3::4 et mesure 400 x 300 unités (où les unités par défaut sont généralement des pixels CSS).</p>
+Dans cet exemple, la zone d'affichage possède un ratio de 3::4 et mesure 400 x 300 unités (où les unités par défaut sont généralement des pixels CSS).
 
-<p>SVG possède un système de coordonnées interne qui est défini grâce à l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/viewBox">viewbox</a></code> mais qui n'est pas directement lié à la problématique des zones d'affichage.</p>
+SVG possède un système de coordonnées interne qui est défini grâce à l'attribut [`viewbox`](/fr/docs/Web/SVG/Attribute/viewBox) mais qui n'est pas directement lié à la problématique des zones d'affichage.
 
-<p>Si on inclut un fichier SVG dans un document HTML, la zone d'affichage pour le SVG sera le bloc englobant initial ou la largeur et la hauteur du conteneur SVG. Si on utilise une requête média {{CSSxRef("@media")}} dans le code CSS du SVG, celle-ci sera relative à la taille du conteneur et pas à celle de la zone d'affichage du document.</p>
+Si on inclut un fichier SVG dans un document HTML, la zone d'affichage pour le SVG sera le bloc englobant initial ou la largeur et la hauteur du conteneur SVG. Si on utilise une requête média {{CSSxRef("@media")}} dans le code CSS du SVG, celle-ci sera relative à la taille du conteneur et pas à celle de la zone d'affichage du document.
 
-<pre class="brush: css">@media screen and (min-width: 400px) and (max-width: 500px) {
+```css
+@media screen and (min-width: 400px) and (max-width: 500px) {
   /* styles CSS ici */
-}</pre>
+}
+```
 
-<p>Lorsqu'on utilise la requête média précédente, les styles sont généralement appliqués lorsque la fenêtre du navigateur mesure entre 400px et 500px de large. Lorsqu'on utilise cette même requête à l'intérieur d'un document SVG, ce sera la largeur du conteneur (l'élément {{htmlelement("img")}} par exemple ou l'élément parent) qui sera considérée. Autrement dit, si on utilise la requête média précédente sur un document SVG, les styles seront appliqués si le conteneur du SVG mesure entre 400 et 500 pixels.</p>
+Lorsqu'on utilise la requête média précédente, les styles sont généralement appliqués lorsque la fenêtre du navigateur mesure entre 400px et 500px de large. Lorsqu'on utilise cette même requête à l'intérieur d'un document SVG, ce sera la largeur du conteneur (l'élément {{htmlelement("img")}} par exemple ou l'élément parent) qui sera considérée. Autrement dit, si on utilise la requête média précédente sur un document SVG, les styles seront appliqués si le conteneur du SVG mesure entre 400 et 500 pixels.
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<p>L'API <a href="/fr/docs/Web/API/Visual_Viewport_API">Visual Viewport</a> fournit des outils pour récupérer et modifier les propriétés de la zone d'affichage visuelle.</p>
+L'API [Visual Viewport](/fr/docs/Web/API/Visual_Viewport_API) fournit des outils pour récupérer et modifier les propriétés de la zone d'affichage visuelle.
 
-<h2 id="Zones_d'affichage_sur_mobiles">Zones d'affichage sur mobiles</h2>
+## Zones d'affichage sur mobiles
 
-<p>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 <code>&lt;meta&gt;</code> suivante :</p>
+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 `<meta>` suivante :
 
-<pre class="brush: html">
-&lt;meta name="viewport" content="width=device-width"&gt;
-</pre>
+```html
+<meta name="viewport" content="width=device-width">
+```
 
-<p>La propriété <code>width</code> contrôle la taille de la zone d'affichage et on l'utilisera généralement avec <code>device-width</code> 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 <code>maximum-scale</code>, <code>minimum-scale</code> et <code>user-scalable</code> 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.</p>
+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.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/@viewport">La règle @ <code>@viewport</code></a></li>
- <li><a href="/fr/docs/Web/API/Visual_Viewport_API">L'API Visual Viewport</a></li>
- <li>L'élément {{HTMLElement("meta")}} et notamment <code>&lt;meta name="viewport"&gt;</code></li>
- <li><a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport">L'utilisation de la balise méta <code>viewport</code> afin de contrôler la disposition sur les navigateurs mobiles</a></li>
-</ul>
+- [La règle @ `@viewport`](/fr/docs/Web/CSS/@viewport)
+- [L'API Visual Viewport](/fr/docs/Web/API/Visual_Viewport_API)
+- L'élément {{HTMLElement("meta")}} et notamment `<meta name="viewport">`
+- [L'utilisation de la balise méta `viewport` afin de contrôler la disposition sur les navigateurs mobiles](/fr/docs/Mozilla/Mobile/Balise_meta_viewport)
diff --git a/files/fr/web/css/visibility/index.md b/files/fr/web/css/visibility/index.md
index 319decacb7..16e776b6ec 100644
--- a/files/fr/web/css/visibility/index.md
+++ b/files/fr/web/css/visibility/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/visibility
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>visibility</code></strong> peut être utilisée afin de cacher un élément tout en conservant occupé l'espace dans lequel il aurait été visible. Elle permet aussi de masquer des lignes ou des colonnes dans un tableau (cf. {{HTMLElement("table")}}).</p>
+La propriété **`visibility`** peut être utilisée afin de cacher un élément tout en conservant occupé l'espace dans lequel il aurait été visible. Elle permet aussi de masquer des lignes ou des colonnes dans un tableau (cf. {{HTMLElement("table")}}).
 
-<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>
+{{EmbedInteractiveExample("pages/css/visibility.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> Afin de cacher un élément et de le retirer de la disposition du document, on utilisera plutôt la propriété {{cssxref("display")}} avec la valeur <code>none</code>.</p>
-</div>
+> **Note :** Afin de cacher un élément et de le retirer de la disposition du document, on utilisera plutôt la propriété {{cssxref("display")}} avec la valeur `none`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 visibility: visible;
 visibility: hidden;
 visibility: collapse;
@@ -28,59 +27,57 @@ visibility: collapse;
 visibility: inherit;
 visibility: initial;
 visibility: unset;
-</pre>
-
-<p>La propriété <code>visibility</code> est définie avec l'un des mots-clés suivants.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>visible</code></dt>
- <dd>La valeur par défaut, la boîte est visible.</dd>
- <dt><code>hidden</code></dt>
- <dd>La boîte est invisible (totalement transparente, rien n'est dessiné) mais continue d'avoir un impact sur la disposition. Les fils de l'élément seront visibles s'ils ont <code>visibility:visible</code>. L'élément ne pourra plus recevoir le focus (cf. <a href="/fr/docs/Web/HTML/Global_attributes/tabindex">la navigation au clavier avec les tabulations</a>).</dd>
- <dt><code>collapse</code></dt>
- <dd>
-  <p>Le mot-clé <code>collapse</code> a différents effets selon les éléments :</p>
- <ul>
-  <li>Pour les lignes, les colonnes, les groupes de lignes et les groupes de colonnes d'un tableau, les éléments sont masqués et l'espace occupé est retiré (comme si on avait appliqué <code>{{cssxref("display")}}: none</code> aux colonnes/lignes du tableau). La taille des autres lignes et colonnes continue d'être calculée comme si les lignes et colonnes masquées étaient présentes. Cela a été conçu afin de pouvoir retirer rapidement des lignes et/ou des colonnes sans avoir à recalculer les dimensions pour l'ensemble du tableau.</li>
-  <li>Les éléments flexibles sont masqués et l'espace qu'ils auraient occupé est retiré.</li>
-  <li>Pour les éléments XUL, la taille calculée des éléments vaut toujours zéro, quel que soit les autres styles qui pourraient affecter la taille, les marges continuent de s'appliquer.</li>
-  <li>Pour les autres éléments, <code>collapse</code> est traité comme <code>hidden</code>.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `visibility` est définie avec l'un des mots-clés suivants.
+
+### Valeurs
+
+- `visible`
+  - : La valeur par défaut, la boîte est visible.
+- `hidden`
+  - : La boîte est invisible (totalement transparente, rien n'est dessiné) mais continue d'avoir un impact sur la disposition. Les fils de l'élément seront visibles s'ils ont `visibility:visible`. L'élément ne pourra plus recevoir le focus (cf. [la navigation au clavier avec les tabulations](/fr/docs/Web/HTML/Global_attributes/tabindex)).
+- `collapse`
+
+  - : Le mot-clé `collapse` a différents effets selon les éléments :
+
+    - Pour les lignes, les colonnes, les groupes de lignes et les groupes de colonnes d'un tableau, les éléments sont masqués et l'espace occupé est retiré (comme si on avait appliqué `{{cssxref("display")}}: none` aux colonnes/lignes du tableau). La taille des autres lignes et colonnes continue d'être calculée comme si les lignes et colonnes masquées étaient présentes. Cela a été conçu afin de pouvoir retirer rapidement des lignes et/ou des colonnes sans avoir à recalculer les dimensions pour l'ensemble du tableau.
+    - Les éléments flexibles sont masqués et l'espace qu'ils auraient occupé est retiré.
+    - Pour les éléments XUL, la taille calculée des éléments vaut toujours zéro, quel que soit les autres styles qui pourraient affecter la taille, les marges continuent de s'appliquer.
+    - Pour les autres éléments, `collapse` est traité comme `hidden`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Interpolation">Interpolation</h2>
+## Interpolation
 
-<p>Les valeurs de visibilité peuvent être interpolées entre <em>visible</em> et <em>masqué</em>. L'une des valeurs de début ou de fin doit donc être <code>visible</code>, sinon il n'y aura pas d'interpolation. L'interpolation est discrète (passage direct d'un état à l'autre), les valeurs supérieures à 0 sont considérées équivalentes à <code>visible</code>. On pourra plutôt utiliser {{cssxref("opacity")}} pour créer un effet doux plutôt que de masquer/rendre visible l'élément brusquement.</p>
+Les valeurs de visibilité peuvent être interpolées entre _visible_ et _masqué_. L'une des valeurs de début ou de fin doit donc être `visible`, sinon il n'y aura pas d'interpolation. L'interpolation est discrète (passage direct d'un état à l'autre), les valeurs supérieures à 0 sont considérées équivalentes à `visible`. On pourra plutôt utiliser {{cssxref("opacity")}} pour créer un effet doux plutôt que de masquer/rendre visible l'élément brusquement.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   On peut dire tout ce qu'on veut ici,
   ce ne sera pas lisible de toute façon.
-&lt;/p&gt;
-&lt;p class="coucou"&gt;
+</p>
+<p class="coucou">
   Alors que là, on a la bonne classe.
   Coucou tout le monde :)
-&lt;/p&gt;
-&lt;p&gt;
+</p>
+<p>
   Et on repasse en mode invisible.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush:css">p {
+```css
+p {
   /* les paragraphes ne seront pas visibles */
   visibility: hidden;
 }
@@ -89,99 +86,72 @@ p.coucou {
   /* sauf ceux avec la classe coucou */
   visibility: visible;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+{{EmbedLiveSample("Exemple_simple")}}
 
-<h3 id="Exemple_sur_un_tableau">Exemple sur un tableau</h3>
+### Exemple sur un tableau
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Jean&lt;/td&gt;
-    &lt;td&gt;Biche&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr class="col"&gt;
-    &lt;td&gt;Hit&lt;/td&gt;
-    &lt;td&gt;Girl&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Super&lt;/td&gt;
-    &lt;td&gt;Cochon&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-</pre>
+```html
+<table>
+  <tr>
+    <td>Jean</td>
+    <td>Biche</td>
+  </tr>
+  <tr class="col">
+    <td>Hit</td>
+    <td>Girl</td>
+  </tr>
+  <tr>
+    <td>Super</td>
+    <td>Cochon</td>
+  </tr>
+</table>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">tr.col {
+```css
+tr.col {
   /* les lignes de tableau avec la classe */
   /* col seront repliées */
   visibility: collapse;
 }
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_sur_un_tableau")}}</p>
+{{EmbedLiveSample("Exemple_sur_un_tableau")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Utiliser la propriété <code>visibility</code> avec la valeur <code>hidden</code> retirera l'objet de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">l'arbre d'accessibilité</a>. Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d'écran.</p>
+Utiliser la propriété `visibility` avec la valeur `hidden` retirera l'objet de [l'arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis). Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d'écran.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Le support de <code>visibility:collapse</code> est absent ou incorrect pour certains navigateurs récents. Dans de nombreux cas, il n'est pas correctement traité comme <code>visibility:hidden</code> sur les éléments qui ne sont pas des lignes et/ou des colonnes de tableau.</li>
- <li><code>visibility:collapse</code> peut modifier la disposition d'un tableau si le tableau possède des tableaux imbriqués dont les cellules sont repliées, sauf si <code>visibility:visible</code> est défini explicitement sur les tableaux imbriqués.</li>
-</ul>
+- Le support de `visibility:collapse` est absent ou incorrect pour certains navigateurs récents. Dans de nombreux cas, il n'est pas correctement traité comme `visibility:hidden` sur les éléments qui ne sont pas des lignes et/ou des colonnes de tableau.
+- `visibility:collapse` peut modifier la disposition d'un tableau si le tableau possède des tableaux imbriqués dont les cellules sont repliées, sauf si `visibility:visible` est défini explicitement sur les tableaux imbriqués.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Définition de la valeur <code>collapse</code> pour les éléments flexibles.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>visibility</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaires                                                    |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------- |
+| {{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}} | {{Spec2('CSS3 Flexbox')}}         | Définition de la valeur `collapse` pour les éléments flexibles. |
+| {{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}             | {{Spec2('CSS3 Box')}}             | Aucune modification.                                            |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}} | {{Spec2('CSS3 Transitions')}} | `visibility` peut désormais être animée.                        |
+| {{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}     | {{Spec2('CSS2.1')}}                 | Définition initiale.                                            |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.visibility")}}</p>
+{{Compat("css.properties.visibility")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("display")}}</li>
- <li>{{cssxref("opacity")}}</li>
-</ul>
+- {{cssxref("display")}}
+- {{cssxref("opacity")}}
diff --git a/files/fr/web/css/visual_formatting_model/index.md b/files/fr/web/css/visual_formatting_model/index.md
index 2d49388aa8..d1972480ec 100644
--- a/files/fr/web/css/visual_formatting_model/index.md
+++ b/files/fr/web/css/visual_formatting_model/index.md
@@ -8,173 +8,168 @@ tags:
 translation_of: Web/CSS/Visual_formatting_model
 original_slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">le modèle de boîtes CSS</a>. La disposition de chaque boîte est dictée par :</p>
+En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans [le modèle de boîtes CSS](/en-US/docs/Learn/CSS/Building_blocks/The_box_model). La disposition de chaque boîte est dictée par :
 
-<ul>
- <li>Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non</li>
- <li>Le type de la boîte : en ligne, en ligne et de niveau (<em>inline-level</em>), atomique, en bloc</li>
- <li>Le mode de positionnement : dans le flux normal, en flottement ou positionnée de façon absolue</li>
- <li>Les autres éléments présents dans l'arbre du document et notamment ses enfants et ses voisins</li>
- <li>La taille et la position de la zone d'affichage (<em>viewport</em>)</li>
- <li>Les dimensions intrinsèques des images qu'elle contient</li>
- <li>Éventuellement d'autres informations externes.</li>
-</ul>
+- Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non
+- Le type de la boîte : en ligne, en ligne et de niveau (_inline-level_), atomique, en bloc
+- Le mode de positionnement : dans le flux normal, en flottement ou positionnée de façon absolue
+- Les autres éléments présents dans l'arbre du document et notamment ses enfants et ses voisins
+- La taille et la position de la zone d'affichage (_viewport_)
+- Les dimensions intrinsèques des images qu'elle contient
+- Éventuellement d'autres informations externes.
 
-<p>Le modèle affiche une boîte par rapport au bord du bloc qui la contient. Généralement, une boîte devient le bloc contenant pour ses éléments descendants. Toutefois, une boîte n'est pas contrainte dans son bloc contenant, le contenu d'une boîte peut parfois dépasser (ce qu'on appelle en anglais <em>overflow</em>).</p>
+Le modèle affiche une boîte par rapport au bord du bloc qui la contient. Généralement, une boîte devient le bloc contenant pour ses éléments descendants. Toutefois, une boîte n'est pas contrainte dans son bloc contenant, le contenu d'une boîte peut parfois dépasser (ce qu'on appelle en anglais _overflow_).
 
-<h2 id="Génération_de_la_boîte">Génération de la boîte</h2>
+## Génération de la boîte
 
-<p>Lors de cette étape, on crée les boîtes à partir des éléments du document. Les boîtes générées sont de différents types et ces types ont un impact sur la mise en forme visuelle. Le type de boîte générée dépend de la valeur de la propriété {{cssxref("display")}}.</p>
+Lors de cette étape, on crée les boîtes à partir des éléments du document. Les boîtes générées sont de différents types et ces types ont un impact sur la mise en forme visuelle. Le type de boîte générée dépend de la valeur de la propriété {{cssxref("display")}}.
 
-<h3 id="Les_éléments_de_bloc_et_les_boîtes_de_bloc">Les éléments de bloc et les boîtes de bloc</h3>
+### Les éléments de bloc et les boîtes de bloc
 
-<p>Un élément est dit « de bloc » lorsque <a href="/fr/docs/Web/CSS/computed_value">la valeur calculée</a> de la propriété {{cssxref("display")}} qui lui est appliquée vaut : <code>block</code>, <code>list-item</code> ou <code>table</code>. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.</p>
+Un élément est dit « de bloc » lorsque [la valeur calculée](/fr/docs/Web/CSS/computed_value) de la propriété {{cssxref("display")}} qui lui est appliquée vaut : `block`, `list-item` ou `table`. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.
 
-<p>Chaque boîte de bloc contribue au <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de mise en forme des blocs</a>. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.</p>
+Chaque boîte de bloc contribue au [contexte de mise en forme des blocs](/fr/docs/Web/Guide/CSS/Block_formatting_context). Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.
 
-<p>La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.</p>
+La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.
 
-<p><img alt="venn_blocks.png" src="venn_blocks.png"></p>
+![venn_blocks.png](venn_blocks.png)
 
-<p>Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.</p>
+Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.
 
-<p>Les boîtes de bloc qui sont également des conteneurs de blocs sont appelées des boîtes-bloc.</p>
+Les boîtes de bloc qui sont également des conteneurs de blocs sont appelées des boîtes-bloc.
 
-<h4 id="Les_boîtes_de_bloc_anonymes">Les boîtes de bloc anonymes</h4>
+#### Les boîtes de bloc anonymes
 
-<p>Dans certains cas, l'algorithme doit ajouter certaines boîtes supplémentaires. Or, les sélecteurs CSS ne permettent pas de mettre en forme ou de nommer ces boîtes, elles sont donc appelées boîtes de bloc <em>anonymes</em>.</p>
+Dans certains cas, l'algorithme doit ajouter certaines boîtes supplémentaires. Or, les sélecteurs CSS ne permettent pas de mettre en forme ou de nommer ces boîtes, elles sont donc appelées boîtes de bloc _anonymes_.
 
-<p>Les sélecteurs ne permettent pas de manipuler la mise en forme de ces boîtes. Aussi, pour ces boîtes, toutes les propriétés CSS utilisant l'héritage auront la valeur {{cssxref("inherit")}} et toutes les propriétés CSS qui ne sont pas héritées auront la valeur <code>initial</code>.</p>
+Les sélecteurs ne permettent pas de manipuler la mise en forme de ces boîtes. Aussi, pour ces boîtes, toutes les propriétés CSS utilisant l'héritage auront la valeur {{cssxref("inherit")}} et toutes les propriétés CSS qui ne sont pas héritées auront la valeur `initial`.
 
-<p>Les boîtes qui contiennent des blocs ne contiennent que des boîtes en ligne ou que des boîtes en blocs. Mais souvent, le document contient un mélange des deux. Dans ces cas, des boîtes de bloc anonymes sont créées autour des boîtes en lignes adjacentes.</p>
+Les boîtes qui contiennent des blocs ne contiennent que des boîtes en ligne ou que des boîtes en blocs. Mais souvent, le document contient un mélange des deux. Dans ces cas, des boîtes de bloc anonymes sont créées autour des boîtes en lignes adjacentes.
 
-<p>Si on prend le code HTML suivant, mis en forme avec les règles par défaut (<code>display:block</code>) :</p>
+Si on prend le code HTML suivant, mis en forme avec les règles par défaut (`display:block`) :
 
-<pre class="brush: html">&lt;div&gt;
+```html
+<div>
    Some inline text
-   &lt;p&gt;followed by a paragraph&lt;/p&gt;
+   <p>followed by a paragraph</p>
    followed by more inline text.
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<p>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 :<br>
-   <img alt="anonymous_block-level_boxes.png" src="anonymous_block-level_boxes.png"></p>
+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)
 
-<p>À 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 <code>initial</code>.</p>
+À 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`.
 
-<p>Un autre scénario peut amener à la création de boîtes de bloc anonyme : lorsqu'une boîte en ligne contient une ou plusieurs boîtes de bloc. Dans ce cas, la boîte qui contient la boîte de bloc est divisée en deux boîtes en ligne : une avant et une après la boîte de bloc. Toutes les boîtes en ligne avant la boîte de bloc sont englobées dans une boîte de bloc anonyme et il en va de même pour les boîtes en ligne qui suivent la boîte de bloc. Aussi, la boîte de bloc devient un voisin de deux boîtes de bloc anonymes qui contiennent les éléments en ligne.</p>
+Un autre scénario peut amener à la création de boîtes de bloc anonyme : lorsqu'une boîte en ligne contient une ou plusieurs boîtes de bloc. Dans ce cas, la boîte qui contient la boîte de bloc est divisée en deux boîtes en ligne : une avant et une après la boîte de bloc. Toutes les boîtes en ligne avant la boîte de bloc sont englobées dans une boîte de bloc anonyme et il en va de même pour les boîtes en ligne qui suivent la boîte de bloc. Aussi, la boîte de bloc devient un voisin de deux boîtes de bloc anonymes qui contiennent les éléments en ligne.
 
-<p>S'il y a plusieurs boîtes de bloc sans contenu en ligne entre elles, les boîtes de bloc anonymes sont créées avant et après ces boîtes.</p>
+S'il y a plusieurs boîtes de bloc sans contenu en ligne entre elles, les boîtes de bloc anonymes sont créées avant et après ces boîtes.
 
-<p>Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura <code>display:inline</code> et {{HTMLElement("span")}} aura <code>display:block</code> :</p>
+Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura `display:inline` et {{HTMLElement("span")}} aura `display:block` :
 
-<pre class="brush: html">&lt;p&gt;
-  Some &lt;em&gt;inline&lt;/em&gt; text
-  &lt;span&gt;followed by a paragraph&lt;/span&gt;
+```html
+<p>
+  Some <em>inline</em> text
+  <span>followed by a paragraph</span>
   followed by more inline text.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<p>Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <code>&lt;span&gt;</code> et une pour le texte qui suit cet élément. On a alors la structure suivante :</p>
+Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément `<span>` et une pour le texte qui suit cet élément. On a alors la structure suivante :
 
-<p><img alt="" src="anonymous_block_box_break.png"></p>
+![](anonymous_block_box_break.png)
 
-<h3 id="Les_éléments_en_ligne_et_les_boîtes_en_ligne">Les éléments en ligne et les boîtes en ligne</h3>
+### Les éléments en ligne et les boîtes en ligne
 
-<p>Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : <code>inline</code>, <code>inline-block</code> ou <code>inline-table</code>. Visuellement, un tel élément est organisé sur des lignes qui se suivent les unes les autres avec d'autre contenu en ligne. Généralement, il s'agit du contenu d'un paragraphe (éventuellement mis en forme).</p>
+Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : `inline`, `inline-block` ou `inline-table`. Visuellement, un tel élément est organisé sur des lignes qui se suivent les unes les autres avec d'autre contenu en ligne. Généralement, il s'agit du contenu d'un paragraphe (éventuellement mis en forme).
 
-<p>Les éléments en ligne génèrent des boîtes en lignes qui contribuent <a href="/fr/docs/CSS/Inline_formatting_context">au contexte de mise en forme en ligne</a>.</p>
+Les éléments en ligne génèrent des boîtes en lignes qui contribuent [au contexte de mise en forme en ligne](/fr/docs/CSS/Inline_formatting_context).
 
-<p>Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.</p>
+Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.
 
-<pre class="brush: html">&lt;style&gt;
+```html
+<style>
   span {
     /* La valeur par défaut */
     display:inline;
   }
-&lt;/style&gt;
-&lt;div style="width:20em;"&gt;
-   Le texte dans le span &lt;span&gt;peut être divisé
-   en plusieurs lignes&lt;/span&gt; dans une boîte en
+</style>
+<div style="width:20em;">
+   Le texte dans le span <span>peut être divisé
+   en plusieurs lignes</span> dans une boîte en
    ligne.
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<pre class="brush: html">&lt;style&gt;
+```html
+<style>
   span {
     display:inline-block;
   }
-&lt;/style&gt;
-&lt;div style="width:20em;"&gt;
-   Le texte dans le span &lt;span&gt;ne peut pas être
-   divisé en plusieurs lignes car&lt;/span&gt; il est
+</style>
+<div style="width:20em;">
+   Le texte dans le span <span>ne peut pas être
+   divisé en plusieurs lignes car</span> il est
    dans une boîte de type inline-block.
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<h4 id="Les_boîtes_en_ligne_anonymes">Les boîtes en ligne anonymes</h4>
+#### Les boîtes en ligne anonymes
 
-<p>Comme pour les boîtes de bloc, il existe quelques cas pour lesquels des boîtes en lignes sont automatiquement créées par le moteur CSS. Ces boîtes en ligne sont également anonymes et ne peuvent être ciblées par les sélecteurs. Pour les propriétés qui fonctionnent avec l'héritage, ces boîtes hériteront de la valeur de la propriété <code>relative</code> à l'élément parent, pour les autres, elles vaudront <code>initial</code>.</p>
+Comme pour les boîtes de bloc, il existe quelques cas pour lesquels des boîtes en lignes sont automatiquement créées par le moteur CSS. Ces boîtes en ligne sont également anonymes et ne peuvent être ciblées par les sélecteurs. Pour les propriétés qui fonctionnent avec l'héritage, ces boîtes hériteront de la valeur de la propriété `relative` à l'élément parent, pour les autres, elles vaudront `initial`.
 
-<p>La plupart du temps, une boîte en ligne anonyme est créée lorsque du texte se trouve être un enfant direct d'une boîte en bloc, ce qui crée un contexte de mise en forme en ligne. Dans ce cas, le texte est inclus dans la plus grande boîte en ligne qui puisse être et c'est cette boîte qui est la boîte anonyme. Par ailleurs, le contenu blanc qui serait retiré par la propriété {{cssxref("white-space")}} ne génère pas de boîtes en ligne car celles-ci seraient vides.</p>
+La plupart du temps, une boîte en ligne anonyme est créée lorsque du texte se trouve être un enfant direct d'une boîte en bloc, ce qui crée un contexte de mise en forme en ligne. Dans ce cas, le texte est inclus dans la plus grande boîte en ligne qui puisse être et c'est cette boîte qui est la boîte anonyme. Par ailleurs, le contenu blanc qui serait retiré par la propriété {{cssxref("white-space")}} ne génère pas de boîtes en ligne car celles-ci seraient vides.
 
-<h3 id="Les_autres_types_de_boîte">Les autres types de boîte</h3>
+### Les autres types de boîte
 
-<h4 id="Les_boîtes_de_ligne">Les boîtes de ligne</h4>
+#### Les boîtes de ligne
 
-<p><em>Les boîtes de ligne</em> sont générées dans un contexte de mise en forme en ligne afin de représenter une ligne de texte. Au sein d'une boîte en bloc, un boîte de ligne s'étend d'un bord à l'autre de la boîte. Lorsqu'il y a une disposition flottante, la boîte de ligne démarre au bord le plus à droite de la partie flottante qui est située à gauche et finit à la droite du bord gauche suivant.</p>
+_Les boîtes de ligne_ sont générées dans un contexte de mise en forme en ligne afin de représenter une ligne de texte. Au sein d'une boîte en bloc, un boîte de ligne s'étend d'un bord à l'autre de la boîte. Lorsqu'il y a une disposition flottante, la boîte de ligne démarre au bord le plus à droite de la partie flottante qui est située à gauche et finit à la droite du bord gauche suivant.
 
-<p>Ces boîtes sont uniquement utilisées par le moteur et les développeurs web ne devraient pas avoir à s'en préoccuper.</p>
+Ces boîtes sont uniquement utilisées par le moteur et les développeurs web ne devraient pas avoir à s'en préoccuper.
 
-<h4 id="Les_types_de_boîtes_liés_au_modèle_CSS">Les types de boîtes liés au modèle CSS</h4>
+#### Les types de boîtes liés au modèle CSS
 
-<p>En plus des boîtes en ligne et des boîtes de bloc, CSS définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :</p>
+En plus des boîtes en ligne et des boîtes de bloc, CSS définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :
 
-<ul>
- <li>Le modèle de contenu pour les tableaux utilise des boîtes englobant les tableaux, des boîtes de tableau et des boîtes de légende</li>
- <li>Le modèle de contenu à plusieurs colonnes permet de créer des boîtes de colonne entre la boîte englobante et le contenu<em>.</em></li>
- <li>Les modèles de contenu expérimentaux en grille (<em>CSS Grid</em>) ou avec les boîtes flexibles (<em>flexbox</em>) définissent d'autres types de boîtes.</li>
-</ul>
+- Le modèle de contenu pour les tableaux utilise des boîtes englobant les tableaux, des boîtes de tableau et des boîtes de légende
+- Le modèle de contenu à plusieurs colonnes permet de créer des boîtes de colonne entre la boîte englobante et le contenu*.*
+- Les modèles de contenu expérimentaux en grille (_CSS Grid_) ou avec les boîtes flexibles (_flexbox_) définissent d'autres types de boîtes.
 
-<h2 id="Modes_de_positionnement">Modes de positionnement</h2>
+## Modes de positionnement
 
-<p>Une fois les boîtes générées, le moteur CSS doit les disposer les unes par rapport aux autres. Pour ce faire, il utilise un des algorithmes suivants :</p>
+Une fois les boîtes générées, le moteur CSS doit les disposer les unes par rapport aux autres. Pour ce faire, il utilise un des algorithmes suivants :
 
-<ul>
- <li>Le mode de positionnement normal positionne les boîtes les unes après les autres</li>
- <li>Le mode de positionnement flottant permet d'extraire une boîte du flux normal et de la placer sur le côté de la boîte englobante</li>
- <li>Le mode de positionnement absolu permet de placer une boîte dans un système de coordonnées absolues, basée sur l'élément englobant. Un élément positionné de façon absolue peut recouvrir d'autres éléments.</li>
-</ul>
+- Le mode de positionnement normal positionne les boîtes les unes après les autres
+- Le mode de positionnement flottant permet d'extraire une boîte du flux normal et de la placer sur le côté de la boîte englobante
+- Le mode de positionnement absolu permet de placer une boîte dans un système de coordonnées absolues, basée sur l'élément englobant. Un élément positionné de façon absolue peut recouvrir d'autres éléments.
 
-<h3 id="Le_mode_normal">Le mode normal</h3>
+### Le mode normal
 
-<p>Dans le mode de positionnement normal, les boîtes sont disposées les unes après les autres. Pour un contexte de mise en forme de bloc, elles seront empilées verticalement et pour un contexte de mise en forme en ligne, elles se suivront horizontalement. Le mode de disposition normal est déclenché lorsque la propriété CSS {{cssxref("position")}} vaut <code>static</code> ou <code>relative</code> et si la propriété CSS {{cssxref("float")}} vaut <code>none</code>.</p>
+Dans le mode de positionnement normal, les boîtes sont disposées les unes après les autres. Pour un contexte de mise en forme de bloc, elles seront empilées verticalement et pour un contexte de mise en forme en ligne, elles se suivront horizontalement. Le mode de disposition normal est déclenché lorsque la propriété CSS {{cssxref("position")}} vaut `static` ou `relative` et si la propriété CSS {{cssxref("float")}} vaut `none`.
 
-<p>On a deux cas de figure pour le mode normal : le positionnement statique et le positionnement relatif.</p>
+On a deux cas de figure pour le mode normal : le positionnement statique et le positionnement relatif.
 
-<ul>
- <li>En positionnement statique (obtenu avec la valeur <code>static</code> pour la propriété {{cssxref("position")}}), les boîtes sont dessinées à l'emplacement exact dicté par le flux normal.</li>
- <li>En positionnement relatif (obtenu lorsque la propriété {{cssxref("position")}} vaut <code>relative</code>), les boîtes sont dessinées avec un décalage défini par les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.</li>
-</ul>
+- En positionnement statique (obtenu avec la valeur `static` pour la propriété {{cssxref("position")}}), les boîtes sont dessinées à l'emplacement exact dicté par le flux normal.
+- En positionnement relatif (obtenu lorsque la propriété {{cssxref("position")}} vaut `relative`), les boîtes sont dessinées avec un décalage défini par les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.
 
-<h3 id="Le_mode_flottant">Le mode flottant</h3>
+### Le mode flottant
 
-<p>Avec le mode de positionnement flottant, certaines boîtes sont placées au début ou à la fin de ligne courante. Le texte (et tout ce qui se trouve dans le flux normal) épouse donc le contour des boîtes flottantes (sauf si la propriété {{cssxref("clear")}} dicte un autre comportement).</p>
+Avec le mode de positionnement flottant, certaines boîtes sont placées au début ou à la fin de ligne courante. Le texte (et tout ce qui se trouve dans le flux normal) épouse donc le contour des boîtes flottantes (sauf si la propriété {{cssxref("clear")}} dicte un autre comportement).
 
-<p>Pour qu'une boîte soit une boîte flottante, on utilisera la propriété {{cssxref("float")}} avec une valeur différente de <code>none</code> et la propriété {{cssxref("position")}} avec <code>static</code> ou <code>relative</code>. Si {{cssxref("float")}} vaut <code>left</code>, la boîte flottante sera positionnée au début de la ligne de la boîte englobante et si elle vaut <code>right</code>, elle sera à la fin de la ligne.</p>
+Pour qu'une boîte soit une boîte flottante, on utilisera la propriété {{cssxref("float")}} avec une valeur différente de `none` et la propriété {{cssxref("position")}} avec `static` ou `relative`. Si {{cssxref("float")}} vaut `left`, la boîte flottante sera positionnée au début de la ligne de la boîte englobante et si elle vaut `right`, elle sera à la fin de la ligne.
 
-<h3 id="Le_mode_absolu">Le mode absolu</h3>
+### Le mode absolu
 
-<p>En mode absolu, les boîtes sont entièrement retirées du flux normal et n'interagissent plus avec le flux. Elles sont positionnées de façon relative à leur bloc englobant grâce aux propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.</p>
+En mode absolu, les boîtes sont entièrement retirées du flux normal et n'interagissent plus avec le flux. Elles sont positionnées de façon relative à leur bloc englobant grâce aux propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.
 
-<p>Un élément est positionné de façon absolue lorsque la propriété {{cssxref("position")}} vaut <code>absolute</code> ou <code>fixed</code>.</p>
+Un élément est positionné de façon absolue lorsque la propriété {{cssxref("position")}} vaut `absolute` ou `fixed`.
 
-<p>Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (<em>viewport</em>) et la position de l'élément est absolue par rapport à la zone d'affichage. Faire défiler le contenu ne modifie pas la position de l'élément.</p>
+Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (_viewport_) et la position de l'élément est absolue par rapport à la zone d'affichage. Faire défiler le contenu ne modifie pas la position de l'élément.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
- <li>{{css_key_concepts}}</li>
-</ul>
+- [La référence CSS](/fr/docs/Web/CSS/Reference)
+- {{css_key_concepts}}
diff --git a/files/fr/web/css/webkit_extensions/index.md b/files/fr/web/css/webkit_extensions/index.md
index 46babfeea4..95ef5bc299 100644
--- a/files/fr/web/css/webkit_extensions/index.md
+++ b/files/fr/web/css/webkit_extensions/index.md
@@ -9,500 +9,430 @@ tags:
   - WebKit
 translation_of: Web/CSS/WebKit_Extensions
 ---
-<div>{{CSSRef}}</div>
-
-<p>Les applications basées sur WebKit ou Blink, telles que Safari et Chrome, prennent en charge plusieurs <strong>extensions spécifiques à <a href="/fr/docs/Web/CSS">CSS</a></strong>. Ces extensions sont généralement préfixées par <code>-webkit</code>. Certaines propriétés préfixées par <code>-webkit</code> peuvent également fonctionner avec le préfixe <code>-apple</code>. Quelques unes de ces extensions sont préfixées avec <code>-epub</code>.</p>
-
-<h2 id="Propriétés_spécifiques_WebKit_ne_pas_utiliser_sur_le_Web">Propriétés spécifiques WebKit (ne pas utiliser sur le Web)</h2>
-
-<div class="note">
-<p><strong>Note :</strong> Ces propriétés ne fonctionneront que pour les applications WebKit et ne sont pas en voie de standardisation.</p>
-</div>
-
-<h3 id="A">A</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-aspect-ratio")}}</li>
-</ul>
-
-<h3 id="B">B</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-background-composite")}}</li>
- <li>{{CSSxRef("background-origin-x")}} (unprefixed!)</li>
- <li>{{CSSxRef("background-origin-y")}} (unprefixed!)</li>
- <li>{{CSSxRef("-webkit-border-after")}}</li>
- <li>{{CSSxRef("-webkit-border-after-color")}}</li>
- <li>{{CSSxRef("-webkit-border-after-style")}}</li>
- <li>{{CSSxRef("-webkit-border-after-width")}}</li>
- <li>{{CSSxRef("-webkit-border-before")}}</li>
- <li>{{CSSxRef("-webkit-border-before-color")}}</li>
- <li>{{CSSxRef("-webkit-border-before-style")}}</li>
- <li>{{CSSxRef("-webkit-border-before-width")}}</li>
- <li>{{CSSxRef("-webkit-border-end")}}</li>
- <li>{{CSSxRef("-webkit-border-end-color")}}</li>
- <li>{{CSSxRef("-webkit-border-end-style")}}</li>
- <li>{{CSSxRef("-webkit-border-end-width")}}</li>
- <li>{{CSSxRef("-webkit-border-fit")}}</li>
- <li>{{CSSxRef("-webkit-border-horizontal-spacing")}}</li>
- <li>{{CSSxRef("-webkit-border-start")}}</li>
- <li>{{CSSxRef("-webkit-border-start-color")}}</li>
- <li>{{CSSxRef("-webkit-border-start-style")}}</li>
- <li>{{CSSxRef("-webkit-border-start-width")}}</li>
- <li>{{CSSxRef("-webkit-border-vertical-spacing")}}</li>
- <li>{{CSSxRef("-webkit-box-align")}}</li>
- <li>{{CSSxRef("-webkit-box-direction")}}</li>
- <li>{{CSSxRef("-webkit-box-flex")}}</li>
- <li>{{CSSxRef("-webkit-box-flex-group")}}</li>
- <li>{{CSSxRef("-webkit-box-lines")}}</li>
- <li>{{CSSxRef("-webkit-box-ordinal-group")}}</li>
- <li>{{CSSxRef("-webkit-box-orient")}}</li>
- <li>{{CSSxRef("-webkit-box-pack")}}</li>
- <li>{{CSSxRef("-webkit-box-reflect")}}</li>
- <li>{{CSSxRef("-webkit-box-shadow")}}</li>
-</ul>
-
-<h3 id="C_–_G">C – G</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-column-axis")}}</li>
- <li>{{CSSxRef("-webkit-column-break-after")}}</li>
- <li>{{CSSxRef("-webkit-column-break-before")}}</li>
- <li>{{CSSxRef("-webkit-column-break-inside")}}</li>
- <li>{{CSSxRef("-webkit-dashboard-region")}}</li>
- <li>{{CSSxRef("-webkit-font-smoothing")}}</li>
- <li>{{CSSxRef("-webkit-grid-columns")}}</li>
- <li>{{CSSxRef("-webkit-grid-rows")}}</li>
-</ul>
-
-<h3 id="H_–_I">H – I</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-highlight")}}</li>
- <li>{{CSSxRef("-webkit-hyphenate-charset")}}</li>
- <li>{{CSSxRef("-webkit-hyphenate-limit-after")}}</li>
- <li>{{CSSxRef("-webkit-hyphenate-limit-before")}}</li>
- <li>{{CSSxRef("-webkit-hyphenate-limit-lines")}}</li>
- <li>{{CSSxRef("-webkit-image-set")}}</li>
-</ul>
-
-<h3 id="L">L</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-line-align")}}</li>
- <li>{{CSSxRef("-webkit-line-box-contain")}}</li>
- <li>{{CSSxRef("-webkit-line-break")}}</li>
- <li>{{CSSxRef("-webkit-line-clamp")}}</li>
- <li>{{CSSxRef("-webkit-line-grid")}}</li>
- <li>{{CSSxRef("-webkit-line-snap")}}</li>
- <li>{{CSSxRef("-webkit-locale")}}</li>
- <li>{{CSSxRef("-webkit-logical-height")}}</li>
- <li>{{CSSxRef("-webkit-logical-width")}}</li>
-</ul>
-
-<h3 id="M">M</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-margin-after")}}</li>
- <li>{{CSSxRef("-webkit-margin-after-collapse")}}</li>
- <li>{{CSSxRef("-webkit-margin-before")}}</li>
- <li>{{CSSxRef("-webkit-margin-before-collapse")}}</li>
- <li>{{CSSxRef("-webkit-margin-bottom-collapse")}}</li>
- <li>{{CSSxRef("-webkit-margin-collapse")}}</li>
- <li>{{CSSxRef("-webkit-margin-end")}}</li>
- <li>{{CSSxRef("-webkit-margin-start")}}</li>
- <li>{{CSSxRef("-webkit-margin-top-collapse")}}</li>
- <li>{{CSSxRef("-webkit-marquee")}}</li>
- <li>{{CSSxRef("-webkit-marquee-direction")}}</li>
- <li>{{CSSxRef("-webkit-marquee-increment")}}</li>
- <li>{{CSSxRef("-webkit-marquee-repetition")}}</li>
- <li>{{CSSxRef("-webkit-marquee-speed")}}</li>
- <li>{{CSSxRef("-webkit-marquee-style")}}</li>
- <li>{{CSSxRef("-webkit-mask-attachment")}}</li>
- <li>{{CSSxRef("-webkit-mask-box-image")}}</li>
- <li>{{CSSxRef("-webkit-mask-box-image-outset")}}</li>
- <li>{{CSSxRef("-webkit-mask-box-image-repeat")}}</li>
- <li>{{CSSxRef("-webkit-mask-box-image-slice")}}</li>
- <li>{{CSSxRef("-webkit-mask-box-image-source")}}</li>
- <li>{{CSSxRef("-webkit-mask-box-image-width")}}</li>
- <li>{{CSSxRef("-webkit-mask-position-x")}}</li>
- <li>{{CSSxRef("-webkit-mask-position-y")}}</li>
- <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li>
- <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li>
- <li>{{CSSxRef("-webkit-match-nearest-mail-blockquote-color")}}</li>
- <li>{{CSSxRef("-webkit-max-logical-height")}}</li>
- <li>{{CSSxRef("-webkit-max-logical-width")}}</li>
- <li>{{CSSxRef("-webkit-min-logical-height")}}</li>
- <li>{{CSSxRef("-webkit-min-logical-width")}}</li>
-</ul>
-
-<h3 id="N_–_O">N – O</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-nbsp-mode")}}</li>
- <li>{{CSSxRef("-webkit-overflow-scrolling")}}</li>
-</ul>
-
-<h3 id="P">P</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-padding-after")}}</li>
- <li>{{CSSxRef("-webkit-padding-before")}}</li>
- <li>{{CSSxRef("-webkit-padding-end")}}</li>
- <li>{{CSSxRef("-webkit-padding-start")}}</li>
- <li>{{CSSxRef("-webkit-perspective-origin-x")}}</li>
- <li>{{CSSxRef("-webkit-perspective-origin-y")}}</li>
- <li>{{CSSxRef("-webkit-print-color-adjust")}}</li>
-</ul>
-
-<h3 id="R_–_S">R – S</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-region-break-after")}}</li>
- <li>{{CSSxRef("-webkit-region-break-before")}}</li>
- <li>{{CSSxRef("-webkit-region-break-inside")}}</li>
- <li>{{CSSxRef("-webkit-region-fragment")}}</li>
- <li>{{CSSxRef("-webkit-<code>resizer</code>")}}</li>
- <li>{{CSSxRef("-webkit-rtl-ordering")}}</li>
- <li>{{CSSxRef(" <code>-webkit-scrollbar</code>")}}</li>
- <li>{{CSSxRef(" <code>-webkit-scrollbar-button</code>")}}</li>
- <li>{{CSSxRef(" <code>-webkit-scrollbar-corner</code>")}}</li>
- <li>{{CSSxRef("-webkit-<code>scrollbar-thumb</code>")}}</li>
- <li>{{CSSxRef("-webkit-<code>scrollbar-track</code>")}}</li>
- <li>{{CSSxRef("-webkit-<code>scrollbar-track-piece</code>")}}</li>
- <li>{{CSSxRef("-webkit-shape-inside")}}</li>
- <li>{{CSSxRef("-webkit-svg-shadow")}}</li>
-</ul>
-
-<h3 id="T">T</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-tap-highlight-color")}}</li>
- <li>{{CSSxRef("-webkit-text-combine")}}</li>
- <li>{{CSSxRef("-epub-text-combine")}}</li>
- <li>{{CSSxRef("-webkit-text-decorations-in-effect")}}</li>
- <li>{{CSSxRef("-webkit-text-fill-color")}}</li>
- <li>{{CSSxRef("-epub-text-orientation")}}</li>
- <li>{{CSSxRef("-webkit-text-security")}}</li>
- <li>{{CSSxRef("-webkit-text-size-adjust")}}</li>
- <li>{{CSSxRef("-webkit-text-stroke")}}</li>
- <li>{{CSSxRef("-webkit-text-stroke-color")}}</li>
- <li>{{CSSxRef("-webkit-text-stroke-width")}}</li>
- <li>{{CSSxRef("-webkit-touch-callout")}}</li>
-</ul>
-
-<h2 id="Propriétés_WebKit_en_voie_de_standardisation">Propriétés WebKit en voie de standardisation</h2>
-
-<ul>
- <li>{{CSSxRef("appearance", "-webkit-appearance")}}</li>
- <li>{{CSSxRef("-webkit-font-size-delta")}}</li>
- <li>{{CSSxRef("-webkit-mask-composite")}}</li>
- <li>{{CSSxRef("-webkit-mask-position-x")}}</li>
- <li>{{CSSxRef("-webkit-mask-position-y")}}</li>
- <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li>
- <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li>
-</ul>
-
-<h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées">Anciennes propriétés spécifiques désormais standardisées</h2>
-
-<div class="note">
-<p><strong>Note :</strong> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.</p>
-</div>
-
-<h3 id="A_2">A</h3>
-
-<ul>
- <li>{{CSSxRef("align-content","-webkit-align-content")}}</li>
- <li>{{CSSxRef("align-items","-webkit-align-items")}}</li>
- <li>{{CSSxRef("align-self","-webkit-align-self")}}</li>
- <li>{{CSSxRef("animation","-webkit-animation")}}</li>
- <li>{{CSSxRef("animation-delay","-webkit-animation-delay")}}</li>
- <li>{{CSSxRef("animation-direction","-webkit-animation-direction")}}</li>
- <li>{{CSSxRef("animation-duration","-webkit-animation-duration")}}</li>
- <li>{{CSSxRef("animation-fill-mode","-webkit-animation-fill-mode")}}</li>
- <li>{{CSSxRef("animation-iteration-count","-webkit-animation-iteration-count")}}</li>
- <li>{{CSSxRef("animation-name","-webkit-animation-name")}}</li>
- <li>{{CSSxRef("animation-play-state","-webkit-animation-play-state")}}</li>
- <li>{{CSSxRef("animation-timing-function","-webkit-animation-timing-function")}}</li>
-</ul>
-
-<h3 id="B_2">B</h3>
-
-<ul>
- <li>{{CSSxRef("backface-visibility","-webkit-backface-visibility")}}</li>
- <li>{{CSSxRef("background-clip","-webkit-background-clip")}}</li>
- <li>{{CSSxRef("background-origin","-webkit-background-origin")}}</li>
- <li>{{CSSxRef("background-size","-webkit-background-size")}}</li>
- <li>{{CSSxRef("border-bottom-left-radius","-webkit-border-bottom-left-radius")}}</li>
- <li>{{CSSxRef("border-bottom-right-radius","-webkit-border-bottom-right-radius")}}</li>
- <li>{{CSSxRef("border-image","-webkit-border-image")}}</li>
- <li>{{CSSxRef("border-radius","-webkit-border-radius")}}</li>
- <li>{{CSSxRef("border-top-left-radius","-webkit-border-top-left-radius")}}</li>
- <li>{{CSSxRef("border-top-right-radius","-webkit-border-top-right-radius")}}</li>
- <li>{{CSSxRef("box-shadow","-webkit-box-shadow")}}</li>
- <li>{{CSSxRef("box-sizing","-webkit-box-sizing")}}</li>
-</ul>
-
-<h3 id="C">C</h3>
-
-<ul>
- <li>{{CSSxRef("column-count","-webkit-column-count")}}</li>
- <li>{{CSSxRef("column-gap","-webkit-column-gap")}}</li>
- <li>{{CSSxRef("column-rule","-webkit-column-rule")}}</li>
- <li>{{CSSxRef("column-rule-color","-webkit-column-rule-color")}}</li>
- <li>{{CSSxRef("column-rule-style","-webkit-column-rule-style")}}</li>
- <li>{{CSSxRef("column-rule-width","-webkit-column-rule-width")}}</li>
- <li>{{CSSxRef("column-span","-webkit-column-span")}}</li>
- <li>{{CSSxRef("column-width","-webkit-column-width")}}</li>
- <li>{{CSSxRef("columns","-webkit-columns")}}</li>
-</ul>
-
-<h3 id="F">F</h3>
-
-<ul>
- <li>{{CSSxRef("filter","-webkit-filter")}}</li>
- <li>{{CSSxRef("flex","-webkit-flex")}}</li>
- <li>{{CSSxRef("flex-basis","-webkit-flex-basis")}}</li>
- <li>{{CSSxRef("flex-direction","-webkit-flex-direction")}}</li>
- <li>{{CSSxRef("flex-flow","-webkit-flex-flow")}}</li>
- <li>{{CSSxRef("flex-grow","-webkit-flex-grow")}}</li>
- <li>{{CSSxRef("flex-shrink","-webkit-flex-shrink")}}</li>
- <li>{{CSSxRef("flex-wrap","-webkit-flex-wrap")}}</li>
- <li>{{CSSxRef("-webkit-font-feature-settings")}}</li>
- <li>{{CSSxRef("-webkit-font-kerning")}}</li>
- <li>{{CSSxRef("-webkit-font-variant-ligatures")}}</li>
-</ul>
-
-<h3 id="G-J">G-J</h3>
-
-<ul>
- <li>{{CSSxRef("grid-column","-webkit-grid-column")}}</li>
- <li>{{CSSxRef("grid-row","-webkit-grid-row")}}</li>
- <li>{{CSSxRef("hyphens","-webkit-hyphens")}}</li>
- <li>{{CSSxRef("justify-content","-webkit-justify-content")}}</li>
-</ul>
-
-<h3 id="M_2">M</h3>
-
-<ul>
- <li>{{CSSxRef("mask","-webkit-mask")}}</li>
- <li>{{CSSxRef("mask-clip","-webkit-mask-clip")}}</li>
- <li>{{CSSxRef("mask-image","-webkit-mask-image")}}</li>
- <li>{{CSSxRef("mask-origin","-webkit-mask-origin")}}</li>
- <li>{{CSSxRef("mask-position","-webkit-mask-position")}}</li>
- <li>{{CSSxRef("mask-repeat","-webkit-mask-repeat")}}</li>
- <li>{{CSSxRef("mask-size","-webkit-mask-size")}}</li>
-</ul>
-
-<h3 id="O-S">O-S</h3>
-
-<ul>
- <li>{{CSSxRef("opacity","-webkit-opacity")}}</li>
- <li>{{CSSxRef("order","-webkit-order")}}</li>
- <li>{{CSSxRef("perspective","-webkit-perspective")}}</li>
- <li>{{CSSxRef("perspective-origin","-webkit-perspective-origin")}}</li>
- <li>{{CSSxRef("shape-outside","-webkit-shape-outside")}}</li>
-</ul>
-
-<h3 id="T_2">T</h3>
-
-<ul>
- <li>{{CSSxRef("text-emphasis", "-epub-text-emphasis")}}</li>
- <li>{{CSSxRef("-webkit-text-emphasis")}}</li>
- <li>{{CSSxRef("text-emphasis-color", "-epub-text-emphasis-color")}}</li>
- <li>{{CSSxRef("-webkit-text-emphasis-color")}}</li>
- <li>{{CSSxRef("-webkit-text-emphasis-position")}}</li>
- <li>{{CSSxRef("-epub-text-emphasis-style")}}</li>
- <li>{{CSSxRef("-webkit-text-emphasis-style")}}</li>
- <li>{{CSSxRef("text-size-adjust","-webkit-text-size-adjust")}}</li>
- <li>{{CSSxRef("transform","-webkit-transform")}}</li>
- <li>{{CSSxRef("transform-origin","-webkit-transform-origin")}}</li>
- <li>{{CSSxRef("transform-style","-webkit-transform-style")}}</li>
- <li>{{CSSxRef("transition","-webkit-transition")}}</li>
- <li>{{CSSxRef("transition-delay","-webkit-transition-delay")}}</li>
- <li>{{CSSxRef("transition-duration","-webkit-transition-duration")}}</li>
- <li>{{CSSxRef("transition-property","-webkit-transition-property")}}</li>
- <li>{{CSSxRef("transition-timing-function","-webkit-transition-timing-function")}}</li>
-</ul>
-
-<h3 id="W">W</h3>
-
-<ul>
- <li>{{CSSxRef("word-break", "-epub-word-break")}}</li>
- <li>{{CSSxRef("writing-mode", "-epub-writing-mode")}}</li>
-</ul>
-
-<h2 id="Spécificités_prises_en_charge_par_Firefox">Spécificités prises en charge par Firefox</h2>
-
-<p>Les propriétés suivantes peuvent être utilisées avec le préfixe <code>-webkit-</code> sous Firefox. La plupart de ces propriétés peuvent également s'utiliser sans préfixes (voir la section sur les <a href="#spe_std">propriétés anciennement spécifiques et désormais standard </a>ci-avant).</p>
-
-<div class="note">
-<p><strong>Note :</strong> En raison du code historique utilisé dans de nombreux sites web et contenant des propriétés préfixées avec <code>-webkit-</code>, Edge et Firefox redirigent de nombreuses propriétés préfixées avec <code>-webkit-</code> vers les équivalents sans préfixe ou avec <code>-moz-</code> ou <code>-ms-</code>.</p>
-</div>
-
-<h3 id="A_3">A</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-align-content")}}</li>
- <li>{{CSSxRef("-webkit-align-items")}}</li>
- <li>{{CSSxRef("-webkit-align-self")}}</li>
- <li>{{CSSxRef("-webkit-animation")}}</li>
- <li>{{CSSxRef("-webkit-animation-delay")}}</li>
- <li>{{CSSxRef("-webkit-animation-direction")}}</li>
- <li>{{CSSxRef("-webkit-animation-duration")}}</li>
- <li>{{CSSxRef("-webkit-animation-fill-mode")}}</li>
- <li>{{CSSxRef("-webkit-animation-iteration-count")}}</li>
- <li>{{CSSxRef("-webkit-animation-name")}}</li>
- <li>{{CSSxRef("-webkit-animation-play-state")}}</li>
- <li>{{CSSxRef("-webkit-animation-timing-function")}}</li>
- <li>{{CSSxRef("-webkit-appearance")}}*</li>
-</ul>
-
-<h3 id="B_3">B</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-backface-visibility")}}</li>
- <li>{{CSSxRef("-webkit-background-clip")}}</li>
- <li>{{CSSxRef("-webkit-background-origin")}}</li>
- <li>{{CSSxRef("-webkit-background-size")}}</li>
- <li>{{CSSxRef("-webkit-border-bottom-left-radius")}}</li>
- <li>{{CSSxRef("-webkit-border-bottom-right-radius")}}</li>
- <li>{{CSSxRef("-webkit-border-image")}}</li>
- <li>{{CSSxRef("-webkit-border-radius")}}</li>
- <li>{{CSSxRef("-webkit-box-align")}}**, ***</li>
- <li>{{CSSxRef("-webkit-box-direction")}}**, ***</li>
- <li>{{CSSxRef("-webkit-box-flex")}}**, ***</li>
- <li>{{CSSxRef("-webkit-box-orient")}}**, ***</li>
- <li>{{CSSxRef("-webkit-box-pack")}}**, ***</li>
- <li>{{CSSxRef("-webkit-box-shadow")}}</li>
- <li>{{CSSxRef("-webkit-box-sizing")}}</li>
- <li>{{CSSxRef("-webkit-border-top-left-radius")}}</li>
- <li>{{CSSxRef("-webkit-border-top-right-radius")}}</li>
-</ul>
-
-<h3 id="F_2">F</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-filter")}}</li>
- <li>{{CSSxRef("-webkit-flex")}}</li>
- <li>{{CSSxRef("-webkit-flex-basis")}}</li>
- <li>{{CSSxRef("-webkit-flex-direction")}}</li>
- <li>{{CSSxRef("-webkit-flex-flow")}}</li>
- <li>{{CSSxRef("-webkit-flex-grow")}}</li>
- <li>{{CSSxRef("-webkit-flex-shrink")}}</li>
- <li>{{CSSxRef("-webkit-flex-wrap")}}</li>
-</ul>
-
-<h3 id="J">J</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-justify-content")}}</li>
-</ul>
-
-<h3 id="M_3">M</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-mask")}}</li>
- <li>{{CSSxRef("-webkit-mask-clip")}}</li>
- <li>{{CSSxRef("-webkit-mask-composite")}}*</li>
- <li>{{CSSxRef("-webkit-mask-image")}}</li>
- <li>{{CSSxRef("-webkit-mask-origin")}}</li>
- <li>{{CSSxRef("-webkit-mask-position")}}</li>
- <li>{{CSSxRef("-webkit-mask-position-x")}}**</li>
- <li>{{CSSxRef("-webkit-mask-position-y")}}**</li>
- <li>{{CSSxRef("-webkit-mask-repeat")}}</li>
- <li>{{CSSxRef("-webkit-mask-size")}}</li>
-</ul>
-
-<h3 id="O-P">O-P</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-order")}}</li>
- <li>{{CSSxRef("-webkit-perspective")}}</li>
- <li>{{CSSxRef("-webkit-perspective-origin")}}</li>
-</ul>
-
-<h3 id="T_3">T</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-text-fill-color")}}**</li>
- <li>{{CSSxRef("-webkit-text-size-adjust")}}</li>
- <li>{{CSSxRef("-webkit-text-stroke")}}**</li>
- <li>{{CSSxRef("-webkit-text-stroke-color")}}**</li>
- <li>{{CSSxRef("-webkit-text-stroke-width")}}**</li>
- <li>{{CSSxRef("-webkit-transform")}}</li>
- <li>{{CSSxRef("-webkit-transform-origin")}}</li>
- <li>{{CSSxRef("-webkit-transition")}}</li>
- <li>{{CSSxRef("-webkit-transition-delay")}}</li>
- <li>{{CSSxRef("-webkit-transition-duration")}}</li>
- <li>{{CSSxRef("-webkit-transition-property")}}</li>
- <li>{{CSSxRef("-webkit-transition-timing-function")}}</li>
-</ul>
-
-<h3 id="U">U</h3>
-
-<ul>
- <li>{{CSSxRef("-webkit-user-select")}}</li>
-</ul>
-
-<p>* Prise en charge avec les préfixes <code>-moz-</code> et <code>-webkit-</code> dans Firefox mais pas pris en charge sans préfixe. Microsoft Edge et IE Mobile prennent en charge cette propriété avec le préfixe <code>-webkit-</code> plutôt qu'avec <code>-ms-</code> à des fins d'interopérabilité.<br>
- ** Ces valeurs sont prises en charges bien qu'elles ne soient pas standard et qu'elles ne soient pas en cours de standardisation.<br>
- *** On privliégiera l'utilisation des propriétés <code>flex-box</code>.</p>
-
-<h2 id="Pseudo-classes">Pseudo-classes</h2>
-
-<ul>
- <li>{{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}}</li>
- <li>{{CSSxRef(":any()", ":-webkit-any()")}}</li>
- <li>{{CSSxRef(":any-link", ":-webkit-any-link")}}*</li>
- <li>{{CSSxRef(":autofill",":-webkit-autofill")}}</li>
- <li>{{CSSxRef(":autofill-strong-password",":-webkit-autofill-strong-password")}}</li>
- <li>{{CSSxRef(":drag",":-webkit-drag")}}</li>
- <li>{{CSSxRef(":full-page-media",":-webkit-full-page-media")}}</li>
- <li>{{CSSxRef(":full-screen", ":-webkit-full-screen")}}*</li>
- <li>{{CSSxRef(":full-screen-ancestor",":-webkit-full-screen-ancestor")}}</li>
- <li>{{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}}</li>
- <li>{{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}}</li>
-</ul>
-
-<h2 id="Pseudo-éléments">Pseudo-éléments</h2>
-
-<p>Pour des raisons de compatibilité web, Blink, WebKit et Gecko considèrent les pseudo-éléments commençant par <code>::-webkit-</code> comme valides.</p>
-
-<ul>
- <li>{{CSSxRef("::-webkit-file-upload-button")}}</li>
- <li>{{CSSxRef("::-webkit-inner-spin-button")}}</li>
- <li>{{CSSxRef("::-webkit-input-placeholder")}}</li>
- <li>{{CSSxRef("::-webkit-meter-bar")}}</li>
- <li>{{CSSxRef("::-webkit-meter-even-less-good-value")}}</li>
- <li>{{CSSxRef("::-webkit-meter-inner-element")}}</li>
- <li>{{CSSxRef("::-webkit-meter-optimum-value")}}</li>
- <li>{{CSSxRef("::-webkit-meter-suboptimum-value")}}</li>
- <li>{{CSSxRef("::-webkit-outer-spin-button")}}</li>
- <li>{{CSSxRef("::-webkit-progress-bar")}}</li>
- <li>{{CSSxRef("::-webkit-progress-inner-element")}}</li>
- <li>{{CSSxRef("::-webkit-progress-value")}}</li>
- <li>{{CSSxRef("::-webkit-search-cancel-button")}}</li>
- <li>{{CSSxRef("::-webkit-search-results-button")}}</li>
- <li>{{CSSxRef("::-webkit-slider-runnable-track")}}</li>
- <li>{{CSSxRef("::-webkit-slider-thumb")}}</li>
-</ul>
-
-<h2 id="Caractéristiques_média">Caractéristiques média</h2>
-
-<ul>
- <li>{{CSSxRef("@media/-webkit-animation", "-webkit-animation")}}</li>
- <li>{{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}}</li>
- <li>{{CSSxRef("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li>
- <li>{{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}}</li>
- <li>{{CSSxRef("@media/-webkit-transition", "-webkit-transition")}}</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls">La mise en forme des contrôles de formulaires sur le Trac WebKit (en anglais)</a></li>
- <li>Une liste complémentaire d'extensions WebKit <a href="https://gist.github.com/afabbro/3759334">https://gist.github.com/afabbro/3759334</a></li>
- <li><a href="/fr/docs/Web/CSS/Microsoft_CSS_extensions">Les extensions CSS relatives à Microsoft</a></li>
- <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions">Les extensions CSS relatives à Mozilla</a></li>
-</ul>
+{{CSSRef}}
+
+Les applications basées sur WebKit ou Blink, telles que Safari et Chrome, prennent en charge plusieurs **extensions spécifiques à [CSS](/fr/docs/Web/CSS)**. Ces extensions sont généralement préfixées par `-webkit`. Certaines propriétés préfixées par `-webkit` peuvent également fonctionner avec le préfixe `-apple`. Quelques unes de ces extensions sont préfixées avec `-epub`.
+
+## Propriétés spécifiques WebKit (ne pas utiliser sur le Web)
+
+> **Note :** Ces propriétés ne fonctionneront que pour les applications WebKit et ne sont pas en voie de standardisation.
+
+### A
+
+- {{CSSxRef("-webkit-aspect-ratio")}}
+
+### B
+
+- {{CSSxRef("-webkit-background-composite")}}
+- {{CSSxRef("background-origin-x")}} (unprefixed!)
+- {{CSSxRef("background-origin-y")}} (unprefixed!)
+- {{CSSxRef("-webkit-border-after")}}
+- {{CSSxRef("-webkit-border-after-color")}}
+- {{CSSxRef("-webkit-border-after-style")}}
+- {{CSSxRef("-webkit-border-after-width")}}
+- {{CSSxRef("-webkit-border-before")}}
+- {{CSSxRef("-webkit-border-before-color")}}
+- {{CSSxRef("-webkit-border-before-style")}}
+- {{CSSxRef("-webkit-border-before-width")}}
+- {{CSSxRef("-webkit-border-end")}}
+- {{CSSxRef("-webkit-border-end-color")}}
+- {{CSSxRef("-webkit-border-end-style")}}
+- {{CSSxRef("-webkit-border-end-width")}}
+- {{CSSxRef("-webkit-border-fit")}}
+- {{CSSxRef("-webkit-border-horizontal-spacing")}}
+- {{CSSxRef("-webkit-border-start")}}
+- {{CSSxRef("-webkit-border-start-color")}}
+- {{CSSxRef("-webkit-border-start-style")}}
+- {{CSSxRef("-webkit-border-start-width")}}
+- {{CSSxRef("-webkit-border-vertical-spacing")}}
+- {{CSSxRef("-webkit-box-align")}}
+- {{CSSxRef("-webkit-box-direction")}}
+- {{CSSxRef("-webkit-box-flex")}}
+- {{CSSxRef("-webkit-box-flex-group")}}
+- {{CSSxRef("-webkit-box-lines")}}
+- {{CSSxRef("-webkit-box-ordinal-group")}}
+- {{CSSxRef("-webkit-box-orient")}}
+- {{CSSxRef("-webkit-box-pack")}}
+- {{CSSxRef("-webkit-box-reflect")}}
+- {{CSSxRef("-webkit-box-shadow")}}
+
+### C – G
+
+- {{CSSxRef("-webkit-column-axis")}}
+- {{CSSxRef("-webkit-column-break-after")}}
+- {{CSSxRef("-webkit-column-break-before")}}
+- {{CSSxRef("-webkit-column-break-inside")}}
+- {{CSSxRef("-webkit-dashboard-region")}}
+- {{CSSxRef("-webkit-font-smoothing")}}
+- {{CSSxRef("-webkit-grid-columns")}}
+- {{CSSxRef("-webkit-grid-rows")}}
+
+### H – I
+
+- {{CSSxRef("-webkit-highlight")}}
+- {{CSSxRef("-webkit-hyphenate-charset")}}
+- {{CSSxRef("-webkit-hyphenate-limit-after")}}
+- {{CSSxRef("-webkit-hyphenate-limit-before")}}
+- {{CSSxRef("-webkit-hyphenate-limit-lines")}}
+- {{CSSxRef("-webkit-image-set")}}
+
+### L
+
+- {{CSSxRef("-webkit-line-align")}}
+- {{CSSxRef("-webkit-line-box-contain")}}
+- {{CSSxRef("-webkit-line-break")}}
+- {{CSSxRef("-webkit-line-clamp")}}
+- {{CSSxRef("-webkit-line-grid")}}
+- {{CSSxRef("-webkit-line-snap")}}
+- {{CSSxRef("-webkit-locale")}}
+- {{CSSxRef("-webkit-logical-height")}}
+- {{CSSxRef("-webkit-logical-width")}}
+
+### M
+
+- {{CSSxRef("-webkit-margin-after")}}
+- {{CSSxRef("-webkit-margin-after-collapse")}}
+- {{CSSxRef("-webkit-margin-before")}}
+- {{CSSxRef("-webkit-margin-before-collapse")}}
+- {{CSSxRef("-webkit-margin-bottom-collapse")}}
+- {{CSSxRef("-webkit-margin-collapse")}}
+- {{CSSxRef("-webkit-margin-end")}}
+- {{CSSxRef("-webkit-margin-start")}}
+- {{CSSxRef("-webkit-margin-top-collapse")}}
+- {{CSSxRef("-webkit-marquee")}}
+- {{CSSxRef("-webkit-marquee-direction")}}
+- {{CSSxRef("-webkit-marquee-increment")}}
+- {{CSSxRef("-webkit-marquee-repetition")}}
+- {{CSSxRef("-webkit-marquee-speed")}}
+- {{CSSxRef("-webkit-marquee-style")}}
+- {{CSSxRef("-webkit-mask-attachment")}}
+- {{CSSxRef("-webkit-mask-box-image")}}
+- {{CSSxRef("-webkit-mask-box-image-outset")}}
+- {{CSSxRef("-webkit-mask-box-image-repeat")}}
+- {{CSSxRef("-webkit-mask-box-image-slice")}}
+- {{CSSxRef("-webkit-mask-box-image-source")}}
+- {{CSSxRef("-webkit-mask-box-image-width")}}
+- {{CSSxRef("-webkit-mask-position-x")}}
+- {{CSSxRef("-webkit-mask-position-y")}}
+- {{CSSxRef("-webkit-mask-repeat-x")}}
+- {{CSSxRef("-webkit-mask-repeat-y")}}
+- {{CSSxRef("-webkit-match-nearest-mail-blockquote-color")}}
+- {{CSSxRef("-webkit-max-logical-height")}}
+- {{CSSxRef("-webkit-max-logical-width")}}
+- {{CSSxRef("-webkit-min-logical-height")}}
+- {{CSSxRef("-webkit-min-logical-width")}}
+
+### N – O
+
+- {{CSSxRef("-webkit-nbsp-mode")}}
+- {{CSSxRef("-webkit-overflow-scrolling")}}
+
+### P
+
+- {{CSSxRef("-webkit-padding-after")}}
+- {{CSSxRef("-webkit-padding-before")}}
+- {{CSSxRef("-webkit-padding-end")}}
+- {{CSSxRef("-webkit-padding-start")}}
+- {{CSSxRef("-webkit-perspective-origin-x")}}
+- {{CSSxRef("-webkit-perspective-origin-y")}}
+- {{CSSxRef("-webkit-print-color-adjust")}}
+
+### R – S
+
+- {{CSSxRef("-webkit-region-break-after")}}
+- {{CSSxRef("-webkit-region-break-before")}}
+- {{CSSxRef("-webkit-region-break-inside")}}
+- {{CSSxRef("-webkit-region-fragment")}}
+- {{CSSxRef("-webkit-<code>resizer</code>")}}
+- {{CSSxRef("-webkit-rtl-ordering")}}
+- {{CSSxRef(" <code>-webkit-scrollbar</code>")}}
+- {{CSSxRef(" <code>-webkit-scrollbar-button</code>")}}
+- {{CSSxRef(" <code>-webkit-scrollbar-corner</code>")}}
+- {{CSSxRef("-webkit-<code>scrollbar-thumb</code>")}}
+- {{CSSxRef("-webkit-<code>scrollbar-track</code>")}}
+- {{CSSxRef("-webkit-<code>scrollbar-track-piece</code>")}}
+- {{CSSxRef("-webkit-shape-inside")}}
+- {{CSSxRef("-webkit-svg-shadow")}}
+
+### T
+
+- {{CSSxRef("-webkit-tap-highlight-color")}}
+- {{CSSxRef("-webkit-text-combine")}}
+- {{CSSxRef("-epub-text-combine")}}
+- {{CSSxRef("-webkit-text-decorations-in-effect")}}
+- {{CSSxRef("-webkit-text-fill-color")}}
+- {{CSSxRef("-epub-text-orientation")}}
+- {{CSSxRef("-webkit-text-security")}}
+- {{CSSxRef("-webkit-text-size-adjust")}}
+- {{CSSxRef("-webkit-text-stroke")}}
+- {{CSSxRef("-webkit-text-stroke-color")}}
+- {{CSSxRef("-webkit-text-stroke-width")}}
+- {{CSSxRef("-webkit-touch-callout")}}
+
+## Propriétés WebKit en voie de standardisation
+
+- {{CSSxRef("appearance", "-webkit-appearance")}}
+- {{CSSxRef("-webkit-font-size-delta")}}
+- {{CSSxRef("-webkit-mask-composite")}}
+- {{CSSxRef("-webkit-mask-position-x")}}
+- {{CSSxRef("-webkit-mask-position-y")}}
+- {{CSSxRef("-webkit-mask-repeat-x")}}
+- {{CSSxRef("-webkit-mask-repeat-y")}}
+
+## Anciennes propriétés spécifiques désormais standardisées
+
+> **Note :** Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.
+
+### A
+
+- {{CSSxRef("align-content","-webkit-align-content")}}
+- {{CSSxRef("align-items","-webkit-align-items")}}
+- {{CSSxRef("align-self","-webkit-align-self")}}
+- {{CSSxRef("animation","-webkit-animation")}}
+- {{CSSxRef("animation-delay","-webkit-animation-delay")}}
+- {{CSSxRef("animation-direction","-webkit-animation-direction")}}
+- {{CSSxRef("animation-duration","-webkit-animation-duration")}}
+- {{CSSxRef("animation-fill-mode","-webkit-animation-fill-mode")}}
+- {{CSSxRef("animation-iteration-count","-webkit-animation-iteration-count")}}
+- {{CSSxRef("animation-name","-webkit-animation-name")}}
+- {{CSSxRef("animation-play-state","-webkit-animation-play-state")}}
+- {{CSSxRef("animation-timing-function","-webkit-animation-timing-function")}}
+
+### B
+
+- {{CSSxRef("backface-visibility","-webkit-backface-visibility")}}
+- {{CSSxRef("background-clip","-webkit-background-clip")}}
+- {{CSSxRef("background-origin","-webkit-background-origin")}}
+- {{CSSxRef("background-size","-webkit-background-size")}}
+- {{CSSxRef("border-bottom-left-radius","-webkit-border-bottom-left-radius")}}
+- {{CSSxRef("border-bottom-right-radius","-webkit-border-bottom-right-radius")}}
+- {{CSSxRef("border-image","-webkit-border-image")}}
+- {{CSSxRef("border-radius","-webkit-border-radius")}}
+- {{CSSxRef("border-top-left-radius","-webkit-border-top-left-radius")}}
+- {{CSSxRef("border-top-right-radius","-webkit-border-top-right-radius")}}
+- {{CSSxRef("box-shadow","-webkit-box-shadow")}}
+- {{CSSxRef("box-sizing","-webkit-box-sizing")}}
+
+### C
+
+- {{CSSxRef("column-count","-webkit-column-count")}}
+- {{CSSxRef("column-gap","-webkit-column-gap")}}
+- {{CSSxRef("column-rule","-webkit-column-rule")}}
+- {{CSSxRef("column-rule-color","-webkit-column-rule-color")}}
+- {{CSSxRef("column-rule-style","-webkit-column-rule-style")}}
+- {{CSSxRef("column-rule-width","-webkit-column-rule-width")}}
+- {{CSSxRef("column-span","-webkit-column-span")}}
+- {{CSSxRef("column-width","-webkit-column-width")}}
+- {{CSSxRef("columns","-webkit-columns")}}
+
+### F
+
+- {{CSSxRef("filter","-webkit-filter")}}
+- {{CSSxRef("flex","-webkit-flex")}}
+- {{CSSxRef("flex-basis","-webkit-flex-basis")}}
+- {{CSSxRef("flex-direction","-webkit-flex-direction")}}
+- {{CSSxRef("flex-flow","-webkit-flex-flow")}}
+- {{CSSxRef("flex-grow","-webkit-flex-grow")}}
+- {{CSSxRef("flex-shrink","-webkit-flex-shrink")}}
+- {{CSSxRef("flex-wrap","-webkit-flex-wrap")}}
+- {{CSSxRef("-webkit-font-feature-settings")}}
+- {{CSSxRef("-webkit-font-kerning")}}
+- {{CSSxRef("-webkit-font-variant-ligatures")}}
+
+### G-J
+
+- {{CSSxRef("grid-column","-webkit-grid-column")}}
+- {{CSSxRef("grid-row","-webkit-grid-row")}}
+- {{CSSxRef("hyphens","-webkit-hyphens")}}
+- {{CSSxRef("justify-content","-webkit-justify-content")}}
+
+### M
+
+- {{CSSxRef("mask","-webkit-mask")}}
+- {{CSSxRef("mask-clip","-webkit-mask-clip")}}
+- {{CSSxRef("mask-image","-webkit-mask-image")}}
+- {{CSSxRef("mask-origin","-webkit-mask-origin")}}
+- {{CSSxRef("mask-position","-webkit-mask-position")}}
+- {{CSSxRef("mask-repeat","-webkit-mask-repeat")}}
+- {{CSSxRef("mask-size","-webkit-mask-size")}}
+
+### O-S
+
+- {{CSSxRef("opacity","-webkit-opacity")}}
+- {{CSSxRef("order","-webkit-order")}}
+- {{CSSxRef("perspective","-webkit-perspective")}}
+- {{CSSxRef("perspective-origin","-webkit-perspective-origin")}}
+- {{CSSxRef("shape-outside","-webkit-shape-outside")}}
+
+### T
+
+- {{CSSxRef("text-emphasis", "-epub-text-emphasis")}}
+- {{CSSxRef("-webkit-text-emphasis")}}
+- {{CSSxRef("text-emphasis-color", "-epub-text-emphasis-color")}}
+- {{CSSxRef("-webkit-text-emphasis-color")}}
+- {{CSSxRef("-webkit-text-emphasis-position")}}
+- {{CSSxRef("-epub-text-emphasis-style")}}
+- {{CSSxRef("-webkit-text-emphasis-style")}}
+- {{CSSxRef("text-size-adjust","-webkit-text-size-adjust")}}
+- {{CSSxRef("transform","-webkit-transform")}}
+- {{CSSxRef("transform-origin","-webkit-transform-origin")}}
+- {{CSSxRef("transform-style","-webkit-transform-style")}}
+- {{CSSxRef("transition","-webkit-transition")}}
+- {{CSSxRef("transition-delay","-webkit-transition-delay")}}
+- {{CSSxRef("transition-duration","-webkit-transition-duration")}}
+- {{CSSxRef("transition-property","-webkit-transition-property")}}
+- {{CSSxRef("transition-timing-function","-webkit-transition-timing-function")}}
+
+### W
+
+- {{CSSxRef("word-break", "-epub-word-break")}}
+- {{CSSxRef("writing-mode", "-epub-writing-mode")}}
+
+## Spécificités prises en charge par Firefox
+
+Les propriétés suivantes peuvent être utilisées avec le préfixe `-webkit-` sous Firefox. La plupart de ces propriétés peuvent également s'utiliser sans préfixes (voir la section sur les [propriétés anciennement spécifiques et désormais standard ](#spe_std)ci-avant).
+
+> **Note :** En raison du code historique utilisé dans de nombreux sites web et contenant des propriétés préfixées avec `-webkit-`, Edge et Firefox redirigent de nombreuses propriétés préfixées avec `-webkit-` vers les équivalents sans préfixe ou avec `-moz-` ou `-ms-`.
+
+### A
+
+- {{CSSxRef("-webkit-align-content")}}
+- {{CSSxRef("-webkit-align-items")}}
+- {{CSSxRef("-webkit-align-self")}}
+- {{CSSxRef("-webkit-animation")}}
+- {{CSSxRef("-webkit-animation-delay")}}
+- {{CSSxRef("-webkit-animation-direction")}}
+- {{CSSxRef("-webkit-animation-duration")}}
+- {{CSSxRef("-webkit-animation-fill-mode")}}
+- {{CSSxRef("-webkit-animation-iteration-count")}}
+- {{CSSxRef("-webkit-animation-name")}}
+- {{CSSxRef("-webkit-animation-play-state")}}
+- {{CSSxRef("-webkit-animation-timing-function")}}
+- {{CSSxRef("-webkit-appearance")}}\*
+
+### B
+
+- {{CSSxRef("-webkit-backface-visibility")}}
+- {{CSSxRef("-webkit-background-clip")}}
+- {{CSSxRef("-webkit-background-origin")}}
+- {{CSSxRef("-webkit-background-size")}}
+- {{CSSxRef("-webkit-border-bottom-left-radius")}}
+- {{CSSxRef("-webkit-border-bottom-right-radius")}}
+- {{CSSxRef("-webkit-border-image")}}
+- {{CSSxRef("-webkit-border-radius")}}
+- {{CSSxRef("-webkit-box-align")}}\*\*, \*\*\*
+- {{CSSxRef("-webkit-box-direction")}}\*\*, \*\*\*
+- {{CSSxRef("-webkit-box-flex")}}\*\*, \*\*\*
+- {{CSSxRef("-webkit-box-orient")}}\*\*, \*\*\*
+- {{CSSxRef("-webkit-box-pack")}}\*\*, \*\*\*
+- {{CSSxRef("-webkit-box-shadow")}}
+- {{CSSxRef("-webkit-box-sizing")}}
+- {{CSSxRef("-webkit-border-top-left-radius")}}
+- {{CSSxRef("-webkit-border-top-right-radius")}}
+
+### F
+
+- {{CSSxRef("-webkit-filter")}}
+- {{CSSxRef("-webkit-flex")}}
+- {{CSSxRef("-webkit-flex-basis")}}
+- {{CSSxRef("-webkit-flex-direction")}}
+- {{CSSxRef("-webkit-flex-flow")}}
+- {{CSSxRef("-webkit-flex-grow")}}
+- {{CSSxRef("-webkit-flex-shrink")}}
+- {{CSSxRef("-webkit-flex-wrap")}}
+
+### J
+
+- {{CSSxRef("-webkit-justify-content")}}
+
+### M
+
+- {{CSSxRef("-webkit-mask")}}
+- {{CSSxRef("-webkit-mask-clip")}}
+- {{CSSxRef("-webkit-mask-composite")}}\*
+- {{CSSxRef("-webkit-mask-image")}}
+- {{CSSxRef("-webkit-mask-origin")}}
+- {{CSSxRef("-webkit-mask-position")}}
+- {{CSSxRef("-webkit-mask-position-x")}}\*\*
+- {{CSSxRef("-webkit-mask-position-y")}}\*\*
+- {{CSSxRef("-webkit-mask-repeat")}}
+- {{CSSxRef("-webkit-mask-size")}}
+
+### O-P
+
+- {{CSSxRef("-webkit-order")}}
+- {{CSSxRef("-webkit-perspective")}}
+- {{CSSxRef("-webkit-perspective-origin")}}
+
+### T
+
+- {{CSSxRef("-webkit-text-fill-color")}}\*\*
+- {{CSSxRef("-webkit-text-size-adjust")}}
+- {{CSSxRef("-webkit-text-stroke")}}\*\*
+- {{CSSxRef("-webkit-text-stroke-color")}}\*\*
+- {{CSSxRef("-webkit-text-stroke-width")}}\*\*
+- {{CSSxRef("-webkit-transform")}}
+- {{CSSxRef("-webkit-transform-origin")}}
+- {{CSSxRef("-webkit-transition")}}
+- {{CSSxRef("-webkit-transition-delay")}}
+- {{CSSxRef("-webkit-transition-duration")}}
+- {{CSSxRef("-webkit-transition-property")}}
+- {{CSSxRef("-webkit-transition-timing-function")}}
+
+### U
+
+- {{CSSxRef("-webkit-user-select")}}
+
+\* Prise en charge avec les préfixes `-moz-` et `-webkit-` dans Firefox mais pas pris en charge sans préfixe. Microsoft Edge et IE Mobile prennent en charge cette propriété avec le préfixe `-webkit-` plutôt qu'avec `-ms-` à des fins d'interopérabilité.
+\*\* Ces valeurs sont prises en charges bien qu'elles ne soient pas standard et qu'elles ne soient pas en cours de standardisation.
+\*\*\* On privliégiera l'utilisation des propriétés `flex-box`.
+
+## Pseudo-classes
+
+- {{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}}
+- {{CSSxRef(":any()", ":-webkit-any()")}}
+- {{CSSxRef(":any-link", ":-webkit-any-link")}}\*
+- {{CSSxRef(":autofill",":-webkit-autofill")}}
+- {{CSSxRef(":autofill-strong-password",":-webkit-autofill-strong-password")}}
+- {{CSSxRef(":drag",":-webkit-drag")}}
+- {{CSSxRef(":full-page-media",":-webkit-full-page-media")}}
+- {{CSSxRef(":full-screen", ":-webkit-full-screen")}}\*
+- {{CSSxRef(":full-screen-ancestor",":-webkit-full-screen-ancestor")}}
+- {{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}}
+- {{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}}
+
+## Pseudo-éléments
+
+Pour des raisons de compatibilité web, Blink, WebKit et Gecko considèrent les pseudo-éléments commençant par `::-webkit-` comme valides.
+
+- {{CSSxRef("::-webkit-file-upload-button")}}
+- {{CSSxRef("::-webkit-inner-spin-button")}}
+- {{CSSxRef("::-webkit-input-placeholder")}}
+- {{CSSxRef("::-webkit-meter-bar")}}
+- {{CSSxRef("::-webkit-meter-even-less-good-value")}}
+- {{CSSxRef("::-webkit-meter-inner-element")}}
+- {{CSSxRef("::-webkit-meter-optimum-value")}}
+- {{CSSxRef("::-webkit-meter-suboptimum-value")}}
+- {{CSSxRef("::-webkit-outer-spin-button")}}
+- {{CSSxRef("::-webkit-progress-bar")}}
+- {{CSSxRef("::-webkit-progress-inner-element")}}
+- {{CSSxRef("::-webkit-progress-value")}}
+- {{CSSxRef("::-webkit-search-cancel-button")}}
+- {{CSSxRef("::-webkit-search-results-button")}}
+- {{CSSxRef("::-webkit-slider-runnable-track")}}
+- {{CSSxRef("::-webkit-slider-thumb")}}
+
+## Caractéristiques média
+
+- {{CSSxRef("@media/-webkit-animation", "-webkit-animation")}}
+- {{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}}
+- {{CSSxRef("@media/-webkit-transform-2d", "-webkit-transform-2d")}}
+- {{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}}
+- {{CSSxRef("@media/-webkit-transition", "-webkit-transition")}}
+
+## Voir aussi
+
+- [La mise en forme des contrôles de formulaires sur le Trac WebKit (en anglais)](https://trac.webkit.org/wiki/Styling%20Form%20Controls)
+- Une liste complémentaire d'extensions WebKit <https://gist.github.com/afabbro/3759334>
+- [Les extensions CSS relatives à Microsoft](/fr/docs/Web/CSS/Microsoft_CSS_extensions)
+- [Les extensions CSS relatives à Mozilla](/fr/docs/Web/CSS/Mozilla_Extensions)
diff --git a/files/fr/web/css/white-space/index.md b/files/fr/web/css/white-space/index.md
index 7e6dd7ac48..095c82cbb8 100644
--- a/files/fr/web/css/white-space/index.md
+++ b/files/fr/web/css/white-space/index.md
@@ -7,19 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/white-space
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>white-space</code></strong> est utilisée pour décrire la façon dont les blancs sont gérés au sein de l'élément.</p>
+La propriété **`white-space`** est utilisée pour décrire la façon dont les blancs sont gérés au sein de l'élément.
 
-<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>
+{{EmbedInteractiveExample("pages/css/white-space.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> Afin d'obtenir une césure au sein des mots, il faudra utiliser {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} ou bien {{cssxref("hyphens")}}.</p>
-</div>
+> **Note :** Afin d'obtenir une césure au sein des mots, il faudra utiliser {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} ou bien {{cssxref("hyphens")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 white-space: normal;
 white-space: nowrap;
 white-space: pre;
@@ -31,96 +30,95 @@ white-space: break-spaces;
 white-space: inherit;
 white-space: initial;
 white-space: unset;
-</pre>
+```
 
-<p>La propriété <code>white-space</code> se définit avec l'un des mots-clés suivants.</p>
+La propriété `white-space` se définit avec l'un des mots-clés suivants.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>break-spaces</code></dt>
- <dd>Le comportement est identique à celui de <code>pre-wrap</code> mais chaque séquence de blancs continue d'occuper un espace, y compris en fin de ligne. Il y aura une opportunité de saut de ligne après chaque blanc. De tels espaces auront un impact sur les dimensions intrinsèques de la boîte (<code>min-content</code> et <code>max-content</code>).</dd>
- <dt><code>normal</code></dt>
- <dd>Les séries de blancs sont regroupées, les caractères de saut de ligne sont gérés comme les autres blancs. Les passages à la ligne sont faits naturellement pour remplir les boîtes.</dd>
- <dt><code>nowrap</code></dt>
- <dd>Les blancs sont regroupés comme avec <code>normal</code> mais les passages à la ligne automatiques sont supprimés.</dd>
- <dt><code>pre</code></dt>
- <dd>Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont uniquement lieu avec les caractères de saut de ligne et avec les éléments {{HTMLElement("br")}}.</dd>
- <dt><code>pre-wrap</code></dt>
- <dd>Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont lieu avec les caractères de saut de ligne, avec {{HTMLElement("br")}} et on a des passages à la ligne automatiques.</dd>
- <dt><code>pre-line</code></dt>
- <dd>Les séries de blancs sont regroupées, les sauts de lignes ont lieu avec les caractères de saut de ligne, les éléments {{HTMLElement("br")}} et on a des passages à la ligne automatiques.</dd>
-</dl>
+- `break-spaces`
+  - : Le comportement est identique à celui de `pre-wrap` mais chaque séquence de blancs continue d'occuper un espace, y compris en fin de ligne. Il y aura une opportunité de saut de ligne après chaque blanc. De tels espaces auront un impact sur les dimensions intrinsèques de la boîte (`min-content` et `max-content`).
+- `normal`
+  - : Les séries de blancs sont regroupées, les caractères de saut de ligne sont gérés comme les autres blancs. Les passages à la ligne sont faits naturellement pour remplir les boîtes.
+- `nowrap`
+  - : Les blancs sont regroupés comme avec `normal` mais les passages à la ligne automatiques sont supprimés.
+- `pre`
+  - : Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont uniquement lieu avec les caractères de saut de ligne et avec les éléments {{HTMLElement("br")}}.
+- `pre-wrap`
+  - : Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont lieu avec les caractères de saut de ligne, avec {{HTMLElement("br")}} et on a des passages à la ligne automatiques.
+- `pre-line`
+  - : Les séries de blancs sont regroupées, les sauts de lignes ont lieu avec les caractères de saut de ligne, les éléments {{HTMLElement("br")}} et on a des passages à la ligne automatiques.
 
-<p>Le tableau qui suit résume le comportement des différentes valeurs :</p>
+Le tableau qui suit résume le comportement des différentes valeurs :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th></th>
-   <th>Nouvelles lignes</th>
-   <th>Espaces et tabulations</th>
-   <th>Retour à la ligne automatique</th>
-   <th>Espaces en fin de ligne</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th><code>normal</code></th>
-   <td>Regroupées</td>
-   <td>Regroupés</td>
-   <td>Oui</td>
-   <td>Retirés</td>
-  </tr>
-  <tr>
-   <th><code>nowrap</code></th>
-   <td>Regroupées</td>
-   <td>Regroupés</td>
-   <td>Non</td>
-   <td>Retirés</td>
-  </tr>
-  <tr>
-   <th><code>pre</code></th>
-   <td>Préservées</td>
-   <td>Préservés</td>
-   <td>Non</td>
-   <td>Conservés</td>
-  </tr>
-  <tr>
-   <th><code>pre-wrap</code></th>
-   <td>Préservées</td>
-   <td>Préservés</td>
-   <td>Oui</td>
-   <td>Suspendus</td>
-  </tr>
-  <tr>
-   <th><code>pre-line</code></th>
-   <td>Préservées</td>
-   <td>Regroupés</td>
-   <td>Oui</td>
-   <td>Retirés</td>
-  </tr>
-  <tr>
-   <th><code>break-spaces</code></th>
-   <td>Préservées</td>
-   <td>Regroupés</td>
-   <td>Oui</td>
-   <td>Passent à la ligne.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th></th>
+      <th>Nouvelles lignes</th>
+      <th>Espaces et tabulations</th>
+      <th>Retour à la ligne automatique</th>
+      <th>Espaces en fin de ligne</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th><code>normal</code></th>
+      <td>Regroupées</td>
+      <td>Regroupés</td>
+      <td>Oui</td>
+      <td>Retirés</td>
+    </tr>
+    <tr>
+      <th><code>nowrap</code></th>
+      <td>Regroupées</td>
+      <td>Regroupés</td>
+      <td>Non</td>
+      <td>Retirés</td>
+    </tr>
+    <tr>
+      <th><code>pre</code></th>
+      <td>Préservées</td>
+      <td>Préservés</td>
+      <td>Non</td>
+      <td>Conservés</td>
+    </tr>
+    <tr>
+      <th><code>pre-wrap</code></th>
+      <td>Préservées</td>
+      <td>Préservés</td>
+      <td>Oui</td>
+      <td>Suspendus</td>
+    </tr>
+    <tr>
+      <th><code>pre-line</code></th>
+      <td>Préservées</td>
+      <td>Regroupés</td>
+      <td>Oui</td>
+      <td>Retirés</td>
+    </tr>
+    <tr>
+      <th><code>break-spaces</code></th>
+      <td>Préservées</td>
+      <td>Regroupés</td>
+      <td>Oui</td>
+      <td>Passent à la ligne.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;code&gt;
+```html
+<code>
 var coucou = function(){
   // on notera l'indentation
   // avec deux espaces
@@ -132,73 +130,61 @@ var coucou = function(){
   }
   toto();
 }
-&lt;/code&gt;</pre>
+</code>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">code {
+```css
+code {
   white-space: pre;
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+{{EmbedLiveSample("Exemple_simple")}}
 
-<h3 id="Passage_automatique_à_la_ligne_dans_un_élément_pre">Passage automatique à la ligne dans un élément <code>pre</code></h3>
+### Passage automatique à la ligne dans un élément `pre`
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;pre&gt;
+```html
+<pre>
 function jeNAuraisJamaisDuAppelerCetteFonctionAvecUnNomAussiLong(toto){
   console.log("Tout ça pour ça");
 }
-&lt;/pre&gt;</pre>
+</pre>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">pre {
+```css
+pre {
   word-wrap: break-word;      /* IE 5.5-7 */
   white-space: pre-wrap;      /* current browsers */
-}</pre>
+}
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Passage_automatique_à_la_ligne_dans_un_élément_pre")}}</p>
+{{EmbedLiveSample("Passage_automatique_à_la_ligne_dans_un_élément_pre")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Définition de l'algorithme des césures de ligne et ajout de <code>break-spaces</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                         | Commentaires                                                                |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}     | {{Spec2('CSS3 Text')}} | Définition de l'algorithme des césures de ligne et ajout de `break-spaces`. |
+| {{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}} | {{Spec2('CSS2.1')}}     | Définition initiale.                                                        |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("css.properties.white-space")}}</div>
+{{Compat("css.properties.white-space")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("overflow-wrap")}}</li>
- <li>{{cssxref("word-break")}}</li>
- <li>{{cssxref("hyphens")}}</li>
-</ul>
+- {{cssxref("overflow-wrap")}}
+- {{cssxref("word-break")}}
+- {{cssxref("hyphens")}}
diff --git a/files/fr/web/css/widows/index.md b/files/fr/web/css/widows/index.md
index 29932c7497..6569d4376c 100644
--- a/files/fr/web/css/widows/index.md
+++ b/files/fr/web/css/widows/index.md
@@ -7,12 +7,13 @@ tags:
   - Reference
 translation_of: Web/CSS/widows
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>widows</code></strong> définit le nombre minimum de lignes qui peuvent être laissées en haut de la <a href="/fr/docs/Web/CSS/Medias_paginés">page</a>, région ou <a href="/fr/docs/Web/CSS/Colonnes_CSS">colonne</a> suivante. En utilisant la propriété <code>widows</code>, on évite d'avoir des veuves sur une seule ligne.</p>
+La propriété **`widows`** définit le nombre minimum de lignes qui peuvent être laissées en haut de la [page](/fr/docs/Web/CSS/Medias_paginés), région ou [colonne](/fr/docs/Web/CSS/Colonnes_CSS) suivante. En utilisant la propriété `widows`, on évite d'avoir des veuves sur une seule ligne.
 
-<pre class="brush:css no-line-numbers">/* Valeurs entières */
-/* type &lt;integer&gt; */
+```css
+/* Valeurs entières */
+/* type <integer> */
 widows: 2;
 widows: 3;
 
@@ -20,30 +21,27 @@ widows: 3;
 widows: inherit;
 widows: initial;
 widows: unset;
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> En typographie, une ligne veuve est la dernière ligne d'un paragraphe qui apparaît seule en haut d'une nouvelle page (alors que le paragraphe démarrait sur une page antérieure).</p>
-</div>
+> **Note :** En typographie, une ligne veuve est la dernière ligne d'un paragraphe qui apparaît seule en haut d'une nouvelle page (alors que le paragraphe démarrait sur une page antérieure).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>&lt;integer&gt;</code></dt>
- <dd>Cet entier indique le nombre minimum de lignes qui peuvent apparaître en haut d'une nouvelle page, région ou colonne lorsqu'une rupture intervient. Si la valeur est négative, la déclaration est invalide.</dd>
-</dl>
+- `<integer>`
+  - : Cet entier indique le nombre minimum de lignes qui peuvent apparaître en haut d'une nouvelle page, région ou colonne lorsqu'une rupture intervient. Si la valeur est négative, la déclaration est invalide.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   background-color: #8cffa0;
   columns: 3;
   widows: 2;
@@ -56,59 +54,37 @@ p {
 p:first-child {
   margin-top: 0;
 }
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p&gt;Un premier paragraphe avec un peu de texte.&lt;/p&gt;
-  &lt;p&gt;Un deuxième paragraphe avec un peu plus de texte et qui permet d'illustrer le fonctionnement de widows.&lt;/p&gt;
-  &lt;p&gt;Enfin, un troisième paragraphe avec un peu plus de texte que le premier.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Résult">Résult</h3>
-
-<p>{{EmbedLiveSample("Exemple", 400, 160)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}}</td>
-   <td>{{Spec2('CSS3 Fragmentation')}}</td>
-   <td>Extension de <code>widows</code> qui peut désormais être appliqué à n'importe quel type de fragment : pages, régions ou colonnes.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td>
-   <td>{{Spec2('CSS3 Multicol')}}</td>
-   <td>Recommandation d'utiliser <code>widows</code> avec les colonnes.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.widows")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref("orphans")}}</li>
- <li><a href="/fr/docs/Web/CSS/Medias_paginés">Médias paginés</a></li>
-</ul>
+```
+
+### HTML
+
+```html
+<div>
+  <p>Un premier paragraphe avec un peu de texte.</p>
+  <p>Un deuxième paragraphe avec un peu plus de texte et qui permet d'illustrer le fonctionnement de widows.</p>
+  <p>Enfin, un troisième paragraphe avec un peu plus de texte que le premier.</p>
+</div>
+```
+
+### Résult
+
+{{EmbedLiveSample("Exemple", 400, 160)}}
+
+## Spécifications
+
+| Spécification                                                                        | État                                     | Commentaires                                                                                                           |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}} | {{Spec2('CSS3 Fragmentation')}} | Extension de `widows` qui peut désormais être appliqué à n'importe quel type de fragment : pages, régions ou colonnes. |
+| {{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}     | {{Spec2('CSS3 Multicol')}}     | Recommandation d'utiliser `widows` avec les colonnes.                                                                  |
+| {{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}         | {{Spec2('CSS2.1')}}                 | Définition initiale.                                                                                                   |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.widows")}}
+
+## Voir aussi
+
+- {{cssxref("orphans")}}
+- [Médias paginés](/fr/docs/Web/CSS/Medias_paginés)
diff --git a/files/fr/web/css/width/index.md b/files/fr/web/css/width/index.md
index b61bd7e63d..8822ee52d2 100644
--- a/files/fr/web/css/width/index.md
+++ b/files/fr/web/css/width/index.md
@@ -7,25 +7,24 @@ tags:
   - Reference
 translation_of: Web/CSS/width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>width</code></strong> permet de définir la largeur de la <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">boîte du contenu</a> d'un élément. Par défaut, sa valeur est <strong><code>auto</code></strong>, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut <code>border-box</code>, la valeur appliquée incluera les dimensions de la boîte d'encadrement (<em>border</em>) et de la boîte de remplissage (<em>padding</em>).</p>
+La propriété **`width`** permet de définir la largeur de la [boîte du contenu](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) d'un élément. Par défaut, sa valeur est **`auto`**, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut `border-box`, la valeur appliquée incluera les dimensions de la boîte d'encadrement (_border_) et de la boîte de remplissage (_padding_).
 
-<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/width.html")}}
 
-<div class="note">
-<p><strong>Note :</strong> Les propriétés {{cssxref("min-width")}} et {{cssxref("max-width")}} permettent de surcharger {{cssxref("width")}}.</p>
-</div>
+> **Note :** Les propriétés {{cssxref("min-width")}} et {{cssxref("max-width")}} permettent de surcharger {{cssxref("width")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css">/* Valeurs de longueur */
-/* Type &lt;length&gt; */
+```css
+/* Valeurs de longueur */
+/* Type <length> */
 width: 300px;
 width: 25em;
 
 /* Valeurs en pourcentages */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 width: 75%;
 
 /* Avec un mot-clé */
@@ -41,64 +40,64 @@ width: auto;
 width: inherit;
 width: initial;
 width: unset;
-</pre>
-
-<p>La propriété <code>width</code> se définit avec</p>
-
-<ul>
- <li>un des mots-clés suivants : <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li>
- <li>ou une valeur de longeur (<code><a href="#length">&lt;length&gt;</a></code>) ou de pourcentage (<code><a href="#percentage">&lt;percentage&gt;</a></code>) éventuellement suivie par le mots-clé <code><a href="#border-box">border-box</a></code> ou <code><a href="#content-box">content-box</a></code>.</li>
-</ul>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Voir {{cssxref("&lt;length&gt;")}} pour les unités qui peuvent être utilisées.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Permet de définir la largeur en pourcentages ({{cssxref("&lt;percentage&gt;")}}) par rapport à la largeur du bloc contenant le bloc courant. Si la largeur du bloc englobant dépend de la largeur de l'élément, la disposition est indéfinie.</dd>
- <dt><code>border-box</code>{{experimental_inline}}</dt>
- <dd>Si cette valeur est présente, la longueur ({{cssxref("&lt;length&gt;")}}) ou le pourcentage ({{cssxref("&lt;percentage&gt;")}}) est appliqué à la boîte de bordure (<em>border</em>) de l'élément.</dd>
- <dt><code>content-box</code> {{experimental_inline}}</dt>
- <dd>Si cette valeur est présente, la longueur ({{cssxref("&lt;length&gt;")}}) ou le pourcentage ({{cssxref("&lt;percentage&gt;")}}) est appliqué à la boîte de contenu de l'élément.</dd>
- <dt><code>auto</code></dt>
- <dd>Le navigateur calculera et sélectionnera une largeur pour l'élément.</dd>
- <dt><code>fill</code> {{experimental_inline}}</dt>
- <dd>Utilise la taille <code>fill-available</code> dans l'axe du sens de lecture ou la taille <code>fill-available</code> dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.</dd>
- <dt><code>max-content</code> {{experimental_inline}}</dt>
- <dd>La largeur intrinsèque préférée.</dd>
- <dt><code>min-content</code> {{experimental_inline}}</dt>
- <dd>La largeur intrinsèque minimum.</dd>
- <dt><code>available</code> {{experimental_inline}}</dt>
- <dd>La largeur du bloc contenant le bloc courant, moins la marge horizontale, la bordure et le remplissage (<em>padding</em>).</dd>
- <dt><code>fit-content</code> {{experimental_inline}}</dt>
- <dd>La quantité la plus grande entre :
- <ul>
-  <li>La largeur intrinsèque minimum</li>
-  <li>Le minimum entre la largeur intrinsèque préférée et la largeur disponible</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+La propriété `width` se définit avec
+
+- un des mots-clés suivants : [`available`](#available), [`min-content`](#min-content), [`max-content`](#max-content), [`fit-content`](#fit-content), [`auto`](#auto).
+- ou une valeur de longeur ([`<length>`](#length)) ou de pourcentage ([`<percentage>`](#percentage)) éventuellement suivie par le mots-clé [`border-box`](#border-box) ou [`content-box`](#content-box).
+
+### Valeurs
+
+- `<length>`
+  - : Voir {{cssxref("&lt;length&gt;")}} pour les unités qui peuvent être utilisées.
+- `<percentage>`
+  - : Permet de définir la largeur en pourcentages ({{cssxref("&lt;percentage&gt;")}}) par rapport à la largeur du bloc contenant le bloc courant. Si la largeur du bloc englobant dépend de la largeur de l'élément, la disposition est indéfinie.
+- `border-box`{{experimental_inline}}
+  - : Si cette valeur est présente, la longueur ({{cssxref("&lt;length&gt;")}}) ou le pourcentage ({{cssxref("&lt;percentage&gt;")}}) est appliqué à la boîte de bordure (_border_) de l'élément.
+- `content-box` {{experimental_inline}}
+  - : Si cette valeur est présente, la longueur ({{cssxref("&lt;length&gt;")}}) ou le pourcentage ({{cssxref("&lt;percentage&gt;")}}) est appliqué à la boîte de contenu de l'élément.
+- `auto`
+  - : Le navigateur calculera et sélectionnera une largeur pour l'élément.
+- `fill` {{experimental_inline}}
+  - : Utilise la taille `fill-available` dans l'axe du sens de lecture ou la taille `fill-available` dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.
+- `max-content` {{experimental_inline}}
+  - : La largeur intrinsèque préférée.
+- `min-content` {{experimental_inline}}
+  - : La largeur intrinsèque minimum.
+- `available` {{experimental_inline}}
+  - : La largeur du bloc contenant le bloc courant, moins la marge horizontale, la bordure et le remplissage (_padding_).
+- `fit-content` {{experimental_inline}}
+
+  - : La quantité la plus grande entre :
+
+    - La largeur intrinsèque minimum
+    - Le minimum entre la largeur intrinsèque préférée et la largeur disponible
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Valeur_par_défaut">Valeur par défaut</h3>
+### Valeur par défaut
 
-<pre class="brush:css">p.goldie {
+```css
+p.goldie {
   background: gold;
-}</pre>
+}
+```
 
-<pre class="brush:html">&lt;p class="goldie"&gt;La communauté Mozilla ressemble à un panda roux.&lt;/p&gt;</pre>
+```html
+<p class="goldie">La communauté Mozilla ressemble à un panda roux.</p>
+```
 
-<p>{{EmbedLiveSample('Valeur_par_défaut', '500px', '64px')}}</p>
+{{EmbedLiveSample('Valeur_par_défaut', '500px', '64px')}}
 
-<h3 id="En_utilisant_les_pixels_et_les_em">En utilisant les pixels et les <code>em</code></h3>
+### En utilisant les pixels et les `em`
 
-<pre class="brush: css">.longueur_px {
+```css
+.longueur_px {
   width: 200px;
   background-color: red;
   color: white;
@@ -111,101 +110,86 @@ width: unset;
   color: red;
   border: 1px solid black;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="longueur_px"&gt;Largeur mesurée en pixels&lt;/div&gt;
-&lt;div class="longueur_em"&gt;Largeur mesurée en ems&lt;/div&gt;</pre>
+```html
+<div class="longueur_px">Largeur mesurée en pixels</div>
+<div class="longueur_em">Largeur mesurée en ems</div>
+```
 
-<p>{{EmbedLiveSample('En_utilisant_les_pixels_et_les_em', '500px', '64px')}}</p>
+{{EmbedLiveSample('En_utilisant_les_pixels_et_les_em', '500px', '64px')}}
 
-<h3 id="En_utilisant_les_pourcentages">En utilisant les pourcentages</h3>
+### En utilisant les pourcentages
 
-<pre class="brush: css">.pourcent {
+```css
+.pourcent {
   width: 20%;
   background-color: silver;
   border: 1px solid red;
-}</pre>
+}
+```
 
-<pre class="brush: html">&lt;div class="pourcent"&gt;Largeur exprimée en pourcentages&lt;/div&gt;</pre>
+```html
+<div class="pourcent">Largeur exprimée en pourcentages</div>
+```
 
-<p>{{EmbedLiveSample('En_utilisant_les_pourcentages', '500px', '64px')}}</p>
+{{EmbedLiveSample('En_utilisant_les_pourcentages', '500px', '64px')}}
 
-<h3 id="En_utilisant_max-content">En utilisant <code>max-content</code></h3>
+### En utilisant `max-content`
 
-<pre class="brush:css;">p.maxgreen {
+```css
+p.maxgreen {
   background: lightgreen;
   width: intrinsic;           /* Safari/WebKit utilisent un nom non-standard */
   width: -moz-max-content;    /* Firefox/Gecko */
   width: -webkit-max-content; /* Chrome */
-}</pre>
+}
+```
 
-<pre class="brush:html">&lt;p class="maxgreen"&gt;La communauté Mozilla ressemble à un panda roux.&lt;/p&gt;</pre>
+```html
+<p class="maxgreen">La communauté Mozilla ressemble à un panda roux.</p>
+```
 
-<p>{{EmbedLiveSample('En_utilisant_max-content', '500px', '64px')}}</p>
+{{EmbedLiveSample('En_utilisant_max-content', '500px', '64px')}}
 
-<h3 id="En_utilisant_min-content">En utilisant <code>min-content</code></h3>
+### En utilisant `min-content`
 
-<pre class="brush:css">p.minblue {
+```css
+p.minblue {
   background: lightblue;
   width: -moz-min-content;    /* Firefox */
   width: -webkit-min-content; /* Chrome */
-}</pre>
-
-<pre class="brush:html">&lt;p class="minblue"&gt;La communauté Mozilla ressemble à un panda roux.&lt;/p&gt;</pre>
-
-<p>{{EmbedLiveSample('En_utilisant_min-content', '500px', '155px')}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Il faut s'assurer que les éléments sur lesquels on utilise <code>width</code> 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.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4  | Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code> et <code>content-box</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>width</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Précision sur les éléments auxquels peuvent être appliquée la propriété.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte">Le modèle de boîtes</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
-</ul>
+}
+```
+
+```html
+<p class="minblue">La communauté Mozilla ressemble à un panda roux.</p>
+```
+
+{{EmbedLiveSample('En_utilisant_min-content', '500px', '155px')}}
+
+## Accessibilité
+
+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)
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                                                                                 |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}     | {{Spec2('CSS3 Sizing')}}         | Ajout des mots-clés `max-content`, `min-content`, `available`, `fit-content`, `border-box` et `content-box`. |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}         | {{Spec2('CSS3 Transitions')}} | `width` peut désormais être animée.                                                                          |
+| {{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}} | {{Spec2('CSS2.1')}}                 | Précision sur les éléments auxquels peuvent être appliquée la propriété.                                     |
+| {{SpecName('CSS1', '#width', 'width')}}                                     | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                         |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.width")}}
+
+## Voir aussi
+
+- [Le modèle de boîtes](/fr/docs/Web/CSS/Modèle_de_boîte), {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}
diff --git a/files/fr/web/css/will-change/index.md b/files/fr/web/css/will-change/index.md
index fd846b0880..e50a300261 100644
--- a/files/fr/web/css/will-change/index.md
+++ b/files/fr/web/css/will-change/index.md
@@ -7,82 +7,67 @@ tags:
   - Reference
 translation_of: Web/CSS/will-change
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>will-change</code></strong> fournit une indication au navigateur sur la propension d'un élément à changer (afin que le navigateur puisse mettre en place les optimisations nécessaires avant que l'élément change vraiment). Ce type d'optimisation permet d'augmenter la réactivité de la page en effectuant des calculs (éventuellement coûteux) en prévision du changement.</p>
+La propriété **`will-change`** fournit une indication au navigateur sur la propension d'un élément à changer (afin que le navigateur puisse mettre en place les optimisations nécessaires avant que l'élément change vraiment). Ce type d'optimisation permet d'augmenter la réactivité de la page en effectuant des calculs (éventuellement coûteux) en prévision du changement.
 
-<div class="warning">
-<p><strong>Attention :</strong> <code>will-change</code> est conçu pour être utilisé en dernier recours afin d'aider à la résolutions de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive.</p>
-</div>
+> **Attention :** `will-change` est conçu pour être utilisé en dernier recours afin d'aider à la résolutions de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive.
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 will-change: auto;
 will-change: scroll-position;
 will-change: contents;
-will-change: transform;        /* Exemple de &lt;custom-ident&gt; */
-will-change: opacity;          /* Exemple de &lt;custom-ident&gt; */
-will-change: left, top;        /* Exemple de deux &lt;animateable-feature&gt; */
+will-change: transform;        /* Exemple de <custom-ident> */
+will-change: opacity;          /* Exemple de <custom-ident> */
+will-change: left, top;        /* Exemple de deux <animateable-feature> */
 
 /* Valeurs globales */
 will-change: inherit;
 will-change: initial;
 will-change: unset;
-</pre>
-
-<p>Il est parfois difficile de bien utiliser cette propriété :</p>
-
-<ul>
- <li>
-  <p><em>Il ne faut pas appliquer <code>will-change</code> à de trop nombreux éléments.</em> Le navigateur essaie déjà d'optimiser de nombreuses choses. Certaines de ces optimisations sont fortement couplées avec <code>will-change</code> pour utiliser les ressources de l'ordinateur. Aussi, si <code>will-change</code> est « trop » utilisé, cela peut ralentir la page et consommer intensivement les ressources.</p>
- </li>
- <li>
-  <p><em>À utiliser avec parcimonie.</em> Normalement, le navigateur essaie d'appliquer les optimisations dès que possible afin de revenir au plus vite dans un état normal. En revanche, en utilisant <code>will-change</code> dans la feuille de style, on indique que les éléments ciblés vont bientôt changer et le navigateur conservera les optimisations en cours beaucoup plus longtemps si la propriété est maintenue. Il est donc conseillé d'activer et de désactiver <code>will-change</code> de façon pertinente grâce à du script avant et après le changement concerné.</p>
- </li>
- <li>
-  <p><em>Ne pas « sur-optimiser » avec <code>will-change</code></em>. Si votre page fonctionne correctement, n'ajoutez pas la propriété <code>will-change</code> sur certains éléments uniquement pour gagner un peu de vitesse. <code>will-change</code> est conçu pour être utilisé en dernier ressort afin de régler les problèmes de performances existants. En utilisant <code>will-change</code> trop souvent, cela consommera plus de mémoire, complexifiera le rendu de la page pour le navigateur (qui se préparera au changement). En bref, cela réduira les performances de la page.</p>
- </li>
- <li>
-  <p><em>Laisser le temps à <code>will-change</code> pour qu'il fonctionne.</em> Cette propriété est conçue pour permettre aux auteurs d'indiquer à l'agent-utilisateur les propriétés qui vont probablement changer afin que le navigateur puisse optimiser en avance de phase. Il est donc important de laisser le temps au navigateur d'appliquer ces opérations pour que l'effet obtenu soit bénéfique. Pour cela, mieux vaut donc prévoir légèrement avant le changement que celui-ci aura lieu et alors modifier <code>will-change</code> en prévision.</p>
- </li>
- <li>
-  <p><em>Sachez que <code>will-change</code></em><em> peut modifier l'apparence des éléments</em> lorsqu'il est utilisé avec des propriétés qui créent <a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">des contextes d'empilement</a> (par exemple <code>will-change: opacity</code>) car le contexte d'empilement est créé au préalable.</p>
- </li>
-</ul>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>Ce mot-clé ne traduit pas d'intention particulière. Dans ce cas, l'agent utilisateur applique les méthodes d'optimisations et heuristiques normales.</dd>
-</dl>
-
-<p>Un valeur de type <code>&lt;animateable-feature&gt;</code> peut être :</p>
-
-<dl>
- <dt><code>scroll-position</code></dt>
- <dd>L'auteur indique que le défilement de l'élément va prochainement être animé et/ou modifié.</dd>
- <dt><code>contents</code></dt>
- <dd>L'auteur indique que le contenu de l'élément va prochainement être modifié ou animé.</dd>
- <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
- <dd>Ce type permet d'indiquer que la propriété donnée va prochainement être modifiée ou animée. Si la propriété fournie est un raccourci, on s'attendra à ce que toutes les propriétés détaillées correspondantes soient animées ou changées. Une valeur de ce type ne peut pas être <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, ou <code>contents</code>. La spécification ne définit pas le comportement d'une valeur spécifique mais généralement, lorsqu'on utilise <code>transform</code>, cela indique que les couches qui composent la page vont évoluer. <a href="https://github.com/operasoftware/devopera/pull/330">Chrome prend deux mesures</a> selon les propriétés utilisées ici : il établit une nouvelle composition des couches de rendu ou crée un nouveau contexte d'empilement.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+Il est parfois difficile de bien utiliser cette propriété :
+
+- _Il ne faut pas appliquer `will-change` à de trop nombreux éléments._ Le navigateur essaie déjà d'optimiser de nombreuses choses. Certaines de ces optimisations sont fortement couplées avec `will-change` pour utiliser les ressources de l'ordinateur. Aussi, si `will-change` est « trop » utilisé, cela peut ralentir la page et consommer intensivement les ressources.
+- _À utiliser avec parcimonie._ Normalement, le navigateur essaie d'appliquer les optimisations dès que possible afin de revenir au plus vite dans un état normal. En revanche, en utilisant `will-change` dans la feuille de style, on indique que les éléments ciblés vont bientôt changer et le navigateur conservera les optimisations en cours beaucoup plus longtemps si la propriété est maintenue. Il est donc conseillé d'activer et de désactiver `will-change` de façon pertinente grâce à du script avant et après le changement concerné.
+- _Ne pas « sur-optimiser » avec `will-change`_. Si votre page fonctionne correctement, n'ajoutez pas la propriété `will-change` sur certains éléments uniquement pour gagner un peu de vitesse. `will-change` est conçu pour être utilisé en dernier ressort afin de régler les problèmes de performances existants. En utilisant `will-change` trop souvent, cela consommera plus de mémoire, complexifiera le rendu de la page pour le navigateur (qui se préparera au changement). En bref, cela réduira les performances de la page.
+- _Laisser le temps à `will-change` pour qu'il fonctionne._ Cette propriété est conçue pour permettre aux auteurs d'indiquer à l'agent-utilisateur les propriétés qui vont probablement changer afin que le navigateur puisse optimiser en avance de phase. Il est donc important de laisser le temps au navigateur d'appliquer ces opérations pour que l'effet obtenu soit bénéfique. Pour cela, mieux vaut donc prévoir légèrement avant le changement que celui-ci aura lieu et alors modifier `will-change` en prévision.
+- _Sachez que `will-change`_ _peut modifier l'apparence des éléments_ lorsqu'il est utilisé avec des propriétés qui créent [des contextes d'empilement](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) (par exemple `will-change: opacity`) car le contexte d'empilement est créé au préalable.
+
+## Syntaxe
+
+### Valeurs
+
+- `auto`
+  - : Ce mot-clé ne traduit pas d'intention particulière. Dans ce cas, l'agent utilisateur applique les méthodes d'optimisations et heuristiques normales.
+
+Un valeur de type `<animateable-feature>` peut être :
+
+- `scroll-position`
+  - : L'auteur indique que le défilement de l'élément va prochainement être animé et/ou modifié.
+- `contents`
+  - : L'auteur indique que le contenu de l'élément va prochainement être modifié ou animé.
+- {{cssxref("custom-ident", "&lt;custom-ident&gt;")}}
+  - : Ce type permet d'indiquer que la propriété donnée va prochainement être modifiée ou animée. Si la propriété fournie est un raccourci, on s'attendra à ce que toutes les propriétés détaillées correspondantes soient animées ou changées. Une valeur de ce type ne peut pas être `unset`, `initial`, `inherit`, `will-change`, `auto`, `scroll-position`, ou `contents`. La spécification ne définit pas le comportement d'une valeur spécifique mais généralement, lorsqu'on utilise `transform`, cela indique que les couches qui composent la page vont évoluer. [Chrome prend deux mesures](https://github.com/operasoftware/devopera/pull/330) selon les propriétés utilisées ici : il établit une nouvelle composition des couches de rendu ou crée un nouveau contexte d'empilement.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: css">.sidebar {
+```css
+.sidebar {
   will-change: transform;
 }
-</pre>
+```
 
-<p>Dans l'exemple précédent, on applique la propriété <code>will-change</code> à 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é <code>will-change</code> grâce à JavaScript (et qui correspond donc à la méthode qui devrait être utilisée la plupart du temps) :</p>
+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) :
 
-<pre class="brush: js">var el = document.getElementById('element');
+```js
+var el = document.getElementById('element');
 
 // On applique will-change quand la souris/curseur
 // pointeur/stylet passe au-dessus de l'élément
@@ -97,35 +82,25 @@ function hintBrowser() {
 
 function removeHint() {
   this.style.willChange = 'auto';
-}</pre>
+}
+```
 
-<p>Cela peut toutefois être pertinent d'inclure <code>will-change</code> dans la feuille de style d'une application qui gère des changements de pages ou des diapositives parmi lesquelles on navigue lorsque les pages sont complexes. Cela permettra au navigateur de préparer la transition en avance de phase et de mieux réagir au changement de page (ou de diapositive) lorsque le bouton associé sera utilisé.</p>
+Cela peut toutefois être pertinent d'inclure `will-change` dans la feuille de style d'une application qui gère des changements de pages ou des diapositives parmi lesquelles on navigue lorsque les pages sont complexes. Cela permettra au navigateur de préparer la transition en avance de phase et de mieux réagir au changement de page (ou de diapositive) lorsque le bouton associé sera utilisé.
 
-<pre class="brush: css">.slide {
+```css
+.slide {
   will-change: transform;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Will Change', '#will-change', 'will-change')}}</td>
-   <td>{{Spec2('CSS Will Change')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.will-change")}}</p>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('CSS Will Change', '#will-change', 'will-change')}} | {{Spec2('CSS Will Change')}} | Définition initiale. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.will-change")}}
diff --git a/files/fr/web/css/word-break/index.md b/files/fr/web/css/word-break/index.md
index 3276f00594..d033cc3230 100644
--- a/files/fr/web/css/word-break/index.md
+++ b/files/fr/web/css/word-break/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/word-break
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété<strong> <code>word-break</code></strong> est utilisée pour définir la façon dont la césure s'applique pour les endroits où le texte dépasserait de sa boîte de contenu.</p>
+La propriété** `word-break`** est utilisée pour définir la façon dont la césure s'applique pour les endroits où le texte dépasserait de sa boîte de contenu.
 
-<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>
+{{EmbedInteractiveExample("pages/css/word-break.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 word-break: normal;
 word-break: break-all;
 word-break: keep-all;
@@ -25,44 +26,42 @@ word-break: break-word; /* dépréciée */
 word-break: inherit;
 word-break: initial;
 word-break: unset;
-</pre>
+```
 
-<p>La propriété <code>word-break</code> est définie avec un mot-clé parmi ceux décrits ci-après.</p>
+La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci-après.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Le passage à la ligne classique est utilisé.</dd>
- <dt><code>break-all</code></dt>
- <dd>La césure peut être insérée après n'importe quel caractère (ne s'applique pas pour les textes en chinois, japonais et coréen).</dd>
- <dt><code>keep-all</code></dt>
- <dd>La césure est interdite pour les textes en chinois, japonais et coréen. Pour les autres types de texte, le comportement est le même que <code>normal</code>.</dd>
- <dt><code>break-word</code>{{deprecated_inline}}</dt>
- <dd>Aura le même effet que <code>word-break: normal</code> et que <code>overflow-wrap: anywhere</code> quelle que soit la valeur de la propriété {{cssxref("overflow-wrap")}}.</dd>
-</dl>
+- `normal`
+  - : Le passage à la ligne classique est utilisé.
+- `break-all`
+  - : La césure peut être insérée après n'importe quel caractère (ne s'applique pas pour les textes en chinois, japonais et coréen).
+- `keep-all`
+  - : La césure est interdite pour les textes en chinois, japonais et coréen. Pour les autres types de texte, le comportement est le même que `normal`.
+- `break-word`{{deprecated_inline}}
+  - : Aura le même effet que `word-break: normal` et que `overflow-wrap: anywhere` quelle que soit la valeur de la propriété {{cssxref("overflow-wrap")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Contrairement à <code>word-break: break-word</code> et à <code>overflow-wrap: break-word</code> (cf. {{cssxref("overflow-wrap")}}), <code>word-break: break-all</code> créera une césure à l'endroit exact où le mot aurait dépassé du conteneur (même si placer le mot entier sur sa propre ligne aurait pu éviter la césure).</p>
-</div>
+> **Note :** Contrairement à `word-break: break-word` et à `overflow-wrap: break-word` (cf. {{cssxref("overflow-wrap")}}), `word-break: break-all` créera une césure à l'endroit exact où le mot aurait dépassé du conteneur (même si placer le mot entier sur sa propre ligne aurait pu éviter la césure).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="normal étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 &lt;/p&gt;
-&lt;p class="breakAll étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 &lt;/p&gt;
-&lt;p class="breakWord étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 &lt;/p&gt;
-&lt;p class="keep étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase.  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
-</pre>
+```html
+<p class="normal étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 </p>
+<p class="breakAll étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 </p>
+<p class="breakWord étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 </p>
+<p class="keep étroit"> Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase.  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.étroit {
+```css
+.étroit {
   padding: 10px;
   border: 1px solid;
   width: 500px;
@@ -87,40 +86,25 @@ word-break: unset;
 .breakWord {
   word-break: break-word;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemple','100%',600)}}</p>
+{{EmbedLiveSample('Exemple','100%',600)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                         | Commentaires        |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('CSS3 Text', '#word-break-property', 'word-break')}} | {{Spec2('CSS3 Text')}} | Définition initiale |
 
-<div>{{cssinfo}}</div>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.word-break")}}</p>
+{{Compat("css.properties.word-break")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("word-wrap")}}</li>
- <li>{{cssxref("overflow-wrap")}}</li>
-</ul>
+- {{cssxref("word-wrap")}}
+- {{cssxref("overflow-wrap")}}
diff --git a/files/fr/web/css/word-spacing/index.md b/files/fr/web/css/word-spacing/index.md
index a65e58038f..4c4199577d 100644
--- a/files/fr/web/css/word-spacing/index.md
+++ b/files/fr/web/css/word-spacing/index.md
@@ -7,24 +7,25 @@ tags:
   - Reference
 translation_of: Web/CSS/word-spacing
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>word-spacing</code></strong> définit la règle d'espacement utilisée entre les balises et entre les mots.</p>
+La propriété **`word-spacing`** définit la règle d'espacement utilisée entre les balises et entre les mots.
 
-<div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div>
+{{EmbedInteractiveExample("pages/css/word-spacing.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 word-spacing: normal;
 
 /* Valeurs de longueur */
-/* type &lt;length&gt; */
+/* type <length> */
 word-spacing: 3px;
 word-spacing: 0.3em;
 
 /* Valeurs en pourcentages */
-/* type &lt;percentage&gt; */
+/* type <percentage> */
 word-spacing: 50%;
 word-spacing: 200%;
 
@@ -32,93 +33,66 @@ word-spacing: 200%;
 word-spacing: inherit;
 word-spacing: initial;
 word-spacing: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>L'espace normale entre les mots (ou inter-mot), tel qu'il est défini par la police courante et/ou le navigateur.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>Une valeur de longueur définit l'espace qu'on ajoute à l'inter-mot intrinsèque défini par la police. Voir {{cssxref("&lt;length&gt;")}} pour les différentes valeurs et unités possibles.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>Une valeur en pourcentages définit la taille de l'inter-mot à utiliser par rapport à la position du prochain caractère (si on utilise <code>-100%</code>, l'espace sera nul et si on utilise <code>100%</code>, il sera doublé). Voir {{cssxref("&lt;percentage&gt;")}} pour les différentes valeurs et unités possibles.</dd>
-</dl>
+- `normal`
+  - : L'espace normale entre les mots (ou inter-mot), tel qu'il est défini par la police courante et/ou le navigateur.
+- `<length>`
+  - : Une valeur de longueur définit l'espace qu'on ajoute à l'inter-mot intrinsèque défini par la police. Voir {{cssxref("&lt;length&gt;")}} pour les différentes valeurs et unités possibles.
+- `<percentage>`
+  - : Une valeur en pourcentages définit la taille de l'inter-mot à utiliser par rapport à la position du prochain caractère (si on utilise `-100%`, l'espace sera nul et si on utilise `100%`, il sera doublé). Voir {{cssxref("&lt;percentage&gt;")}} pour les différentes valeurs et unités possibles.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p id="ligne1"&gt;Voici le texte de la ligne 1 &lt;/p&gt;
-&lt;p id="ligne2" &gt;Et voilà celui de la ligne 2 &lt;/p&gt;
-</pre>
+```html
+<p id="ligne1">Voici le texte de la ligne 1 </p>
+<p id="ligne2" >Et voilà celui de la ligne 2 </p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#ligne1 {
+```css
+#ligne1 {
   word-spacing: 15px;
 }
 
 #ligne2 {
   word-spacing: 5em;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemple")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Utiliser des valeurs trop importantes (positives ou négatives) pour <code>word-spacing</code> rend le texte illisible. Si l'espacement utilisé est trop grand, la structure visuelle ne permettra plus d'identifier une phrase. Si l'espacement est trop petit, les mots se chevaucheront et on ne pourra plus distinguer le début et la fin de chaque mot.</p>
-
-<p>La bonne valeur à utiliser pour <code>word-spacing</code> doit être déterminée au cas par cas, en fonction du type de police utilisé et de la largeur de celle-ci.</p>
-
-<ul>
- <li><a href="/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">Comprendre les règles WCAG 1.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td>Remplace les valeurs précédentes avec une valeur <code>&lt;spacing-limit&gt;</code> qui définit la même valeur et la valeur <code>&lt;percentage&gt;</code> et permet d'avoir trois valeurs pour décrire un optimum, un minimum, et un maximum.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>word-spacing</code> peut désormais être animé.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.word-spacing")}}</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemple")}}
+
+## Accessibilité
+
+Utiliser des valeurs trop importantes (positives ou négatives) pour `word-spacing` rend le texte illisible. Si l'espacement utilisé est trop grand, la structure visuelle ne permettra plus d'identifier une phrase. Si l'espacement est trop petit, les mots se chevaucheront et on ne pourra plus distinguer le début et la fin de chaque mot.
+
+La bonne valeur à utiliser pour `word-spacing` doit être déterminée au cas par cas, en fonction du type de police utilisé et de la largeur de celle-ci.
+
+- [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 - W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+
+## Spécifications
+
+| Spécification                                                                                    | État                                     | Commentaires                                                                                                                                                                                                  |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}         | {{Spec2('CSS3 Text')}}             | Remplace les valeurs précédentes avec une valeur `<spacing-limit>` qui définit la même valeur et la valeur `<percentage>` et permet d'avoir trois valeurs pour décrire un optimum, un minimum, et un maximum. |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}         | {{Spec2('CSS3 Transitions')}} | `word-spacing` peut désormais être animé.                                                                                                                                                                     |
+| {{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}} | {{Spec2('CSS2.1')}}                 | Aucun changement.                                                                                                                                                                                             |
+| {{SpecName('CSS1', '#word-spacing', 'word-spacing')}}                         | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                          |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.word-spacing")}}
diff --git a/files/fr/web/css/writing-mode/index.md b/files/fr/web/css/writing-mode/index.md
index 440964aabf..a419c8ff37 100644
--- a/files/fr/web/css/writing-mode/index.md
+++ b/files/fr/web/css/writing-mode/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/writing-mode
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>writing-mode</code></strong> définit si les lignes d'un texte sont écrites horizontalement ou verticalement et la direction selon laquelle le bloc grandit. Lorsque cette propriété est définie pour un document entier, elle devrait être appliquée à la racine (soit l'élément {{HTMLElement("html")}} pour les documents HTML).</p>
+La propriété CSS **`writing-mode`** définit si les lignes d'un texte sont écrites horizontalement ou verticalement et la direction selon laquelle le bloc grandit. Lorsque cette propriété est définie pour un document entier, elle devrait être appliquée à la racine (soit l'élément {{HTMLElement("html")}} pour les documents HTML).
 
-<div>{{EmbedInteractiveExample("pages/css/writing-mode.html")}}</div>
+{{EmbedInteractiveExample("pages/css/writing-mode.html")}}
 
-<p>La propriété définit la direction du flux du bloc. C'est dans cette direction que les conteneurs de bloc seront empilés et c'est dans cette direction que le contenu en flux « coule » dans un bloc contenur. Ainsi, la propriété <code>writing-mode</code> détermine également l'ordre du contenu de niveau bloc.</p>
+La propriété définit la direction du flux du bloc. C'est dans cette direction que les conteneurs de bloc seront empilés et c'est dans cette direction que le contenu en flux « coule » dans un bloc contenur. Ainsi, la propriété `writing-mode` détermine également l'ordre du contenu de niveau bloc.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 writing-mode: horizontal-tb;
 writing-mode: vertical-rl;
 writing-mode: vertical-lr;
@@ -26,90 +27,90 @@ writing-mode: vertical-lr;
 writing-mode: inherit;
 writing-mode: initial;
 writing-mode: unset;
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>horizontal-tb</code></dt>
- <dd>Le contenu coule horizontalement de gauche à droite puis de haut en bas. La ligne horizontale suivante est positionnée sous la ligne précédente.</dd>
- <dt><code>vertical-rl</code></dt>
- <dd>Le contenu coule verticalement de haut en bas puis horizontalement de droite à gauche. La ligne verticale suivante est positionnée à gauche de la ligne précédente.</dd>
- <dt><code>vertical-lr</code></dt>
- <dd>Le contenu coule verticalement de haut en bas puis horizontalement de gauche à droite. La ligne verticale suivante est positionnée à droite de la ligne précédente.</dd>
- <dt><code>sideways-rl</code>{{experimental_inline}}</dt>
- <dd>Le contenu coule verticalement du haut vers le bas et tous les glyphes, y compris pour les systèmes d'écriture verticaux sont tournés sur le côté, vers la droite.</dd>
-</dl>
-
-<dl>
- <dt><code>sideways-lr</code>{{experimental_inline}}</dt>
- <dd>Le contenu coule verticalement du haut vers le bas et tous les glyphes, y compris pour les systèmes d'écriture verticaux sont tournés sur le côté, vers la gauche.</dd>
- <dt><code>lr</code> {{deprecated_inline}}</dt>
- <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
- <dt><code>lr-tb</code> {{deprecated_inline}}</dt>
- <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
- <dt><code>rl</code> {{deprecated_inline}}</dt>
- <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
- <dt><code>tb</code> {{deprecated_inline}}</dt>
- <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>vertical-rl</code>.</dd>
- <dt><code>tb-rl</code> {{deprecated_inline}}</dt>
- <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>vertical-rl</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+```
+
+### Valeurs
+
+- `horizontal-tb`
+  - : Le contenu coule horizontalement de gauche à droite puis de haut en bas. La ligne horizontale suivante est positionnée sous la ligne précédente.
+- `vertical-rl`
+  - : Le contenu coule verticalement de haut en bas puis horizontalement de droite à gauche. La ligne verticale suivante est positionnée à gauche de la ligne précédente.
+- `vertical-lr`
+  - : Le contenu coule verticalement de haut en bas puis horizontalement de gauche à droite. La ligne verticale suivante est positionnée à droite de la ligne précédente.
+- `sideways-rl`{{experimental_inline}}
+  - : Le contenu coule verticalement du haut vers le bas et tous les glyphes, y compris pour les systèmes d'écriture verticaux sont tournés sur le côté, vers la droite.
+
+<!---->
+
+- `sideways-lr`{{experimental_inline}}
+  - : Le contenu coule verticalement du haut vers le bas et tous les glyphes, y compris pour les systèmes d'écriture verticaux sont tournés sur le côté, vers la gauche.
+- `lr` {{deprecated_inline}}
+  - : Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser `horizontal-tb`.
+- `lr-tb` {{deprecated_inline}}
+  - : Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser `horizontal-tb`.
+- `rl` {{deprecated_inline}}
+  - : Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser `horizontal-tb`.
+- `tb` {{deprecated_inline}}
+  - : Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser `vertical-rl`.
+- `tb-rl` {{deprecated_inline}}
+  - : Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser `vertical-rl`.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<p>Ce fragment de code HTML contient un tableau ({{HTMLElement("table")}}) dont chaque ligne indique le mode d'écriture et des exemples de scripts utilisés.</p>
-
-<pre class="brush: html">&lt;table&gt;
-    &lt;tr&gt;
-        &lt;th&gt;Valeur&lt;/th&gt;
-        &lt;th&gt;Système d'écriture vertical&lt;/th&gt;
-        &lt;th&gt;Système d'écriture horizontal&lt;/th&gt;
-        &lt;th&gt;Système d'écriture hybride&lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-        &lt;td&gt;horizontal-tb&lt;/td&gt;
-        &lt;td class="example Text1"&gt;我家没有电脑。&lt;/td&gt;
-        &lt;td class="example Text1"&gt;Example text&lt;/td&gt;
-        &lt;td class="example Text1"&gt;1994年に至っては&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-        &lt;td&gt;vertical-lr&lt;/td&gt;
-        &lt;td class="example Text2"&gt;我家没有电脑。&lt;/td&gt;
-        &lt;td class="example Text2"&gt;Example text&lt;/td&gt;
-        &lt;td class="example Text2"&gt;1994年に至っては&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-        &lt;td&gt;vertical-rl&lt;/td&gt;
-        &lt;td class="example Text3"&gt;我家没有电脑。&lt;/td&gt;
-        &lt;td class="example Text3"&gt;Example text&lt;/td&gt;
-        &lt;td class="example Text3"&gt;1994年に至っては&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-        &lt;td&gt;sideways-lr&lt;/td&gt;
-        &lt;td class="example Text4"&gt;我家没有电脑。&lt;/td&gt;
-        &lt;td class="example Text4"&gt;Example text&lt;/td&gt;
-        &lt;td class="example Text4"&gt;1994年に至っては&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-        &lt;td&gt;sideways-rl&lt;/td&gt;
-        &lt;td class="example Text5"&gt;我家没有电脑。&lt;/td&gt;
-        &lt;td class="example Text5"&gt;Example text&lt;/td&gt;
-        &lt;td class="example Text5"&gt;1994年に至っては&lt;/td&gt;
-    &lt;/tr&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<p>Cette première partie permet uniquement de rendre les choses plus agréables à lire :</p>
-
-<pre class="brush:css;">table {
+## Exemple
+
+### HTML
+
+Ce fragment de code HTML contient un tableau ({{HTMLElement("table")}}) dont chaque ligne indique le mode d'écriture et des exemples de scripts utilisés.
+
+```html
+<table>
+    <tr>
+        <th>Valeur</th>
+        <th>Système d'écriture vertical</th>
+        <th>Système d'écriture horizontal</th>
+        <th>Système d'écriture hybride</th>
+    </tr>
+    <tr>
+        <td>horizontal-tb</td>
+        <td class="example Text1">我家没有电脑。</td>
+        <td class="example Text1">Example text</td>
+        <td class="example Text1">1994年に至っては</td>
+    </tr>
+    <tr>
+        <td>vertical-lr</td>
+        <td class="example Text2">我家没有电脑。</td>
+        <td class="example Text2">Example text</td>
+        <td class="example Text2">1994年に至っては</td>
+    </tr>
+    <tr>
+        <td>vertical-rl</td>
+        <td class="example Text3">我家没有电脑。</td>
+        <td class="example Text3">Example text</td>
+        <td class="example Text3">1994年に至っては</td>
+    </tr>
+    <tr>
+        <td>sideways-lr</td>
+        <td class="example Text4">我家没有电脑。</td>
+        <td class="example Text4">Example text</td>
+        <td class="example Text4">1994年に至っては</td>
+    </tr>
+    <tr>
+        <td>sideways-rl</td>
+        <td class="example Text5">我家没有电脑。</td>
+        <td class="example Text5">Example text</td>
+        <td class="example Text5">1994年に至っては</td>
+    </tr>
+```
+
+### CSS
+
+Cette première partie permet uniquement de rendre les choses plus agréables à lire :
+
+```css
+table {
   border-collapse:collapse;
 }
 
@@ -119,11 +120,12 @@ td, th {
 th {
   background-color: lightgray;
 }
-</pre>
+```
 
-<p>Ensuite, on ajoute la direction du contenu pour chaque cellule du tableau :</p>
+Ensuite, on ajoute la direction du contenu pour chaque cellule du tableau :
 
-<pre class="brush:css;">.example.Text1 span, .example.Text1 {
+```css
+.example.Text1 span, .example.Text1 {
   writing-mode: horizontal-tb;
   -webkit-writing-mode: horizontal-tb;
   -ms-writing-mode: horizontal-tb;
@@ -152,55 +154,36 @@ th {
   -webkit-writing-mode: sideways-rl;
   -ms-writing-mode: sideways-rl;
 }
-</pre>
-
-<p>{{EmbedLiveSample("Exemple", 400, 500)}}</p>
-
-<h3 id="Résultat_statique">Résultat statique</h3>
-
-<p>Voici un aperçu du résultat avec un navigateur qui prend en charge <code>writing-mode</code> :</p>
-
-<p><img alt="" src="writing-mode-actual-result.png"></p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td>
-   <td>{{Spec2("CSS3 Writing Modes")}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}}</td>
-   <td>{{Spec2("CSS4 Writing Modes")}}</td>
-   <td>Ajout des valeurs <code>sideways-lr</code> et <code>sideways-rl</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.writing-mode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'attribut SVG <code><a href="/fr/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code></li>
- <li>{{cssxref("direction")}}</li>
- <li>{{cssxref("unicode-bidi")}}</li>
- <li>{{cssxref("text-orientation")}}</li>
- <li>{{cssxref("text-combine-upright")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties">Les propriétés logiques en CSS</a></li>
- <li><a href="https://www.w3.org/International/articles/vertical-text/">Mettre en forme du texte vertical (chinois, coréen, japonais, mongol)</a></li>
- <li><a href="https://w3c.github.io/i18n-tests/results/writing-mode-vertical">Tests de prise en charge des navigateurs</a></li>
-</ul>
+```
+
+{{EmbedLiveSample("Exemple", 400, 500)}}
+
+### Résultat statique
+
+Voici un aperçu du résultat avec un navigateur qui prend en charge `writing-mode` :
+
+![](writing-mode-actual-result.png)
+
+## Spécifications
+
+| Spécification                                                                            | État                                     | Commentaires                                      |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------- |
+| {{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}} | {{Spec2("CSS3 Writing Modes")}} | Définition initiale                               |
+| {{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}} | {{Spec2("CSS4 Writing Modes")}} | Ajout des valeurs `sideways-lr` et `sideways-rl`. |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.writing-mode")}}
+
+## Voir aussi
+
+- L'attribut SVG [`writing-mode`](/fr/docs/Web/SVG/Attribute/writing-mode)
+- {{cssxref("direction")}}
+- {{cssxref("unicode-bidi")}}
+- {{cssxref("text-orientation")}}
+- {{cssxref("text-combine-upright")}}
+- [Les propriétés logiques en CSS](/fr/docs/Web/CSS/CSS_Logical_Properties)
+- [Mettre en forme du texte vertical (chinois, coréen, japonais, mongol)](https://www.w3.org/International/articles/vertical-text/)
+- [Tests de prise en charge des navigateurs](https://w3c.github.io/i18n-tests/results/writing-mode-vertical)
diff --git a/files/fr/web/css/z-index/index.md b/files/fr/web/css/z-index/index.md
index b8ece328df..78571de235 100644
--- a/files/fr/web/css/z-index/index.md
+++ b/files/fr/web/css/z-index/index.md
@@ -7,28 +7,27 @@ tags:
   - Reference
 translation_of: Web/CSS/z-index
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>z-index</code></strong> définit le « <em>z-order</em> » (NdT : « ordre z » n'est pas usité) d'un élément <a href="/fr/docs/Web/CSS/position">positionné</a> et de ses éléments fils ou de ses éléments flexibles (les enfants d'un élément avec <code>display: flex</code>). Lorsque des éléments se chevauchent, le <em>z-order</em> détermine l'ordre des différentes couches que formeront les éléments. Généralement, un élément couvrira un autre élément si sa valeur de  <code>z-index</code> est supérieure à celle du deuxième élément.</p>
+La propriété **`z-index`** définit le « _z-order_ » (NdT : « ordre z » n'est pas usité) d'un élément [positionné](/fr/docs/Web/CSS/position) et de ses éléments fils ou de ses éléments flexibles (les enfants d'un élément avec `display: flex`). Lorsque des éléments se chevauchent, le _z-order_ détermine l'ordre des différentes couches que formeront les éléments. Généralement, un élément couvrira un autre élément si sa valeur de  `z-index` est supérieure à celle du deuxième élément.
 
-<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>
+{{EmbedInteractiveExample("pages/css/z-index.html")}}
 
-<p>Pour les boîtes positionnées (celles pour lesquelles <code>position</code> est différent de <code>static</code>), la propriété <code>z-index</code> définit :</p>
+Pour les boîtes positionnées (celles pour lesquelles `position` est différent de `static`), la propriété `z-index` définit :
 
-<ol>
- <li>Le niveau de la boîte dans la pile par rapport <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">au contexte d'empilement</a> courant</li>
- <li>Si la boîte crée un contexte d'empilement local.</li>
-</ol>
+1.  Le niveau de la boîte dans la pile par rapport [au contexte d'empilement](/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches) courant
+2.  Si la boîte crée un contexte d'empilement local.
 
-<p>L'exemple ci-avant illustre l'impact de <code>z-index</code>. À gauche, on a dessiné trois boîtes qui se chevauchent avec <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning">un positionnement absolu</a>. Par défaut, les éléments sont empilés dans l'ordre dans lequel ils sont déclarés dans le document HTML. À droite, on présente le même document mais l'ordre des couches a été inversé grâce à <code>z-index</code>.</p>
+L'exemple ci-avant illustre l'impact de `z-index`. À gauche, on a dessiné trois boîtes qui se chevauchent avec [un positionnement absolu](/fr/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning). Par défaut, les éléments sont empilés dans l'ordre dans lequel ils sont déclarés dans le document HTML. À droite, on présente le même document mais l'ordre des couches a été inversé grâce à `z-index`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+```css
+/* Avec un mot-clé */
 z-index: auto;
 
 /* valeurs entières */
-/* type &lt;integer&gt; */
+/* type <integer> */
 z-index: 0;
 z-index: 3;
 z-index: 289;
@@ -41,36 +40,36 @@ z-index: -1;
 z-index: inherit;
 z-index: initial;
 z-index: unset;
-</pre>
+```
 
-<p>La propriété <code>z-index</code> se définit grâce au mot-clé <code><a href="#auto">auto</a></code> ou grâce à une valeur entière (<code><a href="#integer">&lt;integer&gt;</a></code>).</p>
+La propriété `z-index` se définit grâce au mot-clé [`auto`](#auto) ou grâce à une valeur entière ([`<integer>`](#integer)).
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>La boîte ne crée pas de nouveau contexte d'empilement. Le niveau d'empilement de la boîte dans le contexte d'empilement courant est le même que celui de la boîte parente.</dd>
- <dt><code>&lt;integer&gt;</code></dt>
- <dd>L'entier fourni (type {{cssxref("&lt;integer&gt;")}}) sera le niveau de la boîte dans la pile d'empilement pour le contexte d'empilement courant. La boîte crée un nouveau contexte d'empilement pour lequel son niveau est <code>0</code>. Cela signifie que les index z des descendants ne sont pas comparés à ceux des éléments en dehors de l'élément.</dd>
-</dl>
+- `auto`
+  - : La boîte ne crée pas de nouveau contexte d'empilement. Le niveau d'empilement de la boîte dans le contexte d'empilement courant est le même que celui de la boîte parente.
+- `<integer>`
+  - : L'entier fourni (type {{cssxref("&lt;integer&gt;")}}) sera le niveau de la boîte dans la pile d'empilement pour le contexte d'empilement courant. La boîte crée un nouveau contexte d'empilement pour lequel son niveau est `0`. Cela signifie que les index z des descendants ne sont pas comparés à ceux des éléments en dehors de l'élément.
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="boite-tirets"&gt;Boîte tirets
-  &lt;span class="boite-doree"&gt;Boîte dorée&lt;/span&gt;
-  &lt;span class="boite-verte"&gt;Boîte verte&lt;/span&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="boite-tirets">Boîte tirets
+  <span class="boite-doree">Boîte dorée</span>
+  <span class="boite-verte">Boîte verte</span>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css; highlight:[3,11,19]">.boite-tirets {
+```css
+.boite-tirets {
   position: relative;
   z-index: 1;
   border: dashed;
@@ -96,45 +95,26 @@ z-index: unset;
   height: 7em;
   opacity: 0.9;
 }
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemple', '550', '200', '')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', "Comportement de z-index pour l'animation")}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définit <code>z-index</code> comme pouvant être animé.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.properties.z-index")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété CSS {{cssxref("position")}}</li>
- <li><a href="/fr/docs/Web/CSS/Comprendre_z-index">Comprendre le fonctionnement de <code>z-index</code></a></li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemple', '550', '200', '')}}
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                                     | Commentaires                                |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', "Comportement de z-index pour l'animation")}} | {{Spec2('CSS3 Transitions')}} | Définit `z-index` comme pouvant être animé. |
+| {{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}                                                     | {{Spec2('CSS2.1')}}                 | Définition initiale                         |
+
+{{cssinfo}}
+
+## Compatibilité des navigateurs
+
+{{Compat("css.properties.z-index")}}
+
+## Voir aussi
+
+- La propriété CSS {{cssxref("position")}}
+- [Comprendre le fonctionnement de `z-index`](/fr/docs/Web/CSS/Comprendre_z-index)
diff --git a/files/fr/web/css/zoom/index.md b/files/fr/web/css/zoom/index.md
index 2d251aa1be..43612f3a43 100644
--- a/files/fr/web/css/zoom/index.md
+++ b/files/fr/web/css/zoom/index.md
@@ -8,53 +8,72 @@ tags:
   - Reference
 translation_of: Web/CSS/zoom
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p>La propriété non-standard <strong><code>zoom</code></strong> permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser <a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">les transformations CSS</a>, si possible. Cependant, contrairement aux transformations CSS, <strong><code>zoom</code></strong> affecte la taille de l'élément.</p>
+La propriété non-standard **`zoom`** permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser [les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms), si possible. Cependant, contrairement aux transformations CSS, **`zoom`** affecte la taille de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 zoom: normal;
 zoom: reset;
 
 /* VAleurs exprimées en pourcents */
-/* Type &lt;percentage&gt; */
+/* Type <percentage> */
 zoom: 50%;
 zoom: 200%;
 
 /* Valeurs numériques */
-/* Type &lt;number&gt; */
+/* Type <number> */
 zoom: 1.1;
 zoom: 0.7;
 
 /* Valeurs globales */
 zoom: inherit;
 zoom: initial;
-zoom: unset;</pre>
+zoom: unset;
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>L'élément est affiché avec sa taille normale.</dd>
- <dt><code>reset</code> {{non-standard_inline}}</dt>
- <dd>Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing <kbd>Ctrl</kbd>-<kbd>-</kbd> ou <kbd>Ctrl</kbd>+<kbd>+</kbd>) to the document. Only supported by WebKit (and possibly Blink).</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>Le facteur de zoom à appliquer. <code>100%</code> est équivalent au mot-clé <code>normal</code>. Les valeurs supérieures à <code>100%</code> agrandissent l'élément et les valeurs inférieures le réduisent.</dd>
- <dt>{{cssxref("&lt;number&gt;")}}</dt>
- <dd>Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages :  <code>1.0</code> correspond à <code>normal</code> (ou <code>100%</code>) , les valeurs supérieures à <code>1.0</code> agrandissent l'élément et les valeurs inférieures le réduisent.</dd>
-</dl>
+- `normal`
+  - : L'élément est affiché avec sa taille normale.
+- `reset` {{non-standard_inline}}
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing
+
+    <kbd>Ctrl</kbd>
+
+    \-
+
+    <kbd>-</kbd>
+
+    ou
+
+    <kbd>Ctrl</kbd>
+
+    \+
+
+    <kbd>+</kbd>
+
+    ) to the document. Only supported by WebKit (and possibly Blink).
+
+- {{cssxref("&lt;percentage&gt;")}}
+  - : Le facteur de zoom à appliquer. `100%` est équivalent au mot-clé `normal`. Les valeurs supérieures à `100%` agrandissent l'élément et les valeurs inférieures le réduisent.
+- {{cssxref("&lt;number&gt;")}}
+  - : Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages :  `1.0` correspond à `normal` (ou `100%`) , les valeurs supérieures à `1.0` agrandissent l'élément et les valeurs inférieures le réduisent.
+
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p.petit {
+```css
+p.petit {
   zoom: 75%;
 }
 p.normal {
@@ -68,32 +87,33 @@ p {
 }
 p:hover {
   zoom: reset;
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="petit"&gt;Petit&lt;/p&gt;
-&lt;p class="normal"&gt;Normal&lt;/p&gt;
-&lt;p class="gros"&gt;Gros&lt;/p&gt;</pre>
+```html
+<p class="petit">Petit</p>
+<p class="normal">Normal</p>
+<p class="gros">Gros</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+{{EmbedLiveSample("Exemples","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété n'est pas standard et est née avec Internet Explorer. Apple la décrit <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">dans la référence CSS pour Safari</a>. Rossen Atanassov, de Microsoft, a dressé <a href="https://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">un brouillon de spécification sur GitHub</a></p>
+Cette propriété n'est pas standard et est née avec Internet Explorer. Apple la décrit [dans la référence CSS pour Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15). Rossen Atanassov, de Microsoft, a dressé [un brouillon de spécification sur GitHub](https://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html)
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.zoom")}}</p>
+{{Compat("css.properties.zoom")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://css-tricks.com/almanac/properties/z/zoom/">L'article de CSS-Tricks sur <code>zoom</code></a></li>
- <li>Le descripteur <code><a href="/fr/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518">zoom</a></code> pour la règle @ <code><a href="/fr/docs/Web/CSS/@viewport">@viewport</a></code></li>
- <li>{{bug("390936")}} à propos de l'implémentation de la propriété dans Firefox</li>
-</ul>
+- [L'article de CSS-Tricks sur `zoom`](https://css-tricks.com/almanac/properties/z/zoom/)
+- Le descripteur [`zoom`](/fr/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518) pour la règle @ [`@viewport`](/fr/docs/Web/CSS/@viewport)
+- {{bug("390936")}} à propos de l'implémentation de la propriété dans Firefox